diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e2abfad7..b3b9cdfe 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -1,31 +1,31 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
-// GO AFTER THE REQUIRES BELOW.
-//  
-//= require jquery
-//= require jquery-ui
-//= require jquery_ujs
-//= require ./orderedLibraries/underscore
-//= require ./orderedLibraries/backbone
-//= require_directory ./lib
-//= require ./src/Metamaps.GlobalUI
-//= require ./src/Metamaps.Router
-//= require ./src/Metamaps.Backbone
-//= require ./src/Metamaps.Views
-//= require ./src/views/chatView
-//= require ./src/views/videoView
-//= require ./src/views/room
-//= require ./src/JIT
-//= require ./src/Metamaps
-//= require ./src/Metamaps.JIT
-//= require_directory ./shims
-//= require_directory ./require
-//= require_directory ./famous
\ No newline at end of file
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//  
+//= require jquery
+//= require jquery-ui
+//= require jquery_ujs
+//= require ./orderedLibraries/underscore
+//= require ./orderedLibraries/backbone
+//= require_directory ./lib
+//= require ./src/Metamaps.GlobalUI
+//= require ./src/Metamaps.Router
+//= require ./src/Metamaps.Backbone
+//= require ./src/Metamaps.Views
+//= require ./src/views/chatView
+//= require ./src/views/videoView
+//= require ./src/views/room
+//= require ./src/JIT
+//= require ./src/Metamaps
+//= require ./src/Metamaps.JIT
+//= require_directory ./shims
+//= require_directory ./require
+//= require_directory ./famous
diff --git a/app/assets/javascripts/lib/cloudcarousel.js b/app/assets/javascripts/lib/cloudcarousel.js
index db7633c7..b37abfd7 100644
--- a/app/assets/javascripts/lib/cloudcarousel.js
+++ b/app/assets/javascripts/lib/cloudcarousel.js
@@ -1,426 +1,426 @@
-//////////////////////////////////////////////////////////////////////////////////
-// CloudCarousel V1.0.5
-// (c) 2011 by R Cecco. <http://www.professorcloud.com>
-// MIT License
-//
-// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
-//
-// Please retain this copyright header in all versions of the software
-//////////////////////////////////////////////////////////////////////////////////
-var matched, browser;
-
-jQuery.uaMatch = function( ua ) {
-    ua = ua.toLowerCase();
-
-    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
-        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
-        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
-        /(msie) ([\w.]+)/.exec( ua ) ||
-        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
-        [];
-
-    return {
-        browser: match[ 1 ] || "",
-        version: match[ 2 ] || "0"
-    };
-};
-
-matched = jQuery.uaMatch( navigator.userAgent );
-browser = {};
-
-if ( matched.browser ) {
-    browser[ matched.browser ] = true;
-    browser.version = matched.version;
-}
-
-// Chrome is Webkit, but Webkit is also Safari.
-if ( browser.chrome ) {
-    browser.webkit = true;
-} else if ( browser.webkit ) {
-    browser.safari = true;
-}
-
-jQuery.browser = browser;
-
-(function($) {
-
-	// START Reflection object.
-	// Creates a reflection for underneath an image.
-	// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.	
-	// The position and size of the reflection gets updated by updateAll() in Controller.
-	function Reflection(img, reflHeight, opacity) {				
-		
-		var	reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;
-	
-		parent = $(img.parentNode);
-		this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
-        if ( !reflection.getContext &&  $.browser.msie) {
-			this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];					
-			reflection.src = img.src;			
-			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";	
-			
-        } else {							
-			cntx = reflection.getContext("2d");
-			try {
-				
-				
-				$(reflection).attr({width: imageWidth, height: reflHeight});
-				cntx.save();
-				cntx.translate(0, imageHeight-1);
-				cntx.scale(1, -1);				
-				cntx.drawImage(img, 0, 0, imageWidth, imageHeight);				
-				cntx.restore();
-				cntx.globalCompositeOperation = "destination-out";
-				gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
-				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
-				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
-				cntx.fillStyle = gradient;
-				cntx.fillRect(0, 0, imageWidth, reflHeight);				
-			} catch(e) {			
-				return;
-			}		
-		}
-		// Store a copy of the alt and title attrs into the reflection
-		$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} );	
-				
-	}	//END Reflection object
-
-	// START Item object.
-	// A wrapper object for items within the carousel.
-	var	Item = function(imgIn, options)
-	{								
-		this.orgWidth = imgIn.width;			
-		this.orgHeight = imgIn.height;		
-		this.image = imgIn;
-		this.reflection = null;					
-		this.alt = imgIn.alt;
-		this.title = imgIn.title;
-		this.imageOK = false;		
-		this.options = options;				
-						
-		this.imageOK = true;	
-		
-		if (this.options.reflHeight > 0)
-		{													
-			this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);					
-		}
-		$(this.image).css('position','absolute');	// Bizarre. This seems to reset image width to 0 on webkit!					
-	};// END Item object
-	
-	
-	// Controller object.
-	// This handles moving all the items, dealing with mouse clicks etc.	
-	var Controller = function(container, images, options)
-	{						
-		var	items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this;
-		this.controlTimer = 0;
-		this.stopped = false;
-		//this.imagesLoaded = 0;
-		this.container = container;
-		this.xRadius = options.xRadius;
-		this.yRadius = options.yRadius;
-		this.showFrontTextTimer = 0;
-		this.autoRotateTimer = 0;
-		if (options.xRadius === 0)
-		{
-			this.xRadius = ($(container).width()/2.3);
-		}
-		if (options.yRadius === 0)
-		{
-			this.yRadius = ($(container).height()/6);
-		}
-
-		this.xCentre = options.xPos;
-		this.yCentre = options.yPos;
-		this.frontIndex = 0;	// Index of the item at the front
-		
-		// Start with the first item at the front.
-		this.rotation = this.destRotation = Math.PI/2;
-		this.timeDelay = 1000/options.FPS;
-								
-		// Turn on the infoBox
-		if(options.altBox !== null)
-		{
-			$(options.altBox).css('display','block');	
-			$(options.titleBox).css('display','block');	
-		}
-		// Turn on relative position for container to allow absolutely positioned elements
-		// within it to work.
-		$(container).css({ position:'relative', overflow:'hidden'} );
-	
-		$(options.buttonLeft).css('display','inline');
-		$(options.buttonRight).css('display','inline');
-		
-		// Setup the buttons.
-		$(options.buttonLeft).bind('mouseup',this,function(event){
-			event.data.rotate(-1);	
-			return false;
-		});
-		$(options.buttonRight).bind('mouseup',this,function(event){															
-			event.data.rotate(1);	
-			return false;
-		});
-		
-		// Add code that makes tab and shift+tab scroll through metacodes
-		$('.new_topic').bind('keydown',this,function(event){
-            if (event.keyCode == 9 && event.shiftKey) {
-				event.data.rotate(-1);
-                event.preventDefault();
-                event.stopPropagation();
-			} else if (event.keyCode == 9) {
-				event.data.rotate(1);
-                event.preventDefault();
-                event.stopPropagation();
-            }
-		});
-		
-		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
-		if (options.mouseWheel)
-		{
-			// START METAMAPS CODE
-			$('body').bind('mousewheel',this,function(event, delta) {					 
-					 if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
-					 	event.data.rotate(delta);
-					 	return false;
-					 }
-				 });
-			// END METAMAPS CODE
-			/* ORIGINAL CODE
-			$(container).bind('mousewheel',this,function(event, delta) {					 
-					 event.data.rotate(delta);
-					 return false;
-				 });
-			*/
-		}
-		$(container).bind('mouseover click',this,function(event){
-			
-			clearInterval(event.data.autoRotateTimer);		// Stop auto rotation if mouse over.
-			var	text = $(event.target).attr('alt');		
-			// If we have moved over a carousel item, then show the alt and title text.
-		
-			if ( text !== undefined && text !== null )
-			{
-					
-				clearTimeout(event.data.showFrontTextTimer);			
-				$(options.altBox).html( ($(event.target).attr('alt') ));
-				//$(options.titleBox).html( ($(event.target).attr('title') ));							
-				if ( options.bringToFront && event.type == 'click' )				
-				{
-                    $(options.titleBox).html( ($(event.target).attr('title') ));
-				    // METAMAPS CODE
-			        Metamaps.Create.newTopic.metacode = $(event.target).attr('data-id');
-			        // NOT METAMAPS CODE
-					var	idx = $(event.target).data('itemIndex');	
-					var	frontIndex = event.data.frontIndex;
-					//var	diff = idx - frontIndex;                    
-                    var        diff = (idx - frontIndex) % images.length;
-                    if (Math.abs(diff) > images.length / 2) {
-                        diff += (diff > 0 ? -images.length : images.length);
-                    }
-                    
-					event.data.rotate(-diff);
-				}
-			}
-		});
-		// If we have moved out of a carousel item (or the container itself),
-		// restore the text of the front item in 1 second.
-		$(container).bind('mouseout',this,function(event){
-				var	context = event.data;				
-				clearTimeout(context.showFrontTextTimer);				
-				context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
-				context.autoRotate();	// Start auto rotation.
-		});
-
-		// Prevent items from being selected as mouse is moved and clicked in the container.
-		$(container).bind('mousedown',this,function(event){	
-			
-			event.data.container.focus();
-			return false;
-		});
-		container.onselectstart = function () { return false; };		// For IE.
-
-		this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];
-	
-		// Shows the text from the front most item.
-		this.showFrontText = function()
-		{	
-			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
-            // METAMAPS CODE
-			Metamaps.Create.newTopic.metacode = $(items[this.frontIndex].image).attr('data-id');
-        //$('img.cloudcarousel').css({"background":"none", "width":"","height":""});
-        //$(items[this.frontIndex].image).css({"width":"45px","height":"45px"});
-			// NOT METAMAPS CODE
-			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
-			$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
-		};
-						
-		this.go = function()
-		{				
-			if(this.controlTimer !== 0) { return; }
-			var	context = this;
-			this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);					
-		};
-		
-		this.stop = function()
-		{
-			clearTimeout(this.controlTimer);
-			this.controlTimer = 0;				
-		};
-		
-		
-		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
-		this.rotate = function(direction)
-		{	
-			this.frontIndex -= direction;
-			if (this.frontIndex == -1) this.frontIndex = items.length - 1;
-			this.frontIndex %= items.length;					 			
-			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
-			this.showFrontText();
-			this.go();			
-		};
-		
-		
-		this.autoRotate = function()
-		{			
-			if ( options.autoRotate !== 'no' )
-			{
-				var	dir = (options.autoRotate === 'right')? 1 : -1;
-				this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
-			}
-		};
-		
-		// This is the main loop function that moves everything.
-		this.updateAll = function()
-		{											
-			var	minScale = options.minScale;	// This is the smallest scale applied to the furthest item.
-			var smallRange = (1-minScale) * 0.5;
-			var	w,h,x,y,scale,item,sinVal;
-			
-			var	change = (this.destRotation - this.rotation);				
-			var	absChange = Math.abs(change);
-	
-			this.rotation += change * options.speed;
-			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }			
-			var	itemsLen = items.length;
-			var	spacing = (Math.PI / itemsLen) * 2; 
-			//var	wrapStyle = null;
-			var	radians = this.rotation;
-			var	isMSIE = $.browser.msie;
-		
-			// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
-			// See http://dev.opera.com/articles/view/efficient-javascript/?page=3			
-			this.innerWrapper.style.display = 'none';		
-			
-			var	style;
-			var	px = 'px', reflHeight;	
-			var context = this;
-			for (var i = 0; i<itemsLen ;i++)
-			{
-				item = items[i];
-								
-				sinVal = funcSin(radians);
-				
-				scale = ((sinVal+1) * smallRange) + minScale;
-				
-				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
-				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);		
-		
-        if (item.imageOK)
-				{
-					var	img = item.image;
-          
-          img.style.zIndex = "" + (scale * 100)>>0;	// >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
-          w = img.width = item.orgWidth * scale;					
-					h = img.height = item.orgHeight * scale;
-					img.style.left = x + px ;
-					img.style.top = y + px;
-					if (item.reflection !== null)
-					{																										
-						reflHeight = options.reflHeight * scale;						
-						style = item.reflection.element.style;
-						style.left = x + px;
-						style.top = y + h + options.reflGap * scale + px;
-						style.width = w + px;								
-						if (isMSIE)
-						{											
-							style.filter.finishy = (reflHeight / h * 100);				
-						}else
-						{								
-							style.height = reflHeight + px;															
-						}																													
-					}					
-				}
-				radians += spacing;
-			}
-			// Turn display back on.					
-			this.innerWrapper.style.display = 'block';
-
-			// If we have a preceptable change in rotation then loop again next frame.
-			if ( absChange >= 0.001 )
-			{				
-				this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);		
-			}else
-			{
-				// Otherwise just stop completely.				
-				this.stop();
-			}
-		}; // END updateAll		
-		
-		// Create an Item object for each image	
-//		func = function(){return;ctx.updateAll();} ;
-
-		// Check if images have loaded. We need valid widths and heights for the reflections.
-		this.checkImagesLoaded = function()
-		{
-			var	i;
-			for(i=0;i<images.length;i++) {
-				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
-				{
-					return;					
-				}				
-			}
-			for(i=0;i<images.length;i++) {				
-				 items.push( new Item( images[i], options ) );	
-				 $(images[i]).data('itemIndex',i);
-			}
-			// If all images have valid widths and heights, we can stop checking.			
-			clearInterval(this.tt);
-			this.showFrontText();
-			this.autoRotate();	
-			this.updateAll();
-			
-		};
-
-		this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);	
-	}; // END Controller object
-	
-	// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
-	$.fn.CloudCarousel = function(options) {
-			
-		this.each( function() {			
-			
-			options = $.extend({}, {
-							   reflHeight:0,
-							   reflOpacity:0.5,
-							   reflGap:0,
-							   minScale:0.5,
-							   xPos:0,
-							   yPos:0,
-							   xRadius:0,
-							   yRadius:0,
-							   altBox:null,
-							   titleBox:null,
-							   FPS: 30,
-							   autoRotate: 'no',
-							   autoRotateDelay: 1500,
-							   speed:0.2,
-							   mouseWheel: false,
-								 bringToFront: false
-			},options );									
-			// Create a Controller for each carousel.		
-			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
-		});				
-		return this;
-	};
-
+//////////////////////////////////////////////////////////////////////////////////
+// CloudCarousel V1.0.5
+// (c) 2011 by R Cecco. <http://www.professorcloud.com>
+// MIT License
+//
+// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
+//
+// Please retain this copyright header in all versions of the software
+//////////////////////////////////////////////////////////////////////////////////
+var matched, browser;
+
+jQuery.uaMatch = function( ua ) {
+    ua = ua.toLowerCase();
+
+    var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+        /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+        /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+        /(msie) ([\w.]+)/.exec( ua ) ||
+        ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+        [];
+
+    return {
+        browser: match[ 1 ] || "",
+        version: match[ 2 ] || "0"
+    };
+};
+
+matched = jQuery.uaMatch( navigator.userAgent );
+browser = {};
+
+if ( matched.browser ) {
+    browser[ matched.browser ] = true;
+    browser.version = matched.version;
+}
+
+// Chrome is Webkit, but Webkit is also Safari.
+if ( browser.chrome ) {
+    browser.webkit = true;
+} else if ( browser.webkit ) {
+    browser.safari = true;
+}
+
+jQuery.browser = browser;
+
+(function($) {
+
+	// START Reflection object.
+	// Creates a reflection for underneath an image.
+	// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.	
+	// The position and size of the reflection gets updated by updateAll() in Controller.
+	function Reflection(img, reflHeight, opacity) {				
+		
+		var	reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;
+	
+		parent = $(img.parentNode);
+		this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
+        if ( !reflection.getContext &&  $.browser.msie) {
+			this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];					
+			reflection.src = img.src;			
+			reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";	
+			
+        } else {							
+			cntx = reflection.getContext("2d");
+			try {
+				
+				
+				$(reflection).attr({width: imageWidth, height: reflHeight});
+				cntx.save();
+				cntx.translate(0, imageHeight-1);
+				cntx.scale(1, -1);				
+				cntx.drawImage(img, 0, 0, imageWidth, imageHeight);				
+				cntx.restore();
+				cntx.globalCompositeOperation = "destination-out";
+				gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
+				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
+				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+				cntx.fillStyle = gradient;
+				cntx.fillRect(0, 0, imageWidth, reflHeight);				
+			} catch(e) {			
+				return;
+			}		
+		}
+		// Store a copy of the alt and title attrs into the reflection
+		$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} );	
+				
+	}	//END Reflection object
+
+	// START Item object.
+	// A wrapper object for items within the carousel.
+	var	Item = function(imgIn, options)
+	{								
+		this.orgWidth = imgIn.width;			
+		this.orgHeight = imgIn.height;		
+		this.image = imgIn;
+		this.reflection = null;					
+		this.alt = imgIn.alt;
+		this.title = imgIn.title;
+		this.imageOK = false;		
+		this.options = options;				
+						
+		this.imageOK = true;	
+		
+		if (this.options.reflHeight > 0)
+		{													
+			this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);					
+		}
+		$(this.image).css('position','absolute');	// Bizarre. This seems to reset image width to 0 on webkit!					
+	};// END Item object
+	
+	
+	// Controller object.
+	// This handles moving all the items, dealing with mouse clicks etc.	
+	var Controller = function(container, images, options)
+	{						
+		var	items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this;
+		this.controlTimer = 0;
+		this.stopped = false;
+		//this.imagesLoaded = 0;
+		this.container = container;
+		this.xRadius = options.xRadius;
+		this.yRadius = options.yRadius;
+		this.showFrontTextTimer = 0;
+		this.autoRotateTimer = 0;
+		if (options.xRadius === 0)
+		{
+			this.xRadius = ($(container).width()/2.3);
+		}
+		if (options.yRadius === 0)
+		{
+			this.yRadius = ($(container).height()/6);
+		}
+
+		this.xCentre = options.xPos;
+		this.yCentre = options.yPos;
+		this.frontIndex = 0;	// Index of the item at the front
+		
+		// Start with the first item at the front.
+		this.rotation = this.destRotation = Math.PI/2;
+		this.timeDelay = 1000/options.FPS;
+								
+		// Turn on the infoBox
+		if(options.altBox !== null)
+		{
+			$(options.altBox).css('display','block');	
+			$(options.titleBox).css('display','block');	
+		}
+		// Turn on relative position for container to allow absolutely positioned elements
+		// within it to work.
+		$(container).css({ position:'relative', overflow:'hidden'} );
+	
+		$(options.buttonLeft).css('display','inline');
+		$(options.buttonRight).css('display','inline');
+		
+		// Setup the buttons.
+		$(options.buttonLeft).bind('mouseup',this,function(event){
+			event.data.rotate(-1);	
+			return false;
+		});
+		$(options.buttonRight).bind('mouseup',this,function(event){															
+			event.data.rotate(1);	
+			return false;
+		});
+		
+		// Add code that makes tab and shift+tab scroll through metacodes
+		$('.new_topic').bind('keydown',this,function(event){
+            if (event.keyCode == 9 && event.shiftKey) {
+				event.data.rotate(-1);
+                event.preventDefault();
+                event.stopPropagation();
+			} else if (event.keyCode == 9) {
+				event.data.rotate(1);
+                event.preventDefault();
+                event.stopPropagation();
+            }
+		});
+		
+		// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
+		if (options.mouseWheel)
+		{
+			// START METAMAPS CODE
+			$('body').bind('mousewheel',this,function(event, delta) {					 
+					 if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
+					 	event.data.rotate(delta);
+					 	return false;
+					 }
+				 });
+			// END METAMAPS CODE
+			/* ORIGINAL CODE
+			$(container).bind('mousewheel',this,function(event, delta) {					 
+					 event.data.rotate(delta);
+					 return false;
+				 });
+			*/
+		}
+		$(container).bind('mouseover click',this,function(event){
+			
+			clearInterval(event.data.autoRotateTimer);		// Stop auto rotation if mouse over.
+			var	text = $(event.target).attr('alt');		
+			// If we have moved over a carousel item, then show the alt and title text.
+		
+			if ( text !== undefined && text !== null )
+			{
+					
+				clearTimeout(event.data.showFrontTextTimer);			
+				$(options.altBox).html( ($(event.target).attr('alt') ));
+				//$(options.titleBox).html( ($(event.target).attr('title') ));							
+				if ( options.bringToFront && event.type == 'click' )				
+				{
+                    $(options.titleBox).html( ($(event.target).attr('title') ));
+				    // METAMAPS CODE
+			        Metamaps.Create.newTopic.metacode = $(event.target).attr('data-id');
+			        // NOT METAMAPS CODE
+					var	idx = $(event.target).data('itemIndex');	
+					var	frontIndex = event.data.frontIndex;
+					//var	diff = idx - frontIndex;                    
+                    var        diff = (idx - frontIndex) % images.length;
+                    if (Math.abs(diff) > images.length / 2) {
+                        diff += (diff > 0 ? -images.length : images.length);
+                    }
+                    
+					event.data.rotate(-diff);
+				}
+			}
+		});
+		// If we have moved out of a carousel item (or the container itself),
+		// restore the text of the front item in 1 second.
+		$(container).bind('mouseout',this,function(event){
+				var	context = event.data;				
+				clearTimeout(context.showFrontTextTimer);				
+				context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
+				context.autoRotate();	// Start auto rotation.
+		});
+
+		// Prevent items from being selected as mouse is moved and clicked in the container.
+		$(container).bind('mousedown',this,function(event){	
+			
+			event.data.container.focus();
+			return false;
+		});
+		container.onselectstart = function () { return false; };		// For IE.
+
+		this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];
+	
+		// Shows the text from the front most item.
+		this.showFrontText = function()
+		{	
+			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
+            // METAMAPS CODE
+			Metamaps.Create.newTopic.metacode = $(items[this.frontIndex].image).attr('data-id');
+        //$('img.cloudcarousel').css({"background":"none", "width":"","height":""});
+        //$(items[this.frontIndex].image).css({"width":"45px","height":"45px"});
+			// NOT METAMAPS CODE
+			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
+			$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
+		};
+						
+		this.go = function()
+		{				
+			if(this.controlTimer !== 0) { return; }
+			var	context = this;
+			this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);					
+		};
+		
+		this.stop = function()
+		{
+			clearTimeout(this.controlTimer);
+			this.controlTimer = 0;				
+		};
+		
+		
+		// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
+		this.rotate = function(direction)
+		{	
+			this.frontIndex -= direction;
+			if (this.frontIndex == -1) this.frontIndex = items.length - 1;
+			this.frontIndex %= items.length;					 			
+			this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
+			this.showFrontText();
+			this.go();			
+		};
+		
+		
+		this.autoRotate = function()
+		{			
+			if ( options.autoRotate !== 'no' )
+			{
+				var	dir = (options.autoRotate === 'right')? 1 : -1;
+				this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
+			}
+		};
+		
+		// This is the main loop function that moves everything.
+		this.updateAll = function()
+		{											
+			var	minScale = options.minScale;	// This is the smallest scale applied to the furthest item.
+			var smallRange = (1-minScale) * 0.5;
+			var	w,h,x,y,scale,item,sinVal;
+			
+			var	change = (this.destRotation - this.rotation);				
+			var	absChange = Math.abs(change);
+	
+			this.rotation += change * options.speed;
+			if ( absChange < 0.001 ) { this.rotation = this.destRotation; }			
+			var	itemsLen = items.length;
+			var	spacing = (Math.PI / itemsLen) * 2; 
+			//var	wrapStyle = null;
+			var	radians = this.rotation;
+			var	isMSIE = $.browser.msie;
+		
+			// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
+			// See http://dev.opera.com/articles/view/efficient-javascript/?page=3			
+			this.innerWrapper.style.display = 'none';		
+			
+			var	style;
+			var	px = 'px', reflHeight;	
+			var context = this;
+			for (var i = 0; i<itemsLen ;i++)
+			{
+				item = items[i];
+								
+				sinVal = funcSin(radians);
+				
+				scale = ((sinVal+1) * smallRange) + minScale;
+				
+				x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.5)) * scale);
+				y = this.yCentre + (( (sinVal * this.yRadius)  ) * scale);		
+		
+        if (item.imageOK)
+				{
+					var	img = item.image;
+          
+          img.style.zIndex = "" + (scale * 100)>>0;	// >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
+          w = img.width = item.orgWidth * scale;					
+					h = img.height = item.orgHeight * scale;
+					img.style.left = x + px ;
+					img.style.top = y + px;
+					if (item.reflection !== null)
+					{																										
+						reflHeight = options.reflHeight * scale;						
+						style = item.reflection.element.style;
+						style.left = x + px;
+						style.top = y + h + options.reflGap * scale + px;
+						style.width = w + px;								
+						if (isMSIE)
+						{											
+							style.filter.finishy = (reflHeight / h * 100);				
+						}else
+						{								
+							style.height = reflHeight + px;															
+						}																													
+					}					
+				}
+				radians += spacing;
+			}
+			// Turn display back on.					
+			this.innerWrapper.style.display = 'block';
+
+			// If we have a preceptable change in rotation then loop again next frame.
+			if ( absChange >= 0.001 )
+			{				
+				this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);		
+			}else
+			{
+				// Otherwise just stop completely.				
+				this.stop();
+			}
+		}; // END updateAll		
+		
+		// Create an Item object for each image	
+//		func = function(){return;ctx.updateAll();} ;
+
+		// Check if images have loaded. We need valid widths and heights for the reflections.
+		this.checkImagesLoaded = function()
+		{
+			var	i;
+			for(i=0;i<images.length;i++) {
+				if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete)  ))
+				{
+					return;					
+				}				
+			}
+			for(i=0;i<images.length;i++) {				
+				 items.push( new Item( images[i], options ) );	
+				 $(images[i]).data('itemIndex',i);
+			}
+			// If all images have valid widths and heights, we can stop checking.			
+			clearInterval(this.tt);
+			this.showFrontText();
+			this.autoRotate();	
+			this.updateAll();
+			
+		};
+
+		this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);	
+	}; // END Controller object
+	
+	// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
+	$.fn.CloudCarousel = function(options) {
+			
+		this.each( function() {			
+			
+			options = $.extend({}, {
+							   reflHeight:0,
+							   reflOpacity:0.5,
+							   reflGap:0,
+							   minScale:0.5,
+							   xPos:0,
+							   yPos:0,
+							   xRadius:0,
+							   yRadius:0,
+							   altBox:null,
+							   titleBox:null,
+							   FPS: 30,
+							   autoRotate: 'no',
+							   autoRotateDelay: 1500,
+							   speed:0.2,
+							   mouseWheel: false,
+								 bringToFront: false
+			},options );									
+			// Create a Controller for each carousel.		
+			$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
+		});				
+		return this;
+	};
+
 })(jQuery);
\ No newline at end of file
diff --git a/app/assets/javascripts/lib/jquery.purr.js b/app/assets/javascripts/lib/jquery.purr.js
index 5acdab50..1972165b 100644
--- a/app/assets/javascripts/lib/jquery.purr.js
+++ b/app/assets/javascripts/lib/jquery.purr.js
@@ -1,180 +1,180 @@
-/**
- * jquery.purr.js
- * Copyright (c) 2008 Net Perspective (net-perspective.com)
- * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
- * 
- * @author R.A. Ray
- * @projectDescription	jQuery plugin for dynamically displaying unobtrusive messages in the browser. Mimics the behavior of the MacOS program "Growl."
- * @version 0.1.0
- * 
- * @requires jquery.js (tested with 1.2.6)
- * 
- * @param fadeInSpeed 					int - Duration of fade in animation in miliseconds
- * 													default: 500
- *	@param fadeOutSpeed  				int - Duration of fade out animationin miliseconds
- 														default: 500
- *	@param removeTimer  				int - Timeout, in miliseconds, before notice is removed once it is the top non-sticky notice in the list
- 														default: 4000
- *	@param isSticky 						bool - Whether the notice should fade out on its own or wait to be manually closed
- 														default: false
- *	@param usingTransparentPNG 	bool - Whether or not the notice is using transparent .png images in its styling
- 														default: false
- */
-
-( function( $ ) {
-	
-	$.purr = function ( notice, options )
-	{ 
-		// Convert notice to a jQuery object
-		notice = $( notice );
-		
-		// Add a class to denote the notice as not sticky
-		if ( !options.isSticky )
-		{
-			notice.addClass( 'not-sticky' );
-		};
-		
-		// Get the container element from the page
-		var cont = document.getElementById( 'purr-container' );
-		
-		// If the container doesn't yet exist, we need to create it
-		if ( !cont )
-		{
-			cont = '<div id="purr-container"></div>';
-		}
-		
-		// Convert cont to a jQuery object
-		cont = $( cont );
-		
-		// Add the container to the page
-		$( 'body' ).append( cont );
-			
-		notify();
-
-		function notify ()
-		{	
-			// Set up the close button
-			var close = document.createElement( 'a' );
-			$( close ).attr(	
-				{
-					className: 'close',
-					href: '#close',
-					innerHTML: 'Close'
-				}
-			)
-				.appendTo( notice )
-					.click( function ()
-						{
-							removeNotice();
-							
-							return false;
-						}
-					);
-			
-			// Add the notice to the page and keep it hidden initially
-			notice.appendTo( cont )
-				.hide();
-				
-			if ( jQuery.browser.msie && options.usingTransparentPNG )
-			{
-				// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
-				// notice style, we'll just skip the fading in.
-				notice.show();
-			}
-			else
-			{
-				//Fade in the notice we just added
-				notice.fadeIn( options.fadeInSpeed );
-			}
-			
-			// Set up the removal interval for the added notice if that notice is not a sticky
-			if ( !options.isSticky )
-			{
-				var topSpotInt = setInterval( function ()
-				{
-					// Check to see if our notice is the first non-sticky notice in the list
-					if ( notice.prevAll( '.not-sticky' ).length == 0 )
-					{ 
-						// Stop checking once the condition is met
-						clearInterval( topSpotInt );
-						
-						// Call the close action after the timeout set in options
-						setTimeout( function ()
-							{
-								removeNotice();
-							}, options.removeTimer
-						);
-					}
-				}, 200 );	
-			}
-		}
-
-		function removeNotice ()
-		{
-			// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
-			// notice style, we'll just skip the fading out.
-			if ( jQuery.browser.msie && options.usingTransparentPNG )
-			{
-				notice.css( { opacity: 0	} )
-					.animate( 
-						{ 
-							height: '0px' 
-						}, 
-						{ 
-							duration: options.fadeOutSpeed, 
-							complete:  function ()
-								{
-									notice.remove();
-								} 
-							} 
-					);
-			}
-			else
-			{
-				// Fade the object out before reducing its height to produce the sliding effect
-				notice.animate( 
-					{ 
-						opacity: '0'
-					}, 
-					{ 
-						duration: options.fadeOutSpeed, 
-						complete: function () 
-							{
-								notice.animate(
-									{
-										height: '0px'
-									},
-									{
-										duration: options.fadeOutSpeed,
-										complete: function ()
-											{
-												notice.remove();
-											}
-									}
-								);
-							}
-					} 
-				);
-			}
-		};
-	};
-	
-	$.fn.purr = function ( options )
-	{
-		options = options || {};
-		options.fadeInSpeed = options.fadeInSpeed || 500;
-		options.fadeOutSpeed = options.fadeOutSpeed || 500;
-		options.removeTimer = options.removeTimer || 4000;
-		options.isSticky = options.isSticky || false;
-		options.usingTransparentPNG = options.usingTransparentPNG || false;
-		
-		this.each( function() 
-			{
-				new $.purr( this, options );
-			}
-		);
-		
-		return this;
-	};
-})( jQuery );
-
+/**
+ * jquery.purr.js
+ * Copyright (c) 2008 Net Perspective (net-perspective.com)
+ * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
+ * 
+ * @author R.A. Ray
+ * @projectDescription	jQuery plugin for dynamically displaying unobtrusive messages in the browser. Mimics the behavior of the MacOS program "Growl."
+ * @version 0.1.0
+ * 
+ * @requires jquery.js (tested with 1.2.6)
+ * 
+ * @param fadeInSpeed 					int - Duration of fade in animation in miliseconds
+ * 													default: 500
+ *	@param fadeOutSpeed  				int - Duration of fade out animationin miliseconds
+ 														default: 500
+ *	@param removeTimer  				int - Timeout, in miliseconds, before notice is removed once it is the top non-sticky notice in the list
+ 														default: 4000
+ *	@param isSticky 						bool - Whether the notice should fade out on its own or wait to be manually closed
+ 														default: false
+ *	@param usingTransparentPNG 	bool - Whether or not the notice is using transparent .png images in its styling
+ 														default: false
+ */
+
+( function( $ ) {
+	
+	$.purr = function ( notice, options )
+	{ 
+		// Convert notice to a jQuery object
+		notice = $( notice );
+		
+		// Add a class to denote the notice as not sticky
+		if ( !options.isSticky )
+		{
+			notice.addClass( 'not-sticky' );
+		};
+		
+		// Get the container element from the page
+		var cont = document.getElementById( 'purr-container' );
+		
+		// If the container doesn't yet exist, we need to create it
+		if ( !cont )
+		{
+			cont = '<div id="purr-container"></div>';
+		}
+		
+		// Convert cont to a jQuery object
+		cont = $( cont );
+		
+		// Add the container to the page
+		$( 'body' ).append( cont );
+			
+		notify();
+
+		function notify ()
+		{	
+			// Set up the close button
+			var close = document.createElement( 'a' );
+			$( close ).attr(	
+				{
+					className: 'close',
+					href: '#close',
+					innerHTML: 'Close'
+				}
+			)
+				.appendTo( notice )
+					.click( function ()
+						{
+							removeNotice();
+							
+							return false;
+						}
+					);
+			
+			// Add the notice to the page and keep it hidden initially
+			notice.appendTo( cont )
+				.hide();
+				
+			if ( jQuery.browser.msie && options.usingTransparentPNG )
+			{
+				// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
+				// notice style, we'll just skip the fading in.
+				notice.show();
+			}
+			else
+			{
+				//Fade in the notice we just added
+				notice.fadeIn( options.fadeInSpeed );
+			}
+			
+			// Set up the removal interval for the added notice if that notice is not a sticky
+			if ( !options.isSticky )
+			{
+				var topSpotInt = setInterval( function ()
+				{
+					// Check to see if our notice is the first non-sticky notice in the list
+					if ( notice.prevAll( '.not-sticky' ).length == 0 )
+					{ 
+						// Stop checking once the condition is met
+						clearInterval( topSpotInt );
+						
+						// Call the close action after the timeout set in options
+						setTimeout( function ()
+							{
+								removeNotice();
+							}, options.removeTimer
+						);
+					}
+				}, 200 );	
+			}
+		}
+
+		function removeNotice ()
+		{
+			// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
+			// notice style, we'll just skip the fading out.
+			if ( jQuery.browser.msie && options.usingTransparentPNG )
+			{
+				notice.css( { opacity: 0	} )
+					.animate( 
+						{ 
+							height: '0px' 
+						}, 
+						{ 
+							duration: options.fadeOutSpeed, 
+							complete:  function ()
+								{
+									notice.remove();
+								} 
+							} 
+					);
+			}
+			else
+			{
+				// Fade the object out before reducing its height to produce the sliding effect
+				notice.animate( 
+					{ 
+						opacity: '0'
+					}, 
+					{ 
+						duration: options.fadeOutSpeed, 
+						complete: function () 
+							{
+								notice.animate(
+									{
+										height: '0px'
+									},
+									{
+										duration: options.fadeOutSpeed,
+										complete: function ()
+											{
+												notice.remove();
+											}
+									}
+								);
+							}
+					} 
+				);
+			}
+		};
+	};
+	
+	$.fn.purr = function ( options )
+	{
+		options = options || {};
+		options.fadeInSpeed = options.fadeInSpeed || 500;
+		options.fadeOutSpeed = options.fadeOutSpeed || 500;
+		options.removeTimer = options.removeTimer || 4000;
+		options.isSticky = options.isSticky || false;
+		options.usingTransparentPNG = options.usingTransparentPNG || false;
+		
+		this.each( function() 
+			{
+				new $.purr( this, options );
+			}
+		);
+		
+		return this;
+	};
+})( jQuery );
+
diff --git a/app/assets/javascripts/orderedLibraries/backbone.js b/app/assets/javascripts/orderedLibraries/backbone.js
index a0726ee4..8f5e0cf5 100644
--- a/app/assets/javascripts/orderedLibraries/backbone.js
+++ b/app/assets/javascripts/orderedLibraries/backbone.js
@@ -1,1571 +1,1571 @@
-//     Backbone.js 1.0.0
-
-//     (c) 2010-2013 Jeremy Ashkenas, DocumentCloud Inc.
-//     Backbone may be freely distributed under the MIT license.
-//     For all details and documentation:
-//     http://backbonejs.org
-
-(function(){
-
-  // Initial Setup
-  // -------------
-
-  // Save a reference to the global object (`window` in the browser, `exports`
-  // on the server).
-  var root = this;
-
-  // Save the previous value of the `Backbone` variable, so that it can be
-  // restored later on, if `noConflict` is used.
-  var previousBackbone = root.Backbone;
-
-  // Create local references to array methods we'll want to use later.
-  var array = [];
-  var push = array.push;
-  var slice = array.slice;
-  var splice = array.splice;
-
-  // The top-level namespace. All public Backbone classes and modules will
-  // be attached to this. Exported for both the browser and the server.
-  var Backbone;
-  if (typeof exports !== 'undefined') {
-    Backbone = exports;
-  } else {
-    Backbone = root.Backbone = {};
-  }
-
-  // Current version of the library. Keep in sync with `package.json`.
-  Backbone.VERSION = '1.0.0';
-
-  // Require Underscore, if we're on the server, and it's not already present.
-  var _ = root._;
-  if (!_ && (typeof require !== 'undefined')) _ = require('underscore');
-
-  // For Backbone's purposes, jQuery, Zepto, Ender, or My Library (kidding) owns
-  // the `$` variable.
-  Backbone.$ = root.jQuery || root.Zepto || root.ender || root.$;
-
-  // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
-  // to its previous owner. Returns a reference to this Backbone object.
-  Backbone.noConflict = function() {
-    root.Backbone = previousBackbone;
-    return this;
-  };
-
-  // Turn on `emulateHTTP` to support legacy HTTP servers. Setting this option
-  // will fake `"PUT"` and `"DELETE"` requests via the `_method` parameter and
-  // set a `X-Http-Method-Override` header.
-  Backbone.emulateHTTP = false;
-
-  // Turn on `emulateJSON` to support legacy servers that can't deal with direct
-  // `application/json` requests ... will encode the body as
-  // `application/x-www-form-urlencoded` instead and will send the model in a
-  // form param named `model`.
-  Backbone.emulateJSON = false;
-
-  // Backbone.Events
-  // ---------------
-
-  // A module that can be mixed in to *any object* in order to provide it with
-  // custom events. You may bind with `on` or remove with `off` callback
-  // functions to an event; `trigger`-ing an event fires all callbacks in
-  // succession.
-  //
-  //     var object = {};
-  //     _.extend(object, Backbone.Events);
-  //     object.on('expand', function(){ alert('expanded'); });
-  //     object.trigger('expand');
-  //
-  var Events = Backbone.Events = {
-
-    // Bind an event to a `callback` function. Passing `"all"` will bind
-    // the callback to all events fired.
-    on: function(name, callback, context) {
-      if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;
-      this._events || (this._events = {});
-      var events = this._events[name] || (this._events[name] = []);
-      events.push({callback: callback, context: context, ctx: context || this});
-      return this;
-    },
-
-    // Bind an event to only be triggered a single time. After the first time
-    // the callback is invoked, it will be removed.
-    once: function(name, callback, context) {
-      if (!eventsApi(this, 'once', name, [callback, context]) || !callback) return this;
-      var self = this;
-      var once = _.once(function() {
-        self.off(name, once);
-        callback.apply(this, arguments);
-      });
-      once._callback = callback;
-      return this.on(name, once, context);
-    },
-
-    // Remove one or many callbacks. If `context` is null, removes all
-    // callbacks with that function. If `callback` is null, removes all
-    // callbacks for the event. If `name` is null, removes all bound
-    // callbacks for all events.
-    off: function(name, callback, context) {
-      var retain, ev, events, names, i, l, j, k;
-      if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;
-      if (!name && !callback && !context) {
-        this._events = {};
-        return this;
-      }
-
-      names = name ? [name] : _.keys(this._events);
-      for (i = 0, l = names.length; i < l; i++) {
-        name = names[i];
-        if (events = this._events[name]) {
-          this._events[name] = retain = [];
-          if (callback || context) {
-            for (j = 0, k = events.length; j < k; j++) {
-              ev = events[j];
-              if ((callback && callback !== ev.callback && callback !== ev.callback._callback) ||
-                  (context && context !== ev.context)) {
-                retain.push(ev);
-              }
-            }
-          }
-          if (!retain.length) delete this._events[name];
-        }
-      }
-
-      return this;
-    },
-
-    // Trigger one or many events, firing all bound callbacks. Callbacks are
-    // passed the same arguments as `trigger` is, apart from the event name
-    // (unless you're listening on `"all"`, which will cause your callback to
-    // receive the true name of the event as the first argument).
-    trigger: function(name) {
-      if (!this._events) return this;
-      var args = slice.call(arguments, 1);
-      if (!eventsApi(this, 'trigger', name, args)) return this;
-      var events = this._events[name];
-      var allEvents = this._events.all;
-      if (events) triggerEvents(events, args);
-      if (allEvents) triggerEvents(allEvents, arguments);
-      return this;
-    },
-
-    // Tell this object to stop listening to either specific events ... or
-    // to every object it's currently listening to.
-    stopListening: function(obj, name, callback) {
-      var listeners = this._listeners;
-      if (!listeners) return this;
-      var deleteListener = !name && !callback;
-      if (typeof name === 'object') callback = this;
-      if (obj) (listeners = {})[obj._listenerId] = obj;
-      for (var id in listeners) {
-        listeners[id].off(name, callback, this);
-        if (deleteListener) delete this._listeners[id];
-      }
-      return this;
-    }
-
-  };
-
-  // Regular expression used to split event strings.
-  var eventSplitter = /\s+/;
-
-  // Implement fancy features of the Events API such as multiple event
-  // names `"change blur"` and jQuery-style event maps `{change: action}`
-  // in terms of the existing API.
-  var eventsApi = function(obj, action, name, rest) {
-    if (!name) return true;
-
-    // Handle event maps.
-    if (typeof name === 'object') {
-      for (var key in name) {
-        obj[action].apply(obj, [key, name[key]].concat(rest));
-      }
-      return false;
-    }
-
-    // Handle space separated event names.
-    if (eventSplitter.test(name)) {
-      var names = name.split(eventSplitter);
-      for (var i = 0, l = names.length; i < l; i++) {
-        obj[action].apply(obj, [names[i]].concat(rest));
-      }
-      return false;
-    }
-
-    return true;
-  };
-
-  // A difficult-to-believe, but optimized internal dispatch function for
-  // triggering events. Tries to keep the usual cases speedy (most internal
-  // Backbone events have 3 arguments).
-  var triggerEvents = function(events, args) {
-    var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
-    switch (args.length) {
-      case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
-      case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
-      case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
-      case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
-      default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
-    }
-  };
-
-  var listenMethods = {listenTo: 'on', listenToOnce: 'once'};
-
-  // Inversion-of-control versions of `on` and `once`. Tell *this* object to
-  // listen to an event in another object ... keeping track of what it's
-  // listening to.
-  _.each(listenMethods, function(implementation, method) {
-    Events[method] = function(obj, name, callback) {
-      var listeners = this._listeners || (this._listeners = {});
-      var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));
-      listeners[id] = obj;
-      if (typeof name === 'object') callback = this;
-      obj[implementation](name, callback, this);
-      return this;
-    };
-  });
-
-  // Aliases for backwards compatibility.
-  Events.bind   = Events.on;
-  Events.unbind = Events.off;
-
-  // Allow the `Backbone` object to serve as a global event bus, for folks who
-  // want global "pubsub" in a convenient place.
-  _.extend(Backbone, Events);
-
-  // Backbone.Model
-  // --------------
-
-  // Backbone **Models** are the basic data object in the framework --
-  // frequently representing a row in a table in a database on your server.
-  // A discrete chunk of data and a bunch of useful, related methods for
-  // performing computations and transformations on that data.
-
-  // Create a new model with the specified attributes. A client id (`cid`)
-  // is automatically generated and assigned for you.
-  var Model = Backbone.Model = function(attributes, options) {
-    var defaults;
-    var attrs = attributes || {};
-    options || (options = {});
-    this.cid = _.uniqueId('c');
-    this.attributes = {};
-    _.extend(this, _.pick(options, modelOptions));
-    if (options.parse) attrs = this.parse(attrs, options) || {};
-    if (defaults = _.result(this, 'defaults')) {
-      attrs = _.defaults({}, attrs, defaults);
-    }
-    this.set(attrs, options);
-    this.changed = {};
-    this.initialize.apply(this, arguments);
-  };
-
-  // A list of options to be attached directly to the model, if provided.
-  var modelOptions = ['url', 'urlRoot', 'collection'];
-
-  // Attach all inheritable methods to the Model prototype.
-  _.extend(Model.prototype, Events, {
-
-    // A hash of attributes whose current and previous value differ.
-    changed: null,
-
-    // The value returned during the last failed validation.
-    validationError: null,
-
-    // The default name for the JSON `id` attribute is `"id"`. MongoDB and
-    // CouchDB users may want to set this to `"_id"`.
-    idAttribute: 'id',
-
-    // Initialize is an empty function by default. Override it with your own
-    // initialization logic.
-    initialize: function(){},
-
-    // Return a copy of the model's `attributes` object.
-    toJSON: function(options) {
-      return _.clone(this.attributes);
-    },
-
-    // Proxy `Backbone.sync` by default -- but override this if you need
-    // custom syncing semantics for *this* particular model.
-    sync: function() {
-      return Backbone.sync.apply(this, arguments);
-    },
-
-    // Get the value of an attribute.
-    get: function(attr) {
-      return this.attributes[attr];
-    },
-
-    // Get the HTML-escaped value of an attribute.
-    escape: function(attr) {
-      return _.escape(this.get(attr));
-    },
-
-    // Returns `true` if the attribute contains a value that is not null
-    // or undefined.
-    has: function(attr) {
-      return this.get(attr) != null;
-    },
-
-    // Set a hash of model attributes on the object, firing `"change"`. This is
-    // the core primitive operation of a model, updating the data and notifying
-    // anyone who needs to know about the change in state. The heart of the beast.
-    set: function(key, val, options) {
-      var attr, attrs, unset, changes, silent, changing, prev, current;
-      if (key == null) return this;
-
-      // Handle both `"key", value` and `{key: value}` -style arguments.
-      if (typeof key === 'object') {
-        attrs = key;
-        options = val;
-      } else {
-        (attrs = {})[key] = val;
-      }
-
-      options || (options = {});
-
-      // Run validation.
-      if (!this._validate(attrs, options)) return false;
-
-      // Extract attributes and options.
-      unset           = options.unset;
-      silent          = options.silent;
-      changes         = [];
-      changing        = this._changing;
-      this._changing  = true;
-
-      if (!changing) {
-        this._previousAttributes = _.clone(this.attributes);
-        this.changed = {};
-      }
-      current = this.attributes, prev = this._previousAttributes;
-
-      // Check for changes of `id`.
-      if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
-
-      // For each `set` attribute, update or delete the current value.
-      for (attr in attrs) {
-        val = attrs[attr];
-        if (!_.isEqual(current[attr], val)) changes.push(attr);
-        if (!_.isEqual(prev[attr], val)) {
-          this.changed[attr] = val;
-        } else {
-          delete this.changed[attr];
-        }
-        unset ? delete current[attr] : current[attr] = val;
-      }
-
-      // Trigger all relevant attribute changes.
-      if (!silent) {
-        if (changes.length) this._pending = true;
-        for (var i = 0, l = changes.length; i < l; i++) {
-          this.trigger('change:' + changes[i], this, current[changes[i]], options);
-        }
-      }
-
-      // You might be wondering why there's a `while` loop here. Changes can
-      // be recursively nested within `"change"` events.
-      if (changing) return this;
-      if (!silent) {
-        while (this._pending) {
-          this._pending = false;
-          this.trigger('change', this, options);
-        }
-      }
-      this._pending = false;
-      this._changing = false;
-      return this;
-    },
-
-    // Remove an attribute from the model, firing `"change"`. `unset` is a noop
-    // if the attribute doesn't exist.
-    unset: function(attr, options) {
-      return this.set(attr, void 0, _.extend({}, options, {unset: true}));
-    },
-
-    // Clear all attributes on the model, firing `"change"`.
-    clear: function(options) {
-      var attrs = {};
-      for (var key in this.attributes) attrs[key] = void 0;
-      return this.set(attrs, _.extend({}, options, {unset: true}));
-    },
-
-    // Determine if the model has changed since the last `"change"` event.
-    // If you specify an attribute name, determine if that attribute has changed.
-    hasChanged: function(attr) {
-      if (attr == null) return !_.isEmpty(this.changed);
-      return _.has(this.changed, attr);
-    },
-
-    // Return an object containing all the attributes that have changed, or
-    // false if there are no changed attributes. Useful for determining what
-    // parts of a view need to be updated and/or what attributes need to be
-    // persisted to the server. Unset attributes will be set to undefined.
-    // You can also pass an attributes object to diff against the model,
-    // determining if there *would be* a change.
-    changedAttributes: function(diff) {
-      if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
-      var val, changed = false;
-      var old = this._changing ? this._previousAttributes : this.attributes;
-      for (var attr in diff) {
-        if (_.isEqual(old[attr], (val = diff[attr]))) continue;
-        (changed || (changed = {}))[attr] = val;
-      }
-      return changed;
-    },
-
-    // Get the previous value of an attribute, recorded at the time the last
-    // `"change"` event was fired.
-    previous: function(attr) {
-      if (attr == null || !this._previousAttributes) return null;
-      return this._previousAttributes[attr];
-    },
-
-    // Get all of the attributes of the model at the time of the previous
-    // `"change"` event.
-    previousAttributes: function() {
-      return _.clone(this._previousAttributes);
-    },
-
-    // Fetch the model from the server. If the server's representation of the
-    // model differs from its current attributes, they will be overridden,
-    // triggering a `"change"` event.
-    fetch: function(options) {
-      options = options ? _.clone(options) : {};
-      if (options.parse === void 0) options.parse = true;
-      var model = this;
-      var success = options.success;
-      options.success = function(resp) {
-        if (!model.set(model.parse(resp, options), options)) return false;
-        if (success) success(model, resp, options);
-        model.trigger('sync', model, resp, options);
-      };
-      wrapError(this, options);
-      return this.sync('read', this, options);
-    },
-
-    // Set a hash of model attributes, and sync the model to the server.
-    // If the server returns an attributes hash that differs, the model's
-    // state will be `set` again.
-    save: function(key, val, options) {
-      var attrs, method, xhr, attributes = this.attributes;
-
-      // Handle both `"key", value` and `{key: value}` -style arguments.
-      if (key == null || typeof key === 'object') {
-        attrs = key;
-        options = val;
-      } else {
-        (attrs = {})[key] = val;
-      }
-
-      // If we're not waiting and attributes exist, save acts as `set(attr).save(null, opts)`.
-      if (attrs && (!options || !options.wait) && !this.set(attrs, options)) return false;
-
-      options = _.extend({validate: true}, options);
-
-      // Do not persist invalid models.
-      if (!this._validate(attrs, options)) return false;
-
-      // Set temporary attributes if `{wait: true}`.
-      if (attrs && options.wait) {
-        this.attributes = _.extend({}, attributes, attrs);
-      }
-
-      // After a successful server-side save, the client is (optionally)
-      // updated with the server-side state.
-      if (options.parse === void 0) options.parse = true;
-      var model = this;
-      var success = options.success;
-      options.success = function(resp) {
-        // Ensure attributes are restored during synchronous saves.
-        model.attributes = attributes;
-        var serverAttrs = model.parse(resp, options);
-        if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
-        if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
-          return false;
-        }
-        if (success) success(model, resp, options);
-        model.trigger('sync', model, resp, options);
-      };
-      wrapError(this, options);
-
-      method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
-      if (method === 'patch') options.attrs = attrs;
-      xhr = this.sync(method, this, options);
-
-      // Restore attributes.
-      if (attrs && options.wait) this.attributes = attributes;
-
-      return xhr;
-    },
-
-    // Destroy this model on the server if it was already persisted.
-    // Optimistically removes the model from its collection, if it has one.
-    // If `wait: true` is passed, waits for the server to respond before removal.
-    destroy: function(options) {
-      options = options ? _.clone(options) : {};
-      var model = this;
-      var success = options.success;
-
-      var destroy = function() {
-        model.trigger('destroy', model, model.collection, options);
-      };
-
-      options.success = function(resp) {
-        if (options.wait || model.isNew()) destroy();
-        if (success) success(model, resp, options);
-        if (!model.isNew()) model.trigger('sync', model, resp, options);
-      };
-
-      if (this.isNew()) {
-        options.success();
-        return false;
-      }
-      wrapError(this, options);
-
-      var xhr = this.sync('delete', this, options);
-      if (!options.wait) destroy();
-      return xhr;
-    },
-
-    // Default URL for the model's representation on the server -- if you're
-    // using Backbone's restful methods, override this to change the endpoint
-    // that will be called.
-    url: function() {
-      var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url') || urlError();
-      if (this.isNew()) return base;
-      return base + (base.charAt(base.length - 1) === '/' ? '' : '/') + encodeURIComponent(this.id);
-    },
-
-    // **parse** converts a response into the hash of attributes to be `set` on
-    // the model. The default implementation is just to pass the response along.
-    parse: function(resp, options) {
-      return resp;
-    },
-
-    // Create a new model with identical attributes to this one.
-    clone: function() {
-      return new this.constructor(this.attributes);
-    },
-
-    // A model is new if it has never been saved to the server, and lacks an id.
-    isNew: function() {
-      return this.id == null;
-    },
-
-    // Check if the model is currently in a valid state.
-    isValid: function(options) {
-      return this._validate({}, _.extend(options || {}, { validate: true }));
-    },
-
-    // Run validation against the next complete set of model attributes,
-    // returning `true` if all is well. Otherwise, fire an `"invalid"` event.
-    _validate: function(attrs, options) {
-      if (!options.validate || !this.validate) return true;
-      attrs = _.extend({}, this.attributes, attrs);
-      var error = this.validationError = this.validate(attrs, options) || null;
-      if (!error) return true;
-      this.trigger('invalid', this, error, _.extend(options || {}, {validationError: error}));
-      return false;
-    }
-
-  });
-
-  // Underscore methods that we want to implement on the Model.
-  var modelMethods = ['keys', 'values', 'pairs', 'invert', 'pick', 'omit'];
-
-  // Mix in each Underscore method as a proxy to `Model#attributes`.
-  _.each(modelMethods, function(method) {
-    Model.prototype[method] = function() {
-      var args = slice.call(arguments);
-      args.unshift(this.attributes);
-      return _[method].apply(_, args);
-    };
-  });
-
-  // Backbone.Collection
-  // -------------------
-
-  // If models tend to represent a single row of data, a Backbone Collection is
-  // more analagous to a table full of data ... or a small slice or page of that
-  // table, or a collection of rows that belong together for a particular reason
-  // -- all of the messages in this particular folder, all of the documents
-  // belonging to this particular author, and so on. Collections maintain
-  // indexes of their models, both in order, and for lookup by `id`.
-
-  // Create a new **Collection**, perhaps to contain a specific type of `model`.
-  // If a `comparator` is specified, the Collection will maintain
-  // its models in sort order, as they're added and removed.
-  var Collection = Backbone.Collection = function(models, options) {
-    options || (options = {});
-    if (options.url) this.url = options.url;
-    if (options.model) this.model = options.model;
-    if (options.comparator !== void 0) this.comparator = options.comparator;
-    this._reset();
-    this.initialize.apply(this, arguments);
-    if (models) this.reset(models, _.extend({silent: true}, options));
-  };
-
-  // Default options for `Collection#set`.
-  var setOptions = {add: true, remove: true, merge: true};
-  var addOptions = {add: true, merge: false, remove: false};
-
-  // Define the Collection's inheritable methods.
-  _.extend(Collection.prototype, Events, {
-
-    // The default model for a collection is just a **Backbone.Model**.
-    // This should be overridden in most cases.
-    model: Model,
-
-    // Initialize is an empty function by default. Override it with your own
-    // initialization logic.
-    initialize: function(){},
-
-    // The JSON representation of a Collection is an array of the
-    // models' attributes.
-    toJSON: function(options) {
-      return this.map(function(model){ return model.toJSON(options); });
-    },
-
-    // Proxy `Backbone.sync` by default.
-    sync: function() {
-      return Backbone.sync.apply(this, arguments);
-    },
-
-    // Add a model, or list of models to the set.
-    add: function(models, options) {
-      return this.set(models, _.defaults(options || {}, addOptions));
-    },
-
-    // Remove a model, or a list of models from the set.
-    remove: function(models, options) {
-      models = _.isArray(models) ? models.slice() : [models];
-      options || (options = {});
-      var i, l, index, model;
-      for (i = 0, l = models.length; i < l; i++) {
-        model = this.get(models[i]);
-        if (!model) continue;
-        delete this._byId[model.id];
-        delete this._byId[model.cid];
-        index = this.indexOf(model);
-        this.models.splice(index, 1);
-        this.length--;
-        if (!options.silent) {
-          options.index = index;
-          model.trigger('remove', model, this, options);
-        }
-        this._removeReference(model);
-      }
-      return this;
-    },
-
-    // Update a collection by `set`-ing a new list of models, adding new ones,
-    // removing models that are no longer present, and merging models that
-    // already exist in the collection, as necessary. Similar to **Model#set**,
-    // the core operation for updating the data contained by the collection.
-    set: function(models, options) {
-      options = _.defaults(options || {}, setOptions);
-      if (options.parse) models = this.parse(models, options);
-      if (!_.isArray(models)) models = models ? [models] : [];
-      var i, l, model, attrs, existing, sort;
-      var at = options.at;
-      var sortable = this.comparator && (at == null) && options.sort !== false;
-      var sortAttr = _.isString(this.comparator) ? this.comparator : null;
-      var toAdd = [], toRemove = [], modelMap = {};
-
-      // Turn bare objects into model references, and prevent invalid models
-      // from being added.
-      for (i = 0, l = models.length; i < l; i++) {
-        if (!(model = this._prepareModel(models[i], options))) continue;
-
-        // If a duplicate is found, prevent it from being added and
-        // optionally merge it into the existing model.
-        if (existing = this.get(model)) {
-          if (options.remove) modelMap[existing.cid] = true;
-          if (options.merge) {
-            existing.set(model.attributes, options);
-            if (sortable && !sort && existing.hasChanged(sortAttr)) sort = true;
-          }
-
-        // This is a new model, push it to the `toAdd` list.
-        } else if (options.add) {
-          toAdd.push(model);
-
-          // Listen to added models' events, and index models for lookup by
-          // `id` and by `cid`.
-          model.on('all', this._onModelEvent, this);
-          this._byId[model.cid] = model;
-          if (model.id != null) this._byId[model.id] = model;
-        }
-      }
-
-      // Remove nonexistent models if appropriate.
-      if (options.remove) {
-        for (i = 0, l = this.length; i < l; ++i) {
-          if (!modelMap[(model = this.models[i]).cid]) toRemove.push(model);
-        }
-        if (toRemove.length) this.remove(toRemove, options);
-      }
-
-      // See if sorting is needed, update `length` and splice in new models.
-      if (toAdd.length) {
-        if (sortable) sort = true;
-        this.length += toAdd.length;
-        if (at != null) {
-          splice.apply(this.models, [at, 0].concat(toAdd));
-        } else {
-          push.apply(this.models, toAdd);
-        }
-      }
-
-      // Silently sort the collection if appropriate.
-      if (sort) this.sort({silent: true});
-
-      if (options.silent) return this;
-
-      // Trigger `add` events.
-      for (i = 0, l = toAdd.length; i < l; i++) {
-        (model = toAdd[i]).trigger('add', model, this, options);
-      }
-
-      // Trigger `sort` if the collection was sorted.
-      if (sort) this.trigger('sort', this, options);
-      return this;
-    },
-
-    // When you have more items than you want to add or remove individually,
-    // you can reset the entire set with a new list of models, without firing
-    // any granular `add` or `remove` events. Fires `reset` when finished.
-    // Useful for bulk operations and optimizations.
-    reset: function(models, options) {
-      options || (options = {});
-      for (var i = 0, l = this.models.length; i < l; i++) {
-        this._removeReference(this.models[i]);
-      }
-      options.previousModels = this.models;
-      this._reset();
-      this.add(models, _.extend({silent: true}, options));
-      if (!options.silent) this.trigger('reset', this, options);
-      return this;
-    },
-
-    // Add a model to the end of the collection.
-    push: function(model, options) {
-      model = this._prepareModel(model, options);
-      this.add(model, _.extend({at: this.length}, options));
-      return model;
-    },
-
-    // Remove a model from the end of the collection.
-    pop: function(options) {
-      var model = this.at(this.length - 1);
-      this.remove(model, options);
-      return model;
-    },
-
-    // Add a model to the beginning of the collection.
-    unshift: function(model, options) {
-      model = this._prepareModel(model, options);
-      this.add(model, _.extend({at: 0}, options));
-      return model;
-    },
-
-    // Remove a model from the beginning of the collection.
-    shift: function(options) {
-      var model = this.at(0);
-      this.remove(model, options);
-      return model;
-    },
-
-    // Slice out a sub-array of models from the collection.
-    slice: function(begin, end) {
-      return this.models.slice(begin, end);
-    },
-
-    // Get a model from the set by id.
-    get: function(obj) {
-      if (obj == null) return void 0;
-      return this._byId[obj.id != null ? obj.id : obj.cid || obj];
-    },
-
-    // Get the model at the given index.
-    at: function(index) {
-      return this.models[index];
-    },
-
-    // Return models with matching attributes. Useful for simple cases of
-    // `filter`.
-    where: function(attrs, first) {
-      if (_.isEmpty(attrs)) return first ? void 0 : [];
-      return this[first ? 'find' : 'filter'](function(model) {
-        for (var key in attrs) {
-          if (attrs[key] !== model.get(key)) return false;
-        }
-        return true;
-      });
-    },
-
-    // Return the first model with matching attributes. Useful for simple cases
-    // of `find`.
-    findWhere: function(attrs) {
-      return this.where(attrs, true);
-    },
-
-    // Force the collection to re-sort itself. You don't need to call this under
-    // normal circumstances, as the set will maintain sort order as each item
-    // is added.
-    sort: function(options) {
-      if (!this.comparator) throw new Error('Cannot sort a set without a comparator');
-      options || (options = {});
-
-      // Run sort based on type of `comparator`.
-      if (_.isString(this.comparator) || this.comparator.length === 1) {
-        this.models = this.sortBy(this.comparator, this);
-      } else {
-        this.models.sort(_.bind(this.comparator, this));
-      }
-
-      if (!options.silent) this.trigger('sort', this, options);
-      return this;
-    },
-
-    // Figure out the smallest index at which a model should be inserted so as
-    // to maintain order.
-    sortedIndex: function(model, value, context) {
-      value || (value = this.comparator);
-      var iterator = _.isFunction(value) ? value : function(model) {
-        return model.get(value);
-      };
-      return _.sortedIndex(this.models, model, iterator, context);
-    },
-
-    // Pluck an attribute from each model in the collection.
-    pluck: function(attr) {
-      return _.invoke(this.models, 'get', attr);
-    },
-
-    // Fetch the default set of models for this collection, resetting the
-    // collection when they arrive. If `reset: true` is passed, the response
-    // data will be passed through the `reset` method instead of `set`.
-    fetch: function(options) {
-      options = options ? _.clone(options) : {};
-      if (options.parse === void 0) options.parse = true;
-      var success = options.success;
-      var collection = this;
-      options.success = function(resp) {
-        var method = options.reset ? 'reset' : 'set';
-        collection[method](resp, options);
-        if (success) success(collection, resp, options);
-        collection.trigger('sync', collection, resp, options);
-      };
-      wrapError(this, options);
-      return this.sync('read', this, options);
-    },
-
-    // Create a new instance of a model in this collection. Add the model to the
-    // collection immediately, unless `wait: true` is passed, in which case we
-    // wait for the server to agree.
-    create: function(model, options) {
-      options = options ? _.clone(options) : {};
-      if (!(model = this._prepareModel(model, options))) return false;
-      if (!options.wait) this.add(model, options);
-      var collection = this;
-      var success = options.success;
-      options.success = function(resp) {
-        if (options.wait) collection.add(model, options);
-        if (success) success(model, resp, options);
-      };
-      model.save(null, options);
-      return model;
-    },
-
-    // **parse** converts a response into a list of models to be added to the
-    // collection. The default implementation is just to pass it through.
-    parse: function(resp, options) {
-      return resp;
-    },
-
-    // Create a new collection with an identical list of models as this one.
-    clone: function() {
-      return new this.constructor(this.models);
-    },
-
-    // Private method to reset all internal state. Called when the collection
-    // is first initialized or reset.
-    _reset: function() {
-      this.length = 0;
-      this.models = [];
-      this._byId  = {};
-    },
-
-    // Prepare a hash of attributes (or other model) to be added to this
-    // collection.
-    _prepareModel: function(attrs, options) {
-      if (attrs instanceof Model) {
-        if (!attrs.collection) attrs.collection = this;
-        return attrs;
-      }
-      options || (options = {});
-      options.collection = this;
-      var model = new this.model(attrs, options);
-      if (!model._validate(attrs, options)) {
-        this.trigger('invalid', this, attrs, options);
-        return false;
-      }
-      return model;
-    },
-
-    // Internal method to sever a model's ties to a collection.
-    _removeReference: function(model) {
-      if (this === model.collection) delete model.collection;
-      model.off('all', this._onModelEvent, this);
-    },
-
-    // Internal method called every time a model in the set fires an event.
-    // Sets need to update their indexes when models change ids. All other
-    // events simply proxy through. "add" and "remove" events that originate
-    // in other collections are ignored.
-    _onModelEvent: function(event, model, collection, options) {
-      if ((event === 'add' || event === 'remove') && collection !== this) return;
-      if (event === 'destroy') this.remove(model, options);
-      if (model && event === 'change:' + model.idAttribute) {
-        delete this._byId[model.previous(model.idAttribute)];
-        if (model.id != null) this._byId[model.id] = model;
-      }
-      this.trigger.apply(this, arguments);
-    }
-
-  });
-
-  // Underscore methods that we want to implement on the Collection.
-  // 90% of the core usefulness of Backbone Collections is actually implemented
-  // right here:
-  var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl',
-    'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select',
-    'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke',
-    'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest',
-    'tail', 'drop', 'last', 'without', 'indexOf', 'shuffle', 'lastIndexOf',
-    'isEmpty', 'chain'];
-
-  // Mix in each Underscore method as a proxy to `Collection#models`.
-  _.each(methods, function(method) {
-    Collection.prototype[method] = function() {
-      var args = slice.call(arguments);
-      args.unshift(this.models);
-      return _[method].apply(_, args);
-    };
-  });
-
-  // Underscore methods that take a property name as an argument.
-  var attributeMethods = ['groupBy', 'countBy', 'sortBy'];
-
-  // Use attributes instead of properties.
-  _.each(attributeMethods, function(method) {
-    Collection.prototype[method] = function(value, context) {
-      var iterator = _.isFunction(value) ? value : function(model) {
-        return model.get(value);
-      };
-      return _[method](this.models, iterator, context);
-    };
-  });
-
-  // Backbone.View
-  // -------------
-
-  // Backbone Views are almost more convention than they are actual code. A View
-  // is simply a JavaScript object that represents a logical chunk of UI in the
-  // DOM. This might be a single item, an entire list, a sidebar or panel, or
-  // even the surrounding frame which wraps your whole app. Defining a chunk of
-  // UI as a **View** allows you to define your DOM events declaratively, without
-  // having to worry about render order ... and makes it easy for the view to
-  // react to specific changes in the state of your models.
-
-  // Creating a Backbone.View creates its initial element outside of the DOM,
-  // if an existing element is not provided...
-  var View = Backbone.View = function(options) {
-    this.cid = _.uniqueId('view');
-    this._configure(options || {});
-    this._ensureElement();
-    this.initialize.apply(this, arguments);
-    this.delegateEvents();
-  };
-
-  // Cached regex to split keys for `delegate`.
-  var delegateEventSplitter = /^(\S+)\s*(.*)$/;
-
-  // List of view options to be merged as properties.
-  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
-
-  // Set up all inheritable **Backbone.View** properties and methods.
-  _.extend(View.prototype, Events, {
-
-    // The default `tagName` of a View's element is `"div"`.
-    tagName: 'div',
-
-    // jQuery delegate for element lookup, scoped to DOM elements within the
-    // current view. This should be prefered to global lookups where possible.
-    $: function(selector) {
-      return this.$el.find(selector);
-    },
-
-    // Initialize is an empty function by default. Override it with your own
-    // initialization logic.
-    initialize: function(){},
-
-    // **render** is the core function that your view should override, in order
-    // to populate its element (`this.el`), with the appropriate HTML. The
-    // convention is for **render** to always return `this`.
-    render: function() {
-      return this;
-    },
-
-    // Remove this view by taking the element out of the DOM, and removing any
-    // applicable Backbone.Events listeners.
-    remove: function() {
-      this.$el.remove();
-      this.stopListening();
-      return this;
-    },
-
-    // Change the view's element (`this.el` property), including event
-    // re-delegation.
-    setElement: function(element, delegate) {
-      if (this.$el) this.undelegateEvents();
-      this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
-      this.el = this.$el[0];
-      if (delegate !== false) this.delegateEvents();
-      return this;
-    },
-
-    // Set callbacks, where `this.events` is a hash of
-    //
-    // *{"event selector": "callback"}*
-    //
-    //     {
-    //       'mousedown .title':  'edit',
-    //       'click .button':     'save'
-    //       'click .open':       function(e) { ... }
-    //     }
-    //
-    // pairs. Callbacks will be bound to the view, with `this` set properly.
-    // Uses event delegation for efficiency.
-    // Omitting the selector binds the event to `this.el`.
-    // This only works for delegate-able events: not `focus`, `blur`, and
-    // not `change`, `submit`, and `reset` in Internet Explorer.
-    delegateEvents: function(events) {
-      if (!(events || (events = _.result(this, 'events')))) return this;
-      this.undelegateEvents();
-      for (var key in events) {
-        var method = events[key];
-        if (!_.isFunction(method)) method = this[events[key]];
-        if (!method) continue;
-
-        var match = key.match(delegateEventSplitter);
-        var eventName = match[1], selector = match[2];
-        method = _.bind(method, this);
-        eventName += '.delegateEvents' + this.cid;
-        if (selector === '') {
-          this.$el.on(eventName, method);
-        } else {
-          this.$el.on(eventName, selector, method);
-        }
-      }
-      return this;
-    },
-
-    // Clears all callbacks previously bound to the view with `delegateEvents`.
-    // You usually don't need to use this, but may wish to if you have multiple
-    // Backbone views attached to the same DOM element.
-    undelegateEvents: function() {
-      this.$el.off('.delegateEvents' + this.cid);
-      return this;
-    },
-
-    // Performs the initial configuration of a View with a set of options.
-    // Keys with special meaning *(e.g. model, collection, id, className)* are
-    // attached directly to the view.  See `viewOptions` for an exhaustive
-    // list.
-    _configure: function(options) {
-      if (this.options) options = _.extend({}, _.result(this, 'options'), options);
-      _.extend(this, _.pick(options, viewOptions));
-      this.options = options;
-    },
-
-    // Ensure that the View has a DOM element to render into.
-    // If `this.el` is a string, pass it through `$()`, take the first
-    // matching element, and re-assign it to `el`. Otherwise, create
-    // an element from the `id`, `className` and `tagName` properties.
-    _ensureElement: function() {
-      if (!this.el) {
-        var attrs = _.extend({}, _.result(this, 'attributes'));
-        if (this.id) attrs.id = _.result(this, 'id');
-        if (this.className) attrs['class'] = _.result(this, 'className');
-        var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
-        this.setElement($el, false);
-      } else {
-        this.setElement(_.result(this, 'el'), false);
-      }
-    }
-
-  });
-
-  // Backbone.sync
-  // -------------
-
-  // Override this function to change the manner in which Backbone persists
-  // models to the server. You will be passed the type of request, and the
-  // model in question. By default, makes a RESTful Ajax request
-  // to the model's `url()`. Some possible customizations could be:
-  //
-  // * Use `setTimeout` to batch rapid-fire updates into a single request.
-  // * Send up the models as XML instead of JSON.
-  // * Persist models via WebSockets instead of Ajax.
-  //
-  // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
-  // as `POST`, with a `_method` parameter containing the true HTTP method,
-  // as well as all requests with the body as `application/x-www-form-urlencoded`
-  // instead of `application/json` with the model in a param named `model`.
-  // Useful when interfacing with server-side languages like **PHP** that make
-  // it difficult to read the body of `PUT` requests.
-  Backbone.sync = function(method, model, options) {
-    var type = methodMap[method];
-
-    // Default options, unless specified.
-    _.defaults(options || (options = {}), {
-      emulateHTTP: Backbone.emulateHTTP,
-      emulateJSON: Backbone.emulateJSON
-    });
-
-    // Default JSON-request options.
-    var params = {type: type, dataType: 'json'};
-
-    // Ensure that we have a URL.
-    if (!options.url) {
-      params.url = _.result(model, 'url') || urlError();
-    }
-
-    // Ensure that we have the appropriate request data.
-    if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) {
-      params.contentType = 'application/json';
-      params.data = JSON.stringify(options.attrs || model.toJSON(options));
-    }
-
-    // For older servers, emulate JSON by encoding the request into an HTML-form.
-    if (options.emulateJSON) {
-      params.contentType = 'application/x-www-form-urlencoded';
-      params.data = params.data ? {model: params.data} : {};
-    }
-
-    // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
-    // And an `X-HTTP-Method-Override` header.
-    if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) {
-      params.type = 'POST';
-      if (options.emulateJSON) params.data._method = type;
-      var beforeSend = options.beforeSend;
-      options.beforeSend = function(xhr) {
-        xhr.setRequestHeader('X-HTTP-Method-Override', type);
-        if (beforeSend) return beforeSend.apply(this, arguments);
-      };
-    }
-
-    // Don't process data on a non-GET request.
-    if (params.type !== 'GET' && !options.emulateJSON) {
-      params.processData = false;
-    }
-
-    // If we're sending a `PATCH` request, and we're in an old Internet Explorer
-    // that still has ActiveX enabled by default, override jQuery to use that
-    // for XHR instead. Remove this line when jQuery supports `PATCH` on IE8.
-    if (params.type === 'PATCH' && window.ActiveXObject &&
-          !(window.external && window.external.msActiveXFilteringEnabled)) {
-      params.xhr = function() {
-        return new ActiveXObject("Microsoft.XMLHTTP");
-      };
-    }
-
-    // Make the request, allowing the user to override any Ajax options.
-    var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
-    model.trigger('request', model, xhr, options);
-    return xhr;
-  };
-
-  // Map from CRUD to HTTP for our default `Backbone.sync` implementation.
-  var methodMap = {
-    'create': 'POST',
-    'update': 'PUT',
-    'patch':  'PATCH',
-    'delete': 'DELETE',
-    'read':   'GET'
-  };
-
-  // Set the default implementation of `Backbone.ajax` to proxy through to `$`.
-  // Override this if you'd like to use a different library.
-  Backbone.ajax = function() {
-    return Backbone.$.ajax.apply(Backbone.$, arguments);
-  };
-
-  // Backbone.Router
-  // ---------------
-
-  // Routers map faux-URLs to actions, and fire events when routes are
-  // matched. Creating a new one sets its `routes` hash, if not set statically.
-  var Router = Backbone.Router = function(options) {
-    options || (options = {});
-    if (options.routes) this.routes = options.routes;
-    this._bindRoutes();
-    this.initialize.apply(this, arguments);
-  };
-
-  // Cached regular expressions for matching named param parts and splatted
-  // parts of route strings.
-  var optionalParam = /\((.*?)\)/g;
-  var namedParam    = /(\(\?)?:\w+/g;
-  var splatParam    = /\*\w+/g;
-  var escapeRegExp  = /[\-{}\[\]+?.,\\\^$|#\s]/g;
-
-  // Set up all inheritable **Backbone.Router** properties and methods.
-  _.extend(Router.prototype, Events, {
-
-    // Initialize is an empty function by default. Override it with your own
-    // initialization logic.
-    initialize: function(){},
-
-    // Manually bind a single named route to a callback. For example:
-    //
-    //     this.route('search/:query/p:num', 'search', function(query, num) {
-    //       ...
-    //     });
-    //
-    route: function(route, name, callback) {
-      if (!_.isRegExp(route)) route = this._routeToRegExp(route);
-      if (_.isFunction(name)) {
-        callback = name;
-        name = '';
-      }
-      if (!callback) callback = this[name];
-      var router = this;
-      Backbone.history.route(route, function(fragment) {
-        var args = router._extractParameters(route, fragment);
-        callback && callback.apply(router, args);
-        router.trigger.apply(router, ['route:' + name].concat(args));
-        router.trigger('route', name, args);
-        Backbone.history.trigger('route', router, name, args);
-      });
-      return this;
-    },
-
-    // Simple proxy to `Backbone.history` to save a fragment into the history.
-    navigate: function(fragment, options) {
-      Backbone.history.navigate(fragment, options);
-      return this;
-    },
-
-    // Bind all defined routes to `Backbone.history`. We have to reverse the
-    // order of the routes here to support behavior where the most general
-    // routes can be defined at the bottom of the route map.
-    _bindRoutes: function() {
-      if (!this.routes) return;
-      this.routes = _.result(this, 'routes');
-      var route, routes = _.keys(this.routes);
-      while ((route = routes.pop()) != null) {
-        this.route(route, this.routes[route]);
-      }
-    },
-
-    // Convert a route string into a regular expression, suitable for matching
-    // against the current location hash.
-    _routeToRegExp: function(route) {
-      route = route.replace(escapeRegExp, '\\$&')
-                   .replace(optionalParam, '(?:$1)?')
-                   .replace(namedParam, function(match, optional){
-                     return optional ? match : '([^\/]+)';
-                   })
-                   .replace(splatParam, '(.*?)');
-      return new RegExp('^' + route + '$');
-    },
-
-    // Given a route, and a URL fragment that it matches, return the array of
-    // extracted decoded parameters. Empty or unmatched parameters will be
-    // treated as `null` to normalize cross-browser behavior.
-    _extractParameters: function(route, fragment) {
-      var params = route.exec(fragment).slice(1);
-      return _.map(params, function(param) {
-        return param ? decodeURIComponent(param) : null;
-      });
-    }
-
-  });
-
-  // Backbone.History
-  // ----------------
-
-  // Handles cross-browser history management, based on either
-  // [pushState](http://diveintohtml5.info/history.html) and real URLs, or
-  // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
-  // and URL fragments. If the browser supports neither (old IE, natch),
-  // falls back to polling.
-  var History = Backbone.History = function() {
-    this.handlers = [];
-    _.bindAll(this, 'checkUrl');
-
-    // Ensure that `History` can be used outside of the browser.
-    if (typeof window !== 'undefined') {
-      this.location = window.location;
-      this.history = window.history;
-    }
-  };
-
-  // Cached regex for stripping a leading hash/slash and trailing space.
-  var routeStripper = /^[#\/]|\s+$/g;
-
-  // Cached regex for stripping leading and trailing slashes.
-  var rootStripper = /^\/+|\/+$/g;
-
-  // Cached regex for detecting MSIE.
-  var isExplorer = /msie [\w.]+/;
-
-  // Cached regex for removing a trailing slash.
-  var trailingSlash = /\/$/;
-
-  // Has the history handling already been started?
-  History.started = false;
-
-  // Set up all inheritable **Backbone.History** properties and methods.
-  _.extend(History.prototype, Events, {
-
-    // The default interval to poll for hash changes, if necessary, is
-    // twenty times a second.
-    interval: 50,
-
-    // Gets the true hash value. Cannot use location.hash directly due to bug
-    // in Firefox where location.hash will always be decoded.
-    getHash: function(window) {
-      var match = (window || this).location.href.match(/#(.*)$/);
-      return match ? match[1] : '';
-    },
-
-    // Get the cross-browser normalized URL fragment, either from the URL,
-    // the hash, or the override.
-    getFragment: function(fragment, forcePushState) {
-      if (fragment == null) {
-        if (this._hasPushState || !this._wantsHashChange || forcePushState) {
-          fragment = this.location.pathname;
-          var root = this.root.replace(trailingSlash, '');
-          if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
-        } else {
-          fragment = this.getHash();
-        }
-      }
-      return fragment.replace(routeStripper, '');
-    },
-
-    // Start the hash change handling, returning `true` if the current URL matches
-    // an existing route, and `false` otherwise.
-    start: function(options) {
-      if (History.started) throw new Error("Backbone.history has already been started");
-      History.started = true;
-
-      // Figure out the initial configuration. Do we need an iframe?
-      // Is pushState desired ... is it available?
-      this.options          = _.extend({}, {root: '/'}, this.options, options);
-      this.root             = this.options.root;
-      this._wantsHashChange = this.options.hashChange !== false;
-      this._wantsPushState  = !!this.options.pushState;
-      this._hasPushState    = !!(this.options.pushState && this.history && this.history.pushState);
-      var fragment          = this.getFragment();
-      var docMode           = document.documentMode;
-      var oldIE             = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));
-
-      // Normalize root to always include a leading and trailing slash.
-      this.root = ('/' + this.root + '/').replace(rootStripper, '/');
-
-      if (oldIE && this._wantsHashChange) {
-        this.iframe = Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
-        this.navigate(fragment);
-      }
-
-      // Depending on whether we're using pushState or hashes, and whether
-      // 'onhashchange' is supported, determine how we check the URL state.
-      if (this._hasPushState) {
-        Backbone.$(window).on('popstate', this.checkUrl);
-      } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
-        Backbone.$(window).on('hashchange', this.checkUrl);
-      } else if (this._wantsHashChange) {
-        this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
-      }
-
-      // Determine if we need to change the base url, for a pushState link
-      // opened by a non-pushState browser.
-      this.fragment = fragment;
-      var loc = this.location;
-      var atRoot = loc.pathname.replace(/[^\/]$/, '$&/') === this.root;
-
-      // If we've started off with a route from a `pushState`-enabled browser,
-      // but we're currently in a browser that doesn't support it...
-      if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) {
-        this.fragment = this.getFragment(null, true);
-        this.location.replace(this.root + this.location.search + '#' + this.fragment);
-        // Return immediately as browser will do redirect to new url
-        return true;
-
-      // Or if we've started out with a hash-based route, but we're currently
-      // in a browser where it could be `pushState`-based instead...
-      } else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) {
-        this.fragment = this.getHash().replace(routeStripper, '');
-        this.history.replaceState({}, document.title, this.root + this.fragment + loc.search);
-      }
-
-      if (!this.options.silent) return this.loadUrl();
-    },
-
-    // Disable Backbone.history, perhaps temporarily. Not useful in a real app,
-    // but possibly useful for unit testing Routers.
-    stop: function() {
-      Backbone.$(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
-      clearInterval(this._checkUrlInterval);
-      History.started = false;
-    },
-
-    // Add a route to be tested when the fragment changes. Routes added later
-    // may override previous routes.
-    route: function(route, callback) {
-      this.handlers.unshift({route: route, callback: callback});
-    },
-
-    // Checks the current URL to see if it has changed, and if it has,
-    // calls `loadUrl`, normalizing across the hidden iframe.
-    checkUrl: function(e) {
-      var current = this.getFragment();
-      if (current === this.fragment && this.iframe) {
-        current = this.getFragment(this.getHash(this.iframe));
-      }
-      if (current === this.fragment) return false;
-      if (this.iframe) this.navigate(current);
-      this.loadUrl() || this.loadUrl(this.getHash());
-    },
-
-    // Attempt to load the current URL fragment. If a route succeeds with a
-    // match, returns `true`. If no defined routes matches the fragment,
-    // returns `false`.
-    loadUrl: function(fragmentOverride) {
-      var fragment = this.fragment = this.getFragment(fragmentOverride);
-      var matched = _.any(this.handlers, function(handler) {
-        if (handler.route.test(fragment)) {
-          handler.callback(fragment);
-          return true;
-        }
-      });
-      return matched;
-    },
-
-    // Save a fragment into the hash history, or replace the URL state if the
-    // 'replace' option is passed. You are responsible for properly URL-encoding
-    // the fragment in advance.
-    //
-    // The options object can contain `trigger: true` if you wish to have the
-    // route callback be fired (not usually desirable), or `replace: true`, if
-    // you wish to modify the current URL without adding an entry to the history.
-    navigate: function(fragment, options) {
-      if (!History.started) return false;
-      if (!options || options === true) options = {trigger: options};
-      fragment = this.getFragment(fragment || '');
-      if (this.fragment === fragment) return;
-      this.fragment = fragment;
-      var url = this.root + fragment;
-
-      // If pushState is available, we use it to set the fragment as a real URL.
-      if (this._hasPushState) {
-        this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url);
-
-      // If hash changes haven't been explicitly disabled, update the hash
-      // fragment to store history.
-      } else if (this._wantsHashChange) {
-        this._updateHash(this.location, fragment, options.replace);
-        if (this.iframe && (fragment !== this.getFragment(this.getHash(this.iframe)))) {
-          // Opening and closing the iframe tricks IE7 and earlier to push a
-          // history entry on hash-tag change.  When replace is true, we don't
-          // want this.
-          if(!options.replace) this.iframe.document.open().close();
-          this._updateHash(this.iframe.location, fragment, options.replace);
-        }
-
-      // If you've told us that you explicitly don't want fallback hashchange-
-      // based history, then `navigate` becomes a page refresh.
-      } else {
-        return this.location.assign(url);
-      }
-      if (options.trigger) this.loadUrl(fragment);
-    },
-
-    // Update the hash location, either replacing the current entry, or adding
-    // a new one to the browser history.
-    _updateHash: function(location, fragment, replace) {
-      if (replace) {
-        var href = location.href.replace(/(javascript:|#).*$/, '');
-        location.replace(href + '#' + fragment);
-      } else {
-        // Some browsers require that `hash` contains a leading #.
-        location.hash = '#' + fragment;
-      }
-    }
-
-  });
-
-  // Create the default Backbone.history.
-  Backbone.history = new History;
-
-  // Helpers
-  // -------
-
-  // Helper function to correctly set up the prototype chain, for subclasses.
-  // Similar to `goog.inherits`, but uses a hash of prototype properties and
-  // class properties to be extended.
-  var extend = function(protoProps, staticProps) {
-    var parent = this;
-    var child;
-
-    // The constructor function for the new subclass is either defined by you
-    // (the "constructor" property in your `extend` definition), or defaulted
-    // by us to simply call the parent's constructor.
-    if (protoProps && _.has(protoProps, 'constructor')) {
-      child = protoProps.constructor;
-    } else {
-      child = function(){ return parent.apply(this, arguments); };
-    }
-
-    // Add static properties to the constructor function, if supplied.
-    _.extend(child, parent, staticProps);
-
-    // Set the prototype chain to inherit from `parent`, without calling
-    // `parent`'s constructor function.
-    var Surrogate = function(){ this.constructor = child; };
-    Surrogate.prototype = parent.prototype;
-    child.prototype = new Surrogate;
-
-    // Add prototype properties (instance properties) to the subclass,
-    // if supplied.
-    if (protoProps) _.extend(child.prototype, protoProps);
-
-    // Set a convenience property in case the parent's prototype is needed
-    // later.
-    child.__super__ = parent.prototype;
-
-    return child;
-  };
-
-  // Set up inheritance for the model, collection, router, view and history.
-  Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
-
-  // Throw an error when a URL is needed, and none is supplied.
-  var urlError = function() {
-    throw new Error('A "url" property or function must be specified');
-  };
-
-  // Wrap an optional error callback with a fallback error event.
-  var wrapError = function (model, options) {
-    var error = options.error;
-    options.error = function(resp) {
-      if (error) error(model, resp, options);
-      model.trigger('error', model, resp, options);
-    };
-  };
-
+//     Backbone.js 1.0.0
+
+//     (c) 2010-2013 Jeremy Ashkenas, DocumentCloud Inc.
+//     Backbone may be freely distributed under the MIT license.
+//     For all details and documentation:
+//     http://backbonejs.org
+
+(function(){
+
+  // Initial Setup
+  // -------------
+
+  // Save a reference to the global object (`window` in the browser, `exports`
+  // on the server).
+  var root = this;
+
+  // Save the previous value of the `Backbone` variable, so that it can be
+  // restored later on, if `noConflict` is used.
+  var previousBackbone = root.Backbone;
+
+  // Create local references to array methods we'll want to use later.
+  var array = [];
+  var push = array.push;
+  var slice = array.slice;
+  var splice = array.splice;
+
+  // The top-level namespace. All public Backbone classes and modules will
+  // be attached to this. Exported for both the browser and the server.
+  var Backbone;
+  if (typeof exports !== 'undefined') {
+    Backbone = exports;
+  } else {
+    Backbone = root.Backbone = {};
+  }
+
+  // Current version of the library. Keep in sync with `package.json`.
+  Backbone.VERSION = '1.0.0';
+
+  // Require Underscore, if we're on the server, and it's not already present.
+  var _ = root._;
+  if (!_ && (typeof require !== 'undefined')) _ = require('underscore');
+
+  // For Backbone's purposes, jQuery, Zepto, Ender, or My Library (kidding) owns
+  // the `$` variable.
+  Backbone.$ = root.jQuery || root.Zepto || root.ender || root.$;
+
+  // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
+  // to its previous owner. Returns a reference to this Backbone object.
+  Backbone.noConflict = function() {
+    root.Backbone = previousBackbone;
+    return this;
+  };
+
+  // Turn on `emulateHTTP` to support legacy HTTP servers. Setting this option
+  // will fake `"PUT"` and `"DELETE"` requests via the `_method` parameter and
+  // set a `X-Http-Method-Override` header.
+  Backbone.emulateHTTP = false;
+
+  // Turn on `emulateJSON` to support legacy servers that can't deal with direct
+  // `application/json` requests ... will encode the body as
+  // `application/x-www-form-urlencoded` instead and will send the model in a
+  // form param named `model`.
+  Backbone.emulateJSON = false;
+
+  // Backbone.Events
+  // ---------------
+
+  // A module that can be mixed in to *any object* in order to provide it with
+  // custom events. You may bind with `on` or remove with `off` callback
+  // functions to an event; `trigger`-ing an event fires all callbacks in
+  // succession.
+  //
+  //     var object = {};
+  //     _.extend(object, Backbone.Events);
+  //     object.on('expand', function(){ alert('expanded'); });
+  //     object.trigger('expand');
+  //
+  var Events = Backbone.Events = {
+
+    // Bind an event to a `callback` function. Passing `"all"` will bind
+    // the callback to all events fired.
+    on: function(name, callback, context) {
+      if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;
+      this._events || (this._events = {});
+      var events = this._events[name] || (this._events[name] = []);
+      events.push({callback: callback, context: context, ctx: context || this});
+      return this;
+    },
+
+    // Bind an event to only be triggered a single time. After the first time
+    // the callback is invoked, it will be removed.
+    once: function(name, callback, context) {
+      if (!eventsApi(this, 'once', name, [callback, context]) || !callback) return this;
+      var self = this;
+      var once = _.once(function() {
+        self.off(name, once);
+        callback.apply(this, arguments);
+      });
+      once._callback = callback;
+      return this.on(name, once, context);
+    },
+
+    // Remove one or many callbacks. If `context` is null, removes all
+    // callbacks with that function. If `callback` is null, removes all
+    // callbacks for the event. If `name` is null, removes all bound
+    // callbacks for all events.
+    off: function(name, callback, context) {
+      var retain, ev, events, names, i, l, j, k;
+      if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;
+      if (!name && !callback && !context) {
+        this._events = {};
+        return this;
+      }
+
+      names = name ? [name] : _.keys(this._events);
+      for (i = 0, l = names.length; i < l; i++) {
+        name = names[i];
+        if (events = this._events[name]) {
+          this._events[name] = retain = [];
+          if (callback || context) {
+            for (j = 0, k = events.length; j < k; j++) {
+              ev = events[j];
+              if ((callback && callback !== ev.callback && callback !== ev.callback._callback) ||
+                  (context && context !== ev.context)) {
+                retain.push(ev);
+              }
+            }
+          }
+          if (!retain.length) delete this._events[name];
+        }
+      }
+
+      return this;
+    },
+
+    // Trigger one or many events, firing all bound callbacks. Callbacks are
+    // passed the same arguments as `trigger` is, apart from the event name
+    // (unless you're listening on `"all"`, which will cause your callback to
+    // receive the true name of the event as the first argument).
+    trigger: function(name) {
+      if (!this._events) return this;
+      var args = slice.call(arguments, 1);
+      if (!eventsApi(this, 'trigger', name, args)) return this;
+      var events = this._events[name];
+      var allEvents = this._events.all;
+      if (events) triggerEvents(events, args);
+      if (allEvents) triggerEvents(allEvents, arguments);
+      return this;
+    },
+
+    // Tell this object to stop listening to either specific events ... or
+    // to every object it's currently listening to.
+    stopListening: function(obj, name, callback) {
+      var listeners = this._listeners;
+      if (!listeners) return this;
+      var deleteListener = !name && !callback;
+      if (typeof name === 'object') callback = this;
+      if (obj) (listeners = {})[obj._listenerId] = obj;
+      for (var id in listeners) {
+        listeners[id].off(name, callback, this);
+        if (deleteListener) delete this._listeners[id];
+      }
+      return this;
+    }
+
+  };
+
+  // Regular expression used to split event strings.
+  var eventSplitter = /\s+/;
+
+  // Implement fancy features of the Events API such as multiple event
+  // names `"change blur"` and jQuery-style event maps `{change: action}`
+  // in terms of the existing API.
+  var eventsApi = function(obj, action, name, rest) {
+    if (!name) return true;
+
+    // Handle event maps.
+    if (typeof name === 'object') {
+      for (var key in name) {
+        obj[action].apply(obj, [key, name[key]].concat(rest));
+      }
+      return false;
+    }
+
+    // Handle space separated event names.
+    if (eventSplitter.test(name)) {
+      var names = name.split(eventSplitter);
+      for (var i = 0, l = names.length; i < l; i++) {
+        obj[action].apply(obj, [names[i]].concat(rest));
+      }
+      return false;
+    }
+
+    return true;
+  };
+
+  // A difficult-to-believe, but optimized internal dispatch function for
+  // triggering events. Tries to keep the usual cases speedy (most internal
+  // Backbone events have 3 arguments).
+  var triggerEvents = function(events, args) {
+    var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
+    switch (args.length) {
+      case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
+      case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
+      case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
+      case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
+      default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
+    }
+  };
+
+  var listenMethods = {listenTo: 'on', listenToOnce: 'once'};
+
+  // Inversion-of-control versions of `on` and `once`. Tell *this* object to
+  // listen to an event in another object ... keeping track of what it's
+  // listening to.
+  _.each(listenMethods, function(implementation, method) {
+    Events[method] = function(obj, name, callback) {
+      var listeners = this._listeners || (this._listeners = {});
+      var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));
+      listeners[id] = obj;
+      if (typeof name === 'object') callback = this;
+      obj[implementation](name, callback, this);
+      return this;
+    };
+  });
+
+  // Aliases for backwards compatibility.
+  Events.bind   = Events.on;
+  Events.unbind = Events.off;
+
+  // Allow the `Backbone` object to serve as a global event bus, for folks who
+  // want global "pubsub" in a convenient place.
+  _.extend(Backbone, Events);
+
+  // Backbone.Model
+  // --------------
+
+  // Backbone **Models** are the basic data object in the framework --
+  // frequently representing a row in a table in a database on your server.
+  // A discrete chunk of data and a bunch of useful, related methods for
+  // performing computations and transformations on that data.
+
+  // Create a new model with the specified attributes. A client id (`cid`)
+  // is automatically generated and assigned for you.
+  var Model = Backbone.Model = function(attributes, options) {
+    var defaults;
+    var attrs = attributes || {};
+    options || (options = {});
+    this.cid = _.uniqueId('c');
+    this.attributes = {};
+    _.extend(this, _.pick(options, modelOptions));
+    if (options.parse) attrs = this.parse(attrs, options) || {};
+    if (defaults = _.result(this, 'defaults')) {
+      attrs = _.defaults({}, attrs, defaults);
+    }
+    this.set(attrs, options);
+    this.changed = {};
+    this.initialize.apply(this, arguments);
+  };
+
+  // A list of options to be attached directly to the model, if provided.
+  var modelOptions = ['url', 'urlRoot', 'collection'];
+
+  // Attach all inheritable methods to the Model prototype.
+  _.extend(Model.prototype, Events, {
+
+    // A hash of attributes whose current and previous value differ.
+    changed: null,
+
+    // The value returned during the last failed validation.
+    validationError: null,
+
+    // The default name for the JSON `id` attribute is `"id"`. MongoDB and
+    // CouchDB users may want to set this to `"_id"`.
+    idAttribute: 'id',
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // Return a copy of the model's `attributes` object.
+    toJSON: function(options) {
+      return _.clone(this.attributes);
+    },
+
+    // Proxy `Backbone.sync` by default -- but override this if you need
+    // custom syncing semantics for *this* particular model.
+    sync: function() {
+      return Backbone.sync.apply(this, arguments);
+    },
+
+    // Get the value of an attribute.
+    get: function(attr) {
+      return this.attributes[attr];
+    },
+
+    // Get the HTML-escaped value of an attribute.
+    escape: function(attr) {
+      return _.escape(this.get(attr));
+    },
+
+    // Returns `true` if the attribute contains a value that is not null
+    // or undefined.
+    has: function(attr) {
+      return this.get(attr) != null;
+    },
+
+    // Set a hash of model attributes on the object, firing `"change"`. This is
+    // the core primitive operation of a model, updating the data and notifying
+    // anyone who needs to know about the change in state. The heart of the beast.
+    set: function(key, val, options) {
+      var attr, attrs, unset, changes, silent, changing, prev, current;
+      if (key == null) return this;
+
+      // Handle both `"key", value` and `{key: value}` -style arguments.
+      if (typeof key === 'object') {
+        attrs = key;
+        options = val;
+      } else {
+        (attrs = {})[key] = val;
+      }
+
+      options || (options = {});
+
+      // Run validation.
+      if (!this._validate(attrs, options)) return false;
+
+      // Extract attributes and options.
+      unset           = options.unset;
+      silent          = options.silent;
+      changes         = [];
+      changing        = this._changing;
+      this._changing  = true;
+
+      if (!changing) {
+        this._previousAttributes = _.clone(this.attributes);
+        this.changed = {};
+      }
+      current = this.attributes, prev = this._previousAttributes;
+
+      // Check for changes of `id`.
+      if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
+
+      // For each `set` attribute, update or delete the current value.
+      for (attr in attrs) {
+        val = attrs[attr];
+        if (!_.isEqual(current[attr], val)) changes.push(attr);
+        if (!_.isEqual(prev[attr], val)) {
+          this.changed[attr] = val;
+        } else {
+          delete this.changed[attr];
+        }
+        unset ? delete current[attr] : current[attr] = val;
+      }
+
+      // Trigger all relevant attribute changes.
+      if (!silent) {
+        if (changes.length) this._pending = true;
+        for (var i = 0, l = changes.length; i < l; i++) {
+          this.trigger('change:' + changes[i], this, current[changes[i]], options);
+        }
+      }
+
+      // You might be wondering why there's a `while` loop here. Changes can
+      // be recursively nested within `"change"` events.
+      if (changing) return this;
+      if (!silent) {
+        while (this._pending) {
+          this._pending = false;
+          this.trigger('change', this, options);
+        }
+      }
+      this._pending = false;
+      this._changing = false;
+      return this;
+    },
+
+    // Remove an attribute from the model, firing `"change"`. `unset` is a noop
+    // if the attribute doesn't exist.
+    unset: function(attr, options) {
+      return this.set(attr, void 0, _.extend({}, options, {unset: true}));
+    },
+
+    // Clear all attributes on the model, firing `"change"`.
+    clear: function(options) {
+      var attrs = {};
+      for (var key in this.attributes) attrs[key] = void 0;
+      return this.set(attrs, _.extend({}, options, {unset: true}));
+    },
+
+    // Determine if the model has changed since the last `"change"` event.
+    // If you specify an attribute name, determine if that attribute has changed.
+    hasChanged: function(attr) {
+      if (attr == null) return !_.isEmpty(this.changed);
+      return _.has(this.changed, attr);
+    },
+
+    // Return an object containing all the attributes that have changed, or
+    // false if there are no changed attributes. Useful for determining what
+    // parts of a view need to be updated and/or what attributes need to be
+    // persisted to the server. Unset attributes will be set to undefined.
+    // You can also pass an attributes object to diff against the model,
+    // determining if there *would be* a change.
+    changedAttributes: function(diff) {
+      if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
+      var val, changed = false;
+      var old = this._changing ? this._previousAttributes : this.attributes;
+      for (var attr in diff) {
+        if (_.isEqual(old[attr], (val = diff[attr]))) continue;
+        (changed || (changed = {}))[attr] = val;
+      }
+      return changed;
+    },
+
+    // Get the previous value of an attribute, recorded at the time the last
+    // `"change"` event was fired.
+    previous: function(attr) {
+      if (attr == null || !this._previousAttributes) return null;
+      return this._previousAttributes[attr];
+    },
+
+    // Get all of the attributes of the model at the time of the previous
+    // `"change"` event.
+    previousAttributes: function() {
+      return _.clone(this._previousAttributes);
+    },
+
+    // Fetch the model from the server. If the server's representation of the
+    // model differs from its current attributes, they will be overridden,
+    // triggering a `"change"` event.
+    fetch: function(options) {
+      options = options ? _.clone(options) : {};
+      if (options.parse === void 0) options.parse = true;
+      var model = this;
+      var success = options.success;
+      options.success = function(resp) {
+        if (!model.set(model.parse(resp, options), options)) return false;
+        if (success) success(model, resp, options);
+        model.trigger('sync', model, resp, options);
+      };
+      wrapError(this, options);
+      return this.sync('read', this, options);
+    },
+
+    // Set a hash of model attributes, and sync the model to the server.
+    // If the server returns an attributes hash that differs, the model's
+    // state will be `set` again.
+    save: function(key, val, options) {
+      var attrs, method, xhr, attributes = this.attributes;
+
+      // Handle both `"key", value` and `{key: value}` -style arguments.
+      if (key == null || typeof key === 'object') {
+        attrs = key;
+        options = val;
+      } else {
+        (attrs = {})[key] = val;
+      }
+
+      // If we're not waiting and attributes exist, save acts as `set(attr).save(null, opts)`.
+      if (attrs && (!options || !options.wait) && !this.set(attrs, options)) return false;
+
+      options = _.extend({validate: true}, options);
+
+      // Do not persist invalid models.
+      if (!this._validate(attrs, options)) return false;
+
+      // Set temporary attributes if `{wait: true}`.
+      if (attrs && options.wait) {
+        this.attributes = _.extend({}, attributes, attrs);
+      }
+
+      // After a successful server-side save, the client is (optionally)
+      // updated with the server-side state.
+      if (options.parse === void 0) options.parse = true;
+      var model = this;
+      var success = options.success;
+      options.success = function(resp) {
+        // Ensure attributes are restored during synchronous saves.
+        model.attributes = attributes;
+        var serverAttrs = model.parse(resp, options);
+        if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
+        if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
+          return false;
+        }
+        if (success) success(model, resp, options);
+        model.trigger('sync', model, resp, options);
+      };
+      wrapError(this, options);
+
+      method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
+      if (method === 'patch') options.attrs = attrs;
+      xhr = this.sync(method, this, options);
+
+      // Restore attributes.
+      if (attrs && options.wait) this.attributes = attributes;
+
+      return xhr;
+    },
+
+    // Destroy this model on the server if it was already persisted.
+    // Optimistically removes the model from its collection, if it has one.
+    // If `wait: true` is passed, waits for the server to respond before removal.
+    destroy: function(options) {
+      options = options ? _.clone(options) : {};
+      var model = this;
+      var success = options.success;
+
+      var destroy = function() {
+        model.trigger('destroy', model, model.collection, options);
+      };
+
+      options.success = function(resp) {
+        if (options.wait || model.isNew()) destroy();
+        if (success) success(model, resp, options);
+        if (!model.isNew()) model.trigger('sync', model, resp, options);
+      };
+
+      if (this.isNew()) {
+        options.success();
+        return false;
+      }
+      wrapError(this, options);
+
+      var xhr = this.sync('delete', this, options);
+      if (!options.wait) destroy();
+      return xhr;
+    },
+
+    // Default URL for the model's representation on the server -- if you're
+    // using Backbone's restful methods, override this to change the endpoint
+    // that will be called.
+    url: function() {
+      var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url') || urlError();
+      if (this.isNew()) return base;
+      return base + (base.charAt(base.length - 1) === '/' ? '' : '/') + encodeURIComponent(this.id);
+    },
+
+    // **parse** converts a response into the hash of attributes to be `set` on
+    // the model. The default implementation is just to pass the response along.
+    parse: function(resp, options) {
+      return resp;
+    },
+
+    // Create a new model with identical attributes to this one.
+    clone: function() {
+      return new this.constructor(this.attributes);
+    },
+
+    // A model is new if it has never been saved to the server, and lacks an id.
+    isNew: function() {
+      return this.id == null;
+    },
+
+    // Check if the model is currently in a valid state.
+    isValid: function(options) {
+      return this._validate({}, _.extend(options || {}, { validate: true }));
+    },
+
+    // Run validation against the next complete set of model attributes,
+    // returning `true` if all is well. Otherwise, fire an `"invalid"` event.
+    _validate: function(attrs, options) {
+      if (!options.validate || !this.validate) return true;
+      attrs = _.extend({}, this.attributes, attrs);
+      var error = this.validationError = this.validate(attrs, options) || null;
+      if (!error) return true;
+      this.trigger('invalid', this, error, _.extend(options || {}, {validationError: error}));
+      return false;
+    }
+
+  });
+
+  // Underscore methods that we want to implement on the Model.
+  var modelMethods = ['keys', 'values', 'pairs', 'invert', 'pick', 'omit'];
+
+  // Mix in each Underscore method as a proxy to `Model#attributes`.
+  _.each(modelMethods, function(method) {
+    Model.prototype[method] = function() {
+      var args = slice.call(arguments);
+      args.unshift(this.attributes);
+      return _[method].apply(_, args);
+    };
+  });
+
+  // Backbone.Collection
+  // -------------------
+
+  // If models tend to represent a single row of data, a Backbone Collection is
+  // more analagous to a table full of data ... or a small slice or page of that
+  // table, or a collection of rows that belong together for a particular reason
+  // -- all of the messages in this particular folder, all of the documents
+  // belonging to this particular author, and so on. Collections maintain
+  // indexes of their models, both in order, and for lookup by `id`.
+
+  // Create a new **Collection**, perhaps to contain a specific type of `model`.
+  // If a `comparator` is specified, the Collection will maintain
+  // its models in sort order, as they're added and removed.
+  var Collection = Backbone.Collection = function(models, options) {
+    options || (options = {});
+    if (options.url) this.url = options.url;
+    if (options.model) this.model = options.model;
+    if (options.comparator !== void 0) this.comparator = options.comparator;
+    this._reset();
+    this.initialize.apply(this, arguments);
+    if (models) this.reset(models, _.extend({silent: true}, options));
+  };
+
+  // Default options for `Collection#set`.
+  var setOptions = {add: true, remove: true, merge: true};
+  var addOptions = {add: true, merge: false, remove: false};
+
+  // Define the Collection's inheritable methods.
+  _.extend(Collection.prototype, Events, {
+
+    // The default model for a collection is just a **Backbone.Model**.
+    // This should be overridden in most cases.
+    model: Model,
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // The JSON representation of a Collection is an array of the
+    // models' attributes.
+    toJSON: function(options) {
+      return this.map(function(model){ return model.toJSON(options); });
+    },
+
+    // Proxy `Backbone.sync` by default.
+    sync: function() {
+      return Backbone.sync.apply(this, arguments);
+    },
+
+    // Add a model, or list of models to the set.
+    add: function(models, options) {
+      return this.set(models, _.defaults(options || {}, addOptions));
+    },
+
+    // Remove a model, or a list of models from the set.
+    remove: function(models, options) {
+      models = _.isArray(models) ? models.slice() : [models];
+      options || (options = {});
+      var i, l, index, model;
+      for (i = 0, l = models.length; i < l; i++) {
+        model = this.get(models[i]);
+        if (!model) continue;
+        delete this._byId[model.id];
+        delete this._byId[model.cid];
+        index = this.indexOf(model);
+        this.models.splice(index, 1);
+        this.length--;
+        if (!options.silent) {
+          options.index = index;
+          model.trigger('remove', model, this, options);
+        }
+        this._removeReference(model);
+      }
+      return this;
+    },
+
+    // Update a collection by `set`-ing a new list of models, adding new ones,
+    // removing models that are no longer present, and merging models that
+    // already exist in the collection, as necessary. Similar to **Model#set**,
+    // the core operation for updating the data contained by the collection.
+    set: function(models, options) {
+      options = _.defaults(options || {}, setOptions);
+      if (options.parse) models = this.parse(models, options);
+      if (!_.isArray(models)) models = models ? [models] : [];
+      var i, l, model, attrs, existing, sort;
+      var at = options.at;
+      var sortable = this.comparator && (at == null) && options.sort !== false;
+      var sortAttr = _.isString(this.comparator) ? this.comparator : null;
+      var toAdd = [], toRemove = [], modelMap = {};
+
+      // Turn bare objects into model references, and prevent invalid models
+      // from being added.
+      for (i = 0, l = models.length; i < l; i++) {
+        if (!(model = this._prepareModel(models[i], options))) continue;
+
+        // If a duplicate is found, prevent it from being added and
+        // optionally merge it into the existing model.
+        if (existing = this.get(model)) {
+          if (options.remove) modelMap[existing.cid] = true;
+          if (options.merge) {
+            existing.set(model.attributes, options);
+            if (sortable && !sort && existing.hasChanged(sortAttr)) sort = true;
+          }
+
+        // This is a new model, push it to the `toAdd` list.
+        } else if (options.add) {
+          toAdd.push(model);
+
+          // Listen to added models' events, and index models for lookup by
+          // `id` and by `cid`.
+          model.on('all', this._onModelEvent, this);
+          this._byId[model.cid] = model;
+          if (model.id != null) this._byId[model.id] = model;
+        }
+      }
+
+      // Remove nonexistent models if appropriate.
+      if (options.remove) {
+        for (i = 0, l = this.length; i < l; ++i) {
+          if (!modelMap[(model = this.models[i]).cid]) toRemove.push(model);
+        }
+        if (toRemove.length) this.remove(toRemove, options);
+      }
+
+      // See if sorting is needed, update `length` and splice in new models.
+      if (toAdd.length) {
+        if (sortable) sort = true;
+        this.length += toAdd.length;
+        if (at != null) {
+          splice.apply(this.models, [at, 0].concat(toAdd));
+        } else {
+          push.apply(this.models, toAdd);
+        }
+      }
+
+      // Silently sort the collection if appropriate.
+      if (sort) this.sort({silent: true});
+
+      if (options.silent) return this;
+
+      // Trigger `add` events.
+      for (i = 0, l = toAdd.length; i < l; i++) {
+        (model = toAdd[i]).trigger('add', model, this, options);
+      }
+
+      // Trigger `sort` if the collection was sorted.
+      if (sort) this.trigger('sort', this, options);
+      return this;
+    },
+
+    // When you have more items than you want to add or remove individually,
+    // you can reset the entire set with a new list of models, without firing
+    // any granular `add` or `remove` events. Fires `reset` when finished.
+    // Useful for bulk operations and optimizations.
+    reset: function(models, options) {
+      options || (options = {});
+      for (var i = 0, l = this.models.length; i < l; i++) {
+        this._removeReference(this.models[i]);
+      }
+      options.previousModels = this.models;
+      this._reset();
+      this.add(models, _.extend({silent: true}, options));
+      if (!options.silent) this.trigger('reset', this, options);
+      return this;
+    },
+
+    // Add a model to the end of the collection.
+    push: function(model, options) {
+      model = this._prepareModel(model, options);
+      this.add(model, _.extend({at: this.length}, options));
+      return model;
+    },
+
+    // Remove a model from the end of the collection.
+    pop: function(options) {
+      var model = this.at(this.length - 1);
+      this.remove(model, options);
+      return model;
+    },
+
+    // Add a model to the beginning of the collection.
+    unshift: function(model, options) {
+      model = this._prepareModel(model, options);
+      this.add(model, _.extend({at: 0}, options));
+      return model;
+    },
+
+    // Remove a model from the beginning of the collection.
+    shift: function(options) {
+      var model = this.at(0);
+      this.remove(model, options);
+      return model;
+    },
+
+    // Slice out a sub-array of models from the collection.
+    slice: function(begin, end) {
+      return this.models.slice(begin, end);
+    },
+
+    // Get a model from the set by id.
+    get: function(obj) {
+      if (obj == null) return void 0;
+      return this._byId[obj.id != null ? obj.id : obj.cid || obj];
+    },
+
+    // Get the model at the given index.
+    at: function(index) {
+      return this.models[index];
+    },
+
+    // Return models with matching attributes. Useful for simple cases of
+    // `filter`.
+    where: function(attrs, first) {
+      if (_.isEmpty(attrs)) return first ? void 0 : [];
+      return this[first ? 'find' : 'filter'](function(model) {
+        for (var key in attrs) {
+          if (attrs[key] !== model.get(key)) return false;
+        }
+        return true;
+      });
+    },
+
+    // Return the first model with matching attributes. Useful for simple cases
+    // of `find`.
+    findWhere: function(attrs) {
+      return this.where(attrs, true);
+    },
+
+    // Force the collection to re-sort itself. You don't need to call this under
+    // normal circumstances, as the set will maintain sort order as each item
+    // is added.
+    sort: function(options) {
+      if (!this.comparator) throw new Error('Cannot sort a set without a comparator');
+      options || (options = {});
+
+      // Run sort based on type of `comparator`.
+      if (_.isString(this.comparator) || this.comparator.length === 1) {
+        this.models = this.sortBy(this.comparator, this);
+      } else {
+        this.models.sort(_.bind(this.comparator, this));
+      }
+
+      if (!options.silent) this.trigger('sort', this, options);
+      return this;
+    },
+
+    // Figure out the smallest index at which a model should be inserted so as
+    // to maintain order.
+    sortedIndex: function(model, value, context) {
+      value || (value = this.comparator);
+      var iterator = _.isFunction(value) ? value : function(model) {
+        return model.get(value);
+      };
+      return _.sortedIndex(this.models, model, iterator, context);
+    },
+
+    // Pluck an attribute from each model in the collection.
+    pluck: function(attr) {
+      return _.invoke(this.models, 'get', attr);
+    },
+
+    // Fetch the default set of models for this collection, resetting the
+    // collection when they arrive. If `reset: true` is passed, the response
+    // data will be passed through the `reset` method instead of `set`.
+    fetch: function(options) {
+      options = options ? _.clone(options) : {};
+      if (options.parse === void 0) options.parse = true;
+      var success = options.success;
+      var collection = this;
+      options.success = function(resp) {
+        var method = options.reset ? 'reset' : 'set';
+        collection[method](resp, options);
+        if (success) success(collection, resp, options);
+        collection.trigger('sync', collection, resp, options);
+      };
+      wrapError(this, options);
+      return this.sync('read', this, options);
+    },
+
+    // Create a new instance of a model in this collection. Add the model to the
+    // collection immediately, unless `wait: true` is passed, in which case we
+    // wait for the server to agree.
+    create: function(model, options) {
+      options = options ? _.clone(options) : {};
+      if (!(model = this._prepareModel(model, options))) return false;
+      if (!options.wait) this.add(model, options);
+      var collection = this;
+      var success = options.success;
+      options.success = function(resp) {
+        if (options.wait) collection.add(model, options);
+        if (success) success(model, resp, options);
+      };
+      model.save(null, options);
+      return model;
+    },
+
+    // **parse** converts a response into a list of models to be added to the
+    // collection. The default implementation is just to pass it through.
+    parse: function(resp, options) {
+      return resp;
+    },
+
+    // Create a new collection with an identical list of models as this one.
+    clone: function() {
+      return new this.constructor(this.models);
+    },
+
+    // Private method to reset all internal state. Called when the collection
+    // is first initialized or reset.
+    _reset: function() {
+      this.length = 0;
+      this.models = [];
+      this._byId  = {};
+    },
+
+    // Prepare a hash of attributes (or other model) to be added to this
+    // collection.
+    _prepareModel: function(attrs, options) {
+      if (attrs instanceof Model) {
+        if (!attrs.collection) attrs.collection = this;
+        return attrs;
+      }
+      options || (options = {});
+      options.collection = this;
+      var model = new this.model(attrs, options);
+      if (!model._validate(attrs, options)) {
+        this.trigger('invalid', this, attrs, options);
+        return false;
+      }
+      return model;
+    },
+
+    // Internal method to sever a model's ties to a collection.
+    _removeReference: function(model) {
+      if (this === model.collection) delete model.collection;
+      model.off('all', this._onModelEvent, this);
+    },
+
+    // Internal method called every time a model in the set fires an event.
+    // Sets need to update their indexes when models change ids. All other
+    // events simply proxy through. "add" and "remove" events that originate
+    // in other collections are ignored.
+    _onModelEvent: function(event, model, collection, options) {
+      if ((event === 'add' || event === 'remove') && collection !== this) return;
+      if (event === 'destroy') this.remove(model, options);
+      if (model && event === 'change:' + model.idAttribute) {
+        delete this._byId[model.previous(model.idAttribute)];
+        if (model.id != null) this._byId[model.id] = model;
+      }
+      this.trigger.apply(this, arguments);
+    }
+
+  });
+
+  // Underscore methods that we want to implement on the Collection.
+  // 90% of the core usefulness of Backbone Collections is actually implemented
+  // right here:
+  var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl',
+    'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select',
+    'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke',
+    'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest',
+    'tail', 'drop', 'last', 'without', 'indexOf', 'shuffle', 'lastIndexOf',
+    'isEmpty', 'chain'];
+
+  // Mix in each Underscore method as a proxy to `Collection#models`.
+  _.each(methods, function(method) {
+    Collection.prototype[method] = function() {
+      var args = slice.call(arguments);
+      args.unshift(this.models);
+      return _[method].apply(_, args);
+    };
+  });
+
+  // Underscore methods that take a property name as an argument.
+  var attributeMethods = ['groupBy', 'countBy', 'sortBy'];
+
+  // Use attributes instead of properties.
+  _.each(attributeMethods, function(method) {
+    Collection.prototype[method] = function(value, context) {
+      var iterator = _.isFunction(value) ? value : function(model) {
+        return model.get(value);
+      };
+      return _[method](this.models, iterator, context);
+    };
+  });
+
+  // Backbone.View
+  // -------------
+
+  // Backbone Views are almost more convention than they are actual code. A View
+  // is simply a JavaScript object that represents a logical chunk of UI in the
+  // DOM. This might be a single item, an entire list, a sidebar or panel, or
+  // even the surrounding frame which wraps your whole app. Defining a chunk of
+  // UI as a **View** allows you to define your DOM events declaratively, without
+  // having to worry about render order ... and makes it easy for the view to
+  // react to specific changes in the state of your models.
+
+  // Creating a Backbone.View creates its initial element outside of the DOM,
+  // if an existing element is not provided...
+  var View = Backbone.View = function(options) {
+    this.cid = _.uniqueId('view');
+    this._configure(options || {});
+    this._ensureElement();
+    this.initialize.apply(this, arguments);
+    this.delegateEvents();
+  };
+
+  // Cached regex to split keys for `delegate`.
+  var delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+  // List of view options to be merged as properties.
+  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+
+  // Set up all inheritable **Backbone.View** properties and methods.
+  _.extend(View.prototype, Events, {
+
+    // The default `tagName` of a View's element is `"div"`.
+    tagName: 'div',
+
+    // jQuery delegate for element lookup, scoped to DOM elements within the
+    // current view. This should be prefered to global lookups where possible.
+    $: function(selector) {
+      return this.$el.find(selector);
+    },
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // **render** is the core function that your view should override, in order
+    // to populate its element (`this.el`), with the appropriate HTML. The
+    // convention is for **render** to always return `this`.
+    render: function() {
+      return this;
+    },
+
+    // Remove this view by taking the element out of the DOM, and removing any
+    // applicable Backbone.Events listeners.
+    remove: function() {
+      this.$el.remove();
+      this.stopListening();
+      return this;
+    },
+
+    // Change the view's element (`this.el` property), including event
+    // re-delegation.
+    setElement: function(element, delegate) {
+      if (this.$el) this.undelegateEvents();
+      this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
+      this.el = this.$el[0];
+      if (delegate !== false) this.delegateEvents();
+      return this;
+    },
+
+    // Set callbacks, where `this.events` is a hash of
+    //
+    // *{"event selector": "callback"}*
+    //
+    //     {
+    //       'mousedown .title':  'edit',
+    //       'click .button':     'save'
+    //       'click .open':       function(e) { ... }
+    //     }
+    //
+    // pairs. Callbacks will be bound to the view, with `this` set properly.
+    // Uses event delegation for efficiency.
+    // Omitting the selector binds the event to `this.el`.
+    // This only works for delegate-able events: not `focus`, `blur`, and
+    // not `change`, `submit`, and `reset` in Internet Explorer.
+    delegateEvents: function(events) {
+      if (!(events || (events = _.result(this, 'events')))) return this;
+      this.undelegateEvents();
+      for (var key in events) {
+        var method = events[key];
+        if (!_.isFunction(method)) method = this[events[key]];
+        if (!method) continue;
+
+        var match = key.match(delegateEventSplitter);
+        var eventName = match[1], selector = match[2];
+        method = _.bind(method, this);
+        eventName += '.delegateEvents' + this.cid;
+        if (selector === '') {
+          this.$el.on(eventName, method);
+        } else {
+          this.$el.on(eventName, selector, method);
+        }
+      }
+      return this;
+    },
+
+    // Clears all callbacks previously bound to the view with `delegateEvents`.
+    // You usually don't need to use this, but may wish to if you have multiple
+    // Backbone views attached to the same DOM element.
+    undelegateEvents: function() {
+      this.$el.off('.delegateEvents' + this.cid);
+      return this;
+    },
+
+    // Performs the initial configuration of a View with a set of options.
+    // Keys with special meaning *(e.g. model, collection, id, className)* are
+    // attached directly to the view.  See `viewOptions` for an exhaustive
+    // list.
+    _configure: function(options) {
+      if (this.options) options = _.extend({}, _.result(this, 'options'), options);
+      _.extend(this, _.pick(options, viewOptions));
+      this.options = options;
+    },
+
+    // Ensure that the View has a DOM element to render into.
+    // If `this.el` is a string, pass it through `$()`, take the first
+    // matching element, and re-assign it to `el`. Otherwise, create
+    // an element from the `id`, `className` and `tagName` properties.
+    _ensureElement: function() {
+      if (!this.el) {
+        var attrs = _.extend({}, _.result(this, 'attributes'));
+        if (this.id) attrs.id = _.result(this, 'id');
+        if (this.className) attrs['class'] = _.result(this, 'className');
+        var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
+        this.setElement($el, false);
+      } else {
+        this.setElement(_.result(this, 'el'), false);
+      }
+    }
+
+  });
+
+  // Backbone.sync
+  // -------------
+
+  // Override this function to change the manner in which Backbone persists
+  // models to the server. You will be passed the type of request, and the
+  // model in question. By default, makes a RESTful Ajax request
+  // to the model's `url()`. Some possible customizations could be:
+  //
+  // * Use `setTimeout` to batch rapid-fire updates into a single request.
+  // * Send up the models as XML instead of JSON.
+  // * Persist models via WebSockets instead of Ajax.
+  //
+  // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
+  // as `POST`, with a `_method` parameter containing the true HTTP method,
+  // as well as all requests with the body as `application/x-www-form-urlencoded`
+  // instead of `application/json` with the model in a param named `model`.
+  // Useful when interfacing with server-side languages like **PHP** that make
+  // it difficult to read the body of `PUT` requests.
+  Backbone.sync = function(method, model, options) {
+    var type = methodMap[method];
+
+    // Default options, unless specified.
+    _.defaults(options || (options = {}), {
+      emulateHTTP: Backbone.emulateHTTP,
+      emulateJSON: Backbone.emulateJSON
+    });
+
+    // Default JSON-request options.
+    var params = {type: type, dataType: 'json'};
+
+    // Ensure that we have a URL.
+    if (!options.url) {
+      params.url = _.result(model, 'url') || urlError();
+    }
+
+    // Ensure that we have the appropriate request data.
+    if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) {
+      params.contentType = 'application/json';
+      params.data = JSON.stringify(options.attrs || model.toJSON(options));
+    }
+
+    // For older servers, emulate JSON by encoding the request into an HTML-form.
+    if (options.emulateJSON) {
+      params.contentType = 'application/x-www-form-urlencoded';
+      params.data = params.data ? {model: params.data} : {};
+    }
+
+    // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
+    // And an `X-HTTP-Method-Override` header.
+    if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) {
+      params.type = 'POST';
+      if (options.emulateJSON) params.data._method = type;
+      var beforeSend = options.beforeSend;
+      options.beforeSend = function(xhr) {
+        xhr.setRequestHeader('X-HTTP-Method-Override', type);
+        if (beforeSend) return beforeSend.apply(this, arguments);
+      };
+    }
+
+    // Don't process data on a non-GET request.
+    if (params.type !== 'GET' && !options.emulateJSON) {
+      params.processData = false;
+    }
+
+    // If we're sending a `PATCH` request, and we're in an old Internet Explorer
+    // that still has ActiveX enabled by default, override jQuery to use that
+    // for XHR instead. Remove this line when jQuery supports `PATCH` on IE8.
+    if (params.type === 'PATCH' && window.ActiveXObject &&
+          !(window.external && window.external.msActiveXFilteringEnabled)) {
+      params.xhr = function() {
+        return new ActiveXObject("Microsoft.XMLHTTP");
+      };
+    }
+
+    // Make the request, allowing the user to override any Ajax options.
+    var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
+    model.trigger('request', model, xhr, options);
+    return xhr;
+  };
+
+  // Map from CRUD to HTTP for our default `Backbone.sync` implementation.
+  var methodMap = {
+    'create': 'POST',
+    'update': 'PUT',
+    'patch':  'PATCH',
+    'delete': 'DELETE',
+    'read':   'GET'
+  };
+
+  // Set the default implementation of `Backbone.ajax` to proxy through to `$`.
+  // Override this if you'd like to use a different library.
+  Backbone.ajax = function() {
+    return Backbone.$.ajax.apply(Backbone.$, arguments);
+  };
+
+  // Backbone.Router
+  // ---------------
+
+  // Routers map faux-URLs to actions, and fire events when routes are
+  // matched. Creating a new one sets its `routes` hash, if not set statically.
+  var Router = Backbone.Router = function(options) {
+    options || (options = {});
+    if (options.routes) this.routes = options.routes;
+    this._bindRoutes();
+    this.initialize.apply(this, arguments);
+  };
+
+  // Cached regular expressions for matching named param parts and splatted
+  // parts of route strings.
+  var optionalParam = /\((.*?)\)/g;
+  var namedParam    = /(\(\?)?:\w+/g;
+  var splatParam    = /\*\w+/g;
+  var escapeRegExp  = /[\-{}\[\]+?.,\\\^$|#\s]/g;
+
+  // Set up all inheritable **Backbone.Router** properties and methods.
+  _.extend(Router.prototype, Events, {
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // Manually bind a single named route to a callback. For example:
+    //
+    //     this.route('search/:query/p:num', 'search', function(query, num) {
+    //       ...
+    //     });
+    //
+    route: function(route, name, callback) {
+      if (!_.isRegExp(route)) route = this._routeToRegExp(route);
+      if (_.isFunction(name)) {
+        callback = name;
+        name = '';
+      }
+      if (!callback) callback = this[name];
+      var router = this;
+      Backbone.history.route(route, function(fragment) {
+        var args = router._extractParameters(route, fragment);
+        callback && callback.apply(router, args);
+        router.trigger.apply(router, ['route:' + name].concat(args));
+        router.trigger('route', name, args);
+        Backbone.history.trigger('route', router, name, args);
+      });
+      return this;
+    },
+
+    // Simple proxy to `Backbone.history` to save a fragment into the history.
+    navigate: function(fragment, options) {
+      Backbone.history.navigate(fragment, options);
+      return this;
+    },
+
+    // Bind all defined routes to `Backbone.history`. We have to reverse the
+    // order of the routes here to support behavior where the most general
+    // routes can be defined at the bottom of the route map.
+    _bindRoutes: function() {
+      if (!this.routes) return;
+      this.routes = _.result(this, 'routes');
+      var route, routes = _.keys(this.routes);
+      while ((route = routes.pop()) != null) {
+        this.route(route, this.routes[route]);
+      }
+    },
+
+    // Convert a route string into a regular expression, suitable for matching
+    // against the current location hash.
+    _routeToRegExp: function(route) {
+      route = route.replace(escapeRegExp, '\\$&')
+                   .replace(optionalParam, '(?:$1)?')
+                   .replace(namedParam, function(match, optional){
+                     return optional ? match : '([^\/]+)';
+                   })
+                   .replace(splatParam, '(.*?)');
+      return new RegExp('^' + route + '$');
+    },
+
+    // Given a route, and a URL fragment that it matches, return the array of
+    // extracted decoded parameters. Empty or unmatched parameters will be
+    // treated as `null` to normalize cross-browser behavior.
+    _extractParameters: function(route, fragment) {
+      var params = route.exec(fragment).slice(1);
+      return _.map(params, function(param) {
+        return param ? decodeURIComponent(param) : null;
+      });
+    }
+
+  });
+
+  // Backbone.History
+  // ----------------
+
+  // Handles cross-browser history management, based on either
+  // [pushState](http://diveintohtml5.info/history.html) and real URLs, or
+  // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
+  // and URL fragments. If the browser supports neither (old IE, natch),
+  // falls back to polling.
+  var History = Backbone.History = function() {
+    this.handlers = [];
+    _.bindAll(this, 'checkUrl');
+
+    // Ensure that `History` can be used outside of the browser.
+    if (typeof window !== 'undefined') {
+      this.location = window.location;
+      this.history = window.history;
+    }
+  };
+
+  // Cached regex for stripping a leading hash/slash and trailing space.
+  var routeStripper = /^[#\/]|\s+$/g;
+
+  // Cached regex for stripping leading and trailing slashes.
+  var rootStripper = /^\/+|\/+$/g;
+
+  // Cached regex for detecting MSIE.
+  var isExplorer = /msie [\w.]+/;
+
+  // Cached regex for removing a trailing slash.
+  var trailingSlash = /\/$/;
+
+  // Has the history handling already been started?
+  History.started = false;
+
+  // Set up all inheritable **Backbone.History** properties and methods.
+  _.extend(History.prototype, Events, {
+
+    // The default interval to poll for hash changes, if necessary, is
+    // twenty times a second.
+    interval: 50,
+
+    // Gets the true hash value. Cannot use location.hash directly due to bug
+    // in Firefox where location.hash will always be decoded.
+    getHash: function(window) {
+      var match = (window || this).location.href.match(/#(.*)$/);
+      return match ? match[1] : '';
+    },
+
+    // Get the cross-browser normalized URL fragment, either from the URL,
+    // the hash, or the override.
+    getFragment: function(fragment, forcePushState) {
+      if (fragment == null) {
+        if (this._hasPushState || !this._wantsHashChange || forcePushState) {
+          fragment = this.location.pathname;
+          var root = this.root.replace(trailingSlash, '');
+          if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
+        } else {
+          fragment = this.getHash();
+        }
+      }
+      return fragment.replace(routeStripper, '');
+    },
+
+    // Start the hash change handling, returning `true` if the current URL matches
+    // an existing route, and `false` otherwise.
+    start: function(options) {
+      if (History.started) throw new Error("Backbone.history has already been started");
+      History.started = true;
+
+      // Figure out the initial configuration. Do we need an iframe?
+      // Is pushState desired ... is it available?
+      this.options          = _.extend({}, {root: '/'}, this.options, options);
+      this.root             = this.options.root;
+      this._wantsHashChange = this.options.hashChange !== false;
+      this._wantsPushState  = !!this.options.pushState;
+      this._hasPushState    = !!(this.options.pushState && this.history && this.history.pushState);
+      var fragment          = this.getFragment();
+      var docMode           = document.documentMode;
+      var oldIE             = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));
+
+      // Normalize root to always include a leading and trailing slash.
+      this.root = ('/' + this.root + '/').replace(rootStripper, '/');
+
+      if (oldIE && this._wantsHashChange) {
+        this.iframe = Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
+        this.navigate(fragment);
+      }
+
+      // Depending on whether we're using pushState or hashes, and whether
+      // 'onhashchange' is supported, determine how we check the URL state.
+      if (this._hasPushState) {
+        Backbone.$(window).on('popstate', this.checkUrl);
+      } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
+        Backbone.$(window).on('hashchange', this.checkUrl);
+      } else if (this._wantsHashChange) {
+        this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
+      }
+
+      // Determine if we need to change the base url, for a pushState link
+      // opened by a non-pushState browser.
+      this.fragment = fragment;
+      var loc = this.location;
+      var atRoot = loc.pathname.replace(/[^\/]$/, '$&/') === this.root;
+
+      // If we've started off with a route from a `pushState`-enabled browser,
+      // but we're currently in a browser that doesn't support it...
+      if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) {
+        this.fragment = this.getFragment(null, true);
+        this.location.replace(this.root + this.location.search + '#' + this.fragment);
+        // Return immediately as browser will do redirect to new url
+        return true;
+
+      // Or if we've started out with a hash-based route, but we're currently
+      // in a browser where it could be `pushState`-based instead...
+      } else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) {
+        this.fragment = this.getHash().replace(routeStripper, '');
+        this.history.replaceState({}, document.title, this.root + this.fragment + loc.search);
+      }
+
+      if (!this.options.silent) return this.loadUrl();
+    },
+
+    // Disable Backbone.history, perhaps temporarily. Not useful in a real app,
+    // but possibly useful for unit testing Routers.
+    stop: function() {
+      Backbone.$(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
+      clearInterval(this._checkUrlInterval);
+      History.started = false;
+    },
+
+    // Add a route to be tested when the fragment changes. Routes added later
+    // may override previous routes.
+    route: function(route, callback) {
+      this.handlers.unshift({route: route, callback: callback});
+    },
+
+    // Checks the current URL to see if it has changed, and if it has,
+    // calls `loadUrl`, normalizing across the hidden iframe.
+    checkUrl: function(e) {
+      var current = this.getFragment();
+      if (current === this.fragment && this.iframe) {
+        current = this.getFragment(this.getHash(this.iframe));
+      }
+      if (current === this.fragment) return false;
+      if (this.iframe) this.navigate(current);
+      this.loadUrl() || this.loadUrl(this.getHash());
+    },
+
+    // Attempt to load the current URL fragment. If a route succeeds with a
+    // match, returns `true`. If no defined routes matches the fragment,
+    // returns `false`.
+    loadUrl: function(fragmentOverride) {
+      var fragment = this.fragment = this.getFragment(fragmentOverride);
+      var matched = _.any(this.handlers, function(handler) {
+        if (handler.route.test(fragment)) {
+          handler.callback(fragment);
+          return true;
+        }
+      });
+      return matched;
+    },
+
+    // Save a fragment into the hash history, or replace the URL state if the
+    // 'replace' option is passed. You are responsible for properly URL-encoding
+    // the fragment in advance.
+    //
+    // The options object can contain `trigger: true` if you wish to have the
+    // route callback be fired (not usually desirable), or `replace: true`, if
+    // you wish to modify the current URL without adding an entry to the history.
+    navigate: function(fragment, options) {
+      if (!History.started) return false;
+      if (!options || options === true) options = {trigger: options};
+      fragment = this.getFragment(fragment || '');
+      if (this.fragment === fragment) return;
+      this.fragment = fragment;
+      var url = this.root + fragment;
+
+      // If pushState is available, we use it to set the fragment as a real URL.
+      if (this._hasPushState) {
+        this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url);
+
+      // If hash changes haven't been explicitly disabled, update the hash
+      // fragment to store history.
+      } else if (this._wantsHashChange) {
+        this._updateHash(this.location, fragment, options.replace);
+        if (this.iframe && (fragment !== this.getFragment(this.getHash(this.iframe)))) {
+          // Opening and closing the iframe tricks IE7 and earlier to push a
+          // history entry on hash-tag change.  When replace is true, we don't
+          // want this.
+          if(!options.replace) this.iframe.document.open().close();
+          this._updateHash(this.iframe.location, fragment, options.replace);
+        }
+
+      // If you've told us that you explicitly don't want fallback hashchange-
+      // based history, then `navigate` becomes a page refresh.
+      } else {
+        return this.location.assign(url);
+      }
+      if (options.trigger) this.loadUrl(fragment);
+    },
+
+    // Update the hash location, either replacing the current entry, or adding
+    // a new one to the browser history.
+    _updateHash: function(location, fragment, replace) {
+      if (replace) {
+        var href = location.href.replace(/(javascript:|#).*$/, '');
+        location.replace(href + '#' + fragment);
+      } else {
+        // Some browsers require that `hash` contains a leading #.
+        location.hash = '#' + fragment;
+      }
+    }
+
+  });
+
+  // Create the default Backbone.history.
+  Backbone.history = new History;
+
+  // Helpers
+  // -------
+
+  // Helper function to correctly set up the prototype chain, for subclasses.
+  // Similar to `goog.inherits`, but uses a hash of prototype properties and
+  // class properties to be extended.
+  var extend = function(protoProps, staticProps) {
+    var parent = this;
+    var child;
+
+    // The constructor function for the new subclass is either defined by you
+    // (the "constructor" property in your `extend` definition), or defaulted
+    // by us to simply call the parent's constructor.
+    if (protoProps && _.has(protoProps, 'constructor')) {
+      child = protoProps.constructor;
+    } else {
+      child = function(){ return parent.apply(this, arguments); };
+    }
+
+    // Add static properties to the constructor function, if supplied.
+    _.extend(child, parent, staticProps);
+
+    // Set the prototype chain to inherit from `parent`, without calling
+    // `parent`'s constructor function.
+    var Surrogate = function(){ this.constructor = child; };
+    Surrogate.prototype = parent.prototype;
+    child.prototype = new Surrogate;
+
+    // Add prototype properties (instance properties) to the subclass,
+    // if supplied.
+    if (protoProps) _.extend(child.prototype, protoProps);
+
+    // Set a convenience property in case the parent's prototype is needed
+    // later.
+    child.__super__ = parent.prototype;
+
+    return child;
+  };
+
+  // Set up inheritance for the model, collection, router, view and history.
+  Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
+
+  // Throw an error when a URL is needed, and none is supplied.
+  var urlError = function() {
+    throw new Error('A "url" property or function must be specified');
+  };
+
+  // Wrap an optional error callback with a fallback error event.
+  var wrapError = function (model, options) {
+    var error = options.error;
+    options.error = function(resp) {
+      if (error) error(model, resp, options);
+      model.trigger('error', model, resp, options);
+    };
+  };
+
 }).call(this);
\ No newline at end of file
diff --git a/app/assets/javascripts/orderedLibraries/underscore.js b/app/assets/javascripts/orderedLibraries/underscore.js
index fa77d730..dfde1646 100644
--- a/app/assets/javascripts/orderedLibraries/underscore.js
+++ b/app/assets/javascripts/orderedLibraries/underscore.js
@@ -1,1227 +1,1227 @@
-// Underscore.js 1.4.4
-// ===================
-
-// > http://underscorejs.org
-// > (c) 2009-2013 Jeremy Ashkenas, DocumentCloud Inc.
-// > Underscore may be freely distributed under the MIT license.
-
-// Baseline setup
-// --------------
-(function() {
-
-  // Establish the root object, `window` in the browser, or `global` on the server.
-  var root = this;
-
-  // Save the previous value of the `_` variable.
-  var previousUnderscore = root._;
-
-  // Establish the object that gets returned to break out of a loop iteration.
-  var breaker = {};
-
-  // Save bytes in the minified (but not gzipped) version:
-  var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
-
-  // Create quick reference variables for speed access to core prototypes.
-  var push             = ArrayProto.push,
-      slice            = ArrayProto.slice,
-      concat           = ArrayProto.concat,
-      toString         = ObjProto.toString,
-      hasOwnProperty   = ObjProto.hasOwnProperty;
-
-  // All **ECMAScript 5** native function implementations that we hope to use
-  // are declared here.
-  var
-    nativeForEach      = ArrayProto.forEach,
-    nativeMap          = ArrayProto.map,
-    nativeReduce       = ArrayProto.reduce,
-    nativeReduceRight  = ArrayProto.reduceRight,
-    nativeFilter       = ArrayProto.filter,
-    nativeEvery        = ArrayProto.every,
-    nativeSome         = ArrayProto.some,
-    nativeIndexOf      = ArrayProto.indexOf,
-    nativeLastIndexOf  = ArrayProto.lastIndexOf,
-    nativeIsArray      = Array.isArray,
-    nativeKeys         = Object.keys,
-    nativeBind         = FuncProto.bind;
-
-  // Create a safe reference to the Underscore object for use below.
-  var _ = function(obj) {
-    if (obj instanceof _) return obj;
-    if (!(this instanceof _)) return new _(obj);
-    this._wrapped = obj;
-  };
-
-  // Export the Underscore object for **Node.js**, with
-  // backwards-compatibility for the old `require()` API. If we're in
-  // the browser, add `_` as a global object via a string identifier,
-  // for Closure Compiler "advanced" mode.
-  if (typeof exports !== 'undefined') {
-    if (typeof module !== 'undefined' && module.exports) {
-      exports = module.exports = _;
-    }
-    exports._ = _;
-  } else {
-    root._ = _;
-  }
-
-  // Current version.
-  _.VERSION = '1.4.4';
-
-  // Collection Functions
-  // --------------------
-
-  // The cornerstone, an `each` implementation, aka `forEach`.
-  // Handles objects with the built-in `forEach`, arrays, and raw objects.
-  // Delegates to **ECMAScript 5**'s native `forEach` if available.
-  var each = _.each = _.forEach = function(obj, iterator, context) {
-    if (obj == null) return;
-    if (nativeForEach && obj.forEach === nativeForEach) {
-      obj.forEach(iterator, context);
-    } else if (obj.length === +obj.length) {
-      for (var i = 0, l = obj.length; i < l; i++) {
-        if (iterator.call(context, obj[i], i, obj) === breaker) return;
-      }
-    } else {
-      for (var key in obj) {
-        if (_.has(obj, key)) {
-          if (iterator.call(context, obj[key], key, obj) === breaker) return;
-        }
-      }
-    }
-  };
-
-  // Return the results of applying the iterator to each element.
-  // Delegates to **ECMAScript 5**'s native `map` if available.
-  _.map = _.collect = function(obj, iterator, context) {
-    var results = [];
-    if (obj == null) return results;
-    if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);
-    each(obj, function(value, index, list) {
-      results[results.length] = iterator.call(context, value, index, list);
-    });
-    return results;
-  };
-
-  var reduceError = 'Reduce of empty array with no initial value';
-
-  // **Reduce** builds up a single result from a list of values, aka `inject`,
-  // or `foldl`. Delegates to **ECMAScript 5**'s native `reduce` if available.
-  _.reduce = _.foldl = _.inject = function(obj, iterator, memo, context) {
-    var initial = arguments.length > 2;
-    if (obj == null) obj = [];
-    if (nativeReduce && obj.reduce === nativeReduce) {
-      if (context) iterator = _.bind(iterator, context);
-      return initial ? obj.reduce(iterator, memo) : obj.reduce(iterator);
-    }
-    each(obj, function(value, index, list) {
-      if (!initial) {
-        memo = value;
-        initial = true;
-      } else {
-        memo = iterator.call(context, memo, value, index, list);
-      }
-    });
-    if (!initial) throw new TypeError(reduceError);
-    return memo;
-  };
-
-  // The right-associative version of reduce, also known as `foldr`.
-  // Delegates to **ECMAScript 5**'s native `reduceRight` if available.
-  _.reduceRight = _.foldr = function(obj, iterator, memo, context) {
-    var initial = arguments.length > 2;
-    if (obj == null) obj = [];
-    if (nativeReduceRight && obj.reduceRight === nativeReduceRight) {
-      if (context) iterator = _.bind(iterator, context);
-      return initial ? obj.reduceRight(iterator, memo) : obj.reduceRight(iterator);
-    }
-    var length = obj.length;
-    if (length !== +length) {
-      var keys = _.keys(obj);
-      length = keys.length;
-    }
-    each(obj, function(value, index, list) {
-      index = keys ? keys[--length] : --length;
-      if (!initial) {
-        memo = obj[index];
-        initial = true;
-      } else {
-        memo = iterator.call(context, memo, obj[index], index, list);
-      }
-    });
-    if (!initial) throw new TypeError(reduceError);
-    return memo;
-  };
-
-  // Return the first value which passes a truth test. Aliased as `detect`.
-  _.find = _.detect = function(obj, iterator, context) {
-    var result;
-    any(obj, function(value, index, list) {
-      if (iterator.call(context, value, index, list)) {
-        result = value;
-        return true;
-      }
-    });
-    return result;
-  };
-
-  // Return all the elements that pass a truth test.
-  // Delegates to **ECMAScript 5**'s native `filter` if available.
-  // Aliased as `select`.
-  _.filter = _.select = function(obj, iterator, context) {
-    var results = [];
-    if (obj == null) return results;
-    if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context);
-    each(obj, function(value, index, list) {
-      if (iterator.call(context, value, index, list)) results[results.length] = value;
-    });
-    return results;
-  };
-
-  // Return all the elements for which a truth test fails.
-  _.reject = function(obj, iterator, context) {
-    return _.filter(obj, function(value, index, list) {
-      return !iterator.call(context, value, index, list);
-    }, context);
-  };
-
-  // Determine whether all of the elements match a truth test.
-  // Delegates to **ECMAScript 5**'s native `every` if available.
-  // Aliased as `all`.
-  _.every = _.all = function(obj, iterator, context) {
-    iterator || (iterator = _.identity);
-    var result = true;
-    if (obj == null) return result;
-    if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
-    each(obj, function(value, index, list) {
-      if (!(result = result && iterator.call(context, value, index, list))) return breaker;
-    });
-    return !!result;
-  };
-
-  // Determine if at least one element in the object matches a truth test.
-  // Delegates to **ECMAScript 5**'s native `some` if available.
-  // Aliased as `any`.
-  var any = _.some = _.any = function(obj, iterator, context) {
-    iterator || (iterator = _.identity);
-    var result = false;
-    if (obj == null) return result;
-    if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);
-    each(obj, function(value, index, list) {
-      if (result || (result = iterator.call(context, value, index, list))) return breaker;
-    });
-    return !!result;
-  };
-
-  // Determine if the array or object contains a given value (using `===`).
-  // Aliased as `include`.
-  _.contains = _.include = function(obj, target) {
-    if (obj == null) return false;
-    if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1;
-    return any(obj, function(value) {
-      return value === target;
-    });
-  };
-
-  // Invoke a method (with arguments) on every item in a collection.
-  _.invoke = function(obj, method) {
-    var args = slice.call(arguments, 2);
-    var isFunc = _.isFunction(method);
-    return _.map(obj, function(value) {
-      return (isFunc ? method : value[method]).apply(value, args);
-    });
-  };
-
-  // Convenience version of a common use case of `map`: fetching a property.
-  _.pluck = function(obj, key) {
-    return _.map(obj, function(value){ return value[key]; });
-  };
-
-  // Convenience version of a common use case of `filter`: selecting only objects
-  // containing specific `key:value` pairs.
-  _.where = function(obj, attrs, first) {
-    if (_.isEmpty(attrs)) return first ? null : [];
-    return _[first ? 'find' : 'filter'](obj, function(value) {
-      for (var key in attrs) {
-        if (attrs[key] !== value[key]) return false;
-      }
-      return true;
-    });
-  };
-
-  // Convenience version of a common use case of `find`: getting the first object
-  // containing specific `key:value` pairs.
-  _.findWhere = function(obj, attrs) {
-    return _.where(obj, attrs, true);
-  };
-
-  // Return the maximum element or (element-based computation).
-  // Can't optimize arrays of integers longer than 65,535 elements.
-  // See: https://bugs.webkit.org/show_bug.cgi?id=80797
-  _.max = function(obj, iterator, context) {
-    if (!iterator && _.isArray(obj) && obj[0] === +obj[0] && obj.length < 65535) {
-      return Math.max.apply(Math, obj);
-    }
-    if (!iterator && _.isEmpty(obj)) return -Infinity;
-    var result = {computed : -Infinity, value: -Infinity};
-    each(obj, function(value, index, list) {
-      var computed = iterator ? iterator.call(context, value, index, list) : value;
-      computed >= result.computed && (result = {value : value, computed : computed});
-    });
-    return result.value;
-  };
-
-  // Return the minimum element (or element-based computation).
-  _.min = function(obj, iterator, context) {
-    if (!iterator && _.isArray(obj) && obj[0] === +obj[0] && obj.length < 65535) {
-      return Math.min.apply(Math, obj);
-    }
-    if (!iterator && _.isEmpty(obj)) return Infinity;
-    var result = {computed : Infinity, value: Infinity};
-    each(obj, function(value, index, list) {
-      var computed = iterator ? iterator.call(context, value, index, list) : value;
-      computed < result.computed && (result = {value : value, computed : computed});
-    });
-    return result.value;
-  };
-
-  // Shuffle an array.
-  _.shuffle = function(obj) {
-    var rand;
-    var index = 0;
-    var shuffled = [];
-    each(obj, function(value) {
-      rand = _.random(index++);
-      shuffled[index - 1] = shuffled[rand];
-      shuffled[rand] = value;
-    });
-    return shuffled;
-  };
-
-  // An internal function to generate lookup iterators.
-  var lookupIterator = function(value) {
-    return _.isFunction(value) ? value : function(obj){ return obj[value]; };
-  };
-
-  // Sort the object's values by a criterion produced by an iterator.
-  _.sortBy = function(obj, value, context) {
-    var iterator = lookupIterator(value);
-    return _.pluck(_.map(obj, function(value, index, list) {
-      return {
-        value : value,
-        index : index,
-        criteria : iterator.call(context, value, index, list)
-      };
-    }).sort(function(left, right) {
-      var a = left.criteria;
-      var b = right.criteria;
-      if (a !== b) {
-        if (a > b || a === void 0) return 1;
-        if (a < b || b === void 0) return -1;
-      }
-      return left.index < right.index ? -1 : 1;
-    }), 'value');
-  };
-
-  // An internal function used for aggregate "group by" operations.
-  var group = function(obj, value, context, behavior) {
-    var result = {};
-    var iterator = lookupIterator(value || _.identity);
-    each(obj, function(value, index) {
-      var key = iterator.call(context, value, index, obj);
-      behavior(result, key, value);
-    });
-    return result;
-  };
-
-  // Groups the object's values by a criterion. Pass either a string attribute
-  // to group by, or a function that returns the criterion.
-  _.groupBy = function(obj, value, context) {
-    return group(obj, value, context, function(result, key, value) {
-      (_.has(result, key) ? result[key] : (result[key] = [])).push(value);
-    });
-  };
-
-  // Counts instances of an object that group by a certain criterion. Pass
-  // either a string attribute to count by, or a function that returns the
-  // criterion.
-  _.countBy = function(obj, value, context) {
-    return group(obj, value, context, function(result, key) {
-      if (!_.has(result, key)) result[key] = 0;
-      result[key]++;
-    });
-  };
-
-  // Use a comparator function to figure out the smallest index at which
-  // an object should be inserted so as to maintain order. Uses binary search.
-  _.sortedIndex = function(array, obj, iterator, context) {
-    iterator = iterator == null ? _.identity : lookupIterator(iterator);
-    var value = iterator.call(context, obj);
-    var low = 0, high = array.length;
-    while (low < high) {
-      var mid = (low + high) >>> 1;
-      iterator.call(context, array[mid]) < value ? low = mid + 1 : high = mid;
-    }
-    return low;
-  };
-
-  // Safely convert anything iterable into a real, live array.
-  _.toArray = function(obj) {
-    if (!obj) return [];
-    if (_.isArray(obj)) return slice.call(obj);
-    if (obj.length === +obj.length) return _.map(obj, _.identity);
-    return _.values(obj);
-  };
-
-  // Return the number of elements in an object.
-  _.size = function(obj) {
-    if (obj == null) return 0;
-    return (obj.length === +obj.length) ? obj.length : _.keys(obj).length;
-  };
-
-  // Array Functions
-  // ---------------
-
-  // Get the first element of an array. Passing **n** will return the first N
-  // values in the array. Aliased as `head` and `take`. The **guard** check
-  // allows it to work with `_.map`.
-  _.first = _.head = _.take = function(array, n, guard) {
-    if (array == null) return void 0;
-    return (n != null) && !guard ? slice.call(array, 0, n) : array[0];
-  };
-
-  // Returns everything but the last entry of the array. Especially useful on
-  // the arguments object. Passing **n** will return all the values in
-  // the array, excluding the last N. The **guard** check allows it to work with
-  // `_.map`.
-  _.initial = function(array, n, guard) {
-    return slice.call(array, 0, array.length - ((n == null) || guard ? 1 : n));
-  };
-
-  // Get the last element of an array. Passing **n** will return the last N
-  // values in the array. The **guard** check allows it to work with `_.map`.
-  _.last = function(array, n, guard) {
-    if (array == null) return void 0;
-    if ((n != null) && !guard) {
-      return slice.call(array, Math.max(array.length - n, 0));
-    } else {
-      return array[array.length - 1];
-    }
-  };
-
-  // Returns everything but the first entry of the array. Aliased as `tail` and `drop`.
-  // Especially useful on the arguments object. Passing an **n** will return
-  // the rest N values in the array. The **guard**
-  // check allows it to work with `_.map`.
-  _.rest = _.tail = _.drop = function(array, n, guard) {
-    return slice.call(array, (n == null) || guard ? 1 : n);
-  };
-
-  // Trim out all falsy values from an array.
-  _.compact = function(array) {
-    return _.filter(array, _.identity);
-  };
-
-  // Internal implementation of a recursive `flatten` function.
-  var flatten = function(input, shallow, output) {
-    each(input, function(value) {
-      if (_.isArray(value)) {
-        shallow ? push.apply(output, value) : flatten(value, shallow, output);
-      } else {
-        output.push(value);
-      }
-    });
-    return output;
-  };
-
-  // Return a completely flattened version of an array.
-  _.flatten = function(array, shallow) {
-    return flatten(array, shallow, []);
-  };
-
-  // Return a version of the array that does not contain the specified value(s).
-  _.without = function(array) {
-    return _.difference(array, slice.call(arguments, 1));
-  };
-
-  // Produce a duplicate-free version of the array. If the array has already
-  // been sorted, you have the option of using a faster algorithm.
-  // Aliased as `unique`.
-  _.uniq = _.unique = function(array, isSorted, iterator, context) {
-    if (_.isFunction(isSorted)) {
-      context = iterator;
-      iterator = isSorted;
-      isSorted = false;
-    }
-    var initial = iterator ? _.map(array, iterator, context) : array;
-    var results = [];
-    var seen = [];
-    each(initial, function(value, index) {
-      if (isSorted ? (!index || seen[seen.length - 1] !== value) : !_.contains(seen, value)) {
-        seen.push(value);
-        results.push(array[index]);
-      }
-    });
-    return results;
-  };
-
-  // Produce an array that contains the union: each distinct element from all of
-  // the passed-in arrays.
-  _.union = function() {
-    return _.uniq(concat.apply(ArrayProto, arguments));
-  };
-
-  // Produce an array that contains every item shared between all the
-  // passed-in arrays.
-  _.intersection = function(array) {
-    var rest = slice.call(arguments, 1);
-    return _.filter(_.uniq(array), function(item) {
-      return _.every(rest, function(other) {
-        return _.indexOf(other, item) >= 0;
-      });
-    });
-  };
-
-  // Take the difference between one array and a number of other arrays.
-  // Only the elements present in just the first array will remain.
-  _.difference = function(array) {
-    var rest = concat.apply(ArrayProto, slice.call(arguments, 1));
-    return _.filter(array, function(value){ return !_.contains(rest, value); });
-  };
-
-  // Zip together multiple lists into a single array -- elements that share
-  // an index go together.
-  _.zip = function() {
-    var args = slice.call(arguments);
-    var length = _.max(_.pluck(args, 'length'));
-    var results = new Array(length);
-    for (var i = 0; i < length; i++) {
-      results[i] = _.pluck(args, "" + i);
-    }
-    return results;
-  };
-
-  // Converts lists into objects. Pass either a single array of `[key, value]`
-  // pairs, or two parallel arrays of the same length -- one of keys, and one of
-  // the corresponding values.
-  _.object = function(list, values) {
-    if (list == null) return {};
-    var result = {};
-    for (var i = 0, l = list.length; i < l; i++) {
-      if (values) {
-        result[list[i]] = values[i];
-      } else {
-        result[list[i][0]] = list[i][1];
-      }
-    }
-    return result;
-  };
-
-  // If the browser doesn't supply us with indexOf (I'm looking at you, **MSIE**),
-  // we need this function. Return the position of the first occurrence of an
-  // item in an array, or -1 if the item is not included in the array.
-  // Delegates to **ECMAScript 5**'s native `indexOf` if available.
-  // If the array is large and already in sort order, pass `true`
-  // for **isSorted** to use binary search.
-  _.indexOf = function(array, item, isSorted) {
-    if (array == null) return -1;
-    var i = 0, l = array.length;
-    if (isSorted) {
-      if (typeof isSorted == 'number') {
-        i = (isSorted < 0 ? Math.max(0, l + isSorted) : isSorted);
-      } else {
-        i = _.sortedIndex(array, item);
-        return array[i] === item ? i : -1;
-      }
-    }
-    if (nativeIndexOf && array.indexOf === nativeIndexOf) return array.indexOf(item, isSorted);
-    for (; i < l; i++) if (array[i] === item) return i;
-    return -1;
-  };
-
-  // Delegates to **ECMAScript 5**'s native `lastIndexOf` if available.
-  _.lastIndexOf = function(array, item, from) {
-    if (array == null) return -1;
-    var hasIndex = from != null;
-    if (nativeLastIndexOf && array.lastIndexOf === nativeLastIndexOf) {
-      return hasIndex ? array.lastIndexOf(item, from) : array.lastIndexOf(item);
-    }
-    var i = (hasIndex ? from : array.length);
-    while (i--) if (array[i] === item) return i;
-    return -1;
-  };
-
-  // Generate an integer Array containing an arithmetic progression. A port of
-  // the native Python `range()` function. See
-  // [the Python documentation](http://docs.python.org/library/functions.html#range).
-  _.range = function(start, stop, step) {
-    if (arguments.length <= 1) {
-      stop = start || 0;
-      start = 0;
-    }
-    step = arguments[2] || 1;
-
-    var len = Math.max(Math.ceil((stop - start) / step), 0);
-    var idx = 0;
-    var range = new Array(len);
-
-    while(idx < len) {
-      range[idx++] = start;
-      start += step;
-    }
-
-    return range;
-  };
-
-  // Function (ahem) Functions
-  // ------------------
-
-  // Create a function bound to a given object (assigning `this`, and arguments,
-  // optionally). Delegates to **ECMAScript 5**'s native `Function.bind` if
-  // available.
-  _.bind = function(func, context) {
-    if (func.bind === nativeBind && nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));
-    var args = slice.call(arguments, 2);
-    return function() {
-      return func.apply(context, args.concat(slice.call(arguments)));
-    };
-  };
-
-  // Partially apply a function by creating a version that has had some of its
-  // arguments pre-filled, without changing its dynamic `this` context.
-  _.partial = function(func) {
-    var args = slice.call(arguments, 1);
-    return function() {
-      return func.apply(this, args.concat(slice.call(arguments)));
-    };
-  };
-
-  // Bind all of an object's methods to that object. Useful for ensuring that
-  // all callbacks defined on an object belong to it.
-  _.bindAll = function(obj) {
-    var funcs = slice.call(arguments, 1);
-    if (funcs.length === 0) funcs = _.functions(obj);
-    each(funcs, function(f) { obj[f] = _.bind(obj[f], obj); });
-    return obj;
-  };
-
-  // Memoize an expensive function by storing its results.
-  _.memoize = function(func, hasher) {
-    var memo = {};
-    hasher || (hasher = _.identity);
-    return function() {
-      var key = hasher.apply(this, arguments);
-      return _.has(memo, key) ? memo[key] : (memo[key] = func.apply(this, arguments));
-    };
-  };
-
-  // Delays a function for the given number of milliseconds, and then calls
-  // it with the arguments supplied.
-  _.delay = function(func, wait) {
-    var args = slice.call(arguments, 2);
-    return setTimeout(function(){ return func.apply(null, args); }, wait);
-  };
-
-  // Defers a function, scheduling it to run after the current call stack has
-  // cleared.
-  _.defer = function(func) {
-    return _.delay.apply(_, [func, 1].concat(slice.call(arguments, 1)));
-  };
-
-  // Returns a function, that, when invoked, will only be triggered at most once
-  // during a given window of time.
-  _.throttle = function(func, wait) {
-    var context, args, timeout, result;
-    var previous = 0;
-    var later = function() {
-      previous = new Date;
-      timeout = null;
-      result = func.apply(context, args);
-    };
-    return function() {
-      var now = new Date;
-      var remaining = wait - (now - previous);
-      context = this;
-      args = arguments;
-      if (remaining <= 0) {
-        clearTimeout(timeout);
-        timeout = null;
-        previous = now;
-        result = func.apply(context, args);
-      } else if (!timeout) {
-        timeout = setTimeout(later, remaining);
-      }
-      return result;
-    };
-  };
-
-  // Returns a function, that, as long as it continues to be invoked, will not
-  // be triggered. The function will be called after it stops being called for
-  // N milliseconds. If `immediate` is passed, trigger the function on the
-  // leading edge, instead of the trailing.
-  _.debounce = function(func, wait, immediate) {
-    var timeout, result;
-    return function() {
-      var context = this, args = arguments;
-      var later = function() {
-        timeout = null;
-        if (!immediate) result = func.apply(context, args);
-      };
-      var callNow = immediate && !timeout;
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-      if (callNow) result = func.apply(context, args);
-      return result;
-    };
-  };
-
-  // Returns a function that will be executed at most one time, no matter how
-  // often you call it. Useful for lazy initialization.
-  _.once = function(func) {
-    var ran = false, memo;
-    return function() {
-      if (ran) return memo;
-      ran = true;
-      memo = func.apply(this, arguments);
-      func = null;
-      return memo;
-    };
-  };
-
-  // Returns the first function passed as an argument to the second,
-  // allowing you to adjust arguments, run code before and after, and
-  // conditionally execute the original function.
-  _.wrap = function(func, wrapper) {
-    return function() {
-      var args = [func];
-      push.apply(args, arguments);
-      return wrapper.apply(this, args);
-    };
-  };
-
-  // Returns a function that is the composition of a list of functions, each
-  // consuming the return value of the function that follows.
-  _.compose = function() {
-    var funcs = arguments;
-    return function() {
-      var args = arguments;
-      for (var i = funcs.length - 1; i >= 0; i--) {
-        args = [funcs[i].apply(this, args)];
-      }
-      return args[0];
-    };
-  };
-
-  // Returns a function that will only be executed after being called N times.
-  _.after = function(times, func) {
-    if (times <= 0) return func();
-    return function() {
-      if (--times < 1) {
-        return func.apply(this, arguments);
-      }
-    };
-  };
-
-  // Object Functions
-  // ----------------
-
-  // Retrieve the names of an object's properties.
-  // Delegates to **ECMAScript 5**'s native `Object.keys`
-  _.keys = nativeKeys || function(obj) {
-    if (obj !== Object(obj)) throw new TypeError('Invalid object');
-    var keys = [];
-    for (var key in obj) if (_.has(obj, key)) keys[keys.length] = key;
-    return keys;
-  };
-
-  // Retrieve the values of an object's properties.
-  _.values = function(obj) {
-    var values = [];
-    for (var key in obj) if (_.has(obj, key)) values.push(obj[key]);
-    return values;
-  };
-
-  // Convert an object into a list of `[key, value]` pairs.
-  _.pairs = function(obj) {
-    var pairs = [];
-    for (var key in obj) if (_.has(obj, key)) pairs.push([key, obj[key]]);
-    return pairs;
-  };
-
-  // Invert the keys and values of an object. The values must be serializable.
-  _.invert = function(obj) {
-    var result = {};
-    for (var key in obj) if (_.has(obj, key)) result[obj[key]] = key;
-    return result;
-  };
-
-  // Return a sorted list of the function names available on the object.
-  // Aliased as `methods`
-  _.functions = _.methods = function(obj) {
-    var names = [];
-    for (var key in obj) {
-      if (_.isFunction(obj[key])) names.push(key);
-    }
-    return names.sort();
-  };
-
-  // Extend a given object with all the properties in passed-in object(s).
-  _.extend = function(obj) {
-    each(slice.call(arguments, 1), function(source) {
-      if (source) {
-        for (var prop in source) {
-          obj[prop] = source[prop];
-        }
-      }
-    });
-    return obj;
-  };
-
-  // Return a copy of the object only containing the whitelisted properties.
-  _.pick = function(obj) {
-    var copy = {};
-    var keys = concat.apply(ArrayProto, slice.call(arguments, 1));
-    each(keys, function(key) {
-      if (key in obj) copy[key] = obj[key];
-    });
-    return copy;
-  };
-
-   // Return a copy of the object without the blacklisted properties.
-  _.omit = function(obj) {
-    var copy = {};
-    var keys = concat.apply(ArrayProto, slice.call(arguments, 1));
-    for (var key in obj) {
-      if (!_.contains(keys, key)) copy[key] = obj[key];
-    }
-    return copy;
-  };
-
-  // Fill in a given object with default properties.
-  _.defaults = function(obj) {
-    each(slice.call(arguments, 1), function(source) {
-      if (source) {
-        for (var prop in source) {
-          if (obj[prop] == null) obj[prop] = source[prop];
-        }
-      }
-    });
-    return obj;
-  };
-
-  // Create a (shallow-cloned) duplicate of an object.
-  _.clone = function(obj) {
-    if (!_.isObject(obj)) return obj;
-    return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
-  };
-
-  // Invokes interceptor with the obj, and then returns obj.
-  // The primary purpose of this method is to "tap into" a method chain, in
-  // order to perform operations on intermediate results within the chain.
-  _.tap = function(obj, interceptor) {
-    interceptor(obj);
-    return obj;
-  };
-
-  // Internal recursive comparison function for `isEqual`.
-  var eq = function(a, b, aStack, bStack) {
-    // Identical objects are equal. `0 === -0`, but they aren't identical.
-    // See the Harmony `egal` proposal: http://wiki.ecmascript.org/doku.php?id=harmony:egal.
-    if (a === b) return a !== 0 || 1 / a == 1 / b;
-    // A strict comparison is necessary because `null == undefined`.
-    if (a == null || b == null) return a === b;
-    // Unwrap any wrapped objects.
-    if (a instanceof _) a = a._wrapped;
-    if (b instanceof _) b = b._wrapped;
-    // Compare `[[Class]]` names.
-    var className = toString.call(a);
-    if (className != toString.call(b)) return false;
-    switch (className) {
-      // Strings, numbers, dates, and booleans are compared by value.
-      case '[object String]':
-        // Primitives and their corresponding object wrappers are equivalent; thus, `"5"` is
-        // equivalent to `new String("5")`.
-        return a == String(b);
-      case '[object Number]':
-        // `NaN`s are equivalent, but non-reflexive. An `egal` comparison is performed for
-        // other numeric values.
-        return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
-      case '[object Date]':
-      case '[object Boolean]':
-        // Coerce dates and booleans to numeric primitive values. Dates are compared by their
-        // millisecond representations. Note that invalid dates with millisecond representations
-        // of `NaN` are not equivalent.
-        return +a == +b;
-      // RegExps are compared by their source patterns and flags.
-      case '[object RegExp]':
-        return a.source == b.source &&
-               a.global == b.global &&
-               a.multiline == b.multiline &&
-               a.ignoreCase == b.ignoreCase;
-    }
-    if (typeof a != 'object' || typeof b != 'object') return false;
-    // Assume equality for cyclic structures. The algorithm for detecting cyclic
-    // structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
-    var length = aStack.length;
-    while (length--) {
-      // Linear search. Performance is inversely proportional to the number of
-      // unique nested structures.
-      if (aStack[length] == a) return bStack[length] == b;
-    }
-    // Add the first object to the stack of traversed objects.
-    aStack.push(a);
-    bStack.push(b);
-    var size = 0, result = true;
-    // Recursively compare objects and arrays.
-    if (className == '[object Array]') {
-      // Compare array lengths to determine if a deep comparison is necessary.
-      size = a.length;
-      result = size == b.length;
-      if (result) {
-        // Deep compare the contents, ignoring non-numeric properties.
-        while (size--) {
-          if (!(result = eq(a[size], b[size], aStack, bStack))) break;
-        }
-      }
-    } else {
-      // Objects with different constructors are not equivalent, but `Object`s
-      // from different frames are.
-      var aCtor = a.constructor, bCtor = b.constructor;
-      if (aCtor !== bCtor && !(_.isFunction(aCtor) && (aCtor instanceof aCtor) &&
-                               _.isFunction(bCtor) && (bCtor instanceof bCtor))) {
-        return false;
-      }
-      // Deep compare objects.
-      for (var key in a) {
-        if (_.has(a, key)) {
-          // Count the expected number of properties.
-          size++;
-          // Deep compare each member.
-          if (!(result = _.has(b, key) && eq(a[key], b[key], aStack, bStack))) break;
-        }
-      }
-      // Ensure that both objects contain the same number of properties.
-      if (result) {
-        for (key in b) {
-          if (_.has(b, key) && !(size--)) break;
-        }
-        result = !size;
-      }
-    }
-    // Remove the first object from the stack of traversed objects.
-    aStack.pop();
-    bStack.pop();
-    return result;
-  };
-
-  // Perform a deep comparison to check if two objects are equal.
-  _.isEqual = function(a, b) {
-    return eq(a, b, [], []);
-  };
-
-  // Is a given array, string, or object empty?
-  // An "empty" object has no enumerable own-properties.
-  _.isEmpty = function(obj) {
-    if (obj == null) return true;
-    if (_.isArray(obj) || _.isString(obj)) return obj.length === 0;
-    for (var key in obj) if (_.has(obj, key)) return false;
-    return true;
-  };
-
-  // Is a given value a DOM element?
-  _.isElement = function(obj) {
-    return !!(obj && obj.nodeType === 1);
-  };
-
-  // Is a given value an array?
-  // Delegates to ECMA5's native Array.isArray
-  _.isArray = nativeIsArray || function(obj) {
-    return toString.call(obj) == '[object Array]';
-  };
-
-  // Is a given variable an object?
-  _.isObject = function(obj) {
-    return obj === Object(obj);
-  };
-
-  // Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp.
-  each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp'], function(name) {
-    _['is' + name] = function(obj) {
-      return toString.call(obj) == '[object ' + name + ']';
-    };
-  });
-
-  // Define a fallback version of the method in browsers (ahem, IE), where
-  // there isn't any inspectable "Arguments" type.
-  if (!_.isArguments(arguments)) {
-    _.isArguments = function(obj) {
-      return !!(obj && _.has(obj, 'callee'));
-    };
-  }
-
-  // Optimize `isFunction` if appropriate.
-  if (typeof (/./) !== 'function') {
-    _.isFunction = function(obj) {
-      return typeof obj === 'function';
-    };
-  }
-
-  // Is a given object a finite number?
-  _.isFinite = function(obj) {
-    return isFinite(obj) && !isNaN(parseFloat(obj));
-  };
-
-  // Is the given value `NaN`? (NaN is the only number which does not equal itself).
-  _.isNaN = function(obj) {
-    return _.isNumber(obj) && obj != +obj;
-  };
-
-  // Is a given value a boolean?
-  _.isBoolean = function(obj) {
-    return obj === true || obj === false || toString.call(obj) == '[object Boolean]';
-  };
-
-  // Is a given value equal to null?
-  _.isNull = function(obj) {
-    return obj === null;
-  };
-
-  // Is a given variable undefined?
-  _.isUndefined = function(obj) {
-    return obj === void 0;
-  };
-
-  // Shortcut function for checking if an object has a given property directly
-  // on itself (in other words, not on a prototype).
-  _.has = function(obj, key) {
-    return hasOwnProperty.call(obj, key);
-  };
-
-  // Utility Functions
-  // -----------------
-
-  // Run Underscore.js in *noConflict* mode, returning the `_` variable to its
-  // previous owner. Returns a reference to the Underscore object.
-  _.noConflict = function() {
-    root._ = previousUnderscore;
-    return this;
-  };
-
-  // Keep the identity function around for default iterators.
-  _.identity = function(value) {
-    return value;
-  };
-
-  // Run a function **n** times.
-  _.times = function(n, iterator, context) {
-    var accum = Array(n);
-    for (var i = 0; i < n; i++) accum[i] = iterator.call(context, i);
-    return accum;
-  };
-
-  // Return a random integer between min and max (inclusive).
-  _.random = function(min, max) {
-    if (max == null) {
-      max = min;
-      min = 0;
-    }
-    return min + Math.floor(Math.random() * (max - min + 1));
-  };
-
-  // List of HTML entities for escaping.
-  var entityMap = {
-    escape: {
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#x27;',
-      '/': '&#x2F;'
-    }
-  };
-  entityMap.unescape = _.invert(entityMap.escape);
-
-  // Regexes containing the keys and values listed immediately above.
-  var entityRegexes = {
-    escape:   new RegExp('[' + _.keys(entityMap.escape).join('') + ']', 'g'),
-    unescape: new RegExp('(' + _.keys(entityMap.unescape).join('|') + ')', 'g')
-  };
-
-  // Functions for escaping and unescaping strings to/from HTML interpolation.
-  _.each(['escape', 'unescape'], function(method) {
-    _[method] = function(string) {
-      if (string == null) return '';
-      return ('' + string).replace(entityRegexes[method], function(match) {
-        return entityMap[method][match];
-      });
-    };
-  });
-
-  // If the value of the named property is a function then invoke it;
-  // otherwise, return it.
-  _.result = function(object, property) {
-    if (object == null) return null;
-    var value = object[property];
-    return _.isFunction(value) ? value.call(object) : value;
-  };
-
-  // Add your own custom functions to the Underscore object.
-  _.mixin = function(obj) {
-    each(_.functions(obj), function(name){
-      var func = _[name] = obj[name];
-      _.prototype[name] = function() {
-        var args = [this._wrapped];
-        push.apply(args, arguments);
-        return result.call(this, func.apply(_, args));
-      };
-    });
-  };
-
-  // Generate a unique integer id (unique within the entire client session).
-  // Useful for temporary DOM ids.
-  var idCounter = 0;
-  _.uniqueId = function(prefix) {
-    var id = ++idCounter + '';
-    return prefix ? prefix + id : id;
-  };
-
-  // By default, Underscore uses ERB-style template delimiters, change the
-  // following template settings to use alternative delimiters.
-  _.templateSettings = {
-    evaluate    : /<%([\s\S]+?)%>/g,
-    interpolate : /<%=([\s\S]+?)%>/g,
-    escape      : /<%-([\s\S]+?)%>/g
-  };
-
-  // When customizing `templateSettings`, if you don't want to define an
-  // interpolation, evaluation or escaping regex, we need one that is
-  // guaranteed not to match.
-  var noMatch = /(.)^/;
-
-  // Certain characters need to be escaped so that they can be put into a
-  // string literal.
-  var escapes = {
-    "'":      "'",
-    '\\':     '\\',
-    '\r':     'r',
-    '\n':     'n',
-    '\t':     't',
-    '\u2028': 'u2028',
-    '\u2029': 'u2029'
-  };
-
-  var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
-
-  // JavaScript micro-templating, similar to John Resig's implementation.
-  // Underscore templating handles arbitrary delimiters, preserves whitespace,
-  // and correctly escapes quotes within interpolated code.
-  _.template = function(text, data, settings) {
-    var render;
-    settings = _.defaults({}, settings, _.templateSettings);
-
-    // Combine delimiters into one regular expression via alternation.
-    var matcher = new RegExp([
-      (settings.escape || noMatch).source,
-      (settings.interpolate || noMatch).source,
-      (settings.evaluate || noMatch).source
-    ].join('|') + '|$', 'g');
-
-    // Compile the template source, escaping string literals appropriately.
-    var index = 0;
-    var source = "__p+='";
-    text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
-      source += text.slice(index, offset)
-        .replace(escaper, function(match) { return '\\' + escapes[match]; });
-
-      if (escape) {
-        source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
-      }
-      if (interpolate) {
-        source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
-      }
-      if (evaluate) {
-        source += "';\n" + evaluate + "\n__p+='";
-      }
-      index = offset + match.length;
-      return match;
-    });
-    source += "';\n";
-
-    // If a variable is not specified, place data values in local scope.
-    if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
-
-    source = "var __t,__p='',__j=Array.prototype.join," +
-      "print=function(){__p+=__j.call(arguments,'');};\n" +
-      source + "return __p;\n";
-
-    try {
-      render = new Function(settings.variable || 'obj', '_', source);
-    } catch (e) {
-      e.source = source;
-      throw e;
-    }
-
-    if (data) return render(data, _);
-    var template = function(data) {
-      return render.call(this, data, _);
-    };
-
-    // Provide the compiled function source as a convenience for precompilation.
-    template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
-
-    return template;
-  };
-
-  // Add a "chain" function, which will delegate to the wrapper.
-  _.chain = function(obj) {
-    return _(obj).chain();
-  };
-
-  // OOP
-  // ---------------
-  // If Underscore is called as a function, it returns a wrapped object that
-  // can be used OO-style. This wrapper holds altered versions of all the
-  // underscore functions. Wrapped objects may be chained.
-
-  // Helper function to continue chaining intermediate results.
-  var result = function(obj) {
-    return this._chain ? _(obj).chain() : obj;
-  };
-
-  // Add all of the Underscore functions to the wrapper object.
-  _.mixin(_);
-
-  // Add all mutator Array functions to the wrapper.
-  each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
-    var method = ArrayProto[name];
-    _.prototype[name] = function() {
-      var obj = this._wrapped;
-      method.apply(obj, arguments);
-      if ((name == 'shift' || name == 'splice') && obj.length === 0) delete obj[0];
-      return result.call(this, obj);
-    };
-  });
-
-  // Add all accessor Array functions to the wrapper.
-  each(['concat', 'join', 'slice'], function(name) {
-    var method = ArrayProto[name];
-    _.prototype[name] = function() {
-      return result.call(this, method.apply(this._wrapped, arguments));
-    };
-  });
-
-  _.extend(_.prototype, {
-
-    // Start chaining a wrapped Underscore object.
-    chain: function() {
-      this._chain = true;
-      return this;
-    },
-
-    // Extracts the result from a wrapped and chained object.
-    value: function() {
-      return this._wrapped;
-    }
-
-  });
-
+// Underscore.js 1.4.4
+// ===================
+
+// > http://underscorejs.org
+// > (c) 2009-2013 Jeremy Ashkenas, DocumentCloud Inc.
+// > Underscore may be freely distributed under the MIT license.
+
+// Baseline setup
+// --------------
+(function() {
+
+  // Establish the root object, `window` in the browser, or `global` on the server.
+  var root = this;
+
+  // Save the previous value of the `_` variable.
+  var previousUnderscore = root._;
+
+  // Establish the object that gets returned to break out of a loop iteration.
+  var breaker = {};
+
+  // Save bytes in the minified (but not gzipped) version:
+  var ArrayProto = Array.prototype, ObjProto = Object.prototype, FuncProto = Function.prototype;
+
+  // Create quick reference variables for speed access to core prototypes.
+  var push             = ArrayProto.push,
+      slice            = ArrayProto.slice,
+      concat           = ArrayProto.concat,
+      toString         = ObjProto.toString,
+      hasOwnProperty   = ObjProto.hasOwnProperty;
+
+  // All **ECMAScript 5** native function implementations that we hope to use
+  // are declared here.
+  var
+    nativeForEach      = ArrayProto.forEach,
+    nativeMap          = ArrayProto.map,
+    nativeReduce       = ArrayProto.reduce,
+    nativeReduceRight  = ArrayProto.reduceRight,
+    nativeFilter       = ArrayProto.filter,
+    nativeEvery        = ArrayProto.every,
+    nativeSome         = ArrayProto.some,
+    nativeIndexOf      = ArrayProto.indexOf,
+    nativeLastIndexOf  = ArrayProto.lastIndexOf,
+    nativeIsArray      = Array.isArray,
+    nativeKeys         = Object.keys,
+    nativeBind         = FuncProto.bind;
+
+  // Create a safe reference to the Underscore object for use below.
+  var _ = function(obj) {
+    if (obj instanceof _) return obj;
+    if (!(this instanceof _)) return new _(obj);
+    this._wrapped = obj;
+  };
+
+  // Export the Underscore object for **Node.js**, with
+  // backwards-compatibility for the old `require()` API. If we're in
+  // the browser, add `_` as a global object via a string identifier,
+  // for Closure Compiler "advanced" mode.
+  if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = _;
+    }
+    exports._ = _;
+  } else {
+    root._ = _;
+  }
+
+  // Current version.
+  _.VERSION = '1.4.4';
+
+  // Collection Functions
+  // --------------------
+
+  // The cornerstone, an `each` implementation, aka `forEach`.
+  // Handles objects with the built-in `forEach`, arrays, and raw objects.
+  // Delegates to **ECMAScript 5**'s native `forEach` if available.
+  var each = _.each = _.forEach = function(obj, iterator, context) {
+    if (obj == null) return;
+    if (nativeForEach && obj.forEach === nativeForEach) {
+      obj.forEach(iterator, context);
+    } else if (obj.length === +obj.length) {
+      for (var i = 0, l = obj.length; i < l; i++) {
+        if (iterator.call(context, obj[i], i, obj) === breaker) return;
+      }
+    } else {
+      for (var key in obj) {
+        if (_.has(obj, key)) {
+          if (iterator.call(context, obj[key], key, obj) === breaker) return;
+        }
+      }
+    }
+  };
+
+  // Return the results of applying the iterator to each element.
+  // Delegates to **ECMAScript 5**'s native `map` if available.
+  _.map = _.collect = function(obj, iterator, context) {
+    var results = [];
+    if (obj == null) return results;
+    if (nativeMap && obj.map === nativeMap) return obj.map(iterator, context);
+    each(obj, function(value, index, list) {
+      results[results.length] = iterator.call(context, value, index, list);
+    });
+    return results;
+  };
+
+  var reduceError = 'Reduce of empty array with no initial value';
+
+  // **Reduce** builds up a single result from a list of values, aka `inject`,
+  // or `foldl`. Delegates to **ECMAScript 5**'s native `reduce` if available.
+  _.reduce = _.foldl = _.inject = function(obj, iterator, memo, context) {
+    var initial = arguments.length > 2;
+    if (obj == null) obj = [];
+    if (nativeReduce && obj.reduce === nativeReduce) {
+      if (context) iterator = _.bind(iterator, context);
+      return initial ? obj.reduce(iterator, memo) : obj.reduce(iterator);
+    }
+    each(obj, function(value, index, list) {
+      if (!initial) {
+        memo = value;
+        initial = true;
+      } else {
+        memo = iterator.call(context, memo, value, index, list);
+      }
+    });
+    if (!initial) throw new TypeError(reduceError);
+    return memo;
+  };
+
+  // The right-associative version of reduce, also known as `foldr`.
+  // Delegates to **ECMAScript 5**'s native `reduceRight` if available.
+  _.reduceRight = _.foldr = function(obj, iterator, memo, context) {
+    var initial = arguments.length > 2;
+    if (obj == null) obj = [];
+    if (nativeReduceRight && obj.reduceRight === nativeReduceRight) {
+      if (context) iterator = _.bind(iterator, context);
+      return initial ? obj.reduceRight(iterator, memo) : obj.reduceRight(iterator);
+    }
+    var length = obj.length;
+    if (length !== +length) {
+      var keys = _.keys(obj);
+      length = keys.length;
+    }
+    each(obj, function(value, index, list) {
+      index = keys ? keys[--length] : --length;
+      if (!initial) {
+        memo = obj[index];
+        initial = true;
+      } else {
+        memo = iterator.call(context, memo, obj[index], index, list);
+      }
+    });
+    if (!initial) throw new TypeError(reduceError);
+    return memo;
+  };
+
+  // Return the first value which passes a truth test. Aliased as `detect`.
+  _.find = _.detect = function(obj, iterator, context) {
+    var result;
+    any(obj, function(value, index, list) {
+      if (iterator.call(context, value, index, list)) {
+        result = value;
+        return true;
+      }
+    });
+    return result;
+  };
+
+  // Return all the elements that pass a truth test.
+  // Delegates to **ECMAScript 5**'s native `filter` if available.
+  // Aliased as `select`.
+  _.filter = _.select = function(obj, iterator, context) {
+    var results = [];
+    if (obj == null) return results;
+    if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context);
+    each(obj, function(value, index, list) {
+      if (iterator.call(context, value, index, list)) results[results.length] = value;
+    });
+    return results;
+  };
+
+  // Return all the elements for which a truth test fails.
+  _.reject = function(obj, iterator, context) {
+    return _.filter(obj, function(value, index, list) {
+      return !iterator.call(context, value, index, list);
+    }, context);
+  };
+
+  // Determine whether all of the elements match a truth test.
+  // Delegates to **ECMAScript 5**'s native `every` if available.
+  // Aliased as `all`.
+  _.every = _.all = function(obj, iterator, context) {
+    iterator || (iterator = _.identity);
+    var result = true;
+    if (obj == null) return result;
+    if (nativeEvery && obj.every === nativeEvery) return obj.every(iterator, context);
+    each(obj, function(value, index, list) {
+      if (!(result = result && iterator.call(context, value, index, list))) return breaker;
+    });
+    return !!result;
+  };
+
+  // Determine if at least one element in the object matches a truth test.
+  // Delegates to **ECMAScript 5**'s native `some` if available.
+  // Aliased as `any`.
+  var any = _.some = _.any = function(obj, iterator, context) {
+    iterator || (iterator = _.identity);
+    var result = false;
+    if (obj == null) return result;
+    if (nativeSome && obj.some === nativeSome) return obj.some(iterator, context);
+    each(obj, function(value, index, list) {
+      if (result || (result = iterator.call(context, value, index, list))) return breaker;
+    });
+    return !!result;
+  };
+
+  // Determine if the array or object contains a given value (using `===`).
+  // Aliased as `include`.
+  _.contains = _.include = function(obj, target) {
+    if (obj == null) return false;
+    if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1;
+    return any(obj, function(value) {
+      return value === target;
+    });
+  };
+
+  // Invoke a method (with arguments) on every item in a collection.
+  _.invoke = function(obj, method) {
+    var args = slice.call(arguments, 2);
+    var isFunc = _.isFunction(method);
+    return _.map(obj, function(value) {
+      return (isFunc ? method : value[method]).apply(value, args);
+    });
+  };
+
+  // Convenience version of a common use case of `map`: fetching a property.
+  _.pluck = function(obj, key) {
+    return _.map(obj, function(value){ return value[key]; });
+  };
+
+  // Convenience version of a common use case of `filter`: selecting only objects
+  // containing specific `key:value` pairs.
+  _.where = function(obj, attrs, first) {
+    if (_.isEmpty(attrs)) return first ? null : [];
+    return _[first ? 'find' : 'filter'](obj, function(value) {
+      for (var key in attrs) {
+        if (attrs[key] !== value[key]) return false;
+      }
+      return true;
+    });
+  };
+
+  // Convenience version of a common use case of `find`: getting the first object
+  // containing specific `key:value` pairs.
+  _.findWhere = function(obj, attrs) {
+    return _.where(obj, attrs, true);
+  };
+
+  // Return the maximum element or (element-based computation).
+  // Can't optimize arrays of integers longer than 65,535 elements.
+  // See: https://bugs.webkit.org/show_bug.cgi?id=80797
+  _.max = function(obj, iterator, context) {
+    if (!iterator && _.isArray(obj) && obj[0] === +obj[0] && obj.length < 65535) {
+      return Math.max.apply(Math, obj);
+    }
+    if (!iterator && _.isEmpty(obj)) return -Infinity;
+    var result = {computed : -Infinity, value: -Infinity};
+    each(obj, function(value, index, list) {
+      var computed = iterator ? iterator.call(context, value, index, list) : value;
+      computed >= result.computed && (result = {value : value, computed : computed});
+    });
+    return result.value;
+  };
+
+  // Return the minimum element (or element-based computation).
+  _.min = function(obj, iterator, context) {
+    if (!iterator && _.isArray(obj) && obj[0] === +obj[0] && obj.length < 65535) {
+      return Math.min.apply(Math, obj);
+    }
+    if (!iterator && _.isEmpty(obj)) return Infinity;
+    var result = {computed : Infinity, value: Infinity};
+    each(obj, function(value, index, list) {
+      var computed = iterator ? iterator.call(context, value, index, list) : value;
+      computed < result.computed && (result = {value : value, computed : computed});
+    });
+    return result.value;
+  };
+
+  // Shuffle an array.
+  _.shuffle = function(obj) {
+    var rand;
+    var index = 0;
+    var shuffled = [];
+    each(obj, function(value) {
+      rand = _.random(index++);
+      shuffled[index - 1] = shuffled[rand];
+      shuffled[rand] = value;
+    });
+    return shuffled;
+  };
+
+  // An internal function to generate lookup iterators.
+  var lookupIterator = function(value) {
+    return _.isFunction(value) ? value : function(obj){ return obj[value]; };
+  };
+
+  // Sort the object's values by a criterion produced by an iterator.
+  _.sortBy = function(obj, value, context) {
+    var iterator = lookupIterator(value);
+    return _.pluck(_.map(obj, function(value, index, list) {
+      return {
+        value : value,
+        index : index,
+        criteria : iterator.call(context, value, index, list)
+      };
+    }).sort(function(left, right) {
+      var a = left.criteria;
+      var b = right.criteria;
+      if (a !== b) {
+        if (a > b || a === void 0) return 1;
+        if (a < b || b === void 0) return -1;
+      }
+      return left.index < right.index ? -1 : 1;
+    }), 'value');
+  };
+
+  // An internal function used for aggregate "group by" operations.
+  var group = function(obj, value, context, behavior) {
+    var result = {};
+    var iterator = lookupIterator(value || _.identity);
+    each(obj, function(value, index) {
+      var key = iterator.call(context, value, index, obj);
+      behavior(result, key, value);
+    });
+    return result;
+  };
+
+  // Groups the object's values by a criterion. Pass either a string attribute
+  // to group by, or a function that returns the criterion.
+  _.groupBy = function(obj, value, context) {
+    return group(obj, value, context, function(result, key, value) {
+      (_.has(result, key) ? result[key] : (result[key] = [])).push(value);
+    });
+  };
+
+  // Counts instances of an object that group by a certain criterion. Pass
+  // either a string attribute to count by, or a function that returns the
+  // criterion.
+  _.countBy = function(obj, value, context) {
+    return group(obj, value, context, function(result, key) {
+      if (!_.has(result, key)) result[key] = 0;
+      result[key]++;
+    });
+  };
+
+  // Use a comparator function to figure out the smallest index at which
+  // an object should be inserted so as to maintain order. Uses binary search.
+  _.sortedIndex = function(array, obj, iterator, context) {
+    iterator = iterator == null ? _.identity : lookupIterator(iterator);
+    var value = iterator.call(context, obj);
+    var low = 0, high = array.length;
+    while (low < high) {
+      var mid = (low + high) >>> 1;
+      iterator.call(context, array[mid]) < value ? low = mid + 1 : high = mid;
+    }
+    return low;
+  };
+
+  // Safely convert anything iterable into a real, live array.
+  _.toArray = function(obj) {
+    if (!obj) return [];
+    if (_.isArray(obj)) return slice.call(obj);
+    if (obj.length === +obj.length) return _.map(obj, _.identity);
+    return _.values(obj);
+  };
+
+  // Return the number of elements in an object.
+  _.size = function(obj) {
+    if (obj == null) return 0;
+    return (obj.length === +obj.length) ? obj.length : _.keys(obj).length;
+  };
+
+  // Array Functions
+  // ---------------
+
+  // Get the first element of an array. Passing **n** will return the first N
+  // values in the array. Aliased as `head` and `take`. The **guard** check
+  // allows it to work with `_.map`.
+  _.first = _.head = _.take = function(array, n, guard) {
+    if (array == null) return void 0;
+    return (n != null) && !guard ? slice.call(array, 0, n) : array[0];
+  };
+
+  // Returns everything but the last entry of the array. Especially useful on
+  // the arguments object. Passing **n** will return all the values in
+  // the array, excluding the last N. The **guard** check allows it to work with
+  // `_.map`.
+  _.initial = function(array, n, guard) {
+    return slice.call(array, 0, array.length - ((n == null) || guard ? 1 : n));
+  };
+
+  // Get the last element of an array. Passing **n** will return the last N
+  // values in the array. The **guard** check allows it to work with `_.map`.
+  _.last = function(array, n, guard) {
+    if (array == null) return void 0;
+    if ((n != null) && !guard) {
+      return slice.call(array, Math.max(array.length - n, 0));
+    } else {
+      return array[array.length - 1];
+    }
+  };
+
+  // Returns everything but the first entry of the array. Aliased as `tail` and `drop`.
+  // Especially useful on the arguments object. Passing an **n** will return
+  // the rest N values in the array. The **guard**
+  // check allows it to work with `_.map`.
+  _.rest = _.tail = _.drop = function(array, n, guard) {
+    return slice.call(array, (n == null) || guard ? 1 : n);
+  };
+
+  // Trim out all falsy values from an array.
+  _.compact = function(array) {
+    return _.filter(array, _.identity);
+  };
+
+  // Internal implementation of a recursive `flatten` function.
+  var flatten = function(input, shallow, output) {
+    each(input, function(value) {
+      if (_.isArray(value)) {
+        shallow ? push.apply(output, value) : flatten(value, shallow, output);
+      } else {
+        output.push(value);
+      }
+    });
+    return output;
+  };
+
+  // Return a completely flattened version of an array.
+  _.flatten = function(array, shallow) {
+    return flatten(array, shallow, []);
+  };
+
+  // Return a version of the array that does not contain the specified value(s).
+  _.without = function(array) {
+    return _.difference(array, slice.call(arguments, 1));
+  };
+
+  // Produce a duplicate-free version of the array. If the array has already
+  // been sorted, you have the option of using a faster algorithm.
+  // Aliased as `unique`.
+  _.uniq = _.unique = function(array, isSorted, iterator, context) {
+    if (_.isFunction(isSorted)) {
+      context = iterator;
+      iterator = isSorted;
+      isSorted = false;
+    }
+    var initial = iterator ? _.map(array, iterator, context) : array;
+    var results = [];
+    var seen = [];
+    each(initial, function(value, index) {
+      if (isSorted ? (!index || seen[seen.length - 1] !== value) : !_.contains(seen, value)) {
+        seen.push(value);
+        results.push(array[index]);
+      }
+    });
+    return results;
+  };
+
+  // Produce an array that contains the union: each distinct element from all of
+  // the passed-in arrays.
+  _.union = function() {
+    return _.uniq(concat.apply(ArrayProto, arguments));
+  };
+
+  // Produce an array that contains every item shared between all the
+  // passed-in arrays.
+  _.intersection = function(array) {
+    var rest = slice.call(arguments, 1);
+    return _.filter(_.uniq(array), function(item) {
+      return _.every(rest, function(other) {
+        return _.indexOf(other, item) >= 0;
+      });
+    });
+  };
+
+  // Take the difference between one array and a number of other arrays.
+  // Only the elements present in just the first array will remain.
+  _.difference = function(array) {
+    var rest = concat.apply(ArrayProto, slice.call(arguments, 1));
+    return _.filter(array, function(value){ return !_.contains(rest, value); });
+  };
+
+  // Zip together multiple lists into a single array -- elements that share
+  // an index go together.
+  _.zip = function() {
+    var args = slice.call(arguments);
+    var length = _.max(_.pluck(args, 'length'));
+    var results = new Array(length);
+    for (var i = 0; i < length; i++) {
+      results[i] = _.pluck(args, "" + i);
+    }
+    return results;
+  };
+
+  // Converts lists into objects. Pass either a single array of `[key, value]`
+  // pairs, or two parallel arrays of the same length -- one of keys, and one of
+  // the corresponding values.
+  _.object = function(list, values) {
+    if (list == null) return {};
+    var result = {};
+    for (var i = 0, l = list.length; i < l; i++) {
+      if (values) {
+        result[list[i]] = values[i];
+      } else {
+        result[list[i][0]] = list[i][1];
+      }
+    }
+    return result;
+  };
+
+  // If the browser doesn't supply us with indexOf (I'm looking at you, **MSIE**),
+  // we need this function. Return the position of the first occurrence of an
+  // item in an array, or -1 if the item is not included in the array.
+  // Delegates to **ECMAScript 5**'s native `indexOf` if available.
+  // If the array is large and already in sort order, pass `true`
+  // for **isSorted** to use binary search.
+  _.indexOf = function(array, item, isSorted) {
+    if (array == null) return -1;
+    var i = 0, l = array.length;
+    if (isSorted) {
+      if (typeof isSorted == 'number') {
+        i = (isSorted < 0 ? Math.max(0, l + isSorted) : isSorted);
+      } else {
+        i = _.sortedIndex(array, item);
+        return array[i] === item ? i : -1;
+      }
+    }
+    if (nativeIndexOf && array.indexOf === nativeIndexOf) return array.indexOf(item, isSorted);
+    for (; i < l; i++) if (array[i] === item) return i;
+    return -1;
+  };
+
+  // Delegates to **ECMAScript 5**'s native `lastIndexOf` if available.
+  _.lastIndexOf = function(array, item, from) {
+    if (array == null) return -1;
+    var hasIndex = from != null;
+    if (nativeLastIndexOf && array.lastIndexOf === nativeLastIndexOf) {
+      return hasIndex ? array.lastIndexOf(item, from) : array.lastIndexOf(item);
+    }
+    var i = (hasIndex ? from : array.length);
+    while (i--) if (array[i] === item) return i;
+    return -1;
+  };
+
+  // Generate an integer Array containing an arithmetic progression. A port of
+  // the native Python `range()` function. See
+  // [the Python documentation](http://docs.python.org/library/functions.html#range).
+  _.range = function(start, stop, step) {
+    if (arguments.length <= 1) {
+      stop = start || 0;
+      start = 0;
+    }
+    step = arguments[2] || 1;
+
+    var len = Math.max(Math.ceil((stop - start) / step), 0);
+    var idx = 0;
+    var range = new Array(len);
+
+    while(idx < len) {
+      range[idx++] = start;
+      start += step;
+    }
+
+    return range;
+  };
+
+  // Function (ahem) Functions
+  // ------------------
+
+  // Create a function bound to a given object (assigning `this`, and arguments,
+  // optionally). Delegates to **ECMAScript 5**'s native `Function.bind` if
+  // available.
+  _.bind = function(func, context) {
+    if (func.bind === nativeBind && nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));
+    var args = slice.call(arguments, 2);
+    return function() {
+      return func.apply(context, args.concat(slice.call(arguments)));
+    };
+  };
+
+  // Partially apply a function by creating a version that has had some of its
+  // arguments pre-filled, without changing its dynamic `this` context.
+  _.partial = function(func) {
+    var args = slice.call(arguments, 1);
+    return function() {
+      return func.apply(this, args.concat(slice.call(arguments)));
+    };
+  };
+
+  // Bind all of an object's methods to that object. Useful for ensuring that
+  // all callbacks defined on an object belong to it.
+  _.bindAll = function(obj) {
+    var funcs = slice.call(arguments, 1);
+    if (funcs.length === 0) funcs = _.functions(obj);
+    each(funcs, function(f) { obj[f] = _.bind(obj[f], obj); });
+    return obj;
+  };
+
+  // Memoize an expensive function by storing its results.
+  _.memoize = function(func, hasher) {
+    var memo = {};
+    hasher || (hasher = _.identity);
+    return function() {
+      var key = hasher.apply(this, arguments);
+      return _.has(memo, key) ? memo[key] : (memo[key] = func.apply(this, arguments));
+    };
+  };
+
+  // Delays a function for the given number of milliseconds, and then calls
+  // it with the arguments supplied.
+  _.delay = function(func, wait) {
+    var args = slice.call(arguments, 2);
+    return setTimeout(function(){ return func.apply(null, args); }, wait);
+  };
+
+  // Defers a function, scheduling it to run after the current call stack has
+  // cleared.
+  _.defer = function(func) {
+    return _.delay.apply(_, [func, 1].concat(slice.call(arguments, 1)));
+  };
+
+  // Returns a function, that, when invoked, will only be triggered at most once
+  // during a given window of time.
+  _.throttle = function(func, wait) {
+    var context, args, timeout, result;
+    var previous = 0;
+    var later = function() {
+      previous = new Date;
+      timeout = null;
+      result = func.apply(context, args);
+    };
+    return function() {
+      var now = new Date;
+      var remaining = wait - (now - previous);
+      context = this;
+      args = arguments;
+      if (remaining <= 0) {
+        clearTimeout(timeout);
+        timeout = null;
+        previous = now;
+        result = func.apply(context, args);
+      } else if (!timeout) {
+        timeout = setTimeout(later, remaining);
+      }
+      return result;
+    };
+  };
+
+  // Returns a function, that, as long as it continues to be invoked, will not
+  // be triggered. The function will be called after it stops being called for
+  // N milliseconds. If `immediate` is passed, trigger the function on the
+  // leading edge, instead of the trailing.
+  _.debounce = function(func, wait, immediate) {
+    var timeout, result;
+    return function() {
+      var context = this, args = arguments;
+      var later = function() {
+        timeout = null;
+        if (!immediate) result = func.apply(context, args);
+      };
+      var callNow = immediate && !timeout;
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+      if (callNow) result = func.apply(context, args);
+      return result;
+    };
+  };
+
+  // Returns a function that will be executed at most one time, no matter how
+  // often you call it. Useful for lazy initialization.
+  _.once = function(func) {
+    var ran = false, memo;
+    return function() {
+      if (ran) return memo;
+      ran = true;
+      memo = func.apply(this, arguments);
+      func = null;
+      return memo;
+    };
+  };
+
+  // Returns the first function passed as an argument to the second,
+  // allowing you to adjust arguments, run code before and after, and
+  // conditionally execute the original function.
+  _.wrap = function(func, wrapper) {
+    return function() {
+      var args = [func];
+      push.apply(args, arguments);
+      return wrapper.apply(this, args);
+    };
+  };
+
+  // Returns a function that is the composition of a list of functions, each
+  // consuming the return value of the function that follows.
+  _.compose = function() {
+    var funcs = arguments;
+    return function() {
+      var args = arguments;
+      for (var i = funcs.length - 1; i >= 0; i--) {
+        args = [funcs[i].apply(this, args)];
+      }
+      return args[0];
+    };
+  };
+
+  // Returns a function that will only be executed after being called N times.
+  _.after = function(times, func) {
+    if (times <= 0) return func();
+    return function() {
+      if (--times < 1) {
+        return func.apply(this, arguments);
+      }
+    };
+  };
+
+  // Object Functions
+  // ----------------
+
+  // Retrieve the names of an object's properties.
+  // Delegates to **ECMAScript 5**'s native `Object.keys`
+  _.keys = nativeKeys || function(obj) {
+    if (obj !== Object(obj)) throw new TypeError('Invalid object');
+    var keys = [];
+    for (var key in obj) if (_.has(obj, key)) keys[keys.length] = key;
+    return keys;
+  };
+
+  // Retrieve the values of an object's properties.
+  _.values = function(obj) {
+    var values = [];
+    for (var key in obj) if (_.has(obj, key)) values.push(obj[key]);
+    return values;
+  };
+
+  // Convert an object into a list of `[key, value]` pairs.
+  _.pairs = function(obj) {
+    var pairs = [];
+    for (var key in obj) if (_.has(obj, key)) pairs.push([key, obj[key]]);
+    return pairs;
+  };
+
+  // Invert the keys and values of an object. The values must be serializable.
+  _.invert = function(obj) {
+    var result = {};
+    for (var key in obj) if (_.has(obj, key)) result[obj[key]] = key;
+    return result;
+  };
+
+  // Return a sorted list of the function names available on the object.
+  // Aliased as `methods`
+  _.functions = _.methods = function(obj) {
+    var names = [];
+    for (var key in obj) {
+      if (_.isFunction(obj[key])) names.push(key);
+    }
+    return names.sort();
+  };
+
+  // Extend a given object with all the properties in passed-in object(s).
+  _.extend = function(obj) {
+    each(slice.call(arguments, 1), function(source) {
+      if (source) {
+        for (var prop in source) {
+          obj[prop] = source[prop];
+        }
+      }
+    });
+    return obj;
+  };
+
+  // Return a copy of the object only containing the whitelisted properties.
+  _.pick = function(obj) {
+    var copy = {};
+    var keys = concat.apply(ArrayProto, slice.call(arguments, 1));
+    each(keys, function(key) {
+      if (key in obj) copy[key] = obj[key];
+    });
+    return copy;
+  };
+
+   // Return a copy of the object without the blacklisted properties.
+  _.omit = function(obj) {
+    var copy = {};
+    var keys = concat.apply(ArrayProto, slice.call(arguments, 1));
+    for (var key in obj) {
+      if (!_.contains(keys, key)) copy[key] = obj[key];
+    }
+    return copy;
+  };
+
+  // Fill in a given object with default properties.
+  _.defaults = function(obj) {
+    each(slice.call(arguments, 1), function(source) {
+      if (source) {
+        for (var prop in source) {
+          if (obj[prop] == null) obj[prop] = source[prop];
+        }
+      }
+    });
+    return obj;
+  };
+
+  // Create a (shallow-cloned) duplicate of an object.
+  _.clone = function(obj) {
+    if (!_.isObject(obj)) return obj;
+    return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
+  };
+
+  // Invokes interceptor with the obj, and then returns obj.
+  // The primary purpose of this method is to "tap into" a method chain, in
+  // order to perform operations on intermediate results within the chain.
+  _.tap = function(obj, interceptor) {
+    interceptor(obj);
+    return obj;
+  };
+
+  // Internal recursive comparison function for `isEqual`.
+  var eq = function(a, b, aStack, bStack) {
+    // Identical objects are equal. `0 === -0`, but they aren't identical.
+    // See the Harmony `egal` proposal: http://wiki.ecmascript.org/doku.php?id=harmony:egal.
+    if (a === b) return a !== 0 || 1 / a == 1 / b;
+    // A strict comparison is necessary because `null == undefined`.
+    if (a == null || b == null) return a === b;
+    // Unwrap any wrapped objects.
+    if (a instanceof _) a = a._wrapped;
+    if (b instanceof _) b = b._wrapped;
+    // Compare `[[Class]]` names.
+    var className = toString.call(a);
+    if (className != toString.call(b)) return false;
+    switch (className) {
+      // Strings, numbers, dates, and booleans are compared by value.
+      case '[object String]':
+        // Primitives and their corresponding object wrappers are equivalent; thus, `"5"` is
+        // equivalent to `new String("5")`.
+        return a == String(b);
+      case '[object Number]':
+        // `NaN`s are equivalent, but non-reflexive. An `egal` comparison is performed for
+        // other numeric values.
+        return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
+      case '[object Date]':
+      case '[object Boolean]':
+        // Coerce dates and booleans to numeric primitive values. Dates are compared by their
+        // millisecond representations. Note that invalid dates with millisecond representations
+        // of `NaN` are not equivalent.
+        return +a == +b;
+      // RegExps are compared by their source patterns and flags.
+      case '[object RegExp]':
+        return a.source == b.source &&
+               a.global == b.global &&
+               a.multiline == b.multiline &&
+               a.ignoreCase == b.ignoreCase;
+    }
+    if (typeof a != 'object' || typeof b != 'object') return false;
+    // Assume equality for cyclic structures. The algorithm for detecting cyclic
+    // structures is adapted from ES 5.1 section 15.12.3, abstract operation `JO`.
+    var length = aStack.length;
+    while (length--) {
+      // Linear search. Performance is inversely proportional to the number of
+      // unique nested structures.
+      if (aStack[length] == a) return bStack[length] == b;
+    }
+    // Add the first object to the stack of traversed objects.
+    aStack.push(a);
+    bStack.push(b);
+    var size = 0, result = true;
+    // Recursively compare objects and arrays.
+    if (className == '[object Array]') {
+      // Compare array lengths to determine if a deep comparison is necessary.
+      size = a.length;
+      result = size == b.length;
+      if (result) {
+        // Deep compare the contents, ignoring non-numeric properties.
+        while (size--) {
+          if (!(result = eq(a[size], b[size], aStack, bStack))) break;
+        }
+      }
+    } else {
+      // Objects with different constructors are not equivalent, but `Object`s
+      // from different frames are.
+      var aCtor = a.constructor, bCtor = b.constructor;
+      if (aCtor !== bCtor && !(_.isFunction(aCtor) && (aCtor instanceof aCtor) &&
+                               _.isFunction(bCtor) && (bCtor instanceof bCtor))) {
+        return false;
+      }
+      // Deep compare objects.
+      for (var key in a) {
+        if (_.has(a, key)) {
+          // Count the expected number of properties.
+          size++;
+          // Deep compare each member.
+          if (!(result = _.has(b, key) && eq(a[key], b[key], aStack, bStack))) break;
+        }
+      }
+      // Ensure that both objects contain the same number of properties.
+      if (result) {
+        for (key in b) {
+          if (_.has(b, key) && !(size--)) break;
+        }
+        result = !size;
+      }
+    }
+    // Remove the first object from the stack of traversed objects.
+    aStack.pop();
+    bStack.pop();
+    return result;
+  };
+
+  // Perform a deep comparison to check if two objects are equal.
+  _.isEqual = function(a, b) {
+    return eq(a, b, [], []);
+  };
+
+  // Is a given array, string, or object empty?
+  // An "empty" object has no enumerable own-properties.
+  _.isEmpty = function(obj) {
+    if (obj == null) return true;
+    if (_.isArray(obj) || _.isString(obj)) return obj.length === 0;
+    for (var key in obj) if (_.has(obj, key)) return false;
+    return true;
+  };
+
+  // Is a given value a DOM element?
+  _.isElement = function(obj) {
+    return !!(obj && obj.nodeType === 1);
+  };
+
+  // Is a given value an array?
+  // Delegates to ECMA5's native Array.isArray
+  _.isArray = nativeIsArray || function(obj) {
+    return toString.call(obj) == '[object Array]';
+  };
+
+  // Is a given variable an object?
+  _.isObject = function(obj) {
+    return obj === Object(obj);
+  };
+
+  // Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp.
+  each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp'], function(name) {
+    _['is' + name] = function(obj) {
+      return toString.call(obj) == '[object ' + name + ']';
+    };
+  });
+
+  // Define a fallback version of the method in browsers (ahem, IE), where
+  // there isn't any inspectable "Arguments" type.
+  if (!_.isArguments(arguments)) {
+    _.isArguments = function(obj) {
+      return !!(obj && _.has(obj, 'callee'));
+    };
+  }
+
+  // Optimize `isFunction` if appropriate.
+  if (typeof (/./) !== 'function') {
+    _.isFunction = function(obj) {
+      return typeof obj === 'function';
+    };
+  }
+
+  // Is a given object a finite number?
+  _.isFinite = function(obj) {
+    return isFinite(obj) && !isNaN(parseFloat(obj));
+  };
+
+  // Is the given value `NaN`? (NaN is the only number which does not equal itself).
+  _.isNaN = function(obj) {
+    return _.isNumber(obj) && obj != +obj;
+  };
+
+  // Is a given value a boolean?
+  _.isBoolean = function(obj) {
+    return obj === true || obj === false || toString.call(obj) == '[object Boolean]';
+  };
+
+  // Is a given value equal to null?
+  _.isNull = function(obj) {
+    return obj === null;
+  };
+
+  // Is a given variable undefined?
+  _.isUndefined = function(obj) {
+    return obj === void 0;
+  };
+
+  // Shortcut function for checking if an object has a given property directly
+  // on itself (in other words, not on a prototype).
+  _.has = function(obj, key) {
+    return hasOwnProperty.call(obj, key);
+  };
+
+  // Utility Functions
+  // -----------------
+
+  // Run Underscore.js in *noConflict* mode, returning the `_` variable to its
+  // previous owner. Returns a reference to the Underscore object.
+  _.noConflict = function() {
+    root._ = previousUnderscore;
+    return this;
+  };
+
+  // Keep the identity function around for default iterators.
+  _.identity = function(value) {
+    return value;
+  };
+
+  // Run a function **n** times.
+  _.times = function(n, iterator, context) {
+    var accum = Array(n);
+    for (var i = 0; i < n; i++) accum[i] = iterator.call(context, i);
+    return accum;
+  };
+
+  // Return a random integer between min and max (inclusive).
+  _.random = function(min, max) {
+    if (max == null) {
+      max = min;
+      min = 0;
+    }
+    return min + Math.floor(Math.random() * (max - min + 1));
+  };
+
+  // List of HTML entities for escaping.
+  var entityMap = {
+    escape: {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#x27;',
+      '/': '&#x2F;'
+    }
+  };
+  entityMap.unescape = _.invert(entityMap.escape);
+
+  // Regexes containing the keys and values listed immediately above.
+  var entityRegexes = {
+    escape:   new RegExp('[' + _.keys(entityMap.escape).join('') + ']', 'g'),
+    unescape: new RegExp('(' + _.keys(entityMap.unescape).join('|') + ')', 'g')
+  };
+
+  // Functions for escaping and unescaping strings to/from HTML interpolation.
+  _.each(['escape', 'unescape'], function(method) {
+    _[method] = function(string) {
+      if (string == null) return '';
+      return ('' + string).replace(entityRegexes[method], function(match) {
+        return entityMap[method][match];
+      });
+    };
+  });
+
+  // If the value of the named property is a function then invoke it;
+  // otherwise, return it.
+  _.result = function(object, property) {
+    if (object == null) return null;
+    var value = object[property];
+    return _.isFunction(value) ? value.call(object) : value;
+  };
+
+  // Add your own custom functions to the Underscore object.
+  _.mixin = function(obj) {
+    each(_.functions(obj), function(name){
+      var func = _[name] = obj[name];
+      _.prototype[name] = function() {
+        var args = [this._wrapped];
+        push.apply(args, arguments);
+        return result.call(this, func.apply(_, args));
+      };
+    });
+  };
+
+  // Generate a unique integer id (unique within the entire client session).
+  // Useful for temporary DOM ids.
+  var idCounter = 0;
+  _.uniqueId = function(prefix) {
+    var id = ++idCounter + '';
+    return prefix ? prefix + id : id;
+  };
+
+  // By default, Underscore uses ERB-style template delimiters, change the
+  // following template settings to use alternative delimiters.
+  _.templateSettings = {
+    evaluate    : /<%([\s\S]+?)%>/g,
+    interpolate : /<%=([\s\S]+?)%>/g,
+    escape      : /<%-([\s\S]+?)%>/g
+  };
+
+  // When customizing `templateSettings`, if you don't want to define an
+  // interpolation, evaluation or escaping regex, we need one that is
+  // guaranteed not to match.
+  var noMatch = /(.)^/;
+
+  // Certain characters need to be escaped so that they can be put into a
+  // string literal.
+  var escapes = {
+    "'":      "'",
+    '\\':     '\\',
+    '\r':     'r',
+    '\n':     'n',
+    '\t':     't',
+    '\u2028': 'u2028',
+    '\u2029': 'u2029'
+  };
+
+  var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
+
+  // JavaScript micro-templating, similar to John Resig's implementation.
+  // Underscore templating handles arbitrary delimiters, preserves whitespace,
+  // and correctly escapes quotes within interpolated code.
+  _.template = function(text, data, settings) {
+    var render;
+    settings = _.defaults({}, settings, _.templateSettings);
+
+    // Combine delimiters into one regular expression via alternation.
+    var matcher = new RegExp([
+      (settings.escape || noMatch).source,
+      (settings.interpolate || noMatch).source,
+      (settings.evaluate || noMatch).source
+    ].join('|') + '|$', 'g');
+
+    // Compile the template source, escaping string literals appropriately.
+    var index = 0;
+    var source = "__p+='";
+    text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
+      source += text.slice(index, offset)
+        .replace(escaper, function(match) { return '\\' + escapes[match]; });
+
+      if (escape) {
+        source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
+      }
+      if (interpolate) {
+        source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
+      }
+      if (evaluate) {
+        source += "';\n" + evaluate + "\n__p+='";
+      }
+      index = offset + match.length;
+      return match;
+    });
+    source += "';\n";
+
+    // If a variable is not specified, place data values in local scope.
+    if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
+
+    source = "var __t,__p='',__j=Array.prototype.join," +
+      "print=function(){__p+=__j.call(arguments,'');};\n" +
+      source + "return __p;\n";
+
+    try {
+      render = new Function(settings.variable || 'obj', '_', source);
+    } catch (e) {
+      e.source = source;
+      throw e;
+    }
+
+    if (data) return render(data, _);
+    var template = function(data) {
+      return render.call(this, data, _);
+    };
+
+    // Provide the compiled function source as a convenience for precompilation.
+    template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
+
+    return template;
+  };
+
+  // Add a "chain" function, which will delegate to the wrapper.
+  _.chain = function(obj) {
+    return _(obj).chain();
+  };
+
+  // OOP
+  // ---------------
+  // If Underscore is called as a function, it returns a wrapped object that
+  // can be used OO-style. This wrapper holds altered versions of all the
+  // underscore functions. Wrapped objects may be chained.
+
+  // Helper function to continue chaining intermediate results.
+  var result = function(obj) {
+    return this._chain ? _(obj).chain() : obj;
+  };
+
+  // Add all of the Underscore functions to the wrapper object.
+  _.mixin(_);
+
+  // Add all mutator Array functions to the wrapper.
+  each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
+    var method = ArrayProto[name];
+    _.prototype[name] = function() {
+      var obj = this._wrapped;
+      method.apply(obj, arguments);
+      if ((name == 'shift' || name == 'splice') && obj.length === 0) delete obj[0];
+      return result.call(this, obj);
+    };
+  });
+
+  // Add all accessor Array functions to the wrapper.
+  each(['concat', 'join', 'slice'], function(name) {
+    var method = ArrayProto[name];
+    _.prototype[name] = function() {
+      return result.call(this, method.apply(this._wrapped, arguments));
+    };
+  });
+
+  _.extend(_.prototype, {
+
+    // Start chaining a wrapped Underscore object.
+    chain: function() {
+      this._chain = true;
+      return this;
+    },
+
+    // Extracts the result from a wrapped and chained object.
+    value: function() {
+      return this._wrapped;
+    }
+
+  });
+
 }).call(this);
\ No newline at end of file
diff --git a/app/assets/javascripts/src/JIT.js.erb b/app/assets/javascripts/src/JIT.js.erb
index 81cc687d..526835a2 100644
--- a/app/assets/javascripts/src/JIT.js.erb
+++ b/app/assets/javascripts/src/JIT.js.erb
@@ -1,11213 +1,11213 @@
-/*
-Copyright (c) 2011 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.
- */
-window.$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;
-  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.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,
-  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>.
-
-    *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,
-  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')],
-              
-              // START METAMAPS CODE
-              contains = n.getData('alpha') !== 0 && geom && geom.contains && geom.contains.call(fx, n, this.getPos());
-              // END METAMAPS CODE
-              // ORIGINAL CODE 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')],
-
-                // START METAMAPS CODE
-                contains = e.getData('alpha') !== 0 && geom && geom.contains && geom.contains.call(fx, e, this.getPos());
-                // END METAMAPS CODE
-                // ORIGINAL CODE contains = geom && geom.contains && geom.contains.call(fx, n, 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) {
-    
-    // START METAMAPS CODE
-    var evt = $.event.get(e, win);
-    this.pressed = event.getNode() || (this.config.enableForEdges && event.getEdge());
-    // END METAMAPS CODE    
-    // ORIGINAL CODE
-    /*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 window dimensions
-    var win = {
-      'height': document.body.clientHeight,
-      'width': document.body.clientWidth
-    };
-    //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 + y + obj.height > win.height)?  
-        (pos.y - obj.height - y) : pos.y + y) + 'px';
-    style.left = ((pos.x + obj.width + x > win.width)? 
-        (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;
-    
-    // START METAMAPS CODE
-    e.preventDefault();
-	  if (e.target.id != 'infovis-canvas') return;
-    if (Metamaps.Create.newTopic.beingCreated) return;
-	  // END METAMAPS CODE
-  
-    //$.event.stop($.event.get(e, win));
-    // END METAMAPS CODE
-    // ORIGINAL CODE $.event.stop($.event.get(e, win));
-
-    var val = this.config.zooming / 1000,
-        ans = 1 + scroll * val;
-        
-    // START METAMAPS CODE
-	  if (ans > 1) {
-      if (5 >= this.canvas.scaleOffsetX) {
-		    this.canvas.scale(ans, ans);
-	    }
-	  }
-	  else if (ans < 1) {
-      if (this.canvas.scaleOffsetX >= 0.2) {
-		    this.canvas.scale(ans, ans);
-	    }
-	  }
-    // END METAMAPS CODE
-    // ORIGINAL CODE this.canvas.scale(ans, ans);
-
-    // START METAMAPS CODE
-      jQuery(document).trigger(Metamaps.JIT.events.zoom, [e]);
-    // END METAMAPS CODE
-  },
-  
-  onMouseDown: function(e, win, eventInfo) {
-    ///console.log('mouse down!!!!');
-    if(!this.config.panning) return;
-    
-    //START METAMAPS CODE
-    Metamaps.Mouse.changeInX = 0;
-    Metamaps.Mouse.changeInY = 0;
-    if((this.config.panning == 'avoid nodes' && eventInfo.getNode()) || eventInfo.getEdge()) return;
-    // END METAMAPS CODE
-    // ORIGINAl CODE if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return;
-    
-    this.pressed = true;
-    
-    //START METAMAPS CODE
-    var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); 
-    // TODO make sure this works across browsers  
-    if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey)  || rightClick)) {
-      Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos();
-      //console.log('mouse down');
-    }
-
-    Metamaps.Mouse.didPan = false;
-    
-
-    
-    // END METAMAPS CODE
-    
-    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;
-    
-    // START METAMAPS CODE
-    var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey);
-    if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey)  || rightClick)) {
-      Metamaps.Visualize.mGraph.busy = true;
-      Metamaps.boxStartCoordinates = eventInfo.getPos();
-      //console.log('mouse move');
-      return;
-    }
-    if (Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey)  || rightClick)) {
-      Metamaps.Visualize.mGraph.busy = true;
-      Metamaps.JIT.drawSelectBox(eventInfo,e);
-      //console.log('mouse move');
-      return;
-    }
-    if (rightClick){
-      return;
-    }
-    if (e.target.id != 'infovis-canvas') { 
-      this.pressed = false;
-      return;
-    }
-    Metamaps.Mouse.didPan = true;
-    // END METAMAPS CODE
-    
-    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;
-    
-    // START METAMAPS CODE
-    Metamaps.Mouse.changeInX = x;
-    Metamaps.Mouse.changeInY = y;
-    // END METAMAPS CODE
-    
-    this.pos = currentPos;
-    this.canvas.translate(x * 1/sx, y * 1/sy);
-
-    // START METAMAPS CODE
-      jQuery(document).trigger(Metamaps.JIT.events.pan);
-    // END METAMAPS CODE
-  },
-  
-  onMouseUp: function(e, win, eventInfo, isRightClick) {
-    if(!this.config.panning) return;
-    this.pressed = false;
-    
-    // START METAMAPS CODE
-    if (Metamaps.Mouse.didPan) Metamaps.JIT.SmoothPanning();
-    
-    
-    // END METAMAPS CODE
-    
-  }
-});
-
-
-/*
- * 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", 
-          // ORIGINAL CODE wrapper = $(id),
-          // START METAMAPS CODE
-          //wrapper = Metamaps.Famous.viz.surf,
-          // END METAMAPS CODE
-          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);
-
-      // START METAMAPS CODE
-      var m = Metamaps.Famous.viz.surf;
-      m.setContent(this.element);
-      m.deploy(m._currTarget);
-
-      // END METAMAPS CODE
-      // ORIGINAL CODE 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: 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!
-    }
-  });
-  
-  // START METAMAPS CODE
-  Canvas.Background.Metamaps = new Class({
-    initialize: function(viz, options) {
-      this.viz = viz;
-      this.config = options;
-    },
-    resize: function(width, height, base) {
-      this.plot(base);
-    },
-    plot: function(base) {
-      var canvas = base.canvas,
-          ctx = base.getCtx(),
-          scale = base.scaleOffsetX;
-      //var pattern = new Image();
-      //pattern.src = "<%= asset_path('cubes.png') %>";
-      //var ptrn = ctx.createPattern(pattern, 'repeat');
-      //ctx.fillStyle = ptrn;
-      ctx.fillStyle = Metamaps.Settings.colors.background;
-      var xPoint = (-(canvas.width/scale)/2) - (base.translateOffsetX/scale),
-        yPoint = (-(canvas.height/scale)/2) - (base.translateOffsetY/scale);
-      //ctx.fillRect(xPoint,yPoint,canvas.width/scale,canvas.height/scale);
-    }
-  });
-  // END METAMAPS CODE
-})();
-
-
-/*
- * 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);
-
-
-
-/*
- * 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: 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)) {
-                    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();
-            node._flag = true;
-            action(node, node._depth);
-            this.eachAdjacency(node, function(adj) {
-                var n = adj.nodeTo;
-                if(n._flag == false && filter(n)) {
-                    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*.
-       
-       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;
-        levelEnd = levelEnd === false? Number.MAX_VALUE -d : levelEnd;
-        (function loopLevel(node, levelBegin, levelEnd) {
-            var d = node._depth;
-            if(d >= levelBegin && d <= levelEnd && filter(node)) action(node, d);
-            if(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++) 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');
-                        }
-                    });
-                }); 
-                //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');
-                }
-                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:;
-        }
-    },
-
-    
-  /*
-    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),
-            maxPosX = max(posFrom.x, posTo.x),
-            minPosY = min(posFrom.y, posTo.y),
-            maxPosY = max(posFrom.y, posTo.y);
-          
-        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){
-        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 intermediatePoint = new Complex(to.x - vect.x, to.y - vect.y),
-            normal = new Complex(-vect.y / 2, vect.x / 2),
-            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.lineTo(v2.x, v2.y);
-        ctx.lineTo(to.x, to.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'
-          //'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');  
-        }
-    },
-    
-  
-    /*
-       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) {
-     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;
-    
-    //START METAMAPS CODE
-    if (Metamaps.Mouse.synapseStartCoordinates.length > 0) {
-        ctx.save();
-        var start;
-        var end = Metamaps.Mouse.synapseEndCoordinates;
-        
-        var l = Metamaps.Mouse.synapseStartCoordinates.length;
-        for (var i = l - 1; i >= 0; i -= 1) {
-            start = Metamaps.Mouse.synapseStartCoordinates[i];
-            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.3, true);
-            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.7, true);
-        }
-        ctx.restore();
-    }
-    //END METAMAPS CODE  
-
-     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');
-      // ORIGINAL CODE ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color');
-      ctx.textBaseline = node.getLabelData('textBaseline');
-      
-      //START METAMAPS CODE
-      
-      var arrayOfLabelLines = Metamaps.Util.splitLine(node.name,30).split('\n');
-      //render background
-            ctx.fillStyle = ctx.strokeStyle = Metamaps.Settings.colors.labels.background;
-            ctx.lineWidth = 2;
-            var height = 25 * arrayOfLabelLines.length; //font size + margin
-            
-            var index, lineWidths = [];
-            for (index = 0; index < arrayOfLabelLines.length; ++index) {
-              lineWidths.push( ctx.measureText( arrayOfLabelLines[index] ).width )
-            }
-            var width = Math.max.apply(null, lineWidths) + 8;
-            var x = pos.x - width/2;
-            var y = pos.y + node.getData("height") + 5;
-            var radius = 5;
-            
-              ctx.beginPath();
-              ctx.moveTo(x + radius, y);
-              ctx.lineTo(x + width - radius, y);
-              ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-              ctx.lineTo(x + width, y + height - radius);
-              ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-              ctx.lineTo(x + radius, y + height);
-              ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-              ctx.lineTo(x, y + radius);
-              ctx.quadraticCurveTo(x, y, x + radius, y);
-              ctx.closePath();
-              ctx.fill();
-              //ctx.stroke();
-       
-       ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color');
-
-      this.renderLabel(arrayOfLabelLines, canvas, node, controller);
-      // END METAMAPS CODE
-      // ORIGINAL CODE  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(customLabel, 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);
-      // START METAMAPS CODE
-      var index;
-      for (index = 0; index < customLabel.length; ++index) {
-        ctx.fillText(customLabel[index], pos.x, pos.y + node.getData("height") + 23 + (25*index));
-      }
-      // END METAMAPS CODE
-    },
-
-    hideLabel: $.empty,
-    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) {
-        var 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.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);
-    }
-});
-
-
-
-/*
- * 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.Radial
- * 
- * Implements a Radial Layout.
- * 
- * Implemented By:
- * 
- * <RGraph>, <Hypertree>
- * 
- */
-Layouts.Radial = new Class({
-
-  /*
-   * Method: compute
-   * 
-   * Computes nodes' positions.
-   * 
-   * Parameters:
-   * 
-   * property - _optional_ A <Graph.Node> position property to store the new
-   * positions. Possible values are 'pos', 'end' or 'start'.
-   * 
-   */
-  compute : function(property) {
-    var prop = $.splat(property || [ 'current', 'start', 'end' ]);
-    NodeDim.compute(this.graph, prop, this.config);
-    this.graph.computeLevels(this.root, 0, "ignore");
-    var lengthFunc = this.createLevelDistanceFunc(); 
-    this.computeAngularWidths(prop);
-    this.computePositions(prop, lengthFunc);
-  },
-
-  /*
-   * computePositions
-   * 
-   * Performs the main algorithm for computing node positions.
-   */
-  computePositions : function(property, getLength) {
-    var propArray = property;
-    var graph = this.graph;
-    var root = graph.getNode(this.root);
-    var parent = this.parent;
-    var config = this.config;
-
-    for ( var i=0, l=propArray.length; i < l; i++) {
-      var pi = propArray[i];
-      root.setPos($P(0, 0), pi);
-      root.setData('span', Math.PI * 2, pi);
-    }
-
-    root.angleSpan = {
-      begin : 0,
-      end : 2 * Math.PI
-    };
-
-    graph.eachBFS(this.root, function(elem) {
-      var angleSpan = elem.angleSpan.end - elem.angleSpan.begin;
-      var angleInit = elem.angleSpan.begin;
-      var len = getLength(elem);
-      //Calculate the sum of all angular widths
-      var totalAngularWidths = 0, subnodes = [], maxDim = {};
-      elem.eachSubnode(function(sib) {
-        totalAngularWidths += sib._treeAngularWidth;
-        //get max dim
-        for ( var i=0, l=propArray.length; i < l; i++) {
-          var pi = propArray[i], dim = sib.getData('dim', pi);
-          maxDim[pi] = (pi in maxDim)? (dim > maxDim[pi]? dim : maxDim[pi]) : dim;
-        }
-        subnodes.push(sib);
-      }, "ignore");
-      //Maintain children order
-      //Second constraint for <http://bailando.sims.berkeley.edu/papers/infovis01.htm>
-      if (parent && parent.id == elem.id && subnodes.length > 0
-          && subnodes[0].dist) {
-        subnodes.sort(function(a, b) {
-          return (a.dist >= b.dist) - (a.dist <= b.dist);
-        });
-      }
-      //Calculate nodes positions.
-      for (var k = 0, ls=subnodes.length; k < ls; k++) {
-        var child = subnodes[k];
-        if (!child._flag) {
-          var angleProportion = child._treeAngularWidth / totalAngularWidths * angleSpan;
-          var theta = angleInit + angleProportion / 2;
-
-          for ( var i=0, l=propArray.length; i < l; i++) {
-            var pi = propArray[i];
-            child.setPos($P(theta, len), pi);
-            child.setData('span', angleProportion, pi);
-            child.setData('dim-quotient', child.getData('dim', pi) / maxDim[pi], pi);
-          }
-
-          child.angleSpan = {
-            begin : angleInit,
-            end : angleInit + angleProportion
-          };
-          angleInit += angleProportion;
-        }
-      }
-    }, "ignore");
-  },
-
-  /*
-   * Method: setAngularWidthForNodes
-   * 
-   * Sets nodes angular widths.
-   */
-  setAngularWidthForNodes : function(prop) {
-    this.graph.eachBFS(this.root, function(elem, i) {
-      var diamValue = elem.getData('angularWidth', prop[0]) || 5;
-      elem._angularWidth = diamValue / i;
-    }, "ignore");
-  },
-
-  /*
-   * Method: setSubtreesAngularWidth
-   * 
-   * Sets subtrees angular widths.
-   */
-  setSubtreesAngularWidth : function() {
-    var that = this;
-    this.graph.eachNode(function(elem) {
-      that.setSubtreeAngularWidth(elem);
-    }, "ignore");
-  },
-
-  /*
-   * Method: setSubtreeAngularWidth
-   * 
-   * Sets the angular width for a subtree.
-   */
-  setSubtreeAngularWidth : function(elem) {
-    var that = this, nodeAW = elem._angularWidth, sumAW = 0;
-    elem.eachSubnode(function(child) {
-      that.setSubtreeAngularWidth(child);
-      sumAW += child._treeAngularWidth;
-    }, "ignore");
-    elem._treeAngularWidth = Math.max(nodeAW, sumAW);
-  },
-
-  /*
-   * Method: computeAngularWidths
-   * 
-   * Computes nodes and subtrees angular widths.
-   */
-  computeAngularWidths : function(prop) {
-    this.setAngularWidthForNodes(prop);
-    this.setSubtreesAngularWidth();
-  }
-
-});
-
-
-/*
- * File: RGraph.js
- *
- */
-
-/*
-   Class: RGraph
-   
-   A radial graph visualization with advanced animations.
-   
-   Inspired by:
- 
-   Animated Exploration of Dynamic Graphs with Radial Layout (Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst) <http://bailando.sims.berkeley.edu/papers/infovis01.htm>
-   
-   Note:
-   
-   This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the visualization described in the paper.
-   
-  Implements:
-  
-  All <Loader> methods
-  
-   Constructor Options:
-   
-   Inherits options from
-   
-   - <Options.Canvas>
-   - <Options.Controller>
-   - <Options.Node>
-   - <Options.Edge>
-   - <Options.Label>
-   - <Options.Events>
-   - <Options.Tips>
-   - <Options.NodeStyles>
-   - <Options.Navigation>
-   
-   Additionally, there are other parameters and some default values changed
-   
-   interpolation - (string) Default's *linear*. Describes the way nodes are interpolated. Possible values are 'linear' and 'polar'.
-   levelDistance - (number) Default's *100*. The distance between levels of the tree. 
-     
-   Instance Properties:
-
-   canvas - Access a <Canvas> instance.
-   graph - Access a <Graph> instance.
-   op - Access a <RGraph.Op> instance.
-   fx - Access a <RGraph.Plot> instance.
-   labels - Access a <RGraph.Label> interface implementation.   
-*/
-
-$jit.RGraph = new Class( {
-
-  Implements: [
-      Loader, Extras, Layouts.Radial
-  ],
-
-  initialize: function(controller){
-    var $RGraph = $jit.RGraph;
-
-    var config = {
-      interpolation: 'linear',
-      levelDistance: 100
-    };
-
-    this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge",
-        "Fx", "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': Polar,
-      'Node': {
-        'selected': false,
-        'exist': true,
-        'drawn': true
-      }
-    };
-    this.graph = new Graph(this.graphOptions, this.config.Node,
-        this.config.Edge);
-    this.labels = new $RGraph.Label[canvasConfig.Label.type](this);
-    this.fx = new $RGraph.Plot(this, $RGraph);
-    this.op = new $RGraph.Op(this);
-    this.json = null;
-    this.root = null;
-    this.busy = false;
-    this.parent = false;
-    // initialize extras
-    this.initializeExtras();
-  },
-
-  /* 
-  
-    createLevelDistanceFunc 
-  
-    Returns the levelDistance function used for calculating a node distance 
-    to its origin. This function returns a function that is computed 
-    per level and not per node, such that all nodes with the same depth will have the 
-    same distance to the origin. The resulting function gets the 
-    parent node as parameter and returns a float.
-
-   */
-  createLevelDistanceFunc: function(){
-    var ld = this.config.levelDistance;
-    return function(elem){
-      return (elem._depth + 1) * ld;
-    };
-  },
-
-  /* 
-     Method: refresh 
-     
-     Computes positions and plots the tree.
-
-   */
-  refresh: function(){
-    
-    // START METAMAPS CODE
-    // this.compute();
-    // END METAMAPS CODE
-    // ORIGINAL CODE: this.compute();
-    this.plot();
-  },
-
-  reposition: function(){
-    this.compute('end');
-  },
-
-  /*
-   Method: plot
-  
-   Plots the RGraph. This is a shortcut to *fx.plot*.
-  */
-  plot: function(){
-    this.fx.plot();
-  },
-  /*
-   getNodeAndParentAngle
-  
-   Returns the _parent_ of the given node, also calculating its angle span.
-  */
-  getNodeAndParentAngle: function(id){
-    var theta = false;
-    var n = this.graph.getNode(id);
-    var ps = n.getParents();
-    var p = (ps.length > 0)? ps[0] : false;
-    if (p) {
-      var posParent = p.pos.getc(), posChild = n.pos.getc();
-      var newPos = posParent.add(posChild.scale(-1));
-      theta = Math.atan2(newPos.y, newPos.x);
-      if (theta < 0)
-        theta += 2 * Math.PI;
-    }
-    return {
-      parent: p,
-      theta: theta
-    };
-  },
-  /*
-   tagChildren
-  
-   Enumerates the children in order to maintain child ordering (second constraint of the paper).
-  */
-  tagChildren: function(par, id){
-    if (par.angleSpan) {
-      var adjs = [];
-      par.eachAdjacency(function(elem){
-        adjs.push(elem.nodeTo);
-      }, "ignore");
-      var len = adjs.length;
-      for ( var i = 0; i < len && id != adjs[i].id; i++)
-        ;
-      for ( var j = (i + 1) % len, k = 0; id != adjs[j].id; j = (j + 1) % len) {
-        adjs[j].dist = k++;
-      }
-    }
-  },
-  /* 
-  Method: onClick 
-  
-  Animates the <RGraph> to center the node specified by *id*.
-
-   Parameters:
-
-   id - A <Graph.Node> id.
-   opt - (optional|object) An object containing some extra properties described below
-   hideLabels - (boolean) Default's *true*. Hide labels when performing the animation.
-
-   Example:
-
-   (start code js)
-     rgraph.onClick('someid');
-     //or also...
-     rgraph.onClick('someid', {
-      hideLabels: false
-     });
-    (end code)
-    
-  */
-  onClick: function(id, opt){
-    if (this.root != id && !this.busy) {
-      this.busy = true;
-      this.root = id;
-      var that = this;
-      this.controller.onBeforeCompute(this.graph.getNode(id));
-      var obj = this.getNodeAndParentAngle(id);
-
-      // second constraint
-      this.tagChildren(obj.parent, id);
-      this.parent = obj.parent;
-      this.compute('end');
-
-      // first constraint
-      var thetaDiff = obj.theta - obj.parent.endPos.theta;
-      this.graph.eachNode(function(elem){
-        elem.endPos.set(elem.endPos.getp().add($P(thetaDiff, 0)));
-      });
-
-      var mode = this.config.interpolation;
-      opt = $.merge( {
-        onComplete: $.empty
-      }, opt || {});
-
-      this.fx.animate($.merge( {
-        hideLabels: true,
-        modes: [
-          mode
-        ]
-      }, opt, {
-        onComplete: function(){
-          that.busy = false;
-          opt.onComplete();
-        }
-      }));
-    }
-  }
-});
-
-$jit.RGraph.$extend = true;
-
-(function(RGraph){
-
-  /*
-     Class: RGraph.Op
-     
-     Custom extension of <Graph.Op>.
-
-     Extends:
-
-     All <Graph.Op> methods
-     
-     See also:
-     
-     <Graph.Op>
-
-  */
-  RGraph.Op = new Class( {
-
-    Implements: Graph.Op
-
-  });
-
-  /*
-     Class: RGraph.Plot
-    
-    Custom extension of <Graph.Plot>.
-  
-    Extends:
-  
-    All <Graph.Plot> methods
-    
-    See also:
-    
-    <Graph.Plot>
-  
-  */
-  RGraph.Plot = new Class( {
-
-    Implements: Graph.Plot
-
-  });
-
-  /*
-    Object: RGraph.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>.
-  
-   */
-  RGraph.Label = {};
-
-  /*
-     RGraph.Label.Native
-
-     Custom extension of <Graph.Label.Native>.
-
-     Extends:
-
-     All <Graph.Label.Native> methods
-
-     See also:
-
-     <Graph.Label.Native>
-
-  */
-  RGraph.Label.Native = new Class( {
-    Implements: Graph.Label.Native
-  });
-
-  /*
-     RGraph.Label.SVG
-    
-    Custom extension of <Graph.Label.SVG>.
-  
-    Extends:
-  
-    All <Graph.Label.SVG> methods
-  
-    See also:
-  
-    <Graph.Label.SVG>
-  
-  */
-  RGraph.Label.SVG = new Class( {
-    Implements: Graph.Label.SVG,
-
-    initialize: function(viz){
-      this.viz = viz;
-    },
-
-    /* 
-       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), 
-          canvas = this.viz.canvas,
-          ox = canvas.translateOffsetX,
-          oy = canvas.translateOffsetY,
-          sx = canvas.scaleOffsetX,
-          sy = canvas.scaleOffsetY,
-          radius = canvas.getSize();
-      var labelPos = {
-        x: Math.round(pos.x * sx + ox + radius.width / 2),
-        y: Math.round(pos.y * sy + oy + radius.height / 2)
-      };
-      tag.setAttribute('x', labelPos.x);
-      tag.setAttribute('y', labelPos.y);
-
-      controller.onPlaceLabel(tag, node);
-    }
-  });
-
-  /*
-     RGraph.Label.HTML
-
-     Custom extension of <Graph.Label.HTML>.
-
-     Extends:
-
-     All <Graph.Label.HTML> methods.
-
-     See also:
-
-     <Graph.Label.HTML>
-
-  */
-  RGraph.Label.HTML = new Class( {
-    Implements: Graph.Label.HTML,
-
-    initialize: function(viz){
-      this.viz = viz;
-    },
-    /* 
-       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), 
-          canvas = this.viz.canvas,
-          ox = canvas.translateOffsetX,
-          oy = canvas.translateOffsetY,
-          sx = canvas.scaleOffsetX,
-          sy = canvas.scaleOffsetY,
-          radius = canvas.getSize();
-      var labelPos = {
-        x: Math.round(pos.x * sx + ox + radius.width / 2),
-        y: Math.round(pos.y * sy + oy + radius.height / 2)
-      };
-
-      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);
-    }
-  });
-
-  /*
-    Class: RGraph.Plot.NodeTypes
-
-    This class contains a list of <Graph.Node> built-in types. 
-    Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'.
-
-    You can add your custom node types, customizing your visualization to the extreme.
-
-    Example:
-
-    (start code js)
-      RGraph.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)
-
-  */
-  RGraph.Plot.NodeTypes = new Class({
-    'none': {
-      'render': $.empty,
-      'contains': $.lambda(false)
-    },
-    'circle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.circle.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.circle.contains(npos, pos, dim);
-      }
-    },
-    'ellipse': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        this.nodeHelper.ellipse.render('fill', pos, width, height, canvas);
-        },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        return this.nodeHelper.ellipse.contains(npos, pos, width, height);
-      }
-    },
-    'square': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.square.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.square.contains(npos, pos, dim);
-      }
-    },
-    'rectangle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        this.nodeHelper.rectangle.render('fill', pos, width, height, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        return this.nodeHelper.rectangle.contains(npos, pos, width, height);
-      }
-    },
-    'triangle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.triangle.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos) {
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.triangle.contains(npos, pos, dim);
-      }
-    },
-    'star': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true),
-            dim = node.getData('dim');
-        this.nodeHelper.star.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos) {
-        var npos = node.pos.getc(true),
-            dim = node.getData('dim');
-        return this.nodeHelper.star.contains(npos, pos, dim);
-      }
-    }
-  });
-
-  /*
-    Class: RGraph.Plot.EdgeTypes
-
-    This class contains a list of <Graph.Adjacence> built-in types. 
-    Edge types implemented are 'none', 'line' and 'arrow'.
-  
-    You can add your custom edge types, customizing your visualization to the extreme.
-  
-    Example:
-  
-    (start code js)
-      RGraph.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)
-  
-  */
-  RGraph.Plot.EdgeTypes = new Class({
-    'none': $.empty,
-    'line': {
-      'render': function(adj, canvas) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        this.edgeHelper.line.render(from, to, canvas);
-      },
-      'contains': function(adj, pos) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
-      }
-    },
-    'arrow': {
-      'render': function(adj, canvas) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true),
-            dim = adj.getData('dim'),
-            direction = adj.data.$direction,
-            inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
-        this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
-      },
-      'contains': function(adj, pos) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
-      }
-    }
-  });
-
-})($jit.RGraph);
-
-
-/*
- * File: Layouts.ForceDirected.js
- *
-*/
-
-/*
- * Class: Layouts.ForceDirected
- * 
- * Implements a Force Directed Layout.
- * 
- * Implemented By:
- * 
- * <ForceDirected>
- * 
- * Credits:
- * 
- * Marcus Cobden <http://marcuscobden.co.uk>
- * 
- */
-Layouts.ForceDirected = new Class({
-
-  getOptions: function(random) {
-    var s = this.canvas.getSize();
-    var w = s.width, h = s.height;
-    //count nodes
-    var count = 0;
-    this.graph.eachNode(function(n) { 
-      count++;
-    });
-    var k2 = w * h / count, k = Math.sqrt(k2);
-    var l = this.config.levelDistance;
-    
-    return {
-      width: w,
-      height: h,
-      tstart: w * 0.1,
-      nodef: function(x) { return k2 / (x || 1); },
-      edgef: function(x) { return /* x * x / k; */ k * (x - l); }
-    };
-  },
-  
-  compute: function(property, incremental) {
-    var prop = $.splat(property || ['current', 'start', 'end']);
-    var opt = this.getOptions();
-    NodeDim.compute(this.graph, prop, this.config);
-    this.graph.computeLevels(this.root, 0, "ignore");
-    this.graph.eachNode(function(n) {
-      $.each(prop, function(p) {
-        var pos = n.getPos(p);
-        if(pos.equals(Complex.KER)) {
-          pos.x = opt.width/5 * (Math.random() - 0.5);
-          pos.y = opt.height/5 * (Math.random() - 0.5);
-        }
-        //initialize disp vector
-        n.disp = {};
-        $.each(prop, function(p) {
-          n.disp[p] = $C(0, 0);
-        });
-      });
-    });
-    this.computePositions(prop, opt, incremental);
-  },
-  
-  computePositions: function(property, opt, incremental) {
-    var times = this.config.iterations, i = 0, that = this;
-    if(incremental) {
-      (function iter() {
-        for(var total=incremental.iter, j=0; j<total; j++) {
-          opt.t = opt.tstart;
-          if(times) opt.t *= (1 - i++/(times -1));
-          that.computePositionStep(property, opt);
-          if(times && i >= times) {
-            incremental.onComplete();
-            return;
-          }
-        }
-        incremental.onStep(Math.round(i / (times -1) * 100));
-        setTimeout(iter, 1);
-      })();
-    } else {
-      for(; i < times; i++) {
-        opt.t = opt.tstart * (1 - i/(times -1));
-        this.computePositionStep(property, opt);
-      }
-    }
-  },
-  
-  computePositionStep: function(property, opt) {
-    var graph = this.graph;
-    var min = Math.min, max = Math.max;
-    var dpos = $C(0, 0);
-    //calculate repulsive forces
-    graph.eachNode(function(v) {
-      //initialize disp
-      $.each(property, function(p) {
-        v.disp[p].x = 0; v.disp[p].y = 0;
-      });
-      graph.eachNode(function(u) {
-        if(u.id != v.id) {
-          $.each(property, function(p) {
-            var vp = v.getPos(p), up = u.getPos(p);
-            dpos.x = vp.x - up.x;
-            dpos.y = vp.y - up.y;
-            var norm = dpos.norm() || 1;
-            v.disp[p].$add(dpos
-                .$scale(opt.nodef(norm) / norm));
-          });
-        }
-      });
-    });
-    //calculate attractive forces
-    var T = !!graph.getNode(this.root).visited;
-    graph.eachNode(function(node) {
-      node.eachAdjacency(function(adj) {
-        var nodeTo = adj.nodeTo;
-        if(!!nodeTo.visited === T) {
-          $.each(property, function(p) {
-            var vp = node.getPos(p), up = nodeTo.getPos(p);
-            dpos.x = vp.x - up.x;
-            dpos.y = vp.y - up.y;
-            var norm = dpos.norm() || 1;
-            node.disp[p].$add(dpos.$scale(-opt.edgef(norm) / norm));
-            nodeTo.disp[p].$add(dpos.$scale(-1));
-          });
-        }
-      });
-      node.visited = !T;
-    });
-    //arrange positions to fit the canvas
-    var t = opt.t, w2 = opt.width / 2, h2 = opt.height / 2;
-    graph.eachNode(function(u) {
-      $.each(property, function(p) {
-        var disp = u.disp[p];
-        var norm = disp.norm() || 1;
-        var p = u.getPos(p);
-        p.$add($C(disp.x * min(Math.abs(disp.x), t) / norm, 
-            disp.y * min(Math.abs(disp.y), t) / norm));
-        p.x = min(w2, max(-w2, p.x));
-        p.y = min(h2, max(-h2, p.y));
-      });
-    });
-  }
-});
-
-/*
- * File: ForceDirected.js
- */
-
-/*
-   Class: ForceDirected
-      
-   A visualization that lays graphs using a Force-Directed layout algorithm.
-   
-   Inspired by:
-  
-   Force-Directed Drawing Algorithms (Stephen G. Kobourov) <http://www.cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf>
-   
-  Implements:
-  
-  All <Loader> methods
-  
-   Constructor Options:
-   
-   Inherits options from
-   
-   - <Options.Canvas>
-   - <Options.Controller>
-   - <Options.Node>
-   - <Options.Edge>
-   - <Options.Label>
-   - <Options.Events>
-   - <Options.Tips>
-   - <Options.NodeStyles>
-   - <Options.Navigation>
-   
-   Additionally, there are two parameters
-   
-   levelDistance - (number) Default's *50*. The natural length desired for the edges.
-   iterations - (number) Default's *50*. The number of iterations for the spring layout simulation. Depending on the browser's speed you could set this to a more 'interesting' number, like *200*. 
-     
-   Instance Properties:
-
-   canvas - Access a <Canvas> instance.
-   graph - Access a <Graph> instance.
-   op - Access a <ForceDirected.Op> instance.
-   fx - Access a <ForceDirected.Plot> instance.
-   labels - Access a <ForceDirected.Label> interface implementation.
-
-*/
-
-$jit.ForceDirected = new Class( {
-
-  Implements: [ Loader, Extras, Layouts.ForceDirected ],
-
-  initialize: function(controller) {
-    var $ForceDirected = $jit.ForceDirected;
-
-    var config = {
-      iterations: 50,
-      levelDistance: 50
-    };
-
-    this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge",
-        "Fx", "Tips", "NodeStyles", "Events", "Navigation", "Controller", "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,
-      'Node': {
-        'selected': false,
-        'exist': true,
-        'drawn': true
-      }
-    };
-    this.graph = new Graph(this.graphOptions, this.config.Node,
-        this.config.Edge);
-    this.labels = new $ForceDirected.Label[canvasConfig.Label.type](this);
-    this.fx = new $ForceDirected.Plot(this, $ForceDirected);
-    this.op = new $ForceDirected.Op(this);
-    this.json = null;
-    this.busy = false;
-    // initialize extras
-    this.initializeExtras();
-  },
-
-  /* 
-    Method: refresh 
-    
-    Computes positions and plots the tree.
-  */
-  refresh: function() {
-    // START METAMAPS CODE
-    // this.compute();
-    // END METAMAPS CODE
-    // ORIGINAL CODE: this.compute();
-    this.plot();
-  },
-
-  reposition: function() {
-    this.compute('end');
-  },
-
-/*
-  Method: computeIncremental
-  
-  Performs the Force Directed algorithm incrementally.
-  
-  Description:
-  
-  ForceDirected algorithms can perform many computations and lead to JavaScript taking too much time to complete. 
-  This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and 
-  avoiding browser messages such as "This script is taking too long to complete".
-  
-  Parameters:
-  
-  opt - (object) The object properties are described below
-  
-  iter - (number) Default's *20*. Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property 
-  of your <ForceDirected> class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces.
-  
-  property - (string) Default's *end*. Whether to update starting, current or ending node positions. Possible values are 'end', 'start', 'current'. 
-  You can also set an array of these properties. If you'd like to keep the current node positions but to perform these 
-  computations for final animation positions then you can just choose 'end'.
-  
-  onStep - (function) A callback function called when each "small part" of the algorithm completed. This function gets as first formal 
-  parameter a percentage value.
-  
-  onComplete - A callback function called when the algorithm completed.
-  
-  Example:
-  
-  In this example I calculate the end positions and then animate the graph to those positions
-  
-  (start code js)
-  var fd = new $jit.ForceDirected(...);
-  fd.computeIncremental({
-    iter: 20,
-    property: 'end',
-    onStep: function(perc) {
-      Log.write("loading " + perc + "%");
-    },
-    onComplete: function() {
-      Log.write("done");
-      fd.animate();
-    }
-  });
-  (end code)
-  
-  In this example I calculate all positions and (re)plot the graph
-  
-  (start code js)
-  var fd = new ForceDirected(...);
-  fd.computeIncremental({
-    iter: 20,
-    property: ['end', 'start', 'current'],
-    onStep: function(perc) {
-      Log.write("loading " + perc + "%");
-    },
-    onComplete: function() {
-      Log.write("done");
-      fd.plot();
-    }
-  });
-  (end code)
-  
-  */
-  computeIncremental: function(opt) {
-    opt = $.merge( {
-      iter: 20,
-      property: 'end',
-      onStep: $.empty,
-      onComplete: $.empty
-    }, opt || {});
-
-    this.config.onBeforeCompute(this.graph.getNode(this.root));
-    this.compute(opt.property, opt);
-  },
-
-  /*
-    Method: plot
-   
-    Plots the ForceDirected graph. This is a shortcut to *fx.plot*.
-   */
-  plot: function() {
-    this.fx.plot();
-  },
-
-  /*
-     Method: animate
-    
-     Animates the graph from the current positions to the 'end' node positions.
-  */
-  animate: function(opt) {
-    this.fx.animate($.merge( {
-      modes: [ 'linear' ]
-    }, opt || {}));
-  }
-});
-
-$jit.ForceDirected.$extend = true;
-
-(function(ForceDirected) {
-
-  /*
-     Class: ForceDirected.Op
-     
-     Custom extension of <Graph.Op>.
-
-     Extends:
-
-     All <Graph.Op> methods
-     
-     See also:
-     
-     <Graph.Op>
-
-  */
-  ForceDirected.Op = new Class( {
-
-    Implements: Graph.Op
-
-  });
-
-  /*
-    Class: ForceDirected.Plot
-    
-    Custom extension of <Graph.Plot>.
-  
-    Extends:
-  
-    All <Graph.Plot> methods
-    
-    See also:
-    
-    <Graph.Plot>
-  
-  */
-  ForceDirected.Plot = new Class( {
-
-    Implements: Graph.Plot
-
-  });
-
-  /*
-    Class: ForceDirected.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>.
-  
-  */
-  ForceDirected.Label = {};
-
-  /*
-     ForceDirected.Label.Native
-     
-     Custom extension of <Graph.Label.Native>.
-
-     Extends:
-
-     All <Graph.Label.Native> methods
-
-     See also:
-
-     <Graph.Label.Native>
-
-  */
-  ForceDirected.Label.Native = new Class( {
-    Implements: Graph.Label.Native
-  });
-
-  /*
-    ForceDirected.Label.SVG
-    
-    Custom extension of <Graph.Label.SVG>.
-  
-    Extends:
-  
-    All <Graph.Label.SVG> methods
-  
-    See also:
-  
-    <Graph.Label.SVG>
-  
-  */
-  ForceDirected.Label.SVG = new Class( {
-    Implements: Graph.Label.SVG,
-
-    initialize: function(viz) {
-      this.viz = viz;
-    },
-
-    /* 
-       placeLabel
-
-       Overrides abstract method placeLabel in <Graph.Label>.
-
-       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), 
-          canvas = this.viz.canvas,
-          ox = canvas.translateOffsetX,
-          oy = canvas.translateOffsetY,
-          sx = canvas.scaleOffsetX,
-          sy = canvas.scaleOffsetY,
-          radius = canvas.getSize();
-      var labelPos = {
-        x: Math.round(pos.x * sx + ox + radius.width / 2),
-        y: Math.round(pos.y * sy + oy + radius.height / 2)
-      };
-      tag.setAttribute('x', labelPos.x);
-      tag.setAttribute('y', labelPos.y);
-
-      controller.onPlaceLabel(tag, node);
-    }
-  });
-
-  /*
-     ForceDirected.Label.HTML
-     
-     Custom extension of <Graph.Label.HTML>.
-
-     Extends:
-
-     All <Graph.Label.HTML> methods.
-
-     See also:
-
-     <Graph.Label.HTML>
-
-  */
-  ForceDirected.Label.HTML = new Class( {
-    Implements: Graph.Label.HTML,
-
-    initialize: function(viz) {
-      this.viz = viz;
-    },
-    /* 
-       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), 
-          canvas = this.viz.canvas,
-          ox = canvas.translateOffsetX,
-          oy = canvas.translateOffsetY,
-          sx = canvas.scaleOffsetX,
-          sy = canvas.scaleOffsetY,
-          radius = canvas.getSize();
-      var labelPos = {
-        x: Math.round(pos.x * sx + ox + radius.width / 2),
-        y: Math.round(pos.y * sy + oy + radius.height / 2)
-      };
-      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);
-    }
-  });
-
-  /*
-    Class: ForceDirected.Plot.NodeTypes
-
-    This class contains a list of <Graph.Node> built-in types. 
-    Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'.
-
-    You can add your custom node types, customizing your visualization to the extreme.
-
-    Example:
-
-    (start code js)
-      ForceDirected.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)
-
-  */
-  ForceDirected.Plot.NodeTypes = new Class({
-    'none': {
-      'render': $.empty,
-      'contains': $.lambda(false)
-    },
-    'circle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.circle.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.circle.contains(npos, pos, dim);
-      }
-    },
-    'ellipse': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        this.nodeHelper.ellipse.render('fill', pos, width, height, canvas);
-        },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        return this.nodeHelper.ellipse.contains(npos, pos, width, height);
-      }
-    },
-    'square': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.square.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.square.contains(npos, pos, dim);
-      }
-    },
-    'rectangle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        this.nodeHelper.rectangle.render('fill', pos, width, height, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        return this.nodeHelper.rectangle.contains(npos, pos, width, height);
-      }
-    },
-    'triangle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.triangle.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos) {
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.triangle.contains(npos, pos, dim);
-      }
-    },
-    'star': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true),
-            dim = node.getData('dim');
-        this.nodeHelper.star.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos) {
-        var npos = node.pos.getc(true),
-            dim = node.getData('dim');
-        return this.nodeHelper.star.contains(npos, pos, dim);
-      }
-    }
-  });
-
-  /*
-    Class: ForceDirected.Plot.EdgeTypes
-  
-    This class contains a list of <Graph.Adjacence> built-in types. 
-    Edge types implemented are 'none', 'line' and 'arrow'.
-  
-    You can add your custom edge types, customizing your visualization to the extreme.
-  
-    Example:
-  
-    (start code js)
-      ForceDirected.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)
-  
-  */
-  ForceDirected.Plot.EdgeTypes = new Class({
-    'none': $.empty,
-    'line': {
-      'render': function(adj, canvas) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        this.edgeHelper.line.render(from, to, canvas);
-      },
-      'contains': function(adj, pos) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
-      }
-    },
-    'arrow': {
-      'render': function(adj, canvas) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true),
-            dim = adj.getData('dim'),
-            direction = adj.data.$direction,
-            inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
-        this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
-      },
-      'contains': function(adj, pos) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
-      }
-    }
-  });
-
-})($jit.ForceDirected);
-
-
-/*
- * Vector3 class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
- */
-
-var Vector3 = function(x, y, z) {
-	this.x = x || 0;
-	this.y = y || 0;
-	this.z = z || 0;
-};
-
-$jit.Vector3 = Vector3;
-
-Vector3.prototype = {
-  set: function(v) {
-    this.x = v.x;
-    this.y = v.y;
-    this.z = v.z;
-  },
-
-  setc: function(x, y, z) {
-		this.x = x;
-		this.y = y;
-		this.z = z;
-	},
-	
-	getc: function() {
-	  return this;
-	},
-	
-	//TODO(nico): getp
-
-	add: function(v1, v2) {
-		this.x = v1.x + v2.x;
-		this.y = v1.y + v2.y;
-		this.z = v1.z + v2.z;
-		return this;
-	},
-
-	$add: function(v) {
-		this.x += v.x;
-		this.y += v.y;
-		this.z += v.z;
-		return this;
-	},
-
-	addScalar: function(s) {
-		this.x += s;
-		this.y += s;
-		this.z += s;
-		return this;
-	},
-
-	sub: function(v1, v2) {
-		this.x = v1.x - v2.x;
-		this.y = v1.y - v2.y;
-		this.z = v1.z - v2.z;
-		return this;
-	},
-
-	$sub: function(v) {
-		this.x -= v.x;
-		this.y -= v.y;
-		this.z -= v.z;
-		return this;
-	},
-
-	cross: function(v1, v2) {
-		this.x = v1.y * v2.z - v1.z * v2.y;
-		this.y = v1.z * v2.x - v1.x * v2.z;
-		this.z = v1.x * v2.y - v1.y * v2.x;
-		return this;
-	},
-
-	$cross: function(v) {
-		var tx = this.x, ty = this.y, tz = this.z;
-
-		this.x = ty * v.z - tz * v.y;
-		this.y = tz * v.x - tx * v.z;
-		this.z = tx * v.y - ty * v.x;
-		return this;
-	},
-
-	$multiply: function(v) {
-		this.x *= v.x;
-		this.y *= v.y;
-		this.z *= v.z;
-		return this;
-	},
-
-	$scale: function(s) {
-		this.x *= s;
-		this.y *= s;
-		this.z *= s;
-		return this;
-	},
-
-	dot: function(v) {
-		return this.x * v.x + this.y * v.y + this.z * v.z;
-	},
-
-	distanceTo: function(v) {
-		return Math.sqrt(this.distanceToSquared(v));
-	},
-
-	distanceToSquared: function(v) {
-		var dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
-		return dx * dx + dy * dy + dz * dz;
-	},
-
-	norm: function() {
-		return Math.sqrt( this.x * this.x + this.y * this.y + this.z * this.z );
-	},
-
-	normSquared: function() {
-		return this.x * this.x + this.y * this.y + this.z * this.z;
-	},
-
-	negate: function() {
-		this.x = - this.x;
-		this.y = - this.y;
-		this.z = - this.z;
-		return this;
-	},
-
-	normalize: function() {
-	  var len = this.norm();
-		if ( len > 0 ) {
-			this.$scale(1 / len);
-		} 
-		return this;
-	},
-
-	isZero: function() {
-		var almostZero = 0.0001,
-		    abs = Math.abs;
-		
-		return abs(this.x) < almostZero && abs(this.y) < almostZero && abs(this.z) < almostZero;
-	},
-
-	clone: function() {
-		return new Vector3(this.x, this.y, this.z);
-	}
-};
-
-var $V3 = function(a, b, c) { return new Vector3(a, b, c); };
-
-/*
- * Matrix4 class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
- */
-
-var Matrix4 = function() {
-	this._x = new Vector3();
-	this._y = new Vector3();
-	this._z = new Vector3();
-};
-
-$jit.Matrix4 = Matrix4;
-
-Matrix4.prototype = {
-
-	n11: 1, n12: 0, n13: 0, n14: 0,
-	n21: 0, n22: 1, n23: 0, n24: 0,
-	n31: 0, n32: 0, n33: 1, n34: 0,
-	n41: 0, n42: 0, n43: 0, n44: 1,
-
-	identity: function() {
-		this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
-		this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
-		this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
-		this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
-	},
-
-	lookAt: function(eye, center, up) {
-		var x = this._x, y = this._y, z = this._z;
-
-		z.sub(eye, center);
-		z.normalize();
-
-		x.cross(up, z);
-		x.normalize();
-
-		y.cross(z, x);
-		y.normalize();
-
-		this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye );
-		this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye );
-		this.n31 = z.x; this.n32 = z.y; this.n33 = z.z; this.n34 = - z.dot( eye );
-	},
-
-	transform: function(v) {
-		var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1.0;
-
-		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
-		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
-		v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34 * vw;
-
-		vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
-
-		if(v.w) {
-			v.w = vw;
-		} else {
-			v.x = v.x / vw;
-			v.y = v.y / vw;
-			v.z = v.z / vw;
-		}
-	},
-
-	multiply: function(a, b) {
-		this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31 + a.n14 * b.n41;
-		this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32 + a.n14 * b.n42;
-		this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33 + a.n14 * b.n43;
-		this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14 * b.n44;
-
-		this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31 + a.n24 * b.n41;
-		this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32 + a.n24 * b.n42;
-		this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33 + a.n24 * b.n43;
-		this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24 * b.n44;
-
-		this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31 + a.n34 * b.n41;
-		this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32 + a.n34 * b.n42;
-		this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33 + a.n34 * b.n43;
-		this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34 * b.n44;
-
-		this.n41 = a.n41 * b.n11 + a.n42 * b.n21 + a.n43 * b.n31 + a.n44 * b.n41;
-		this.n42 = a.n41 * b.n12 + a.n42 * b.n22 + a.n43 * b.n32 + a.n44 * b.n42;
-		this.n43 = a.n41 * b.n13 + a.n42 * b.n23 + a.n43 * b.n33 + a.n44 * b.n43;
-		this.n44 = a.n41 * b.n14 + a.n42 * b.n24 + a.n43 * b.n34 + a.n44 * b.n44;
-	},
-
-	$multiply: function(m) {
-		var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14,
-    		n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24,
-    		n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34,
-    		n41 = this.n41, n42 = this.n42, n43 = this.n43, n44 = this.n44;
-
-		this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31 + n14 * m.n41;
-		this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32 + n14 * m.n42;
-		this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33 + n14 * m.n43;
-		this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14 * m.n44;
-
-		this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31 + n24 * m.n41;
-		this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32 + n24 * m.n42;
-		this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33 + n24 * m.n43;
-		this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24 * m.n44;
-
-		this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31 + n34 * m.n41;
-		this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32 + n34 * m.n42;
-		this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33 + n34 * m.n43;
-		this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34 * m.n44;
-
-		this.n41 = n41 * m.n11 + n42 * m.n21 + n43 * m.n31 + n44 * m.n41;
-		this.n42 = n41 * m.n12 + n42 * m.n22 + n43 * m.n32 + n44 * m.n42;
-		this.n43 = n41 * m.n13 + n42 * m.n23 + n43 * m.n33 + n44 * m.n43;
-		this.n44 = n41 * m.n14 + n42 * m.n24 + n43 * m.n34 + n44 * m.n44;
-	},
-
-	$scale: function(s) {
-		this.n11 *= s; this.n12 *= s; this.n13 *= s; this.n14 *= s;
-		this.n21 *= s; this.n22 *= s; this.n23 *= s; this.n24 *= s;
-		this.n31 *= s; this.n32 *= s; this.n33 *= s; this.n34 *= s;
-		this.n41 *= s; this.n42 *= s; this.n43 *= s; this.n44 *= s;
-		return this;
-	},
-	
-	$add: function(m) {
-	  this.n11 += m.n11;
-	  this.n12 += m.n12;
-	  this.n13 += m.n13;
-	  this.n14 += m.n14;
-	  this.n21 += m.n21;
-	  this.n22 += m.n22;
-	  this.n23 += m.n23;
-	  this.n24 += m.n24;
-	  this.n31 += m.n31;
-	  this.n32 += m.n32;
-	  this.n33 += m.n33;
-	  this.n34 += m.n34;
-	  this.n41 += m.n41;
-	  this.n42 += m.n42;
-	  this.n43 += m.n43;
-	  this.n44 += m.n44;
-	  return this;
-	},
-
-	determinant: function() {
-		return (
-			this.n14 * this.n23 * this.n32 * this.n41-
-			this.n13 * this.n24 * this.n32 * this.n41-
-			this.n14 * this.n22 * this.n33 * this.n41+
-			this.n12 * this.n24 * this.n33 * this.n41+
-
-			this.n13 * this.n22 * this.n34 * this.n41-
-			this.n12 * this.n23 * this.n34 * this.n41-
-			this.n14 * this.n23 * this.n31 * this.n42+
-			this.n13 * this.n24 * this.n31 * this.n42+
-
-			this.n14 * this.n21 * this.n33 * this.n42-
-			this.n11 * this.n24 * this.n33 * this.n42-
-			this.n13 * this.n21 * this.n34 * this.n42+
-			this.n11 * this.n23 * this.n34 * this.n42+
-
-			this.n14 * this.n22 * this.n31 * this.n43-
-			this.n12 * this.n24 * this.n31 * this.n43-
-			this.n14 * this.n21 * this.n32 * this.n43+
-			this.n11 * this.n24 * this.n32 * this.n43+
-
-			this.n12 * this.n21 * this.n34 * this.n43-
-			this.n11 * this.n22 * this.n34 * this.n43-
-			this.n13 * this.n22 * this.n31 * this.n44+
-			this.n12 * this.n23 * this.n31 * this.n44+
-
-			this.n13 * this.n21 * this.n32 * this.n44-
-			this.n11 * this.n23 * this.n32 * this.n44-
-			this.n12 * this.n21 * this.n33 * this.n44+
-			this.n11 * this.n22 * this.n33 * this.n44 );
-	},
-
-  $transpose: function() {
-	  function swap(obj, p1, p2) {
-	    var aux = obj[p1];
-	    obj[p1] = obj[p2];
-	    obj[p2] = aux;
-	  }
-	  
-	  swap(this, 'n21', 'n12');
-	  swap(this, 'n31', 'n13');
-	  swap(this, 'n32', 'n23');
-	  swap(this, 'n41', 'n14');
-	  swap(this, 'n42', 'n24');
-	  swap(this, 'n43', 'n34');
-	  return this;
-  },
-  
-	clone: function() {
-		var m = new Matrix4();
-		m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14;
-		m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24;
-		m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34;
-		m.n41 = this.n41; m.n42 = this.n42; m.n43 = this.n43; m.n44 = this.n44;
-		return m;
-	},
-	
-	flatten: function() {
-	  return [this.n11, this.n21, this.n31, this.n41,
-	      this.n12, this.n22, this.n32, this.n42,
-	      this.n13, this.n23, this.n33, this.n43,
-	      this.n14, this.n24, this.n34, this.n44];
-	}
-};
-
-Matrix4.translationMatrix = function(x, y, z) {
-	var m = new Matrix4();
-
-	m.n14 = x;
-	m.n24 = y;
-	m.n34 = z;
-
-	return m;
-};
-
-Matrix4.scaleMatrix = function(x, y, z) {
-	var m = new Matrix4();
-
-	m.n11 = x;
-	m.n22 = y;
-	m.n33 = z;
-
-	return m;
-};
-
-Matrix4.rotationXMatrix = function(theta) {
-	var rot = new Matrix4();
-
-	rot.n22 = rot.n33 = Math.cos( theta );
-	rot.n32 = Math.sin( theta );
-	rot.n23 = - rot.n32;
-
-	return rot;
-};
-
-Matrix4.rotationYMatrix = function(theta) {
-	var rot = new Matrix4();
-
-	rot.n11 = rot.n33 = Math.cos( theta );
-	rot.n13 = Math.sin( theta );
-	rot.n31 = - rot.n13;
-
-	return rot;
-};
-
-Matrix4.rotationZMatrix = function(theta) {
-	var rot = new Matrix4();
-
-	rot.n11 = rot.n22 = Math.cos( theta );
-	rot.n21 = Math.sin( theta );
-	rot.n12 = - rot.n21;
-
-	return rot;
-};
-
-Matrix4.makeInvert = function(m1) {
-	var m2 = new Matrix4();
-
-	m2.n11 = m1.n23*m1.n34*m1.n42 - m1.n24*m1.n33*m1.n42 + m1.n24*m1.n32*m1.n43 - m1.n22*m1.n34*m1.n43 - m1.n23*m1.n32*m1.n44 + m1.n22*m1.n33*m1.n44;
-	m2.n12 = m1.n14*m1.n33*m1.n42 - m1.n13*m1.n34*m1.n42 - m1.n14*m1.n32*m1.n43 + m1.n12*m1.n34*m1.n43 + m1.n13*m1.n32*m1.n44 - m1.n12*m1.n33*m1.n44;
-	m2.n13 = m1.n13*m1.n24*m1.n42 - m1.n14*m1.n23*m1.n42 + m1.n14*m1.n22*m1.n43 - m1.n12*m1.n24*m1.n43 - m1.n13*m1.n22*m1.n44 + m1.n12*m1.n23*m1.n44;
-	m2.n14 = m1.n14*m1.n23*m1.n32 - m1.n13*m1.n24*m1.n32 - m1.n14*m1.n22*m1.n33 + m1.n12*m1.n24*m1.n33 + m1.n13*m1.n22*m1.n34 - m1.n12*m1.n23*m1.n34;
-	m2.n21 = m1.n24*m1.n33*m1.n41 - m1.n23*m1.n34*m1.n41 - m1.n24*m1.n31*m1.n43 + m1.n21*m1.n34*m1.n43 + m1.n23*m1.n31*m1.n44 - m1.n21*m1.n33*m1.n44;
-	m2.n22 = m1.n13*m1.n34*m1.n41 - m1.n14*m1.n33*m1.n41 + m1.n14*m1.n31*m1.n43 - m1.n11*m1.n34*m1.n43 - m1.n13*m1.n31*m1.n44 + m1.n11*m1.n33*m1.n44;
-	m2.n23 = m1.n14*m1.n23*m1.n41 - m1.n13*m1.n24*m1.n41 - m1.n14*m1.n21*m1.n43 + m1.n11*m1.n24*m1.n43 + m1.n13*m1.n21*m1.n44 - m1.n11*m1.n23*m1.n44;
-	m2.n24 = m1.n13*m1.n24*m1.n31 - m1.n14*m1.n23*m1.n31 + m1.n14*m1.n21*m1.n33 - m1.n11*m1.n24*m1.n33 - m1.n13*m1.n21*m1.n34 + m1.n11*m1.n23*m1.n34;
-	m2.n31 = m1.n22*m1.n34*m1.n41 - m1.n24*m1.n32*m1.n41 + m1.n24*m1.n31*m1.n42 - m1.n21*m1.n34*m1.n42 - m1.n22*m1.n31*m1.n44 + m1.n21*m1.n32*m1.n44;
-	m2.n32 = m1.n14*m1.n32*m1.n41 - m1.n12*m1.n34*m1.n41 - m1.n14*m1.n31*m1.n42 + m1.n11*m1.n34*m1.n42 + m1.n12*m1.n31*m1.n44 - m1.n11*m1.n32*m1.n44;
-	m2.n33 = m1.n13*m1.n24*m1.n41 - m1.n14*m1.n22*m1.n41 + m1.n14*m1.n21*m1.n42 - m1.n11*m1.n24*m1.n42 - m1.n12*m1.n21*m1.n44 + m1.n11*m1.n22*m1.n44;
-	m2.n34 = m1.n14*m1.n22*m1.n31 - m1.n12*m1.n24*m1.n31 - m1.n14*m1.n21*m1.n32 + m1.n11*m1.n24*m1.n32 + m1.n12*m1.n21*m1.n34 - m1.n11*m1.n22*m1.n34;
-	m2.n41 = m1.n23*m1.n32*m1.n41 - m1.n22*m1.n33*m1.n41 - m1.n23*m1.n31*m1.n42 + m1.n21*m1.n33*m1.n42 + m1.n22*m1.n31*m1.n43 - m1.n21*m1.n32*m1.n43;
-	m2.n42 = m1.n12*m1.n33*m1.n41 - m1.n13*m1.n32*m1.n41 + m1.n13*m1.n31*m1.n42 - m1.n11*m1.n33*m1.n42 - m1.n12*m1.n31*m1.n43 + m1.n11*m1.n32*m1.n43;
-	m2.n43 = m1.n13*m1.n22*m1.n41 - m1.n12*m1.n23*m1.n41 - m1.n13*m1.n21*m1.n42 + m1.n11*m1.n23*m1.n42 + m1.n12*m1.n21*m1.n43 - m1.n11*m1.n22*m1.n43;
-	m2.n44 = m1.n12*m1.n23*m1.n31 - m1.n13*m1.n22*m1.n31 + m1.n13*m1.n21*m1.n32 - m1.n11*m1.n23*m1.n32 - m1.n12*m1.n21*m1.n33 + m1.n11*m1.n22*m1.n33;
-	m2.$scale(1 / m1.determinant());
-
-	return m2;
-};
-
-Matrix4.makeFrustum = function( left, right, bottom, top, near, far ) {
-	var m, x, y, a, b, c, d;
-
-	m = new Matrix4();
-	x = 2 * near / ( right - left );
-	y = 2 * near / ( top - bottom );
-	a = ( right + left ) / ( right - left );
-	b = ( top + bottom ) / ( top - bottom );
-	c = - ( far + near ) / ( far - near );
-	d = - 2 * far * near / ( far - near );
-
-	m.n11 = x;  m.n12 = 0;  m.n13 = a;   m.n14 = 0;
-	m.n21 = 0;  m.n22 = y;  m.n23 = b;   m.n24 = 0;
-	m.n31 = 0;  m.n32 = 0;  m.n33 = c;   m.n34 = d;
-	m.n41 = 0;  m.n42 = 0;  m.n43 = - 1; m.n44 = 0;
-
-	return m;
-};
-
-Matrix4.makePerspective = function( fov, aspect, near, far ) {
-	var ymax, ymin, xmin, xmax;
-
-	ymax = near * Math.tan( fov * Math.PI / 360 );
-	ymin = - ymax;
-	xmin = ymin * aspect;
-	xmax = ymax * aspect;
-
-	return Matrix4.makeFrustum( xmin, xmax, ymin, ymax, near, far );
-};
-
-Matrix4.makeOrtho = function( left, right, top, bottom, near, far ) {
-	var m, x, y, z, w, h, p;
-
-	m = new Matrix4();
-	w = right - left;
-	h = bottom - top;
-	p = far - near;
-	x = ( right + left ) / w;
-	y = ( bottom + top ) / h;
-	z = ( far + near ) / p;
-
-	m.n11 = 2 / w; m.n12 = 0;     m.n13 = 0;      m.n14 = -x;
-	m.n21 = 0;     m.n22 = 2 / h; m.n23 = 0;      m.n24 = -y;
-	m.n31 = 0;     m.n32 = 0;     m.n33 = -2 / p; m.n34 = -z;
-	m.n41 = 0;     m.n42 = 0;     m.n43 = 0;      m.n44 = 1;
-
-	return m;
-};
-
-
-/*
- * Camera class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
- */
-
-var Camera = function (fov, aspect, near, far) {
-	this.projectionMatrix = Matrix4.makePerspective(fov, aspect, near, far);
-};
-
-Camera.prototype = {
-  position: new Vector3,
-  target: {
-    position: new Vector3
-  },
-  up: new Vector3(0, 1, 0),
-  matrix: new Matrix4,
-  
-  updateMatrix: function() {
-    this.matrix.lookAt(this.position, this.target.position, this.up);
-  }
-};
-
-
-Canvas.Base['3D'] = new Class({
-  Implements: Canvas.Base['2D'],
-  
-  program: null,
-  camera: null,
-  
-  initialize: function(viz) {
-    this.viz = viz;
-    this.opt = viz.config;
-    this.size = false;
-    this.createCanvas();
-    this.initWebGL();
-    this.initCamera();
-  },
-  
-  initWebGL: function() {
-    //initialize context
-    var gl = this.getCtx();
-    //get viewport size
-    var size = this.getSize();
-    //compile and get shaders
-    var fragmentShader = this.getShader(Canvas.Base['3D'].FragmentShader, gl.FRAGMENT_SHADER);
-    var vertexShader = this.getShader(Canvas.Base['3D'].VertexShader, gl.VERTEX_SHADER);
-    //create program and link shaders
-    var program = gl.createProgram();
-    gl.attachShader(program, vertexShader);
-    gl.attachShader(program, fragmentShader);
-    gl.linkProgram(program);
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-      throw "Could not link shaders";
-    }
-    gl.useProgram(program);
-    //bind name to variable location in shaders
-    $.extend(program, {
-      'viewMatrix': gl.getUniformLocation(program, 'viewMatrix'),
-      'projectionMatrix': gl.getUniformLocation(program, 'projectionMatrix'),
-      'normalMatrix': gl.getUniformLocation(program, 'normalMatrix'),
-      'color': gl.getUniformLocation(program, 'color'),
-      
-      'enableLighting': gl.getUniformLocation(program, 'enableLighting'),
-      'ambientColor': gl.getUniformLocation(program, 'ambientColor'),
-      'directionalColor': gl.getUniformLocation(program, 'directionalColor'),
-      'lightingDirection': gl.getUniformLocation(program, 'lightingDirection'),
-      
-      'position': gl.getAttribLocation(program, 'position'),
-      'normal': gl.getAttribLocation(program, 'normal'),
-    });
-    gl.enableVertexAttribArray(program.position);
-    gl.enableVertexAttribArray(program.normal);
-    this.program = program;
-    //set general rendering options
-    gl.clearColor(0, 0, 0, 0);
-    gl.clearDepth(1);
-
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.LEQUAL);
-
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    
-    gl.viewport(0, 0, size.width, size.height);
-  },
-  
-  initCamera: function() {
-    var size = this.getSize();
-    var camera = new Camera(75, size.width / size.height, 1, 1000);
-    camera.position.z = 500;
-    this.camera = camera;
-  },
-  
-  getShader: function(src, type) {
-    var gl = this.ctx;
-    var shader = gl.createShader(type);
-    gl.shaderSource(shader, src);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-      var info = gl.getShaderInfoLog(shader);
-      throw "Could not compile shader src: " + info;
-    }
-    return shader;
-  },
-
-  getCtx: function() {
-    if(!this.ctx) 
-      return this.ctx = this.canvas.getContext('experimental-webgl');
-    return this.ctx;
-  },
-  
-  resize: function(width, height) {
-    var size = this.getSize(),
-        canvas = this.canvas,
-        styles = canvas.style,
-        gl = this.getCtx();
-    this.size = false;
-    canvas.width = width;
-    canvas.height = height;
-    styles.width = width + "px";
-    styles.height = height + "px";
-    gl.viewport(0, 0, width, height);
-
-    this.translateOffsetX =
-      this.translateOffsetY = 0;
-    this.scaleOffsetX = 
-      this.scaleOffsetY = 1;
-    this.clear();
-    this.viz.resize(width, height, this);
-  },
-
-  translateToCenter: $.empty,
-  scale: $.empty,
-  
-  translate: function(x, y, z, disablePlot) {
-    var sx = this.scaleOffsetX,
-        sy = this.scaleOffsetY;
-    this.translateOffsetX += x*sx;
-    this.translateOffsetY += y*sy;
-    var pos = this.camera.position;
-    pos.x += x;
-    pos.y += y;
-    pos.z += z;
-    !disablePlot && this.plot();
-  },
-
-  clear: function(){
-    var gl = this.getCtx();
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    //TODO(nico) is this OK? I mean, to put this line here.
-    this.camera.updateMatrix();
-  },
-  
-  plot: function() {
-    this.clear();
-    this.viz.plot(this);
-  }
-});
-
-//Shaders code
-Canvas.Base['3D'].FragmentShader = [
-  "#ifdef GL_ES",
-  "precision highp float;",
-  "#endif",
-  
-  "varying vec4 vcolor;",
-  "varying vec3 lightWeighting;",
-  
-  "void main(){",
-  
-    "gl_FragColor = vec4(vcolor.rgb * lightWeighting, vcolor.a);",
-  
-  "}"
-].join("\n");
-
-Canvas.Base['3D'].VertexShader = [
-  "attribute vec3 position;",
-  "attribute vec3 normal;",
-  "uniform vec4 color;",
-  
-  "uniform mat4 viewMatrix;",
-  "uniform mat4 projectionMatrix;",
-  "uniform mat4 normalMatrix;",
-
-  "uniform bool enableLighting;",
-  "uniform vec3 ambientColor;",
-  "uniform vec3 directionalColor;",
-  "uniform vec3 lightingDirection;",
-  
-  "varying vec4 vcolor;",
-  "varying vec3 lightWeighting;",
-  
-  "void main(void) {",
-  
-    "if(!enableLighting) {",
-      "lightWeighting = vec3(1.0, 1.0, 1.0);",
-    "} else {",
-      "vec4 transformedNormal = normalMatrix * vec4(normal, 1.0);",
-      "float directionalLightWeighting = max(dot(transformedNormal.xyz, lightingDirection), 0.0);",
-      "lightWeighting = ambientColor + directionalColor * directionalLightWeighting;",
-    "}",
-    
-    "vcolor = color;",
-    "gl_Position = projectionMatrix * viewMatrix * vec4( position, 1.0 );",
-  
-  "}"
-].join("\n");
-
-/*
- * Some of the geometries where inspired by three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
- */
-
-var O3D = {};
-
-$jit.O3D = O3D;
-
-O3D.base = new Class({
-  //array of { x, y, z } of float
-  vertices: [],
-  //array of { a, b, c, d? } of int
-  faces: [],
-  //updated on plotNode/plotEdge
-  position: new Vector3,
-  rotation: new Vector3,
-  scale: new Vector3(1, 1, 1),
-  //intrinsic coordinates
-  matrix: new Matrix4,
-  
-  update: function(elem) {
-    if(elem.nodeFrom && elem.nodeTo) {
-      this.updateEdge(elem);
-    } else {
-      this.updateNode(elem);
-    }
-  },
-  
-  updateNode: $.empty,
-  
-  updateEdge: function(elem) {
-    this.updateNode(elem);
-  },
-
-  updateMatrix: function() {
-    var pos = this.position,
-        rot = this.rotation,
-        scale = this.scale,
-        matrix = this.matrix;
-    
-    matrix.identity();
-  
-    matrix.$multiply( Matrix4.translationMatrix( pos.x, pos.y, pos.z ) );
-    matrix.$multiply( Matrix4.rotationXMatrix( rot.x ) );
-    matrix.$multiply( Matrix4.rotationYMatrix( rot.y ) );
-    matrix.$multiply( Matrix4.rotationZMatrix( rot.z ) );
-    matrix.$multiply( Matrix4.scaleMatrix( scale.x, scale.y, scale.z ) );
-  },
-  //compute faces normals
-  computeNormals: function () {
-    for (var f=0, vs=this.vertices, fs=this.faces, len=fs.length; f < len; f++) {
-      var va = vs[fs[f].a],
-          vb = vs[fs[f].b],
-          vc = vs[fs[f].c],
-          cb = new Vector3,
-          ab = new Vector3;
-      
-      cb.sub(vc, vb);
-      ab.sub(va, vb);
-      cb.$cross(ab);
-
-      if (!cb.isZero()) cb.normalize();
-      
-      fs[f].normal = cb;
-    }
-  }
-});
-
-//IsoCube
-function IsoCube() {
-  var vs = this.vertices,
-      f4 = this.faces,
-      vsp = function(x, y, z) { vs.push({ x: x, y: y, z: z }); },
-      f4p = function(a, b, c, d) { f4.push({ a: a, b: b, c: c, d: d }); };
-  
-  vsp( 1,  1, -1);
-  vsp( 1, -1, -1);
-  vsp(-1, -1, -1);
-  vsp(-1,  1, -1);
-  vsp( 1,  1,  1);
-  vsp( 1, -1,  1);
-  vsp(-1, -1,  1);
-  vsp(-1,  1,  1);
-  
-  f4p(0, 1, 2, 3);
-  f4p(4, 7, 6, 5);
-  f4p(0, 4, 5, 1);
-  f4p(1, 5, 6, 2);
-  f4p(2, 6, 7, 3);
-  f4p(4, 0, 3, 7);
-}
-
-//Cube
-O3D.cube = new Class({
-  Implements: O3D.base,
-  
-  initialize: function() {
-    IsoCube.call(this);
-    this.computeNormals();
-  },
-  
-  updateNode: function(obj) {
-    var dim = obj.getData('dim'),
-        pos = obj.pos;
-    
-    this.position.setc(pos.x, pos.y, pos.z);
-    this.scale.setc(dim, dim, dim);
-    this.updateMatrix();
-  }
-});
-
-O3D.sphere = new Class({
-  Implements: O3D.base,
-  
-  radius: 1,
-  segments_width: 10,
-  segments_height: 10,
-  
-  initialize: function() {
-    var radius = this.radius,
-        segments_width = this.segments_width,
-        segments_height = this.segments_height,
-        gridX = segments_width || 8,
-        gridY = segments_height || 6,
-        cos = Math.cos,
-        sin = Math.sin,
-        max = Math.max,
-        pi = Math.PI;
-  
-    var iHor = max(3, gridX),
-        iVer = max(2, gridY),
-        aVtc = [];
-  
-    for(var j=0; j < (iVer + 1) ; j++) {
-      var fRad1 = j / iVer,
-          fZ = radius * cos(fRad1 * pi),
-          fRds = radius * sin(fRad1 * pi),
-          aRow = [],
-          oVtx = 0;
-
-      for(var i=0; i<iHor; i++) {
-        var fRad2 = 2 * i / iHor,
-            fX = fRds * Math.sin(fRad2 * pi),
-            fY = fRds * Math.cos(fRad2 * pi);
-        if (!(( j == 0 || j == iVer) && i > 0)) {
-          oVtx = this.vertices.push({ x: fY, y: fZ, z: fX}) - 1;
-        }
-        aRow.push(oVtx);
-      }
-      aVtc.push(aRow);
-    }
-  
-    var iVerNum = aVtc.length;
-    for (var j=0; j<iVerNum; j++) {
-      var iHorNum = aVtc[j].length;
-      if (j > 0) {
-        for (var i = 0; i<iHorNum; i++ ) {
-          var bEnd = i == ( iHorNum - 1 );
-          var aP1 = aVtc[j][ bEnd ? 0 : i + 1 ];
-          var aP2 = aVtc[j][ ( bEnd ? iHorNum - 1 : i ) ];
-          var aP3 = aVtc[j -1][ ( bEnd ? iHorNum - 1 : i ) ];
-          var aP4 = aVtc[j -1][ bEnd ? 0 : i + 1 ];
-  
-          if(j < ( aVtc.length - 1)) {
-            this.faces.push({ a: aP1, b: aP2, c: aP3 });
-          }
-          if(j > 1) {
-            this.faces.push({ a: aP1, b: aP3, c: aP4 });
-          }
-        }
-      }
-    }
-    this.computeNormals();
-  },
-  
-  updateNode: function(obj) {
-    var dim = obj.getData('dim'),
-        pos = obj.pos;
-    
-    this.position.setc(pos.x, pos.y, pos.z);
-    this.scale.setc(dim, dim, dim);
-    this.updateMatrix();
-  }
-
-});
-
-
-O3D.tube = new Class({
-  Implements: O3D.base,
-  
-  numSegs: 10,
-  dim: 1,
-  initialize: function() {
-    var vs = this.vertices,
-        f4 = this.faces,
-        vsp = function(x, y, z) { vs.push({ x: x, y: y, z: z }); },
-        f4p = function(a, b, c, d) { f4.push({ a: a, b: b, c: c, d: d }); };
-
-    var scope = this,
-        sin = Math.sin,
-        cos = Math.cos,
-        pi = Math.PI,
-        pi2 = pi * 2,
-        numSegs = this.numSegs,
-        topRad = this.dim,
-        botRad = this.dim;
-  
-    // Top circle vertices
-    for (var i = 0; i < numSegs; i++) {
-      vsp(sin(pi2 * i / numSegs) * topRad, cos(pi2 * i / numSegs) * topRad, -0.5);
-    }
-    // Bottom circle vertices
-    for (var i = 0; i < numSegs; i++) {
-      vsp(sin(pi2 * i / numSegs) * botRad, cos(pi2 * i / numSegs) * botRad, 0.5);
-    }
-    // Body 
-    for (var i = 0; i < numSegs; i++) {
-      f4p(i, (i + 1) % numSegs, numSegs + (i + 1) % numSegs, i + numSegs);
-    }
-    this.computeNormals();
-  },
-  
-  updateEdge: function(obj) {
-    var lineWidth = obj.getData('lineWidth'),
-        nodeFrom = obj.nodeFrom,
-        nodeTo = obj.nodeTo,
-        nodeFromPos = nodeFrom.pos,
-        nodeToPos = nodeTo.pos,
-        dist = nodeFromPos.distanceTo(nodeToPos),
-        middle = new Vector3,
-        currentDir = new Vector3(0, 0, 1),
-        dvec = new Vector3;
-    
-    middle.add(nodeFromPos, nodeToPos).$scale(0.5);
-    dvec.sub(nodeToPos, nodeFromPos).normalize();
-    
-    var c = dvec.dot(currentDir),
-        xc = dvec.dot(new Vector3(1, 0, 0)),
-        yc = dvec.dot(new Vector3(0, 1, 0)),
-        t = 1 - c,
-        rotAngle = Math.acos(c),
-        s = Math.sin(rotAngle),
-        rotAxis = currentDir.$cross(dvec).normalize(),
-        x = rotAxis.x,
-        y = rotAxis.y,
-        z = rotAxis.z;
-    
-    var rot = new Matrix4();
-    rot.n11 = t * x * x + c;
-    rot.n12 = t * x * y - s * z;
-    rot.n13 = t * x * z + s * y;
-    rot.n21 = t * x * y + s * z;
-    rot.n22 = t * y * y + c;
-    rot.n23 = t * y * z - s * x;
-    rot.n31 = t * x * z - s * y;
-    rot.n32 = t * y * z + s * x;
-    rot.n33 = t * z * z + c;
-    this.rotationMatrix = rot;
-    this.scale.setc(lineWidth, lineWidth, dist);
-    this.position.setc(middle.x, middle.y, middle.z);
-    this.updateMatrix();
-  },
-  
-  updateMatrix: function() {
-    var pos = this.position,
-        scale = this.scale,
-        matrix = this.matrix;
-    
-    matrix.identity();
-  
-    matrix.$multiply( Matrix4.translationMatrix( pos.x, pos.y, pos.z ) );
-    matrix.$multiply( this.rotationMatrix );
-    matrix.$multiply( Matrix4.scaleMatrix( scale.x, scale.y, scale.z ) );
-  }
-
-}); 
-
-
-/*
- * File: Layouts.ForceDirected3D.js
- *
-*/
-
-/*
- * Class: Layouts.ForceDirected3D
- * 
- * Implements a Force Directed Layout.
- * 
- * Implemented By:
- * 
- * <ForceDirected3D>
- * 
- */
-Layouts.ForceDirected3D = new Class({
-
-  getOptions: function() {
-    var s = this.canvas.getSize();
-    var w = s.width, h = s.height;
-    //count nodes
-    var count = 0;
-    this.graph.eachNode(function(n) { 
-      count++;
-    });
-    var k2 = w * h / count, k = Math.sqrt(k2);
-    var l = this.config.levelDistance;
-    
-    return {
-      width: w,
-      height: h,
-      tstart: w * 0.1,
-      nodef: function(x) { return k2 / (x || 1); },
-      edgef: function(x) { return /* x * x / k; */ k * (x - l); }
-    };
-  },
-  
-  compute: function(property, incremental) {
-    var prop = $.splat(property || ['current', 'start', 'end']);
-    var opt = this.getOptions();
-    NodeDim.compute(this.graph, prop, this.config);
-    this.graph.computeLevels(this.root, 0, "ignore");
-    this.graph.eachNode(function(n) {
-      $.each(prop, function(p) {
-        var pos = n.getPos(p);
-        if(pos.isZero()) {
-          pos.x = opt.width/5 * (Math.random() - 0.5);
-          pos.y = opt.height/5 * (Math.random() - 0.5);
-          pos.z = 200 * (Math.random() - 0.5);
-        }
-        //initialize disp vector
-        n.disp = {};
-        $.each(prop, function(p) {
-          n.disp[p] = $V3(0, 0, 0);
-        });
-      });
-    });
-    this.computePositions(prop, opt, incremental);
-  },
-  
-  computePositions: function(property, opt, incremental) {
-    var times = this.config.iterations, i = 0, that = this;
-    if(incremental) {
-      (function iter() {
-        for(var total=incremental.iter, j=0; j<total; j++) {
-          opt.t = opt.tstart * (1 - i++/(times -1));
-          that.computePositionStep(property, opt);
-          if(i >= times) {
-            incremental.onComplete();
-            return;
-          }
-        }
-        incremental.onStep(Math.round(i / (times -1) * 100));
-        setTimeout(iter, 1);
-      })();
-    } else {
-      for(; i < times; i++) {
-        opt.t = opt.tstart * (1 - i/(times -1));
-        this.computePositionStep(property, opt);
-      }
-    }
-  },
-  
-  computePositionStep: function(property, opt) {
-    var graph = this.graph;
-    var min = Math.min, max = Math.max;
-    var dpos = $V3(0, 0, 0);
-    //calculate repulsive forces
-    graph.eachNode(function(v) {
-      //initialize disp
-      $.each(property, function(p) {
-        v.disp[p].x = 0; 
-        v.disp[p].y = 0;
-        v.disp[p].z = 0;
-      });
-      graph.eachNode(function(u) {
-        if(u.id != v.id) {
-          $.each(property, function(p) {
-            var vp = v.getPos(p), up = u.getPos(p);
-            dpos.x = vp.x - up.x;
-            dpos.y = vp.y - up.y;
-            dpos.z = vp.z - up.z;
-            var norm = dpos.norm() || 1;
-            v.disp[p].$add(dpos
-                .$scale(opt.nodef(norm) / norm));
-          });
-        }
-      });
-    });
-    //calculate attractive forces
-    var T = !!graph.getNode(this.root).visited;
-    graph.eachNode(function(node) {
-      node.eachAdjacency(function(adj) {
-        var nodeTo = adj.nodeTo;
-        if(!!nodeTo.visited === T) {
-          $.each(property, function(p) {
-            var vp = node.getPos(p), up = nodeTo.getPos(p);
-            dpos.x = vp.x - up.x;
-            dpos.y = vp.y - up.y;
-            dpos.z = vp.z - up.z;
-            var norm = dpos.norm() || 1;
-            node.disp[p].$add(dpos.$scale(-opt.edgef(norm) / norm));
-            nodeTo.disp[p].$add(dpos.$scale(-1));
-          });
-        }
-      });
-      node.visited = !T;
-    });
-    //arrange positions to fit the canvas
-    var t = opt.t, w2 = opt.width / 2, h2 = opt.height / 2;
-    graph.eachNode(function(u) {
-      $.each(property, function(p) {
-        var disp = u.disp[p];
-        var norm = disp.norm() || 1;
-        var p = u.getPos(p);
-        p.$add($V3(disp.x * min(Math.abs(disp.x), t) / norm, 
-                   disp.y * min(Math.abs(disp.y), t) / norm,
-                   disp.z * min(Math.abs(disp.z), t) / norm));
-        p.x = min(w2, max(-w2, p.x));
-        p.y = min(h2, max(-h2, p.y));
-        p.z = min(h2, max(-h2, p.z));
-      });
-    });
-  }
-});
-
-$jit.ForceDirected3D = new Class( {
-
-  Implements: [ Loader, Extras, Layouts.ForceDirected3D ],
-
-  initialize: function(controller) {
-    var $ForceDirected3D = $jit.ForceDirected3D;
-
-    var config = {
-      iterations: 50,
-      levelDistance: 50
-    };
-
-    this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge",
-        "Fx", "Tips", "NodeStyles", "Events", "Navigation", "Controller", "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': Vector3,
-      'Node': {
-        'selected': false,
-        'exist': true,
-        'drawn': true
-      }
-    };
-    this.graph = new Graph(this.graphOptions, this.config.Node,
-        this.config.Edge);
-    this.labels = new $ForceDirected3D.Label[canvasConfig.Label.type](this);
-    this.fx = new $ForceDirected3D.Plot(this, $ForceDirected3D);
-    this.op = new $ForceDirected3D.Op(this);
-    this.json = null;
-    this.busy = false;
-    // initialize extras
-    this.initializeExtras();
-  },
-
-  /* 
-    refresh 
-    
-    Computes positions and plots the tree.
-  */
-  refresh: function() {
-    this.compute();
-    this.plot();
-  },
-
-  reposition: function() {
-    this.compute('end');
-  },
-
-/*
-  computeIncremental
-  
-  Performs the Force Directed algorithm incrementally.
-  
-  Description:
-  
-  ForceDirected3D algorithms can perform many computations and lead to JavaScript taking too much time to complete. 
-  This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and 
-  avoiding browser messages such as "This script is taking too long to complete".
-  
-  Parameters:
-  
-  opt - (object) The object properties are described below
-  
-  iter - (number) Default's *20*. Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property 
-  of your <ForceDirected3D> class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces.
-  
-  property - (string) Default's *end*. Whether to update starting, current or ending node positions. Possible values are 'end', 'start', 'current'. 
-  You can also set an array of these properties. If you'd like to keep the current node positions but to perform these 
-  computations for final animation positions then you can just choose 'end'.
-  
-  onStep - (function) A callback function called when each "small part" of the algorithm completed. This function gets as first formal 
-  parameter a percentage value.
-  
-  onComplete - A callback function called when the algorithm completed.
-  
-  Example:
-  
-  In this example I calculate the end positions and then animate the graph to those positions
-  
-  (start code js)
-  var fd = new $jit.ForceDirected3D(...);
-  fd.computeIncremental({
-    iter: 20,
-    property: 'end',
-    onStep: function(perc) {
-      Log.write("loading " + perc + "%");
-    },
-    onComplete: function() {
-      Log.write("done");
-      fd.animate();
-    }
-  });
-  (end code)
-  
-  In this example I calculate all positions and (re)plot the graph
-  
-  (start code js)
-  var fd = new ForceDirected3D(...);
-  fd.computeIncremental({
-    iter: 20,
-    property: ['end', 'start', 'current'],
-    onStep: function(perc) {
-      Log.write("loading " + perc + "%");
-    },
-    onComplete: function() {
-      Log.write("done");
-      fd.plot();
-    }
-  });
-  (end code)
-  
-  */
-  computeIncremental: function(opt) {
-    opt = $.merge( {
-      iter: 20,
-      property: 'end',
-      onStep: $.empty,
-      onComplete: $.empty
-    }, opt || {});
-
-    this.config.onBeforeCompute(this.graph.getNode(this.root));
-    this.compute(opt.property, opt);
-  },
-
-  /*
-    plot
-   
-    Plots the ForceDirected3D graph. This is a shortcut to *fx.plot*.
-   */
-  plot: function() {
-    this.fx.plot();
-  },
-
-  /*
-     animate
-    
-     Animates the graph from the current positions to the 'end' node positions.
-  */
-  animate: function(opt) {
-    this.fx.animate($.merge( {
-      modes: [ 'linear' ]
-    }, opt || {}));
-  }
-});
-
-$jit.ForceDirected3D.$extend = true;
-
-(function(ForceDirected3D) {
-
-  /*
-     ForceDirected3D.Op
-     
-     Custom extension of <Graph.Op>.
-
-     Extends:
-
-     All <Graph.Op> methods
-     
-     See also:
-     
-     <Graph.Op>
-
-  */
-  ForceDirected3D.Op = new Class( {
-
-    Implements: Graph.Op
-
-  });
-
-  /*
-    ForceDirected3D.Plot
-    
-    Custom extension of <Graph.Plot>.
-  
-    Extends:
-  
-    All <Graph.Plot> methods
-    
-    See also:
-    
-    <Graph.Plot>
-  
-  */
-  ForceDirected3D.Plot = new Class( {
-
-    Implements: Graph.Plot3D
-
-  });
-
-  /*
-    ForceDirected3D.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>.
-  
-  */
-  ForceDirected3D.Label = {};
-
-  /*
-     ForceDirected3D.Label.Native
-     
-     Custom extension of <Graph.Label.Native>.
-
-     Extends:
-
-     All <Graph.Label.Native> methods
-
-     See also:
-
-     <Graph.Label.Native>
-
-  */
-  ForceDirected3D.Label.Native = new Class( {
-    Implements: Graph.Label.Native
-  });
-
-  /*
-    ForceDirected3D.Label.SVG
-    
-    Custom extension of <Graph.Label.SVG>.
-  
-    Extends:
-  
-    All <Graph.Label.SVG> methods
-  
-    See also:
-  
-    <Graph.Label.SVG>
-  
-  */
-  ForceDirected3D.Label.SVG = new Class( {
-    Implements: Graph.Label.SVG,
-
-    initialize: function(viz) {
-      this.viz = viz;
-    },
-
-    /* 
-       placeLabel
-
-       Overrides abstract method placeLabel in <Graph.Label>.
-
-       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), 
-          canvas = this.viz.canvas,
-          ox = canvas.translateOffsetX,
-          oy = canvas.translateOffsetY,
-          sx = canvas.scaleOffsetX,
-          sy = canvas.scaleOffsetY,
-          radius = canvas.getSize();
-      var labelPos = {
-        x: Math.round(pos.x * sx + ox + radius.width / 2),
-        y: Math.round(pos.y * sy + oy + radius.height / 2)
-      };
-      tag.setAttribute('x', labelPos.x);
-      tag.setAttribute('y', labelPos.y);
-
-      controller.onPlaceLabel(tag, node);
-    }
-  });
-
-  /*
-     ForceDirected3D.Label.HTML
-     
-     Custom extension of <Graph.Label.HTML>.
-
-     Extends:
-
-     All <Graph.Label.HTML> methods.
-
-     See also:
-
-     <Graph.Label.HTML>
-
-  */
-  ForceDirected3D.Label.HTML = new Class( {
-    Implements: Graph.Label.HTML,
-
-    initialize: function(viz) {
-      this.viz = viz;
-    },
-    /* 
-       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), 
-          canvas = this.viz.canvas,
-          ox = canvas.translateOffsetX,
-          oy = canvas.translateOffsetY,
-          sx = canvas.scaleOffsetX,
-          sy = canvas.scaleOffsetY,
-          radius = canvas.getSize();
-      var labelPos = {
-        x: Math.round(pos.x * sx + ox + radius.width / 2),
-        y: Math.round(pos.y * sy + oy + radius.height / 2)
-      };
-      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);
-    }
-  });
-
-  /*
-    ForceDirected3D.Plot.NodeTypes
-
-    This class contains a list of <Graph.Node> built-in types. 
-    Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'.
-
-    You can add your custom node types, customizing your visualization to the extreme.
-
-    Example:
-
-    (start code js)
-      ForceDirected3D.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)
-
-  */
-  ForceDirected3D.Plot.NodeTypes = new Class({
-    'none': {
-      'render': $.empty,
-      'contains': $.lambda(false)
-    },
-    'circle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.circle.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.circle.contains(npos, pos, dim);
-      }
-    },
-    'ellipse': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        this.nodeHelper.ellipse.render('fill', pos, width, height, canvas);
-        },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        return this.nodeHelper.ellipse.contains(npos, pos, width, height);
-      }
-    },
-    'square': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.square.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.square.contains(npos, pos, dim);
-      }
-    },
-    'rectangle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        this.nodeHelper.rectangle.render('fill', pos, width, height, canvas);
-      },
-      'contains': function(node, pos){
-        var npos = node.pos.getc(true), 
-            width = node.getData('width'), 
-            height = node.getData('height');
-        return this.nodeHelper.rectangle.contains(npos, pos, width, height);
-      }
-    },
-    'triangle': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        this.nodeHelper.triangle.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos) {
-        var npos = node.pos.getc(true), 
-            dim = node.getData('dim');
-        return this.nodeHelper.triangle.contains(npos, pos, dim);
-      }
-    },
-    'star': {
-      'render': function(node, canvas){
-        var pos = node.pos.getc(true),
-            dim = node.getData('dim');
-        this.nodeHelper.star.render('fill', pos, dim, canvas);
-      },
-      'contains': function(node, pos) {
-        var npos = node.pos.getc(true),
-            dim = node.getData('dim');
-        return this.nodeHelper.star.contains(npos, pos, dim);
-      }
-    }
-  });
-
-  /*
-    ForceDirected3D.Plot.EdgeTypes
-  
-    This class contains a list of <Graph.Adjacence> built-in types. 
-    Edge types implemented are 'none', 'line' and 'arrow'.
-  
-    You can add your custom edge types, customizing your visualization to the extreme.
-  
-    Example:
-  
-    (start code js)
-      ForceDirected3D.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)
-  
-  */
-  ForceDirected3D.Plot.EdgeTypes = new Class({
-    'none': $.empty,
-    'line': {
-      'render': function(adj, canvas) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        this.edgeHelper.line.render(from, to, canvas);
-      },
-      'contains': function(adj, pos) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
-      }
-    },
-    'arrow': {
-      'render': function(adj, canvas) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true),
-            dim = adj.getData('dim'),
-            direction = adj.data.$direction,
-            inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
-        this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
-      },
-      'contains': function(adj, pos) {
-        var from = adj.nodeFrom.pos.getc(true),
-            to = adj.nodeTo.pos.getc(true);
-        return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
-      }
-    }
-  });
-
-})($jit.ForceDirected3D);
-
-
-
-
- })();
+/*
+Copyright (c) 2011 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.
+ */
+window.$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;
+  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.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,
+  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>.
+
+    *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,
+  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')],
+              
+              // START METAMAPS CODE
+              contains = n.getData('alpha') !== 0 && geom && geom.contains && geom.contains.call(fx, n, this.getPos());
+              // END METAMAPS CODE
+              // ORIGINAL CODE 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')],
+
+                // START METAMAPS CODE
+                contains = e.getData('alpha') !== 0 && geom && geom.contains && geom.contains.call(fx, e, this.getPos());
+                // END METAMAPS CODE
+                // ORIGINAL CODE contains = geom && geom.contains && geom.contains.call(fx, n, 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) {
+    
+    // START METAMAPS CODE
+    var evt = $.event.get(e, win);
+    this.pressed = event.getNode() || (this.config.enableForEdges && event.getEdge());
+    // END METAMAPS CODE    
+    // ORIGINAL CODE
+    /*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 window dimensions
+    var win = {
+      'height': document.body.clientHeight,
+      'width': document.body.clientWidth
+    };
+    //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 + y + obj.height > win.height)?  
+        (pos.y - obj.height - y) : pos.y + y) + 'px';
+    style.left = ((pos.x + obj.width + x > win.width)? 
+        (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;
+    
+    // START METAMAPS CODE
+    e.preventDefault();
+	  if (e.target.id != 'infovis-canvas') return;
+    if (Metamaps.Create.newTopic.beingCreated) return;
+	  // END METAMAPS CODE
+  
+    //$.event.stop($.event.get(e, win));
+    // END METAMAPS CODE
+    // ORIGINAL CODE $.event.stop($.event.get(e, win));
+
+    var val = this.config.zooming / 1000,
+        ans = 1 + scroll * val;
+        
+    // START METAMAPS CODE
+	  if (ans > 1) {
+      if (5 >= this.canvas.scaleOffsetX) {
+		    this.canvas.scale(ans, ans);
+	    }
+	  }
+	  else if (ans < 1) {
+      if (this.canvas.scaleOffsetX >= 0.2) {
+		    this.canvas.scale(ans, ans);
+	    }
+	  }
+    // END METAMAPS CODE
+    // ORIGINAL CODE this.canvas.scale(ans, ans);
+
+    // START METAMAPS CODE
+      jQuery(document).trigger(Metamaps.JIT.events.zoom, [e]);
+    // END METAMAPS CODE
+  },
+  
+  onMouseDown: function(e, win, eventInfo) {
+    ///console.log('mouse down!!!!');
+    if(!this.config.panning) return;
+    
+    //START METAMAPS CODE
+    Metamaps.Mouse.changeInX = 0;
+    Metamaps.Mouse.changeInY = 0;
+    if((this.config.panning == 'avoid nodes' && eventInfo.getNode()) || eventInfo.getEdge()) return;
+    // END METAMAPS CODE
+    // ORIGINAl CODE if(this.config.panning == 'avoid nodes' && (this.dom? this.isLabel(e, win) : eventInfo.getNode())) return;
+    
+    this.pressed = true;
+    
+    //START METAMAPS CODE
+    var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey); 
+    // TODO make sure this works across browsers  
+    if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey)  || rightClick)) {
+      Metamaps.Mouse.boxStartCoordinates = eventInfo.getPos();
+      //console.log('mouse down');
+    }
+
+    Metamaps.Mouse.didPan = false;
+    
+
+    
+    // END METAMAPS CODE
+    
+    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;
+    
+    // START METAMAPS CODE
+    var rightClick = e.button == 2 || (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey);
+    if (!Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey)  || rightClick)) {
+      Metamaps.Visualize.mGraph.busy = true;
+      Metamaps.boxStartCoordinates = eventInfo.getPos();
+      //console.log('mouse move');
+      return;
+    }
+    if (Metamaps.Mouse.boxStartCoordinates && ((e.button == 0 && e.shiftKey) || (e.button == 0 && e.ctrlKey)  || rightClick)) {
+      Metamaps.Visualize.mGraph.busy = true;
+      Metamaps.JIT.drawSelectBox(eventInfo,e);
+      //console.log('mouse move');
+      return;
+    }
+    if (rightClick){
+      return;
+    }
+    if (e.target.id != 'infovis-canvas') { 
+      this.pressed = false;
+      return;
+    }
+    Metamaps.Mouse.didPan = true;
+    // END METAMAPS CODE
+    
+    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;
+    
+    // START METAMAPS CODE
+    Metamaps.Mouse.changeInX = x;
+    Metamaps.Mouse.changeInY = y;
+    // END METAMAPS CODE
+    
+    this.pos = currentPos;
+    this.canvas.translate(x * 1/sx, y * 1/sy);
+
+    // START METAMAPS CODE
+      jQuery(document).trigger(Metamaps.JIT.events.pan);
+    // END METAMAPS CODE
+  },
+  
+  onMouseUp: function(e, win, eventInfo, isRightClick) {
+    if(!this.config.panning) return;
+    this.pressed = false;
+    
+    // START METAMAPS CODE
+    if (Metamaps.Mouse.didPan) Metamaps.JIT.SmoothPanning();
+    
+    
+    // END METAMAPS CODE
+    
+  }
+});
+
+
+/*
+ * 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", 
+          // ORIGINAL CODE wrapper = $(id),
+          // START METAMAPS CODE
+          //wrapper = Metamaps.Famous.viz.surf,
+          // END METAMAPS CODE
+          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);
+
+      // START METAMAPS CODE
+      var m = Metamaps.Famous.viz.surf;
+      m.setContent(this.element);
+      m.deploy(m._currTarget);
+
+      // END METAMAPS CODE
+      // ORIGINAL CODE 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: 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!
+    }
+  });
+  
+  // START METAMAPS CODE
+  Canvas.Background.Metamaps = new Class({
+    initialize: function(viz, options) {
+      this.viz = viz;
+      this.config = options;
+    },
+    resize: function(width, height, base) {
+      this.plot(base);
+    },
+    plot: function(base) {
+      var canvas = base.canvas,
+          ctx = base.getCtx(),
+          scale = base.scaleOffsetX;
+      //var pattern = new Image();
+      //pattern.src = "<%= asset_path('cubes.png') %>";
+      //var ptrn = ctx.createPattern(pattern, 'repeat');
+      //ctx.fillStyle = ptrn;
+      ctx.fillStyle = Metamaps.Settings.colors.background;
+      var xPoint = (-(canvas.width/scale)/2) - (base.translateOffsetX/scale),
+        yPoint = (-(canvas.height/scale)/2) - (base.translateOffsetY/scale);
+      //ctx.fillRect(xPoint,yPoint,canvas.width/scale,canvas.height/scale);
+    }
+  });
+  // END METAMAPS CODE
+})();
+
+
+/*
+ * 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);
+
+
+
+/*
+ * 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: 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)) {
+                    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();
+            node._flag = true;
+            action(node, node._depth);
+            this.eachAdjacency(node, function(adj) {
+                var n = adj.nodeTo;
+                if(n._flag == false && filter(n)) {
+                    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*.
+       
+       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;
+        levelEnd = levelEnd === false? Number.MAX_VALUE -d : levelEnd;
+        (function loopLevel(node, levelBegin, levelEnd) {
+            var d = node._depth;
+            if(d >= levelBegin && d <= levelEnd && filter(node)) action(node, d);
+            if(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++) 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');
+                        }
+                    });
+                }); 
+                //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');
+                }
+                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:;
+        }
+    },
+
+    
+  /*
+    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),
+            maxPosX = max(posFrom.x, posTo.x),
+            minPosY = min(posFrom.y, posTo.y),
+            maxPosY = max(posFrom.y, posTo.y);
+          
+        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){
+        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 intermediatePoint = new Complex(to.x - vect.x, to.y - vect.y),
+            normal = new Complex(-vect.y / 2, vect.x / 2),
+            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.lineTo(v2.x, v2.y);
+        ctx.lineTo(to.x, to.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'
+          //'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');  
+        }
+    },
+    
+  
+    /*
+       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) {
+     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;
+    
+    //START METAMAPS CODE
+    if (Metamaps.Mouse.synapseStartCoordinates.length > 0) {
+        ctx.save();
+        var start;
+        var end = Metamaps.Mouse.synapseEndCoordinates;
+        
+        var l = Metamaps.Mouse.synapseStartCoordinates.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            start = Metamaps.Mouse.synapseStartCoordinates[i];
+            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.3, true);
+            Metamaps.JIT.renderMidArrow(start, end, 13, false, canvas, 0.7, true);
+        }
+        ctx.restore();
+    }
+    //END METAMAPS CODE  
+
+     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');
+      // ORIGINAL CODE ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color');
+      ctx.textBaseline = node.getLabelData('textBaseline');
+      
+      //START METAMAPS CODE
+      
+      var arrayOfLabelLines = Metamaps.Util.splitLine(node.name,30).split('\n');
+      //render background
+            ctx.fillStyle = ctx.strokeStyle = Metamaps.Settings.colors.labels.background;
+            ctx.lineWidth = 2;
+            var height = 25 * arrayOfLabelLines.length; //font size + margin
+            
+            var index, lineWidths = [];
+            for (index = 0; index < arrayOfLabelLines.length; ++index) {
+              lineWidths.push( ctx.measureText( arrayOfLabelLines[index] ).width )
+            }
+            var width = Math.max.apply(null, lineWidths) + 8;
+            var x = pos.x - width/2;
+            var y = pos.y + node.getData("height") + 5;
+            var radius = 5;
+            
+              ctx.beginPath();
+              ctx.moveTo(x + radius, y);
+              ctx.lineTo(x + width - radius, y);
+              ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+              ctx.lineTo(x + width, y + height - radius);
+              ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+              ctx.lineTo(x + radius, y + height);
+              ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+              ctx.lineTo(x, y + radius);
+              ctx.quadraticCurveTo(x, y, x + radius, y);
+              ctx.closePath();
+              ctx.fill();
+              //ctx.stroke();
+       
+       ctx.fillStyle = ctx.strokeStyle = node.getLabelData('color');
+
+      this.renderLabel(arrayOfLabelLines, canvas, node, controller);
+      // END METAMAPS CODE
+      // ORIGINAL CODE  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(customLabel, 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);
+      // START METAMAPS CODE
+      var index;
+      for (index = 0; index < customLabel.length; ++index) {
+        ctx.fillText(customLabel[index], pos.x, pos.y + node.getData("height") + 23 + (25*index));
+      }
+      // END METAMAPS CODE
+    },
+
+    hideLabel: $.empty,
+    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) {
+        var 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.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);
+    }
+});
+
+
+
+/*
+ * 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.Radial
+ * 
+ * Implements a Radial Layout.
+ * 
+ * Implemented By:
+ * 
+ * <RGraph>, <Hypertree>
+ * 
+ */
+Layouts.Radial = new Class({
+
+  /*
+   * Method: compute
+   * 
+   * Computes nodes' positions.
+   * 
+   * Parameters:
+   * 
+   * property - _optional_ A <Graph.Node> position property to store the new
+   * positions. Possible values are 'pos', 'end' or 'start'.
+   * 
+   */
+  compute : function(property) {
+    var prop = $.splat(property || [ 'current', 'start', 'end' ]);
+    NodeDim.compute(this.graph, prop, this.config);
+    this.graph.computeLevels(this.root, 0, "ignore");
+    var lengthFunc = this.createLevelDistanceFunc(); 
+    this.computeAngularWidths(prop);
+    this.computePositions(prop, lengthFunc);
+  },
+
+  /*
+   * computePositions
+   * 
+   * Performs the main algorithm for computing node positions.
+   */
+  computePositions : function(property, getLength) {
+    var propArray = property;
+    var graph = this.graph;
+    var root = graph.getNode(this.root);
+    var parent = this.parent;
+    var config = this.config;
+
+    for ( var i=0, l=propArray.length; i < l; i++) {
+      var pi = propArray[i];
+      root.setPos($P(0, 0), pi);
+      root.setData('span', Math.PI * 2, pi);
+    }
+
+    root.angleSpan = {
+      begin : 0,
+      end : 2 * Math.PI
+    };
+
+    graph.eachBFS(this.root, function(elem) {
+      var angleSpan = elem.angleSpan.end - elem.angleSpan.begin;
+      var angleInit = elem.angleSpan.begin;
+      var len = getLength(elem);
+      //Calculate the sum of all angular widths
+      var totalAngularWidths = 0, subnodes = [], maxDim = {};
+      elem.eachSubnode(function(sib) {
+        totalAngularWidths += sib._treeAngularWidth;
+        //get max dim
+        for ( var i=0, l=propArray.length; i < l; i++) {
+          var pi = propArray[i], dim = sib.getData('dim', pi);
+          maxDim[pi] = (pi in maxDim)? (dim > maxDim[pi]? dim : maxDim[pi]) : dim;
+        }
+        subnodes.push(sib);
+      }, "ignore");
+      //Maintain children order
+      //Second constraint for <http://bailando.sims.berkeley.edu/papers/infovis01.htm>
+      if (parent && parent.id == elem.id && subnodes.length > 0
+          && subnodes[0].dist) {
+        subnodes.sort(function(a, b) {
+          return (a.dist >= b.dist) - (a.dist <= b.dist);
+        });
+      }
+      //Calculate nodes positions.
+      for (var k = 0, ls=subnodes.length; k < ls; k++) {
+        var child = subnodes[k];
+        if (!child._flag) {
+          var angleProportion = child._treeAngularWidth / totalAngularWidths * angleSpan;
+          var theta = angleInit + angleProportion / 2;
+
+          for ( var i=0, l=propArray.length; i < l; i++) {
+            var pi = propArray[i];
+            child.setPos($P(theta, len), pi);
+            child.setData('span', angleProportion, pi);
+            child.setData('dim-quotient', child.getData('dim', pi) / maxDim[pi], pi);
+          }
+
+          child.angleSpan = {
+            begin : angleInit,
+            end : angleInit + angleProportion
+          };
+          angleInit += angleProportion;
+        }
+      }
+    }, "ignore");
+  },
+
+  /*
+   * Method: setAngularWidthForNodes
+   * 
+   * Sets nodes angular widths.
+   */
+  setAngularWidthForNodes : function(prop) {
+    this.graph.eachBFS(this.root, function(elem, i) {
+      var diamValue = elem.getData('angularWidth', prop[0]) || 5;
+      elem._angularWidth = diamValue / i;
+    }, "ignore");
+  },
+
+  /*
+   * Method: setSubtreesAngularWidth
+   * 
+   * Sets subtrees angular widths.
+   */
+  setSubtreesAngularWidth : function() {
+    var that = this;
+    this.graph.eachNode(function(elem) {
+      that.setSubtreeAngularWidth(elem);
+    }, "ignore");
+  },
+
+  /*
+   * Method: setSubtreeAngularWidth
+   * 
+   * Sets the angular width for a subtree.
+   */
+  setSubtreeAngularWidth : function(elem) {
+    var that = this, nodeAW = elem._angularWidth, sumAW = 0;
+    elem.eachSubnode(function(child) {
+      that.setSubtreeAngularWidth(child);
+      sumAW += child._treeAngularWidth;
+    }, "ignore");
+    elem._treeAngularWidth = Math.max(nodeAW, sumAW);
+  },
+
+  /*
+   * Method: computeAngularWidths
+   * 
+   * Computes nodes and subtrees angular widths.
+   */
+  computeAngularWidths : function(prop) {
+    this.setAngularWidthForNodes(prop);
+    this.setSubtreesAngularWidth();
+  }
+
+});
+
+
+/*
+ * File: RGraph.js
+ *
+ */
+
+/*
+   Class: RGraph
+   
+   A radial graph visualization with advanced animations.
+   
+   Inspired by:
+ 
+   Animated Exploration of Dynamic Graphs with Radial Layout (Ka-Ping Yee, Danyel Fisher, Rachna Dhamija, Marti Hearst) <http://bailando.sims.berkeley.edu/papers/infovis01.htm>
+   
+   Note:
+   
+   This visualization was built and engineered from scratch, taking only the paper as inspiration, and only shares some features with the visualization described in the paper.
+   
+  Implements:
+  
+  All <Loader> methods
+  
+   Constructor Options:
+   
+   Inherits options from
+   
+   - <Options.Canvas>
+   - <Options.Controller>
+   - <Options.Node>
+   - <Options.Edge>
+   - <Options.Label>
+   - <Options.Events>
+   - <Options.Tips>
+   - <Options.NodeStyles>
+   - <Options.Navigation>
+   
+   Additionally, there are other parameters and some default values changed
+   
+   interpolation - (string) Default's *linear*. Describes the way nodes are interpolated. Possible values are 'linear' and 'polar'.
+   levelDistance - (number) Default's *100*. The distance between levels of the tree. 
+     
+   Instance Properties:
+
+   canvas - Access a <Canvas> instance.
+   graph - Access a <Graph> instance.
+   op - Access a <RGraph.Op> instance.
+   fx - Access a <RGraph.Plot> instance.
+   labels - Access a <RGraph.Label> interface implementation.   
+*/
+
+$jit.RGraph = new Class( {
+
+  Implements: [
+      Loader, Extras, Layouts.Radial
+  ],
+
+  initialize: function(controller){
+    var $RGraph = $jit.RGraph;
+
+    var config = {
+      interpolation: 'linear',
+      levelDistance: 100
+    };
+
+    this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge",
+        "Fx", "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': Polar,
+      'Node': {
+        'selected': false,
+        'exist': true,
+        'drawn': true
+      }
+    };
+    this.graph = new Graph(this.graphOptions, this.config.Node,
+        this.config.Edge);
+    this.labels = new $RGraph.Label[canvasConfig.Label.type](this);
+    this.fx = new $RGraph.Plot(this, $RGraph);
+    this.op = new $RGraph.Op(this);
+    this.json = null;
+    this.root = null;
+    this.busy = false;
+    this.parent = false;
+    // initialize extras
+    this.initializeExtras();
+  },
+
+  /* 
+  
+    createLevelDistanceFunc 
+  
+    Returns the levelDistance function used for calculating a node distance 
+    to its origin. This function returns a function that is computed 
+    per level and not per node, such that all nodes with the same depth will have the 
+    same distance to the origin. The resulting function gets the 
+    parent node as parameter and returns a float.
+
+   */
+  createLevelDistanceFunc: function(){
+    var ld = this.config.levelDistance;
+    return function(elem){
+      return (elem._depth + 1) * ld;
+    };
+  },
+
+  /* 
+     Method: refresh 
+     
+     Computes positions and plots the tree.
+
+   */
+  refresh: function(){
+    
+    // START METAMAPS CODE
+    // this.compute();
+    // END METAMAPS CODE
+    // ORIGINAL CODE: this.compute();
+    this.plot();
+  },
+
+  reposition: function(){
+    this.compute('end');
+  },
+
+  /*
+   Method: plot
+  
+   Plots the RGraph. This is a shortcut to *fx.plot*.
+  */
+  plot: function(){
+    this.fx.plot();
+  },
+  /*
+   getNodeAndParentAngle
+  
+   Returns the _parent_ of the given node, also calculating its angle span.
+  */
+  getNodeAndParentAngle: function(id){
+    var theta = false;
+    var n = this.graph.getNode(id);
+    var ps = n.getParents();
+    var p = (ps.length > 0)? ps[0] : false;
+    if (p) {
+      var posParent = p.pos.getc(), posChild = n.pos.getc();
+      var newPos = posParent.add(posChild.scale(-1));
+      theta = Math.atan2(newPos.y, newPos.x);
+      if (theta < 0)
+        theta += 2 * Math.PI;
+    }
+    return {
+      parent: p,
+      theta: theta
+    };
+  },
+  /*
+   tagChildren
+  
+   Enumerates the children in order to maintain child ordering (second constraint of the paper).
+  */
+  tagChildren: function(par, id){
+    if (par.angleSpan) {
+      var adjs = [];
+      par.eachAdjacency(function(elem){
+        adjs.push(elem.nodeTo);
+      }, "ignore");
+      var len = adjs.length;
+      for ( var i = 0; i < len && id != adjs[i].id; i++)
+        ;
+      for ( var j = (i + 1) % len, k = 0; id != adjs[j].id; j = (j + 1) % len) {
+        adjs[j].dist = k++;
+      }
+    }
+  },
+  /* 
+  Method: onClick 
+  
+  Animates the <RGraph> to center the node specified by *id*.
+
+   Parameters:
+
+   id - A <Graph.Node> id.
+   opt - (optional|object) An object containing some extra properties described below
+   hideLabels - (boolean) Default's *true*. Hide labels when performing the animation.
+
+   Example:
+
+   (start code js)
+     rgraph.onClick('someid');
+     //or also...
+     rgraph.onClick('someid', {
+      hideLabels: false
+     });
+    (end code)
+    
+  */
+  onClick: function(id, opt){
+    if (this.root != id && !this.busy) {
+      this.busy = true;
+      this.root = id;
+      var that = this;
+      this.controller.onBeforeCompute(this.graph.getNode(id));
+      var obj = this.getNodeAndParentAngle(id);
+
+      // second constraint
+      this.tagChildren(obj.parent, id);
+      this.parent = obj.parent;
+      this.compute('end');
+
+      // first constraint
+      var thetaDiff = obj.theta - obj.parent.endPos.theta;
+      this.graph.eachNode(function(elem){
+        elem.endPos.set(elem.endPos.getp().add($P(thetaDiff, 0)));
+      });
+
+      var mode = this.config.interpolation;
+      opt = $.merge( {
+        onComplete: $.empty
+      }, opt || {});
+
+      this.fx.animate($.merge( {
+        hideLabels: true,
+        modes: [
+          mode
+        ]
+      }, opt, {
+        onComplete: function(){
+          that.busy = false;
+          opt.onComplete();
+        }
+      }));
+    }
+  }
+});
+
+$jit.RGraph.$extend = true;
+
+(function(RGraph){
+
+  /*
+     Class: RGraph.Op
+     
+     Custom extension of <Graph.Op>.
+
+     Extends:
+
+     All <Graph.Op> methods
+     
+     See also:
+     
+     <Graph.Op>
+
+  */
+  RGraph.Op = new Class( {
+
+    Implements: Graph.Op
+
+  });
+
+  /*
+     Class: RGraph.Plot
+    
+    Custom extension of <Graph.Plot>.
+  
+    Extends:
+  
+    All <Graph.Plot> methods
+    
+    See also:
+    
+    <Graph.Plot>
+  
+  */
+  RGraph.Plot = new Class( {
+
+    Implements: Graph.Plot
+
+  });
+
+  /*
+    Object: RGraph.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>.
+  
+   */
+  RGraph.Label = {};
+
+  /*
+     RGraph.Label.Native
+
+     Custom extension of <Graph.Label.Native>.
+
+     Extends:
+
+     All <Graph.Label.Native> methods
+
+     See also:
+
+     <Graph.Label.Native>
+
+  */
+  RGraph.Label.Native = new Class( {
+    Implements: Graph.Label.Native
+  });
+
+  /*
+     RGraph.Label.SVG
+    
+    Custom extension of <Graph.Label.SVG>.
+  
+    Extends:
+  
+    All <Graph.Label.SVG> methods
+  
+    See also:
+  
+    <Graph.Label.SVG>
+  
+  */
+  RGraph.Label.SVG = new Class( {
+    Implements: Graph.Label.SVG,
+
+    initialize: function(viz){
+      this.viz = viz;
+    },
+
+    /* 
+       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), 
+          canvas = this.viz.canvas,
+          ox = canvas.translateOffsetX,
+          oy = canvas.translateOffsetY,
+          sx = canvas.scaleOffsetX,
+          sy = canvas.scaleOffsetY,
+          radius = canvas.getSize();
+      var labelPos = {
+        x: Math.round(pos.x * sx + ox + radius.width / 2),
+        y: Math.round(pos.y * sy + oy + radius.height / 2)
+      };
+      tag.setAttribute('x', labelPos.x);
+      tag.setAttribute('y', labelPos.y);
+
+      controller.onPlaceLabel(tag, node);
+    }
+  });
+
+  /*
+     RGraph.Label.HTML
+
+     Custom extension of <Graph.Label.HTML>.
+
+     Extends:
+
+     All <Graph.Label.HTML> methods.
+
+     See also:
+
+     <Graph.Label.HTML>
+
+  */
+  RGraph.Label.HTML = new Class( {
+    Implements: Graph.Label.HTML,
+
+    initialize: function(viz){
+      this.viz = viz;
+    },
+    /* 
+       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), 
+          canvas = this.viz.canvas,
+          ox = canvas.translateOffsetX,
+          oy = canvas.translateOffsetY,
+          sx = canvas.scaleOffsetX,
+          sy = canvas.scaleOffsetY,
+          radius = canvas.getSize();
+      var labelPos = {
+        x: Math.round(pos.x * sx + ox + radius.width / 2),
+        y: Math.round(pos.y * sy + oy + radius.height / 2)
+      };
+
+      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);
+    }
+  });
+
+  /*
+    Class: RGraph.Plot.NodeTypes
+
+    This class contains a list of <Graph.Node> built-in types. 
+    Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'.
+
+    You can add your custom node types, customizing your visualization to the extreme.
+
+    Example:
+
+    (start code js)
+      RGraph.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)
+
+  */
+  RGraph.Plot.NodeTypes = new Class({
+    'none': {
+      'render': $.empty,
+      'contains': $.lambda(false)
+    },
+    'circle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.circle.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.circle.contains(npos, pos, dim);
+      }
+    },
+    'ellipse': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        this.nodeHelper.ellipse.render('fill', pos, width, height, canvas);
+        },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        return this.nodeHelper.ellipse.contains(npos, pos, width, height);
+      }
+    },
+    'square': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.square.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.square.contains(npos, pos, dim);
+      }
+    },
+    'rectangle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        this.nodeHelper.rectangle.render('fill', pos, width, height, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        return this.nodeHelper.rectangle.contains(npos, pos, width, height);
+      }
+    },
+    'triangle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.triangle.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos) {
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.triangle.contains(npos, pos, dim);
+      }
+    },
+    'star': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true),
+            dim = node.getData('dim');
+        this.nodeHelper.star.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos) {
+        var npos = node.pos.getc(true),
+            dim = node.getData('dim');
+        return this.nodeHelper.star.contains(npos, pos, dim);
+      }
+    }
+  });
+
+  /*
+    Class: RGraph.Plot.EdgeTypes
+
+    This class contains a list of <Graph.Adjacence> built-in types. 
+    Edge types implemented are 'none', 'line' and 'arrow'.
+  
+    You can add your custom edge types, customizing your visualization to the extreme.
+  
+    Example:
+  
+    (start code js)
+      RGraph.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)
+  
+  */
+  RGraph.Plot.EdgeTypes = new Class({
+    'none': $.empty,
+    'line': {
+      'render': function(adj, canvas) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        this.edgeHelper.line.render(from, to, canvas);
+      },
+      'contains': function(adj, pos) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
+      }
+    },
+    'arrow': {
+      'render': function(adj, canvas) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true),
+            dim = adj.getData('dim'),
+            direction = adj.data.$direction,
+            inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
+        this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
+      },
+      'contains': function(adj, pos) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
+      }
+    }
+  });
+
+})($jit.RGraph);
+
+
+/*
+ * File: Layouts.ForceDirected.js
+ *
+*/
+
+/*
+ * Class: Layouts.ForceDirected
+ * 
+ * Implements a Force Directed Layout.
+ * 
+ * Implemented By:
+ * 
+ * <ForceDirected>
+ * 
+ * Credits:
+ * 
+ * Marcus Cobden <http://marcuscobden.co.uk>
+ * 
+ */
+Layouts.ForceDirected = new Class({
+
+  getOptions: function(random) {
+    var s = this.canvas.getSize();
+    var w = s.width, h = s.height;
+    //count nodes
+    var count = 0;
+    this.graph.eachNode(function(n) { 
+      count++;
+    });
+    var k2 = w * h / count, k = Math.sqrt(k2);
+    var l = this.config.levelDistance;
+    
+    return {
+      width: w,
+      height: h,
+      tstart: w * 0.1,
+      nodef: function(x) { return k2 / (x || 1); },
+      edgef: function(x) { return /* x * x / k; */ k * (x - l); }
+    };
+  },
+  
+  compute: function(property, incremental) {
+    var prop = $.splat(property || ['current', 'start', 'end']);
+    var opt = this.getOptions();
+    NodeDim.compute(this.graph, prop, this.config);
+    this.graph.computeLevels(this.root, 0, "ignore");
+    this.graph.eachNode(function(n) {
+      $.each(prop, function(p) {
+        var pos = n.getPos(p);
+        if(pos.equals(Complex.KER)) {
+          pos.x = opt.width/5 * (Math.random() - 0.5);
+          pos.y = opt.height/5 * (Math.random() - 0.5);
+        }
+        //initialize disp vector
+        n.disp = {};
+        $.each(prop, function(p) {
+          n.disp[p] = $C(0, 0);
+        });
+      });
+    });
+    this.computePositions(prop, opt, incremental);
+  },
+  
+  computePositions: function(property, opt, incremental) {
+    var times = this.config.iterations, i = 0, that = this;
+    if(incremental) {
+      (function iter() {
+        for(var total=incremental.iter, j=0; j<total; j++) {
+          opt.t = opt.tstart;
+          if(times) opt.t *= (1 - i++/(times -1));
+          that.computePositionStep(property, opt);
+          if(times && i >= times) {
+            incremental.onComplete();
+            return;
+          }
+        }
+        incremental.onStep(Math.round(i / (times -1) * 100));
+        setTimeout(iter, 1);
+      })();
+    } else {
+      for(; i < times; i++) {
+        opt.t = opt.tstart * (1 - i/(times -1));
+        this.computePositionStep(property, opt);
+      }
+    }
+  },
+  
+  computePositionStep: function(property, opt) {
+    var graph = this.graph;
+    var min = Math.min, max = Math.max;
+    var dpos = $C(0, 0);
+    //calculate repulsive forces
+    graph.eachNode(function(v) {
+      //initialize disp
+      $.each(property, function(p) {
+        v.disp[p].x = 0; v.disp[p].y = 0;
+      });
+      graph.eachNode(function(u) {
+        if(u.id != v.id) {
+          $.each(property, function(p) {
+            var vp = v.getPos(p), up = u.getPos(p);
+            dpos.x = vp.x - up.x;
+            dpos.y = vp.y - up.y;
+            var norm = dpos.norm() || 1;
+            v.disp[p].$add(dpos
+                .$scale(opt.nodef(norm) / norm));
+          });
+        }
+      });
+    });
+    //calculate attractive forces
+    var T = !!graph.getNode(this.root).visited;
+    graph.eachNode(function(node) {
+      node.eachAdjacency(function(adj) {
+        var nodeTo = adj.nodeTo;
+        if(!!nodeTo.visited === T) {
+          $.each(property, function(p) {
+            var vp = node.getPos(p), up = nodeTo.getPos(p);
+            dpos.x = vp.x - up.x;
+            dpos.y = vp.y - up.y;
+            var norm = dpos.norm() || 1;
+            node.disp[p].$add(dpos.$scale(-opt.edgef(norm) / norm));
+            nodeTo.disp[p].$add(dpos.$scale(-1));
+          });
+        }
+      });
+      node.visited = !T;
+    });
+    //arrange positions to fit the canvas
+    var t = opt.t, w2 = opt.width / 2, h2 = opt.height / 2;
+    graph.eachNode(function(u) {
+      $.each(property, function(p) {
+        var disp = u.disp[p];
+        var norm = disp.norm() || 1;
+        var p = u.getPos(p);
+        p.$add($C(disp.x * min(Math.abs(disp.x), t) / norm, 
+            disp.y * min(Math.abs(disp.y), t) / norm));
+        p.x = min(w2, max(-w2, p.x));
+        p.y = min(h2, max(-h2, p.y));
+      });
+    });
+  }
+});
+
+/*
+ * File: ForceDirected.js
+ */
+
+/*
+   Class: ForceDirected
+      
+   A visualization that lays graphs using a Force-Directed layout algorithm.
+   
+   Inspired by:
+  
+   Force-Directed Drawing Algorithms (Stephen G. Kobourov) <http://www.cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf>
+   
+  Implements:
+  
+  All <Loader> methods
+  
+   Constructor Options:
+   
+   Inherits options from
+   
+   - <Options.Canvas>
+   - <Options.Controller>
+   - <Options.Node>
+   - <Options.Edge>
+   - <Options.Label>
+   - <Options.Events>
+   - <Options.Tips>
+   - <Options.NodeStyles>
+   - <Options.Navigation>
+   
+   Additionally, there are two parameters
+   
+   levelDistance - (number) Default's *50*. The natural length desired for the edges.
+   iterations - (number) Default's *50*. The number of iterations for the spring layout simulation. Depending on the browser's speed you could set this to a more 'interesting' number, like *200*. 
+     
+   Instance Properties:
+
+   canvas - Access a <Canvas> instance.
+   graph - Access a <Graph> instance.
+   op - Access a <ForceDirected.Op> instance.
+   fx - Access a <ForceDirected.Plot> instance.
+   labels - Access a <ForceDirected.Label> interface implementation.
+
+*/
+
+$jit.ForceDirected = new Class( {
+
+  Implements: [ Loader, Extras, Layouts.ForceDirected ],
+
+  initialize: function(controller) {
+    var $ForceDirected = $jit.ForceDirected;
+
+    var config = {
+      iterations: 50,
+      levelDistance: 50
+    };
+
+    this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge",
+        "Fx", "Tips", "NodeStyles", "Events", "Navigation", "Controller", "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,
+      'Node': {
+        'selected': false,
+        'exist': true,
+        'drawn': true
+      }
+    };
+    this.graph = new Graph(this.graphOptions, this.config.Node,
+        this.config.Edge);
+    this.labels = new $ForceDirected.Label[canvasConfig.Label.type](this);
+    this.fx = new $ForceDirected.Plot(this, $ForceDirected);
+    this.op = new $ForceDirected.Op(this);
+    this.json = null;
+    this.busy = false;
+    // initialize extras
+    this.initializeExtras();
+  },
+
+  /* 
+    Method: refresh 
+    
+    Computes positions and plots the tree.
+  */
+  refresh: function() {
+    // START METAMAPS CODE
+    // this.compute();
+    // END METAMAPS CODE
+    // ORIGINAL CODE: this.compute();
+    this.plot();
+  },
+
+  reposition: function() {
+    this.compute('end');
+  },
+
+/*
+  Method: computeIncremental
+  
+  Performs the Force Directed algorithm incrementally.
+  
+  Description:
+  
+  ForceDirected algorithms can perform many computations and lead to JavaScript taking too much time to complete. 
+  This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and 
+  avoiding browser messages such as "This script is taking too long to complete".
+  
+  Parameters:
+  
+  opt - (object) The object properties are described below
+  
+  iter - (number) Default's *20*. Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property 
+  of your <ForceDirected> class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces.
+  
+  property - (string) Default's *end*. Whether to update starting, current or ending node positions. Possible values are 'end', 'start', 'current'. 
+  You can also set an array of these properties. If you'd like to keep the current node positions but to perform these 
+  computations for final animation positions then you can just choose 'end'.
+  
+  onStep - (function) A callback function called when each "small part" of the algorithm completed. This function gets as first formal 
+  parameter a percentage value.
+  
+  onComplete - A callback function called when the algorithm completed.
+  
+  Example:
+  
+  In this example I calculate the end positions and then animate the graph to those positions
+  
+  (start code js)
+  var fd = new $jit.ForceDirected(...);
+  fd.computeIncremental({
+    iter: 20,
+    property: 'end',
+    onStep: function(perc) {
+      Log.write("loading " + perc + "%");
+    },
+    onComplete: function() {
+      Log.write("done");
+      fd.animate();
+    }
+  });
+  (end code)
+  
+  In this example I calculate all positions and (re)plot the graph
+  
+  (start code js)
+  var fd = new ForceDirected(...);
+  fd.computeIncremental({
+    iter: 20,
+    property: ['end', 'start', 'current'],
+    onStep: function(perc) {
+      Log.write("loading " + perc + "%");
+    },
+    onComplete: function() {
+      Log.write("done");
+      fd.plot();
+    }
+  });
+  (end code)
+  
+  */
+  computeIncremental: function(opt) {
+    opt = $.merge( {
+      iter: 20,
+      property: 'end',
+      onStep: $.empty,
+      onComplete: $.empty
+    }, opt || {});
+
+    this.config.onBeforeCompute(this.graph.getNode(this.root));
+    this.compute(opt.property, opt);
+  },
+
+  /*
+    Method: plot
+   
+    Plots the ForceDirected graph. This is a shortcut to *fx.plot*.
+   */
+  plot: function() {
+    this.fx.plot();
+  },
+
+  /*
+     Method: animate
+    
+     Animates the graph from the current positions to the 'end' node positions.
+  */
+  animate: function(opt) {
+    this.fx.animate($.merge( {
+      modes: [ 'linear' ]
+    }, opt || {}));
+  }
+});
+
+$jit.ForceDirected.$extend = true;
+
+(function(ForceDirected) {
+
+  /*
+     Class: ForceDirected.Op
+     
+     Custom extension of <Graph.Op>.
+
+     Extends:
+
+     All <Graph.Op> methods
+     
+     See also:
+     
+     <Graph.Op>
+
+  */
+  ForceDirected.Op = new Class( {
+
+    Implements: Graph.Op
+
+  });
+
+  /*
+    Class: ForceDirected.Plot
+    
+    Custom extension of <Graph.Plot>.
+  
+    Extends:
+  
+    All <Graph.Plot> methods
+    
+    See also:
+    
+    <Graph.Plot>
+  
+  */
+  ForceDirected.Plot = new Class( {
+
+    Implements: Graph.Plot
+
+  });
+
+  /*
+    Class: ForceDirected.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>.
+  
+  */
+  ForceDirected.Label = {};
+
+  /*
+     ForceDirected.Label.Native
+     
+     Custom extension of <Graph.Label.Native>.
+
+     Extends:
+
+     All <Graph.Label.Native> methods
+
+     See also:
+
+     <Graph.Label.Native>
+
+  */
+  ForceDirected.Label.Native = new Class( {
+    Implements: Graph.Label.Native
+  });
+
+  /*
+    ForceDirected.Label.SVG
+    
+    Custom extension of <Graph.Label.SVG>.
+  
+    Extends:
+  
+    All <Graph.Label.SVG> methods
+  
+    See also:
+  
+    <Graph.Label.SVG>
+  
+  */
+  ForceDirected.Label.SVG = new Class( {
+    Implements: Graph.Label.SVG,
+
+    initialize: function(viz) {
+      this.viz = viz;
+    },
+
+    /* 
+       placeLabel
+
+       Overrides abstract method placeLabel in <Graph.Label>.
+
+       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), 
+          canvas = this.viz.canvas,
+          ox = canvas.translateOffsetX,
+          oy = canvas.translateOffsetY,
+          sx = canvas.scaleOffsetX,
+          sy = canvas.scaleOffsetY,
+          radius = canvas.getSize();
+      var labelPos = {
+        x: Math.round(pos.x * sx + ox + radius.width / 2),
+        y: Math.round(pos.y * sy + oy + radius.height / 2)
+      };
+      tag.setAttribute('x', labelPos.x);
+      tag.setAttribute('y', labelPos.y);
+
+      controller.onPlaceLabel(tag, node);
+    }
+  });
+
+  /*
+     ForceDirected.Label.HTML
+     
+     Custom extension of <Graph.Label.HTML>.
+
+     Extends:
+
+     All <Graph.Label.HTML> methods.
+
+     See also:
+
+     <Graph.Label.HTML>
+
+  */
+  ForceDirected.Label.HTML = new Class( {
+    Implements: Graph.Label.HTML,
+
+    initialize: function(viz) {
+      this.viz = viz;
+    },
+    /* 
+       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), 
+          canvas = this.viz.canvas,
+          ox = canvas.translateOffsetX,
+          oy = canvas.translateOffsetY,
+          sx = canvas.scaleOffsetX,
+          sy = canvas.scaleOffsetY,
+          radius = canvas.getSize();
+      var labelPos = {
+        x: Math.round(pos.x * sx + ox + radius.width / 2),
+        y: Math.round(pos.y * sy + oy + radius.height / 2)
+      };
+      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);
+    }
+  });
+
+  /*
+    Class: ForceDirected.Plot.NodeTypes
+
+    This class contains a list of <Graph.Node> built-in types. 
+    Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'.
+
+    You can add your custom node types, customizing your visualization to the extreme.
+
+    Example:
+
+    (start code js)
+      ForceDirected.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)
+
+  */
+  ForceDirected.Plot.NodeTypes = new Class({
+    'none': {
+      'render': $.empty,
+      'contains': $.lambda(false)
+    },
+    'circle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.circle.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.circle.contains(npos, pos, dim);
+      }
+    },
+    'ellipse': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        this.nodeHelper.ellipse.render('fill', pos, width, height, canvas);
+        },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        return this.nodeHelper.ellipse.contains(npos, pos, width, height);
+      }
+    },
+    'square': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.square.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.square.contains(npos, pos, dim);
+      }
+    },
+    'rectangle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        this.nodeHelper.rectangle.render('fill', pos, width, height, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        return this.nodeHelper.rectangle.contains(npos, pos, width, height);
+      }
+    },
+    'triangle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.triangle.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos) {
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.triangle.contains(npos, pos, dim);
+      }
+    },
+    'star': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true),
+            dim = node.getData('dim');
+        this.nodeHelper.star.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos) {
+        var npos = node.pos.getc(true),
+            dim = node.getData('dim');
+        return this.nodeHelper.star.contains(npos, pos, dim);
+      }
+    }
+  });
+
+  /*
+    Class: ForceDirected.Plot.EdgeTypes
+  
+    This class contains a list of <Graph.Adjacence> built-in types. 
+    Edge types implemented are 'none', 'line' and 'arrow'.
+  
+    You can add your custom edge types, customizing your visualization to the extreme.
+  
+    Example:
+  
+    (start code js)
+      ForceDirected.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)
+  
+  */
+  ForceDirected.Plot.EdgeTypes = new Class({
+    'none': $.empty,
+    'line': {
+      'render': function(adj, canvas) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        this.edgeHelper.line.render(from, to, canvas);
+      },
+      'contains': function(adj, pos) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
+      }
+    },
+    'arrow': {
+      'render': function(adj, canvas) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true),
+            dim = adj.getData('dim'),
+            direction = adj.data.$direction,
+            inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
+        this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
+      },
+      'contains': function(adj, pos) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
+      }
+    }
+  });
+
+})($jit.ForceDirected);
+
+
+/*
+ * Vector3 class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
+ */
+
+var Vector3 = function(x, y, z) {
+	this.x = x || 0;
+	this.y = y || 0;
+	this.z = z || 0;
+};
+
+$jit.Vector3 = Vector3;
+
+Vector3.prototype = {
+  set: function(v) {
+    this.x = v.x;
+    this.y = v.y;
+    this.z = v.z;
+  },
+
+  setc: function(x, y, z) {
+		this.x = x;
+		this.y = y;
+		this.z = z;
+	},
+	
+	getc: function() {
+	  return this;
+	},
+	
+	//TODO(nico): getp
+
+	add: function(v1, v2) {
+		this.x = v1.x + v2.x;
+		this.y = v1.y + v2.y;
+		this.z = v1.z + v2.z;
+		return this;
+	},
+
+	$add: function(v) {
+		this.x += v.x;
+		this.y += v.y;
+		this.z += v.z;
+		return this;
+	},
+
+	addScalar: function(s) {
+		this.x += s;
+		this.y += s;
+		this.z += s;
+		return this;
+	},
+
+	sub: function(v1, v2) {
+		this.x = v1.x - v2.x;
+		this.y = v1.y - v2.y;
+		this.z = v1.z - v2.z;
+		return this;
+	},
+
+	$sub: function(v) {
+		this.x -= v.x;
+		this.y -= v.y;
+		this.z -= v.z;
+		return this;
+	},
+
+	cross: function(v1, v2) {
+		this.x = v1.y * v2.z - v1.z * v2.y;
+		this.y = v1.z * v2.x - v1.x * v2.z;
+		this.z = v1.x * v2.y - v1.y * v2.x;
+		return this;
+	},
+
+	$cross: function(v) {
+		var tx = this.x, ty = this.y, tz = this.z;
+
+		this.x = ty * v.z - tz * v.y;
+		this.y = tz * v.x - tx * v.z;
+		this.z = tx * v.y - ty * v.x;
+		return this;
+	},
+
+	$multiply: function(v) {
+		this.x *= v.x;
+		this.y *= v.y;
+		this.z *= v.z;
+		return this;
+	},
+
+	$scale: function(s) {
+		this.x *= s;
+		this.y *= s;
+		this.z *= s;
+		return this;
+	},
+
+	dot: function(v) {
+		return this.x * v.x + this.y * v.y + this.z * v.z;
+	},
+
+	distanceTo: function(v) {
+		return Math.sqrt(this.distanceToSquared(v));
+	},
+
+	distanceToSquared: function(v) {
+		var dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z;
+		return dx * dx + dy * dy + dz * dz;
+	},
+
+	norm: function() {
+		return Math.sqrt( this.x * this.x + this.y * this.y + this.z * this.z );
+	},
+
+	normSquared: function() {
+		return this.x * this.x + this.y * this.y + this.z * this.z;
+	},
+
+	negate: function() {
+		this.x = - this.x;
+		this.y = - this.y;
+		this.z = - this.z;
+		return this;
+	},
+
+	normalize: function() {
+	  var len = this.norm();
+		if ( len > 0 ) {
+			this.$scale(1 / len);
+		} 
+		return this;
+	},
+
+	isZero: function() {
+		var almostZero = 0.0001,
+		    abs = Math.abs;
+		
+		return abs(this.x) < almostZero && abs(this.y) < almostZero && abs(this.z) < almostZero;
+	},
+
+	clone: function() {
+		return new Vector3(this.x, this.y, this.z);
+	}
+};
+
+var $V3 = function(a, b, c) { return new Vector3(a, b, c); };
+
+/*
+ * Matrix4 class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
+ */
+
+var Matrix4 = function() {
+	this._x = new Vector3();
+	this._y = new Vector3();
+	this._z = new Vector3();
+};
+
+$jit.Matrix4 = Matrix4;
+
+Matrix4.prototype = {
+
+	n11: 1, n12: 0, n13: 0, n14: 0,
+	n21: 0, n22: 1, n23: 0, n24: 0,
+	n31: 0, n32: 0, n33: 1, n34: 0,
+	n41: 0, n42: 0, n43: 0, n44: 1,
+
+	identity: function() {
+		this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
+		this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
+		this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
+		this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
+	},
+
+	lookAt: function(eye, center, up) {
+		var x = this._x, y = this._y, z = this._z;
+
+		z.sub(eye, center);
+		z.normalize();
+
+		x.cross(up, z);
+		x.normalize();
+
+		y.cross(z, x);
+		y.normalize();
+
+		this.n11 = x.x; this.n12 = x.y; this.n13 = x.z; this.n14 = - x.dot( eye );
+		this.n21 = y.x; this.n22 = y.y; this.n23 = y.z; this.n24 = - y.dot( eye );
+		this.n31 = z.x; this.n32 = z.y; this.n33 = z.z; this.n34 = - z.dot( eye );
+	},
+
+	transform: function(v) {
+		var vx = v.x, vy = v.y, vz = v.z, vw = v.w ? v.w : 1.0;
+
+		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
+		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
+		v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34 * vw;
+
+		vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
+
+		if(v.w) {
+			v.w = vw;
+		} else {
+			v.x = v.x / vw;
+			v.y = v.y / vw;
+			v.z = v.z / vw;
+		}
+	},
+
+	multiply: function(a, b) {
+		this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31 + a.n14 * b.n41;
+		this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32 + a.n14 * b.n42;
+		this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33 + a.n14 * b.n43;
+		this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14 * b.n44;
+
+		this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31 + a.n24 * b.n41;
+		this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32 + a.n24 * b.n42;
+		this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33 + a.n24 * b.n43;
+		this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24 * b.n44;
+
+		this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31 + a.n34 * b.n41;
+		this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32 + a.n34 * b.n42;
+		this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33 + a.n34 * b.n43;
+		this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34 * b.n44;
+
+		this.n41 = a.n41 * b.n11 + a.n42 * b.n21 + a.n43 * b.n31 + a.n44 * b.n41;
+		this.n42 = a.n41 * b.n12 + a.n42 * b.n22 + a.n43 * b.n32 + a.n44 * b.n42;
+		this.n43 = a.n41 * b.n13 + a.n42 * b.n23 + a.n43 * b.n33 + a.n44 * b.n43;
+		this.n44 = a.n41 * b.n14 + a.n42 * b.n24 + a.n43 * b.n34 + a.n44 * b.n44;
+	},
+
+	$multiply: function(m) {
+		var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14,
+    		n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24,
+    		n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34,
+    		n41 = this.n41, n42 = this.n42, n43 = this.n43, n44 = this.n44;
+
+		this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31 + n14 * m.n41;
+		this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32 + n14 * m.n42;
+		this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33 + n14 * m.n43;
+		this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14 * m.n44;
+
+		this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31 + n24 * m.n41;
+		this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32 + n24 * m.n42;
+		this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33 + n24 * m.n43;
+		this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24 * m.n44;
+
+		this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31 + n34 * m.n41;
+		this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32 + n34 * m.n42;
+		this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33 + n34 * m.n43;
+		this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34 * m.n44;
+
+		this.n41 = n41 * m.n11 + n42 * m.n21 + n43 * m.n31 + n44 * m.n41;
+		this.n42 = n41 * m.n12 + n42 * m.n22 + n43 * m.n32 + n44 * m.n42;
+		this.n43 = n41 * m.n13 + n42 * m.n23 + n43 * m.n33 + n44 * m.n43;
+		this.n44 = n41 * m.n14 + n42 * m.n24 + n43 * m.n34 + n44 * m.n44;
+	},
+
+	$scale: function(s) {
+		this.n11 *= s; this.n12 *= s; this.n13 *= s; this.n14 *= s;
+		this.n21 *= s; this.n22 *= s; this.n23 *= s; this.n24 *= s;
+		this.n31 *= s; this.n32 *= s; this.n33 *= s; this.n34 *= s;
+		this.n41 *= s; this.n42 *= s; this.n43 *= s; this.n44 *= s;
+		return this;
+	},
+	
+	$add: function(m) {
+	  this.n11 += m.n11;
+	  this.n12 += m.n12;
+	  this.n13 += m.n13;
+	  this.n14 += m.n14;
+	  this.n21 += m.n21;
+	  this.n22 += m.n22;
+	  this.n23 += m.n23;
+	  this.n24 += m.n24;
+	  this.n31 += m.n31;
+	  this.n32 += m.n32;
+	  this.n33 += m.n33;
+	  this.n34 += m.n34;
+	  this.n41 += m.n41;
+	  this.n42 += m.n42;
+	  this.n43 += m.n43;
+	  this.n44 += m.n44;
+	  return this;
+	},
+
+	determinant: function() {
+		return (
+			this.n14 * this.n23 * this.n32 * this.n41-
+			this.n13 * this.n24 * this.n32 * this.n41-
+			this.n14 * this.n22 * this.n33 * this.n41+
+			this.n12 * this.n24 * this.n33 * this.n41+
+
+			this.n13 * this.n22 * this.n34 * this.n41-
+			this.n12 * this.n23 * this.n34 * this.n41-
+			this.n14 * this.n23 * this.n31 * this.n42+
+			this.n13 * this.n24 * this.n31 * this.n42+
+
+			this.n14 * this.n21 * this.n33 * this.n42-
+			this.n11 * this.n24 * this.n33 * this.n42-
+			this.n13 * this.n21 * this.n34 * this.n42+
+			this.n11 * this.n23 * this.n34 * this.n42+
+
+			this.n14 * this.n22 * this.n31 * this.n43-
+			this.n12 * this.n24 * this.n31 * this.n43-
+			this.n14 * this.n21 * this.n32 * this.n43+
+			this.n11 * this.n24 * this.n32 * this.n43+
+
+			this.n12 * this.n21 * this.n34 * this.n43-
+			this.n11 * this.n22 * this.n34 * this.n43-
+			this.n13 * this.n22 * this.n31 * this.n44+
+			this.n12 * this.n23 * this.n31 * this.n44+
+
+			this.n13 * this.n21 * this.n32 * this.n44-
+			this.n11 * this.n23 * this.n32 * this.n44-
+			this.n12 * this.n21 * this.n33 * this.n44+
+			this.n11 * this.n22 * this.n33 * this.n44 );
+	},
+
+  $transpose: function() {
+	  function swap(obj, p1, p2) {
+	    var aux = obj[p1];
+	    obj[p1] = obj[p2];
+	    obj[p2] = aux;
+	  }
+	  
+	  swap(this, 'n21', 'n12');
+	  swap(this, 'n31', 'n13');
+	  swap(this, 'n32', 'n23');
+	  swap(this, 'n41', 'n14');
+	  swap(this, 'n42', 'n24');
+	  swap(this, 'n43', 'n34');
+	  return this;
+  },
+  
+	clone: function() {
+		var m = new Matrix4();
+		m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14;
+		m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24;
+		m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34;
+		m.n41 = this.n41; m.n42 = this.n42; m.n43 = this.n43; m.n44 = this.n44;
+		return m;
+	},
+	
+	flatten: function() {
+	  return [this.n11, this.n21, this.n31, this.n41,
+	      this.n12, this.n22, this.n32, this.n42,
+	      this.n13, this.n23, this.n33, this.n43,
+	      this.n14, this.n24, this.n34, this.n44];
+	}
+};
+
+Matrix4.translationMatrix = function(x, y, z) {
+	var m = new Matrix4();
+
+	m.n14 = x;
+	m.n24 = y;
+	m.n34 = z;
+
+	return m;
+};
+
+Matrix4.scaleMatrix = function(x, y, z) {
+	var m = new Matrix4();
+
+	m.n11 = x;
+	m.n22 = y;
+	m.n33 = z;
+
+	return m;
+};
+
+Matrix4.rotationXMatrix = function(theta) {
+	var rot = new Matrix4();
+
+	rot.n22 = rot.n33 = Math.cos( theta );
+	rot.n32 = Math.sin( theta );
+	rot.n23 = - rot.n32;
+
+	return rot;
+};
+
+Matrix4.rotationYMatrix = function(theta) {
+	var rot = new Matrix4();
+
+	rot.n11 = rot.n33 = Math.cos( theta );
+	rot.n13 = Math.sin( theta );
+	rot.n31 = - rot.n13;
+
+	return rot;
+};
+
+Matrix4.rotationZMatrix = function(theta) {
+	var rot = new Matrix4();
+
+	rot.n11 = rot.n22 = Math.cos( theta );
+	rot.n21 = Math.sin( theta );
+	rot.n12 = - rot.n21;
+
+	return rot;
+};
+
+Matrix4.makeInvert = function(m1) {
+	var m2 = new Matrix4();
+
+	m2.n11 = m1.n23*m1.n34*m1.n42 - m1.n24*m1.n33*m1.n42 + m1.n24*m1.n32*m1.n43 - m1.n22*m1.n34*m1.n43 - m1.n23*m1.n32*m1.n44 + m1.n22*m1.n33*m1.n44;
+	m2.n12 = m1.n14*m1.n33*m1.n42 - m1.n13*m1.n34*m1.n42 - m1.n14*m1.n32*m1.n43 + m1.n12*m1.n34*m1.n43 + m1.n13*m1.n32*m1.n44 - m1.n12*m1.n33*m1.n44;
+	m2.n13 = m1.n13*m1.n24*m1.n42 - m1.n14*m1.n23*m1.n42 + m1.n14*m1.n22*m1.n43 - m1.n12*m1.n24*m1.n43 - m1.n13*m1.n22*m1.n44 + m1.n12*m1.n23*m1.n44;
+	m2.n14 = m1.n14*m1.n23*m1.n32 - m1.n13*m1.n24*m1.n32 - m1.n14*m1.n22*m1.n33 + m1.n12*m1.n24*m1.n33 + m1.n13*m1.n22*m1.n34 - m1.n12*m1.n23*m1.n34;
+	m2.n21 = m1.n24*m1.n33*m1.n41 - m1.n23*m1.n34*m1.n41 - m1.n24*m1.n31*m1.n43 + m1.n21*m1.n34*m1.n43 + m1.n23*m1.n31*m1.n44 - m1.n21*m1.n33*m1.n44;
+	m2.n22 = m1.n13*m1.n34*m1.n41 - m1.n14*m1.n33*m1.n41 + m1.n14*m1.n31*m1.n43 - m1.n11*m1.n34*m1.n43 - m1.n13*m1.n31*m1.n44 + m1.n11*m1.n33*m1.n44;
+	m2.n23 = m1.n14*m1.n23*m1.n41 - m1.n13*m1.n24*m1.n41 - m1.n14*m1.n21*m1.n43 + m1.n11*m1.n24*m1.n43 + m1.n13*m1.n21*m1.n44 - m1.n11*m1.n23*m1.n44;
+	m2.n24 = m1.n13*m1.n24*m1.n31 - m1.n14*m1.n23*m1.n31 + m1.n14*m1.n21*m1.n33 - m1.n11*m1.n24*m1.n33 - m1.n13*m1.n21*m1.n34 + m1.n11*m1.n23*m1.n34;
+	m2.n31 = m1.n22*m1.n34*m1.n41 - m1.n24*m1.n32*m1.n41 + m1.n24*m1.n31*m1.n42 - m1.n21*m1.n34*m1.n42 - m1.n22*m1.n31*m1.n44 + m1.n21*m1.n32*m1.n44;
+	m2.n32 = m1.n14*m1.n32*m1.n41 - m1.n12*m1.n34*m1.n41 - m1.n14*m1.n31*m1.n42 + m1.n11*m1.n34*m1.n42 + m1.n12*m1.n31*m1.n44 - m1.n11*m1.n32*m1.n44;
+	m2.n33 = m1.n13*m1.n24*m1.n41 - m1.n14*m1.n22*m1.n41 + m1.n14*m1.n21*m1.n42 - m1.n11*m1.n24*m1.n42 - m1.n12*m1.n21*m1.n44 + m1.n11*m1.n22*m1.n44;
+	m2.n34 = m1.n14*m1.n22*m1.n31 - m1.n12*m1.n24*m1.n31 - m1.n14*m1.n21*m1.n32 + m1.n11*m1.n24*m1.n32 + m1.n12*m1.n21*m1.n34 - m1.n11*m1.n22*m1.n34;
+	m2.n41 = m1.n23*m1.n32*m1.n41 - m1.n22*m1.n33*m1.n41 - m1.n23*m1.n31*m1.n42 + m1.n21*m1.n33*m1.n42 + m1.n22*m1.n31*m1.n43 - m1.n21*m1.n32*m1.n43;
+	m2.n42 = m1.n12*m1.n33*m1.n41 - m1.n13*m1.n32*m1.n41 + m1.n13*m1.n31*m1.n42 - m1.n11*m1.n33*m1.n42 - m1.n12*m1.n31*m1.n43 + m1.n11*m1.n32*m1.n43;
+	m2.n43 = m1.n13*m1.n22*m1.n41 - m1.n12*m1.n23*m1.n41 - m1.n13*m1.n21*m1.n42 + m1.n11*m1.n23*m1.n42 + m1.n12*m1.n21*m1.n43 - m1.n11*m1.n22*m1.n43;
+	m2.n44 = m1.n12*m1.n23*m1.n31 - m1.n13*m1.n22*m1.n31 + m1.n13*m1.n21*m1.n32 - m1.n11*m1.n23*m1.n32 - m1.n12*m1.n21*m1.n33 + m1.n11*m1.n22*m1.n33;
+	m2.$scale(1 / m1.determinant());
+
+	return m2;
+};
+
+Matrix4.makeFrustum = function( left, right, bottom, top, near, far ) {
+	var m, x, y, a, b, c, d;
+
+	m = new Matrix4();
+	x = 2 * near / ( right - left );
+	y = 2 * near / ( top - bottom );
+	a = ( right + left ) / ( right - left );
+	b = ( top + bottom ) / ( top - bottom );
+	c = - ( far + near ) / ( far - near );
+	d = - 2 * far * near / ( far - near );
+
+	m.n11 = x;  m.n12 = 0;  m.n13 = a;   m.n14 = 0;
+	m.n21 = 0;  m.n22 = y;  m.n23 = b;   m.n24 = 0;
+	m.n31 = 0;  m.n32 = 0;  m.n33 = c;   m.n34 = d;
+	m.n41 = 0;  m.n42 = 0;  m.n43 = - 1; m.n44 = 0;
+
+	return m;
+};
+
+Matrix4.makePerspective = function( fov, aspect, near, far ) {
+	var ymax, ymin, xmin, xmax;
+
+	ymax = near * Math.tan( fov * Math.PI / 360 );
+	ymin = - ymax;
+	xmin = ymin * aspect;
+	xmax = ymax * aspect;
+
+	return Matrix4.makeFrustum( xmin, xmax, ymin, ymax, near, far );
+};
+
+Matrix4.makeOrtho = function( left, right, top, bottom, near, far ) {
+	var m, x, y, z, w, h, p;
+
+	m = new Matrix4();
+	w = right - left;
+	h = bottom - top;
+	p = far - near;
+	x = ( right + left ) / w;
+	y = ( bottom + top ) / h;
+	z = ( far + near ) / p;
+
+	m.n11 = 2 / w; m.n12 = 0;     m.n13 = 0;      m.n14 = -x;
+	m.n21 = 0;     m.n22 = 2 / h; m.n23 = 0;      m.n24 = -y;
+	m.n31 = 0;     m.n32 = 0;     m.n33 = -2 / p; m.n34 = -z;
+	m.n41 = 0;     m.n42 = 0;     m.n43 = 0;      m.n44 = 1;
+
+	return m;
+};
+
+
+/*
+ * Camera class based on three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
+ */
+
+var Camera = function (fov, aspect, near, far) {
+	this.projectionMatrix = Matrix4.makePerspective(fov, aspect, near, far);
+};
+
+Camera.prototype = {
+  position: new Vector3,
+  target: {
+    position: new Vector3
+  },
+  up: new Vector3(0, 1, 0),
+  matrix: new Matrix4,
+  
+  updateMatrix: function() {
+    this.matrix.lookAt(this.position, this.target.position, this.up);
+  }
+};
+
+
+Canvas.Base['3D'] = new Class({
+  Implements: Canvas.Base['2D'],
+  
+  program: null,
+  camera: null,
+  
+  initialize: function(viz) {
+    this.viz = viz;
+    this.opt = viz.config;
+    this.size = false;
+    this.createCanvas();
+    this.initWebGL();
+    this.initCamera();
+  },
+  
+  initWebGL: function() {
+    //initialize context
+    var gl = this.getCtx();
+    //get viewport size
+    var size = this.getSize();
+    //compile and get shaders
+    var fragmentShader = this.getShader(Canvas.Base['3D'].FragmentShader, gl.FRAGMENT_SHADER);
+    var vertexShader = this.getShader(Canvas.Base['3D'].VertexShader, gl.VERTEX_SHADER);
+    //create program and link shaders
+    var program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw "Could not link shaders";
+    }
+    gl.useProgram(program);
+    //bind name to variable location in shaders
+    $.extend(program, {
+      'viewMatrix': gl.getUniformLocation(program, 'viewMatrix'),
+      'projectionMatrix': gl.getUniformLocation(program, 'projectionMatrix'),
+      'normalMatrix': gl.getUniformLocation(program, 'normalMatrix'),
+      'color': gl.getUniformLocation(program, 'color'),
+      
+      'enableLighting': gl.getUniformLocation(program, 'enableLighting'),
+      'ambientColor': gl.getUniformLocation(program, 'ambientColor'),
+      'directionalColor': gl.getUniformLocation(program, 'directionalColor'),
+      'lightingDirection': gl.getUniformLocation(program, 'lightingDirection'),
+      
+      'position': gl.getAttribLocation(program, 'position'),
+      'normal': gl.getAttribLocation(program, 'normal'),
+    });
+    gl.enableVertexAttribArray(program.position);
+    gl.enableVertexAttribArray(program.normal);
+    this.program = program;
+    //set general rendering options
+    gl.clearColor(0, 0, 0, 0);
+    gl.clearDepth(1);
+
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LEQUAL);
+
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    
+    gl.viewport(0, 0, size.width, size.height);
+  },
+  
+  initCamera: function() {
+    var size = this.getSize();
+    var camera = new Camera(75, size.width / size.height, 1, 1000);
+    camera.position.z = 500;
+    this.camera = camera;
+  },
+  
+  getShader: function(src, type) {
+    var gl = this.ctx;
+    var shader = gl.createShader(type);
+    gl.shaderSource(shader, src);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      var info = gl.getShaderInfoLog(shader);
+      throw "Could not compile shader src: " + info;
+    }
+    return shader;
+  },
+
+  getCtx: function() {
+    if(!this.ctx) 
+      return this.ctx = this.canvas.getContext('experimental-webgl');
+    return this.ctx;
+  },
+  
+  resize: function(width, height) {
+    var size = this.getSize(),
+        canvas = this.canvas,
+        styles = canvas.style,
+        gl = this.getCtx();
+    this.size = false;
+    canvas.width = width;
+    canvas.height = height;
+    styles.width = width + "px";
+    styles.height = height + "px";
+    gl.viewport(0, 0, width, height);
+
+    this.translateOffsetX =
+      this.translateOffsetY = 0;
+    this.scaleOffsetX = 
+      this.scaleOffsetY = 1;
+    this.clear();
+    this.viz.resize(width, height, this);
+  },
+
+  translateToCenter: $.empty,
+  scale: $.empty,
+  
+  translate: function(x, y, z, disablePlot) {
+    var sx = this.scaleOffsetX,
+        sy = this.scaleOffsetY;
+    this.translateOffsetX += x*sx;
+    this.translateOffsetY += y*sy;
+    var pos = this.camera.position;
+    pos.x += x;
+    pos.y += y;
+    pos.z += z;
+    !disablePlot && this.plot();
+  },
+
+  clear: function(){
+    var gl = this.getCtx();
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    //TODO(nico) is this OK? I mean, to put this line here.
+    this.camera.updateMatrix();
+  },
+  
+  plot: function() {
+    this.clear();
+    this.viz.plot(this);
+  }
+});
+
+//Shaders code
+Canvas.Base['3D'].FragmentShader = [
+  "#ifdef GL_ES",
+  "precision highp float;",
+  "#endif",
+  
+  "varying vec4 vcolor;",
+  "varying vec3 lightWeighting;",
+  
+  "void main(){",
+  
+    "gl_FragColor = vec4(vcolor.rgb * lightWeighting, vcolor.a);",
+  
+  "}"
+].join("\n");
+
+Canvas.Base['3D'].VertexShader = [
+  "attribute vec3 position;",
+  "attribute vec3 normal;",
+  "uniform vec4 color;",
+  
+  "uniform mat4 viewMatrix;",
+  "uniform mat4 projectionMatrix;",
+  "uniform mat4 normalMatrix;",
+
+  "uniform bool enableLighting;",
+  "uniform vec3 ambientColor;",
+  "uniform vec3 directionalColor;",
+  "uniform vec3 lightingDirection;",
+  
+  "varying vec4 vcolor;",
+  "varying vec3 lightWeighting;",
+  
+  "void main(void) {",
+  
+    "if(!enableLighting) {",
+      "lightWeighting = vec3(1.0, 1.0, 1.0);",
+    "} else {",
+      "vec4 transformedNormal = normalMatrix * vec4(normal, 1.0);",
+      "float directionalLightWeighting = max(dot(transformedNormal.xyz, lightingDirection), 0.0);",
+      "lightWeighting = ambientColor + directionalColor * directionalLightWeighting;",
+    "}",
+    
+    "vcolor = color;",
+    "gl_Position = projectionMatrix * viewMatrix * vec4( position, 1.0 );",
+  
+  "}"
+].join("\n");
+
+/*
+ * Some of the geometries where inspired by three.js http://github.com/mrdoob/three.js, Copyright (c) Mr.doob http://mrdoob.com/, MIT License http://github.com/mrdoob/three.js/blob/master/LICENSE 
+ */
+
+var O3D = {};
+
+$jit.O3D = O3D;
+
+O3D.base = new Class({
+  //array of { x, y, z } of float
+  vertices: [],
+  //array of { a, b, c, d? } of int
+  faces: [],
+  //updated on plotNode/plotEdge
+  position: new Vector3,
+  rotation: new Vector3,
+  scale: new Vector3(1, 1, 1),
+  //intrinsic coordinates
+  matrix: new Matrix4,
+  
+  update: function(elem) {
+    if(elem.nodeFrom && elem.nodeTo) {
+      this.updateEdge(elem);
+    } else {
+      this.updateNode(elem);
+    }
+  },
+  
+  updateNode: $.empty,
+  
+  updateEdge: function(elem) {
+    this.updateNode(elem);
+  },
+
+  updateMatrix: function() {
+    var pos = this.position,
+        rot = this.rotation,
+        scale = this.scale,
+        matrix = this.matrix;
+    
+    matrix.identity();
+  
+    matrix.$multiply( Matrix4.translationMatrix( pos.x, pos.y, pos.z ) );
+    matrix.$multiply( Matrix4.rotationXMatrix( rot.x ) );
+    matrix.$multiply( Matrix4.rotationYMatrix( rot.y ) );
+    matrix.$multiply( Matrix4.rotationZMatrix( rot.z ) );
+    matrix.$multiply( Matrix4.scaleMatrix( scale.x, scale.y, scale.z ) );
+  },
+  //compute faces normals
+  computeNormals: function () {
+    for (var f=0, vs=this.vertices, fs=this.faces, len=fs.length; f < len; f++) {
+      var va = vs[fs[f].a],
+          vb = vs[fs[f].b],
+          vc = vs[fs[f].c],
+          cb = new Vector3,
+          ab = new Vector3;
+      
+      cb.sub(vc, vb);
+      ab.sub(va, vb);
+      cb.$cross(ab);
+
+      if (!cb.isZero()) cb.normalize();
+      
+      fs[f].normal = cb;
+    }
+  }
+});
+
+//IsoCube
+function IsoCube() {
+  var vs = this.vertices,
+      f4 = this.faces,
+      vsp = function(x, y, z) { vs.push({ x: x, y: y, z: z }); },
+      f4p = function(a, b, c, d) { f4.push({ a: a, b: b, c: c, d: d }); };
+  
+  vsp( 1,  1, -1);
+  vsp( 1, -1, -1);
+  vsp(-1, -1, -1);
+  vsp(-1,  1, -1);
+  vsp( 1,  1,  1);
+  vsp( 1, -1,  1);
+  vsp(-1, -1,  1);
+  vsp(-1,  1,  1);
+  
+  f4p(0, 1, 2, 3);
+  f4p(4, 7, 6, 5);
+  f4p(0, 4, 5, 1);
+  f4p(1, 5, 6, 2);
+  f4p(2, 6, 7, 3);
+  f4p(4, 0, 3, 7);
+}
+
+//Cube
+O3D.cube = new Class({
+  Implements: O3D.base,
+  
+  initialize: function() {
+    IsoCube.call(this);
+    this.computeNormals();
+  },
+  
+  updateNode: function(obj) {
+    var dim = obj.getData('dim'),
+        pos = obj.pos;
+    
+    this.position.setc(pos.x, pos.y, pos.z);
+    this.scale.setc(dim, dim, dim);
+    this.updateMatrix();
+  }
+});
+
+O3D.sphere = new Class({
+  Implements: O3D.base,
+  
+  radius: 1,
+  segments_width: 10,
+  segments_height: 10,
+  
+  initialize: function() {
+    var radius = this.radius,
+        segments_width = this.segments_width,
+        segments_height = this.segments_height,
+        gridX = segments_width || 8,
+        gridY = segments_height || 6,
+        cos = Math.cos,
+        sin = Math.sin,
+        max = Math.max,
+        pi = Math.PI;
+  
+    var iHor = max(3, gridX),
+        iVer = max(2, gridY),
+        aVtc = [];
+  
+    for(var j=0; j < (iVer + 1) ; j++) {
+      var fRad1 = j / iVer,
+          fZ = radius * cos(fRad1 * pi),
+          fRds = radius * sin(fRad1 * pi),
+          aRow = [],
+          oVtx = 0;
+
+      for(var i=0; i<iHor; i++) {
+        var fRad2 = 2 * i / iHor,
+            fX = fRds * Math.sin(fRad2 * pi),
+            fY = fRds * Math.cos(fRad2 * pi);
+        if (!(( j == 0 || j == iVer) && i > 0)) {
+          oVtx = this.vertices.push({ x: fY, y: fZ, z: fX}) - 1;
+        }
+        aRow.push(oVtx);
+      }
+      aVtc.push(aRow);
+    }
+  
+    var iVerNum = aVtc.length;
+    for (var j=0; j<iVerNum; j++) {
+      var iHorNum = aVtc[j].length;
+      if (j > 0) {
+        for (var i = 0; i<iHorNum; i++ ) {
+          var bEnd = i == ( iHorNum - 1 );
+          var aP1 = aVtc[j][ bEnd ? 0 : i + 1 ];
+          var aP2 = aVtc[j][ ( bEnd ? iHorNum - 1 : i ) ];
+          var aP3 = aVtc[j -1][ ( bEnd ? iHorNum - 1 : i ) ];
+          var aP4 = aVtc[j -1][ bEnd ? 0 : i + 1 ];
+  
+          if(j < ( aVtc.length - 1)) {
+            this.faces.push({ a: aP1, b: aP2, c: aP3 });
+          }
+          if(j > 1) {
+            this.faces.push({ a: aP1, b: aP3, c: aP4 });
+          }
+        }
+      }
+    }
+    this.computeNormals();
+  },
+  
+  updateNode: function(obj) {
+    var dim = obj.getData('dim'),
+        pos = obj.pos;
+    
+    this.position.setc(pos.x, pos.y, pos.z);
+    this.scale.setc(dim, dim, dim);
+    this.updateMatrix();
+  }
+
+});
+
+
+O3D.tube = new Class({
+  Implements: O3D.base,
+  
+  numSegs: 10,
+  dim: 1,
+  initialize: function() {
+    var vs = this.vertices,
+        f4 = this.faces,
+        vsp = function(x, y, z) { vs.push({ x: x, y: y, z: z }); },
+        f4p = function(a, b, c, d) { f4.push({ a: a, b: b, c: c, d: d }); };
+
+    var scope = this,
+        sin = Math.sin,
+        cos = Math.cos,
+        pi = Math.PI,
+        pi2 = pi * 2,
+        numSegs = this.numSegs,
+        topRad = this.dim,
+        botRad = this.dim;
+  
+    // Top circle vertices
+    for (var i = 0; i < numSegs; i++) {
+      vsp(sin(pi2 * i / numSegs) * topRad, cos(pi2 * i / numSegs) * topRad, -0.5);
+    }
+    // Bottom circle vertices
+    for (var i = 0; i < numSegs; i++) {
+      vsp(sin(pi2 * i / numSegs) * botRad, cos(pi2 * i / numSegs) * botRad, 0.5);
+    }
+    // Body 
+    for (var i = 0; i < numSegs; i++) {
+      f4p(i, (i + 1) % numSegs, numSegs + (i + 1) % numSegs, i + numSegs);
+    }
+    this.computeNormals();
+  },
+  
+  updateEdge: function(obj) {
+    var lineWidth = obj.getData('lineWidth'),
+        nodeFrom = obj.nodeFrom,
+        nodeTo = obj.nodeTo,
+        nodeFromPos = nodeFrom.pos,
+        nodeToPos = nodeTo.pos,
+        dist = nodeFromPos.distanceTo(nodeToPos),
+        middle = new Vector3,
+        currentDir = new Vector3(0, 0, 1),
+        dvec = new Vector3;
+    
+    middle.add(nodeFromPos, nodeToPos).$scale(0.5);
+    dvec.sub(nodeToPos, nodeFromPos).normalize();
+    
+    var c = dvec.dot(currentDir),
+        xc = dvec.dot(new Vector3(1, 0, 0)),
+        yc = dvec.dot(new Vector3(0, 1, 0)),
+        t = 1 - c,
+        rotAngle = Math.acos(c),
+        s = Math.sin(rotAngle),
+        rotAxis = currentDir.$cross(dvec).normalize(),
+        x = rotAxis.x,
+        y = rotAxis.y,
+        z = rotAxis.z;
+    
+    var rot = new Matrix4();
+    rot.n11 = t * x * x + c;
+    rot.n12 = t * x * y - s * z;
+    rot.n13 = t * x * z + s * y;
+    rot.n21 = t * x * y + s * z;
+    rot.n22 = t * y * y + c;
+    rot.n23 = t * y * z - s * x;
+    rot.n31 = t * x * z - s * y;
+    rot.n32 = t * y * z + s * x;
+    rot.n33 = t * z * z + c;
+    this.rotationMatrix = rot;
+    this.scale.setc(lineWidth, lineWidth, dist);
+    this.position.setc(middle.x, middle.y, middle.z);
+    this.updateMatrix();
+  },
+  
+  updateMatrix: function() {
+    var pos = this.position,
+        scale = this.scale,
+        matrix = this.matrix;
+    
+    matrix.identity();
+  
+    matrix.$multiply( Matrix4.translationMatrix( pos.x, pos.y, pos.z ) );
+    matrix.$multiply( this.rotationMatrix );
+    matrix.$multiply( Matrix4.scaleMatrix( scale.x, scale.y, scale.z ) );
+  }
+
+}); 
+
+
+/*
+ * File: Layouts.ForceDirected3D.js
+ *
+*/
+
+/*
+ * Class: Layouts.ForceDirected3D
+ * 
+ * Implements a Force Directed Layout.
+ * 
+ * Implemented By:
+ * 
+ * <ForceDirected3D>
+ * 
+ */
+Layouts.ForceDirected3D = new Class({
+
+  getOptions: function() {
+    var s = this.canvas.getSize();
+    var w = s.width, h = s.height;
+    //count nodes
+    var count = 0;
+    this.graph.eachNode(function(n) { 
+      count++;
+    });
+    var k2 = w * h / count, k = Math.sqrt(k2);
+    var l = this.config.levelDistance;
+    
+    return {
+      width: w,
+      height: h,
+      tstart: w * 0.1,
+      nodef: function(x) { return k2 / (x || 1); },
+      edgef: function(x) { return /* x * x / k; */ k * (x - l); }
+    };
+  },
+  
+  compute: function(property, incremental) {
+    var prop = $.splat(property || ['current', 'start', 'end']);
+    var opt = this.getOptions();
+    NodeDim.compute(this.graph, prop, this.config);
+    this.graph.computeLevels(this.root, 0, "ignore");
+    this.graph.eachNode(function(n) {
+      $.each(prop, function(p) {
+        var pos = n.getPos(p);
+        if(pos.isZero()) {
+          pos.x = opt.width/5 * (Math.random() - 0.5);
+          pos.y = opt.height/5 * (Math.random() - 0.5);
+          pos.z = 200 * (Math.random() - 0.5);
+        }
+        //initialize disp vector
+        n.disp = {};
+        $.each(prop, function(p) {
+          n.disp[p] = $V3(0, 0, 0);
+        });
+      });
+    });
+    this.computePositions(prop, opt, incremental);
+  },
+  
+  computePositions: function(property, opt, incremental) {
+    var times = this.config.iterations, i = 0, that = this;
+    if(incremental) {
+      (function iter() {
+        for(var total=incremental.iter, j=0; j<total; j++) {
+          opt.t = opt.tstart * (1 - i++/(times -1));
+          that.computePositionStep(property, opt);
+          if(i >= times) {
+            incremental.onComplete();
+            return;
+          }
+        }
+        incremental.onStep(Math.round(i / (times -1) * 100));
+        setTimeout(iter, 1);
+      })();
+    } else {
+      for(; i < times; i++) {
+        opt.t = opt.tstart * (1 - i/(times -1));
+        this.computePositionStep(property, opt);
+      }
+    }
+  },
+  
+  computePositionStep: function(property, opt) {
+    var graph = this.graph;
+    var min = Math.min, max = Math.max;
+    var dpos = $V3(0, 0, 0);
+    //calculate repulsive forces
+    graph.eachNode(function(v) {
+      //initialize disp
+      $.each(property, function(p) {
+        v.disp[p].x = 0; 
+        v.disp[p].y = 0;
+        v.disp[p].z = 0;
+      });
+      graph.eachNode(function(u) {
+        if(u.id != v.id) {
+          $.each(property, function(p) {
+            var vp = v.getPos(p), up = u.getPos(p);
+            dpos.x = vp.x - up.x;
+            dpos.y = vp.y - up.y;
+            dpos.z = vp.z - up.z;
+            var norm = dpos.norm() || 1;
+            v.disp[p].$add(dpos
+                .$scale(opt.nodef(norm) / norm));
+          });
+        }
+      });
+    });
+    //calculate attractive forces
+    var T = !!graph.getNode(this.root).visited;
+    graph.eachNode(function(node) {
+      node.eachAdjacency(function(adj) {
+        var nodeTo = adj.nodeTo;
+        if(!!nodeTo.visited === T) {
+          $.each(property, function(p) {
+            var vp = node.getPos(p), up = nodeTo.getPos(p);
+            dpos.x = vp.x - up.x;
+            dpos.y = vp.y - up.y;
+            dpos.z = vp.z - up.z;
+            var norm = dpos.norm() || 1;
+            node.disp[p].$add(dpos.$scale(-opt.edgef(norm) / norm));
+            nodeTo.disp[p].$add(dpos.$scale(-1));
+          });
+        }
+      });
+      node.visited = !T;
+    });
+    //arrange positions to fit the canvas
+    var t = opt.t, w2 = opt.width / 2, h2 = opt.height / 2;
+    graph.eachNode(function(u) {
+      $.each(property, function(p) {
+        var disp = u.disp[p];
+        var norm = disp.norm() || 1;
+        var p = u.getPos(p);
+        p.$add($V3(disp.x * min(Math.abs(disp.x), t) / norm, 
+                   disp.y * min(Math.abs(disp.y), t) / norm,
+                   disp.z * min(Math.abs(disp.z), t) / norm));
+        p.x = min(w2, max(-w2, p.x));
+        p.y = min(h2, max(-h2, p.y));
+        p.z = min(h2, max(-h2, p.z));
+      });
+    });
+  }
+});
+
+$jit.ForceDirected3D = new Class( {
+
+  Implements: [ Loader, Extras, Layouts.ForceDirected3D ],
+
+  initialize: function(controller) {
+    var $ForceDirected3D = $jit.ForceDirected3D;
+
+    var config = {
+      iterations: 50,
+      levelDistance: 50
+    };
+
+    this.controller = this.config = $.merge(Options("Canvas", "Node", "Edge",
+        "Fx", "Tips", "NodeStyles", "Events", "Navigation", "Controller", "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': Vector3,
+      'Node': {
+        'selected': false,
+        'exist': true,
+        'drawn': true
+      }
+    };
+    this.graph = new Graph(this.graphOptions, this.config.Node,
+        this.config.Edge);
+    this.labels = new $ForceDirected3D.Label[canvasConfig.Label.type](this);
+    this.fx = new $ForceDirected3D.Plot(this, $ForceDirected3D);
+    this.op = new $ForceDirected3D.Op(this);
+    this.json = null;
+    this.busy = false;
+    // initialize extras
+    this.initializeExtras();
+  },
+
+  /* 
+    refresh 
+    
+    Computes positions and plots the tree.
+  */
+  refresh: function() {
+    this.compute();
+    this.plot();
+  },
+
+  reposition: function() {
+    this.compute('end');
+  },
+
+/*
+  computeIncremental
+  
+  Performs the Force Directed algorithm incrementally.
+  
+  Description:
+  
+  ForceDirected3D algorithms can perform many computations and lead to JavaScript taking too much time to complete. 
+  This method splits the algorithm into smaller parts allowing the user to track the evolution of the algorithm and 
+  avoiding browser messages such as "This script is taking too long to complete".
+  
+  Parameters:
+  
+  opt - (object) The object properties are described below
+  
+  iter - (number) Default's *20*. Split the algorithm into pieces of _iter_ iterations. For example, if the _iterations_ configuration property 
+  of your <ForceDirected3D> class is 100, then you could set _iter_ to 20 to split the main algorithm into 5 smaller pieces.
+  
+  property - (string) Default's *end*. Whether to update starting, current or ending node positions. Possible values are 'end', 'start', 'current'. 
+  You can also set an array of these properties. If you'd like to keep the current node positions but to perform these 
+  computations for final animation positions then you can just choose 'end'.
+  
+  onStep - (function) A callback function called when each "small part" of the algorithm completed. This function gets as first formal 
+  parameter a percentage value.
+  
+  onComplete - A callback function called when the algorithm completed.
+  
+  Example:
+  
+  In this example I calculate the end positions and then animate the graph to those positions
+  
+  (start code js)
+  var fd = new $jit.ForceDirected3D(...);
+  fd.computeIncremental({
+    iter: 20,
+    property: 'end',
+    onStep: function(perc) {
+      Log.write("loading " + perc + "%");
+    },
+    onComplete: function() {
+      Log.write("done");
+      fd.animate();
+    }
+  });
+  (end code)
+  
+  In this example I calculate all positions and (re)plot the graph
+  
+  (start code js)
+  var fd = new ForceDirected3D(...);
+  fd.computeIncremental({
+    iter: 20,
+    property: ['end', 'start', 'current'],
+    onStep: function(perc) {
+      Log.write("loading " + perc + "%");
+    },
+    onComplete: function() {
+      Log.write("done");
+      fd.plot();
+    }
+  });
+  (end code)
+  
+  */
+  computeIncremental: function(opt) {
+    opt = $.merge( {
+      iter: 20,
+      property: 'end',
+      onStep: $.empty,
+      onComplete: $.empty
+    }, opt || {});
+
+    this.config.onBeforeCompute(this.graph.getNode(this.root));
+    this.compute(opt.property, opt);
+  },
+
+  /*
+    plot
+   
+    Plots the ForceDirected3D graph. This is a shortcut to *fx.plot*.
+   */
+  plot: function() {
+    this.fx.plot();
+  },
+
+  /*
+     animate
+    
+     Animates the graph from the current positions to the 'end' node positions.
+  */
+  animate: function(opt) {
+    this.fx.animate($.merge( {
+      modes: [ 'linear' ]
+    }, opt || {}));
+  }
+});
+
+$jit.ForceDirected3D.$extend = true;
+
+(function(ForceDirected3D) {
+
+  /*
+     ForceDirected3D.Op
+     
+     Custom extension of <Graph.Op>.
+
+     Extends:
+
+     All <Graph.Op> methods
+     
+     See also:
+     
+     <Graph.Op>
+
+  */
+  ForceDirected3D.Op = new Class( {
+
+    Implements: Graph.Op
+
+  });
+
+  /*
+    ForceDirected3D.Plot
+    
+    Custom extension of <Graph.Plot>.
+  
+    Extends:
+  
+    All <Graph.Plot> methods
+    
+    See also:
+    
+    <Graph.Plot>
+  
+  */
+  ForceDirected3D.Plot = new Class( {
+
+    Implements: Graph.Plot3D
+
+  });
+
+  /*
+    ForceDirected3D.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>.
+  
+  */
+  ForceDirected3D.Label = {};
+
+  /*
+     ForceDirected3D.Label.Native
+     
+     Custom extension of <Graph.Label.Native>.
+
+     Extends:
+
+     All <Graph.Label.Native> methods
+
+     See also:
+
+     <Graph.Label.Native>
+
+  */
+  ForceDirected3D.Label.Native = new Class( {
+    Implements: Graph.Label.Native
+  });
+
+  /*
+    ForceDirected3D.Label.SVG
+    
+    Custom extension of <Graph.Label.SVG>.
+  
+    Extends:
+  
+    All <Graph.Label.SVG> methods
+  
+    See also:
+  
+    <Graph.Label.SVG>
+  
+  */
+  ForceDirected3D.Label.SVG = new Class( {
+    Implements: Graph.Label.SVG,
+
+    initialize: function(viz) {
+      this.viz = viz;
+    },
+
+    /* 
+       placeLabel
+
+       Overrides abstract method placeLabel in <Graph.Label>.
+
+       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), 
+          canvas = this.viz.canvas,
+          ox = canvas.translateOffsetX,
+          oy = canvas.translateOffsetY,
+          sx = canvas.scaleOffsetX,
+          sy = canvas.scaleOffsetY,
+          radius = canvas.getSize();
+      var labelPos = {
+        x: Math.round(pos.x * sx + ox + radius.width / 2),
+        y: Math.round(pos.y * sy + oy + radius.height / 2)
+      };
+      tag.setAttribute('x', labelPos.x);
+      tag.setAttribute('y', labelPos.y);
+
+      controller.onPlaceLabel(tag, node);
+    }
+  });
+
+  /*
+     ForceDirected3D.Label.HTML
+     
+     Custom extension of <Graph.Label.HTML>.
+
+     Extends:
+
+     All <Graph.Label.HTML> methods.
+
+     See also:
+
+     <Graph.Label.HTML>
+
+  */
+  ForceDirected3D.Label.HTML = new Class( {
+    Implements: Graph.Label.HTML,
+
+    initialize: function(viz) {
+      this.viz = viz;
+    },
+    /* 
+       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), 
+          canvas = this.viz.canvas,
+          ox = canvas.translateOffsetX,
+          oy = canvas.translateOffsetY,
+          sx = canvas.scaleOffsetX,
+          sy = canvas.scaleOffsetY,
+          radius = canvas.getSize();
+      var labelPos = {
+        x: Math.round(pos.x * sx + ox + radius.width / 2),
+        y: Math.round(pos.y * sy + oy + radius.height / 2)
+      };
+      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);
+    }
+  });
+
+  /*
+    ForceDirected3D.Plot.NodeTypes
+
+    This class contains a list of <Graph.Node> built-in types. 
+    Node types implemented are 'none', 'circle', 'triangle', 'rectangle', 'star', 'ellipse' and 'square'.
+
+    You can add your custom node types, customizing your visualization to the extreme.
+
+    Example:
+
+    (start code js)
+      ForceDirected3D.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)
+
+  */
+  ForceDirected3D.Plot.NodeTypes = new Class({
+    'none': {
+      'render': $.empty,
+      'contains': $.lambda(false)
+    },
+    'circle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.circle.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.circle.contains(npos, pos, dim);
+      }
+    },
+    'ellipse': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        this.nodeHelper.ellipse.render('fill', pos, width, height, canvas);
+        },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        return this.nodeHelper.ellipse.contains(npos, pos, width, height);
+      }
+    },
+    'square': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.square.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.square.contains(npos, pos, dim);
+      }
+    },
+    'rectangle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        this.nodeHelper.rectangle.render('fill', pos, width, height, canvas);
+      },
+      'contains': function(node, pos){
+        var npos = node.pos.getc(true), 
+            width = node.getData('width'), 
+            height = node.getData('height');
+        return this.nodeHelper.rectangle.contains(npos, pos, width, height);
+      }
+    },
+    'triangle': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        this.nodeHelper.triangle.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos) {
+        var npos = node.pos.getc(true), 
+            dim = node.getData('dim');
+        return this.nodeHelper.triangle.contains(npos, pos, dim);
+      }
+    },
+    'star': {
+      'render': function(node, canvas){
+        var pos = node.pos.getc(true),
+            dim = node.getData('dim');
+        this.nodeHelper.star.render('fill', pos, dim, canvas);
+      },
+      'contains': function(node, pos) {
+        var npos = node.pos.getc(true),
+            dim = node.getData('dim');
+        return this.nodeHelper.star.contains(npos, pos, dim);
+      }
+    }
+  });
+
+  /*
+    ForceDirected3D.Plot.EdgeTypes
+  
+    This class contains a list of <Graph.Adjacence> built-in types. 
+    Edge types implemented are 'none', 'line' and 'arrow'.
+  
+    You can add your custom edge types, customizing your visualization to the extreme.
+  
+    Example:
+  
+    (start code js)
+      ForceDirected3D.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)
+  
+  */
+  ForceDirected3D.Plot.EdgeTypes = new Class({
+    'none': $.empty,
+    'line': {
+      'render': function(adj, canvas) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        this.edgeHelper.line.render(from, to, canvas);
+      },
+      'contains': function(adj, pos) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        return this.edgeHelper.line.contains(from, to, pos, this.edge.epsilon);
+      }
+    },
+    'arrow': {
+      'render': function(adj, canvas) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true),
+            dim = adj.getData('dim'),
+            direction = adj.data.$direction,
+            inv = (direction && direction.length>1 && direction[0] != adj.nodeFrom.id);
+        this.edgeHelper.arrow.render(from, to, dim, inv, canvas);
+      },
+      'contains': function(adj, pos) {
+        var from = adj.nodeFrom.pos.getc(true),
+            to = adj.nodeTo.pos.getc(true);
+        return this.edgeHelper.arrow.contains(from, to, pos, this.edge.epsilon);
+      }
+    }
+  });
+
+})($jit.ForceDirected3D);
+
+
+
+
+ })();
diff --git a/app/assets/javascripts/src/Metamaps.Backbone.js.erb b/app/assets/javascripts/src/Metamaps.Backbone.js.erb
index dead8d44..ce466231 100644
--- a/app/assets/javascripts/src/Metamaps.Backbone.js.erb
+++ b/app/assets/javascripts/src/Metamaps.Backbone.js.erb
@@ -1,247 +1,247 @@
-Metamaps.Backbone = {};
-Metamaps.Backbone.Map = Backbone.Model.extend({
-    urlRoot: '/maps',
-    blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
-    toJSON: function (options) {
-        return _.omit(this.attributes, this.blacklist);
-    },
-    save: function (key, val, options) {
-
-        var attrs;
-
-        // Handle both `"key", value` and `{key: value}` -style arguments.
-        if (key == null || typeof key === 'object') {
-            attrs = key;
-            options = val;
-        } else {
-            (attrs = {})[key] = val;
-        }
-
-        var newOptions = options || {};
-        var s = newOptions.success;
-
-        newOptions.success = function (model, response, opt) {
-            if (s) s(model, response, opt);
-            model.trigger('saved');
-        };
-        return Backbone.Model.prototype.save.call(this, attrs, newOptions);
-    },
-    initialize: function () {
-        this.on('changeByOther', this.updateView);
-        this.on('saved', this.savedEvent);
-    },
-    savedEvent: function() {
-        Metamaps.Realtime.sendMapChange(this);
-    },
-    authorizeToEdit: function (mapper) {
-        if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
-        else return false;
-    },
-    authorizePermissionChange: function (mapper) {
-        if (mapper && this.get('user_id') === mapper.get('id')) return true;
-        else return false;
-    },
-    getUser: function () {
-        return Metamaps.Mapper.get(this.get('user_id'));
-    },
-    fetchContained: function () {
-        var bb = Metamaps.Backbone;
-        var that = this;
-        var start = function (data) {
-            that.set('mappers', new bb.MapperCollection(data.mappers));
-            that.set('topics', new bb.TopicCollection(data.topics));
-            that.set('synapses', new bb.SynapseCollection(data.synapses));
-            that.set('mappings', new bb.MappingCollection(data.mappings));
-        };
-
-        var e = $.ajax({
-            url: "/maps/" + this.id + "/contains.json",
-            success: start,
-            error: errorFunc,
-            async: false
-        });
-    },
-    getTopics: function () {
-        if (!this.get('topics')) {
-            this.fetchContained();
-        }
-        return this.get('topics');
-    },
-    getSynapses: function () {
-        if (!this.get('synapses')) {
-            this.fetchContained();
-        }
-        return this.get('synapses');
-    },
-    getMappings: function () {
-        if (!this.get('mappings')) {
-            this.fetchContained();
-        }
-        return this.get('mappings');
-    },
-    getMappers: function () {
-        if (!this.get('mappers')) {
-            this.fetchContained();
-        }
-        return this.get('mappers');
-    },
-    attrForCards: function () {
-        function capitalize(string) {
-            return string.charAt(0).toUpperCase() + string.slice(1);
-        }
-
-        var n = this.get('name');
-        var d = this.get('desc');
-
-        var maxNameLength = 32;
-        var maxDescLength = 118;
-        var truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + "..." : n) : "";
-        var truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + "..." : d) : "";
-
-        var obj = {
-            id: this.id,
-            name: truncatedName,
-            fullName: n,
-            desc: truncatedDesc,
-            permission: this.get("permission") ? capitalize(this.get("permission")) : "Commons",
-            editPermission: this.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEdit' : 'cannotEdit',
-            contributor_count_number: '<span class="cCountColor">' + this.get('contributor_count') + '</span>',
-            contributor_count_string: this.get('contributor_count') == 1 ? ' contributor' : ' contributors',
-            topic_count_number: '<span class="tCountColor">' + this.get('topic_count') + '</span>',
-            topic_count_string: this.get('topic_count')  == 1 ? ' topic' : ' topics',
-            synapse_count_number: '<span class="sCountColor">' + this.get('synapse_count') + '</span>',
-            synapse_count_string: this.get('synapse_count') == 1 ? ' synapse' : ' synapses',
-            screenshot: '<img src="' + this.get('screenshot_url') + '" />'
-        };
-        return obj;
-    },
-    updateView: function() {
-        var map = Metamaps.Active.Map;
-        var isActiveMap = this.id === map.id;
-        var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '';
-        var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '';
-        if (isActiveMap) {
-            Metamaps.Map.InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'));
-            this.updateMapWrapper();
-        }
-    },
-    updateMapWrapper: function() {
-        var map = Metamaps.Active.Map;
-        var isActiveMap = this.id === map.id;
-        var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '';
-        var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '';
-        if (isActiveMap) {
-            $('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap);
-        }
-    }
-});
-Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
-    model: Metamaps.Backbone.Map,
-    initialize: function(models, options) {
-        this.id = options.id;
-        this.sortBy = options.sortBy;
-
-        if (options.mapperId) {
-            this.mapperId = options.mapperId;
-        }
-
-        // this.page represents the NEXT page to fetch
-        this.page = models.length > 0 ? (models.length < 20 ? "loadedAll" : 2) : 1;
-    },
-    url: function() {
-        if (!this.mapperId) {
-            return '/explore/' + this.id + '.json';
-        }
-        else {
-            return '/explore/mapper/' + this.mapperId + '.json';
-        }
-    },
-    comparator: function (a, b) {
-        a = a.get(this.sortBy);
-        b = b.get(this.sortBy);
-        var temp;
-        if (this.sortBy === 'name') {
-            a = a ? a.toLowerCase() : "";
-            b = b ? b.toLowerCase() : "";
-        }
-        else {
-            // this is for updated_at and created_at
-            temp = a;
-            a = b;
-            b = temp;
-            a = (new Date(a)).getTime();
-            b = (new Date(b)).getTime();
-        }
-        return a > b ? 1 : a < b ? -1 : 0;
-    },
-    getMaps: function (cb) {
-
-        var self = this;
-
-        Metamaps.Loading.show();
-
-        if (this.page != "loadedAll") {
-            var numBefore = this.length;
-            this.fetch({
-                remove: false,
-                silent: true,
-                data: { page: this.page },
-                success: function (collection, response, options) {
-                    // you can pass additional options to the event you trigger here as well
-                    if (collection.length - numBefore < 20) {
-                        self.page = "loadedAll";
-                    }
-                    else self.page += 1;
-                    self.trigger('successOnFetch', cb);
-                },
-                error: function (collection, response, options) {
-                    // you can pass additional options to the event you trigger here as well
-                    self.trigger('errorOnFetch');
-                }
-            });
-        }
-        else {
-            self.trigger('successOnFetch', cb);
-        }
-    }
-});
-
-Metamaps.Backbone.Message = Backbone.Model.extend({
-    urlRoot: '/messages',
-    blacklist: ['created_at', 'updated_at'],
-    toJSON: function (options) {
-        return _.omit(this.attributes, this.blacklist);
-    },
-    prepareLiForFilter: function () {
-        /*var li = '';
-        li += '<li data-id="' + this.id.toString() + '">';      
-        li += '<img src="' + this.get("image") + '" data-id="' + this.id.toString() + '"';
-        li += ' alt="' + this.get('name') + '" />';      
-        li += '<p>' + this.get('name') + '</p></li>';
-        return li;*/
-    }
-});
-Metamaps.Backbone.MessageCollection = Backbone.Collection.extend({
-    model: Metamaps.Backbone.Message,
-    url: '/messages'
-});
-
-Metamaps.Backbone.Mapper = Backbone.Model.extend({
-    urlRoot: '/users',
-    blacklist: ['created_at', 'updated_at'],
-    toJSON: function (options) {
-        return _.omit(this.attributes, this.blacklist);
-    },
-    prepareLiForFilter: function () {
-        var li = '';
-        li += '<li data-id="' + this.id.toString() + '">';      
-        li += '<img src="' + this.get("image") + '" data-id="' + this.id.toString() + '"';
-        li += ' alt="' + this.get('name') + '" />';      
-        li += '<p>' + this.get('name') + '</p></li>';
-        return li;
-    }
-});
-Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
-    model: Metamaps.Backbone.Mapper,
-    url: '/users'
-});
+Metamaps.Backbone = {};
+Metamaps.Backbone.Map = Backbone.Model.extend({
+    urlRoot: '/maps',
+    blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
+    toJSON: function (options) {
+        return _.omit(this.attributes, this.blacklist);
+    },
+    save: function (key, val, options) {
+
+        var attrs;
+
+        // Handle both `"key", value` and `{key: value}` -style arguments.
+        if (key == null || typeof key === 'object') {
+            attrs = key;
+            options = val;
+        } else {
+            (attrs = {})[key] = val;
+        }
+
+        var newOptions = options || {};
+        var s = newOptions.success;
+
+        newOptions.success = function (model, response, opt) {
+            if (s) s(model, response, opt);
+            model.trigger('saved');
+        };
+        return Backbone.Model.prototype.save.call(this, attrs, newOptions);
+    },
+    initialize: function () {
+        this.on('changeByOther', this.updateView);
+        this.on('saved', this.savedEvent);
+    },
+    savedEvent: function() {
+        Metamaps.Realtime.sendMapChange(this);
+    },
+    authorizeToEdit: function (mapper) {
+        if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
+        else return false;
+    },
+    authorizePermissionChange: function (mapper) {
+        if (mapper && this.get('user_id') === mapper.get('id')) return true;
+        else return false;
+    },
+    getUser: function () {
+        return Metamaps.Mapper.get(this.get('user_id'));
+    },
+    fetchContained: function () {
+        var bb = Metamaps.Backbone;
+        var that = this;
+        var start = function (data) {
+            that.set('mappers', new bb.MapperCollection(data.mappers));
+            that.set('topics', new bb.TopicCollection(data.topics));
+            that.set('synapses', new bb.SynapseCollection(data.synapses));
+            that.set('mappings', new bb.MappingCollection(data.mappings));
+        };
+
+        var e = $.ajax({
+            url: "/maps/" + this.id + "/contains.json",
+            success: start,
+            error: errorFunc,
+            async: false
+        });
+    },
+    getTopics: function () {
+        if (!this.get('topics')) {
+            this.fetchContained();
+        }
+        return this.get('topics');
+    },
+    getSynapses: function () {
+        if (!this.get('synapses')) {
+            this.fetchContained();
+        }
+        return this.get('synapses');
+    },
+    getMappings: function () {
+        if (!this.get('mappings')) {
+            this.fetchContained();
+        }
+        return this.get('mappings');
+    },
+    getMappers: function () {
+        if (!this.get('mappers')) {
+            this.fetchContained();
+        }
+        return this.get('mappers');
+    },
+    attrForCards: function () {
+        function capitalize(string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+
+        var n = this.get('name');
+        var d = this.get('desc');
+
+        var maxNameLength = 32;
+        var maxDescLength = 118;
+        var truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + "..." : n) : "";
+        var truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + "..." : d) : "";
+
+        var obj = {
+            id: this.id,
+            name: truncatedName,
+            fullName: n,
+            desc: truncatedDesc,
+            permission: this.get("permission") ? capitalize(this.get("permission")) : "Commons",
+            editPermission: this.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEdit' : 'cannotEdit',
+            contributor_count_number: '<span class="cCountColor">' + this.get('contributor_count') + '</span>',
+            contributor_count_string: this.get('contributor_count') == 1 ? ' contributor' : ' contributors',
+            topic_count_number: '<span class="tCountColor">' + this.get('topic_count') + '</span>',
+            topic_count_string: this.get('topic_count')  == 1 ? ' topic' : ' topics',
+            synapse_count_number: '<span class="sCountColor">' + this.get('synapse_count') + '</span>',
+            synapse_count_string: this.get('synapse_count') == 1 ? ' synapse' : ' synapses',
+            screenshot: '<img src="' + this.get('screenshot_url') + '" />'
+        };
+        return obj;
+    },
+    updateView: function() {
+        var map = Metamaps.Active.Map;
+        var isActiveMap = this.id === map.id;
+        var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '';
+        var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '';
+        if (isActiveMap) {
+            Metamaps.Map.InfoBox.updateNameDescPerm(this.get('name'), this.get('desc'), this.get('permission'));
+            this.updateMapWrapper();
+        }
+    },
+    updateMapWrapper: function() {
+        var map = Metamaps.Active.Map;
+        var isActiveMap = this.id === map.id;
+        var authorized = map && map.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEditMap' : '';
+        var commonsMap = map && map.get('permission') === 'commons' ? 'commonsMap' : '';
+        if (isActiveMap) {
+            $('.wrapper').removeClass('canEditMap commonsMap').addClass(authorized + ' ' + commonsMap);
+        }
+    }
+});
+Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
+    model: Metamaps.Backbone.Map,
+    initialize: function(models, options) {
+        this.id = options.id;
+        this.sortBy = options.sortBy;
+
+        if (options.mapperId) {
+            this.mapperId = options.mapperId;
+        }
+
+        // this.page represents the NEXT page to fetch
+        this.page = models.length > 0 ? (models.length < 20 ? "loadedAll" : 2) : 1;
+    },
+    url: function() {
+        if (!this.mapperId) {
+            return '/explore/' + this.id + '.json';
+        }
+        else {
+            return '/explore/mapper/' + this.mapperId + '.json';
+        }
+    },
+    comparator: function (a, b) {
+        a = a.get(this.sortBy);
+        b = b.get(this.sortBy);
+        var temp;
+        if (this.sortBy === 'name') {
+            a = a ? a.toLowerCase() : "";
+            b = b ? b.toLowerCase() : "";
+        }
+        else {
+            // this is for updated_at and created_at
+            temp = a;
+            a = b;
+            b = temp;
+            a = (new Date(a)).getTime();
+            b = (new Date(b)).getTime();
+        }
+        return a > b ? 1 : a < b ? -1 : 0;
+    },
+    getMaps: function (cb) {
+
+        var self = this;
+
+        Metamaps.Loading.show();
+
+        if (this.page != "loadedAll") {
+            var numBefore = this.length;
+            this.fetch({
+                remove: false,
+                silent: true,
+                data: { page: this.page },
+                success: function (collection, response, options) {
+                    // you can pass additional options to the event you trigger here as well
+                    if (collection.length - numBefore < 20) {
+                        self.page = "loadedAll";
+                    }
+                    else self.page += 1;
+                    self.trigger('successOnFetch', cb);
+                },
+                error: function (collection, response, options) {
+                    // you can pass additional options to the event you trigger here as well
+                    self.trigger('errorOnFetch');
+                }
+            });
+        }
+        else {
+            self.trigger('successOnFetch', cb);
+        }
+    }
+});
+
+Metamaps.Backbone.Message = Backbone.Model.extend({
+    urlRoot: '/messages',
+    blacklist: ['created_at', 'updated_at'],
+    toJSON: function (options) {
+        return _.omit(this.attributes, this.blacklist);
+    },
+    prepareLiForFilter: function () {
+        /*var li = '';
+        li += '<li data-id="' + this.id.toString() + '">';      
+        li += '<img src="' + this.get("image") + '" data-id="' + this.id.toString() + '"';
+        li += ' alt="' + this.get('name') + '" />';      
+        li += '<p>' + this.get('name') + '</p></li>';
+        return li;*/
+    }
+});
+Metamaps.Backbone.MessageCollection = Backbone.Collection.extend({
+    model: Metamaps.Backbone.Message,
+    url: '/messages'
+});
+
+Metamaps.Backbone.Mapper = Backbone.Model.extend({
+    urlRoot: '/users',
+    blacklist: ['created_at', 'updated_at'],
+    toJSON: function (options) {
+        return _.omit(this.attributes, this.blacklist);
+    },
+    prepareLiForFilter: function () {
+        var li = '';
+        li += '<li data-id="' + this.id.toString() + '">';      
+        li += '<img src="' + this.get("image") + '" data-id="' + this.id.toString() + '"';
+        li += ' alt="' + this.get('name') + '" />';      
+        li += '<p>' + this.get('name') + '</p></li>';
+        return li;
+    }
+});
+Metamaps.Backbone.MapperCollection = Backbone.Collection.extend({
+    model: Metamaps.Backbone.Mapper,
+    url: '/users'
+});
diff --git a/app/assets/javascripts/src/Metamaps.GlobalUI.js.erb b/app/assets/javascripts/src/Metamaps.GlobalUI.js.erb
index 8e1ccfdf..f00025c4 100644
--- a/app/assets/javascripts/src/Metamaps.GlobalUI.js.erb
+++ b/app/assets/javascripts/src/Metamaps.GlobalUI.js.erb
@@ -1,687 +1,687 @@
-var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
-/*
-
-* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps
-* object will be these
-GlobalUI
-Active
-Maps
-Mappers
-Backbone
-
-* all these get added when you are on a page with the Javascript Infovis Toolkit
-Settings
-Touch
-Mouse
-Selected
-Metacodes
-Topics
-Synapses
-Mappings
-Create
-TopicCard
-SynapseCard
-Visualize
-Util
-Realtime
-Control
-Filter
-Listeners
-Organize
-Map
-Mapper
-Topic
-Synapse
-JIT
-*/
-
-Metamaps.Active = {
-    Map: null,
-    Topic: null,
-    Mapper: null
-};
-Metamaps.Maps = {};
-
-$(document).ready(function () {
-
-    for (var prop in Metamaps) {
-
-        // this runs the init function within each sub-object on the Metamaps one
-        if (Metamaps.hasOwnProperty(prop) &&
-            Metamaps[prop].hasOwnProperty('init') &&
-            typeof (Metamaps[prop].init) == 'function'
-        ) {
-            Metamaps[prop].init();
-        }
-    }
-
-    // initialize the famous ui
-    var callFamous = function(){
-        if (Metamaps.Famous) {
-            Metamaps.Famous.build();
-        }
-        else {
-            setTimeout(callFamous, 100);
-        }
-    }
-    callFamous();
-});
-
-Metamaps.GlobalUI = {
-    notifyTimeout: null,
-    lightbox: null,
-    init: function () {
-        var self = Metamaps.GlobalUI;
-
-        self.Search.init();
-        self.CreateMap.init();
-        self.Account.init();
-
-        //bind lightbox clicks
-        $('.openLightbox').click(function (event) {
-            self.openLightbox($(this).attr('data-open'));
-            event.preventDefault();
-            return false;
-        });
-
-        $('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
-
-        // initialize global backbone models and collections
-        if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
-
-        var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
-        var mapperCollection = [];
-        var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
-        if (Metamaps.Maps.Mapper) {
-            mapperCollection = Metamaps.Maps.Mapper.models;
-            mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id;
-        }
-        var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
-        var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
-        Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' });
-        // 'Mapper' refers to another mapper
-        Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
-        Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
-        Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
-    },
-    openLightbox: function (which) {
-        var self = Metamaps.GlobalUI;
-
-        $('.lightboxContent').hide();
-        $('#' + which).show();
-
-        self.lightbox = which;
-
-        $('#lightbox_overlay').show();
-
-        var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
-        // animate the content in from the bottom
-        $('#lightbox_main').animate({
-                'top': '50%',
-                'margin-top': heightOfContent
-        }, 200, 'easeOutCubic');
-
-        // fade the black overlay in
-        $('#lightbox_screen').animate({
-                    'opacity': '0.42'
-        }, 200);
-
-        if (which == "switchMetacodes") {
-            Metamaps.Create.isSwitchingSet = true;
-        }
-    },
-
-    closeLightbox: function (event) {
-        var self = Metamaps.GlobalUI;
-
-        if (event) event.preventDefault();
-
-        // animate the lightbox content offscreen
-        $('#lightbox_main').animate({
-                'top': '100%',
-                'margin-top': '0'
-        }, 200, 'easeInCubic');
-
-        // fade the black overlay out
-        $('#lightbox_screen').animate({
-                    'opacity': '0.0'
-        }, 200, function () {
-            $('#lightbox_overlay').hide();
-        });
-
-        if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
-        if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
-        if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
-            Metamaps.Create.cancelMetacodeSetSwitch();
-        }
-        self.lightbox = null;
-    },
-    notifyUser: function (message, leaveOpen) {
-        var self = Metamaps.GlobalUI;
-
-        function famousReady() {
-          Metamaps.Famous.toast.surf.setContent(message);
-          Metamaps.Famous.toast.show();
-          clearTimeout(self.notifyTimeOut);
-          if (!leaveOpen) {
-              self.notifyTimeOut = setTimeout(function () {
-                  Metamaps.Famous.toast.hide();
-              }, 8000);
-          }
-        }
-
-        // initialize the famous ui
-        var callFamous = function(){
-            if (Metamaps.Famous && Metamaps.Famous.toast) {
-                famousReady();
-            }
-            else {
-                setTimeout(callFamous, 100);
-            }
-        }
-        callFamous();
-    },
-    clearNotify: function() {
-        var self = Metamaps.GlobalUI;
-
-        clearTimeout(self.notifyTimeOut);
-        Metamaps.Famous.toast.hide();
-    },
-    shareInvite: function(inviteLink) {
-        window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
-    }
-};
-
-Metamaps.GlobalUI.CreateMap = {
-    newMap: null,
-    emptyMapForm: "",
-    emptyForkMapForm: "",
-    topicsToMap: [],
-    synapsesToMap: [],
-    init: function () {
-        var self = Metamaps.GlobalUI.CreateMap;
-
-        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
-
-        self.bindFormEvents();
-
-        self.emptyMapForm = $('#new_map').html();
-
-    },
-    bindFormEvents: function () {
-        var self = Metamaps.GlobalUI.CreateMap;
-
-        $('.new_map button.cancel').unbind().bind('click', function (event) {
-            event.preventDefault();
-            Metamaps.GlobalUI.closeLightbox();
-        });
-        $('.new_map button.submitMap').unbind().bind('click', self.submit);
-
-        // bind permission changer events on the createMap form
-        $('.permIcon').unbind().bind('click', self.switchPermission);
-    },
-    closeSuccess: function () {
-        $('#mapCreatedSuccess').fadeOut(300, function(){
-            $(this).remove();
-        });
-    },
-    generateSuccessMessage: function (id) {
-        var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/";
-        stringStart += id;
-        stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>";
-        stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this ";
-        var page = Metamaps.Active.Map ? 'map' : 'page';
-        var stringEnd = "</a></div>";
-        return stringStart + page + stringEnd;
-    },
-    switchPermission: function () {
-        var self = Metamaps.GlobalUI.CreateMap;
-
-        self.newMap.set('permission', $(this).attr('data-permission'));
-        $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
-        $(this).find('.mapPermIcon').addClass('selected');
-
-        var permText = $(this).find('.tip').html();
-        $(this).parents('.new_map').find('.permText').html(permText);
-    },
-    submit: function (event) {
-        if (event) event.preventDefault();
-
-        var self = Metamaps.GlobalUI.CreateMap;
-
-        if (Metamaps.GlobalUI.lightbox === 'forkmap') {
-            self.newMap.set('topicsToMap', self.topicsToMap);
-            self.newMap.set('synapsesToMap', self.synapsesToMap);
-        }
-
-        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
-        var $form = $(formId);
-
-        self.newMap.set('name', $form.find('#map_name').val());
-        self.newMap.set('desc', $form.find('#map_desc').val());
-
-        if (self.newMap.get('name').length===0){
-            self.throwMapNameError();
-            return;
-        }
-
-        self.newMap.save(null, {
-            success: self.success
-            // TODO add error message
-        });
-
-        Metamaps.GlobalUI.closeLightbox();
-        Metamaps.GlobalUI.notifyUser('Working...');
-    },
-    throwMapNameError: function () {
-        var self = Metamaps.GlobalUI.CreateMap;
-
-        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
-        var $form = $(formId);
-
-        var message = $("<div class='feedback_message'>Please enter a map name...</div>");
-
-        $form.find('#map_name').after(message);
-        setTimeout(function(){
-            message.fadeOut('fast', function(){
-                message.remove();
-            });
-        }, 5000);
-    },
-    success: function (model) {
-        var self = Metamaps.GlobalUI.CreateMap;
-
-        //push the new map onto the collection of 'my maps'
-        Metamaps.Maps.Mine.add(model);
-
-        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
-        var form = $(formId);
-
-        Metamaps.GlobalUI.clearNotify();
-        $('#wrapper').append(self.generateSuccessMessage(model.id));
-
-    },
-    reset: function (id) {
-        var self = Metamaps.GlobalUI.CreateMap;
-
-        var form = $('#' + id);
-
-        if (id === "fork_map") {
-            self.topicsToMap = [];
-            self.synapsesToMap = [];
-            form.html(self.emptyForkMapForm);
-        }
-        else {
-            form.html(self.emptyMapForm);
-        }
-
-        self.bindFormEvents();
-        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
-
-        return false;
-    },
-};
-
-
-Metamaps.GlobalUI.Account = {
-    isOpen: false,
-    changing: false,
-    init: function () {
-        var self = Metamaps.GlobalUI.Account;
-
-        $('.sidebarAccountIcon').click(self.toggleBox);
-        $('.sidebarAccountBox').click(function(event){
-            event.stopPropagation();
-        });
-        $('body').click(self.close);
-    },
-    toggleBox: function (event) {
-        var self = Metamaps.GlobalUI.Account;
-
-        if (self.isOpen) self.close();
-        else self.open();
-
-        event.stopPropagation();
-    },
-    open: function () {
-        var self = Metamaps.GlobalUI.Account;
-
-        Metamaps.Filter.close();
-        $('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
-
-
-        if (!self.isOpen && !self.changing) {
-            self.changing = true;
-            $('.sidebarAccountBox').fadeIn(200, function () {
-                self.changing = false;
-                self.isOpen = true;
-                $('.sidebarAccountBox #user_email').focus();
-            });
-        }
-    },
-    close: function () {
-        var self = Metamaps.GlobalUI.Account;
-
-        $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
-        if (!self.changing) {
-            self.changing = true;
-            $('.sidebarAccountBox #user_email').blur();
-            $('.sidebarAccountBox').fadeOut(200, function () {
-                self.changing = false;
-                self.isOpen = false;
-            });
-        }
-    }
-};
-
-
-
-Metamaps.GlobalUI.Search = {
-    locked: false,
-    isOpen: false,
-    timeOut: null,
-    changing: false,
-    optionsInitialized: false,
-    init: function () {
-        var self = Metamaps.GlobalUI.Search;
-
-        var loader = new CanvasLoader('searchLoading');
-        loader.setColor('#4fb5c0'); // default is '#000000'
-        loader.setDiameter(24); // default is 40
-        loader.setDensity(41); // default is 40
-        loader.setRange(0.9); // default is 1.3
-        loader.show(); // Hidden by default
-
-        // bind the hover events
-        $(".sidebarSearch").hover(function () {
-            self.open()
-        }, function () {
-            self.close(800, false)
-        });
-
-        $('.sidebarSearchIcon').click(function (e) {
-            $('.sidebarSearchField').focus();
-        });
-        $('.sidebarSearch').click(function (e) {
-            e.stopPropagation();
-        });
-        $('body').click(function (e) {
-            self.close(0, false);
-        });
-
-        // open if the search is closed and user hits ctrl+/
-        // close if they hit ESC
-        $('body').bind('keyup', function (e) {
-            switch (e.which) {
-            case 191:
-                if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
-                    self.open(true); // true for focus
-                }
-                break;
-            case 27:
-                if (self.isOpen) {
-                    self.close(0, true);
-                }
-                break;
-
-            default:
-                break; //console.log(e.which);
-            }
-        });
-
-        self.startTypeahead();
-    },
-    lock: function() {
-        var self = Metamaps.GlobalUI.Search;
-        self.locked = true;
-    },
-    unlock: function() {
-        var self = Metamaps.GlobalUI.Search;
-        self.locked = false;
-    },
-    open: function (focus) {
-        var self = Metamaps.GlobalUI.Search;
-
-        clearTimeout(self.timeOut);
-        if (!self.isOpen && !self.changing && !self.locked) {
-            self.changing = true;
-            $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
-                width: '400px'
-            }, 300, function () {
-                if (focus) $('.sidebarSearchField').focus();
-                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
-                    padding: '7px 10px 3px 10px',
-                    width: '380px'
-                });
-                self.changing = false;
-                self.isOpen = true;
-            });
-        }
-    },
-    close: function (closeAfter, bypass) {
-        var self = Metamaps.GlobalUI.Search;
-
-        self.timeOut = setTimeout(function () {
-            if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField').val() == '')) {
-                self.changing = true;
-                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
-                    padding: '7px 0 3px 0',
-                    width: '400px'
-                });
-                $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
-                    width: '0'
-                }, 300, function () {
-                    $('.sidebarSearchField').typeahead('val', '');
-                    $('.sidebarSearchField').blur();
-                    self.changing = false;
-                    self.isOpen = false;
-                });
-            }
-        }, closeAfter);
-    },
-    startTypeahead: function () {
-        var self = Metamaps.GlobalUI.Search;
-
-        var mapheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
-        var topicheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
-        var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';
-
-        var topics = {
-            name: 'topics',
-            limit: 9999,
-
-            display: function(s) { return s.label; },
-            templates: {
-                notFound: function(s) {
-                    return Hogan.compile($('#topicSearchTemplate').html()).render({
-                        value: "No results",
-                        label: "No results",
-                        typeImageURL: "<%= asset_path('icons/wildcard.png') %>",
-                        rtype: "noresult"
-                    });
-                },
-                header: topicheader,
-                suggestion: function(s) {
-                    return Hogan.compile($('#topicSearchTemplate').html()).render(s);
-                },
-            },
-            source: new Bloodhound({
-                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-                queryTokenizer: Bloodhound.tokenizers.whitespace,
-                remote: {
-                    url: '/search/topics',
-                    prepare: function(query, settings) {
-                        settings.url += '?term=' + query;
-                        if (Metamaps.Active.Mapper && $("#limitTopicsToMe").is(':checked')) {
-                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
-                        }
-                        return settings;
-                    },
-                },
-            }),
-        };
-
-        var maps = {
-            name: 'maps',
-            limit: 9999,
-            display: function(s) { return s.label; },
-            templates: {
-                notFound: function(s) {
-                    return Hogan.compile($('#mapSearchTemplate').html()).render({
-                        value: "No results",
-                        label: "No results",
-                        rtype: "noresult"
-                    });
-                },
-                header: mapheader,
-                suggestion: function(s) {
-                    return Hogan.compile($('#mapSearchTemplate').html()).render(s);
-                },
-            },
-            source: new Bloodhound({
-                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-                queryTokenizer: Bloodhound.tokenizers.whitespace,
-                remote: {
-                    url: '/search/maps',
-                    prepare: function(query, settings) {
-                        settings.url += '?term=' + query;
-                        if (Metamaps.Active.Mapper && $("#limitMapsToMe").is(':checked')) {
-                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
-                        }
-                        return settings;
-                    },
-                },
-            }),
-        };
-
-        var mappers = {
-            name: 'mappers',
-            limit: 9999,
-            display: function(s) { return s.label; },
-            templates: {
-                notFound: function(s) {
-                    return Hogan.compile($('#mapperSearchTemplate').html()).render({
-                        value: "No results",
-                        label: "No results",
-                        rtype: "noresult",
-                        profile: "<%= asset_path('user.png') %>",
-                    });
-                },
-                header: mapperheader,
-                suggestion: function(s) {
-                    return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
-                },
-            },
-            source: new Bloodhound({
-                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-                queryTokenizer: Bloodhound.tokenizers.whitespace,
-                remote: {
-                    url: '/search/mappers?term=%QUERY',
-                    wildcard: '%QUERY',
-                },
-            }),
-        };
-
-        // Take all that crazy setup data and put it together into one beautiful typeahead call!
-        $('.sidebarSearchField').typeahead(
-            {
-                highlight: true,
-            },
-            [topics, maps, mappers]
-        );
-
-        //Set max height of the search results box to prevent it from covering bottom left footer
-        $('.sidebarSearchField').bind('typeahead:render', function (event) {
-            self.initSearchOptions();
-            self.hideLoader();
-            var h = $(window).height();
-            $(".tt-dropdown-menu").css('max-height', h - 100);
-        });
-        $(window).resize(function () {
-            var h = $(window).height();
-            $(".tt-dropdown-menu").css('max-height', h - 100);
-        });
-
-        // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
-        $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
-
-        // don't do it, if they clicked on a 'addToMap' button
-        $('.sidebarSearch button.addToMap').click(function (event) {
-            event.stopPropagation();
-        });
-
-        // make sure that when you click on 'limit to me' or 'toggle section' it works
-        $('.sidebarSearchField').bind('typeahead:change', function(){
-            if ($(this).val() === "") {
-                self.hideLoader();
-            }
-            else {
-                self.showLoader();
-            }
-        });
-
-    },
-    handleResultClick: function (event, datum, dataset) {
-        var self = Metamaps.GlobalUI.Search;
-
-        self.hideLoader();
-
-        if (["topic", "map", "mapper"].indexOf(datum.rtype) !== -1) {
-            self.close(0, true);
-            var win;
-            if (datum.rtype == "topic") {
-                Metamaps.Router.topics(datum.id);
-            } else if (datum.rtype == "map") {
-                Metamaps.Router.maps(datum.id);
-            } else if (datum.rtype == "mapper") {
-                Metamaps.Router.explore("mapper", datum.id);
-            }
-        }
-    },
-    initSearchOptions: function () {
-        var self = Metamaps.GlobalUI.Search;
-
-        function toggleResultSet(set) {
-            var s = $('.tt-dataset-' + set + ' .tt-dataset');
-            if (s.css('height') == '0px') {
-                s.css({
-                    'height': 'auto',
-                    'overflow': 'visible'
-                });
-                $(this).removeClass('maximizeResults').addClass('minimizeResults');
-            } else {
-                s.css({
-                    'height': '0',
-                    'overflow': 'hidden'
-                });
-                $(this).removeClass('minimizeResults').addClass('maximizeResults');
-            }
-        }
-
-        $('.limitToMe').unbind().bind("change", function (e) {
-            // set the value of the search equal to itself to retrigger the autocomplete event
-            self.isOpen = false;
-            $('.sidebarSearchField').typeahead('val', $('.sidebarSearchField').val());
-            setTimeout(function () {
-                self.isOpen = true;
-            }, 2000);
-        });
-
-        // when the user clicks minimize section, hide the results for that section
-        $('.minimizeMapperResults').unbind().click(function (e) {
-            toggleResultSet.call(this, 'mappers');
-        });
-        $('.minimizeTopicResults').unbind().click(function (e) {
-            toggleResultSet.call(this, 'topics');
-        });
-        $('.minimizeMapResults').unbind().click(function (e) {
-            toggleResultSet.call(this, 'maps');
-        });
-    },
-    hideLoader: function () {
-        $('#searchLoading').hide();
-    },
-    showLoader: function () {
-        $('#searchLoading').show();
-    }
-};
+var Metamaps = {}; // this variable declaration defines a Javascript object that will contain all the variables and functions used by us, broken down into 'sub-modules' that look something like this
+/*
+
+* unless you are on a page with the Javascript InfoVis Toolkit (Topic or Map) the only section in the metamaps
+* object will be these
+GlobalUI
+Active
+Maps
+Mappers
+Backbone
+
+* all these get added when you are on a page with the Javascript Infovis Toolkit
+Settings
+Touch
+Mouse
+Selected
+Metacodes
+Topics
+Synapses
+Mappings
+Create
+TopicCard
+SynapseCard
+Visualize
+Util
+Realtime
+Control
+Filter
+Listeners
+Organize
+Map
+Mapper
+Topic
+Synapse
+JIT
+*/
+
+Metamaps.Active = {
+    Map: null,
+    Topic: null,
+    Mapper: null
+};
+Metamaps.Maps = {};
+
+$(document).ready(function () {
+
+    for (var prop in Metamaps) {
+
+        // this runs the init function within each sub-object on the Metamaps one
+        if (Metamaps.hasOwnProperty(prop) &&
+            Metamaps[prop].hasOwnProperty('init') &&
+            typeof (Metamaps[prop].init) == 'function'
+        ) {
+            Metamaps[prop].init();
+        }
+    }
+
+    // initialize the famous ui
+    var callFamous = function(){
+        if (Metamaps.Famous) {
+            Metamaps.Famous.build();
+        }
+        else {
+            setTimeout(callFamous, 100);
+        }
+    }
+    callFamous();
+});
+
+Metamaps.GlobalUI = {
+    notifyTimeout: null,
+    lightbox: null,
+    init: function () {
+        var self = Metamaps.GlobalUI;
+
+        self.Search.init();
+        self.CreateMap.init();
+        self.Account.init();
+
+        //bind lightbox clicks
+        $('.openLightbox').click(function (event) {
+            self.openLightbox($(this).attr('data-open'));
+            event.preventDefault();
+            return false;
+        });
+
+        $('#lightbox_screen, #lightbox_close').click(self.closeLightbox);
+
+        // initialize global backbone models and collections
+        if (Metamaps.Active.Mapper) Metamaps.Active.Mapper = new Metamaps.Backbone.Mapper(Metamaps.Active.Mapper);
+
+        var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
+        var mapperCollection = [];
+        var mapperOptionsObj = {id: 'mapper', sortBy: 'updated_at' };
+        if (Metamaps.Maps.Mapper) {
+            mapperCollection = Metamaps.Maps.Mapper.models;
+            mapperOptionsObj.mapperId = Metamaps.Maps.Mapper.id;
+        }
+        var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
+        var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
+        Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'updated_at' });
+        // 'Mapper' refers to another mapper
+        Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj);
+        Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'updated_at' });
+        Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
+    },
+    openLightbox: function (which) {
+        var self = Metamaps.GlobalUI;
+
+        $('.lightboxContent').hide();
+        $('#' + which).show();
+
+        self.lightbox = which;
+
+        $('#lightbox_overlay').show();
+
+        var heightOfContent = '-' + ($('#lightbox_main').height() / 2) + 'px';
+        // animate the content in from the bottom
+        $('#lightbox_main').animate({
+                'top': '50%',
+                'margin-top': heightOfContent
+        }, 200, 'easeOutCubic');
+
+        // fade the black overlay in
+        $('#lightbox_screen').animate({
+                    'opacity': '0.42'
+        }, 200);
+
+        if (which == "switchMetacodes") {
+            Metamaps.Create.isSwitchingSet = true;
+        }
+    },
+
+    closeLightbox: function (event) {
+        var self = Metamaps.GlobalUI;
+
+        if (event) event.preventDefault();
+
+        // animate the lightbox content offscreen
+        $('#lightbox_main').animate({
+                'top': '100%',
+                'margin-top': '0'
+        }, 200, 'easeInCubic');
+
+        // fade the black overlay out
+        $('#lightbox_screen').animate({
+                    'opacity': '0.0'
+        }, 200, function () {
+            $('#lightbox_overlay').hide();
+        });
+
+        if (self.lightbox === 'forkmap') Metamaps.GlobalUI.CreateMap.reset('fork_map');
+        if (self.lightbox === 'newmap') Metamaps.GlobalUI.CreateMap.reset('new_map');
+        if (Metamaps.Create && Metamaps.Create.isSwitchingSet) {
+            Metamaps.Create.cancelMetacodeSetSwitch();
+        }
+        self.lightbox = null;
+    },
+    notifyUser: function (message, leaveOpen) {
+        var self = Metamaps.GlobalUI;
+
+        function famousReady() {
+          Metamaps.Famous.toast.surf.setContent(message);
+          Metamaps.Famous.toast.show();
+          clearTimeout(self.notifyTimeOut);
+          if (!leaveOpen) {
+              self.notifyTimeOut = setTimeout(function () {
+                  Metamaps.Famous.toast.hide();
+              }, 8000);
+          }
+        }
+
+        // initialize the famous ui
+        var callFamous = function(){
+            if (Metamaps.Famous && Metamaps.Famous.toast) {
+                famousReady();
+            }
+            else {
+                setTimeout(callFamous, 100);
+            }
+        }
+        callFamous();
+    },
+    clearNotify: function() {
+        var self = Metamaps.GlobalUI;
+
+        clearTimeout(self.notifyTimeOut);
+        Metamaps.Famous.toast.hide();
+    },
+    shareInvite: function(inviteLink) {
+        window.prompt("To copy the invite link, press: Ctrl+C, Enter", inviteLink);
+    }
+};
+
+Metamaps.GlobalUI.CreateMap = {
+    newMap: null,
+    emptyMapForm: "",
+    emptyForkMapForm: "",
+    topicsToMap: [],
+    synapsesToMap: [],
+    init: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
+
+        self.bindFormEvents();
+
+        self.emptyMapForm = $('#new_map').html();
+
+    },
+    bindFormEvents: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        $('.new_map button.cancel').unbind().bind('click', function (event) {
+            event.preventDefault();
+            Metamaps.GlobalUI.closeLightbox();
+        });
+        $('.new_map button.submitMap').unbind().bind('click', self.submit);
+
+        // bind permission changer events on the createMap form
+        $('.permIcon').unbind().bind('click', self.switchPermission);
+    },
+    closeSuccess: function () {
+        $('#mapCreatedSuccess').fadeOut(300, function(){
+            $(this).remove();
+        });
+    },
+    generateSuccessMessage: function (id) {
+        var stringStart = "<div id='mapCreatedSuccess'><h6>SUCCESS!</h6>Your map has been created. Do you want to: <a id='mapGo' href='/maps/";
+        stringStart += id;
+        stringStart += "' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess();'>Go to your new map</a>";
+        stringStart += "<span>OR</span><a id='mapStay' href='#' onclick='Metamaps.GlobalUI.CreateMap.closeSuccess(); return false;'>Stay on this ";
+        var page = Metamaps.Active.Map ? 'map' : 'page';
+        var stringEnd = "</a></div>";
+        return stringStart + page + stringEnd;
+    },
+    switchPermission: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        self.newMap.set('permission', $(this).attr('data-permission'));
+        $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
+        $(this).find('.mapPermIcon').addClass('selected');
+
+        var permText = $(this).find('.tip').html();
+        $(this).parents('.new_map').find('.permText').html(permText);
+    },
+    submit: function (event) {
+        if (event) event.preventDefault();
+
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        if (Metamaps.GlobalUI.lightbox === 'forkmap') {
+            self.newMap.set('topicsToMap', self.topicsToMap);
+            self.newMap.set('synapsesToMap', self.synapsesToMap);
+        }
+
+        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
+        var $form = $(formId);
+
+        self.newMap.set('name', $form.find('#map_name').val());
+        self.newMap.set('desc', $form.find('#map_desc').val());
+
+        if (self.newMap.get('name').length===0){
+            self.throwMapNameError();
+            return;
+        }
+
+        self.newMap.save(null, {
+            success: self.success
+            // TODO add error message
+        });
+
+        Metamaps.GlobalUI.closeLightbox();
+        Metamaps.GlobalUI.notifyUser('Working...');
+    },
+    throwMapNameError: function () {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
+        var $form = $(formId);
+
+        var message = $("<div class='feedback_message'>Please enter a map name...</div>");
+
+        $form.find('#map_name').after(message);
+        setTimeout(function(){
+            message.fadeOut('fast', function(){
+                message.remove();
+            });
+        }, 5000);
+    },
+    success: function (model) {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        //push the new map onto the collection of 'my maps'
+        Metamaps.Maps.Mine.add(model);
+
+        var formId = Metamaps.GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map';
+        var form = $(formId);
+
+        Metamaps.GlobalUI.clearNotify();
+        $('#wrapper').append(self.generateSuccessMessage(model.id));
+
+    },
+    reset: function (id) {
+        var self = Metamaps.GlobalUI.CreateMap;
+
+        var form = $('#' + id);
+
+        if (id === "fork_map") {
+            self.topicsToMap = [];
+            self.synapsesToMap = [];
+            form.html(self.emptyForkMapForm);
+        }
+        else {
+            form.html(self.emptyMapForm);
+        }
+
+        self.bindFormEvents();
+        self.newMap = new Metamaps.Backbone.Map({ permission: 'commons' });
+
+        return false;
+    },
+};
+
+
+Metamaps.GlobalUI.Account = {
+    isOpen: false,
+    changing: false,
+    init: function () {
+        var self = Metamaps.GlobalUI.Account;
+
+        $('.sidebarAccountIcon').click(self.toggleBox);
+        $('.sidebarAccountBox').click(function(event){
+            event.stopPropagation();
+        });
+        $('body').click(self.close);
+    },
+    toggleBox: function (event) {
+        var self = Metamaps.GlobalUI.Account;
+
+        if (self.isOpen) self.close();
+        else self.open();
+
+        event.stopPropagation();
+    },
+    open: function () {
+        var self = Metamaps.GlobalUI.Account;
+
+        Metamaps.Filter.close();
+        $('.sidebarAccountIcon .tooltipsUnder').addClass('hide');
+
+
+        if (!self.isOpen && !self.changing) {
+            self.changing = true;
+            $('.sidebarAccountBox').fadeIn(200, function () {
+                self.changing = false;
+                self.isOpen = true;
+                $('.sidebarAccountBox #user_email').focus();
+            });
+        }
+    },
+    close: function () {
+        var self = Metamaps.GlobalUI.Account;
+
+        $('.sidebarAccountIcon .tooltipsUnder').removeClass('hide');
+        if (!self.changing) {
+            self.changing = true;
+            $('.sidebarAccountBox #user_email').blur();
+            $('.sidebarAccountBox').fadeOut(200, function () {
+                self.changing = false;
+                self.isOpen = false;
+            });
+        }
+    }
+};
+
+
+
+Metamaps.GlobalUI.Search = {
+    locked: false,
+    isOpen: false,
+    timeOut: null,
+    changing: false,
+    optionsInitialized: false,
+    init: function () {
+        var self = Metamaps.GlobalUI.Search;
+
+        var loader = new CanvasLoader('searchLoading');
+        loader.setColor('#4fb5c0'); // default is '#000000'
+        loader.setDiameter(24); // default is 40
+        loader.setDensity(41); // default is 40
+        loader.setRange(0.9); // default is 1.3
+        loader.show(); // Hidden by default
+
+        // bind the hover events
+        $(".sidebarSearch").hover(function () {
+            self.open()
+        }, function () {
+            self.close(800, false)
+        });
+
+        $('.sidebarSearchIcon').click(function (e) {
+            $('.sidebarSearchField').focus();
+        });
+        $('.sidebarSearch').click(function (e) {
+            e.stopPropagation();
+        });
+        $('body').click(function (e) {
+            self.close(0, false);
+        });
+
+        // open if the search is closed and user hits ctrl+/
+        // close if they hit ESC
+        $('body').bind('keyup', function (e) {
+            switch (e.which) {
+            case 191:
+                if ((e.ctrlKey && !self.isOpen) || (e.ctrlKey && self.locked)) {
+                    self.open(true); // true for focus
+                }
+                break;
+            case 27:
+                if (self.isOpen) {
+                    self.close(0, true);
+                }
+                break;
+
+            default:
+                break; //console.log(e.which);
+            }
+        });
+
+        self.startTypeahead();
+    },
+    lock: function() {
+        var self = Metamaps.GlobalUI.Search;
+        self.locked = true;
+    },
+    unlock: function() {
+        var self = Metamaps.GlobalUI.Search;
+        self.locked = false;
+    },
+    open: function (focus) {
+        var self = Metamaps.GlobalUI.Search;
+
+        clearTimeout(self.timeOut);
+        if (!self.isOpen && !self.changing && !self.locked) {
+            self.changing = true;
+            $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
+                width: '400px'
+            }, 300, function () {
+                if (focus) $('.sidebarSearchField').focus();
+                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
+                    padding: '7px 10px 3px 10px',
+                    width: '380px'
+                });
+                self.changing = false;
+                self.isOpen = true;
+            });
+        }
+    },
+    close: function (closeAfter, bypass) {
+        var self = Metamaps.GlobalUI.Search;
+
+        self.timeOut = setTimeout(function () {
+            if (!self.locked && !self.changing && self.isOpen && (bypass || $('.sidebarSearchField').val() == '')) {
+                self.changing = true;
+                $('.sidebarSearchField, .sidebarSearch .tt-hint').css({
+                    padding: '7px 0 3px 0',
+                    width: '400px'
+                });
+                $('.sidebarSearch .twitter-typeahead, .sidebarSearch .tt-hint, .sidebarSearchField').animate({
+                    width: '0'
+                }, 300, function () {
+                    $('.sidebarSearchField').typeahead('val', '');
+                    $('.sidebarSearchField').blur();
+                    self.changing = false;
+                    self.isOpen = false;
+                });
+            }
+        }, closeAfter);
+    },
+    startTypeahead: function () {
+        var self = Metamaps.GlobalUI.Search;
+
+        var mapheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
+        var topicheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
+        var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';
+
+        var topics = {
+            name: 'topics',
+            limit: 9999,
+
+            display: function(s) { return s.label; },
+            templates: {
+                notFound: function(s) {
+                    return Hogan.compile($('#topicSearchTemplate').html()).render({
+                        value: "No results",
+                        label: "No results",
+                        typeImageURL: "<%= asset_path('icons/wildcard.png') %>",
+                        rtype: "noresult"
+                    });
+                },
+                header: topicheader,
+                suggestion: function(s) {
+                    return Hogan.compile($('#topicSearchTemplate').html()).render(s);
+                },
+            },
+            source: new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/topics',
+                    prepare: function(query, settings) {
+                        settings.url += '?term=' + query;
+                        if (Metamaps.Active.Mapper && $("#limitTopicsToMe").is(':checked')) {
+                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
+                        }
+                        return settings;
+                    },
+                },
+            }),
+        };
+
+        var maps = {
+            name: 'maps',
+            limit: 9999,
+            display: function(s) { return s.label; },
+            templates: {
+                notFound: function(s) {
+                    return Hogan.compile($('#mapSearchTemplate').html()).render({
+                        value: "No results",
+                        label: "No results",
+                        rtype: "noresult"
+                    });
+                },
+                header: mapheader,
+                suggestion: function(s) {
+                    return Hogan.compile($('#mapSearchTemplate').html()).render(s);
+                },
+            },
+            source: new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/maps',
+                    prepare: function(query, settings) {
+                        settings.url += '?term=' + query;
+                        if (Metamaps.Active.Mapper && $("#limitMapsToMe").is(':checked')) {
+                            settings.url += "&user=" + Metamaps.Active.Mapper.id.toString();
+                        }
+                        return settings;
+                    },
+                },
+            }),
+        };
+
+        var mappers = {
+            name: 'mappers',
+            limit: 9999,
+            display: function(s) { return s.label; },
+            templates: {
+                notFound: function(s) {
+                    return Hogan.compile($('#mapperSearchTemplate').html()).render({
+                        value: "No results",
+                        label: "No results",
+                        rtype: "noresult",
+                        profile: "<%= asset_path('user.png') %>",
+                    });
+                },
+                header: mapperheader,
+                suggestion: function(s) {
+                    return Hogan.compile($('#mapperSearchTemplate').html()).render(s);
+                },
+            },
+            source: new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/mappers?term=%QUERY',
+                    wildcard: '%QUERY',
+                },
+            }),
+        };
+
+        // Take all that crazy setup data and put it together into one beautiful typeahead call!
+        $('.sidebarSearchField').typeahead(
+            {
+                highlight: true,
+            },
+            [topics, maps, mappers]
+        );
+
+        //Set max height of the search results box to prevent it from covering bottom left footer
+        $('.sidebarSearchField').bind('typeahead:render', function (event) {
+            self.initSearchOptions();
+            self.hideLoader();
+            var h = $(window).height();
+            $(".tt-dropdown-menu").css('max-height', h - 100);
+        });
+        $(window).resize(function () {
+            var h = $(window).height();
+            $(".tt-dropdown-menu").css('max-height', h - 100);
+        });
+
+        // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
+        $('.sidebarSearchField').bind('typeahead:select', self.handleResultClick);
+
+        // don't do it, if they clicked on a 'addToMap' button
+        $('.sidebarSearch button.addToMap').click(function (event) {
+            event.stopPropagation();
+        });
+
+        // make sure that when you click on 'limit to me' or 'toggle section' it works
+        $('.sidebarSearchField').bind('typeahead:change', function(){
+            if ($(this).val() === "") {
+                self.hideLoader();
+            }
+            else {
+                self.showLoader();
+            }
+        });
+
+    },
+    handleResultClick: function (event, datum, dataset) {
+        var self = Metamaps.GlobalUI.Search;
+
+        self.hideLoader();
+
+        if (["topic", "map", "mapper"].indexOf(datum.rtype) !== -1) {
+            self.close(0, true);
+            var win;
+            if (datum.rtype == "topic") {
+                Metamaps.Router.topics(datum.id);
+            } else if (datum.rtype == "map") {
+                Metamaps.Router.maps(datum.id);
+            } else if (datum.rtype == "mapper") {
+                Metamaps.Router.explore("mapper", datum.id);
+            }
+        }
+    },
+    initSearchOptions: function () {
+        var self = Metamaps.GlobalUI.Search;
+
+        function toggleResultSet(set) {
+            var s = $('.tt-dataset-' + set + ' .tt-dataset');
+            if (s.css('height') == '0px') {
+                s.css({
+                    'height': 'auto',
+                    'overflow': 'visible'
+                });
+                $(this).removeClass('maximizeResults').addClass('minimizeResults');
+            } else {
+                s.css({
+                    'height': '0',
+                    'overflow': 'hidden'
+                });
+                $(this).removeClass('minimizeResults').addClass('maximizeResults');
+            }
+        }
+
+        $('.limitToMe').unbind().bind("change", function (e) {
+            // set the value of the search equal to itself to retrigger the autocomplete event
+            self.isOpen = false;
+            $('.sidebarSearchField').typeahead('val', $('.sidebarSearchField').val());
+            setTimeout(function () {
+                self.isOpen = true;
+            }, 2000);
+        });
+
+        // when the user clicks minimize section, hide the results for that section
+        $('.minimizeMapperResults').unbind().click(function (e) {
+            toggleResultSet.call(this, 'mappers');
+        });
+        $('.minimizeTopicResults').unbind().click(function (e) {
+            toggleResultSet.call(this, 'topics');
+        });
+        $('.minimizeMapResults').unbind().click(function (e) {
+            toggleResultSet.call(this, 'maps');
+        });
+    },
+    hideLoader: function () {
+        $('#searchLoading').hide();
+    },
+    showLoader: function () {
+        $('#searchLoading').show();
+    }
+};
diff --git a/app/assets/javascripts/src/Metamaps.JIT.js.erb b/app/assets/javascripts/src/Metamaps.JIT.js.erb
index 38a2de5b..c34fcb6b 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js.erb
+++ b/app/assets/javascripts/src/Metamaps.JIT.js.erb
@@ -1,1950 +1,1950 @@
-Metamaps.JIT = {
-    events: {
-        topicDrag: 'Metamaps:JIT:events:topicDrag', 
-        newTopic: 'Metamaps:JIT:events:newTopic', 
-        deleteTopic: 'Metamaps:JIT:events:deleteTopic', 
-        removeTopic: 'Metamaps:JIT:events:removeTopic', 
-        newSynapse: 'Metamaps:JIT:events:newSynapse', 
-        deleteSynapse: 'Metamaps:JIT:events:deleteSynapse', 
-        removeSynapse: 'Metamaps:JIT:events:removeSynapse', 
-        pan: 'Metamaps:JIT:events:pan',
-        zoom: 'Metamaps:JIT:events:zoom',
-        animationDone: 'Metamaps:JIT:events:animationDone',
-    },
-    vizData: [], // contains the visualization-compatible graph
-    /**
-     * This method will bind the event handlers it is interested and initialize the class.
-     */
-    init: function () {
-        var self = Metamaps.JIT;
-
-        $(".zoomIn").click(self.zoomIn);
-        $(".zoomOut").click(self.zoomOut);
-
-        var zoomExtents = function (event) {
-            self.zoomExtents(event, Metamaps.Visualize.mGraph.canvas);
-        };
-        $(".zoomExtents").click(zoomExtents);
-
-        $(".takeScreenshot").click(Metamaps.Map.exportImage);
-
-        self.topicDescImage = new Image();
-        self.topicDescImage.src = '<%= asset_path('topic_description_signifier.png') %>';
-
-        self.topicLinkImage = new Image();
-        self.topicLinkImage.src = '<%= asset_path('topic_link_signifier.png') %>';
-    },
-    /**
-     * convert our topic JSON into something JIT can use
-     */
-    convertModelsToJIT: function(topics, synapses) {
-        var jitReady = [];
-
-        var synapsesToRemove = [];
-        var topic;
-        var mapping;
-        var node;
-        var nodes = {};
-        var existingEdge;
-        var edge;
-        var edges = [];
-
-        topics.each(function (t) {
-            node = t.createNode();
-            nodes[node.id] = node;
-        });
-        synapses.each(function (s) {
-            edge = s.createEdge();
-
-            if (topics.get(s.get('node1_id')) === undefined || topics.get(s.get('node2_id')) === undefined) {
-                // this means it's an invalid synapse
-                synapsesToRemove.push(s);
-            } 
-            else if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
-
-                existingEdge = _.findWhere(edges, {
-                    nodeFrom: edge.nodeFrom,
-                    nodeTo: edge.nodeTo
-                }) ||
-                    _.findWhere(edges, {
-                        nodeFrom: edge.nodeTo,
-                        nodeTo: edge.nodeFrom
-                    });
-
-                if (existingEdge) {
-                    // for when you're dealing with multiple relationships between the same two topics
-                    if (Metamaps.Active.Map) {
-                        mapping = s.getMapping();
-                        existingEdge.data['$mappingIDs'].push(mapping.id);
-                    }
-                    existingEdge.data['$synapseIDs'].push(s.id);
-                } else {
-                    // for when you're dealing with a topic that has relationships to many different nodes
-                    nodes[edge.nodeFrom].adjacencies.push(edge);
-                    edges.push(edge);
-                }
-            }
-        });
-
-        _.each(nodes, function (node) {
-            jitReady.push(node);
-        });
-
-        return [jitReady, synapsesToRemove];
-    },
-    prepareVizData: function () {
-        var self = Metamaps.JIT;
-        var mapping;
-
-        // reset/empty vizData
-        self.vizData = [];
-        Metamaps.Visualize.loadLater = false;
-
-        var results = self.convertModelsToJIT(Metamaps.Topics, Metamaps.Synapses);
-
-        self.vizData = results[0];
-
-        // clean up the synapses array in case of any faulty data
-        _.each(results[1], function (synapse) {
-            mapping = synapse.getMapping();
-            Metamaps.Synapses.remove(synapse);
-            Metamaps.Mappings.remove(mapping);
-        });
-
-        if (self.vizData.length == 0) {
-            Metamaps.Famous.viz.showInstructions();
-            Metamaps.Visualize.loadLater = true;
-        }
-        else Metamaps.Famous.viz.hideInstructions();
-
-        Metamaps.Visualize.render();
-    }, // prepareVizData
-    edgeRender: function (adj, canvas) {
-        //get nodes cartesian coordinates 
-        var pos = adj.nodeFrom.pos.getc(true);
-        var posChild = adj.nodeTo.pos.getc(true);
-
-        var synapse;
-        if(adj.getData("displayIndex")) {
-            synapse = adj.getData("synapses")[adj.getData("displayIndex")];
-            if (!synapse) {
-                delete adj.data.$displayIndex;
-                synapse = adj.getData("synapses")[0];
-            }
-        }
-        else {
-            synapse = adj.getData("synapses")[0];
-        }
-
-        if (!synapse) return; // this means there are no corresponding synapses for
-        // this edge, don't render it
-
-        var directionCat = synapse.get("category");
-
-        //label placement on edges
-        if (canvas.denySelected) {
-            var color = Metamaps.Settings.colors.synapses.normal;
-            canvas.getCtx().fillStyle = canvas.getCtx().strokeStyle = color;
-        }
-        Metamaps.JIT.renderEdgeArrows($jit.Graph.Plot.edgeHelper, adj, synapse, canvas);
-
-        //check for edge label in data  
-        var desc = synapse.get("desc");
-
-        var showDesc = adj.getData("showDesc");
-
-        var drawSynapseCount = function (context, x, y, count) {
-            /*
-            circle size: 16x16px
-            positioning: overlay and center on top right corner of synapse label - 8px left and 8px down
-            color: #dab539
-            border color: #424242
-            border size: 1.5px
-            font: DIN medium
-            font-size: 14pt
-            font-color: #424242
-            */
-            context.beginPath();
-            context.arc(x, y, 8, 0, 2 * Math.PI, false);
-            context.fillStyle = '#DAB539';
-            context.strokeStyle = '#424242';
-            context.lineWidth = 1.5;
-            context.closePath();
-            context.fill();
-            context.stroke();
-
-            // add the synapse count
-            context.fillStyle = '#424242';
-            context.textAlign = 'center';
-            context.font = '14px din-medium';
-
-            context.fillText(count, x, y + 5);
-        };
-
-        if (!canvas.denySelected && desc != "" && showDesc) {
-            // '&amp;' to '&'
-            desc = Metamaps.Util.decodeEntities(desc);
-
-            //now adjust the label placement 
-            var ctx = canvas.getCtx();
-            ctx.font = 'bold 14px arial';
-            ctx.fillStyle = '#FFF';
-            ctx.textBaseline = 'alphabetic';
-
-            var arrayOfLabelLines = Metamaps.Util.splitLine(desc, 30).split('\n');
-            var index, lineWidths = [];
-            for (index = 0; index < arrayOfLabelLines.length; ++index) {
-                lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
-            }
-            var width = Math.max.apply(null, lineWidths) + 16;
-            var height = (16 * arrayOfLabelLines.length) + 8;
-
-            var x = (pos.x + posChild.x - width) / 2;
-            var y = ((pos.y + posChild.y) / 2) - height / 2;
-
-            var radius = 5;
-
-            //render background
-            ctx.beginPath();
-            ctx.moveTo(x + radius, y);
-            ctx.lineTo(x + width - radius, y);
-            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-            ctx.lineTo(x + width, y + height - radius);
-            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-            ctx.lineTo(x + radius, y + height);
-            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-            ctx.lineTo(x, y + radius);
-            ctx.quadraticCurveTo(x, y, x + radius, y);
-            ctx.closePath();
-            ctx.fill();
-
-            // get number of synapses
-            var synapseNum = adj.getData("synapses").length;
-
-            //render text
-            ctx.fillStyle = '#424242';
-            ctx.textAlign = 'center';
-            for (index = 0; index < arrayOfLabelLines.length; ++index) {
-                ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 18 + (16 * index));
-            }
-
-            if (synapseNum > 1) {
-                drawSynapseCount(ctx, x + width, y, synapseNum);
-            }
-        }
-        else if (!canvas.denySelected && showDesc) {
-            // get number of synapses
-            var synapseNum = adj.getData("synapses").length;
-
-            if (synapseNum > 1) {
-                var ctx = canvas.getCtx();
-                var x = (pos.x + posChild.x) / 2;
-                var y = (pos.y + posChild.y) / 2;
-                drawSynapseCount(ctx, x, y, synapseNum);
-            }
-        }
-
-    }, // edgeRender
-    ForceDirected: {
-        animateSavedLayout: {
-            modes: ['linear'],
-            transition: $jit.Trans.Quad.easeInOut,
-            duration: 800,
-            onComplete: function () {
-                Metamaps.Visualize.mGraph.busy = false;
-                $(document).trigger(Metamaps.JIT.events.animationDone);
-            }
-        },
-        animateFDLayout: {
-            modes: ['linear'],
-            transition: $jit.Trans.Elastic.easeOut,
-            duration: 800,
-            onComplete: function () {
-                Metamaps.Visualize.mGraph.busy = false;
-            }
-        },
-        graphSettings: {
-            //id of the visualization container
-            injectInto: 'infovis',
-            //Enable zooming and panning
-            //by scrolling and DnD
-            Navigation: {
-                enable: true,
-                //Enable panning events only if we're dragging the empty
-                //canvas (and not a node).
-                panning: 'avoid nodes',
-                zooming: 28 //zoom speed. higher is more sensible
-            },
-            //background: {
-            //    type: 'Metamaps'
-            //},
-            //NodeStyles: {  
-            //  enable: true,  
-            //  type: 'Native',  
-            //  stylesHover: {  
-            //    dim: 30  
-            //  },  
-            //  duration: 300  
-            //},
-            // Change node and edge styles such as
-            // color and width.
-            // These properties are also set per node
-            // with dollar prefixed data-properties in the
-            // JSON structure.
-            Node: {
-                overridable: true,
-                color: '#2D6A5D',
-                type: 'customNode',
-                dim: 25
-            },
-            Edge: {
-                overridable: true,
-                color: Metamaps.Settings.colors.synapses.normal,
-                type: 'customEdge',
-                lineWidth: 2,
-                alpha: 1
-            },
-            //Native canvas text styling
-            Label: {
-                type: 'Native', //Native or HTML
-                size: 20,
-                family: 'arial',
-                textBaseline: 'alphabetic',
-                color: Metamaps.Settings.colors.labels.text
-            },
-            //Add Tips
-            Tips: {
-                enable: false,
-                onShow: function (tip, node) {}
-            },
-            // Add node events
-            Events: {
-                enable: true,
-                enableForEdges: true,
-                onMouseMove: function (node, eventInfo, e) {
-                    Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e);
-                    //console.log('called mouse move handler');
-                },
-                //Update node positions when dragged
-                onDragMove: function (node, eventInfo, e) {
-                    Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e);
-                    //console.log('called drag move handler');
-                },
-                onDragEnd: function (node, eventInfo, e) {
-                    Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false);
-                    //console.log('called drag end handler');
-                },
-                onDragCancel: function (node, eventInfo, e) {
-                    Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false);
-                },
-                //Implement the same handler for touchscreens
-                onTouchStart: function (node, eventInfo, e) {
-                    //$jit.util.event.stop(e); //stop default touchmove event
-                    //Metamaps.Visualize.mGraph.events.onMouseDown(e, null, eventInfo);
-                    Metamaps.Visualize.mGraph.events.touched = true;
-                    Metamaps.Touch.touchPos = eventInfo.getPos();
-                    var canvas = Metamaps.Visualize.mGraph.canvas,
-                        ox = canvas.translateOffsetX;
-                    oy = canvas.translateOffsetY,
-                    sx = canvas.scaleOffsetX,
-                    sy = canvas.scaleOffsetY;
-                    Metamaps.Touch.touchPos.x *= sx;
-                    Metamaps.Touch.touchPos.y *= sy;
-                    Metamaps.Touch.touchPos.x += ox;
-                    Metamaps.Touch.touchPos.y += oy;
-
-                    touchDragNode = node;
-                },
-                //Implement the same handler for touchscreens
-                onTouchMove: function (node, eventInfo, e) {
-                    if (Metamaps.Touch.touchDragNode) Metamaps.JIT.onDragMoveTopicHandler(Metamaps.Touch.touchDragNode, eventInfo, e);
-                    else {
-                        Metamaps.JIT.touchPanZoomHandler(eventInfo, e);
-                    }
-                },
-                //Implement the same handler for touchscreens
-                onTouchEnd: function (node, eventInfo, e) {
-
-                },
-                //Implement the same handler for touchscreens
-                onTouchCancel: function (node, eventInfo, e) {
-
-                },
-                //Add also a click handler to nodes
-                onClick: function (node, eventInfo, e) {
-
-                    // remove the rightclickmenu
-                    $('.rightclickmenu').remove();
-
-                    if (Metamaps.Mouse.boxStartCoordinates) {
-                        if(e.ctrlKey){
-                            Metamaps.Visualize.mGraph.busy = false;
-                            Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
-
-                            var bS = Metamaps.Mouse.boxStartCoordinates;
-                            var bE = Metamaps.Mouse.boxEndCoordinates;
-                            if (Math.abs(bS.x - bE.x) > 20 && Math.abs(bS.y - bE.y) > 20) {
-                                Metamaps.JIT.zoomToBox(e);
-                                return;
-                            }
-                            else {
-                                Metamaps.Mouse.boxStartCoordinates = null;
-                                Metamaps.Mouse.boxEndCoordinates = null;
-                            }
-                            //console.log('called zoom to box');
-                        }
-                        
-                        if (e.shiftKey) {
-                            Metamaps.Visualize.mGraph.busy = false;
-                            Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
-                            Metamaps.JIT.selectWithBox(e);
-                            //console.log('called select with box');
-                            return;
-                        };
-                    }
-
-                    if (e.target.id != "infovis-canvas") return false;
-
-                    //clicking on a edge, node, or clicking on blank part of canvas?
-                    if (node.nodeFrom) {
-                        Metamaps.JIT.selectEdgeOnClickHandler(node, e);
-                        //console.log('called selectEdgeOnClickHandler');
-                    } else if (node && !node.nodeFrom) {
-                        Metamaps.JIT.selectNodeOnClickHandler(node, e);
-                        //console.log('called selectNodeOnClickHandler');
-                    } else {
-                        Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e);
-                        //console.log('called canvasClickHandler');
-                    } //if
-                },
-                //Add also a click handler to nodes
-                onRightClick: function (node, eventInfo, e) {
-
-                    // remove the rightclickmenu
-                    $('.rightclickmenu').remove();
-
-                    if (Metamaps.Mouse.boxStartCoordinates) {
-                        Metamaps.Visualize.mGraph.busy = false;
-                        Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
-                        Metamaps.JIT.selectWithBox(e);
-                        return;
-                    }
-
-                    if (e.target.id != "infovis-canvas") return false;
-
-                    //clicking on a edge, node, or clicking on blank part of canvas?
-                    if (node.nodeFrom) {
-                        Metamaps.JIT.selectEdgeOnRightClickHandler(node, e);
-                    } else if (node && !node.nodeFrom) {
-                        Metamaps.JIT.selectNodeOnRightClickHandler(node, e);
-                    } else {
-                        //console.log('right clicked on open space');
-                    } 
-                }
-            },
-            //Number of iterations for the FD algorithm
-            iterations: 200,
-            //Edge length
-            levelDistance: 200,
-        },
-        nodeSettings: {
-            'customNode': {
-                'render': function (node, canvas) {
-                    var pos = node.pos.getc(true),
-                        dim = node.getData('dim'),
-                        topic = node.getData('topic'),
-                        metacode = topic ? topic.getMetacode() : false,
-                        ctx = canvas.getCtx();
-
-                    // if the topic is selected draw a circle around it
-                    if (!canvas.denySelected && node.selected) {
-                        ctx.beginPath();
-                        ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false);
-                        ctx.strokeStyle = Metamaps.Settings.colors.topics.selected;
-                        ctx.lineWidth = 2;
-                        ctx.stroke();
-                    }
-
-                    if (!metacode ||
-                        !metacode.get('image') ||
-                        !metacode.get('image').complete ||
-                        (typeof metacode.get('image').naturalWidth !== "undefined" &&
-                            metacode.get('image').naturalWidth === 0)) {
-                        ctx.beginPath();
-                        ctx.arc(pos.x, pos.y, dim, 0, 2 * Math.PI, false);
-                        ctx.fillStyle = '#B6B2FD';
-                        ctx.fill();
-                    } else {
-                        ctx.drawImage(metacode.get('image'), pos.x - dim, pos.y - dim, dim * 2, dim * 2);
-                    }
-
-                    // if the topic has a link, draw a small image to indicate that
-                    var hasLink = topic && topic.get('link') !== "" && topic.get('link') !== null;
-                    var linkImage = Metamaps.JIT.topicLinkImage;
-                    var linkImageLoaded = linkImage.complete ||
-                        (typeof linkImage.naturalWidth !== "undefined" &&
-                            linkImage.naturalWidth !== 0)
-                    if (hasLink && linkImageLoaded) {
-                        ctx.drawImage(linkImage, pos.x - dim - 8, pos.y - dim - 8, 16, 16);
-                    }
-
-                    // if the topic has a desc, draw a small image to indicate that
-                    var hasDesc = topic && topic.get('desc') !== "" && topic.get('desc') !== null;
-                    var descImage = Metamaps.JIT.topicDescImage;
-                    var descImageLoaded = descImage.complete ||
-                        (typeof descImage.naturalWidth !== "undefined" &&
-                            descImage.naturalWidth !== 0)
-                    if (hasDesc && descImageLoaded) {
-                        ctx.drawImage(descImage, pos.x + dim - 8, pos.y - dim - 8, 16, 16);
-                    }
-                },
-                'contains': function (node, pos) {
-                    var npos = node.pos.getc(true),
-                        dim = node.getData('dim'),
-                        arrayOfLabelLines = Metamaps.Util.splitLine(node.name, 30).split('\n'),
-                        ctx = Metamaps.Visualize.mGraph.canvas.getCtx();
-
-                    var height = 25 * arrayOfLabelLines.length;
-
-                    var index, lineWidths = [];
-                    for (index = 0; index < arrayOfLabelLines.length; ++index) {
-                        lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
-                    }
-                    var width = Math.max.apply(null, lineWidths) + 8;
-                    var labely = npos.y + node.getData("height") + 5 + height / 2;
-
-                    var overLabel = this.nodeHelper.rectangle.contains({
-                        x: npos.x,
-                        y: labely
-                    }, pos, width, height);
-
-                    return this.nodeHelper.circle.contains(npos, pos, dim) || overLabel;
-                }
-            }
-        },
-        edgeSettings: {
-            'customEdge': {
-                'render': function (adj, canvas) {
-                    Metamaps.JIT.edgeRender(adj, canvas)
-                },
-                'contains': function (adj, pos) {
-                    var from = adj.nodeFrom.pos.getc(),
-                        to = adj.nodeTo.pos.getc();
-                    
-                    // this fixes an issue where when edges are perfectly horizontal or perfectly vertical
-                    // it becomes incredibly difficult to hover over them
-                    if (-1 < pos.x && pos.x < 1) pos.x = 0;
-                    if (-1 < pos.y && pos.y < 1) pos.y = 0;
-                    
-                    return $jit.Graph.Plot.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon + 5);
-                }
-            }
-        }
-    }, // ForceDirected
-    ForceDirected3D: {
-        animate: {
-            modes: ['linear'],
-            transition: $jit.Trans.Elastic.easeOut,
-            duration: 2500,
-            onComplete: function () {
-                Metamaps.Visualize.mGraph.busy = false;
-            }
-        },
-        graphSettings: {
-            //id of the visualization container
-            injectInto: 'infovis',
-            type: '3D',
-            Scene: {
-                Lighting: {
-                    enable: false,
-                    ambient: [0.5, 0.5, 0.5],
-                    directional: {
-                        direction: {
-                            x: 1,
-                            y: 0,
-                            z: -1
-                        },
-                        color: [0.9, 0.9, 0.9]
-                    }
-                }
-            },
-            //Enable zooming and panning
-            //by scrolling and DnD
-            Navigation: {
-                enable: false,
-                //Enable panning events only if we're dragging the empty
-                //canvas (and not a node).
-                panning: 'avoid nodes',
-                zooming: 10 //zoom speed. higher is more sensible
-            },
-            // Change node and edge styles such as
-            // color and width.
-            // These properties are also set per node
-            // with dollar prefixed data-properties in the
-            // JSON structure.
-            Node: {
-                overridable: true,
-                type: 'sphere',
-                dim: 15,
-                color: '#ffffff'
-            },
-            Edge: {
-                overridable: false,
-                type: 'tube',
-                color: '#111',
-                lineWidth: 3
-            },
-            //Native canvas text styling
-            Label: {
-                type: 'HTML', //Native or HTML
-                size: 10,
-                style: 'bold'
-            },
-            // Add node events
-            Events: {
-                enable: true,
-                type: 'Native',
-                i: 0,
-                onMouseMove: function (node, eventInfo, e) {
-                    //if(this.i++ % 3) return;
-                    var pos = eventInfo.getPos();
-                    Metamaps.Visualize.cameraPosition.x += (pos.x - Metamaps.Visualize.cameraPosition.x) * 0.5;
-                    Metamaps.Visualize.cameraPosition.y += (-pos.y - Metamaps.Visualize.cameraPosition.y) * 0.5;
-                    Metamaps.Visualize.mGraph.plot();
-                },
-                onMouseWheel: function (delta) {
-                    Metamaps.Visualize.cameraPosition.z += -delta * 20;
-                    Metamaps.Visualize.mGraph.plot();
-                },
-                onClick: function () {}
-            },
-            //Number of iterations for the FD algorithm
-            iterations: 200,
-            //Edge length
-            levelDistance: 100
-        },
-        nodeSettings: {
-
-        },
-        edgeSettings: {
-
-        }
-    }, // ForceDirected3D
-    RGraph: {
-        animate: {
-            modes: ['polar'],
-            duration: 800,
-            onComplete: function () {
-                Metamaps.Visualize.mGraph.busy = false;
-            }
-        },
-        // this will just be used to patch the ForceDirected graphsettings with the few things which actually differ
-        background: {
-                //type: 'Metamaps',
-                levelDistance: 200,
-                numberOfCircles: 4,
-                CanvasStyles: {
-                    strokeStyle: '#333',
-                    lineWidth: 1.5
-                }
-        },
-        levelDistance: 200
-    },
-    onMouseEnter: function (edge) {
-        var filtered = edge.getData('alpha') === 0;
-
-        // don't do anything if the edge is filtered
-        // or if the canvas is animating        
-        if (filtered || Metamaps.Visualize.mGraph.busy) return; 
-
-        $('canvas').css('cursor', 'pointer');
-        var edgeIsSelected = Metamaps.Selected.Edges.indexOf(edge);
-        //following if statement only executes if the edge being hovered over is not selected
-        if (edgeIsSelected == -1) {
-            edge.setData('showDesc', true, 'current');
-        }
-
-        edge.setDataset('end', {
-            lineWidth: 4
-        });
-        Metamaps.Visualize.mGraph.fx.animate({
-            modes: ['edge-property:lineWidth'],
-            duration: 100
-        });
-        Metamaps.Visualize.mGraph.plot();
-    }, // onMouseEnter
-    onMouseLeave: function (edge) {
-        if (edge.getData('alpha') === 0) return; // don't do anything if the edge is filtered
-        $('canvas').css('cursor', 'default');
-        var edgeIsSelected = Metamaps.Selected.Edges.indexOf(edge);
-        //following if statement only executes if the edge being hovered over is not selected
-        if (edgeIsSelected == -1) {
-            edge.setData('showDesc', false, 'current');
-        }
-
-        edge.setDataset('end', {
-            lineWidth: 2
-        });
-        Metamaps.Visualize.mGraph.fx.animate({
-            modes: ['edge-property:lineWidth'],
-            duration: 100
-        });
-        Metamaps.Visualize.mGraph.plot();
-    }, // onMouseLeave
-    onMouseMoveHandler: function (node, eventInfo, e) {
-
-        var self = Metamaps.JIT;
-
-        if (Metamaps.Visualize.mGraph.busy) return;
-
-        var node = eventInfo.getNode();
-        var edge = eventInfo.getEdge();
-
-        //if we're on top of a node object, act like there aren't edges under it
-        if (node != false) {
-            if (Metamaps.Mouse.edgeHoveringOver) {
-                self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver);
-            }
-            $('canvas').css('cursor', 'pointer');
-            return;
-        }
-
-        if (edge == false && Metamaps.Mouse.edgeHoveringOver != false) {
-            //mouse not on an edge, but we were on an edge previously
-            self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver);
-        } else if (edge != false && Metamaps.Mouse.edgeHoveringOver == false) {
-            //mouse is on an edge, but there isn't a stored edge
-            self.onMouseEnter(edge);
-        } else if (edge != false && Metamaps.Mouse.edgeHoveringOver != edge) {
-            //mouse is on an edge, but a different edge is stored
-            self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver)
-            self.onMouseEnter(edge);
-        }
-
-        //could be false
-        Metamaps.Mouse.edgeHoveringOver = edge;
-
-        if (!node && !edge) {
-            $('canvas').css('cursor', 'default');
-        }
-    }, // onMouseMoveHandler
-    enterKeyHandler: function () {
-        var creatingMap = Metamaps.GlobalUI.lightbox;
-        if (creatingMap === "newmap" || creatingMap === "forkmap") {
-            Metamaps.GlobalUI.CreateMap.submit();
-        }
-        // this is to submit new topic creation
-        else if (Metamaps.Create.newTopic.beingCreated) {
-            Metamaps.Topic.createTopicLocally();
-        }
-        // to submit new synapse creation 
-        else if (Metamaps.Create.newSynapse.beingCreated) {
-            Metamaps.Synapse.createSynapseLocally();
-        }
-    }, //enterKeyHandler
-    escKeyHandler: function () {
-        Metamaps.Control.deselectAllEdges();
-        Metamaps.Control.deselectAllNodes();
-    }, //escKeyHandler
-    touchPanZoomHandler: function (eventInfo, e) {
-        if (e.touches.length == 1) {
-            var thispos = Metamaps.Touch.touchPos,
-                currentPos = eventInfo.getPos(),
-                canvas = Metamaps.Visualize.mGraph.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;
-            var x = currentPos.x - thispos.x,
-                y = currentPos.y - thispos.y;
-            Metamaps.Touch.touchPos = currentPos;
-            Metamaps.Visualize.mGraph.canvas.translate(x * 1 / sx, y * 1 / sy);
-        } else if (e.touches.length == 2) {
-            var touch1 = e.touches[0];
-            var touch2 = e.touches[1];
-
-            var dist = Metamaps.Util.getDistance({
-                x: touch1.clientX,
-                y: touch1.clientY
-            }, {
-                x: touch2.clientX,
-                y: touch2.clientY
-            });
-
-            if (!lastDist) {
-                lastDist = dist;
-            }
-
-            var scale = dist / lastDist;
-
-            if (8 >= Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale && Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale >= 1) {
-                Metamaps.Visualize.mGraph.canvas.scale(scale, scale);
-            }
-            if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX < 0.5) {
-                Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(true);
-            } else if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX > 0.5) {
-                Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(false);
-            }
-            lastDist = dist;
-        }
-
-    }, // touchPanZoomHandler
-    onDragMoveTopicHandler: function (node, eventInfo, e) {
-
-        var self = Metamaps.JIT;
-
-        // this is used to send nodes that are moving to 
-        // other realtime collaborators on the same map
-        var positionsToSend = {};
-        var topic;
-
-        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (node && !node.nodeFrom) {
-            var pos = eventInfo.getPos();
-            // if it's a left click, or a touch, move the node
-            if (e.touches || (e.button == 0 && !e.altKey && !e.ctrlKey && !e.shiftKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
-                //if the node dragged isn't already selected, select it
-                var whatToDo = self.handleSelectionBeforeDragging(node, e);
-                if (node.pos.rho || node.pos.rho === 0) {
-                    // this means we're in topic view
-                    var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
-                    var theta = Math.atan2(pos.y, pos.x);
-                    node.pos.setp(theta, rho);
-                } else if (whatToDo == 'only-drag-this-one') {
-                    node.pos.setc(pos.x, pos.y);
-
-                    if (Metamaps.Active.Map) {
-                        topic = node.getData('topic');
-                        // we use the topic ID not the node id
-                        // because we can't depend on the node id
-                        // to be the same as on other collaborators
-                        // maps
-                        positionsToSend[topic.id] = pos;
-                        $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]);
-                    }
-                } else {
-                    var len = Metamaps.Selected.Nodes.length;
-
-                    //first define offset for each node
-                    var xOffset = new Array();
-                    var yOffset = new Array();
-                    for (var i = 0; i < len; i += 1) {
-                        var n = Metamaps.Selected.Nodes[i];
-                        xOffset[i] = n.pos.x - node.pos.x;
-                        yOffset[i] = n.pos.y - node.pos.y;
-                    } //for
-
-                    for (var i = 0; i < len; i += 1) {
-                        var n = Metamaps.Selected.Nodes[i];
-                        var x = pos.x + xOffset[i];
-                        var y = pos.y + yOffset[i];
-                        n.pos.setc(x, y);
-
-                        if (Metamaps.Active.Map) {
-                            topic = n.getData('topic');
-                            // we use the topic ID not the node id
-                            // because we can't depend on the node id
-                            // to be the same as on other collaborators
-                            // maps
-                            positionsToSend[topic.id] = n.pos;
-                        }
-                    } //for
-
-                    if (Metamaps.Active.Map) {
-                        $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]);
-                    }
-                } //if
-
-                if (whatToDo == 'deselect') {
-                    Metamaps.Control.deselectNode(node);
-                }
-                Metamaps.Visualize.mGraph.plot();
-            }
-            // if it's a right click or holding down alt, start synapse creation  ->third option is for firefox
-            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && authorized) {
-                if (tempInit == false) {
-                    tempNode = node;
-                    tempInit = true;
-
-                    Metamaps.Create.newTopic.hide();
-                    Metamaps.Create.newSynapse.hide();
-                    // set the draw synapse start positions
-                    var l = Metamaps.Selected.Nodes.length;
-                    if (l > 0) {
-                        for (var i = l - 1; i >= 0; i -= 1) {
-                            var n = Metamaps.Selected.Nodes[i];
-                            Metamaps.Mouse.synapseStartCoordinates.push({
-                                x: n.pos.getc().x,
-                                y: n.pos.getc().y
-                            });
-                        }
-                    } else {
-                        Metamaps.Mouse.synapseStartCoordinates = [{
-                            x: tempNode.pos.getc().x,
-                            y: tempNode.pos.getc().y
-                        }];
-                    }
-                    Metamaps.Mouse.synapseEndCoordinates = {
-                        x: pos.x,
-                        y: pos.y
-                    };
-                }
-                //
-                temp = eventInfo.getNode();
-                if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned
-                    tempNode2 = temp;
-                    
-                    Metamaps.Mouse.synapseEndCoordinates = {
-                        x: tempNode2.pos.getc().x,
-                        y: tempNode2.pos.getc().y
-                    };
-
-                    // before making the highlighted one bigger, make sure all the others are regular size
-                    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-                        n.setData('dim', 25, 'current');
-                    });
-                    temp.setData('dim', 35, 'current');
-                    Metamaps.Visualize.mGraph.plot();
-                } else if (!temp) {
-                    tempNode2 = null;
-                    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-                        n.setData('dim', 25, 'current');
-                    });
-                    //pop up node creation :)
-                    var myX = e.clientX - 110;
-                    var myY = e.clientY - 30;
-                    $('#new_topic').css('left', myX + "px");
-                    $('#new_topic').css('top', myY + "px");
-                    Metamaps.Create.newTopic.x = eventInfo.getPos().x;
-                    Metamaps.Create.newTopic.y = eventInfo.getPos().y;
-                    Metamaps.Visualize.mGraph.plot();
-
-                    Metamaps.Mouse.synapseEndCoordinates = {
-                        x: pos.x,
-                        y: pos.y
-                    };
-                }
-            }
-            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && Metamaps.Active.Topic) {
-                Metamaps.GlobalUI.notifyUser("Cannot create in Topic view.");
-            }
-            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && !authorized) {
-                Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            }
-        }
-    }, // onDragMoveTopicHandler
-    onDragCancelHandler: function (node, eventInfo, e) {
-        tempNode = null;
-        if (tempNode2) tempNode2.setData('dim', 25, 'current');
-        tempNode2 = null;
-        tempInit = false;
-        // reset the draw synapse positions to false
-        Metamaps.Mouse.synapseStartCoordinates = [];
-        Metamaps.Mouse.synapseEndCoordinates = null;
-        Metamaps.Visualize.mGraph.plot();
-    }, // onDragCancelHandler
-    onDragEndTopicHandler: function (node, eventInfo, e) {
-        var midpoint = {}, pixelPos, mapping;
-
-        if (tempInit && tempNode2 == null) {
-            // this means you want to add a new topic, and then a synapse
-            Metamaps.Create.newTopic.addSynapse = true;
-            Metamaps.Create.newTopic.open();
-        } else if (tempInit && tempNode2 != null) {
-            // this means you want to create a synapse between two existing topics
-            Metamaps.Create.newTopic.addSynapse = false;
-            Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
-            Metamaps.Create.newSynapse.topic2id = tempNode2.getData('topic').id;
-            tempNode2.setData('dim', 25, 'current');
-            Metamaps.Visualize.mGraph.plot();
-            midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2;
-            midpoint.y = tempNode.pos.getc().y + (tempNode2.pos.getc().y - tempNode.pos.getc().y) / 2;
-            pixelPos = Metamaps.Util.coordsToPixels(midpoint);
-            $('#new_synapse').css('left', pixelPos.x + "px");
-            $('#new_synapse').css('top', pixelPos.y + "px");
-            Metamaps.Create.newSynapse.open();
-            tempNode = null;
-            tempNode2 = null;
-            tempInit = false;
-        } else if (!tempInit && node && !node.nodeFrom) {
-            // this means you dragged an existing node, autosave that to the database
-
-            // check whether to save mappings
-            var checkWhetherToSave = function() {
-                var map = Metamaps.Active.Map;
-
-                if (!map) return false;
-
-                var mapper = Metamaps.Active.Mapper;
-                // this case
-                // covers when it is a public map owned by you
-                // and also when it's a private map
-                var activeMappersMap = map.authorizePermissionChange(mapper); 
-                var commonsMap = map.get('permission') === 'commons';
-                var realtimeOn = Metamaps.Realtime.status;
-
-                // don't save if commons map, and you have realtime off, 
-                // even if you're map creator
-                return map && mapper && ((commonsMap && realtimeOn) || (activeMappersMap && !commonsMap));
-            }
-
-            if (checkWhetherToSave()) {
-                mapping = node.getData('mapping');
-                mapping.save({
-                    xloc: node.getPos().x,
-                    yloc: node.getPos().y
-                });
-                // also save any other selected nodes that also got dragged along
-                var l = Metamaps.Selected.Nodes.length;
-                for (var i = l - 1; i >= 0; i -= 1) {
-                    var n = Metamaps.Selected.Nodes[i];
-                    if (n !== node) {
-                        mapping = n.getData('mapping');
-                        mapping.save({
-                            xloc: n.getPos().x,
-                            yloc: n.getPos().y
-                        });
-                    }
-                };
-            }
-        }
-    }, //onDragEndTopicHandler
-    canvasClickHandler: function (canvasLoc, e) {
-        //grab the location and timestamp of the click 
-        var storedTime = Metamaps.Mouse.lastCanvasClick;
-        var now = Date.now(); //not compatible with IE8 FYI 
-        Metamaps.Mouse.lastCanvasClick = now;
-
-        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE && !Metamaps.Mouse.didPan) {
-            if (Metamaps.Active.Map && !authorized) {
-                Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-                return;
-            }
-            else if (Metamaps.Active.Topic) {
-                Metamaps.GlobalUI.notifyUser("Cannot create in Topic view.");
-                return;
-            }
-            // DOUBLE CLICK
-            //pop up node creation :) 
-            Metamaps.Create.newTopic.addSynapse = false;
-            Metamaps.Create.newTopic.x = canvasLoc.x;
-            Metamaps.Create.newTopic.y = canvasLoc.y;
-            $('#new_topic').css('left', e.clientX + "px");
-            $('#new_topic').css('top', e.clientY + "px");
-            Metamaps.Create.newTopic.open();
-        } else if (!Metamaps.Mouse.didPan) {
-            // SINGLE CLICK, no pan
-            Metamaps.Filter.close();
-            Metamaps.TopicCard.hideCard();
-            Metamaps.SynapseCard.hideCard();
-            Metamaps.Create.newTopic.hide();
-            Metamaps.Create.newSynapse.hide();
-            $('.rightclickmenu').remove();
-            // reset the draw synapse positions to false
-            Metamaps.Mouse.synapseStartCoordinates = [];
-            Metamaps.Mouse.synapseEndCoordinates = null;
-            tempInit = false;
-            tempNode = null;
-            tempNode2 = null;
-            if (!e.ctrlKey && !e.shiftKey) {
-                Metamaps.Control.deselectAllEdges();
-                Metamaps.Control.deselectAllNodes();
-            }
-        }
-    }, //canvasClickHandler 
-    nodeDoubleClickHandler: function (node, e) {
-
-        Metamaps.TopicCard.showCard(node);
-
-    }, // nodeDoubleClickHandler
-    edgeDoubleClickHandler: function (adj, e) {
-
-        Metamaps.SynapseCard.showCard(adj, e);
-
-    }, // nodeDoubleClickHandler
-    nodeWasDoubleClicked: function () {
-        //grab the timestamp of the click 
-        var storedTime = Metamaps.Mouse.lastNodeClick;
-        var now = Date.now(); //not compatible with IE8 FYI 
-        Metamaps.Mouse.lastNodeClick = now;
-
-        if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE) {
-            return true;
-        } else {
-            return false;
-        }
-    }, //nodeWasDoubleClicked;
-    handleSelectionBeforeDragging: function (node, e) {
-        // four cases:
-        // 1 nothing is selected, so pretend you aren't selecting
-        // 2 others are selected only and shift, so additionally select this one
-        // 3 others are selected only, no shift: drag only this one
-        // 4 this node and others were selected, so drag them (just return false)
-        //return value: deselect node again after?
-        if (Metamaps.Selected.Nodes.length == 0) {
-		     return 'only-drag-this-one';
-        }
-        if (Metamaps.Selected.Nodes.indexOf(node) == -1) {
-            if (e.shiftKey) {
-                Metamaps.Control.selectNode(node,e);
-                return 'nothing';
-            } else {
-                return 'only-drag-this-one';
-            }
-        }
-        return 'nothing'; //case 4?
-    }, //  handleSelectionBeforeDragging
-    selectWithBox: function (e) {
-
-        var sX = Metamaps.Mouse.boxStartCoordinates.x,
-            sY = Metamaps.Mouse.boxStartCoordinates.y,
-            eX = Metamaps.Mouse.boxEndCoordinates.x,
-            eY = Metamaps.Mouse.boxEndCoordinates.y;
-		
-		if(!e.shiftKey){
-			Metamaps.Control.deselectAllNodes();
-			Metamaps.Control.deselectAllEdges();
-		}
-
-		//select all nodes that are within the box
-        Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-            var x = n.pos.x,
-                y = n.pos.y;
-
-            if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) {
-                if(e.shiftKey){
-					if(n.selected){
-						Metamaps.Control.deselectNode(n);
-					}
-					else{
-						Metamaps.Control.selectNode(n,e);
-					}
-				}
-				else{
-					Metamaps.Control.selectNode(n,e);
-				}
-            }
-        });
-
-		//Convert selection box coordinates to traditional coordinates (+,+) in upper right
-		sY = -1 * sY;
-		eY = -1 * eY
-
-        var edgesToToggle = [];
-        Metamaps.Synapses.each(function(synapse) {
-            var e = synapse.get('edge');
-            if (edgesToToggle.indexOf(e) === -1) {
-                edgesToToggle.push(e);
-            }
-        });
-		edgesToToggle.forEach(function(edge) {
-			var fromNodeX = edge.nodeFrom.pos.x;
-			var fromNodeY = -1 * edge.nodeFrom.pos.y;
-			var toNodeX = edge.nodeTo.pos.x;
-			var toNodeY = -1 * edge.nodeTo.pos.y;
-
-            var maxX = fromNodeX;
-			var maxY = fromNodeY;
-			var minX = fromNodeX;
-			var minY = fromNodeY;
-			
-			//Correct maxX, MaxY values
-			(toNodeX > maxX) ? (maxX = toNodeX):(minX = toNodeX);
-			(toNodeY > maxY) ? (maxY = toNodeY):(minY = toNodeY);
-			
-			var maxBoxX = sX;
-			var maxBoxY = sY;
-			var minBoxX = sX;
-			var minBoxY = sY;
-			
-			//Correct maxBoxX, maxBoxY values
-			(eX > maxBoxX) ? (maxBoxX = eX):(minBoxX = eX);
-			(eY > maxBoxY) ? (maxBoxY = eY):(minBoxY = eY);
-			
-			//Find the slopes from the synapse fromNode to the 4 corners of the selection box
-			var slopes = [];
-			slopes.push( (sY - fromNodeY) / (sX - fromNodeX) );
-			slopes.push( (sY - fromNodeY) / (eX - fromNodeX) );
-			slopes.push( (eY - fromNodeY) / (eX - fromNodeX) );
-			slopes.push( (eY - fromNodeY) / (sX - fromNodeX) );
-			
-			var minSlope = slopes[0];
-			var maxSlope = slopes[0];
-			slopes.forEach(function(entry){
-				if(entry > maxSlope) maxSlope = entry;
-				if(entry < minSlope) minSlope = entry;					
-			});
-			
-			//Find synapse-in-question's slope
-			var synSlope = (toNodeY - fromNodeY) / (toNodeX - fromNodeX);
-			var b = fromNodeY - synSlope * fromNodeX;
-
-            //Use the selection box edges as test cases for synapse intersection
-			var testX = sX;
-			var testY = synSlope * testX + b;
-
-            var selectTest;
-			
-			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
-				selectTest = true;
-			}
-			
-			testX = eX;
-			testY = synSlope * testX + b;
-			
-			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
-				selectTest = true;
-			}
-			
-			testY = sY;
-			testX = (testY - b)/synSlope;
-			
-			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
-				selectTest = true;
-			}
-			
-			testY = eY;
-			testX = (testY - b)/synSlope;
-			
-			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
-				selectTest = true;
-			}
-
-            //Case where the synapse is wholly enclosed in the seldction box
-            if(fromNodeX >= minBoxX && fromNodeX <= maxBoxX && fromNodeY >= minBoxY && fromNodeY <= maxBoxY && toNodeX >= minBoxX && toNodeX <= maxBoxX && toNodeY >= minBoxY && toNodeY <= maxBoxY){
-                selectTest = true;
-            }			
-			
-            //The test synapse was selected!
-
-            if(selectTest){
-                // shiftKey = toggleSelect, otherwise 
-				if(e.shiftKey){
-					if(Metamaps.Selected.Edges.indexOf(edge) != -1 ){
-						Metamaps.Control.deselectEdge(edge);
-					}
-					else{
-						Metamaps.Control.selectEdge(edge);
-					}
-				}
-				else{
-					Metamaps.Control.selectEdge(edge);
-				}
-			}
-		});
-        Metamaps.Mouse.boxStartCoordinates = false;
-        Metamaps.Mouse.boxEndCoordinates = false;
-        Metamaps.Visualize.mGraph.plot();
-    }, // selectWithBox
-    drawSelectBox: function (eventInfo, e) {
-        var ctx = Metamaps.Visualize.mGraph.canvas.getCtx();
-
-        var startX = Metamaps.Mouse.boxStartCoordinates.x,
-            startY = Metamaps.Mouse.boxStartCoordinates.y,
-            currX = eventInfo.getPos().x,
-            currY = eventInfo.getPos().y;
-
-        Metamaps.Visualize.mGraph.canvas.clear();
-        Metamaps.Visualize.mGraph.plot();
-
-        ctx.beginPath();
-        ctx.moveTo(startX, startY);
-        ctx.lineTo(startX, currY);
-        ctx.lineTo(currX, currY);
-        ctx.lineTo(currX, startY);
-        ctx.lineTo(startX, startY);
-        ctx.strokeStyle = "black";
-        ctx.stroke();
-    }, // drawSelectBox
-    selectNodeOnClickHandler: function (node, e) {
-        if (Metamaps.Visualize.mGraph.busy) return;
-
-        var self = Metamaps.JIT;
-
-        // catch right click on mac, which is often like ctrl+click
-        if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
-            self.selectNodeOnRightClickHandler(node, e)
-            return;
-        }
-
-        // if on a topic page, let alt+click center you on a new topic
-        if (Metamaps.Active.Topic && e.altKey) {
-            Metamaps.RGraph.centerOn(node.id);
-            return;
-        }
-
-        var check = self.nodeWasDoubleClicked();
-        if (check) {
-            self.nodeDoubleClickHandler(node, e);
-            return;
-        } else {
-            // wait a certain length of time, then check again, then run this code
-            setTimeout(function () {
-                if (!Metamaps.JIT.nodeWasDoubleClicked()) {
-
-                    var nodeAlreadySelected = node.selected;
-
-                    if (!e.shiftKey) {
-                        Metamaps.Control.deselectAllNodes();
-                        Metamaps.Control.deselectAllEdges();
-                    }
-                    
-                    if (nodeAlreadySelected) {
-                        Metamaps.Control.deselectNode(node);
-                    } else {
-                        Metamaps.Control.selectNode(node,e);
-                    }
-                    
-                    //trigger animation to final styles
-                    Metamaps.Visualize.mGraph.fx.animate({
-                        modes: ['edge-property:lineWidth:color:alpha'],
-                        duration: 500
-                    });
-                    Metamaps.Visualize.mGraph.plot();
-                }
-            }, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE);
-        }
-    }, //selectNodeOnClickHandler
-    selectNodeOnRightClickHandler: function (node, e) {
-        // the 'node' variable is a JIT node, the one that was clicked on
-        // the 'e' variable is the click event
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (Metamaps.Visualize.mGraph.busy) return;
-
-        // select the node
-        Metamaps.Control.selectNode(node, e);
-
-        // delete old right click menu
-        $('.rightclickmenu').remove();
-        // create new menu for clicked on node
-        var rightclickmenu = document.createElement("div");
-        rightclickmenu.className = "rightclickmenu";
-        // add the proper options to the menu
-        var menustring = '<ul>';
-
-        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        var disabled = authorized ? "" : "disabled";
-
-        if (Metamaps.Active.Map) menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh<div class="rc-keyboard">Ctrl+H</div></li>';
-        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove ' + disabled + '"><div class="rc-icon"></div>Remove from map<div class="rc-keyboard">Ctrl+M</div></li>';
-        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-delete ' + disabled + '"><div class="rc-icon"></div>Delete<div class="rc-keyboard">Ctrl+D</div></li>';
-        
-
-        if (Metamaps.Active.Topic) {
-            menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic</li>';
-        }
-        menustring += '<li class="rc-popout"><div class="rc-icon"></div>Open in new tab</li>';
-        if (Metamaps.Active.Mapper) {
-            var options = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
-                         <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
-                         <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
-                     </ul>';
-
-            menustring += '<li class="rc-spacer"></li>';
-
-            menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + options + '<div class="expandLi"></div></li>';
-
-            var metacodeOptions = $('#metacodeOptions').html();
-
-            menustring += '<li class="rc-metacode"><div class="rc-icon"></div>Change metacode' + metacodeOptions + '<div class="expandLi"></div></li>';
-        }
-        if (Metamaps.Active.Topic) {
-
-            if (!Metamaps.Active.Mapper) {
-                menustring += '<li class="rc-spacer"></li>';
-            }
-
-            // set up the get sibling menu as a "lazy load"
-            // only fill in the submenu when they hover over the get siblings list item
-            var siblingMenu = '<ul id="fetchSiblingList"> \
-                                <li class="fetchAll">All</li> \
-                                <li id="loadingSiblings"></li> \
-                            </ul>';
-            menustring += '<li class="rc-siblings"><div class="rc-icon"></div>Get siblings' + siblingMenu + '<div class="expandLi"></div></li>';
-        }
-
-        menustring += '</ul>';
-        rightclickmenu.innerHTML = menustring;
-
-        // position the menu where the click happened
-        var position = {};
-        var RIGHTCLICK_WIDTH = 300;
-        var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static
-        var SUBMENUS_WIDTH = 256;
-        var MAX_SUBMENU_HEIGHT = 270;
-        var windowWidth = $(window).width();
-        var windowHeight = $(window).height();
-
-        if (windowWidth - e.clientX < SUBMENUS_WIDTH) {
-            position.right = windowWidth - e.clientX;  
-            $(rightclickmenu).addClass('moveMenusToLeft');
-        }
-        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) {
-            position.right = windowWidth - e.clientX;
-        }
-        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH + SUBMENUS_WIDTH) {
-            position.left = e.clientX; 
-            $(rightclickmenu).addClass('moveMenusToLeft');
-        }
-        else position.left = e.clientX;
-
-        if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) {
-            position.bottom = windowHeight - e.clientY;
-            $(rightclickmenu).addClass('moveMenusUp');
-        }
-        else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) {
-            position.top = e.clientY;
-            $(rightclickmenu).addClass('moveMenusUp');
-        }
-        else position.top = e.clientY;
-
-        $(rightclickmenu).css(position);
-        //add the menu to the page
-        $('#wrapper').append(rightclickmenu);
-
-        // attach events to clicks on the list items
-
-        // delete the selected things from the database
-        if (authorized) {
-            $('.rc-delete').click(function () {
-                $('.rightclickmenu').remove();
-                Metamaps.Control.deleteSelected();
-            });
-        }
-
-        // remove the selected things from the map
-        if (authorized) {
-            $('.rc-remove').click(function () {
-                $('.rightclickmenu').remove();
-                Metamaps.Control.removeSelectedEdges();
-                Metamaps.Control.removeSelectedNodes();
-            });
-        }
-
-        // hide selected nodes and synapses until refresh
-        $('.rc-hide').click(function () {
-            $('.rightclickmenu').remove();
-            Metamaps.Control.hideSelectedEdges();
-            Metamaps.Control.hideSelectedNodes();
-        }); 
-
-        // when in radial, center on the topic you picked
-        $('.rc-center').click(function () {
-            $('.rightclickmenu').remove();
-            Metamaps.Topic.centerOn(node.id);
-        });
-
-        // open the entity in a new tab
-        $('.rc-popout').click(function () {
-            $('.rightclickmenu').remove();
-            var win = window.open('/topics/' + node.id, '_blank');
-            win.focus();
-        });
-
-        // change the permission of all the selected nodes and synapses that you were the originator of
-        $('.rc-permission li').click(function () {
-            $('.rightclickmenu').remove();
-            // $(this).text() will be 'commons' 'public' or 'private'
-            Metamaps.Control.updateSelectedPermissions($(this).text());
-        });
-
-        // change the metacode of all the selected nodes that you have edit permission for
-        $('.rc-metacode li li').click(function () {
-            $('.rightclickmenu').remove();
-            //
-            Metamaps.Control.updateSelectedMetacodes($(this).attr('data-id'));
-        });
-
-
-        // fetch relatives
-        var fetched = false;
-        $('.rc-siblings').hover(function () {
-            if (!fetched) {
-                Metamaps.JIT.populateRightClickSiblings(node);
-                fetched = true;
-            }
-        });
-        $('.rc-siblings .fetchAll').click(function () {
-            $('.rightclickmenu').remove();
-            // data-id is a metacode id
-            Metamaps.Topic.fetchRelatives(node);
-        });
-    }, //selectNodeOnRightClickHandler,
-    populateRightClickSiblings: function(node) {
-        var self = Metamaps.JIT;
-
-        // depending on how many topics are selected, do different things
-        /*if (Metamaps.Selected.Nodes.length > 1) {
-            // we don't bother filling the submenu with 
-            // specific numbers, because there are too many topics
-            // selected to find those numbers
-            $('#loadingSiblings').remove();
-            return;
-        }*/
-
-        var topic = node.getData('topic');
-
-        // add a loading icon for now
-        var loader = new CanvasLoader('loadingSiblings');
-        loader.setColor('#4FC059'); // default is '#000000'
-        loader.setDiameter(15); // default is 40
-        loader.setDensity(41); // default is 40
-        loader.setRange(0.9); // default is 1.3
-        loader.show(); // Hidden by default
-
-        var topics = Metamaps.Topics.map(function(t){ return t.id });
-        var topics_string = topics.join();
-
-        var successCallback = function(data) {
-            $('#loadingSiblings').remove();
-
-            for (var key in data) {
-                var string = Metamaps.Metacodes.get(key).get('name') + ' (' + data[key] + ')';
-                $('#fetchSiblingList').append('<li class="getSiblings" data-id="' + key + '">' + string + '</li>');
-            }
-
-            $('.rc-siblings .getSiblings').click(function () {
-                $('.rightclickmenu').remove();
-                // data-id is a metacode id
-                Metamaps.Topic.fetchRelatives(node, $(this).attr('data-id'));
-            });
-        };
-
-        $.ajax({
-            type: "Get",
-            url: "/topics/" + topic.id + "/relative_numbers.json?network=" + topics_string,
-            success: successCallback,
-            error: function () {
-                
-            }
-        });
-    },
-    selectEdgeOnClickHandler: function (adj, e) {
-        if (Metamaps.Visualize.mGraph.busy) return;
-
-        var self = Metamaps.JIT;
-
-        // catch right click on mac, which is often like ctrl+click
-        if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
-            self.selectEdgeOnRightClickHandler(adj, e)
-            return;
-        }
-
-        var check = self.nodeWasDoubleClicked();
-        if (check) {
-            self.edgeDoubleClickHandler(adj, e);
-            return;
-        } else {
-            // wait a certain length of time, then check again, then run this code
-            setTimeout(function () {
-                if (!Metamaps.JIT.nodeWasDoubleClicked()) {
-
-                    var edgeAlreadySelected = Metamaps.Selected.Edges.indexOf(adj) !== -1;
-
-                    if (!e.shiftKey) {
-                        Metamaps.Control.deselectAllNodes();
-                        Metamaps.Control.deselectAllEdges();
-                    }
-
-                    if (edgeAlreadySelected) {
-                        Metamaps.Control.deselectEdge(adj);
-                    } else {
-                        Metamaps.Control.selectEdge(adj);
-                    }
-
-                    Metamaps.Visualize.mGraph.plot();
-                }
-            }, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE);
-        }
-    }, //selectEdgeOnClickHandler
-    selectEdgeOnRightClickHandler: function (adj, e) {
-        // the 'node' variable is a JIT node, the one that was clicked on
-        // the 'e' variable is the click event
-
-        if (adj.getData('alpha') === 0) return; // don't do anything if the edge is filtered
-
-        var authorized;
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (Metamaps.Visualize.mGraph.busy) return;
-
-        Metamaps.Control.selectEdge(adj);
-
-        // delete old right click menu
-        $('.rightclickmenu').remove();
-        // create new menu for clicked on node
-        var rightclickmenu = document.createElement("div");
-        rightclickmenu.className = "rightclickmenu";
-
-        // add the proper options to the menu
-        var menustring = '<ul>';
-
-        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        var disabled = authorized ? "" : "disabled";
-
-        if (Metamaps.Active.Map) menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh<div class="rc-keyboard">Ctrl+H</div></li>';
-        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove ' + disabled + '"><div class="rc-icon"></div>Remove from map<div class="rc-keyboard">Ctrl+M</div></li>';
-        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-delete ' + disabled + '"><div class="rc-icon"></div>Delete<div class="rc-keyboard">Ctrl+D</div></li>';
-
-        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-spacer"></li>';
-
-        if (Metamaps.Active.Mapper) {
-            var permOptions = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
-                         <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
-                         <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
-                     </ul>';
-
-            menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + permOptions + '<div class="expandLi"></div></li>';
-        }
-
-        menustring += '</ul>';
-        rightclickmenu.innerHTML = menustring;
-
-        // position the menu where the click happened
-        var position = {};
-        var RIGHTCLICK_WIDTH = 300;
-        var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static
-        var SUBMENUS_WIDTH = 256;
-        var MAX_SUBMENU_HEIGHT = 270;
-        var windowWidth = $(window).width();
-        var windowHeight = $(window).height();
-
-        if (windowWidth - e.clientX < SUBMENUS_WIDTH) {
-            position.right = windowWidth - e.clientX;  
-            $(rightclickmenu).addClass('moveMenusToLeft');
-        }
-        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) {
-            position.right = windowWidth - e.clientX;
-        }
-        else position.left = e.clientX;
-
-        if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) {
-            position.bottom = windowHeight - e.clientY;
-            $(rightclickmenu).addClass('moveMenusUp');
-        }
-        else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) {
-            position.top = e.clientY;
-            $(rightclickmenu).addClass('moveMenusUp');
-        }
-        else position.top = e.clientY;
-
-        $(rightclickmenu).css(position);
-
-        //add the menu to the page
-        $('#wrapper').append(rightclickmenu);
-
-
-        // attach events to clicks on the list items
-
-        // delete the selected things from the database
-        if (authorized) {
-            $('.rc-delete').click(function () {
-                $('.rightclickmenu').remove();
-                Metamaps.Control.deleteSelected();
-            });
-        }
-
-        // remove the selected things from the map
-        if (authorized) {
-            $('.rc-remove').click(function () {
-                $('.rightclickmenu').remove();
-                Metamaps.Control.removeSelectedEdges();
-                Metamaps.Control.removeSelectedNodes();
-            });
-        }
-
-        // hide selected nodes and synapses until refresh
-        $('.rc-hide').click(function () {
-            $('.rightclickmenu').remove();
-            Metamaps.Control.hideSelectedEdges();
-            Metamaps.Control.hideSelectedNodes();
-        });
-
-        // change the permission of all the selected nodes and synapses that you were the originator of
-        $('.rc-permission li').click(function () {
-            $('.rightclickmenu').remove();
-            // $(this).text() will be 'commons' 'public' or 'private'
-            Metamaps.Control.updateSelectedPermissions($(this).text());
-        });
-
-    }, //selectEdgeOnRightClickHandler
-    SmoothPanning: function () {
-
-        var sx = Metamaps.Visualize.mGraph.canvas.scaleOffsetX,
-            sy = Metamaps.Visualize.mGraph.canvas.scaleOffsetY,
-            y_velocity = Metamaps.Mouse.changeInY, // initial y velocity
-            x_velocity = Metamaps.Mouse.changeInX, // initial x velocity
-            easing = 1; // frictional value
-
-        easing = 1;
-        window.clearInterval(panningInt)
-        panningInt = setInterval(function () {
-            myTimer()
-        }, 1);
-
-        function myTimer() {
-            Metamaps.Visualize.mGraph.canvas.translate(x_velocity * easing * 1 / sx, y_velocity * easing * 1 / sy);
-            $(document).trigger(Metamaps.JIT.events.pan);
-            easing = easing * 0.75;
-
-            if (easing < 0.1) window.clearInterval(panningInt);
-        }
-    }, // SmoothPanning
-    renderMidArrow: function (from, to, dim, swap, canvas, placement, newSynapse) {
-        var ctx = canvas.getCtx();
-        // invert edge direction 
-        if (swap) {
-            var tmp = from;
-            from = to;
-            to = tmp;
-        }
-        // vect represents a line from tip to tail of the arrow 
-        var vect = new $jit.Complex(to.x - from.x, to.y - from.y);
-        // scale it 
-        vect.$scale(dim / vect.norm());
-        // compute the midpoint of the edge line 
-        var newX = (to.x - from.x) * placement + from.x;
-        var newY = (to.y - from.y) * placement + from.y;
-        var midPoint = new $jit.Complex(newX, newY);
-
-        // move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint 
-        var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y);
-        // compute the tail intersection point with the edge line 
-        var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x, arrowPoint.y - vect.y);
-        // vector perpendicular to vect 
-        var normal = new $jit.Complex(-vect.y / 2, vect.x / 2);
-        var v1 = intermediatePoint.add(normal);
-        var v2 = intermediatePoint.$add(normal.$scale(-1));
-
-        if (newSynapse) {
-            ctx.strokeStyle = "#4fc059";
-            ctx.lineWidth = 2;
-            ctx.globalAlpha = 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.lineTo(arrowPoint.x, arrowPoint.y);
-        ctx.lineTo(v2.x, v2.y);
-        ctx.stroke();
-    }, // renderMidArrow
-    renderEdgeArrows: function (edgeHelper, adj, synapse, canvas) {
-
-        var self = Metamaps.JIT;
-
-        var directionCat = synapse.get('category');
-        var direction = synapse.getDirection();
-
-        var pos = adj.nodeFrom.pos.getc(true);
-        var posChild = adj.nodeTo.pos.getc(true);
-
-        //plot arrow edge 
-        if (!direction) {
-            // render nothing for this arrow if the direction couldn't be retrieved
-        } else if (directionCat == "none") {
-            edgeHelper.line.render({
-                x: pos.x,
-                y: pos.y
-            }, {
-                x: posChild.x,
-                y: posChild.y
-            }, canvas);
-        } else if (directionCat == "both") {
-            self.renderMidArrow({
-                x: pos.x,
-                y: pos.y
-            }, {
-                x: posChild.x,
-                y: posChild.y
-            }, 13, true, canvas, 0.7);
-            self.renderMidArrow({
-                x: pos.x,
-                y: pos.y
-            }, {
-                x: posChild.x,
-                y: posChild.y
-            }, 13, false, canvas, 0.7);
-        } else if (directionCat == "from-to") {
-            var inv = (direction[0] != adj.nodeFrom.id);
-            self.renderMidArrow({
-                x: pos.x,
-                y: pos.y
-            }, {
-                x: posChild.x,
-                y: posChild.y
-            }, 13, inv, canvas, 0.7);
-            self.renderMidArrow({
-                x: pos.x,
-                y: pos.y
-            }, {
-                x: posChild.x,
-                y: posChild.y
-            }, 13, inv, canvas, 0.3);
-        }
-    }, //renderEdgeArrows
-    zoomIn: function (event) {
-        Metamaps.Visualize.mGraph.canvas.scale(1.25,1.25);
-        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
-    },
-    zoomOut: function (event) {
-        Metamaps.Visualize.mGraph.canvas.scale(0.8,0.8);
-        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
-    },
-    centerMap: function (canvas) {
-        var offsetScale = canvas.scaleOffsetX;
-                
-        canvas.scale(1/offsetScale,1/offsetScale);
-
-        var offsetX = canvas.translateOffsetX;
-        var offsetY = canvas.translateOffsetY;
-
-        canvas.translate(-1*offsetX,-1*offsetY);
-    },
-    zoomToBox: function (event) {
-        var sX = Metamaps.Mouse.boxStartCoordinates.x,
-            sY = Metamaps.Mouse.boxStartCoordinates.y,
-            eX = Metamaps.Mouse.boxEndCoordinates.x,
-            eY = Metamaps.Mouse.boxEndCoordinates.y;
-
-        var canvas = Metamaps.Visualize.mGraph.canvas;
-        Metamaps.JIT.centerMap(canvas);
-
-        var height = $(document).height(),
-            width = $(document).width();
-
-        var spanX = Math.abs(sX - eX);
-        var spanY = Math.abs(sY - eY);
-        var ratioX = width / spanX;
-        var ratioY = height / spanY;
-
-        var newRatio = Math.min(ratioX,ratioY);
-
-        if(canvas.scaleOffsetX *newRatio<= 5 && canvas.scaleOffsetX*newRatio >= 0.2){
-            canvas.scale(newRatio,newRatio);
-        }
-        else if(canvas.scaleOffsetX * newRatio > 5){
-            newRatio = 5/ canvas.scaleOffsetX;
-            canvas.scale(newRatio,newRatio);
-        }
-        else{
-            newRatio = 0.2/ canvas.scaleOffsetX;
-            canvas.scale(newRatio,newRatio);
-        } 
-
-        var cogX = (sX + eX)/2;
-        var cogY = (sY + eY)/2;
-
-        canvas.translate(-1* cogX, -1* cogY);
-        $(document).trigger(Metamaps.JIT.events.zoom, [event]); 
-
-        Metamaps.Mouse.boxStartCoordinates = false;
-        Metamaps.Mouse.boxEndCoordinates = false;
-        Metamaps.Visualize.mGraph.plot();
-        
-    },
-    zoomExtents: function (event, canvas, denySelected) {
-        Metamaps.JIT.centerMap(canvas);
-        var height = canvas.getSize().height,
-            width = canvas.getSize().width,
-            maxX, minX, maxY, minY, counter = 0;
-
-        
-        if (!denySelected && Metamaps.Selected.Nodes.length > 0) {
-            var nodes = Metamaps.Selected.Nodes;
-        }
-        else {
-            var nodes = _.values(Metamaps.Visualize.mGraph.graph.nodes);
-        }
-
-        if(nodes.length > 1){
-            nodes.forEach(function (n) {
-                var x = n.pos.x,
-                    y = n.pos.y;
-
-                if (counter == 0 && n.getData('alpha') == 1){
-                    maxX = x;
-                    minX = x; 
-                    maxY = y;
-                    minY = y; 
-                }
-
-                var arrayOfLabelLines = Metamaps.Util.splitLine(n.name, 30).split('\n'),
-                    dim = n.getData('dim'),
-                    ctx = canvas.getCtx();
-
-                var height = 25 * arrayOfLabelLines.length;
-
-                var index, lineWidths = [];
-                for (index = 0; index < arrayOfLabelLines.length; ++index) {
-                    lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
-                }
-                var width = Math.max.apply(null, lineWidths) + 8;
-
-                // only adjust these values if the node is not filtered
-                if (n.getData('alpha') == 1) {
-                    maxX = Math.max(x + width /2,maxX);
-                    maxY = Math.max(y + n.getData("height") + 5 + height,maxY);
-                    minX = Math.min(x - width /2,minX);
-                    minY = Math.min(y - dim,minY);
-
-                    counter++;
-                }
-            });
-
-            var spanX = maxX - minX;
-            var spanY = maxY - minY;
-            var ratioX = spanX / width;
-            var ratioY = spanY / height;
-
-            var cogX = (maxX + minX)/2;
-            var cogY = (maxY + minY)/2;
-
-            canvas.translate(-1* cogX, -1* cogY);
-
-            var newRatio = Math.max(ratioX,ratioY);
-            var scaleMultiplier = 1/newRatio*0.9;
-
-            if(canvas.scaleOffsetX *scaleMultiplier<= 3 && canvas.scaleOffsetX*scaleMultiplier >= 0.2){
-                canvas.scale(scaleMultiplier,scaleMultiplier);
-            }
-            else if(canvas.scaleOffsetX * scaleMultiplier > 3){
-                scaleMultiplier = 3/ canvas.scaleOffsetX;
-                canvas.scale(scaleMultiplier,scaleMultiplier);
-            }
-            else{
-                scaleMultiplier = 0.2/ canvas.scaleOffsetX;
-                canvas.scale(scaleMultiplier,scaleMultiplier);
-            }
-            
-            $(document).trigger(Metamaps.JIT.events.zoom, [event]);
-        }
-        else if(nodes.length == 1){
-            nodes.forEach(function (n) {
-                var x = n.pos.x,
-                    y = n.pos.y;
-
-                canvas.translate(-1* x, -1* y);
-                $(document).trigger(Metamaps.JIT.events.zoom, [event]); 
-            });
-        }
-    }
-};
+Metamaps.JIT = {
+    events: {
+        topicDrag: 'Metamaps:JIT:events:topicDrag', 
+        newTopic: 'Metamaps:JIT:events:newTopic', 
+        deleteTopic: 'Metamaps:JIT:events:deleteTopic', 
+        removeTopic: 'Metamaps:JIT:events:removeTopic', 
+        newSynapse: 'Metamaps:JIT:events:newSynapse', 
+        deleteSynapse: 'Metamaps:JIT:events:deleteSynapse', 
+        removeSynapse: 'Metamaps:JIT:events:removeSynapse', 
+        pan: 'Metamaps:JIT:events:pan',
+        zoom: 'Metamaps:JIT:events:zoom',
+        animationDone: 'Metamaps:JIT:events:animationDone',
+    },
+    vizData: [], // contains the visualization-compatible graph
+    /**
+     * This method will bind the event handlers it is interested and initialize the class.
+     */
+    init: function () {
+        var self = Metamaps.JIT;
+
+        $(".zoomIn").click(self.zoomIn);
+        $(".zoomOut").click(self.zoomOut);
+
+        var zoomExtents = function (event) {
+            self.zoomExtents(event, Metamaps.Visualize.mGraph.canvas);
+        };
+        $(".zoomExtents").click(zoomExtents);
+
+        $(".takeScreenshot").click(Metamaps.Map.exportImage);
+
+        self.topicDescImage = new Image();
+        self.topicDescImage.src = '<%= asset_path('topic_description_signifier.png') %>';
+
+        self.topicLinkImage = new Image();
+        self.topicLinkImage.src = '<%= asset_path('topic_link_signifier.png') %>';
+    },
+    /**
+     * convert our topic JSON into something JIT can use
+     */
+    convertModelsToJIT: function(topics, synapses) {
+        var jitReady = [];
+
+        var synapsesToRemove = [];
+        var topic;
+        var mapping;
+        var node;
+        var nodes = {};
+        var existingEdge;
+        var edge;
+        var edges = [];
+
+        topics.each(function (t) {
+            node = t.createNode();
+            nodes[node.id] = node;
+        });
+        synapses.each(function (s) {
+            edge = s.createEdge();
+
+            if (topics.get(s.get('node1_id')) === undefined || topics.get(s.get('node2_id')) === undefined) {
+                // this means it's an invalid synapse
+                synapsesToRemove.push(s);
+            } 
+            else if (nodes[edge.nodeFrom] && nodes[edge.nodeTo]) {
+
+                existingEdge = _.findWhere(edges, {
+                    nodeFrom: edge.nodeFrom,
+                    nodeTo: edge.nodeTo
+                }) ||
+                    _.findWhere(edges, {
+                        nodeFrom: edge.nodeTo,
+                        nodeTo: edge.nodeFrom
+                    });
+
+                if (existingEdge) {
+                    // for when you're dealing with multiple relationships between the same two topics
+                    if (Metamaps.Active.Map) {
+                        mapping = s.getMapping();
+                        existingEdge.data['$mappingIDs'].push(mapping.id);
+                    }
+                    existingEdge.data['$synapseIDs'].push(s.id);
+                } else {
+                    // for when you're dealing with a topic that has relationships to many different nodes
+                    nodes[edge.nodeFrom].adjacencies.push(edge);
+                    edges.push(edge);
+                }
+            }
+        });
+
+        _.each(nodes, function (node) {
+            jitReady.push(node);
+        });
+
+        return [jitReady, synapsesToRemove];
+    },
+    prepareVizData: function () {
+        var self = Metamaps.JIT;
+        var mapping;
+
+        // reset/empty vizData
+        self.vizData = [];
+        Metamaps.Visualize.loadLater = false;
+
+        var results = self.convertModelsToJIT(Metamaps.Topics, Metamaps.Synapses);
+
+        self.vizData = results[0];
+
+        // clean up the synapses array in case of any faulty data
+        _.each(results[1], function (synapse) {
+            mapping = synapse.getMapping();
+            Metamaps.Synapses.remove(synapse);
+            Metamaps.Mappings.remove(mapping);
+        });
+
+        if (self.vizData.length == 0) {
+            Metamaps.Famous.viz.showInstructions();
+            Metamaps.Visualize.loadLater = true;
+        }
+        else Metamaps.Famous.viz.hideInstructions();
+
+        Metamaps.Visualize.render();
+    }, // prepareVizData
+    edgeRender: function (adj, canvas) {
+        //get nodes cartesian coordinates 
+        var pos = adj.nodeFrom.pos.getc(true);
+        var posChild = adj.nodeTo.pos.getc(true);
+
+        var synapse;
+        if(adj.getData("displayIndex")) {
+            synapse = adj.getData("synapses")[adj.getData("displayIndex")];
+            if (!synapse) {
+                delete adj.data.$displayIndex;
+                synapse = adj.getData("synapses")[0];
+            }
+        }
+        else {
+            synapse = adj.getData("synapses")[0];
+        }
+
+        if (!synapse) return; // this means there are no corresponding synapses for
+        // this edge, don't render it
+
+        var directionCat = synapse.get("category");
+
+        //label placement on edges
+        if (canvas.denySelected) {
+            var color = Metamaps.Settings.colors.synapses.normal;
+            canvas.getCtx().fillStyle = canvas.getCtx().strokeStyle = color;
+        }
+        Metamaps.JIT.renderEdgeArrows($jit.Graph.Plot.edgeHelper, adj, synapse, canvas);
+
+        //check for edge label in data  
+        var desc = synapse.get("desc");
+
+        var showDesc = adj.getData("showDesc");
+
+        var drawSynapseCount = function (context, x, y, count) {
+            /*
+            circle size: 16x16px
+            positioning: overlay and center on top right corner of synapse label - 8px left and 8px down
+            color: #dab539
+            border color: #424242
+            border size: 1.5px
+            font: DIN medium
+            font-size: 14pt
+            font-color: #424242
+            */
+            context.beginPath();
+            context.arc(x, y, 8, 0, 2 * Math.PI, false);
+            context.fillStyle = '#DAB539';
+            context.strokeStyle = '#424242';
+            context.lineWidth = 1.5;
+            context.closePath();
+            context.fill();
+            context.stroke();
+
+            // add the synapse count
+            context.fillStyle = '#424242';
+            context.textAlign = 'center';
+            context.font = '14px din-medium';
+
+            context.fillText(count, x, y + 5);
+        };
+
+        if (!canvas.denySelected && desc != "" && showDesc) {
+            // '&amp;' to '&'
+            desc = Metamaps.Util.decodeEntities(desc);
+
+            //now adjust the label placement 
+            var ctx = canvas.getCtx();
+            ctx.font = 'bold 14px arial';
+            ctx.fillStyle = '#FFF';
+            ctx.textBaseline = 'alphabetic';
+
+            var arrayOfLabelLines = Metamaps.Util.splitLine(desc, 30).split('\n');
+            var index, lineWidths = [];
+            for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
+            }
+            var width = Math.max.apply(null, lineWidths) + 16;
+            var height = (16 * arrayOfLabelLines.length) + 8;
+
+            var x = (pos.x + posChild.x - width) / 2;
+            var y = ((pos.y + posChild.y) / 2) - height / 2;
+
+            var radius = 5;
+
+            //render background
+            ctx.beginPath();
+            ctx.moveTo(x + radius, y);
+            ctx.lineTo(x + width - radius, y);
+            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+            ctx.lineTo(x + width, y + height - radius);
+            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+            ctx.lineTo(x + radius, y + height);
+            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+            ctx.lineTo(x, y + radius);
+            ctx.quadraticCurveTo(x, y, x + radius, y);
+            ctx.closePath();
+            ctx.fill();
+
+            // get number of synapses
+            var synapseNum = adj.getData("synapses").length;
+
+            //render text
+            ctx.fillStyle = '#424242';
+            ctx.textAlign = 'center';
+            for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                ctx.fillText(arrayOfLabelLines[index], x + (width / 2), y + 18 + (16 * index));
+            }
+
+            if (synapseNum > 1) {
+                drawSynapseCount(ctx, x + width, y, synapseNum);
+            }
+        }
+        else if (!canvas.denySelected && showDesc) {
+            // get number of synapses
+            var synapseNum = adj.getData("synapses").length;
+
+            if (synapseNum > 1) {
+                var ctx = canvas.getCtx();
+                var x = (pos.x + posChild.x) / 2;
+                var y = (pos.y + posChild.y) / 2;
+                drawSynapseCount(ctx, x, y, synapseNum);
+            }
+        }
+
+    }, // edgeRender
+    ForceDirected: {
+        animateSavedLayout: {
+            modes: ['linear'],
+            transition: $jit.Trans.Quad.easeInOut,
+            duration: 800,
+            onComplete: function () {
+                Metamaps.Visualize.mGraph.busy = false;
+                $(document).trigger(Metamaps.JIT.events.animationDone);
+            }
+        },
+        animateFDLayout: {
+            modes: ['linear'],
+            transition: $jit.Trans.Elastic.easeOut,
+            duration: 800,
+            onComplete: function () {
+                Metamaps.Visualize.mGraph.busy = false;
+            }
+        },
+        graphSettings: {
+            //id of the visualization container
+            injectInto: 'infovis',
+            //Enable zooming and panning
+            //by scrolling and DnD
+            Navigation: {
+                enable: true,
+                //Enable panning events only if we're dragging the empty
+                //canvas (and not a node).
+                panning: 'avoid nodes',
+                zooming: 28 //zoom speed. higher is more sensible
+            },
+            //background: {
+            //    type: 'Metamaps'
+            //},
+            //NodeStyles: {  
+            //  enable: true,  
+            //  type: 'Native',  
+            //  stylesHover: {  
+            //    dim: 30  
+            //  },  
+            //  duration: 300  
+            //},
+            // Change node and edge styles such as
+            // color and width.
+            // These properties are also set per node
+            // with dollar prefixed data-properties in the
+            // JSON structure.
+            Node: {
+                overridable: true,
+                color: '#2D6A5D',
+                type: 'customNode',
+                dim: 25
+            },
+            Edge: {
+                overridable: true,
+                color: Metamaps.Settings.colors.synapses.normal,
+                type: 'customEdge',
+                lineWidth: 2,
+                alpha: 1
+            },
+            //Native canvas text styling
+            Label: {
+                type: 'Native', //Native or HTML
+                size: 20,
+                family: 'arial',
+                textBaseline: 'alphabetic',
+                color: Metamaps.Settings.colors.labels.text
+            },
+            //Add Tips
+            Tips: {
+                enable: false,
+                onShow: function (tip, node) {}
+            },
+            // Add node events
+            Events: {
+                enable: true,
+                enableForEdges: true,
+                onMouseMove: function (node, eventInfo, e) {
+                    Metamaps.JIT.onMouseMoveHandler(node, eventInfo, e);
+                    //console.log('called mouse move handler');
+                },
+                //Update node positions when dragged
+                onDragMove: function (node, eventInfo, e) {
+                    Metamaps.JIT.onDragMoveTopicHandler(node, eventInfo, e);
+                    //console.log('called drag move handler');
+                },
+                onDragEnd: function (node, eventInfo, e) {
+                    Metamaps.JIT.onDragEndTopicHandler(node, eventInfo, e, false);
+                    //console.log('called drag end handler');
+                },
+                onDragCancel: function (node, eventInfo, e) {
+                    Metamaps.JIT.onDragCancelHandler(node, eventInfo, e, false);
+                },
+                //Implement the same handler for touchscreens
+                onTouchStart: function (node, eventInfo, e) {
+                    //$jit.util.event.stop(e); //stop default touchmove event
+                    //Metamaps.Visualize.mGraph.events.onMouseDown(e, null, eventInfo);
+                    Metamaps.Visualize.mGraph.events.touched = true;
+                    Metamaps.Touch.touchPos = eventInfo.getPos();
+                    var canvas = Metamaps.Visualize.mGraph.canvas,
+                        ox = canvas.translateOffsetX;
+                    oy = canvas.translateOffsetY,
+                    sx = canvas.scaleOffsetX,
+                    sy = canvas.scaleOffsetY;
+                    Metamaps.Touch.touchPos.x *= sx;
+                    Metamaps.Touch.touchPos.y *= sy;
+                    Metamaps.Touch.touchPos.x += ox;
+                    Metamaps.Touch.touchPos.y += oy;
+
+                    touchDragNode = node;
+                },
+                //Implement the same handler for touchscreens
+                onTouchMove: function (node, eventInfo, e) {
+                    if (Metamaps.Touch.touchDragNode) Metamaps.JIT.onDragMoveTopicHandler(Metamaps.Touch.touchDragNode, eventInfo, e);
+                    else {
+                        Metamaps.JIT.touchPanZoomHandler(eventInfo, e);
+                    }
+                },
+                //Implement the same handler for touchscreens
+                onTouchEnd: function (node, eventInfo, e) {
+
+                },
+                //Implement the same handler for touchscreens
+                onTouchCancel: function (node, eventInfo, e) {
+
+                },
+                //Add also a click handler to nodes
+                onClick: function (node, eventInfo, e) {
+
+                    // remove the rightclickmenu
+                    $('.rightclickmenu').remove();
+
+                    if (Metamaps.Mouse.boxStartCoordinates) {
+                        if(e.ctrlKey){
+                            Metamaps.Visualize.mGraph.busy = false;
+                            Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
+
+                            var bS = Metamaps.Mouse.boxStartCoordinates;
+                            var bE = Metamaps.Mouse.boxEndCoordinates;
+                            if (Math.abs(bS.x - bE.x) > 20 && Math.abs(bS.y - bE.y) > 20) {
+                                Metamaps.JIT.zoomToBox(e);
+                                return;
+                            }
+                            else {
+                                Metamaps.Mouse.boxStartCoordinates = null;
+                                Metamaps.Mouse.boxEndCoordinates = null;
+                            }
+                            //console.log('called zoom to box');
+                        }
+                        
+                        if (e.shiftKey) {
+                            Metamaps.Visualize.mGraph.busy = false;
+                            Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
+                            Metamaps.JIT.selectWithBox(e);
+                            //console.log('called select with box');
+                            return;
+                        };
+                    }
+
+                    if (e.target.id != "infovis-canvas") return false;
+
+                    //clicking on a edge, node, or clicking on blank part of canvas?
+                    if (node.nodeFrom) {
+                        Metamaps.JIT.selectEdgeOnClickHandler(node, e);
+                        //console.log('called selectEdgeOnClickHandler');
+                    } else if (node && !node.nodeFrom) {
+                        Metamaps.JIT.selectNodeOnClickHandler(node, e);
+                        //console.log('called selectNodeOnClickHandler');
+                    } else {
+                        Metamaps.JIT.canvasClickHandler(eventInfo.getPos(), e);
+                        //console.log('called canvasClickHandler');
+                    } //if
+                },
+                //Add also a click handler to nodes
+                onRightClick: function (node, eventInfo, e) {
+
+                    // remove the rightclickmenu
+                    $('.rightclickmenu').remove();
+
+                    if (Metamaps.Mouse.boxStartCoordinates) {
+                        Metamaps.Visualize.mGraph.busy = false;
+                        Metamaps.Mouse.boxEndCoordinates = eventInfo.getPos();
+                        Metamaps.JIT.selectWithBox(e);
+                        return;
+                    }
+
+                    if (e.target.id != "infovis-canvas") return false;
+
+                    //clicking on a edge, node, or clicking on blank part of canvas?
+                    if (node.nodeFrom) {
+                        Metamaps.JIT.selectEdgeOnRightClickHandler(node, e);
+                    } else if (node && !node.nodeFrom) {
+                        Metamaps.JIT.selectNodeOnRightClickHandler(node, e);
+                    } else {
+                        //console.log('right clicked on open space');
+                    } 
+                }
+            },
+            //Number of iterations for the FD algorithm
+            iterations: 200,
+            //Edge length
+            levelDistance: 200,
+        },
+        nodeSettings: {
+            'customNode': {
+                'render': function (node, canvas) {
+                    var pos = node.pos.getc(true),
+                        dim = node.getData('dim'),
+                        topic = node.getData('topic'),
+                        metacode = topic ? topic.getMetacode() : false,
+                        ctx = canvas.getCtx();
+
+                    // if the topic is selected draw a circle around it
+                    if (!canvas.denySelected && node.selected) {
+                        ctx.beginPath();
+                        ctx.arc(pos.x, pos.y, dim + 3, 0, 2 * Math.PI, false);
+                        ctx.strokeStyle = Metamaps.Settings.colors.topics.selected;
+                        ctx.lineWidth = 2;
+                        ctx.stroke();
+                    }
+
+                    if (!metacode ||
+                        !metacode.get('image') ||
+                        !metacode.get('image').complete ||
+                        (typeof metacode.get('image').naturalWidth !== "undefined" &&
+                            metacode.get('image').naturalWidth === 0)) {
+                        ctx.beginPath();
+                        ctx.arc(pos.x, pos.y, dim, 0, 2 * Math.PI, false);
+                        ctx.fillStyle = '#B6B2FD';
+                        ctx.fill();
+                    } else {
+                        ctx.drawImage(metacode.get('image'), pos.x - dim, pos.y - dim, dim * 2, dim * 2);
+                    }
+
+                    // if the topic has a link, draw a small image to indicate that
+                    var hasLink = topic && topic.get('link') !== "" && topic.get('link') !== null;
+                    var linkImage = Metamaps.JIT.topicLinkImage;
+                    var linkImageLoaded = linkImage.complete ||
+                        (typeof linkImage.naturalWidth !== "undefined" &&
+                            linkImage.naturalWidth !== 0)
+                    if (hasLink && linkImageLoaded) {
+                        ctx.drawImage(linkImage, pos.x - dim - 8, pos.y - dim - 8, 16, 16);
+                    }
+
+                    // if the topic has a desc, draw a small image to indicate that
+                    var hasDesc = topic && topic.get('desc') !== "" && topic.get('desc') !== null;
+                    var descImage = Metamaps.JIT.topicDescImage;
+                    var descImageLoaded = descImage.complete ||
+                        (typeof descImage.naturalWidth !== "undefined" &&
+                            descImage.naturalWidth !== 0)
+                    if (hasDesc && descImageLoaded) {
+                        ctx.drawImage(descImage, pos.x + dim - 8, pos.y - dim - 8, 16, 16);
+                    }
+                },
+                'contains': function (node, pos) {
+                    var npos = node.pos.getc(true),
+                        dim = node.getData('dim'),
+                        arrayOfLabelLines = Metamaps.Util.splitLine(node.name, 30).split('\n'),
+                        ctx = Metamaps.Visualize.mGraph.canvas.getCtx();
+
+                    var height = 25 * arrayOfLabelLines.length;
+
+                    var index, lineWidths = [];
+                    for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                        lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
+                    }
+                    var width = Math.max.apply(null, lineWidths) + 8;
+                    var labely = npos.y + node.getData("height") + 5 + height / 2;
+
+                    var overLabel = this.nodeHelper.rectangle.contains({
+                        x: npos.x,
+                        y: labely
+                    }, pos, width, height);
+
+                    return this.nodeHelper.circle.contains(npos, pos, dim) || overLabel;
+                }
+            }
+        },
+        edgeSettings: {
+            'customEdge': {
+                'render': function (adj, canvas) {
+                    Metamaps.JIT.edgeRender(adj, canvas)
+                },
+                'contains': function (adj, pos) {
+                    var from = adj.nodeFrom.pos.getc(),
+                        to = adj.nodeTo.pos.getc();
+                    
+                    // this fixes an issue where when edges are perfectly horizontal or perfectly vertical
+                    // it becomes incredibly difficult to hover over them
+                    if (-1 < pos.x && pos.x < 1) pos.x = 0;
+                    if (-1 < pos.y && pos.y < 1) pos.y = 0;
+                    
+                    return $jit.Graph.Plot.edgeHelper.line.contains(from, to, pos, adj.Edge.epsilon + 5);
+                }
+            }
+        }
+    }, // ForceDirected
+    ForceDirected3D: {
+        animate: {
+            modes: ['linear'],
+            transition: $jit.Trans.Elastic.easeOut,
+            duration: 2500,
+            onComplete: function () {
+                Metamaps.Visualize.mGraph.busy = false;
+            }
+        },
+        graphSettings: {
+            //id of the visualization container
+            injectInto: 'infovis',
+            type: '3D',
+            Scene: {
+                Lighting: {
+                    enable: false,
+                    ambient: [0.5, 0.5, 0.5],
+                    directional: {
+                        direction: {
+                            x: 1,
+                            y: 0,
+                            z: -1
+                        },
+                        color: [0.9, 0.9, 0.9]
+                    }
+                }
+            },
+            //Enable zooming and panning
+            //by scrolling and DnD
+            Navigation: {
+                enable: false,
+                //Enable panning events only if we're dragging the empty
+                //canvas (and not a node).
+                panning: 'avoid nodes',
+                zooming: 10 //zoom speed. higher is more sensible
+            },
+            // Change node and edge styles such as
+            // color and width.
+            // These properties are also set per node
+            // with dollar prefixed data-properties in the
+            // JSON structure.
+            Node: {
+                overridable: true,
+                type: 'sphere',
+                dim: 15,
+                color: '#ffffff'
+            },
+            Edge: {
+                overridable: false,
+                type: 'tube',
+                color: '#111',
+                lineWidth: 3
+            },
+            //Native canvas text styling
+            Label: {
+                type: 'HTML', //Native or HTML
+                size: 10,
+                style: 'bold'
+            },
+            // Add node events
+            Events: {
+                enable: true,
+                type: 'Native',
+                i: 0,
+                onMouseMove: function (node, eventInfo, e) {
+                    //if(this.i++ % 3) return;
+                    var pos = eventInfo.getPos();
+                    Metamaps.Visualize.cameraPosition.x += (pos.x - Metamaps.Visualize.cameraPosition.x) * 0.5;
+                    Metamaps.Visualize.cameraPosition.y += (-pos.y - Metamaps.Visualize.cameraPosition.y) * 0.5;
+                    Metamaps.Visualize.mGraph.plot();
+                },
+                onMouseWheel: function (delta) {
+                    Metamaps.Visualize.cameraPosition.z += -delta * 20;
+                    Metamaps.Visualize.mGraph.plot();
+                },
+                onClick: function () {}
+            },
+            //Number of iterations for the FD algorithm
+            iterations: 200,
+            //Edge length
+            levelDistance: 100
+        },
+        nodeSettings: {
+
+        },
+        edgeSettings: {
+
+        }
+    }, // ForceDirected3D
+    RGraph: {
+        animate: {
+            modes: ['polar'],
+            duration: 800,
+            onComplete: function () {
+                Metamaps.Visualize.mGraph.busy = false;
+            }
+        },
+        // this will just be used to patch the ForceDirected graphsettings with the few things which actually differ
+        background: {
+                //type: 'Metamaps',
+                levelDistance: 200,
+                numberOfCircles: 4,
+                CanvasStyles: {
+                    strokeStyle: '#333',
+                    lineWidth: 1.5
+                }
+        },
+        levelDistance: 200
+    },
+    onMouseEnter: function (edge) {
+        var filtered = edge.getData('alpha') === 0;
+
+        // don't do anything if the edge is filtered
+        // or if the canvas is animating        
+        if (filtered || Metamaps.Visualize.mGraph.busy) return; 
+
+        $('canvas').css('cursor', 'pointer');
+        var edgeIsSelected = Metamaps.Selected.Edges.indexOf(edge);
+        //following if statement only executes if the edge being hovered over is not selected
+        if (edgeIsSelected == -1) {
+            edge.setData('showDesc', true, 'current');
+        }
+
+        edge.setDataset('end', {
+            lineWidth: 4
+        });
+        Metamaps.Visualize.mGraph.fx.animate({
+            modes: ['edge-property:lineWidth'],
+            duration: 100
+        });
+        Metamaps.Visualize.mGraph.plot();
+    }, // onMouseEnter
+    onMouseLeave: function (edge) {
+        if (edge.getData('alpha') === 0) return; // don't do anything if the edge is filtered
+        $('canvas').css('cursor', 'default');
+        var edgeIsSelected = Metamaps.Selected.Edges.indexOf(edge);
+        //following if statement only executes if the edge being hovered over is not selected
+        if (edgeIsSelected == -1) {
+            edge.setData('showDesc', false, 'current');
+        }
+
+        edge.setDataset('end', {
+            lineWidth: 2
+        });
+        Metamaps.Visualize.mGraph.fx.animate({
+            modes: ['edge-property:lineWidth'],
+            duration: 100
+        });
+        Metamaps.Visualize.mGraph.plot();
+    }, // onMouseLeave
+    onMouseMoveHandler: function (node, eventInfo, e) {
+
+        var self = Metamaps.JIT;
+
+        if (Metamaps.Visualize.mGraph.busy) return;
+
+        var node = eventInfo.getNode();
+        var edge = eventInfo.getEdge();
+
+        //if we're on top of a node object, act like there aren't edges under it
+        if (node != false) {
+            if (Metamaps.Mouse.edgeHoveringOver) {
+                self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver);
+            }
+            $('canvas').css('cursor', 'pointer');
+            return;
+        }
+
+        if (edge == false && Metamaps.Mouse.edgeHoveringOver != false) {
+            //mouse not on an edge, but we were on an edge previously
+            self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver);
+        } else if (edge != false && Metamaps.Mouse.edgeHoveringOver == false) {
+            //mouse is on an edge, but there isn't a stored edge
+            self.onMouseEnter(edge);
+        } else if (edge != false && Metamaps.Mouse.edgeHoveringOver != edge) {
+            //mouse is on an edge, but a different edge is stored
+            self.onMouseLeave(Metamaps.Mouse.edgeHoveringOver)
+            self.onMouseEnter(edge);
+        }
+
+        //could be false
+        Metamaps.Mouse.edgeHoveringOver = edge;
+
+        if (!node && !edge) {
+            $('canvas').css('cursor', 'default');
+        }
+    }, // onMouseMoveHandler
+    enterKeyHandler: function () {
+        var creatingMap = Metamaps.GlobalUI.lightbox;
+        if (creatingMap === "newmap" || creatingMap === "forkmap") {
+            Metamaps.GlobalUI.CreateMap.submit();
+        }
+        // this is to submit new topic creation
+        else if (Metamaps.Create.newTopic.beingCreated) {
+            Metamaps.Topic.createTopicLocally();
+        }
+        // to submit new synapse creation 
+        else if (Metamaps.Create.newSynapse.beingCreated) {
+            Metamaps.Synapse.createSynapseLocally();
+        }
+    }, //enterKeyHandler
+    escKeyHandler: function () {
+        Metamaps.Control.deselectAllEdges();
+        Metamaps.Control.deselectAllNodes();
+    }, //escKeyHandler
+    touchPanZoomHandler: function (eventInfo, e) {
+        if (e.touches.length == 1) {
+            var thispos = Metamaps.Touch.touchPos,
+                currentPos = eventInfo.getPos(),
+                canvas = Metamaps.Visualize.mGraph.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;
+            var x = currentPos.x - thispos.x,
+                y = currentPos.y - thispos.y;
+            Metamaps.Touch.touchPos = currentPos;
+            Metamaps.Visualize.mGraph.canvas.translate(x * 1 / sx, y * 1 / sy);
+        } else if (e.touches.length == 2) {
+            var touch1 = e.touches[0];
+            var touch2 = e.touches[1];
+
+            var dist = Metamaps.Util.getDistance({
+                x: touch1.clientX,
+                y: touch1.clientY
+            }, {
+                x: touch2.clientX,
+                y: touch2.clientY
+            });
+
+            if (!lastDist) {
+                lastDist = dist;
+            }
+
+            var scale = dist / lastDist;
+
+            if (8 >= Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale && Metamaps.Visualize.mGraph.canvas.scaleOffsetX * scale >= 1) {
+                Metamaps.Visualize.mGraph.canvas.scale(scale, scale);
+            }
+            if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX < 0.5) {
+                Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(true);
+            } else if (Metamaps.Visualize.mGraph.canvas.scaleOffsetX > 0.5) {
+                Metamaps.Visualize.mGraph.canvas.viz.labels.hideLabels(false);
+            }
+            lastDist = dist;
+        }
+
+    }, // touchPanZoomHandler
+    onDragMoveTopicHandler: function (node, eventInfo, e) {
+
+        var self = Metamaps.JIT;
+
+        // this is used to send nodes that are moving to 
+        // other realtime collaborators on the same map
+        var positionsToSend = {};
+        var topic;
+
+        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (node && !node.nodeFrom) {
+            var pos = eventInfo.getPos();
+            // if it's a left click, or a touch, move the node
+            if (e.touches || (e.button == 0 && !e.altKey && !e.ctrlKey && !e.shiftKey && (e.buttons == 0 || e.buttons == 1 || e.buttons == undefined))) {
+                //if the node dragged isn't already selected, select it
+                var whatToDo = self.handleSelectionBeforeDragging(node, e);
+                if (node.pos.rho || node.pos.rho === 0) {
+                    // this means we're in topic view
+                    var rho = Math.sqrt(pos.x * pos.x + pos.y * pos.y);
+                    var theta = Math.atan2(pos.y, pos.x);
+                    node.pos.setp(theta, rho);
+                } else if (whatToDo == 'only-drag-this-one') {
+                    node.pos.setc(pos.x, pos.y);
+
+                    if (Metamaps.Active.Map) {
+                        topic = node.getData('topic');
+                        // we use the topic ID not the node id
+                        // because we can't depend on the node id
+                        // to be the same as on other collaborators
+                        // maps
+                        positionsToSend[topic.id] = pos;
+                        $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]);
+                    }
+                } else {
+                    var len = Metamaps.Selected.Nodes.length;
+
+                    //first define offset for each node
+                    var xOffset = new Array();
+                    var yOffset = new Array();
+                    for (var i = 0; i < len; i += 1) {
+                        var n = Metamaps.Selected.Nodes[i];
+                        xOffset[i] = n.pos.x - node.pos.x;
+                        yOffset[i] = n.pos.y - node.pos.y;
+                    } //for
+
+                    for (var i = 0; i < len; i += 1) {
+                        var n = Metamaps.Selected.Nodes[i];
+                        var x = pos.x + xOffset[i];
+                        var y = pos.y + yOffset[i];
+                        n.pos.setc(x, y);
+
+                        if (Metamaps.Active.Map) {
+                            topic = n.getData('topic');
+                            // we use the topic ID not the node id
+                            // because we can't depend on the node id
+                            // to be the same as on other collaborators
+                            // maps
+                            positionsToSend[topic.id] = n.pos;
+                        }
+                    } //for
+
+                    if (Metamaps.Active.Map) {
+                        $(document).trigger(Metamaps.JIT.events.topicDrag, [positionsToSend]);
+                    }
+                } //if
+
+                if (whatToDo == 'deselect') {
+                    Metamaps.Control.deselectNode(node);
+                }
+                Metamaps.Visualize.mGraph.plot();
+            }
+            // if it's a right click or holding down alt, start synapse creation  ->third option is for firefox
+            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && authorized) {
+                if (tempInit == false) {
+                    tempNode = node;
+                    tempInit = true;
+
+                    Metamaps.Create.newTopic.hide();
+                    Metamaps.Create.newSynapse.hide();
+                    // set the draw synapse start positions
+                    var l = Metamaps.Selected.Nodes.length;
+                    if (l > 0) {
+                        for (var i = l - 1; i >= 0; i -= 1) {
+                            var n = Metamaps.Selected.Nodes[i];
+                            Metamaps.Mouse.synapseStartCoordinates.push({
+                                x: n.pos.getc().x,
+                                y: n.pos.getc().y
+                            });
+                        }
+                    } else {
+                        Metamaps.Mouse.synapseStartCoordinates = [{
+                            x: tempNode.pos.getc().x,
+                            y: tempNode.pos.getc().y
+                        }];
+                    }
+                    Metamaps.Mouse.synapseEndCoordinates = {
+                        x: pos.x,
+                        y: pos.y
+                    };
+                }
+                //
+                temp = eventInfo.getNode();
+                if (temp != false && temp.id != node.id && Metamaps.Selected.Nodes.indexOf(temp) == -1) { // this means a Node has been returned
+                    tempNode2 = temp;
+                    
+                    Metamaps.Mouse.synapseEndCoordinates = {
+                        x: tempNode2.pos.getc().x,
+                        y: tempNode2.pos.getc().y
+                    };
+
+                    // before making the highlighted one bigger, make sure all the others are regular size
+                    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                        n.setData('dim', 25, 'current');
+                    });
+                    temp.setData('dim', 35, 'current');
+                    Metamaps.Visualize.mGraph.plot();
+                } else if (!temp) {
+                    tempNode2 = null;
+                    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                        n.setData('dim', 25, 'current');
+                    });
+                    //pop up node creation :)
+                    var myX = e.clientX - 110;
+                    var myY = e.clientY - 30;
+                    $('#new_topic').css('left', myX + "px");
+                    $('#new_topic').css('top', myY + "px");
+                    Metamaps.Create.newTopic.x = eventInfo.getPos().x;
+                    Metamaps.Create.newTopic.y = eventInfo.getPos().y;
+                    Metamaps.Visualize.mGraph.plot();
+
+                    Metamaps.Mouse.synapseEndCoordinates = {
+                        x: pos.x,
+                        y: pos.y
+                    };
+                }
+            }
+            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && Metamaps.Active.Topic) {
+                Metamaps.GlobalUI.notifyUser("Cannot create in Topic view.");
+            }
+            else if ((e.button == 2 || (e.button == 0 && e.altKey) || e.buttons == 2) && !authorized) {
+                Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            }
+        }
+    }, // onDragMoveTopicHandler
+    onDragCancelHandler: function (node, eventInfo, e) {
+        tempNode = null;
+        if (tempNode2) tempNode2.setData('dim', 25, 'current');
+        tempNode2 = null;
+        tempInit = false;
+        // reset the draw synapse positions to false
+        Metamaps.Mouse.synapseStartCoordinates = [];
+        Metamaps.Mouse.synapseEndCoordinates = null;
+        Metamaps.Visualize.mGraph.plot();
+    }, // onDragCancelHandler
+    onDragEndTopicHandler: function (node, eventInfo, e) {
+        var midpoint = {}, pixelPos, mapping;
+
+        if (tempInit && tempNode2 == null) {
+            // this means you want to add a new topic, and then a synapse
+            Metamaps.Create.newTopic.addSynapse = true;
+            Metamaps.Create.newTopic.open();
+        } else if (tempInit && tempNode2 != null) {
+            // this means you want to create a synapse between two existing topics
+            Metamaps.Create.newTopic.addSynapse = false;
+            Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
+            Metamaps.Create.newSynapse.topic2id = tempNode2.getData('topic').id;
+            tempNode2.setData('dim', 25, 'current');
+            Metamaps.Visualize.mGraph.plot();
+            midpoint.x = tempNode.pos.getc().x + (tempNode2.pos.getc().x - tempNode.pos.getc().x) / 2;
+            midpoint.y = tempNode.pos.getc().y + (tempNode2.pos.getc().y - tempNode.pos.getc().y) / 2;
+            pixelPos = Metamaps.Util.coordsToPixels(midpoint);
+            $('#new_synapse').css('left', pixelPos.x + "px");
+            $('#new_synapse').css('top', pixelPos.y + "px");
+            Metamaps.Create.newSynapse.open();
+            tempNode = null;
+            tempNode2 = null;
+            tempInit = false;
+        } else if (!tempInit && node && !node.nodeFrom) {
+            // this means you dragged an existing node, autosave that to the database
+
+            // check whether to save mappings
+            var checkWhetherToSave = function() {
+                var map = Metamaps.Active.Map;
+
+                if (!map) return false;
+
+                var mapper = Metamaps.Active.Mapper;
+                // this case
+                // covers when it is a public map owned by you
+                // and also when it's a private map
+                var activeMappersMap = map.authorizePermissionChange(mapper); 
+                var commonsMap = map.get('permission') === 'commons';
+                var realtimeOn = Metamaps.Realtime.status;
+
+                // don't save if commons map, and you have realtime off, 
+                // even if you're map creator
+                return map && mapper && ((commonsMap && realtimeOn) || (activeMappersMap && !commonsMap));
+            }
+
+            if (checkWhetherToSave()) {
+                mapping = node.getData('mapping');
+                mapping.save({
+                    xloc: node.getPos().x,
+                    yloc: node.getPos().y
+                });
+                // also save any other selected nodes that also got dragged along
+                var l = Metamaps.Selected.Nodes.length;
+                for (var i = l - 1; i >= 0; i -= 1) {
+                    var n = Metamaps.Selected.Nodes[i];
+                    if (n !== node) {
+                        mapping = n.getData('mapping');
+                        mapping.save({
+                            xloc: n.getPos().x,
+                            yloc: n.getPos().y
+                        });
+                    }
+                };
+            }
+        }
+    }, //onDragEndTopicHandler
+    canvasClickHandler: function (canvasLoc, e) {
+        //grab the location and timestamp of the click 
+        var storedTime = Metamaps.Mouse.lastCanvasClick;
+        var now = Date.now(); //not compatible with IE8 FYI 
+        Metamaps.Mouse.lastCanvasClick = now;
+
+        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE && !Metamaps.Mouse.didPan) {
+            if (Metamaps.Active.Map && !authorized) {
+                Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+                return;
+            }
+            else if (Metamaps.Active.Topic) {
+                Metamaps.GlobalUI.notifyUser("Cannot create in Topic view.");
+                return;
+            }
+            // DOUBLE CLICK
+            //pop up node creation :) 
+            Metamaps.Create.newTopic.addSynapse = false;
+            Metamaps.Create.newTopic.x = canvasLoc.x;
+            Metamaps.Create.newTopic.y = canvasLoc.y;
+            $('#new_topic').css('left', e.clientX + "px");
+            $('#new_topic').css('top', e.clientY + "px");
+            Metamaps.Create.newTopic.open();
+        } else if (!Metamaps.Mouse.didPan) {
+            // SINGLE CLICK, no pan
+            Metamaps.Filter.close();
+            Metamaps.TopicCard.hideCard();
+            Metamaps.SynapseCard.hideCard();
+            Metamaps.Create.newTopic.hide();
+            Metamaps.Create.newSynapse.hide();
+            $('.rightclickmenu').remove();
+            // reset the draw synapse positions to false
+            Metamaps.Mouse.synapseStartCoordinates = [];
+            Metamaps.Mouse.synapseEndCoordinates = null;
+            tempInit = false;
+            tempNode = null;
+            tempNode2 = null;
+            if (!e.ctrlKey && !e.shiftKey) {
+                Metamaps.Control.deselectAllEdges();
+                Metamaps.Control.deselectAllNodes();
+            }
+        }
+    }, //canvasClickHandler 
+    nodeDoubleClickHandler: function (node, e) {
+
+        Metamaps.TopicCard.showCard(node);
+
+    }, // nodeDoubleClickHandler
+    edgeDoubleClickHandler: function (adj, e) {
+
+        Metamaps.SynapseCard.showCard(adj, e);
+
+    }, // nodeDoubleClickHandler
+    nodeWasDoubleClicked: function () {
+        //grab the timestamp of the click 
+        var storedTime = Metamaps.Mouse.lastNodeClick;
+        var now = Date.now(); //not compatible with IE8 FYI 
+        Metamaps.Mouse.lastNodeClick = now;
+
+        if (now - storedTime < Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE) {
+            return true;
+        } else {
+            return false;
+        }
+    }, //nodeWasDoubleClicked;
+    handleSelectionBeforeDragging: function (node, e) {
+        // four cases:
+        // 1 nothing is selected, so pretend you aren't selecting
+        // 2 others are selected only and shift, so additionally select this one
+        // 3 others are selected only, no shift: drag only this one
+        // 4 this node and others were selected, so drag them (just return false)
+        //return value: deselect node again after?
+        if (Metamaps.Selected.Nodes.length == 0) {
+		     return 'only-drag-this-one';
+        }
+        if (Metamaps.Selected.Nodes.indexOf(node) == -1) {
+            if (e.shiftKey) {
+                Metamaps.Control.selectNode(node,e);
+                return 'nothing';
+            } else {
+                return 'only-drag-this-one';
+            }
+        }
+        return 'nothing'; //case 4?
+    }, //  handleSelectionBeforeDragging
+    selectWithBox: function (e) {
+
+        var sX = Metamaps.Mouse.boxStartCoordinates.x,
+            sY = Metamaps.Mouse.boxStartCoordinates.y,
+            eX = Metamaps.Mouse.boxEndCoordinates.x,
+            eY = Metamaps.Mouse.boxEndCoordinates.y;
+		
+		if(!e.shiftKey){
+			Metamaps.Control.deselectAllNodes();
+			Metamaps.Control.deselectAllEdges();
+		}
+
+		//select all nodes that are within the box
+        Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+            var x = n.pos.x,
+                y = n.pos.y;
+
+            if ((sX < x && x < eX && sY < y && y < eY) || (sX > x && x > eX && sY > y && y > eY) || (sX > x && x > eX && sY < y && y < eY) || (sX < x && x < eX && sY > y && y > eY)) {
+                if(e.shiftKey){
+					if(n.selected){
+						Metamaps.Control.deselectNode(n);
+					}
+					else{
+						Metamaps.Control.selectNode(n,e);
+					}
+				}
+				else{
+					Metamaps.Control.selectNode(n,e);
+				}
+            }
+        });
+
+		//Convert selection box coordinates to traditional coordinates (+,+) in upper right
+		sY = -1 * sY;
+		eY = -1 * eY
+
+        var edgesToToggle = [];
+        Metamaps.Synapses.each(function(synapse) {
+            var e = synapse.get('edge');
+            if (edgesToToggle.indexOf(e) === -1) {
+                edgesToToggle.push(e);
+            }
+        });
+		edgesToToggle.forEach(function(edge) {
+			var fromNodeX = edge.nodeFrom.pos.x;
+			var fromNodeY = -1 * edge.nodeFrom.pos.y;
+			var toNodeX = edge.nodeTo.pos.x;
+			var toNodeY = -1 * edge.nodeTo.pos.y;
+
+            var maxX = fromNodeX;
+			var maxY = fromNodeY;
+			var minX = fromNodeX;
+			var minY = fromNodeY;
+			
+			//Correct maxX, MaxY values
+			(toNodeX > maxX) ? (maxX = toNodeX):(minX = toNodeX);
+			(toNodeY > maxY) ? (maxY = toNodeY):(minY = toNodeY);
+			
+			var maxBoxX = sX;
+			var maxBoxY = sY;
+			var minBoxX = sX;
+			var minBoxY = sY;
+			
+			//Correct maxBoxX, maxBoxY values
+			(eX > maxBoxX) ? (maxBoxX = eX):(minBoxX = eX);
+			(eY > maxBoxY) ? (maxBoxY = eY):(minBoxY = eY);
+			
+			//Find the slopes from the synapse fromNode to the 4 corners of the selection box
+			var slopes = [];
+			slopes.push( (sY - fromNodeY) / (sX - fromNodeX) );
+			slopes.push( (sY - fromNodeY) / (eX - fromNodeX) );
+			slopes.push( (eY - fromNodeY) / (eX - fromNodeX) );
+			slopes.push( (eY - fromNodeY) / (sX - fromNodeX) );
+			
+			var minSlope = slopes[0];
+			var maxSlope = slopes[0];
+			slopes.forEach(function(entry){
+				if(entry > maxSlope) maxSlope = entry;
+				if(entry < minSlope) minSlope = entry;					
+			});
+			
+			//Find synapse-in-question's slope
+			var synSlope = (toNodeY - fromNodeY) / (toNodeX - fromNodeX);
+			var b = fromNodeY - synSlope * fromNodeX;
+
+            //Use the selection box edges as test cases for synapse intersection
+			var testX = sX;
+			var testY = synSlope * testX + b;
+
+            var selectTest;
+			
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
+				selectTest = true;
+			}
+			
+			testX = eX;
+			testY = synSlope * testX + b;
+			
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testY >= minBoxY && testY <= maxBoxY){
+				selectTest = true;
+			}
+			
+			testY = sY;
+			testX = (testY - b)/synSlope;
+			
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
+				selectTest = true;
+			}
+			
+			testY = eY;
+			testX = (testY - b)/synSlope;
+			
+			if(testX >= minX && testX <= maxX && testY >= minY && testY <= maxY && testX >= minBoxX && testX <= maxBoxX){
+				selectTest = true;
+			}
+
+            //Case where the synapse is wholly enclosed in the seldction box
+            if(fromNodeX >= minBoxX && fromNodeX <= maxBoxX && fromNodeY >= minBoxY && fromNodeY <= maxBoxY && toNodeX >= minBoxX && toNodeX <= maxBoxX && toNodeY >= minBoxY && toNodeY <= maxBoxY){
+                selectTest = true;
+            }			
+			
+            //The test synapse was selected!
+
+            if(selectTest){
+                // shiftKey = toggleSelect, otherwise 
+				if(e.shiftKey){
+					if(Metamaps.Selected.Edges.indexOf(edge) != -1 ){
+						Metamaps.Control.deselectEdge(edge);
+					}
+					else{
+						Metamaps.Control.selectEdge(edge);
+					}
+				}
+				else{
+					Metamaps.Control.selectEdge(edge);
+				}
+			}
+		});
+        Metamaps.Mouse.boxStartCoordinates = false;
+        Metamaps.Mouse.boxEndCoordinates = false;
+        Metamaps.Visualize.mGraph.plot();
+    }, // selectWithBox
+    drawSelectBox: function (eventInfo, e) {
+        var ctx = Metamaps.Visualize.mGraph.canvas.getCtx();
+
+        var startX = Metamaps.Mouse.boxStartCoordinates.x,
+            startY = Metamaps.Mouse.boxStartCoordinates.y,
+            currX = eventInfo.getPos().x,
+            currY = eventInfo.getPos().y;
+
+        Metamaps.Visualize.mGraph.canvas.clear();
+        Metamaps.Visualize.mGraph.plot();
+
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(startX, currY);
+        ctx.lineTo(currX, currY);
+        ctx.lineTo(currX, startY);
+        ctx.lineTo(startX, startY);
+        ctx.strokeStyle = "black";
+        ctx.stroke();
+    }, // drawSelectBox
+    selectNodeOnClickHandler: function (node, e) {
+        if (Metamaps.Visualize.mGraph.busy) return;
+
+        var self = Metamaps.JIT;
+
+        // catch right click on mac, which is often like ctrl+click
+        if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
+            self.selectNodeOnRightClickHandler(node, e)
+            return;
+        }
+
+        // if on a topic page, let alt+click center you on a new topic
+        if (Metamaps.Active.Topic && e.altKey) {
+            Metamaps.RGraph.centerOn(node.id);
+            return;
+        }
+
+        var check = self.nodeWasDoubleClicked();
+        if (check) {
+            self.nodeDoubleClickHandler(node, e);
+            return;
+        } else {
+            // wait a certain length of time, then check again, then run this code
+            setTimeout(function () {
+                if (!Metamaps.JIT.nodeWasDoubleClicked()) {
+
+                    var nodeAlreadySelected = node.selected;
+
+                    if (!e.shiftKey) {
+                        Metamaps.Control.deselectAllNodes();
+                        Metamaps.Control.deselectAllEdges();
+                    }
+                    
+                    if (nodeAlreadySelected) {
+                        Metamaps.Control.deselectNode(node);
+                    } else {
+                        Metamaps.Control.selectNode(node,e);
+                    }
+                    
+                    //trigger animation to final styles
+                    Metamaps.Visualize.mGraph.fx.animate({
+                        modes: ['edge-property:lineWidth:color:alpha'],
+                        duration: 500
+                    });
+                    Metamaps.Visualize.mGraph.plot();
+                }
+            }, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE);
+        }
+    }, //selectNodeOnClickHandler
+    selectNodeOnRightClickHandler: function (node, e) {
+        // the 'node' variable is a JIT node, the one that was clicked on
+        // the 'e' variable is the click event
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (Metamaps.Visualize.mGraph.busy) return;
+
+        // select the node
+        Metamaps.Control.selectNode(node, e);
+
+        // delete old right click menu
+        $('.rightclickmenu').remove();
+        // create new menu for clicked on node
+        var rightclickmenu = document.createElement("div");
+        rightclickmenu.className = "rightclickmenu";
+        // add the proper options to the menu
+        var menustring = '<ul>';
+
+        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        var disabled = authorized ? "" : "disabled";
+
+        if (Metamaps.Active.Map) menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh<div class="rc-keyboard">Ctrl+H</div></li>';
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove ' + disabled + '"><div class="rc-icon"></div>Remove from map<div class="rc-keyboard">Ctrl+M</div></li>';
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-delete ' + disabled + '"><div class="rc-icon"></div>Delete<div class="rc-keyboard">Ctrl+D</div></li>';
+        
+
+        if (Metamaps.Active.Topic) {
+            menustring += '<li class="rc-center"><div class="rc-icon"></div>Center this topic</li>';
+        }
+        menustring += '<li class="rc-popout"><div class="rc-icon"></div>Open in new tab</li>';
+        if (Metamaps.Active.Mapper) {
+            var options = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
+                         <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
+                         <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
+                     </ul>';
+
+            menustring += '<li class="rc-spacer"></li>';
+
+            menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + options + '<div class="expandLi"></div></li>';
+
+            var metacodeOptions = $('#metacodeOptions').html();
+
+            menustring += '<li class="rc-metacode"><div class="rc-icon"></div>Change metacode' + metacodeOptions + '<div class="expandLi"></div></li>';
+        }
+        if (Metamaps.Active.Topic) {
+
+            if (!Metamaps.Active.Mapper) {
+                menustring += '<li class="rc-spacer"></li>';
+            }
+
+            // set up the get sibling menu as a "lazy load"
+            // only fill in the submenu when they hover over the get siblings list item
+            var siblingMenu = '<ul id="fetchSiblingList"> \
+                                <li class="fetchAll">All</li> \
+                                <li id="loadingSiblings"></li> \
+                            </ul>';
+            menustring += '<li class="rc-siblings"><div class="rc-icon"></div>Get siblings' + siblingMenu + '<div class="expandLi"></div></li>';
+        }
+
+        menustring += '</ul>';
+        rightclickmenu.innerHTML = menustring;
+
+        // position the menu where the click happened
+        var position = {};
+        var RIGHTCLICK_WIDTH = 300;
+        var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static
+        var SUBMENUS_WIDTH = 256;
+        var MAX_SUBMENU_HEIGHT = 270;
+        var windowWidth = $(window).width();
+        var windowHeight = $(window).height();
+
+        if (windowWidth - e.clientX < SUBMENUS_WIDTH) {
+            position.right = windowWidth - e.clientX;  
+            $(rightclickmenu).addClass('moveMenusToLeft');
+        }
+        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) {
+            position.right = windowWidth - e.clientX;
+        }
+        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH + SUBMENUS_WIDTH) {
+            position.left = e.clientX; 
+            $(rightclickmenu).addClass('moveMenusToLeft');
+        }
+        else position.left = e.clientX;
+
+        if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) {
+            position.bottom = windowHeight - e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) {
+            position.top = e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else position.top = e.clientY;
+
+        $(rightclickmenu).css(position);
+        //add the menu to the page
+        $('#wrapper').append(rightclickmenu);
+
+        // attach events to clicks on the list items
+
+        // delete the selected things from the database
+        if (authorized) {
+            $('.rc-delete').click(function () {
+                $('.rightclickmenu').remove();
+                Metamaps.Control.deleteSelected();
+            });
+        }
+
+        // remove the selected things from the map
+        if (authorized) {
+            $('.rc-remove').click(function () {
+                $('.rightclickmenu').remove();
+                Metamaps.Control.removeSelectedEdges();
+                Metamaps.Control.removeSelectedNodes();
+            });
+        }
+
+        // hide selected nodes and synapses until refresh
+        $('.rc-hide').click(function () {
+            $('.rightclickmenu').remove();
+            Metamaps.Control.hideSelectedEdges();
+            Metamaps.Control.hideSelectedNodes();
+        }); 
+
+        // when in radial, center on the topic you picked
+        $('.rc-center').click(function () {
+            $('.rightclickmenu').remove();
+            Metamaps.Topic.centerOn(node.id);
+        });
+
+        // open the entity in a new tab
+        $('.rc-popout').click(function () {
+            $('.rightclickmenu').remove();
+            var win = window.open('/topics/' + node.id, '_blank');
+            win.focus();
+        });
+
+        // change the permission of all the selected nodes and synapses that you were the originator of
+        $('.rc-permission li').click(function () {
+            $('.rightclickmenu').remove();
+            // $(this).text() will be 'commons' 'public' or 'private'
+            Metamaps.Control.updateSelectedPermissions($(this).text());
+        });
+
+        // change the metacode of all the selected nodes that you have edit permission for
+        $('.rc-metacode li li').click(function () {
+            $('.rightclickmenu').remove();
+            //
+            Metamaps.Control.updateSelectedMetacodes($(this).attr('data-id'));
+        });
+
+
+        // fetch relatives
+        var fetched = false;
+        $('.rc-siblings').hover(function () {
+            if (!fetched) {
+                Metamaps.JIT.populateRightClickSiblings(node);
+                fetched = true;
+            }
+        });
+        $('.rc-siblings .fetchAll').click(function () {
+            $('.rightclickmenu').remove();
+            // data-id is a metacode id
+            Metamaps.Topic.fetchRelatives(node);
+        });
+    }, //selectNodeOnRightClickHandler,
+    populateRightClickSiblings: function(node) {
+        var self = Metamaps.JIT;
+
+        // depending on how many topics are selected, do different things
+        /*if (Metamaps.Selected.Nodes.length > 1) {
+            // we don't bother filling the submenu with 
+            // specific numbers, because there are too many topics
+            // selected to find those numbers
+            $('#loadingSiblings').remove();
+            return;
+        }*/
+
+        var topic = node.getData('topic');
+
+        // add a loading icon for now
+        var loader = new CanvasLoader('loadingSiblings');
+        loader.setColor('#4FC059'); // default is '#000000'
+        loader.setDiameter(15); // default is 40
+        loader.setDensity(41); // default is 40
+        loader.setRange(0.9); // default is 1.3
+        loader.show(); // Hidden by default
+
+        var topics = Metamaps.Topics.map(function(t){ return t.id });
+        var topics_string = topics.join();
+
+        var successCallback = function(data) {
+            $('#loadingSiblings').remove();
+
+            for (var key in data) {
+                var string = Metamaps.Metacodes.get(key).get('name') + ' (' + data[key] + ')';
+                $('#fetchSiblingList').append('<li class="getSiblings" data-id="' + key + '">' + string + '</li>');
+            }
+
+            $('.rc-siblings .getSiblings').click(function () {
+                $('.rightclickmenu').remove();
+                // data-id is a metacode id
+                Metamaps.Topic.fetchRelatives(node, $(this).attr('data-id'));
+            });
+        };
+
+        $.ajax({
+            type: "Get",
+            url: "/topics/" + topic.id + "/relative_numbers.json?network=" + topics_string,
+            success: successCallback,
+            error: function () {
+                
+            }
+        });
+    },
+    selectEdgeOnClickHandler: function (adj, e) {
+        if (Metamaps.Visualize.mGraph.busy) return;
+
+        var self = Metamaps.JIT;
+
+        // catch right click on mac, which is often like ctrl+click
+        if (navigator.platform.indexOf("Mac") != -1 && e.ctrlKey) {
+            self.selectEdgeOnRightClickHandler(adj, e)
+            return;
+        }
+
+        var check = self.nodeWasDoubleClicked();
+        if (check) {
+            self.edgeDoubleClickHandler(adj, e);
+            return;
+        } else {
+            // wait a certain length of time, then check again, then run this code
+            setTimeout(function () {
+                if (!Metamaps.JIT.nodeWasDoubleClicked()) {
+
+                    var edgeAlreadySelected = Metamaps.Selected.Edges.indexOf(adj) !== -1;
+
+                    if (!e.shiftKey) {
+                        Metamaps.Control.deselectAllNodes();
+                        Metamaps.Control.deselectAllEdges();
+                    }
+
+                    if (edgeAlreadySelected) {
+                        Metamaps.Control.deselectEdge(adj);
+                    } else {
+                        Metamaps.Control.selectEdge(adj);
+                    }
+
+                    Metamaps.Visualize.mGraph.plot();
+                }
+            }, Metamaps.Mouse.DOUBLE_CLICK_TOLERANCE);
+        }
+    }, //selectEdgeOnClickHandler
+    selectEdgeOnRightClickHandler: function (adj, e) {
+        // the 'node' variable is a JIT node, the one that was clicked on
+        // the 'e' variable is the click event
+
+        if (adj.getData('alpha') === 0) return; // don't do anything if the edge is filtered
+
+        var authorized;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (Metamaps.Visualize.mGraph.busy) return;
+
+        Metamaps.Control.selectEdge(adj);
+
+        // delete old right click menu
+        $('.rightclickmenu').remove();
+        // create new menu for clicked on node
+        var rightclickmenu = document.createElement("div");
+        rightclickmenu.className = "rightclickmenu";
+
+        // add the proper options to the menu
+        var menustring = '<ul>';
+
+        var authorized = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        var disabled = authorized ? "" : "disabled";
+
+        if (Metamaps.Active.Map) menustring += '<li class="rc-hide"><div class="rc-icon"></div>Hide until refresh<div class="rc-keyboard">Ctrl+H</div></li>';
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-remove ' + disabled + '"><div class="rc-icon"></div>Remove from map<div class="rc-keyboard">Ctrl+M</div></li>';
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-delete ' + disabled + '"><div class="rc-icon"></div>Delete<div class="rc-keyboard">Ctrl+D</div></li>';
+
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) menustring += '<li class="rc-spacer"></li>';
+
+        if (Metamaps.Active.Mapper) {
+            var permOptions = '<ul><li class="changeP toCommons"><div class="rc-perm-icon"></div>commons</li> \
+                         <li class="changeP toPublic"><div class="rc-perm-icon"></div>public</li> \
+                         <li class="changeP toPrivate"><div class="rc-perm-icon"></div>private</li> \
+                     </ul>';
+
+            menustring += '<li class="rc-permission"><div class="rc-icon"></div>Change permissions' + permOptions + '<div class="expandLi"></div></li>';
+        }
+
+        menustring += '</ul>';
+        rightclickmenu.innerHTML = menustring;
+
+        // position the menu where the click happened
+        var position = {};
+        var RIGHTCLICK_WIDTH = 300;
+        var RIGHTCLICK_HEIGHT = 144; // this does vary somewhat, but we can use static
+        var SUBMENUS_WIDTH = 256;
+        var MAX_SUBMENU_HEIGHT = 270;
+        var windowWidth = $(window).width();
+        var windowHeight = $(window).height();
+
+        if (windowWidth - e.clientX < SUBMENUS_WIDTH) {
+            position.right = windowWidth - e.clientX;  
+            $(rightclickmenu).addClass('moveMenusToLeft');
+        }
+        else if (windowWidth - e.clientX < RIGHTCLICK_WIDTH) {
+            position.right = windowWidth - e.clientX;
+        }
+        else position.left = e.clientX;
+
+        if (windowHeight - e.clientY < MAX_SUBMENU_HEIGHT) {
+            position.bottom = windowHeight - e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else if (windowHeight - e.clientY < RIGHTCLICK_HEIGHT + MAX_SUBMENU_HEIGHT) {
+            position.top = e.clientY;
+            $(rightclickmenu).addClass('moveMenusUp');
+        }
+        else position.top = e.clientY;
+
+        $(rightclickmenu).css(position);
+
+        //add the menu to the page
+        $('#wrapper').append(rightclickmenu);
+
+
+        // attach events to clicks on the list items
+
+        // delete the selected things from the database
+        if (authorized) {
+            $('.rc-delete').click(function () {
+                $('.rightclickmenu').remove();
+                Metamaps.Control.deleteSelected();
+            });
+        }
+
+        // remove the selected things from the map
+        if (authorized) {
+            $('.rc-remove').click(function () {
+                $('.rightclickmenu').remove();
+                Metamaps.Control.removeSelectedEdges();
+                Metamaps.Control.removeSelectedNodes();
+            });
+        }
+
+        // hide selected nodes and synapses until refresh
+        $('.rc-hide').click(function () {
+            $('.rightclickmenu').remove();
+            Metamaps.Control.hideSelectedEdges();
+            Metamaps.Control.hideSelectedNodes();
+        });
+
+        // change the permission of all the selected nodes and synapses that you were the originator of
+        $('.rc-permission li').click(function () {
+            $('.rightclickmenu').remove();
+            // $(this).text() will be 'commons' 'public' or 'private'
+            Metamaps.Control.updateSelectedPermissions($(this).text());
+        });
+
+    }, //selectEdgeOnRightClickHandler
+    SmoothPanning: function () {
+
+        var sx = Metamaps.Visualize.mGraph.canvas.scaleOffsetX,
+            sy = Metamaps.Visualize.mGraph.canvas.scaleOffsetY,
+            y_velocity = Metamaps.Mouse.changeInY, // initial y velocity
+            x_velocity = Metamaps.Mouse.changeInX, // initial x velocity
+            easing = 1; // frictional value
+
+        easing = 1;
+        window.clearInterval(panningInt)
+        panningInt = setInterval(function () {
+            myTimer()
+        }, 1);
+
+        function myTimer() {
+            Metamaps.Visualize.mGraph.canvas.translate(x_velocity * easing * 1 / sx, y_velocity * easing * 1 / sy);
+            $(document).trigger(Metamaps.JIT.events.pan);
+            easing = easing * 0.75;
+
+            if (easing < 0.1) window.clearInterval(panningInt);
+        }
+    }, // SmoothPanning
+    renderMidArrow: function (from, to, dim, swap, canvas, placement, newSynapse) {
+        var ctx = canvas.getCtx();
+        // invert edge direction 
+        if (swap) {
+            var tmp = from;
+            from = to;
+            to = tmp;
+        }
+        // vect represents a line from tip to tail of the arrow 
+        var vect = new $jit.Complex(to.x - from.x, to.y - from.y);
+        // scale it 
+        vect.$scale(dim / vect.norm());
+        // compute the midpoint of the edge line 
+        var newX = (to.x - from.x) * placement + from.x;
+        var newY = (to.y - from.y) * placement + from.y;
+        var midPoint = new $jit.Complex(newX, newY);
+
+        // move midpoint by half the "length" of the arrow so the arrow is centered on the midpoint 
+        var arrowPoint = new $jit.Complex((vect.x / 0.7) + midPoint.x, (vect.y / 0.7) + midPoint.y);
+        // compute the tail intersection point with the edge line 
+        var intermediatePoint = new $jit.Complex(arrowPoint.x - vect.x, arrowPoint.y - vect.y);
+        // vector perpendicular to vect 
+        var normal = new $jit.Complex(-vect.y / 2, vect.x / 2);
+        var v1 = intermediatePoint.add(normal);
+        var v2 = intermediatePoint.$add(normal.$scale(-1));
+
+        if (newSynapse) {
+            ctx.strokeStyle = "#4fc059";
+            ctx.lineWidth = 2;
+            ctx.globalAlpha = 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.lineTo(arrowPoint.x, arrowPoint.y);
+        ctx.lineTo(v2.x, v2.y);
+        ctx.stroke();
+    }, // renderMidArrow
+    renderEdgeArrows: function (edgeHelper, adj, synapse, canvas) {
+
+        var self = Metamaps.JIT;
+
+        var directionCat = synapse.get('category');
+        var direction = synapse.getDirection();
+
+        var pos = adj.nodeFrom.pos.getc(true);
+        var posChild = adj.nodeTo.pos.getc(true);
+
+        //plot arrow edge 
+        if (!direction) {
+            // render nothing for this arrow if the direction couldn't be retrieved
+        } else if (directionCat == "none") {
+            edgeHelper.line.render({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, canvas);
+        } else if (directionCat == "both") {
+            self.renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, true, canvas, 0.7);
+            self.renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, false, canvas, 0.7);
+        } else if (directionCat == "from-to") {
+            var inv = (direction[0] != adj.nodeFrom.id);
+            self.renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, inv, canvas, 0.7);
+            self.renderMidArrow({
+                x: pos.x,
+                y: pos.y
+            }, {
+                x: posChild.x,
+                y: posChild.y
+            }, 13, inv, canvas, 0.3);
+        }
+    }, //renderEdgeArrows
+    zoomIn: function (event) {
+        Metamaps.Visualize.mGraph.canvas.scale(1.25,1.25);
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
+    },
+    zoomOut: function (event) {
+        Metamaps.Visualize.mGraph.canvas.scale(0.8,0.8);
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]);
+    },
+    centerMap: function (canvas) {
+        var offsetScale = canvas.scaleOffsetX;
+                
+        canvas.scale(1/offsetScale,1/offsetScale);
+
+        var offsetX = canvas.translateOffsetX;
+        var offsetY = canvas.translateOffsetY;
+
+        canvas.translate(-1*offsetX,-1*offsetY);
+    },
+    zoomToBox: function (event) {
+        var sX = Metamaps.Mouse.boxStartCoordinates.x,
+            sY = Metamaps.Mouse.boxStartCoordinates.y,
+            eX = Metamaps.Mouse.boxEndCoordinates.x,
+            eY = Metamaps.Mouse.boxEndCoordinates.y;
+
+        var canvas = Metamaps.Visualize.mGraph.canvas;
+        Metamaps.JIT.centerMap(canvas);
+
+        var height = $(document).height(),
+            width = $(document).width();
+
+        var spanX = Math.abs(sX - eX);
+        var spanY = Math.abs(sY - eY);
+        var ratioX = width / spanX;
+        var ratioY = height / spanY;
+
+        var newRatio = Math.min(ratioX,ratioY);
+
+        if(canvas.scaleOffsetX *newRatio<= 5 && canvas.scaleOffsetX*newRatio >= 0.2){
+            canvas.scale(newRatio,newRatio);
+        }
+        else if(canvas.scaleOffsetX * newRatio > 5){
+            newRatio = 5/ canvas.scaleOffsetX;
+            canvas.scale(newRatio,newRatio);
+        }
+        else{
+            newRatio = 0.2/ canvas.scaleOffsetX;
+            canvas.scale(newRatio,newRatio);
+        } 
+
+        var cogX = (sX + eX)/2;
+        var cogY = (sY + eY)/2;
+
+        canvas.translate(-1* cogX, -1* cogY);
+        $(document).trigger(Metamaps.JIT.events.zoom, [event]); 
+
+        Metamaps.Mouse.boxStartCoordinates = false;
+        Metamaps.Mouse.boxEndCoordinates = false;
+        Metamaps.Visualize.mGraph.plot();
+        
+    },
+    zoomExtents: function (event, canvas, denySelected) {
+        Metamaps.JIT.centerMap(canvas);
+        var height = canvas.getSize().height,
+            width = canvas.getSize().width,
+            maxX, minX, maxY, minY, counter = 0;
+
+        
+        if (!denySelected && Metamaps.Selected.Nodes.length > 0) {
+            var nodes = Metamaps.Selected.Nodes;
+        }
+        else {
+            var nodes = _.values(Metamaps.Visualize.mGraph.graph.nodes);
+        }
+
+        if(nodes.length > 1){
+            nodes.forEach(function (n) {
+                var x = n.pos.x,
+                    y = n.pos.y;
+
+                if (counter == 0 && n.getData('alpha') == 1){
+                    maxX = x;
+                    minX = x; 
+                    maxY = y;
+                    minY = y; 
+                }
+
+                var arrayOfLabelLines = Metamaps.Util.splitLine(n.name, 30).split('\n'),
+                    dim = n.getData('dim'),
+                    ctx = canvas.getCtx();
+
+                var height = 25 * arrayOfLabelLines.length;
+
+                var index, lineWidths = [];
+                for (index = 0; index < arrayOfLabelLines.length; ++index) {
+                    lineWidths.push(ctx.measureText(arrayOfLabelLines[index]).width)
+                }
+                var width = Math.max.apply(null, lineWidths) + 8;
+
+                // only adjust these values if the node is not filtered
+                if (n.getData('alpha') == 1) {
+                    maxX = Math.max(x + width /2,maxX);
+                    maxY = Math.max(y + n.getData("height") + 5 + height,maxY);
+                    minX = Math.min(x - width /2,minX);
+                    minY = Math.min(y - dim,minY);
+
+                    counter++;
+                }
+            });
+
+            var spanX = maxX - minX;
+            var spanY = maxY - minY;
+            var ratioX = spanX / width;
+            var ratioY = spanY / height;
+
+            var cogX = (maxX + minX)/2;
+            var cogY = (maxY + minY)/2;
+
+            canvas.translate(-1* cogX, -1* cogY);
+
+            var newRatio = Math.max(ratioX,ratioY);
+            var scaleMultiplier = 1/newRatio*0.9;
+
+            if(canvas.scaleOffsetX *scaleMultiplier<= 3 && canvas.scaleOffsetX*scaleMultiplier >= 0.2){
+                canvas.scale(scaleMultiplier,scaleMultiplier);
+            }
+            else if(canvas.scaleOffsetX * scaleMultiplier > 3){
+                scaleMultiplier = 3/ canvas.scaleOffsetX;
+                canvas.scale(scaleMultiplier,scaleMultiplier);
+            }
+            else{
+                scaleMultiplier = 0.2/ canvas.scaleOffsetX;
+                canvas.scale(scaleMultiplier,scaleMultiplier);
+            }
+            
+            $(document).trigger(Metamaps.JIT.events.zoom, [event]);
+        }
+        else if(nodes.length == 1){
+            nodes.forEach(function (n) {
+                var x = n.pos.x,
+                    y = n.pos.y;
+
+                canvas.translate(-1* x, -1* y);
+                $(document).trigger(Metamaps.JIT.events.zoom, [event]); 
+            });
+        }
+    }
+};
diff --git a/app/assets/javascripts/src/Metamaps.Router.js.erb b/app/assets/javascripts/src/Metamaps.Router.js.erb
index 9565de95..6558cdbf 100644
--- a/app/assets/javascripts/src/Metamaps.Router.js.erb
+++ b/app/assets/javascripts/src/Metamaps.Router.js.erb
@@ -1,262 +1,262 @@
-(function () {
-
-    Metamaps.currentPage = "";
-
-    var Router = Backbone.Router.extend({
-        routes: {
-            "": "home", // #home
-            "explore/:section": "explore", // #explore/active
-            "explore/:section/:id": "explore", // #explore/mapper/1234
-            "maps/:id": "maps" // #maps/7
-        },
-        home: function () {
-            clearTimeout(Metamaps.routerTimeoutId);
-
-            if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps';
-            else document.title = 'Home | Metamaps';
-
-            Metamaps.currentSection = "";
-            Metamaps.currentPage = "";
-            $('.wrapper').removeClass('mapPage topicPage');
-
-            var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage";
-            $('.wrapper').addClass(classes);
-
-            var navigate = function() {
-                Metamaps.routerTimeoutId = setTimeout(function() {
-                    Metamaps.Router.navigate("");
-                }, 300);
-            };
-            // all this only for the logged in home page
-            if (Metamaps.Active.Mapper) {
-                
-                Metamaps.Famous.yield.hide();
-                
-                Metamaps.Famous.explore.set('active');
-                Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
-                Metamaps.Famous.explore.show();
-
-                Metamaps.Famous.maps.show();
-
-                Metamaps.GlobalUI.Search.open();
-                Metamaps.GlobalUI.Search.lock();
-
-                Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
-                if (Metamaps.Maps.Active.length === 0) {
-                    Metamaps.Maps.Active.getMaps(navigate); // this will trigger an explore maps render
-                }
-                else {
-                    Metamaps.Views.exploreMaps.render(navigate);
-                }
-            }
-            // logged out home page
-            else {
-                
-                Metamaps.Famous.yield.show();
-                
-                Metamaps.Famous.explore.hide();
-
-                Metamaps.GlobalUI.Search.unlock();
-                Metamaps.GlobalUI.Search.close(0, true);
-
-                Metamaps.Famous.maps.hide();
-                Metamaps.routerTimeoutId = setTimeout(navigate, 500);
-            }
-
-            Metamaps.Famous.viz.hide();
-            Metamaps.Map.end();
-            Metamaps.Topic.end();
-            Metamaps.Active.Map = null;
-            Metamaps.Active.Topic = null;
-        },
-        explore: function (section, id) {
-            clearTimeout(Metamaps.routerTimeoutId);
-
-            // just capitalize the variable section
-            // either 'featured', 'mapper', or 'active'
-            var capitalize = section.charAt(0).toUpperCase() + section.slice(1);
-            
-            if (section === "featured" || section === "active") {
-                document.title = 'Explore ' + capitalize + ' Maps | Metamaps';
-            }
-            else if (section === "mapper") {
-                $.ajax({
-                    url: "/users/" + id + ".json",
-                    success: function (response) {
-                        document.title = response.name + ' | Metamaps';
-                    },
-                    error: function () {
-                        
-                    }
-                });
-            }
-            else if (section === "mine") {
-                document.title = 'Explore My Maps | Metamaps';
-            }
-
-            $('.wrapper').removeClass('homePage mapPage topicPage');
-            $('.wrapper').addClass('explorePage');
-            
-            Metamaps.currentSection = "explore";
-            Metamaps.currentPage = section;
-
-            // this will mean it's a mapper page being loaded
-            if (id) {
-                if (Metamaps.Maps.Mapper.mapperId !== id) {
-                    // empty the collection if we are trying to load the maps 
-                    // collection of a different mapper than we had previously
-                    Metamaps.Maps.Mapper.reset();
-                    Metamaps.Maps.Mapper.page = 1;
-                }
-                Metamaps.Maps.Mapper.mapperId = id;
-            }
-
-            Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
-
-            var navigate = function(){
-                var path = "/explore/" + Metamaps.currentPage;
-
-                // alter url if for mapper profile page
-                if (Metamaps.currentPage == "mapper") {
-                    path += "/" + Metamaps.Maps.Mapper.mapperId;
-                }
-
-                Metamaps.Router.navigate(path);
-            };
-            var navigateTimeout = function() {
-                Metamaps.routerTimeoutId = setTimeout(navigate, 300);
-            };
-            if (Metamaps.Maps[capitalize].length === 0) {
-                Metamaps.Loading.show();
-                setTimeout(function(){
-                    Metamaps.Maps[capitalize].getMaps(navigate); // this will trigger an explore maps render
-                }, 300); // wait 300 milliseconds till the other animations are done to do the fetch 
-            }
-            else {
-                if (id) {
-                    Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout);
-                }
-                else {
-                    Metamaps.Views.exploreMaps.render(navigateTimeout);
-                }
-            }
-
-            Metamaps.GlobalUI.Search.open();
-            Metamaps.GlobalUI.Search.lock();
-            
-            Metamaps.Famous.yield.hide();
-
-            Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
-            Metamaps.Famous.maps.show();
-            Metamaps.Famous.explore.set(section, id);
-            Metamaps.Famous.explore.show();
-
-            Metamaps.Famous.viz.hide();
-            Metamaps.Map.end();
-            Metamaps.Topic.end();
-            Metamaps.Active.Map = null;
-            Metamaps.Active.Topic = null;
-        },
-        maps: function (id) {
-            clearTimeout(Metamaps.routerTimeoutId);
-
-            document.title = 'Map ' + id + ' | Metamaps';
-            
-            Metamaps.currentSection = "map";
-            Metamaps.currentPage = id;
-
-            $('.wrapper').removeClass('homePage explorePage topicPage');
-            $('.wrapper').addClass('mapPage');
-            // another class will be added to wrapper if you 
-            // can edit this map '.canEditMap'
-
-            Metamaps.Famous.yield.hide();
-            Metamaps.Famous.maps.hide();
-            Metamaps.Famous.explore.hide();
-
-            // clear the visualization, if there was one, before showing its div again
-            if (Metamaps.Visualize.mGraph) {
-                Metamaps.Visualize.mGraph.graph.empty();
-                Metamaps.Visualize.mGraph.plot();
-                Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas);
-            }
-            Metamaps.Famous.viz.show();
-            Metamaps.Topic.end();
-            Metamaps.Active.Topic = null;
-
-            Metamaps.GlobalUI.Search.unlock();
-            Metamaps.GlobalUI.Search.close(0, true);
-
-            Metamaps.Loading.show();
-            Metamaps.Map.end();
-            Metamaps.Map.launch(id);
-        },
-        topics: function (id) {
-            clearTimeout(Metamaps.routerTimeoutId);
-            
-            document.title = 'Topic ' + id + ' | Metamaps';
-            
-            Metamaps.currentSection = "topic";
-            Metamaps.currentPage = id;
-
-            $('.wrapper').removeClass('homePage explorePage mapPage');
-            $('.wrapper').addClass('topicPage');
-
-            Metamaps.Famous.yield.hide();
-            Metamaps.Famous.maps.hide();
-            Metamaps.Famous.explore.hide();
-
-            // clear the visualization, if there was one, before showing its div again
-            if (Metamaps.Visualize.mGraph) {
-                Metamaps.Visualize.mGraph.graph.empty();
-                Metamaps.Visualize.mGraph.plot();
-                Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas);
-            }
-            Metamaps.Famous.viz.show();
-            Metamaps.Map.end();
-            Metamaps.Active.Map = null;
-
-            Metamaps.GlobalUI.Search.unlock();
-            Metamaps.GlobalUI.Search.close(0, true);
-
-            Metamaps.Topic.end();
-            Metamaps.Topic.launch(id);
-        }
-    });
-    
-    Metamaps.Router = new Router();
-
-
-    Metamaps.Router.intercept = function (evt) {
-        var segments;
-
-        var href = {
-            prop: $(this).prop("href"),
-            attr: $(this).attr("href")
-        };
-        var root = location.protocol + "//" + location.host + Backbone.history.options.root;
-        
-        if (href.prop && href.prop === root) href.attr = "";
-        
-        if (href.prop && href.prop.slice(0, root.length) === root) {
-            evt.preventDefault();
-
-            segments = href.attr.split('/');
-            segments.splice(0,1); // pop off the element created by the first /
-
-            if (href.attr === "") Metamaps.Router.home();
-            else {
-                Metamaps.Router[segments[0]](segments[1], segments[2]);
-            }
-        }
-    };
-
-    Metamaps.Router.init = function () {
-        Backbone.history.start({
-            silent: true,
-            pushState: true,
-            root: '/'
-        });
-        $(document).on("click", "a:not([data-bypass])", Metamaps.Router.intercept);
-    };
-})();
+(function () {
+
+    Metamaps.currentPage = "";
+
+    var Router = Backbone.Router.extend({
+        routes: {
+            "": "home", // #home
+            "explore/:section": "explore", // #explore/active
+            "explore/:section/:id": "explore", // #explore/mapper/1234
+            "maps/:id": "maps" // #maps/7
+        },
+        home: function () {
+            clearTimeout(Metamaps.routerTimeoutId);
+
+            if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps';
+            else document.title = 'Home | Metamaps';
+
+            Metamaps.currentSection = "";
+            Metamaps.currentPage = "";
+            $('.wrapper').removeClass('mapPage topicPage');
+
+            var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage";
+            $('.wrapper').addClass(classes);
+
+            var navigate = function() {
+                Metamaps.routerTimeoutId = setTimeout(function() {
+                    Metamaps.Router.navigate("");
+                }, 300);
+            };
+            // all this only for the logged in home page
+            if (Metamaps.Active.Mapper) {
+                
+                Metamaps.Famous.yield.hide();
+                
+                Metamaps.Famous.explore.set('active');
+                Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
+                Metamaps.Famous.explore.show();
+
+                Metamaps.Famous.maps.show();
+
+                Metamaps.GlobalUI.Search.open();
+                Metamaps.GlobalUI.Search.lock();
+
+                Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
+                if (Metamaps.Maps.Active.length === 0) {
+                    Metamaps.Maps.Active.getMaps(navigate); // this will trigger an explore maps render
+                }
+                else {
+                    Metamaps.Views.exploreMaps.render(navigate);
+                }
+            }
+            // logged out home page
+            else {
+                
+                Metamaps.Famous.yield.show();
+                
+                Metamaps.Famous.explore.hide();
+
+                Metamaps.GlobalUI.Search.unlock();
+                Metamaps.GlobalUI.Search.close(0, true);
+
+                Metamaps.Famous.maps.hide();
+                Metamaps.routerTimeoutId = setTimeout(navigate, 500);
+            }
+
+            Metamaps.Famous.viz.hide();
+            Metamaps.Map.end();
+            Metamaps.Topic.end();
+            Metamaps.Active.Map = null;
+            Metamaps.Active.Topic = null;
+        },
+        explore: function (section, id) {
+            clearTimeout(Metamaps.routerTimeoutId);
+
+            // just capitalize the variable section
+            // either 'featured', 'mapper', or 'active'
+            var capitalize = section.charAt(0).toUpperCase() + section.slice(1);
+            
+            if (section === "featured" || section === "active") {
+                document.title = 'Explore ' + capitalize + ' Maps | Metamaps';
+            }
+            else if (section === "mapper") {
+                $.ajax({
+                    url: "/users/" + id + ".json",
+                    success: function (response) {
+                        document.title = response.name + ' | Metamaps';
+                    },
+                    error: function () {
+                        
+                    }
+                });
+            }
+            else if (section === "mine") {
+                document.title = 'Explore My Maps | Metamaps';
+            }
+
+            $('.wrapper').removeClass('homePage mapPage topicPage');
+            $('.wrapper').addClass('explorePage');
+            
+            Metamaps.currentSection = "explore";
+            Metamaps.currentPage = section;
+
+            // this will mean it's a mapper page being loaded
+            if (id) {
+                if (Metamaps.Maps.Mapper.mapperId !== id) {
+                    // empty the collection if we are trying to load the maps 
+                    // collection of a different mapper than we had previously
+                    Metamaps.Maps.Mapper.reset();
+                    Metamaps.Maps.Mapper.page = 1;
+                }
+                Metamaps.Maps.Mapper.mapperId = id;
+            }
+
+            Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
+
+            var navigate = function(){
+                var path = "/explore/" + Metamaps.currentPage;
+
+                // alter url if for mapper profile page
+                if (Metamaps.currentPage == "mapper") {
+                    path += "/" + Metamaps.Maps.Mapper.mapperId;
+                }
+
+                Metamaps.Router.navigate(path);
+            };
+            var navigateTimeout = function() {
+                Metamaps.routerTimeoutId = setTimeout(navigate, 300);
+            };
+            if (Metamaps.Maps[capitalize].length === 0) {
+                Metamaps.Loading.show();
+                setTimeout(function(){
+                    Metamaps.Maps[capitalize].getMaps(navigate); // this will trigger an explore maps render
+                }, 300); // wait 300 milliseconds till the other animations are done to do the fetch 
+            }
+            else {
+                if (id) {
+                    Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout);
+                }
+                else {
+                    Metamaps.Views.exploreMaps.render(navigateTimeout);
+                }
+            }
+
+            Metamaps.GlobalUI.Search.open();
+            Metamaps.GlobalUI.Search.lock();
+            
+            Metamaps.Famous.yield.hide();
+
+            Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
+            Metamaps.Famous.maps.show();
+            Metamaps.Famous.explore.set(section, id);
+            Metamaps.Famous.explore.show();
+
+            Metamaps.Famous.viz.hide();
+            Metamaps.Map.end();
+            Metamaps.Topic.end();
+            Metamaps.Active.Map = null;
+            Metamaps.Active.Topic = null;
+        },
+        maps: function (id) {
+            clearTimeout(Metamaps.routerTimeoutId);
+
+            document.title = 'Map ' + id + ' | Metamaps';
+            
+            Metamaps.currentSection = "map";
+            Metamaps.currentPage = id;
+
+            $('.wrapper').removeClass('homePage explorePage topicPage');
+            $('.wrapper').addClass('mapPage');
+            // another class will be added to wrapper if you 
+            // can edit this map '.canEditMap'
+
+            Metamaps.Famous.yield.hide();
+            Metamaps.Famous.maps.hide();
+            Metamaps.Famous.explore.hide();
+
+            // clear the visualization, if there was one, before showing its div again
+            if (Metamaps.Visualize.mGraph) {
+                Metamaps.Visualize.mGraph.graph.empty();
+                Metamaps.Visualize.mGraph.plot();
+                Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas);
+            }
+            Metamaps.Famous.viz.show();
+            Metamaps.Topic.end();
+            Metamaps.Active.Topic = null;
+
+            Metamaps.GlobalUI.Search.unlock();
+            Metamaps.GlobalUI.Search.close(0, true);
+
+            Metamaps.Loading.show();
+            Metamaps.Map.end();
+            Metamaps.Map.launch(id);
+        },
+        topics: function (id) {
+            clearTimeout(Metamaps.routerTimeoutId);
+            
+            document.title = 'Topic ' + id + ' | Metamaps';
+            
+            Metamaps.currentSection = "topic";
+            Metamaps.currentPage = id;
+
+            $('.wrapper').removeClass('homePage explorePage mapPage');
+            $('.wrapper').addClass('topicPage');
+
+            Metamaps.Famous.yield.hide();
+            Metamaps.Famous.maps.hide();
+            Metamaps.Famous.explore.hide();
+
+            // clear the visualization, if there was one, before showing its div again
+            if (Metamaps.Visualize.mGraph) {
+                Metamaps.Visualize.mGraph.graph.empty();
+                Metamaps.Visualize.mGraph.plot();
+                Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas);
+            }
+            Metamaps.Famous.viz.show();
+            Metamaps.Map.end();
+            Metamaps.Active.Map = null;
+
+            Metamaps.GlobalUI.Search.unlock();
+            Metamaps.GlobalUI.Search.close(0, true);
+
+            Metamaps.Topic.end();
+            Metamaps.Topic.launch(id);
+        }
+    });
+    
+    Metamaps.Router = new Router();
+
+
+    Metamaps.Router.intercept = function (evt) {
+        var segments;
+
+        var href = {
+            prop: $(this).prop("href"),
+            attr: $(this).attr("href")
+        };
+        var root = location.protocol + "//" + location.host + Backbone.history.options.root;
+        
+        if (href.prop && href.prop === root) href.attr = "";
+        
+        if (href.prop && href.prop.slice(0, root.length) === root) {
+            evt.preventDefault();
+
+            segments = href.attr.split('/');
+            segments.splice(0,1); // pop off the element created by the first /
+
+            if (href.attr === "") Metamaps.Router.home();
+            else {
+                Metamaps.Router[segments[0]](segments[1], segments[2]);
+            }
+        }
+    };
+
+    Metamaps.Router.init = function () {
+        Backbone.history.start({
+            silent: true,
+            pushState: true,
+            root: '/'
+        });
+        $(document).on("click", "a:not([data-bypass])", Metamaps.Router.intercept);
+    };
+})();
diff --git a/app/assets/javascripts/src/Metamaps.Views.js.erb b/app/assets/javascripts/src/Metamaps.Views.js.erb
index 372884f4..7074a0d9 100644
--- a/app/assets/javascripts/src/Metamaps.Views.js.erb
+++ b/app/assets/javascripts/src/Metamaps.Views.js.erb
@@ -1,133 +1,133 @@
-(function () {
-    Metamaps.Views = {};
-
-    var initialized = false;
-    
-Metamaps.Views.init = function () {
-
-    Metamaps.Views.MapperCard = Backbone.View.extend({
-
-        template: Hogan.compile( $('#mapperCardTemplate').html() ),
-
-        tagNamea: "div",
-
-        className: "mapper",
-
-        render: function () {
-            this.$el.html( this.template.render(this.model) );
-            return this;
-        }
-    });
-
-    Metamaps.Views.MapCard = Backbone.View.extend({
-
-        template: Hogan.compile( $('#mapCardTemplate').html() ),
-
-        tagName: "div",
-
-        className: "map",
-
-        id: function() {
-            return this.model.id;
-        },
-
-        initialize: function () {
-            this.listenTo(this.model, "change", this.render);
-        },
-
-        render: function () {
-            this.$el.html( this.template.render(this.model.attrForCards()) );
-            return this;
-        }
-
-    });
-
-    var mapsWrapper = Backbone.View.extend({
-
-        initialize: function (opts) {
-            
-        },
-        setCollection: function (collection) {
-            if (this.collection) this.stopListening(this.collection);
-            this.collection = collection;
-            this.listenTo(this.collection, 'add', this.render);
-            this.listenTo(this.collection, 'successOnFetch', this.handleSuccess);
-            this.listenTo(this.collection, 'errorOnFetch', this.handleError);
-        },
-        render: function (mapperObj, cb) {
-            
-            var that = this;
-
-            if (typeof mapperObj === "function") {
-                var cb = mapperObj;
-                mapperObj = null;
-            }
-
-            this.el.innerHTML = "";
-
-            // in case it is a page where we have to display the mapper card
-            if (mapperObj) {
-                var view = new Metamaps.Views.MapperCard({ model: mapperObj });
-
-                that.el.appendChild( view.render().el );
-            }
-
-
-            this.collection.each(function (map) {
-                var view = new Metamaps.Views.MapCard({ model: map });
-
-                that.el.appendChild( view.render().el );
-            });
-            this.$el.append('<div class="clearfloat"></div>');
-            var m = Metamaps.Famous.maps.surf;
-            m.setContent(this.el);
-            
-            var updateHeight = function(){
-                var height = $(that.el).height() + 32 + 56;
-                m.setSize([undefined, height]);
-                Metamaps.Famous.maps.lock = false;
-                if (cb) cb();
-            };
-
-            if (!initialized) {
-                m.deploy(m._currTarget);
-                initialized = true;
-                setTimeout(updateHeight, 100);
-            } else {
-                setTimeout(updateHeight, 100);
-            }
-
-            Metamaps.Loading.hide();
-        },
-        handleSuccess: function (cb) {
-            var that = this;
-
-            if (this.collection && this.collection.id === "mapper") {
-                this.fetchUserThenRender(cb);
-            }
-            else {
-                this.render(cb);
-            }
-        },
-        handleError: function () {
-            console.log('error loading maps!'); //TODO 
-        },
-        fetchUserThenRender: function (cb) {
-            var that = this;
-            // first load the mapper object and then call the render function
-            $.ajax({
-                url: "/users/" + this.collection.mapperId + "/details.json",
-                success: function (response) {
-                    that.render(response, cb);
-                },
-                error: function () {
-                    that.render(cb);
-                }
-            });
-        }
-    });
-
-    Metamaps.Views.exploreMaps = new mapsWrapper();
-};
-
-})();
+(function () {
+    Metamaps.Views = {};
+
+    var initialized = false;
+    
+Metamaps.Views.init = function () {
+
+    Metamaps.Views.MapperCard = Backbone.View.extend({
+
+        template: Hogan.compile( $('#mapperCardTemplate').html() ),
+
+        tagNamea: "div",
+
+        className: "mapper",
+
+        render: function () {
+            this.$el.html( this.template.render(this.model) );
+            return this;
+        }
+    });
+
+    Metamaps.Views.MapCard = Backbone.View.extend({
+
+        template: Hogan.compile( $('#mapCardTemplate').html() ),
+
+        tagName: "div",
+
+        className: "map",
+
+        id: function() {
+            return this.model.id;
+        },
+
+        initialize: function () {
+            this.listenTo(this.model, "change", this.render);
+        },
+
+        render: function () {
+            this.$el.html( this.template.render(this.model.attrForCards()) );
+            return this;
+        }
+
+    });
+
+    var mapsWrapper = Backbone.View.extend({
+
+        initialize: function (opts) {
+            
+        },
+        setCollection: function (collection) {
+            if (this.collection) this.stopListening(this.collection);
+            this.collection = collection;
+            this.listenTo(this.collection, 'add', this.render);
+            this.listenTo(this.collection, 'successOnFetch', this.handleSuccess);
+            this.listenTo(this.collection, 'errorOnFetch', this.handleError);
+        },
+        render: function (mapperObj, cb) {
+            
+            var that = this;
+
+            if (typeof mapperObj === "function") {
+                var cb = mapperObj;
+                mapperObj = null;
+            }
+
+            this.el.innerHTML = "";
+
+            // in case it is a page where we have to display the mapper card
+            if (mapperObj) {
+                var view = new Metamaps.Views.MapperCard({ model: mapperObj });
+
+                that.el.appendChild( view.render().el );
+            }
+
+
+            this.collection.each(function (map) {
+                var view = new Metamaps.Views.MapCard({ model: map });
+
+                that.el.appendChild( view.render().el );
+            });
+            this.$el.append('<div class="clearfloat"></div>');
+            var m = Metamaps.Famous.maps.surf;
+            m.setContent(this.el);
+            
+            var updateHeight = function(){
+                var height = $(that.el).height() + 32 + 56;
+                m.setSize([undefined, height]);
+                Metamaps.Famous.maps.lock = false;
+                if (cb) cb();
+            };
+
+            if (!initialized) {
+                m.deploy(m._currTarget);
+                initialized = true;
+                setTimeout(updateHeight, 100);
+            } else {
+                setTimeout(updateHeight, 100);
+            }
+
+            Metamaps.Loading.hide();
+        },
+        handleSuccess: function (cb) {
+            var that = this;
+
+            if (this.collection && this.collection.id === "mapper") {
+                this.fetchUserThenRender(cb);
+            }
+            else {
+                this.render(cb);
+            }
+        },
+        handleError: function () {
+            console.log('error loading maps!'); //TODO 
+        },
+        fetchUserThenRender: function (cb) {
+            var that = this;
+            // first load the mapper object and then call the render function
+            $.ajax({
+                url: "/users/" + this.collection.mapperId + "/details.json",
+                success: function (response) {
+                    that.render(response, cb);
+                },
+                error: function () {
+                    that.render(cb);
+                }
+            });
+        }
+    });
+
+    Metamaps.Views.exploreMaps = new mapsWrapper();
+};
+
+})();
diff --git a/app/assets/javascripts/src/Metamaps.js.erb b/app/assets/javascripts/src/Metamaps.js.erb
index e7a15775..bef96701 100644
--- a/app/assets/javascripts/src/Metamaps.js.erb
+++ b/app/assets/javascripts/src/Metamaps.js.erb
@@ -1,5417 +1,5417 @@
-var labelType, useGradients, nativeTextSupport, animate;
-
-(function () {
-    var ua = navigator.userAgent,
-        iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
-        typeOfCanvas = typeof HTMLCanvasElement,
-        nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
-        textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
-    //I'm setting this based on the fact that ExCanvas provides text support for IE
-    //and that as of today iPhone/iPad current text support is lame
-    labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
-    nativeTextSupport = labelType == 'Native';
-    useGradients = nativeCanvasSupport;
-    animate = !(iStuff || !nativeCanvasSupport);
-})();
-
-// TODO eliminate these 4 global variables
-var panningInt; // this variable is used to store a 'setInterval' for the Metamaps.JIT.SmoothPanning() function, so that it can be cleared with window.clearInterval
-var tempNode = null,
-    tempInit = false,
-    tempNode2 = null;
-
-Metamaps.Settings = {
-    embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
-    sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database
-    colors: {
-        background: '#344A58',
-        synapses: {
-            normal: '#888888',
-            hover: '#888888',
-            selected: '#FFFFFF'
-        },
-        topics: {
-            selected: '#FFFFFF'
-        },
-        labels: {
-            background: '#18202E',
-            text: '#DDD'
-        }
-    },
-};
-
-Metamaps.Touch = {
-    touchPos: null, // this stores the x and y values of a current touch event
-    touchDragNode: null // this stores a reference to a JIT node that is being dragged
-};
-
-Metamaps.Mouse = {
-    didPan: false,
-    didBoxZoom: false,
-    changeInX: 0,
-    changeInY: 0,
-    edgeHoveringOver: false,
-    boxStartCoordinates: false,
-    boxEndCoordinates: false,
-    synapseStartCoordinates: [],
-    synapseEndCoordinates: null,
-    lastNodeClick: 0,
-    lastCanvasClick: 0,
-    DOUBLE_CLICK_TOLERANCE: 300
-};
-
-Metamaps.Selected = {
-    reset: function () {
-        var self = Metamaps.Selected;
-
-        self.Nodes = [];
-        self.Edges = [];
-    },
-    Nodes: [],
-    Edges: []
-};
-
-/*
- *
- *   BACKBONE
- *
- */
-Metamaps.Backbone.init = function () {
-    var self = Metamaps.Backbone;
-
-    self.Metacode = Backbone.Model.extend({
-        initialize: function () {
-            var image = new Image();
-            image.crossOrigin = "Anonymous";
-            image.src = this.get('icon');
-            this.set('image',image);
-        },
-        prepareLiForFilter: function () {
-            var li = '';
-            li += '<li data-id="' + this.id.toString() + '">';      
-            li += '<img src="' + this.get('icon') + '" data-id="' + this.id.toString() + '"';
-            li += ' alt="' + this.get('name') + '" />';      
-            li += '<p>' + this.get('name').toLowerCase() + '</p></li>';
-            return li;
-        }
-
-    });
-    self.MetacodeCollection = Backbone.Collection.extend({
-        model: this.Metacode,
-        url: '/metacodes',
-        comparator: function (a, b) {
-            a = a.get('name').toLowerCase();
-            b = b.get('name').toLowerCase();
-            return a > b ? 1 : a < b ? -1 : 0;
-        }
-    });
-
-    self.Topic = Backbone.Model.extend({
-        urlRoot: '/topics',
-        blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
-        toJSON: function (options) {
-            return _.omit(this.attributes, this.blacklist);
-        },
-        save: function (key, val, options) {
-
-            var attrs;
-
-            // Handle both `"key", value` and `{key: value}` -style arguments.
-            if (key == null || typeof key === 'object') {
-                attrs = key;
-                options = val;
-            } else {
-                (attrs = {})[key] = val;
-            }
-
-            var newOptions = options || {};
-            var s = newOptions.success;
-
-            var permBefore = this.get('permission');
-
-            newOptions.success = function (model, response, opt) {
-                if (s) s(model, response, opt);
-                model.trigger('saved');
-
-                if (permBefore === 'private' && model.get('permission') !== 'private') {
-                    model.trigger('noLongerPrivate');
-                }
-                else if (permBefore !== 'private' && model.get('permission') === 'private') {
-                    model.trigger('nowPrivate');
-                }
-            };
-            return Backbone.Model.prototype.save.call(this, attrs, newOptions);
-        },
-        initialize: function () {
-            if (this.isNew()) {
-                this.set({
-                    "user_id": Metamaps.Active.Mapper.id,
-                    "desc": '',
-                    "link": '',
-                    "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons'
-                });
-            }
-
-            this.on('changeByOther', this.updateCardView);
-            this.on('change', this.updateNodeView);
-            this.on('saved', this.savedEvent);
-            this.on('nowPrivate', function(){
-                var removeTopicData = {
-                    mappableid: this.id
-                };
-
-                $(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]);
-            });
-            this.on('noLongerPrivate', function(){
-                var newTopicData = {
-                    mappingid: this.getMapping().id,
-                    mappableid: this.id
-                };
-
-                $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
-            });
-
-            this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this);
-
-        },
-        authorizeToEdit: function (mapper) {
-            if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
-            else return false;
-        },
-        authorizePermissionChange: function (mapper) {
-            if (mapper && this.get('user_id') === mapper.get('id')) return true;
-            else return false;
-        },
-        getDate: function () {
-
-        },
-        getMetacode: function () {
-            return Metamaps.Metacodes.get(this.get('metacode_id'));
-        },
-        getMapping: function () {
-
-            if (!Metamaps.Active.Map) return false;
-
-            return Metamaps.Mappings.findWhere({
-                map_id: Metamaps.Active.Map.id,
-                mappable_type: "Topic",
-                mappable_id: this.isNew() ? this.cid : this.id
-            });
-        },
-        createNode: function () {
-            var mapping;
-            var node = {
-                adjacencies: [],
-                id: this.isNew() ? this.cid : this.id,
-                name: this.get('name')
-            };
-
-            if (Metamaps.Active.Map) {
-                mapping = this.getMapping();
-                node.data = {
-                    $mapping: null,
-                    $mappingID: mapping.id
-                };
-            }
-
-            return node;
-        },
-        updateNode: function () {
-            var mapping;
-            var node = this.get('node');
-            node.setData('topic', this);
-
-            if (Metamaps.Active.Map) {
-                mapping = this.getMapping();
-                node.setData('mapping', mapping);
-            }
-
-            return node;
-        },
-        savedEvent: function() {
-            Metamaps.Realtime.sendTopicChange(this);
-        },
-        updateViews: function() {
-            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
-            var node = this.get('node');
-            // update topic card, if this topic is the one open there
-            if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
-                Metamaps.TopicCard.showCard(node);
-            }
-
-            // update the node on the map
-            if (onPageWithTopicCard && node) {
-                node.name = this.get('name');
-                Metamaps.Visualize.mGraph.plot();
-            }
-        },
-        updateCardView: function() {
-            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
-            var node = this.get('node');
-            // update topic card, if this topic is the one open there
-            if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
-                Metamaps.TopicCard.showCard(node);
-            }
-        },
-        updateNodeView: function() {
-            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
-            var node = this.get('node');
-
-            // update the node on the map
-            if (onPageWithTopicCard && node) {
-                node.name = this.get('name');
-                Metamaps.Visualize.mGraph.plot();
-            }
-        }
-    });
-
-    self.TopicCollection = Backbone.Collection.extend({
-        model: self.Topic,
-        url: '/topics'
-    });
-
-    self.Synapse = Backbone.Model.extend({
-        urlRoot: '/synapses',
-        blacklist: ['edge', 'created_at', 'updated_at'],
-        toJSON: function (options) {
-            return _.omit(this.attributes, this.blacklist);
-        },
-        save: function (key, val, options) {
-
-            var attrs;
-
-            // Handle both `"key", value` and `{key: value}` -style arguments.
-            if (key == null || typeof key === 'object') {
-                attrs = key;
-                options = val;
-            } else {
-                (attrs = {})[key] = val;
-            }
-
-            var newOptions = options || {};
-            var s = newOptions.success;
-
-            var permBefore = this.get('permission');
-
-            newOptions.success = function (model, response, opt) {
-                if (s) s(model, response, opt);
-                model.trigger('saved');
-
-                if (permBefore === 'private' && model.get('permission') !== 'private') {
-                    model.trigger('noLongerPrivate');
-                }
-                else if (permBefore !== 'private' && model.get('permission') === 'private') {
-                    model.trigger('nowPrivate');
-                }
-            };
-            return Backbone.Model.prototype.save.call(this, attrs, newOptions);
-        },
-        initialize: function () {
-            if (this.isNew()) {
-                this.set({
-                    "user_id": Metamaps.Active.Mapper.id,
-                    "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons',
-                    "category": "from-to"
-                });
-            }
-
-            this.on('changeByOther', this.updateCardView);
-            this.on('change', this.updateEdgeView);
-            this.on('saved', this.savedEvent);
-            this.on('noLongerPrivate', function(){
-                var newSynapseData = {
-                    mappingid: this.getMapping().id,
-                    mappableid: this.id
-                };
-
-                $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
-            });
-            this.on('nowPrivate', function(){
-                $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
-                    mappableid: this.id
-                }]);
-            });
-
-            this.on('change:desc', Metamaps.Filter.checkSynapses, this);
-        },
-        prepareLiForFilter: function () {
-            var li = '';
-            li += '<li data-id="' + this.get('desc') + '">';      
-            li += '<img src="<%= asset_path('synapse16.png') %>"';
-            li += ' alt="synapse icon" />';      
-            li += '<p>' + this.get('desc') + '</p></li>';
-            return li;
-        },
-        authorizeToEdit: function (mapper) {
-            if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
-            else return false;
-        },
-        authorizePermissionChange: function (mapper) {
-            if (mapper && this.get('user_id') === mapper.get('id')) return true;
-            else return false;
-        },
-        getTopic1: function () {
-            return Metamaps.Topics.get(this.get('node1_id'));
-        },
-        getTopic2: function () {
-            return Metamaps.Topics.get(this.get('node2_id'));
-        },
-        getDirection: function () {
-            var t1 = this.getTopic1(),
-                t2 = this.getTopic2();
-
-            return t1 && t2 ? [
-                    t1.get('node').id,
-                    t2.get('node').id
-                ] : false;
-        },
-        getMapping: function () {
-
-            if (!Metamaps.Active.Map) return false;
-
-            return Metamaps.Mappings.findWhere({
-                map_id: Metamaps.Active.Map.id,
-                mappable_type: "Synapse",
-                mappable_id: this.isNew() ? this.cid : this.id
-            });
-        },
-        createEdge: function () {
-            var mapping, mappingID;
-            var synapseID = this.isNew() ? this.cid : this.id;
-
-            var edge = {
-                nodeFrom: this.get('node1_id'),
-                nodeTo: this.get('node2_id'),
-                data: {
-                    $synapses: [],
-                    $synapseIDs: [synapseID],
-                }
-            };
-
-            if (Metamaps.Active.Map) {
-                mapping = this.getMapping();
-                mappingID = mapping.isNew() ? mapping.cid : mapping.id;
-                edge.data.$mappings = [];
-                edge.data.$mappingIDs = [mappingID];
-            }
-
-            return edge;
-        },
-        updateEdge: function () {
-            var mapping;
-            var edge = this.get('edge');
-            edge.getData('synapses').push(this);
-
-            if (Metamaps.Active.Map) {
-                mapping = this.getMapping();
-                edge.getData('mappings').push(mapping);
-            }
-
-            return edge;
-        },
-        savedEvent: function() {
-            Metamaps.Realtime.sendSynapseChange(this);
-        },
-        updateViews: function() {
-            this.updateCardView();
-            this.updateEdgeView();
-        },
-        updateCardView: function() {
-            var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
-            var edge = this.get('edge');
-
-            // update synapse card, if this synapse is the one open there
-            if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) {
-                Metamaps.SynapseCard.showCard(edge);
-            }
-        },
-        updateEdgeView: function() {
-            var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
-            var edge = this.get('edge');
-
-            // update the edge on the map
-            if (onPageWithSynapseCard && edge) {
-                Metamaps.Visualize.mGraph.plot();
-            }
-        }
-    });
-
-    self.SynapseCollection = Backbone.Collection.extend({
-        model: self.Synapse,
-        url: '/synapses'
-    });
-
-    self.Mapping = Backbone.Model.extend({
-        urlRoot: '/mappings',
-        blacklist: ['created_at', 'updated_at'],
-        toJSON: function (options) {
-            return _.omit(this.attributes, this.blacklist);
-        },
-        initialize: function () {
-            if (this.isNew()) {
-                this.set({
-                    "user_id": Metamaps.Active.Mapper.id,
-                    "map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null
-                });
-            }
-        },
-        getMap: function () {
-            return Metamaps.Map.get(this.get('map_id'));
-        },
-        getTopic: function () {
-            if (this.get('mappable_type') === 'Topic') return Metamaps.Topic.get(this.get('mappable_id'));
-            else return false;
-        },
-        getSynapse: function () {
-            if (this.get('mappable_type') === 'Synapse') return Metamaps.Synapse.get(this.get('mappable_id'));
-            else return false;
-        }
-    });
-
-    self.MappingCollection = Backbone.Collection.extend({
-        model: self.Mapping,
-        url: '/mappings'
-    });
-
-    Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection();
-
-    Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection();
-
-    Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection();
-
-    Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection();
-
-    // this is for topic view
-    Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection();
-
-    if (Metamaps.Active.Map) {
-        Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection();
-
-        Metamaps.Active.Map = new self.Map(Metamaps.Active.Map);
-    }
-
-    if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic);
-
-    //attach collection event listeners
-    self.attachCollectionEvents = function () {
-
-        Metamaps.Topics.on("add remove", function(topic){
-            Metamaps.Map.InfoBox.updateNumbers();
-            Metamaps.Filter.checkMetacodes();
-            Metamaps.Filter.checkMappers();
-        });
-
-        Metamaps.Synapses.on("add remove", function(synapse){
-            Metamaps.Map.InfoBox.updateNumbers();
-            Metamaps.Filter.checkSynapses();
-            Metamaps.Filter.checkMappers();
-        });
-
-        if (Metamaps.Active.Map) {
-            Metamaps.Mappings.on("add remove", function(mapping){
-                Metamaps.Map.InfoBox.updateNumbers();
-                Metamaps.Filter.checkSynapses();
-                Metamaps.Filter.checkMetacodes();
-                Metamaps.Filter.checkMappers();
-            });
-        }
-    }
-    self.attachCollectionEvents();
-}; // end Metamaps.Backbone.init
-
-
-/*
- *
- *   CREATE
- *
- */
-Metamaps.Create = {
-    isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
-    selectedMetacodeSet: null,
-    selectedMetacodeSetIndex: null,
-    selectedMetacodeNames: [],
-    newSelectedMetacodeNames: [],
-    selectedMetacodes: [],
-    newSelectedMetacodes: [],
-    init: function () {
-        var self = Metamaps.Create;
-        self.newTopic.init();
-        self.newSynapse.init();
-
-        //////
-        //////
-        //// SWITCHING METACODE SETS
-
-        $('#metacodeSwitchTabs').tabs({
-            selected: self.selectedMetacodeSetIndex
-        }).addClass("ui-tabs-vertical ui-helper-clearfix");
-        $("#metacodeSwitchTabs .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
-        $('.customMetacodeList li').click(self.toggleMetacodeSelected); // within the custom metacode set tab
-    },
-    toggleMetacodeSelected: function () {
-        var self = Metamaps.Create;
-
-        if ($(this).attr('class') != 'toggledOff') {
-            $(this).addClass('toggledOff');
-            var value_to_remove = $(this).attr('id');
-            var name_to_remove = $(this).attr('data-name');
-            self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(value_to_remove), 1);
-            self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(name_to_remove), 1);
-        } else if ($(this).attr('class') == 'toggledOff') {
-            $(this).removeClass('toggledOff');
-            self.newSelectedMetacodes.push($(this).attr('id'));
-            self.newSelectedMetacodeNames.push($(this).attr('data-name'));
-        }
-    },
-    updateMetacodeSet: function (set, index, custom) {
-
-        if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) {
-            alert('Please select at least one metacode to use!');
-            return false;
-        }
-
-        var codesToSwitchToIds;
-        var metacodeModels = new Metamaps.Backbone.MetacodeCollection();
-        Metamaps.Create.selectedMetacodeSetIndex = index;
-        Metamaps.Create.selectedMetacodeSet = "metacodeset-" + set;
-
-        if (!custom) {
-            codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',');
-            $('.customMetacodeList li').addClass('toggledOff');
-            Metamaps.Create.selectedMetacodes = [];
-            Metamaps.Create.selectedMetacodeNames = [];
-            Metamaps.Create.newSelectedMetacodes = [];
-            Metamaps.Create.newSelectedMetacodeNames = [];
-        }
-        else if (custom) {
-            // uses .slice to avoid setting the two arrays to the same actual array
-            Metamaps.Create.selectedMetacodes = Metamaps.Create.newSelectedMetacodes.slice(0);
-            Metamaps.Create.selectedMetacodeNames = Metamaps.Create.newSelectedMetacodeNames.slice(0);
-            codesToSwitchToIds = Metamaps.Create.selectedMetacodes.slice(0);
-        }
-
-        // sort by name
-        for (var i = 0; i < codesToSwitchToIds.length; i++) {
-            metacodeModels.add( Metamaps.Metacodes.get(codesToSwitchToIds[i]) );
-        };
-        metacodeModels.sort();
-
-        $('#metacodeImg, #metacodeImgTitle').empty();
-        $('#metacodeImg').removeData('cloudcarousel');
-        var newMetacodes = "";
-        metacodeModels.each(function(metacode){
-            newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + metacode.get('icon') + '" data-id="' + metacode.id + '" title="' + metacode.get('name') + '" alt="' + metacode.get('name') + '"/>';
-        });
-
-        $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
-            titleBox: $('#metacodeImgTitle'),
-            yRadius: 40,
-            xRadius: 190,
-            xPos: 170,
-            yPos: 40,
-            speed: 0.3,
-            mouseWheel: true,
-            bringToFront: true
-        });
-
-        Metamaps.GlobalUI.closeLightbox();
-        $('#topic_name').focus();
-
-        var mdata = {
-            "metacodes": {
-                "value": custom ? Metamaps.Create.selectedMetacodes.toString() : Metamaps.Create.selectedMetacodeSet
-            }
-        };
-        $.ajax({
-            type: "POST",
-            dataType: 'json',
-            url: "/user/updatemetacodes",
-            data: mdata,
-            success: function (data) {
-                console.log('selected metacodes saved');
-            },
-            error: function () {
-                console.log('failed to save selected metacodes');
-            }
-        });
-    },
-
-    cancelMetacodeSetSwitch: function () {
-        var self = Metamaps.Create;
-        self.isSwitchingSet = false;
-
-        if (self.selectedMetacodeSet != "metacodeset-custom") {
-            $('.customMetacodeList li').addClass('toggledOff');
-            self.selectedMetacodes = [];
-            self.selectedMetacodeNames = [];
-            self.newSelectedMetacodes = [];
-            self.newSelectedMetacodeNames = [];
-        } else { // custom set is selected
-            // reset it to the current actual selection
-            $('.customMetacodeList li').addClass('toggledOff');
-            for (var i = 0; i < self.selectedMetacodes.length; i++) {
-                $('#' + self.selectedMetacodes[i]).removeClass('toggledOff');
-            };
-            // uses .slice to avoid setting the two arrays to the same actual array
-            self.newSelectedMetacodeNames = self.selectedMetacodeNames.slice(0);
-            self.newSelectedMetacodes = self.selectedMetacodes.slice(0);
-        }
-        $('#metacodeSwitchTabs').tabs("option", "active", self.selectedMetacodeSetIndex);
-        $('#topic_name').focus();
-    },
-    newTopic: {
-        init: function () {
-
-            $('#topic_name').keyup(function () {
-                Metamaps.Create.newTopic.name = $(this).val();
-            });
-
-            var topicBloodhound = new Bloodhound({
-                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-                queryTokenizer: Bloodhound.tokenizers.whitespace,
-                remote: {
-                    url: '/topics/autocomplete_topic?term=%QUERY',
-                    wildcard: '%QUERY',
-                },
-            });
-
-            // initialize the autocomplete results for the metacode spinner
-            $('#topic_name').typeahead(
-                {
-                    highlight: true,
-                    minLength: 2,
-                },
-                [{
-                    name: 'topic_autocomplete',
-                    limit: 8,
-                    display: function (s) { return s.label; },
-                    templates: {
-                        suggestion: function(s) {
-                            return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s);
-                        },
-                    },
-                    source: topicBloodhound,
-                }]
-            );
-
-            // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
-            $('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
-                Metamaps.Topic.getTopicFromAutocomplete(datum.id);
-            });
-
-            // initialize metacode spinner and then hide it
-            $("#metacodeImg").CloudCarousel({
-                titleBox: $('#metacodeImgTitle'),
-                yRadius: 40,
-                xRadius: 190,
-                xPos: 170,
-                yPos: 40,
-                speed: 0.3,
-                mouseWheel: true,
-                bringToFront: true
-            });
-            $('.new_topic').hide();
-        },
-        name: null,
-        newId: 1,
-        beingCreated: false,
-        metacode: null,
-        x: null,
-        y: null,
-        addSynapse: false,
-        open: function () {
-            $('#new_topic').fadeIn('fast', function () {
-                $('#topic_name').focus();
-            });
-            Metamaps.Create.newTopic.beingCreated = true;
-            Metamaps.Create.newTopic.name = "";
-        },
-        hide: function () {
-            $('#new_topic').fadeOut('fast');
-            $("#topic_name").typeahead('val', '');
-            Metamaps.Create.newTopic.beingCreated = false;
-        }
-    },
-    newSynapse: {
-        init: function () {
-            var self = Metamaps.Create.newSynapse;
-
-            $('#synapse_desc').keyup(function () {
-                Metamaps.Create.newSynapse.description = $(this).val();
-            });
-
-            var synapseBloodhound = new Bloodhound({
-                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-                queryTokenizer: Bloodhound.tokenizers.whitespace,
-                remote: {
-                    url: '/search/synapses?term=%QUERY',
-                    wildcard: '%QUERY',
-                },
-            });
-            var existingSynapseBloodhound = new Bloodhound({
-                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-                queryTokenizer: Bloodhound.tokenizers.whitespace,
-                remote: {
-                    url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
-                    prepare: function(query, settings) {
-                      var self = Metamaps.Create.newSynapse;
-                      if (Metamaps.Selected.Nodes.length < 2) {
-                        settings.url = settings.url.replace("%TOPIC1", self.topic1id).replace("%TOPIC2", self.topic2id);
-                        return settings;
-                      } else {
-                        return null;
-                      }
-                    },
-                },
-            });
-
-            // initialize the autocomplete results for synapse creation
-            $('#synapse_desc').typeahead(
-                {
-                    highlight: true,
-                    minLength: 2,
-                },
-                [{
-                    name: 'synapse_autocomplete',
-                    display: function(s) { return s.label; },
-                    templates: {
-                        suggestion: function(s) {
-                            return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s);
-                        },
-                    },
-                    source: synapseBloodhound,
-                },
-                {
-                    name: 'existing_synapses',
-                    limit: 50,
-                    display: function(s) { return s.label; },
-                    templates: {
-                        suggestion: function(s) {
-                            return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s);
-                        },
-                        header: "<h3>Existing synapses</h3>"
-                    },
-                    source: existingSynapseBloodhound,
-                }]
-          );
-
-            $('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) {
-                if (datum.id) { // if they clicked on an existing synapse get it
-                    Metamaps.Synapse.getSynapseFromAutocomplete(datum.id);
-                }
-                else {
-                    Metamaps.Create.newSynapse.description = datum.value;
-                    Metamaps.Synapse.createSynapseLocally();
-                }
-            });
-        },
-        beingCreated: false,
-        description: null,
-        topic1id: null,
-        topic2id: null,
-        newSynapseId: null,
-        open: function () {
-            $('#new_synapse').fadeIn('fast', function () {
-                $('#synapse_desc').focus();
-            });
-            Metamaps.Create.newSynapse.beingCreated = true;
-        },
-        hide: function () {
-            $('#new_synapse').fadeOut('fast');
-            $("#synapse_desc").typeahead('val', '');
-            Metamaps.Create.newSynapse.beingCreated = false;
-            Metamaps.Create.newTopic.addSynapse = false;
-            Metamaps.Create.newSynapse.topic1id = 0;
-            Metamaps.Create.newSynapse.topic2id = 0;
-            Metamaps.Mouse.synapseStartCoordinates = [];
-            Metamaps.Visualize.mGraph.plot();
-        },
-    }
-}; // end Metamaps.Create
-
-
-////////////////// TOPIC AND SYNAPSE CARDS //////////////////////////
-
-
-/*
- *
- *   TOPICCARD
- *
- */
-Metamaps.TopicCard = {
-    openTopicCard: null, //stores the topic that's currently open
-    authorizedToEdit: false, // stores boolean for edit permission for open topic card
-    init: function () {
-        var self = Metamaps.TopicCard;
-
-        // initialize best_in_place editing
-        $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
-
-        Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html());
-
-        // initialize topic card draggability and resizability
-        $('.showcard').draggable({
-            handle: ".metacodeImage"
-        });
-
-        embedly('on', 'card.rendered', self.embedlyCardRendered);
-    },
-    /**
-     * Will open the Topic Card for the node that it's passed
-     * @param {$jit.Graph.Node} node
-     */
-    showCard: function (node) {
-        var self = Metamaps.TopicCard;
-
-        var topic = node.getData('topic');
-
-        self.openTopicCard = topic;
-        self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper);
-        //populate the card that's about to show with the right topics data
-        self.populateShowCard(topic);
-        $('.showcard').fadeIn('fast');
-    },
-    hideCard: function () {
-        var self = Metamaps.TopicCard;
-
-        $('.showcard').fadeOut('fast');
-        self.openTopicCard = null;
-        self.authorizedToEdit = false;
-    },
-    embedlyCardRendered: function (iframe) {
-        var self = Metamaps.TopicCard;
-
-        $('#embedlyLinkLoader').hide();
-
-        // means that the embedly call returned 404 not found
-        if ($('#embedlyLink')[0]) {
-            $('#embedlyLink').css('display', 'block').fadeIn('fast');
-            $('.embeds').addClass('nonEmbedlyLink');
-        }
-
-        $('.CardOnGraph').addClass('hasAttachment');
-        if (self.authorizedToEdit) {
-            $('.embeds').append('<div id="linkremove"></div>');
-            $('#linkremove').click(self.removeLink);
-        }
-    },
-    removeLink: function () {
-        var self = Metamaps.TopicCard;
-        self.openTopicCard.save({
-            link: null
-        });
-        $('.embeds').empty().removeClass('nonEmbedlyLink');
-        $('#addLinkInput input').val("");
-        $('.attachments').removeClass('hidden');
-        $('.CardOnGraph').removeClass('hasAttachment');
-    },
-    bindShowCardListeners: function (topic) {
-        var self = Metamaps.TopicCard;
-        var showCard = document.getElementById('showcard');
-
-        var authorized = self.authorizedToEdit;
-
-        // get mapper image
-        var setMapperImage = function (mapper) {
-            $('.contributorIcon').attr('src', mapper.get('image'));
-        };
-        Metamaps.Mapper.get(topic.get('user_id'), setMapperImage);
-
-        // starting embed.ly
-        var resetFunc = function () {
-            $('#addLinkInput input').val("");
-            $('#addLinkInput input').focus();
-        };
-        var inputEmbedFunc = function (event) {
-
-            var element = this;
-            setTimeout(function () {
-                var text = $(element).val();
-                if (event.type=="paste" || (event.type=="keyup" && event.which==13)){
-                  // TODO evaluate converting this to '//' no matter what (infer protocol)
-                  if (text.slice(0, 7) !== 'http://' &&
-                      text.slice(0, 8) !== 'https://' &&
-                      text.slice(0, 2) !== '//') {
-                        text='//'+text;
-                    }
-                    topic.save({
-                        link: text
-                    });
-                    var embedlyEl = $('<a/>', {
-                        id: 'embedlyLink',
-                        'data-card-description': '0',
-                        href: text
-                    }).html(text);
-                    $('.attachments').addClass('hidden');
-                    $('.embeds').append(embedlyEl);
-                    $('.embeds').append('<div id="embedlyLinkLoader"></div>');
-                    var loader = new CanvasLoader('embedlyLinkLoader');
-                    loader.setColor('#4fb5c0'); // default is '#000000'
-                    loader.setDiameter(28); // default is 40
-                    loader.setDensity(41); // default is 40
-                    loader.setRange(0.9); // default is 1.3
-                    loader.show(); // Hidden by default
-                    var e = embedly('card', document.getElementById('embedlyLink'));
-                    if (!e) {
-                        self.handleInvalidLink();
-                    }
-                }
-            }, 100);
-        };
-        $('#addLinkReset').click(resetFunc);
-        $('#addLinkInput input').bind("paste keyup",inputEmbedFunc);
-
-        // initialize the link card, if there is a link
-        if (topic.get('link') && topic.get('link') !== '') {
-            var loader = new CanvasLoader('embedlyLinkLoader');
-            loader.setColor('#4fb5c0'); // default is '#000000'
-            loader.setDiameter(28); // default is 40
-            loader.setDensity(41); // default is 40
-            loader.setRange(0.9); // default is 1.3
-            loader.show(); // Hidden by default
-            var e = embedly('card', document.getElementById('embedlyLink'));
-            if (!e) {
-                self.handleInvalidLink();
-            }
-        }
-
-
-        var selectingMetacode = false;
-        // attach the listener that shows the metacode title when you hover over the image
-        $('.showcard .metacodeImage').mouseenter(function () {
-            $('.showcard .icon').css('z-index', '4');
-            $('.showcard .metacodeTitle').show();
-        });
-        $('.showcard .linkItem.icon').mouseleave(function () {
-            if (!selectingMetacode) {
-                $('.showcard .metacodeTitle').hide();
-                $('.showcard .icon').css('z-index', '1');
-            }
-        });
-
-        var metacodeLiClick = function () {
-            selectingMetacode = false;
-            var metacodeId = parseInt($(this).attr('data-id'));
-            var metacode = Metamaps.Metacodes.get(metacodeId);
-            $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
-                .append('<div class="expandMetacodeSelect"></div>')
-                .attr('class', 'metacodeTitle mbg' + metacode.id);
-            $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')');
-            topic.save({
-                metacode_id: metacode.id
-            });
-            Metamaps.Visualize.mGraph.plot();
-            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
-            $('.metacodeTitle').hide();
-            $('.showcard .icon').css('z-index', '1');
-        };
-
-        var openMetacodeSelect = function (event) {
-            var windowWidth;
-            var showcardLeft;
-            var TOPICCARD_WIDTH = 300;
-            var METACODESELECT_WIDTH = 404;
-            var distanceFromEdge;
-
-            var MAX_METACODELIST_HEIGHT = 270;
-            var windowHeight;
-            var showcardTop;
-            var topicTitleHeight;
-            var distanceFromBottom;
-
-            if (!selectingMetacode) {
-                selectingMetacode = true;
-
-                // this is to make sure the metacode
-                // select is accessible onscreen, when opened
-                // while topic card is close to the right
-                // edge of the screen
-                windowWidth = $(window).width();
-                showcardLeft = parseInt($('.showcard').css('left'));
-                distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH);
-                if (distanceFromEdge < METACODESELECT_WIDTH) {
-                    $('.metacodeSelect').addClass('onRightEdge');
-                }
-
-                // this is to make sure the metacode
-                // select is accessible onscreen, when opened
-                // while topic card is close to the bottom
-                // edge of the screen
-                windowHeight = $(window).height();
-                showcardTop = parseInt($('.showcard').css('top'));
-                topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'));
-                heightOfSetList = $('.showcard .metacodeSelect').height();
-                distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight);
-                if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
-                    $('.metacodeSelect').addClass('onBottomEdge');
-                }
-
-                $('.metacodeSelect').show();
-                event.stopPropagation();
-            }
-        };
-
-        var hideMetacodeSelect = function () {
-            selectingMetacode = false;
-            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
-            $('.metacodeTitle').hide();
-            $('.showcard .icon').css('z-index', '1');
-        };
-
-        if (authorized) {
-            $('.showcard .metacodeTitle').click(openMetacodeSelect);
-            $('.showcard').click(hideMetacodeSelect);
-            $('.metacodeSelect > ul > li').click(function (event){
-                event.stopPropagation();
-            });
-            $('.metacodeSelect li li').click(metacodeLiClick);
-
-            var bipName = $(showCard).find('.best_in_place_name');
-            bipName.bind("best_in_place:activate", function () {
-                var $el = bipName.find('textarea');
-                var el = $el[0];
-
-                $el.attr('maxlength', '140');
-
-                $('.showcard .title').append('<div class="nameCounter forTopic"></div>');
-
-                var callback = function (data) {
-                    $('.nameCounter.forTopic').html(data.all + '/140');
-                };
-                Countable.live(el, callback);
-            });
-            bipName.bind("best_in_place:deactivate", function () {
-                $('.nameCounter.forTopic').remove();
-            });
-
-            //bind best_in_place ajax callbacks
-            bipName.bind("ajax:success", function () {
-                var name = Metamaps.Util.decodeEntities($(this).html());
-                topic.set("name", name);
-                topic.trigger('saved');
-            });
-
-            $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
-                this.innerHTML = this.innerHTML.replace(/\r/g, '');
-                var desc = $(this).html() === $(this).data('nil') ? "" : $(this).html();
-                topic.set("desc", desc);
-                topic.trigger('saved');
-            });
-        }
-
-
-        var permissionLiClick = function (event) {
-            selectingPermission = false;
-            var permission = $(this).attr('class');
-            topic.save({
-                permission: permission
-            });
-            $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
-            $('.showcard .permissionSelect').remove();
-            event.stopPropagation();
-        };
-
-        var openPermissionSelect = function (event) {
-            if (!selectingPermission) {
-                selectingPermission = true;
-                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-                if ($(this).hasClass('co')) {
-                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
-                } else if ($(this).hasClass('pu')) {
-                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
-                } else if ($(this).hasClass('pr')) {
-                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
-                }
-                $('.showcard .permissionSelect li').click(permissionLiClick);
-                event.stopPropagation();
-            }
-        };
-
-        var hidePermissionSelect = function () {
-            selectingPermission = false;
-            $('.showcard .yourTopic .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-            $('.showcard .permissionSelect').remove();
-        };
-        // ability to change permission
-        var selectingPermission = false;
-        if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
-            $('.showcard .yourTopic .mapPerm').click(openPermissionSelect);
-            $('.showcard').click(hidePermissionSelect);
-        }
-
-        $('.links .mapCount').unbind().click(function(event){
-            $('.mapCount .tip').toggle();
-            $('.showcard .hoverTip').toggleClass('hide');
-            event.stopPropagation();
-        });
-        $('.mapCount .tip').unbind().click(function(event){
-            event.stopPropagation();
-        });
-        $('.showcard').unbind('.hideTip').bind('click.hideTip', function(){
-            $('.mapCount .tip').hide();
-            $('.showcard .hoverTip').removeClass('hide');
-        });
-
-        $('.mapCount .tip li a').click(Metamaps.Router.intercept);
-
-        var originalText = $('.showMore').html();
-        $('.mapCount .tip .showMore').unbind().toggle(
-            function(event){
-                $('.extraText').toggleClass("hideExtra");
-                $('.showMore').html('Show less...');
-            },
-            function(event){
-                $('.extraText').toggleClass("hideExtra");
-                $('.showMore').html(originalText);
-            });
-
-        $('.mapCount .tip showMore').unbind().click(function(event){
-            event.stopPropagation();
-        });
-    },
-    handleInvalidLink: function() {
-        var self = Metamaps.TopicCard;
-
-        self.removeLink();
-        Metamaps.GlobalUI.notifyUser("Invalid link");
-    },
-    populateShowCard: function (topic) {
-        var self = Metamaps.TopicCard;
-
-        var showCard = document.getElementById('showcard');
-
-        $(showCard).find('.permission').remove();
-
-        var topicForTemplate = self.buildObject(topic);
-        var html = self.generateShowcardHTML.render(topicForTemplate);
-
-        if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
-            var perm = document.createElement('div');
-
-            var string = 'permission canEdit';
-            if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic';
-            perm.className = string;
-            perm.innerHTML = html;
-            showCard.appendChild(perm);
-        } else {
-            var perm = document.createElement('div');
-            perm.className = 'permission cannotEdit';
-            perm.innerHTML = html;
-            showCard.appendChild(perm);
-        }
-
-        Metamaps.TopicCard.bindShowCardListeners(topic);
-    },
-    generateShowcardHTML: null, // will be initialized into a Hogan template within init function
-    //generateShowcardHTML
-    buildObject: function (topic) {
-        var self=Metamaps.TopicCard;
-
-        var nodeValues = {};
-
-        var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-
-        } else {
-
-        }
-
-        var desc_nil = "Click to add description...";
-
-        nodeValues.attachmentsHidden = '';
-        if (topic.get('link') && topic.get('link')!== '') {
-            nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-description="0">';
-            nodeValues.embeds += topic.get('link');
-            nodeValues.embeds += '</a><div id="embedlyLinkLoader"></div>';
-            nodeValues.attachmentsHidden = 'hidden';
-            nodeValues.hasAttachment = "hasAttachment";
-        }
-        else {
-            nodeValues.embeds = '';
-            nodeValues.hasAttachment = '';
-        }
-
-        if (authorized) {
-            nodeValues.attachments = '<div class="addLink"><div id="addLinkIcon"></div>';
-            nodeValues.attachments += '<div id="addLinkInput"><input placeholder="Enter or paste a link"></input>';
-            nodeValues.attachments += '<div id="addLinkReset"></div></div></div>';
-        } else {
-            nodeValues.attachmentsHidden = 'hidden';
-            nodeValues.attachments = '';
-        }
-
-        var inmapsAr = topic.get("inmaps");
-        var inmapsLinks = topic.get("inmapsLinks");
-        nodeValues.inmaps ='';
-        if (inmapsAr.length < 6) {
-            for (i = 0; i < inmapsAr.length; i++) {
-                var url = "/maps/" + inmapsLinks[i];
-                nodeValues.inmaps += '<li><a href="' + url + '">'  + inmapsAr[i]+ '</a></li>';
-            }
-        }
-        else {
-            for (i = 0; i < 5; i++){
-                var url = "/maps/" + inmapsLinks[i];
-                nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>';
-            }
-            extra = inmapsAr.length - 5;
-            nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
-            for (i = 5; i < inmapsAr.length; i++){
-                var url = "/maps/" + inmapsLinks[i];
-                nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i]+ '</a></li>';
-            }
-        }
-        nodeValues.permission = topic.get("permission");
-        nodeValues.mk_permission = topic.get("permission").substring(0, 2);
-        nodeValues.map_count = topic.get("map_count").toString();
-        nodeValues.synapse_count = topic.get("synapse_count").toString();
-        nodeValues.id = topic.isNew() ? topic.cid : topic.id;
-        nodeValues.metacode = topic.getMetacode().get("name");
-        nodeValues.metacode_class = 'mbg' + topic.get('metacode_id');
-        nodeValues.imgsrc = topic.getMetacode().get("icon");
-        nodeValues.name = topic.get("name");
-        nodeValues.userid = topic.get("user_id");
-        nodeValues.username = topic.get("user_name");
-        nodeValues.date = topic.getDate();
-        // the code for this is stored in /views/main/_metacodeOptions.html.erb
-        nodeValues.metacode_select = $('#metacodeOptions').html();
-        nodeValues.desc_nil = desc_nil;
-        nodeValues.desc = (topic.get("desc") == "" && authorized) ? desc_nil : topic.get("desc");
-        return nodeValues;
-    }
-}; // end Metamaps.TopicCard
-
-
-/*
- *
- *   SYNAPSECARD
- *
- */
-Metamaps.SynapseCard = {
-    openSynapseCard: null,
-    showCard: function (edge, e) {
-        var self = Metamaps.SynapseCard;
-
-        //reset so we don't interfere with other edges, but first, save its x and y
-        var myX = $('#edit_synapse').css('left');
-        var myY = $('#edit_synapse').css('top');
-        $('#edit_synapse').remove();
-
-        //so label is missing while editing
-        Metamaps.Control.deselectEdge(edge);
-
-        var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0;
-        var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse
-
-        //create the wrapper around the form elements, including permissions
-        //classes to make best_in_place happy
-        var edit_div = document.createElement('div');
-        edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>';
-        edit_div.setAttribute('id', 'edit_synapse');
-        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
-            edit_div.className = 'permission canEdit';
-            edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : '';
-        } else {
-            edit_div.className = 'permission cannotEdit';
-        }
-        $('#wrapper').append(edit_div);
-
-        self.populateShowCard(edge, synapse);
-
-        //drop it in the right spot, activate it
-        $('#edit_synapse').css('position', 'absolute');
-        if (e) {
-            $('#edit_synapse').css('left', e.clientX);
-            $('#edit_synapse').css('top', e.clientY);
-        } else {
-            $('#edit_synapse').css('left', myX);
-            $('#edit_synapse').css('top', myY);
-        }
-        //$('#edit_synapse_name').click(); //required in case name is empty
-        //$('#edit_synapse_name input').focus();
-        $('#edit_synapse').show();
-
-        self.openSynapseCard = edge;
-    },
-
-    hideCard: function () {
-        $('#edit_synapse').remove();
-        Metamaps.SynapseCard.openSynapseCard = null;
-    },
-
-    populateShowCard: function (edge, synapse) {
-        var self = Metamaps.SynapseCard;
-
-        self.add_synapse_count(edge);
-        self.add_desc_form(synapse);
-        self.add_drop_down(edge, synapse);
-        self.add_user_info(synapse);
-        self.add_perms_form(synapse);
-        self.add_direction_form(synapse);
-    },
-    add_synapse_count: function (edge) {
-        var count = edge.getData("synapses").length;
-
-        $('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
-    },
-    add_desc_form: function (synapse) {
-        var data_nil = 'Click to add description.';
-
-        // TODO make it so that this would work even in sandbox mode,
-        // currently with Best_in_place it won't
-
-        //desc editing form
-        $('#editSynUpperBar').append('<div id="edit_synapse_desc"></div>');
-        $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc');
-        $('#edit_synapse_desc').attr('data-object', 'synapse');
-        $('#edit_synapse_desc').attr('data-attribute', 'desc');
-        $('#edit_synapse_desc').attr('data-type', 'textarea');
-        $('#edit_synapse_desc').attr('data-nil', data_nil);
-        $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id);
-        $('#edit_synapse_desc').html(synapse.get("desc"));
-
-        //if edge data is blank or just whitespace, populate it with data_nil
-        if ($('#edit_synapse_desc').html().trim() == '') {
-            if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
-                $('#edit_synapse_desc').html(data_nil);
-            }
-            else {
-                $('#edit_synapse_desc').html("(no description)");
-            }
-        }
-
-        $('#edit_synapse_desc').bind("ajax:success", function () {
-            var desc = $(this).html();
-            if (desc == data_nil) {
-                synapse.set("desc", '');
-            } else {
-                synapse.set("desc", desc);
-            }
-            synapse.trigger('saved');
-            Metamaps.Control.selectEdge(synapse.get('edge'));
-            Metamaps.Visualize.mGraph.plot();
-        });
-    },
-    add_drop_down: function (edge, synapse) {
-        var list, i, synapses, l, desc;
-
-        synapses = edge.getData("synapses");
-        l = synapses.length;
-
-        if (l > 1) {
-            // append the element that you click to show dropdown select
-            $('#editSynUpperBar').append('<div id="dropdownSynapses"></div>');
-            $('#dropdownSynapses').click(function(e){
-                e.preventDefault();
-                e.stopPropagation(); // stop it from immediately closing it again
-                $('#switchSynapseList').toggle();
-            });
-            // hide the dropdown again if you click anywhere else on the synapse card
-            $('#edit_synapse').click(function(){
-                $('#switchSynapseList').hide();
-            });
-
-            // generate the list of other synapses
-            list = '<ul id="switchSynapseList">';
-            for (i = 0; i < l; i++) {
-                if (synapses[i] !== synapse) { // don't add the current one to the list
-                    desc = synapses[i].get('desc');
-                    desc = desc === "" || desc === null ? "(no description)" : desc;
-                    list += '<li data-synapse-index="' + i + '">' + desc + '</li>';
-                }
-            }
-            list += '</ul>'
-            // add the list of the other synapses
-            $('#editSynLowerBar').append(list);
-
-            // attach click listeners to list items that
-            // will cause it to switch the displayed synapse
-            // when you click it
-            $('#switchSynapseList li').click(function(e){
-                e.stopPropagation();
-                var index = parseInt($(this).attr('data-synapse-index'));
-                edge.setData('displayIndex', index);
-                Metamaps.Visualize.mGraph.plot();
-                Metamaps.SynapseCard.showCard(edge, false);
-            });
-        }
-    },
-    add_user_info: function (synapse) {
-        var u = '<div id="edgeUser" class="hoverForTip">';
-        u += '<a href="/explore/mapper/' + synapse.get("user_id") + '"> <img src="" width="24" height="24" /></a>'
-        u += '<div class="tip">' + synapse.get("user_name") + '</div></div>';
-        $('#editSynLowerBar').append(u);
-
-        // get mapper image
-        var setMapperImage = function (mapper) {
-            $('#edgeUser img').attr('src', mapper.get('image'));
-        };
-        Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage);
-    },
-
-    add_perms_form: function (synapse) {
-        //permissions - if owner, also allow permission editing
-        $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get("permission").substring(0, 2) + '"></div>');
-
-        // ability to change permission
-        var selectingPermission = false;
-        var permissionLiClick = function (event) {
-            selectingPermission = false;
-            var permission = $(this).attr('class');
-            synapse.save({
-                permission: permission
-            });
-            $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
-            $('#edit_synapse .permissionSelect').remove();
-            event.stopPropagation();
-        };
-
-        var openPermissionSelect = function (event) {
-            if (!selectingPermission) {
-                selectingPermission = true;
-                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-                if ($(this).hasClass('co')) {
-                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
-                } else if ($(this).hasClass('pu')) {
-                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
-                } else if ($(this).hasClass('pr')) {
-                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
-                }
-                $('#edit_synapse .permissionSelect li').click(permissionLiClick);
-                event.stopPropagation();
-            }
-        };
-
-        var hidePermissionSelect = function () {
-            selectingPermission = false;
-            $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-            $('#edit_synapse .permissionSelect').remove();
-        };
-
-        if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
-            $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect);
-            $('#edit_synapse').click(hidePermissionSelect);
-        }
-    }, //add_perms_form
-
-    add_direction_form: function (synapse) {
-        //directionality checkboxes
-        $('#editSynLowerBar').append('<div id="edit_synapse_left"></div>');
-        $('#editSynLowerBar').append('<div id="edit_synapse_right"></div>');
-
-        var edge = synapse.get('edge');
-
-        //determine which node is to the left and the right
-        //if directly in a line, top is left
-        if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
-            edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
-            edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
-            var left = edge.nodeTo.getData("topic");
-            var right = edge.nodeFrom.getData("topic");
-        } else {
-            var left = edge.nodeFrom.getData("topic");
-            var right = edge.nodeTo.getData("topic");
-        }
-
-        /*
-         * One node is actually on the left onscreen. Call it left, & the other right.
-         * If category is from-to, and that node is first, check the 'right' checkbox.
-         * Else check the 'left' checkbox since the arrow is incoming.
-         */
-
-        var directionCat = synapse.get('category'); //both, none, from-to
-        if (directionCat == 'from-to') {
-            var from_to = [synapse.get("node1_id"), synapse.get("node2_id")];
-            if (from_to[0] == left.id) {
-                //check left checkbox
-                $('#edit_synapse_left').addClass('checked');
-            } else {
-                //check right checkbox
-                $('#edit_synapse_right').addClass('checked');
-            }
-        } else if (directionCat == 'both') {
-            //check both checkboxes
-            $('#edit_synapse_left').addClass('checked');
-            $('#edit_synapse_right').addClass('checked');
-        }
-
-        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
-            $('#edit_synapse_left, #edit_synapse_right').click(function () {
-
-                $(this).toggleClass('checked');
-
-                var leftChecked = $('#edit_synapse_left').is('.checked');
-                var rightChecked = $('#edit_synapse_right').is('.checked');
-
-                var dir = synapse.getDirection();
-                var dirCat = 'none';
-                if (leftChecked && rightChecked) {
-                    dirCat = 'both';
-                } else if (!leftChecked && rightChecked) {
-                    dirCat = 'from-to';
-                    dir = [right.id, left.id];
-                } else if (leftChecked && !rightChecked) {
-                    dirCat = 'from-to';
-                    dir = [left.id, right.id];
-                }
-
-                synapse.save({
-                    category: dirCat,
-                    node1_id: dir[0],
-                    node2_id: dir[1]
-                });
-                Metamaps.Visualize.mGraph.plot();
-            });
-        } // if
-    } //add_direction_form
-}; // end Metamaps.SynapseCard
-
-
-////////////////////// END TOPIC AND SYNAPSE CARDS //////////////////////////////////
-
-
-/*
- *
- *   VISUALIZE
- *
- */
-Metamaps.Visualize = {
-    mGraph: null, // a reference to the graph object.
-    cameraPosition: null, // stores the camera position when using a 3D visualization
-    type: "ForceDirected", // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
-    loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
-    init: function () {
-        var self = Metamaps.Visualize;
-        // disable awkward dragging of the canvas element that would sometimes happen
-        $('#infovis-canvas').on('dragstart', function (event) {
-            event.preventDefault();
-        });
-
-        // prevent touch events on the canvas from default behaviour
-        $("#infovis-canvas").bind('touchstart', function (event) {
-            event.preventDefault();
-            self.mGraph.events.touched = true;
-        });
-
-        // prevent touch events on the canvas from default behaviour
-        $("#infovis-canvas").bind('touchmove', function (event) {
-            //Metamaps.JIT.touchPanZoomHandler(event);
-        });
-
-        // prevent touch events on the canvas from default behaviour
-        $("#infovis-canvas").bind('touchend touchcancel', function (event) {
-            lastDist = 0;
-            if (!self.mGraph.events.touchMoved && !Metamaps.Touch.touchDragNode) Metamaps.TopicCard.hideCurrentCard();
-            self.mGraph.events.touched = self.mGraph.events.touchMoved = false;
-            Metamaps.Touch.touchDragNode = false;
-        });
-    },
-    computePositions: function () {
-        var self = Metamaps.Visualize,
-            mapping;
-
-        if (self.type == "RGraph") {
-            var i, l, startPos, endPos, topic, synapse;
-
-            self.mGraph.graph.eachNode(function (n) {
-                topic = Metamaps.Topics.get(n.id);
-                topic.set({ node: n }, { silent: true });
-                topic.updateNode();
-
-                n.eachAdjacency(function (edge) {
-                    if(!edge.getData('init')) {
-                        edge.setData('init', true);
-
-                        l = edge.getData('synapseIDs').length;
-                        for (i = 0; i < l; i++) {
-                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
-                            synapse.set({ edge: edge }, { silent: true });
-                            synapse.updateEdge();
-                        }
-                    }
-                });
-
-                var pos = n.getPos();
-                pos.setc(-200, -200);
-            });
-            self.mGraph.compute('end');
-        } else if (self.type == "ForceDirected") {
-            var i, l, startPos, endPos, topic, synapse;
-
-            self.mGraph.graph.eachNode(function (n) {
-                topic = Metamaps.Topics.get(n.id);
-                topic.set({ node: n }, { silent: true });
-                topic.updateNode();
-                mapping = topic.getMapping();
-
-                n.eachAdjacency(function (edge) {
-                    if(!edge.getData('init')) {
-                        edge.setData('init', true);
-
-                        l = edge.getData('synapseIDs').length;
-                        for (i = 0; i < l; i++) {
-                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
-                            synapse.set({ edge: edge }, { silent: true });
-                            synapse.updateEdge();
-                        }
-                    }
-                });
-
-                startPos = new $jit.Complex(0, 0);
-                endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'));
-                n.setPos(startPos, 'start');
-                n.setPos(endPos, 'end');
-            });
-        } else if (self.type == "ForceDirected3D") {
-            self.mGraph.compute();
-        }
-    },
-    /**
-     * render does the heavy lifting of creating the engine that renders the graph with the properties we desire
-     *
-     */
-    render: function () {
-        var self = Metamaps.Visualize, RGraphSettings, FDSettings;
-
-        if (self.type == "RGraph" && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {
-
-            RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);
-
-            $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
-            $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
-
-            RGraphSettings.width = $(document).width();
-            RGraphSettings.height = $(document).height();
-            RGraphSettings.background = Metamaps.JIT.RGraph.background;
-            RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance;
-
-            self.mGraph = new $jit.RGraph(RGraphSettings);
-
-        } else if (self.type == "ForceDirected" && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {
-
-            FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);
-
-            $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
-            $jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
-
-            FDSettings.width = $('body').width();
-            FDSettings.height = $('body').height();
-
-            self.mGraph = new $jit.ForceDirected(FDSettings);
-
-        } else if (self.type == "ForceDirected3D" && !self.mGraph) {
-            // init ForceDirected3D
-            self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings);
-            self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position;
-        }
-        else {
-            self.mGraph.graph.empty();
-        }
-
-        function runAnimation() {
-            Metamaps.Loading.hide();
-            // load JSON data, if it's not empty
-            if (!self.loadLater) {
-                //load JSON data.
-                var rootIndex = 0;
-                if (Metamaps.Active.Topic) {
-                    var node = _.find(Metamaps.JIT.vizData, function(node){
-                        return node.id === Metamaps.Active.Topic.id;
-                    });
-                    rootIndex = _.indexOf(Metamaps.JIT.vizData, node);
-                }
-                self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex);
-                //compute positions and plot.
-                self.computePositions();
-                self.mGraph.busy = true;
-                if (self.type == "RGraph") {
-                    self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate);
-                } else if (self.type == "ForceDirected") {
-                    self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
-                } else if (self.type == "ForceDirected3D") {
-                    self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout);
-                }
-            }
-        }
-        // hold until all the needed metacode images are loaded
-        // hold for a maximum of 80 passes, or 4 seconds of waiting time
-        var tries = 0;
-        function hold() {
-            var unique = _.uniq(Metamaps.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
-                requiredMetacodes = _.map(unique, function (metacode) { return metacode.get('metacode_id'); }),
-                loadedCount = 0;
-
-            _.each(requiredMetacodes, function (metacode_id) {
-                var metacode = Metamaps.Metacodes.get(metacode_id),
-                    img = metacode ? metacode.get('image') : false;
-
-                if (img && (img.complete || (typeof img.naturalWidth !== "undefined" && img.naturalWidth !== 0))) {
-                    loadedCount += 1;
-                }
-            });
-
-            if (loadedCount === requiredMetacodes.length || tries > 80) runAnimation();
-            else setTimeout(function(){ tries++; hold() }, 50);
-        }
-        hold();
-
-        // update the url now that the map is ready
-        clearTimeout(Metamaps.routerTimeoutId);
-        Metamaps.routerTimeoutId = setTimeout(function(){
-            var m = Metamaps.Active.Map;
-            var t = Metamaps.Active.Topic;
-
-            if (m && window.location.pathname !== "/maps/" + m.id) {
-                Metamaps.Router.navigate("/maps/" + m.id);
-            }
-            else if (t && window.location.pathname !== "/topics/" + t.id) {
-                Metamaps.Router.navigate("/topics/" + t.id);
-            }
-        }, 800);
-
-    }
-}; // end Metamaps.Visualize
-
-
-/*
- *
- *   UTIL
- *
- */
-Metamaps.Util = {
-    // helper function to determine how many lines are needed
-    // Line Splitter Function
-    // copyright Stephen Chapman, 19th April 2006
-    // you may copy this code but please keep the copyright notice as well
-    splitLine: function (st, n) {
-        var b = '';
-        var s = st ? st : '';
-        while (s.length > n) {
-            var c = s.substring(0, n);
-            var d = c.lastIndexOf(' ');
-            var e = c.lastIndexOf('\n');
-            if (e != -1) d = e;
-            if (d == -1) d = n;
-            b += c.substring(0, d) + '\n';
-            s = s.substring(d + 1);
-        }
-        return b + s;
-    },
-    nowDateFormatted: function () {
-        var date = new Date(Date.now());
-        var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
-        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
-        var year = date.getFullYear();
-
-        return month + '/' + day + '/' + year;
-    },
-    decodeEntities: function (desc) {
-        var str, temp = document.createElement('p');
-        temp.innerHTML = desc; //browser handles the topics
-        str = temp.textContent || temp.innerText;
-        temp = null; //delete the element;
-        return str;
-    }, //decodeEntities
-    getDistance: function (p1, p2) {
-        return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
-    },
-    coordsToPixels: function (coords) {
-        if (Metamaps.Visualize.mGraph) {
-            var canvas = Metamaps.Visualize.mGraph.canvas,
-                s = canvas.getSize(),
-                p = canvas.getPos(),
-                ox = canvas.translateOffsetX,
-                oy = canvas.translateOffsetY,
-                sx = canvas.scaleOffsetX,
-                sy = canvas.scaleOffsetY;
-            var pixels = {
-              x: (coords.x / (1/sx)) + p.x + s.width/2 + ox,
-              y: (coords.y / (1/sy)) + p.y + s.height/2 + oy
-            };
-            return pixels;
-        }
-        else {
-            return {
-                x: 0,
-                y: 0
-            };
-        }
-    },
-    pixelsToCoords: function (pixels) {
-        var coords;
-        if (Metamaps.Visualize.mGraph) {
-            var canvas = Metamaps.Visualize.mGraph.canvas,
-                s = canvas.getSize(),
-                p = canvas.getPos(),
-                ox = canvas.translateOffsetX,
-                oy = canvas.translateOffsetY,
-                sx = canvas.scaleOffsetX,
-                sy = canvas.scaleOffsetY;
-            coords = {
-                x: (pixels.x - p.x - s.width/2 - ox) * (1/sx),
-                y: (pixels.y - p.y - s.height/2 - oy) * (1/sy),
-            };
-        }
-        else {
-            coords = {
-                x: 0,
-                y: 0
-            };
-        }
-        return coords;
-    },
-    getPastelColor: function () {
-        var r = (Math.round(Math.random()* 127) + 127).toString(16);
-        var g = (Math.round(Math.random()* 127) + 127).toString(16);
-        var b = (Math.round(Math.random()* 127) + 127).toString(16);
-        return Metamaps.Util.colorLuminance('#' + r + g + b, -0.4);
-    },
-    // darkens a hex value by 'lum' percentage
-    colorLuminance: function (hex, lum) {
-
-        // validate hex string
-        hex = String(hex).replace(/[^0-9a-f]/gi, '');
-        if (hex.length < 6) {
-            hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
-        }
-        lum = lum || 0;
-
-        // convert to decimal and change luminosity
-        var rgb = "#", c, i;
-        for (i = 0; i < 3; i++) {
-            c = parseInt(hex.substr(i*2,2), 16);
-            c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
-            rgb += ("00"+c).substr(c.length);
-        }
-
-        return rgb;
-    },
-    generateOptionsList: function (data) {
-        var newlist = "";
-        for (var i = 0; i < data.length; i++) {
-            newlist = newlist + '<option value="' + data[i]['id'] + '">' + data[i]['1'][1] + '</option>';
-        }
-        return newlist;
-    },
-    checkURLisImage: function (url) {
-        // when the page reloads the following regular expression will be screwed up
-        // please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/
-        return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
-    },
-    checkURLisYoutubeVideo: function (url) {
-        return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null);
-    }
-}; // end Metamaps.Util
-
-/*
- *
- *   REALTIME
- *
- */
-Metamaps.Realtime = {
-    videoId: 'video-wrapper',
-    socket: null,
-    webrtc: null,
-    readyToCall: false,
-    mappersOnMap: {},
-    disconnected: false,
-    chatOpen: false,
-    status: true, // stores whether realtime is True/On or False/Off,
-    broadcastingStatus: false,
-    videosInPosition: 1,
-    inConversation: false,
-    localVideo: null,
-    init: function () {
-        var self = Metamaps.Realtime;
-
-        var reenableRealtime = function () {
-            self.reenableRealtime();
-        };
-        var turnOff = function () {
-            self.turnOff();
-        };
-        $(".rtOn").click(reenableRealtime);
-        $(".rtOff").click(turnOff);
-
-        self.addJuntoListeners();
-
-        self.socket = new SocketIoConnection({ url: '<%= ENV['REALTIME_SERVER'] %>' });
-        self.socket.on('connect', function () {
-            console.log('connected');
-            if (!self.disconnected) {
-              self.startActiveMap();
-            } else self.disconnected = false;
-        });
-        self.socket.on('disconnect', function () {
-          self.disconnected = true;
-        });
-
-        if (Metamaps.Active.Mapper) {
-          self.webrtc = new SimpleWebRTC({
-            connection: self.socket,
-            localVideoEl: self.videoId,
-            remoteVideosEl: '',
-            detectSpeakingEvents: true,
-            autoAdjustMic: false, //true,
-            autoRequestMedia: false,
-            localVideo: {
-                autoplay: true,
-                mirror: true,
-                muted: true
-            },
-            media: {
-              video: true,
-              audio: true
-            },
-            nick: Metamaps.Active.Mapper.id
-          });
-
-          var
-            $video = $('<video></video>').attr('id', self.videoId);
-          self.localVideo = {
-              $video: $video,
-              view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, {
-                  DOUBLE_CLICK_TOLERANCE: 200,
-                  avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : ''
-              })
-          };
-
-          self.room = new Metamaps.Views.room({
-            webrtc: self.webrtc,
-            socket: self.socket,
-            username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '',
-            image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '',
-            room: 'global',
-            $video: self.localVideo.$video,
-            myVideoView: self.localVideo.view,
-            config: { DOUBLE_CLICK_TOLERANCE: 200 }
-          });
-          self.room.videoAdded(self.handleVideoAdded);
-
-          self.room.chat.$container.hide();
-          $('body').prepend(self.room.chat.$container);
-        } // if Metamaps.Active.Mapper
-    },
-    addJuntoListeners: function () {
-      var self = Metamaps.Realtime;
-
-      $(document).on(Metamaps.Views.chatView.events.openTray, function () {
-        $('.main').addClass('compressed');
-        self.chatOpen = true;
-        self.positionPeerIcons();
-      });
-      $(document).on(Metamaps.Views.chatView.events.closeTray, function () {
-        $('.main').removeClass('compressed');
-        self.chatOpen = false;
-        self.positionPeerIcons();
-      });
-      $(document).on(Metamaps.Views.chatView.events.videosOn, function () {
-        $('#wrapper').removeClass('hideVideos');
-      });
-      $(document).on(Metamaps.Views.chatView.events.videosOff, function () {
-        $('#wrapper').addClass('hideVideos');
-      });
-      $(document).on(Metamaps.Views.chatView.events.cursorsOn, function () {
-        $('#wrapper').removeClass('hideCursors');
-      });
-      $(document).on(Metamaps.Views.chatView.events.cursorsOff, function () {
-        $('#wrapper').addClass('hideCursors');
-      });
-    },
-    handleVideoAdded: function (v, id) {
-      var self = Metamaps.Realtime;
-      // random position for now
-      var paddingAboveTop = 72;
-      var heightOfVideo = 150;
-      var padding = 25;
-      var top = paddingAboveTop + (self.videosInPosition * heightOfVideo) + padding;
-      var left = 30;
-      //var right = Math.floor((Math.random() * (468 - 100)) + 1);
-      v.setParent($('#wrapper'));
-      $('#wrapper').append(v.$container);
-      v.$container.css({
-          top: top + 'px',
-          left: left + 'px'
-      });
-      v.$container.find('.video-cutoff').css({
-        border: '2px solid ' + self.mappersOnMap[id].color
-      });
-      self.videosInPosition += 1;
-    },
-    startActiveMap: function () {
-        var self = Metamaps.Realtime;
-
-        if (Metamaps.Active.Map && Metamaps.Active.Mapper) {
-            var commonsMap = Metamaps.Active.Map.get('permission') === 'commons';
-            var publicMap = Metamaps.Active.Map.get('permission') === 'public';
-
-            if (commonsMap) {
-                self.turnOn();
-                self.setupSocket();
-            }
-            else if (publicMap) {
-                self.attachMapListener();
-            }
-            self.room.addMessages(new Metamaps.Backbone.MessageCollection(Metamaps.Messages), true);
-        }
-    },
-    endActiveMap: function () {
-        var self = Metamaps.Realtime;
-
-        $(document).off('mousemove');
-        self.socket.removeAllListeners();
-        self.socket.emit('endMapperNotify');
-        $(".collabCompass").remove();
-        self.status = false;
-        self.room.leave();
-        self.room.chat.$container.hide();
-        self.room.chat.close();
-        self.videosInPosition = 1;
-    },
-    reenableRealtime: function() {
-        var confirmString = "The layout of your map has fallen out of sync with the saved copy. ";
-        confirmString += "To save your changes without overwriting the map, hit 'Cancel' and ";
-        confirmString += "then use 'Save to new map'. ";
-        confirmString += "Do you want to discard your changes and enable realtime?";
-        var c = confirm(confirmString);
-        if (c) {
-            Metamaps.Router.maps(Metamaps.Active.Map.id);
-        }
-    },
-    turnOn: function (notify) {
-        var self = Metamaps.Realtime;
-
-        if (notify) self.sendRealtimeOn();
-        //$(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
-        //$('.rtOn').addClass('active');
-        //$('.rtOff').removeClass('active');
-        self.status = true;
-        //$(".sidebarCollaborateIcon").addClass("blue");
-        $(".collabCompass").show();
-        self.room.chat.$container.show();
-        self.room.room = 'map-' + Metamaps.Active.Map.id;
-        self.checkForACallToJoin();
-    },
-    checkForACallToJoin: function () {
-      var self = Metamaps.Realtime;
-      self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id });
-    },
-    promptToJoin: function (data) {
-      var self = Metamaps.Realtime;
-
-      console.log(data);
-      var notifyText = 'There\'s a conversation happening, want to join?';
-      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
-      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
-      Metamaps.GlobalUI.notifyUser(notifyText, true);
-      self.room.conversationInProgress();
-    },
-    conversationHasBegun: function () {
-      var self = Metamaps.Realtime;
-
-      if (self.inConversation) return;
-      var notifyText = 'There\'s a conversation starting, want to join?';
-      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
-      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
-      Metamaps.GlobalUI.notifyUser(notifyText, true);
-      self.room.conversationInProgress();
-    },
-    conversationHasEnded: function () {
-      var self = Metamaps.Realtime;
-
-      self.room.conversationEnding();
-    },
-    invitedToCall: function (inviter) {
-      var self = Metamaps.Realtime;
-
-      var username = self.mappersOnMap[inviter].name;
-      var notifyText = username + ' is suggesting a video call. What do you think?';
-      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>';
-      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>';
-      Metamaps.GlobalUI.notifyUser(notifyText, true);
-    },
-    acceptCall: function (userid) {
-      var self = Metamaps.Realtime;
-      self.socket.emit('callAccepted', {
-        mapid: Metamaps.Active.Map.id,
-        invited: Metamaps.Active.Mapper.id,
-        inviter: userid
-      });
-      self.joinCall();
-      Metamaps.GlobalUI.clearNotify();
-    },
-    denyCall: function (userid) {
-      var self = Metamaps.Realtime;
-      self.socket.emit('callDenied', {
-        mapid: Metamaps.Active.Map.id,
-        invited: Metamaps.Active.Mapper.id,
-        inviter: userid
-      });
-      Metamaps.GlobalUI.clearNotify();
-    },
-    inviteACall: function (userid) {
-      var self = Metamaps.Realtime;
-      self.socket.emit('inviteACall', {
-        mapid: Metamaps.Active.Map.id,
-        inviter: Metamaps.Active.Mapper.id,
-        invited: userid
-      });
-      Metamaps.GlobalUI.notifyUser('Invitation pending...', true);
-    },
-    callAccepted: function (userid) {
-      var self = Metamaps.Realtime;
-
-      var username = self.mappersOnMap[userid].name;
-      Metamaps.GlobalUI.notifyUser('Conversation starting...');
-      self.joinCall();
-    },
-    callDenied: function (userid) {
-      var self = Metamaps.Realtime;
-
-      var username = self.mappersOnMap[userid].name;
-      Metamaps.GlobalUI.notifyUser(username + ' isn\'t feeling it right now...');
-    },
-    joinCall: function () {
-      var self = Metamaps.Realtime;
-
-      self.webrtc.off('readyToCall');
-      self.webrtc.once('readyToCall', function () {
-        self.videoInitialized = true;
-        self.readyToCall = true;
-        self.localVideo.view.$container.show();
-        if (self.localVideo && self.status) {
-          $('#wrapper').append(self.localVideo.view.$container);
-        }
-        self.room.join();
-      });
-      self.inConversation = true;
-      self.webrtc.startLocalVideo();
-      Metamaps.GlobalUI.clearNotify();
-    },
-    leaveCall: function () {
-      var self = Metamaps.Realtime;
-
-      self.room.leaveVideoOnly();
-      self.inConversation = false;
-      self.videosInPosition = 1;
-      self.localVideo.view.$container.hide();
-    },
-    turnOff: function (silent) {
-        var self = Metamaps.Realtime;
-
-        if (self.status) {
-            if (!silent) self.sendRealtimeOff();
-            //$(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
-            //$('.rtOn').removeClass('active');
-            //$('.rtOff').addClass('active');
-            self.status = false;
-            //$(".sidebarCollaborateIcon").removeClass("blue");
-            $(".collabCompass").hide();
-            $('#' + self.videoId).remove();
-        }
-    },
-    setupSocket: function () {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-        var myId = Metamaps.Active.Mapper.id;
-
-        socket.emit('newMapperNotify', {
-            userid: myId,
-            username: Metamaps.Active.Mapper.get("name"),
-            userimage: Metamaps.Active.Mapper.get("image"),
-            mapid: Metamaps.Active.Map.id
-        });
-
-        socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall);
-        socket.on(myId + '-' + Metamaps.Active.Map.id + '-callAccepted', self.callAccepted);
-        socket.on(myId + '-' + Metamaps.Active.Map.id + '-callDenied', self.callDenied);
-
-        // receive word that there's a conversation in progress
-        socket.on('maps-' + Metamaps.Active.Map.id + '-callInProgress', self.promptToJoin);
-        socket.on('maps-' + Metamaps.Active.Map.id + '-callStarting', self.conversationHasBegun);
-        socket.on('maps-' + Metamaps.Active.Map.id + '-callEnding', self.conversationHasEnded);
-
-        // if you're the 'new guy' update your list with who's already online
-        socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);
-
-        // receive word that there's a new mapper on the map
-        socket.on('maps-' + Metamaps.Active.Map.id + '-newmapper', self.newPeerOnMap);
-
-        // receive word that a mapper left the map
-        socket.on('maps-' + Metamaps.Active.Map.id + '-lostmapper', self.lostPeerOnMap);
-
-        // receive word that there's a mapper turned on realtime
-        socket.on('maps-' + Metamaps.Active.Map.id + '-newrealtime', self.newCollaborator);
-
-        // receive word that there's a mapper turned on realtime
-        socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator);
-
-        //
-        socket.on('maps-' + Metamaps.Active.Map.id + '-topicDrag', self.topicDrag);
-
-        //
-        socket.on('maps-' + Metamaps.Active.Map.id + '-newTopic', self.newTopic);
-
-        //
-        socket.on('maps-' + Metamaps.Active.Map.id + '-newMessage', self.newMessage);
-
-        //
-        socket.on('maps-' + Metamaps.Active.Map.id + '-removeTopic', self.removeTopic);
-
-        //
-        socket.on('maps-' + Metamaps.Active.Map.id + '-newSynapse', self.newSynapse);
-
-        //
-        socket.on('maps-' + Metamaps.Active.Map.id + '-removeSynapse', self.removeSynapse);
-
-        // update mapper compass position
-        socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords);
-
-        // deletions
-        socket.on('deleteTopicFromServer', self.removeTopic);
-        socket.on('deleteSynapseFromServer', self.removeSynapse);
-
-        socket.on('topicChangeFromServer', self.topicChange);
-        socket.on('synapseChangeFromServer', self.synapseChange);
-        self.attachMapListener();
-
-        // local event listeners that trigger events
-        var sendCoords = function (event) {
-            var pixels = {
-                x: event.pageX,
-                y: event.pageY
-            };
-            var coords = Metamaps.Util.pixelsToCoords(pixels);
-            self.sendCoords(coords);
-        };
-        $(document).mousemove(sendCoords);
-
-        var zoom = function (event, e) {
-            if (e) {
-                var pixels = {
-                    x: e.pageX,
-                    y: e.pageY
-                };
-                var coords = Metamaps.Util.pixelsToCoords(pixels);
-                self.sendCoords(coords);
-            }
-            self.positionPeerIcons();
-        };
-        $(document).on(Metamaps.JIT.events.zoom, zoom);
-
-        $(document).on(Metamaps.JIT.events.pan, self.positionPeerIcons);
-
-        var sendTopicDrag = function (event, positions) {
-            self.sendTopicDrag(positions);
-        };
-        $(document).on(Metamaps.JIT.events.topicDrag, sendTopicDrag);
-
-        var sendNewTopic = function (event, data) {
-            self.sendNewTopic(data);
-        };
-        $(document).on(Metamaps.JIT.events.newTopic, sendNewTopic);
-
-        var sendDeleteTopic = function (event, data) {
-            self.sendDeleteTopic(data);
-        };
-        $(document).on(Metamaps.JIT.events.deleteTopic, sendDeleteTopic);
-
-        var sendRemoveTopic = function (event, data) {
-            self.sendRemoveTopic(data);
-        };
-        $(document).on(Metamaps.JIT.events.removeTopic, sendRemoveTopic);
-
-        var sendNewSynapse = function (event, data) {
-            self.sendNewSynapse(data);
-        };
-        $(document).on(Metamaps.JIT.events.newSynapse, sendNewSynapse);
-
-        var sendDeleteSynapse = function (event, data) {
-            self.sendDeleteSynapse(data);
-        };
-        $(document).on(Metamaps.JIT.events.deleteSynapse, sendDeleteSynapse);
-
-        var sendRemoveSynapse = function (event, data) {
-            self.sendRemoveSynapse(data);
-        };
-        $(document).on(Metamaps.JIT.events.removeSynapse, sendRemoveSynapse);
-
-        var sendNewMessage = function (event, data) {
-            self.sendNewMessage(data);
-        };
-        $(document).on(Metamaps.Views.room.events.newMessage, sendNewMessage);
-
-        $(document).on(Metamaps.Views.room.events.callEnded, function () {
-          socket.emit('callEnded', { mapid: Metamaps.Active.Map.id }); // so that anyone who isn't currently in the call gets notified
-          self.inConversation = false;
-          self.videosInPosition = 1;
-          Metamaps.GlobalUI.notifyUser('Conversation has ended.');
-          self.localVideo.view.$container.hide().css({
-            top: '72px',
-            left: '30px'
-          });
-          self.localVideo.view.audioOn();
-          self.localVideo.view.videoOn();
-          self.webrtc.webrtc.localStreams.forEach(function (stream) {
-            stream.getTracks().forEach(function (track) {
-              track.stop();
-            });
-          });
-          self.webrtc.webrtc.localStreams = [];
-        });
-
-    },
-    attachMapListener: function(){
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        socket.on('mapChangeFromServer', self.mapChange);
-    },
-    sendRealtimeOn: function () {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        // send this new mapper back your details, and the awareness that you're online
-        var update = {
-            username: Metamaps.Active.Mapper.get("name"),
-            userid: Metamaps.Active.Mapper.id,
-            mapid: Metamaps.Active.Map.id
-        };
-        socket.emit('notifyStartRealtime', update);
-    },
-    sendRealtimeOff: function () {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        // send this new mapper back your details, and the awareness that you're online
-        var update = {
-            username: Metamaps.Active.Mapper.get("name"),
-            userid: Metamaps.Active.Mapper.id,
-            mapid: Metamaps.Active.Map.id
-        };
-        socket.emit('notifyStopRealtime', update);
-    },
-    updateMapperList: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        // data.userid
-        // data.username
-        // data.userimage
-        // data.userrealtime
-
-        self.mappersOnMap[data.userid] = {
-            id: data.userid,
-            name: data.username,
-            username: data.username,
-            image: data.userimage,
-            color: Metamaps.Util.getPastelColor(),
-            realtime: data.userrealtime,
-            coords: {
-                x: 0,
-                y: 0
-            },
-        };
-
-        var onOff = data.userrealtime ? "On" : "Off";
-        var mapperListItem = '<li id="mapper';
-        mapperListItem += data.userid;
-        mapperListItem += '" class="rtMapper littleRt';
-        mapperListItem += onOff;
-        mapperListItem += '">';
-        mapperListItem += '<img style="border: 2px solid ' + self.mappersOnMap[data.userid].color + ';"';
-        mapperListItem += ' src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
-        mapperListItem += data.username;
-        mapperListItem += '<div class="littleJuntoIcon"></div>';
-        mapperListItem += '</li>';
-
-        if (data.userid !== Metamaps.Active.Mapper.id) {
-            //$('#mapper' + data.userid).remove();
-            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
-
-            // create a div for the collaborators compass
-            self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
-        }
-    },
-    newPeerOnMap: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        // data.userid
-        // data.username
-        // data.userimage
-        // data.coords
-        var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0;
-
-        self.mappersOnMap[data.userid] = {
-            id: data.userid,
-            name: data.username,
-            username: data.username,
-            image: data.userimage,
-            color: Metamaps.Util.getPastelColor(),
-            realtime: true,
-            coords: {
-                x: 0,
-                y: 0
-            },
-        };
-
-        // create an item for them in the realtime box
-        if (data.userid !== Metamaps.Active.Mapper.id && self.status) {
-            var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
-            mapperListItem += '<img style="border: 2px solid ' + self.mappersOnMap[data.userid].color + ';"';
-            mapperListItem += ' src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
-            mapperListItem += data.username;
-            mapperListItem += '<div class="littleJuntoIcon"></div>';
-            mapperListItem += '</li>';
-            //$('#mapper' + data.userid).remove();
-            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
-
-            // create a div for the collaborators compass
-            self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
-
-            var notifyMessage = data.username + ' just joined the map';
-            if (firstOtherPerson) {
-              notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>';
-            }
-            Metamaps.GlobalUI.notifyUser(notifyMessage);
-
-            // send this new mapper back your details, and the awareness that you've loaded the map
-            var update = {
-                userToNotify: data.userid,
-                username: Metamaps.Active.Mapper.get("name"),
-                userimage: Metamaps.Active.Mapper.get("image"),
-                userid: Metamaps.Active.Mapper.id,
-                userrealtime: self.status,
-                mapid: Metamaps.Active.Map.id
-            };
-            socket.emit('updateNewMapperList', update);
-        }
-    },
-    createCompass: function(name, id, image, color, hide) {
-        var str =  '<img width="28" height="28" src="'+image+'" /><p>'+name+'</p>';
-        str += '<div id="compassArrow'+id+'" class="compassArrow"></div>';
-        $('#compass' + id).remove();
-        $('<div/>', {
-            id: 'compass' + id,
-            class: 'collabCompass'
-        }).html(str).appendTo('#wrapper');
-        if (hide) {
-            $('#compass' + id).hide();
-        }
-        $('#compass' + id + ' img').css({
-            'border': '2px solid ' + color
-        });
-        $('#compass' + id + ' p').css({
-            'background-color': color
-        });
-    },
-    lostPeerOnMap: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        // data.userid
-        // data.username
-
-        delete self.mappersOnMap[data.userid];
-
-        //$('#mapper' + data.userid).remove();
-        $('#compass' + data.userid).remove();
-        self.room.chat.removeParticipant(data.username);
-
-        Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
-    },
-    newCollaborator: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        // data.userid
-        // data.username
-
-        self.mappersOnMap[data.userid].realtime = true;
-
-        //$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
-        $('#compass' + data.userid).show();
-
-        Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime');
-    },
-    lostCollaborator: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        // data.userid
-        // data.username
-
-        self.mappersOnMap[data.userid].realtime = false;
-
-        //$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
-        $('#compass' + data.userid).hide();
-
-        Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime');
-    },
-    updatePeerCoords: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        self.mappersOnMap[data.userid].coords={x: data.usercoords.x,y:data.usercoords.y};
-        self.positionPeerIcon(data.userid);
-    },
-    positionPeerIcons: function () {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        if (self.status) { // if i have realtime turned on
-            for (var key in self.mappersOnMap) {
-                var mapper = self.mappersOnMap[key];
-                if (mapper.realtime) {
-                    self.positionPeerIcon(key);
-                }
-            }
-        }
-    },
-    positionPeerIcon: function (id) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        var boundary = self.chatOpen ? '#wrapper' : document;
-        var mapper = self.mappersOnMap[id];
-        var xMax=$(boundary).width();
-        var yMax=$(boundary).height();
-        var compassDiameter=56;
-        var compassArrowSize=24;
-
-        var origPixels = Metamaps.Util.coordsToPixels(mapper.coords);
-        var pixels = self.limitPixelsToScreen(origPixels);
-        $('#compass' + id).css({
-            left: pixels.x + 'px',
-            top: pixels.y + 'px'
-        });
-        /* showing the arrow if the collaborator is off of the viewport screen */
-        if (origPixels.x !== pixels.x || origPixels.y !== pixels.y) {
-
-            var dy = origPixels.y - pixels.y; //opposite
-            var dx = origPixels.x - pixels.x; // adjacent
-            var ratio = dy / dx;
-            var angle = Math.atan2(dy, dx);
-
-            $('#compassArrow' + id).show().css({
-                transform: 'rotate(' + angle + 'rad)',
-                "-webkit-transform": 'rotate(' + angle + 'rad)',
-            });
-
-            if (dx > 0) {
-                $('#compass' + id).addClass('labelLeft');
-            }
-        } else {
-            $('#compassArrow' + id).hide();
-            $('#compass' + id).removeClass('labelLeft');
-        }
-    },
-    limitPixelsToScreen: function (pixels) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        var boundary = self.chatOpen ? '#wrapper' : document;
-        var xLimit, yLimit;
-        var xMax=$(boundary).width();
-        var yMax=$(boundary).height();
-        var compassDiameter=56;
-        var compassArrowSize=24;
-
-        xLimit = Math.max(0 + compassArrowSize, pixels.x);
-        xLimit = Math.min(xLimit, xMax - compassDiameter);
-        yLimit = Math.max(0 + compassArrowSize, pixels.y);
-        yLimit = Math.min(yLimit, yMax - compassDiameter);
-
-        return {x:xLimit,y:yLimit};
-    },
-    sendCoords: function (coords) {
-        var self = Metamaps.Realtime;
-        var socket = Metamaps.Realtime.socket;
-
-        var map = Metamaps.Active.Map;
-        var mapper = Metamaps.Active.Mapper;
-
-        if (self.status && map.authorizeToEdit(mapper) && socket) {
-            var update = {
-                usercoords: coords,
-                userid: Metamaps.Active.Mapper.id,
-                mapid: Metamaps.Active.Map.id
-            };
-            socket.emit('updateMapperCoords', update);
-        }
-    },
-    sendTopicDrag: function (positions) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (Metamaps.Active.Map && self.status) {
-            positions.mapid = Metamaps.Active.Map.id;
-            socket.emit('topicDrag', positions);
-        }
-    },
-    topicDrag: function (positions) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        var topic;
-        var node;
-
-        if (Metamaps.Active.Map && self.status) {
-            for (var key in positions) {
-                topic = Metamaps.Topics.get(key);
-                if (topic) node = topic.get('node');
-                if (node) node.pos.setc(positions[key].x, positions[key].y);
-            } //for
-            Metamaps.Visualize.mGraph.plot();
-        }
-    },
-    sendTopicChange: function (topic) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        var data = {
-            topicId: topic.id
-        }
-
-        socket.emit('topicChangeFromClient', data);
-    },
-    topicChange: function (data) {
-        var topic = Metamaps.Topics.get(data.topicId);
-        if (topic) {
-            var node = topic.get('node');
-            topic.fetch({
-                success: function (model) {
-                    model.set({ node: node });
-                    model.trigger('changeByOther');
-                }
-            });
-        }
-    },
-    sendSynapseChange: function (synapse) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        var data = {
-            synapseId: synapse.id
-        }
-
-        socket.emit('synapseChangeFromClient', data);
-    },
-    synapseChange: function (data) {
-        var synapse = Metamaps.Synapses.get(data.synapseId);
-        if (synapse) {
-            // edge reset necessary because fetch causes model reset
-            var edge = synapse.get('edge');
-            synapse.fetch({
-                success: function (model) {
-                    model.set({ edge: edge });
-                    model.trigger('changeByOther');
-                }
-            });
-        }
-    },
-    sendMapChange: function (map) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        var data = {
-            mapId: map.id
-        }
-
-        socket.emit('mapChangeFromClient', data);
-    },
-    mapChange: function (data) {
-        var map = Metamaps.Active.Map;
-        var isActiveMap = map && data.mapId === map.id;
-        if (isActiveMap) {
-            var permBefore = map.get('permission');
-            var idBefore = map.id;
-            map.fetch({
-                success: function (model, response) {
-
-                    var idNow = model.id;
-                    var permNow = model.get('permission');
-                    if (idNow !== idBefore) {
-                        Metamaps.Map.leavePrivateMap(); // this means the map has been changed to private
-                    }
-                    else if (permNow === 'public' && permBefore === 'commons') {
-                        Metamaps.Map.commonsToPublic();
-                    }
-                    else if (permNow === 'commons' && permBefore === 'public') {
-                        Metamaps.Map.publicToCommons();
-                    }
-                    else {
-                        model.fetchContained();
-                        model.trigger('changeByOther');
-                    }
-                }
-            });
-        }
-    },
-    // newMessage
-    sendNewMessage: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        var message = data.attributes;
-        message.mapid = Metamaps.Active.Map.id;
-        socket.emit('newMessage', message);
-    },
-    newMessage: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        self.room.addMessages(new Metamaps.Backbone.MessageCollection(data));
-    },
-    // newTopic
-    sendNewTopic: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (Metamaps.Active.Map && self.status) {
-            data.mapperid = Metamaps.Active.Mapper.id;
-            data.mapid = Metamaps.Active.Map.id;
-            socket.emit('newTopic', data);
-        }
-    },
-    newTopic: function (data) {
-        var topic, mapping, mapper, mapperCallback, cancel;
-
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (!self.status) return;
-
-        function waitThenRenderTopic() {
-            if (topic && mapping && mapper) {
-                Metamaps.Topic.renderTopic(mapping, topic, false, false);
-            }
-            else if (!cancel) {
-                setTimeout(waitThenRenderTopic, 10);
-            }
-        }
-
-        mapper = Metamaps.Mappers.get(data.mapperid);
-        if (mapper === undefined) {
-            mapperCallback = function (m) {
-                Metamaps.Mappers.add(m);
-                mapper = m;
-            };
-            Metamaps.Mapper.get(data.mapperid, mapperCallback);
-        }
-        $.ajax({
-            url: "/topics/" + data.mappableid + ".json",
-            success: function (response) {
-                Metamaps.Topics.add(response);
-                topic = Metamaps.Topics.get(response.id);
-            },
-            error: function () {
-                cancel = true;
-            }
-        });
-        $.ajax({
-            url: "/mappings/" + data.mappingid + ".json",
-            success: function (response) {
-                Metamaps.Mappings.add(response);
-                mapping = Metamaps.Mappings.get(response.id);
-            },
-            error: function () {
-                cancel = true;
-            }
-        });
-
-        waitThenRenderTopic();
-    },
-    // removeTopic
-    sendDeleteTopic: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (Metamaps.Active.Map) {
-            socket.emit('deleteTopicFromClient', data);
-        }
-    },
-    // removeTopic
-    sendRemoveTopic: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (Metamaps.Active.Map) {
-            data.mapid = Metamaps.Active.Map.id;
-            socket.emit('removeTopic', data);
-        }
-    },
-    removeTopic: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (!self.status) return;
-
-        var topic = Metamaps.Topics.get(data.mappableid);
-        if (topic) {
-            var node = topic.get('node');
-            var mapping = topic.getMapping();
-            Metamaps.Control.hideNode(node.id);
-            Metamaps.Topics.remove(topic);
-            Metamaps.Mappings.remove(mapping);
-        }
-    },
-    // newSynapse
-    sendNewSynapse: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (Metamaps.Active.Map) {
-            data.mapperid = Metamaps.Active.Mapper.id;
-            data.mapid = Metamaps.Active.Map.id;
-            socket.emit('newSynapse', data);
-        }
-    },
-    newSynapse: function (data) {
-        var topic1, topic2, node1, node2, synapse, mapping, cancel;
-
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (!self.status) return;
-
-        function waitThenRenderSynapse() {
-            if (synapse && mapping && mapper) {
-                topic1 = synapse.getTopic1();
-                node1 = topic1.get('node');
-                topic2 = synapse.getTopic2();
-                node2 = topic2.get('node');
-
-                Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, false);
-            }
-            else if (!cancel) {
-                setTimeout(waitThenRenderSynapse, 10);
-            }
-        }
-
-        mapper = Metamaps.Mappers.get(data.mapperid);
-        if (mapper === undefined) {
-            mapperCallback = function (m) {
-                Metamaps.Mappers.add(m);
-                mapper = m;
-            };
-            Metamaps.Mapper.get(data.mapperid, mapperCallback);
-        }
-        $.ajax({
-            url: "/synapses/" + data.mappableid + ".json",
-            success: function (response) {
-                Metamaps.Synapses.add(response);
-                synapse = Metamaps.Synapses.get(response.id);
-            },
-            error: function () {
-                cancel = true;
-            }
-        });
-        $.ajax({
-            url: "/mappings/" + data.mappingid + ".json",
-            success: function (response) {
-                Metamaps.Mappings.add(response);
-                mapping = Metamaps.Mappings.get(response.id);
-            },
-            error: function () {
-                cancel = true;
-            }
-        });
-        waitThenRenderSynapse();
-    },
-    // deleteSynapse
-    sendDeleteSynapse: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (Metamaps.Active.Map) {
-            data.mapid = Metamaps.Active.Map.id;
-            socket.emit('deleteSynapseFromClient', data);
-        }
-    },
-    // removeSynapse
-    sendRemoveSynapse: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (Metamaps.Active.Map) {
-            data.mapid = Metamaps.Active.Map.id;
-            socket.emit('removeSynapse', data);
-        }
-    },
-    removeSynapse: function (data) {
-        var self = Metamaps.Realtime;
-        var socket = self.socket;
-
-        if (!self.status) return;
-
-        var synapse = Metamaps.Synapses.get(data.mappableid);
-        if (synapse) {
-            var edge = synapse.get('edge');
-            var mapping = synapse.getMapping();
-            if (edge.getData("mappings").length - 1 === 0) {
-                Metamaps.Control.hideEdge(edge);
-            }
-
-            var index = _.indexOf(edge.getData("synapses"), synapse);
-            edge.getData("mappings").splice(index, 1);
-            edge.getData("synapses").splice(index, 1);
-            if (edge.getData("displayIndex")) {
-                delete edge.data.$displayIndex;
-            }
-            Metamaps.Synapses.remove(synapse);
-            Metamaps.Mappings.remove(mapping);
-        }
-    },
-}; // end Metamaps.Realtime
-
-
-/*
- *
- *   CONTROL
- *
- */
-Metamaps.Control = {
-    init: function () {
-
-    },
-    selectNode: function (node,e) {
-        var filtered = node.getData('alpha') === 0;
-
-        if (filtered || Metamaps.Selected.Nodes.indexOf(node) != -1) return;
-        node.selected = true;
-        node.setData('dim', 30, 'current');
-        Metamaps.Selected.Nodes.push(node);
-    },
-    deselectAllNodes: function () {
-        var l = Metamaps.Selected.Nodes.length;
-        for (var i = l - 1; i >= 0; i -= 1) {
-            var node = Metamaps.Selected.Nodes[i];
-            Metamaps.Control.deselectNode(node);
-        }
-        Metamaps.Visualize.mGraph.plot();
-    },
-    deselectNode: function (node) {
-        delete node.selected;
-        node.setData('dim', 25, 'current');
-
-        //remove the node
-        Metamaps.Selected.Nodes.splice(
-            Metamaps.Selected.Nodes.indexOf(node), 1);
-    },
-    deleteSelected: function () {
-
-        if (!Metamaps.Active.Map) return;
-
-        var n = Metamaps.Selected.Nodes.length;
-        var e = Metamaps.Selected.Edges.length;
-        var ntext = n == 1 ? "1 topic" : n + " topics";
-        var etext = e == 1 ? "1 synapse" : e + " synapses";
-        var text = "You have " + ntext + " and " + etext + " selected. ";
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
-        if (r == true) {
-            Metamaps.Control.deleteSelectedEdges();
-            Metamaps.Control.deleteSelectedNodes();
-        }
-    },
-    deleteSelectedNodes: function () { // refers to deleting topics permanently
-
-        if (!Metamaps.Active.Map) return;
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        var l = Metamaps.Selected.Nodes.length;
-        for (var i = l - 1; i >= 0; i -= 1) {
-            var node = Metamaps.Selected.Nodes[i];
-            Metamaps.Control.deleteNode(node.id);
-        }
-    },
-    deleteNode: function (nodeid) { // refers to deleting topics permanently
-
-        if (!Metamaps.Active.Map) return;
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
-        var topic = node.getData('topic');
-
-        var permToDelete = Metamaps.Active.Mapper.id === topic.get('user_id') || Metamaps.Active.Mapper.get('admin');
-        if (permToDelete) {
-            var mappableid = topic.id;
-            var mapping = node.getData('mapping');
-            topic.destroy();
-            Metamaps.Mappings.remove(mapping);
-            $(document).trigger(Metamaps.JIT.events.deleteTopic, [{
-                mappableid: mappableid
-            }]);
-            Metamaps.Control.hideNode(nodeid);
-        } else {
-            Metamaps.GlobalUI.notifyUser('Only topics you created can be deleted');
-        }
-    },
-    removeSelectedNodes: function () { // refers to removing topics permanently from a map
-
-        if (!Metamaps.Active.Map) return;
-
-        var l = Metamaps.Selected.Nodes.length,
-            i,
-            node,
-            authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        for (i = l - 1; i >= 0; i -= 1) {
-            node = Metamaps.Selected.Nodes[i];
-            Metamaps.Control.removeNode(node.id);
-        }
-    },
-    removeNode: function (nodeid) { // refers to removing topics permanently from a map
-
-        if (!Metamaps.Active.Map) return;
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-        var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        var topic = node.getData('topic');
-        var mappableid = topic.id;
-        var mapping = node.getData('mapping');
-        mapping.destroy();
-        Metamaps.Topics.remove(topic);
-        $(document).trigger(Metamaps.JIT.events.removeTopic, [{
-            mappableid: mappableid
-        }]);
-        Metamaps.Control.hideNode(nodeid);
-    },
-    hideSelectedNodes: function () {
-        var l = Metamaps.Selected.Nodes.length,
-            i,
-            node;
-
-        for (i = l - 1; i >= 0; i -= 1) {
-            node = Metamaps.Selected.Nodes[i];
-            Metamaps.Control.hideNode(node.id);
-        }
-    },
-    hideNode: function (nodeid) {
-        var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
-        var graph = Metamaps.Visualize.mGraph;
-
-        Metamaps.Control.deselectNode(node);
-
-        node.setData('alpha', 0, 'end');
-        node.eachAdjacency(function (adj) {
-            adj.setData('alpha', 0, 'end');
-        });
-        Metamaps.Visualize.mGraph.fx.animate({
-            modes: ['node-property:alpha',
-            'edge-property:alpha'
-        ],
-            duration: 500
-        });
-        setTimeout(function () {
-            if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph"
-                var newroot = _.find(graph.graph.nodes, function(n){ return n.id !== nodeid; });
-                graph.root = newroot ? newroot.id : null;
-            }
-            Metamaps.Visualize.mGraph.graph.removeNode(nodeid);
-        }, 500);
-        Metamaps.Filter.checkMetacodes();
-        Metamaps.Filter.checkMappers();
-    },
-    selectEdge: function (edge) {
-        var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered
-
-        if (filtered || Metamaps.Selected.Edges.indexOf(edge) != -1) return;
-
-        var width = Metamaps.Mouse.edgeHoveringOver === edge ? 4 : 2;
-        edge.setDataset('current', {
-            showDesc: true,
-            lineWidth: width,
-            color: Metamaps.Settings.colors.synapses.selected
-        });
-        Metamaps.Visualize.mGraph.plot();
-
-        Metamaps.Selected.Edges.push(edge);
-    },
-    deselectAllEdges: function () {
-        var l = Metamaps.Selected.Edges.length;
-        for (var i = l - 1; i >= 0; i -= 1) {
-            var edge = Metamaps.Selected.Edges[i];
-            Metamaps.Control.deselectEdge(edge);
-        }
-        Metamaps.Visualize.mGraph.plot();
-    },
-    deselectEdge: function (edge) {
-        edge.setData('showDesc', false, 'current');
-
-        edge.setDataset('current', {
-            lineWidth: 2,
-            color: Metamaps.Settings.colors.synapses.normal
-        });
-
-        if (Metamaps.Mouse.edgeHoveringOver == edge) {
-            edge.setDataset('current', {
-                showDesc: true,
-                lineWidth: 4
-            });
-        }
-
-        Metamaps.Visualize.mGraph.plot();
-
-        //remove the edge
-        Metamaps.Selected.Edges.splice(
-            Metamaps.Selected.Edges.indexOf(edge), 1);
-    },
-    deleteSelectedEdges: function () { // refers to deleting topics permanently
-        var edge,
-            l = Metamaps.Selected.Edges.length;
-
-        if (!Metamaps.Active.Map) return;
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        for (var i = l - 1; i >= 0; i -= 1) {
-            edge = Metamaps.Selected.Edges[i];
-            Metamaps.Control.deleteEdge(edge);
-        }
-    },
-    deleteEdge: function (edge) {
-
-        if (!Metamaps.Active.Map) return;
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0;
-
-        var synapse = edge.getData("synapses")[index];
-        var mapping = edge.getData("mappings")[index];
-
-        var permToDelete = Metamaps.Active.Mapper.id === synapse.get('user_id') || Metamaps.Active.Mapper.get('admin');
-        if (permToDelete) {
-            if (edge.getData("synapses").length - 1 === 0) {
-                Metamaps.Control.hideEdge(edge);
-            }
-            var mappableid = synapse.id;
-            synapse.destroy();
-
-            // the server will destroy the mapping, we just need to remove it here
-            Metamaps.Mappings.remove(mapping);
-            edge.getData("mappings").splice(index, 1);
-            edge.getData("synapses").splice(index, 1);
-            if (edge.getData("displayIndex")) {
-                delete edge.data.$displayIndex;
-            }
-            $(document).trigger(Metamaps.JIT.events.deleteSynapse, [{
-                mappableid: mappableid
-            }]);
-        } else {
-            Metamaps.GlobalUI.notifyUser('Only synapses you created can be deleted');
-        }
-    },
-    removeSelectedEdges: function () {
-        var l = Metamaps.Selected.Edges.length,
-            i,
-            edge;
-
-        if (!Metamaps.Active.Map) return;
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        for (i = l - 1; i >= 0; i -= 1) {
-            edge = Metamaps.Selected.Edges[i];
-            Metamaps.Control.removeEdge(edge);
-        }
-        Metamaps.Selected.Edges = new Array();
-    },
-    removeEdge: function (edge) {
-
-        if (!Metamaps.Active.Map) return;
-
-        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
-
-        if (!authorized) {
-            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
-            return;
-        }
-
-        if (edge.getData("mappings").length - 1 === 0) {
-            Metamaps.Control.hideEdge(edge);
-        }
-
-        var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0;
-
-        var synapse = edge.getData("synapses")[index];
-        var mapping = edge.getData("mappings")[index];
-        var mappableid = synapse.id;
-        mapping.destroy();
-
-        Metamaps.Synapses.remove(synapse);
-
-        edge.getData("mappings").splice(index, 1);
-        edge.getData("synapses").splice(index, 1);
-        if (edge.getData("displayIndex")) {
-            delete edge.data.$displayIndex;
-        }
-        $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
-            mappableid: mappableid
-        }]);
-    },
-    hideSelectedEdges: function () {
-        var edge,
-            l = Metamaps.Selected.Edges.length,
-            i;
-        for (i = l - 1; i >= 0; i -= 1) {
-            edge = Metamaps.Selected.Edges[i];
-            Metamaps.Control.hideEdge(edge);
-        }
-        Metamaps.Selected.Edges = new Array();
-    },
-    hideEdge: function (edge) {
-        var from = edge.nodeFrom.id;
-        var to = edge.nodeTo.id;
-        edge.setData('alpha', 0, 'end');
-        Metamaps.Control.deselectEdge(edge);
-        Metamaps.Visualize.mGraph.fx.animate({
-            modes: ['edge-property:alpha'],
-            duration: 500
-        });
-        setTimeout(function () {
-            Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to);
-        }, 500);
-        Metamaps.Filter.checkSynapses();
-        Metamaps.Filter.checkMappers();
-    },
-    updateSelectedPermissions: function (permission) {
-
-        var edge, synapse, node, topic;
-
-        Metamaps.GlobalUI.notifyUser('Working...');
-
-        // variables to keep track of how many nodes and synapses you had the ability to change the permission of
-        var nCount = 0,
-            sCount = 0;
-
-        // change the permission of the selected synapses, if logged in user is the original creator
-        var l = Metamaps.Selected.Edges.length;
-        for (var i = l - 1; i >= 0; i -= 1) {
-            edge = Metamaps.Selected.Edges[i];
-            synapse = edge.getData('synapses')[0];
-
-            if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
-                synapse.save({
-                    permission: permission
-                });
-                sCount++;
-            }
-        }
-
-        // change the permission of the selected topics, if logged in user is the original creator
-        var l = Metamaps.Selected.Nodes.length;
-        for (var i = l - 1; i >= 0; i -= 1) {
-            node = Metamaps.Selected.Nodes[i];
-            topic = node.getData('topic');
-
-            if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
-                topic.save({
-                    permission: permission
-                });
-                nCount++;
-            }
-        }
-
-        var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and ');
-        var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses');
-
-        var message = nString + sString + ' you created updated to ' + permission;
-        Metamaps.GlobalUI.notifyUser(message);
-    },
-    updateSelectedMetacodes: function (metacode_id) {
-
-        var node, topic;
-
-        Metamaps.GlobalUI.notifyUser('Working...');
-
-        var metacode = Metamaps.Metacodes.get(metacode_id);
-
-        // variables to keep track of how many nodes and synapses you had the ability to change the permission of
-        var nCount = 0;
-
-        // change the permission of the selected topics, if logged in user is the original creator
-        var l = Metamaps.Selected.Nodes.length;
-        for (var i = l - 1; i >= 0; i -= 1) {
-            node = Metamaps.Selected.Nodes[i];
-            topic = node.getData('topic');
-
-            if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
-                topic.save({
-                    'metacode_id': metacode_id
-                });
-                nCount++;
-            }
-        }
-
-        var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics');
-
-        var message = nString + ' you can edit updated to ' + metacode.get('name');
-        Metamaps.GlobalUI.notifyUser(message);
-        Metamaps.Visualize.mGraph.plot();
-    },
-}; // end Metamaps.Control
-
-
-/*
- *
- *   FILTER
- *
- */
-Metamaps.Filter = {
-    filters: {
-        name: "",
-        metacodes: [],
-        mappers: [],
-        synapses: []
-    },
-    visible: {
-        metacodes: [],
-        mappers: [],
-        synapses: []
-    },
-    isOpen: false,
-    changing: false,
-    init: function () {
-        var self = Metamaps.Filter;
-
-        $('.sidebarFilterIcon').click(self.toggleBox);
-
-        $('.sidebarFilterBox .showAllMetacodes').click(self.filterNoMetacodes);
-        $('.sidebarFilterBox .showAllSynapses').click(self.filterNoSynapses);
-        $('.sidebarFilterBox .showAllMappers').click(self.filterNoMappers);
-        $('.sidebarFilterBox .hideAllMetacodes').click(self.filterAllMetacodes);
-        $('.sidebarFilterBox .hideAllSynapses').click(self.filterAllSynapses);
-        $('.sidebarFilterBox .hideAllMappers').click(self.filterAllMappers);
-
-        self.bindLiClicks();
-	    self.getFilterData();
-    },
-    toggleBox: function (event) {
-        var self = Metamaps.Filter;
-
-        if (self.isOpen) self.close();
-        else self.open();
-
-        event.stopPropagation();
-    },
-    open: function () {
-        var self = Metamaps.Filter;
-
-        Metamaps.GlobalUI.Account.close();
-        $('.sidebarFilterIcon div').addClass('hide');
-
-
-        if (!self.isOpen && !self.changing) {
-            self.changing = true;
-
-            var height = $(document).height() - 108;
-            $('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function () {
-                self.changing = false;
-                self.isOpen = true;
-            });
-        }
-    },
-    close: function () {
-        var self = Metamaps.Filter;
-        $('.sidebarFilterIcon div').removeClass('hide');
-
-
-        if (!self.changing) {
-            self.changing = true;
-
-            $('.sidebarFilterBox').fadeOut(200, function () {
-                self.changing = false;
-                self.isOpen = false;
-            });
-        }
-    },
-    reset: function () {
-        var self = Metamaps.Filter;
-
-        self.filters.metacodes = [];
-        self.filters.mappers = [];
-        self.filters.synapses = [];
-        self.visible.metacodes = [];
-        self.visible.mappers = [];
-        self.visible.synapses = [];
-
-        $('#filter_by_metacode ul').empty();
-        $('#filter_by_mapper ul').empty();
-        $('#filter_by_synapse ul').empty();
-
-        $('.filterBox .showAll').addClass('active');
-    },
-    /*
-    Most of this data essentially depends on the ruby function which are happening for filter inside view filterBox
-    But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses
-    */
-    getFilterData: function () {
-        var self = Metamaps.Filter;
-
-        var metacode, mapper, synapse;
-
-        $('#filter_by_metacode li').each(function() {
-            metacode = $( this ).attr('data-id');
-            self.filters.metacodes.push(metacode);
-            self.visible.metacodes.push(metacode);
-        });
-
-        $('#filter_by_mapper li').each(function()  {
-            mapper = ($( this ).attr('data-id'));
-            self.filters.mappers.push(mapper);
-            self.visible.mappers.push(mapper);
-        });
-
-        $('#filter_by_synapse li').each(function()  {
-            synapse = ($( this ).attr('data-id'));
-            self.filters.synapses.push(synapse);
-            self.visible.synapses.push(synapse);
-        });
-    },
-    bindLiClicks: function () {
-        var self = Metamaps.Filter;
-        $('#filter_by_metacode ul li').unbind().click(self.toggleMetacode);
-        $('#filter_by_mapper ul li').unbind().click(self.toggleMapper);
-        $('#filter_by_synapse ul li').unbind().click(self.toggleSynapse);
-    },
-    // an abstraction function for checkMetacodes, checkMappers, checkSynapses to reduce
-    // code redundancy
-    /*
-    @param
-    */
-    updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) {
-        var self = Metamaps.Filter;
-
-        var newList = [];
-        var removed = [];
-        var added = [];
-
-        // the first option enables us to accept
-        // ['Topics', 'Synapses'] as 'collection'
-        if (typeof collection === "object") {
-          Metamaps[collection[0]].each(function(model) {
-            var prop = model.get(propertyToCheck);
-            if (prop !== null) {
-              prop = prop.toString();
-              if (newList.indexOf(prop) === -1) {
-                newList.push(prop);
-              }
-            }
-          });
-          Metamaps[collection[1]].each(function(model) {
-            var prop = model.get(propertyToCheck);
-            if (prop !== null) {
-              prop = prop.toString();
-              if (newList.indexOf(prop) === -1) {
-                newList.push(prop);
-              }
-            }
-          });
-        } else if (typeof collection === "string") {
-          Metamaps[collection].each(function(model) {
-            var prop = model.get(propertyToCheck);
-            if (prop !== null) {
-              prop = prop.toString();
-              if (newList.indexOf(prop) === -1) {
-                newList.push(prop);
-              }
-            }
-          });
-        }
-
-        removed = _.difference(self.filters[filtersToUse], newList);
-        added = _.difference(newList, self.filters[filtersToUse]);
-
-        // remove the list items for things no longer present on the map
-        _.each(removed, function(identifier) {
-            $('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast',function(){
-                $(this).remove();
-            });
-            index = self.visible[filtersToUse].indexOf(identifier);
-            self.visible[filtersToUse].splice(index, 1);
-        });
-
-        var model, li, jQueryLi;
-        function sortAlpha(a,b){
-            return a.childNodes[1].innerHTML.toLowerCase() > b.childNodes[1].innerHTML.toLowerCase() ? 1 : -1;
-        }
-        // for each new filter to be added, create a list item for it and fade it in
-        _.each(added, function (identifier) {
-            model = Metamaps[correlatedModel].get(identifier) ||
-                Metamaps[correlatedModel].find(function (model) {
-                    return model.get(propertyToCheck) === identifier;
-                });
-            li = model.prepareLiForFilter();
-            jQueryLi = $(li).hide();
-            $('li', '#filter_by_' + listToModify + ' ul').add(jQueryLi.fadeIn("fast"))
-                .sort(sortAlpha).appendTo('#filter_by_' + listToModify + ' ul');
-            self.visible[filtersToUse].push(identifier);
-        });
-
-        // update the list of filters with the new list we just generated
-        self.filters[filtersToUse] = newList;
-
-        // make sure clicks on list items still trigger the right events
-        self.bindLiClicks();
-    },
-    checkMetacodes: function () {
-        var self = Metamaps.Filter;
-        self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode');
-    },
-    checkMappers: function () {
-        var self = Metamaps.Filter;
-        var onMap = Metamaps.Active.Map ? true : false;
-        if (onMap) {
-            self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper');
-        }
-        else {
-            // on topic view
-            self.updateFilters(['Topics', 'Synapses'], 'user_id', 'Creators', 'mappers', 'mapper');
-        }
-    },
-    checkSynapses: function () {
-        var self = Metamaps.Filter;
-        self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse');
-    },
-    filterAllMetacodes: function (e) {
-        var self = Metamaps.Filter;
-        $('#filter_by_metacode ul li').addClass('toggledOff');
-        $('.showAllMetacodes').removeClass('active');
-        $('.hideAllMetacodes').addClass('active');
-        self.visible.metacodes = [];
-        self.passFilters();
-    },
-    filterNoMetacodes: function (e) {
-        var self = Metamaps.Filter;
-        $('#filter_by_metacode ul li').removeClass('toggledOff');
-        $('.showAllMetacodes').addClass('active');
-        $('.hideAllMetacodes').removeClass('active');
-        self.visible.metacodes = self.filters.metacodes.slice();
-        self.passFilters();
-    },
-    filterAllMappers: function (e) {
-        var self = Metamaps.Filter;
-        $('#filter_by_mapper ul li').addClass('toggledOff');
-        $('.showAllMappers').removeClass('active');
-        $('.hideAllMappers').addClass('active');
-        self.visible.mappers = [];
-        self.passFilters();
-    },
-    filterNoMappers: function (e) {
-        var self = Metamaps.Filter;
-        $('#filter_by_mapper ul li').removeClass('toggledOff');
-        $('.showAllMappers').addClass('active');
-        $('.hideAllMappers').removeClass('active');
-        self.visible.mappers = self.filters.mappers.slice();
-        self.passFilters();
-    },
-    filterAllSynapses: function (e) {
-        var self = Metamaps.Filter;
-        $('#filter_by_synapse ul li').addClass('toggledOff');
-        $('.showAllSynapses').removeClass('active');
-        $('.hideAllSynapses').addClass('active');
-        self.visible.synapses = [];
-        self.passFilters();
-    },
-    filterNoSynapses: function (e) {
-        var self = Metamaps.Filter;
-        $('#filter_by_synapse ul li').removeClass('toggledOff');
-        $('.showAllSynapses').addClass('active');
-        $('.hideAllSynapses').removeClass('active');
-        self.visible.synapses = self.filters.synapses.slice();
-        self.passFilters();
-    },
-    // an abstraction function for toggleMetacode, toggleMapper, toggleSynapse
-    // to reduce code redundancy
-    // gets called in the context of a list item in a filter box
-    toggleLi: function (whichToFilter) {
-        var self = Metamaps.Filter, index;
-        var id = $(this).attr("data-id");
-        if (self.visible[whichToFilter].indexOf(id) == -1) {
-            self.visible[whichToFilter].push(id);
-            $(this).removeClass('toggledOff');
-        }
-        else {
-            index = self.visible[whichToFilter].indexOf(id);
-            self.visible[whichToFilter].splice(index, 1);
-            $(this).addClass('toggledOff');
-        }
-        self.passFilters();
-    },
-    toggleMetacode: function () {
-        var self = Metamaps.Filter;
-        self.toggleLi.call(this, 'metacodes');
-
-        if (self.visible.metacodes.length === self.filters.metacodes.length) {
-            $('.showAllMetacodes').addClass('active');
-            $('.hideAllMetacodes').removeClass('active');
-        }
-        else if (self.visible.metacodes.length === 0) {
-            $('.showAllMetacodes').removeClass('active');
-            $('.hideAllMetacodes').addClass('active');
-        }
-        else {
-            $('.showAllMetacodes').removeClass('active');
-            $('.hideAllMetacodes').removeClass('active');
-        }
-    },
-    toggleMapper: function () {
-        var self = Metamaps.Filter;
-        self.toggleLi.call(this, 'mappers');
-
-        if (self.visible.mappers.length === self.filters.mappers.length) {
-            $('.showAllMappers').addClass('active');
-            $('.hideAllMappers').removeClass('active');
-        }
-        else if (self.visible.mappers.length === 0) {
-            $('.showAllMappers').removeClass('active');
-            $('.hideAllMappers').addClass('active');
-        }
-        else {
-            $('.showAllMappers').removeClass('active');
-            $('.hideAllMappers').removeClass('active');
-        }
-    },
-    toggleSynapse: function () {
-        var self = Metamaps.Filter;
-        self.toggleLi.call(this, 'synapses');
-
-        if (self.visible.synapses.length === self.filters.synapses.length) {
-            $('.showAllSynapses').addClass('active');
-            $('.hideAllSynapses').removeClass('active');
-        }
-        else if (self.visible.synapses.length === 0) {
-            $('.showAllSynapses').removeClass('active');
-            $('.hideAllSynapses').addClass('active');
-        }
-        else {
-            $('.showAllSynapses').removeClass('active');
-            $('.hideAllSynapses').removeClass('active');
-        }
-    },
-    passFilters: function () {
-        var self = Metamaps.Filter;
-        var visible = self.visible;
-
-        var passesMetacode, passesMapper, passesSynapse;
-        var onMap;
-
-        if (Metamaps.Active.Map) {
-            onMap = true;
-        }
-        else if (Metamaps.Active.Topic) {
-            onMap = false;
-        }
-
-        var opacityForFilter = onMap ? 0 : 0.4;
-
-        Metamaps.Topics.each(function(topic) {
-            var n = topic.get('node');
-            var metacode_id = topic.get("metacode_id").toString();
-
-            if (visible.metacodes.indexOf(metacode_id) == -1) passesMetacode = false;
-            else passesMetacode = true;
-
-            if (onMap) {
-                // when on a map,
-                // we filter by mapper according to the person who added the
-                // topic or synapse to the map
-                var user_id = topic.getMapping().get("user_id").toString();
-                if (visible.mappers.indexOf(user_id) == -1) passesMapper = false;
-                else passesMapper = true;
-            }
-            else {
-                // when on a topic view,
-                // we filter by mapper according to the person who created the
-                // topic or synapse
-                var user_id = topic.get("user_id").toString();
-                if (visible.mappers.indexOf(user_id) == -1) passesMapper = false;
-                else passesMapper = true;
-            }
-
-            if (passesMetacode && passesMapper) {
-                if (n) {
-                    n.setData('alpha', 1, 'end');
-                }
-                else console.log(topic);
-            }
-            else {
-                if (n) {
-                    Metamaps.Control.deselectNode(n, true);
-                    n.setData('alpha', opacityForFilter, 'end');
-                    n.eachAdjacency(function(e){
-                        Metamaps.Control.deselectEdge(e, true);
-                    });
-                }
-                else console.log(topic);
-            }
-        });
-
-        // flag all the edges back to 'untouched'
-        Metamaps.Synapses.each(function(synapse) {
-           var e = synapse.get('edge');
-           e.setData('touched', false);
-        });
-        Metamaps.Synapses.each(function(synapse) {
-           var e = synapse.get('edge');
-           var desc;
-           var user_id = synapse.get("user_id").toString();
-
-           if (e && !e.getData('touched')) {
-
-                var synapses = e.getData('synapses');
-
-                // if any of the synapses represent by the edge are still unfiltered
-                // leave the edge visible
-                passesSynapse = false;
-                for (var i = 0; i < synapses.length; i++) {
-                    desc = synapses[i].get("desc");
-                    if (visible.synapses.indexOf(desc) > -1) passesSynapse = true;
-                }
-
-                // if the synapse description being displayed is now being
-                // filtered, set the displayIndex to the first unfiltered synapse if there is one
-                var displayIndex = e.getData("displayIndex") ? e.getData("displayIndex") : 0;
-                var displayedSynapse = synapses[displayIndex];
-                desc = displayedSynapse.get("desc");
-                if (passesSynapse && visible.synapses.indexOf(desc) == -1) {
-                    // iterate and find an unfiltered one
-                    for (var i = 0; i < synapses.length; i++) {
-                        desc = synapses[i].get("desc");
-                        if (visible.synapses.indexOf(desc) > -1) {
-                            e.setData('displayIndex', i);
-                            break;
-                        }
-                    }
-                }
-
-                if (onMap) {
-                    // when on a map,
-                    // we filter by mapper according to the person who added the
-                    // topic or synapse to the map
-                    user_id = synapse.getMapping().get("user_id").toString();
-                }
-                if (visible.mappers.indexOf(user_id) == -1) passesMapper = false;
-                else passesMapper = true;
-
-                var color = Metamaps.Settings.colors.synapses.normal;
-                if (passesSynapse && passesMapper) {
-                    e.setData('alpha', 1, 'end');
-                    e.setData('color', color, 'end');
-                }
-                else {
-                    Metamaps.Control.deselectEdge(e, true);
-                    e.setData('alpha', opacityForFilter, 'end');
-                }
-
-                e.setData('touched', true);
-            }
-            else if (!e) console.log(synapse);
-        });
-
-        // run the animation
-        Metamaps.Visualize.mGraph.fx.animate({
-          modes: ['node-property:alpha',
-                'edge-property:alpha'],
-          duration: 200
-        });
-    }
-}; // end Metamaps.Filter
-
-
-/*
- *
- *   LISTENERS
- *
- */
-Metamaps.Listeners = {
-
-    init: function () {
-
-        $(document).on('keydown', function (e) {
-            if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return;
-
-            switch (e.which) {
-            case 13: // if enter key is pressed
-                Metamaps.JIT.enterKeyHandler();
-                e.preventDefault();
-                break;
-            case 27: // if esc key is pressed
-                Metamaps.JIT.escKeyHandler();
-                break;
-            case 65: //if a or A is pressed
-                if (e.ctrlKey){
-                    Metamaps.Control.deselectAllNodes();
-                    Metamaps.Control.deselectAllEdges();
-
-                    e.preventDefault();
-                    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-                        Metamaps.Control.selectNode(n,e);
-                    });
-
-                    Metamaps.Visualize.mGraph.plot();
-                }
-
-                break;
-            case 69: //if e or E is pressed
-                if (e.ctrlKey){
-                    e.preventDefault();
-                    if (Metamaps.Active.Map) {
-                        Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas);
-                    }
-                }
-                break;
-            case 77: //if m or M is pressed
-                if (e.ctrlKey){
-                    e.preventDefault();
-                    Metamaps.Control.removeSelectedNodes();
-                    Metamaps.Control.removeSelectedEdges();
-                }
-                break;
-            case 68: //if d or D is pressed
-                if (e.ctrlKey){
-                    e.preventDefault();
-                    Metamaps.Control.deleteSelected();
-                }
-                break;
-            case 72: //if h or H is pressed
-                if (e.ctrlKey){
-                    e.preventDefault();
-                    Metamaps.Control.hideSelectedNodes();
-                    Metamaps.Control.hideSelectedEdges();
-                }
-                break;
-            default:
-                break; //alert(e.which);
-            }
-        });
-
-        $(window).resize(function () {
-            if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height());
-            if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition();
-        });
-    }
-}; // end Metamaps.Listeners
-
-
-/*
- *
- *   ORGANIZE
- *
- */
-Metamaps.Organize = {
-    init: function () {
-
-    },
-    arrange: function (layout, centerNode) {
-
-
-        // first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
-        if (layout == 'grid') {
-            var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
-            var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
-            var GRIDSPACE = 400;
-            var row = 0;
-            var column = 0;
-            Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-                if (column == numColumns) {
-                    column = 0;
-                    row += 1;
-                }
-                var newPos = new $jit.Complex();
-                newPos.x = column * GRIDSPACE;
-                newPos.y = row * GRIDSPACE;
-                n.setPos(newPos, 'end');
-                column += 1;
-            });
-            Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
-        } else if (layout == 'grid_full') {
-
-            // this will always be an integer, the # of nodes on your graph visualization
-            var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes);
-            //var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
-            //var GRIDSPACE = 400;
-            var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height;
-            var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width;
-            var totalArea = height * width;
-            var cellArea = totalArea / numNodes;
-            var ratio = height / width;
-            var cellWidth = sqrt(cellArea / ratio);
-            var cellHeight = cellArea / cellWidth;
-            var row = floor(height / cellHeight);
-            var column = floor(width / cellWidth);
-            var totalCells = row * column;
-
-            if (totalCells)
-                Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-                    if (column == numColumns) {
-                        column = 0;
-                        row += 1;
-                    }
-                    var newPos = new $jit.Complex();
-                    newPos.x = column * GRIDSPACE;
-                    newPos.y = row * GRIDSPACE;
-                    n.setPos(newPos, 'end');
-                    column += 1;
-                });
-            Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
-        } else if (layout == 'radial') {
-
-            var centerX = centerNode.getPos().x;
-            var centerY = centerNode.getPos().y;
-            centerNode.setPos(centerNode.getPos(), 'end');
-
-            console.log(centerNode.adjacencies);
-            var lineLength = 200;
-            var usedNodes = {};
-            usedNodes[centerNode.id] = centerNode;
-            var radial = function (node, level, degree) {
-                if (level == 1) {
-                    var numLinksTemp = _.size(node.adjacencies);
-                    var angleTemp = 2 * Math.PI / numLinksTemp;
-                } else {
-                    angleTemp = 2 * Math.PI / 20
-                };
-                node.eachAdjacency(function (a) {
-                    var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1);
-                    if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) {
-                        var newPos = new $jit.Complex();
-                        newPos.x = level * lineLength * Math.sin(degree) + centerX;
-                        newPos.y = level * lineLength * Math.cos(degree) + centerY;
-                        a.nodeTo.setPos(newPos, 'end');
-                        usedNodes[a.nodeTo.id] = a.nodeTo;
-
-                        radial(a.nodeTo, level + 1, degree);
-                        degree += angleTemp;
-                    };
-                });
-            };
-            radial(centerNode, 1, 0);
-            Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
-
-        } else if (layout == 'center_viewport') {
-
-            var lowX = 0,
-                lowY = 0,
-                highX = 0,
-                highY = 0;
-            var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX;
-            var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY;
-
-            Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-                if (n.id === 1) {
-                    lowX = n.getPos().x;
-                    lowY = n.getPos().y;
-                    highX = n.getPos().x;
-                    highY = n.getPos().y;
-                };
-                if (n.getPos().x < lowX) lowX = n.getPos().x;
-                if (n.getPos().y < lowY) lowY = n.getPos().y;
-                if (n.getPos().x > highX) highX = n.getPos().x;
-                if (n.getPos().y > highY) highY = n.getPos().y;
-            });
-            console.log(lowX, lowY, highX, highY);
-            var newOriginX = (lowX + highX) / 2;
-            var newOriginY = (lowY + highY) / 2;
-
-        } else alert('please call function with a valid layout dammit!');
-    }
-}; // end Metamaps.Organize
-
-
-/*
- *
- *   TOPIC
- *
- */
-Metamaps.Topic = {
-    // this function is to retrieve a topic JSON object from the database
-    // @param id = the id of the topic to retrieve
-    get: function (id, callback) {
-        // if the desired topic is not yet in the local topic repository, fetch it
-        if (Metamaps.Topics.get(id) == undefined) {
-            //console.log("Ajax call!");
-            if (!callback) {
-                var e = $.ajax({
-                    url: "/topics/" + id + ".json",
-                    async: false
-                });
-                Metamaps.Topics.add($.parseJSON(e.responseText));
-                return Metamaps.Topics.get(id);
-            } else {
-                return $.ajax({
-                    url: "/topics/" + id + ".json",
-                    success: function (data) {
-                        Metamaps.Topics.add(data);
-                        callback(Metamaps.Topics.get(id));
-                    }
-                });
-            }
-        } else {
-            if (!callback) {
-                return Metamaps.Topics.get(id);
-            } else {
-                return callback(Metamaps.Topics.get(id));
-            }
-        }
-    },
-    launch: function (id) {
-        var bb = Metamaps.Backbone;
-        var start = function (data) {
-            Metamaps.Active.Topic = new bb.Topic(data.topic);
-            Metamaps.Creators = new bb.MapperCollection(data.creators);
-            Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives));
-            Metamaps.Synapses = new bb.SynapseCollection(data.synapses);
-            Metamaps.Backbone.attachCollectionEvents();
-
-            // set filter mapper H3 text
-            $('#filter_by_mapper h3').html('CREATORS');
-
-            // build and render the visualization
-            Metamaps.Visualize.type = "RGraph";
-            Metamaps.JIT.prepareVizData();
-
-            // update filters
-            Metamaps.Filter.reset();
-
-            // reset selected arrays
-            Metamaps.Selected.reset();
-
-            // these three update the actual filter box with the right list items
-            Metamaps.Filter.checkMetacodes();
-            Metamaps.Filter.checkSynapses();
-            Metamaps.Filter.checkMappers();
-        }
-
-        $.ajax({
-            url: "/topics/" + id + "/network.json",
-            success: start
-        });
-    },
-    end: function () {
-        if (Metamaps.Active.Topic) {
-            $('.rightclickmenu').remove();
-            Metamaps.TopicCard.hideCard();
-            Metamaps.SynapseCard.hideCard();
-            Metamaps.Filter.close();
-        }
-    },
-    centerOn: function (nodeid) {
-        if (!Metamaps.Visualize.mGraph.busy) {
-            Metamaps.Visualize.mGraph.onClick(nodeid, {
-                hideLabels: false,
-                duration: 1000,
-                onComplete: function () {
-
-                }
-            });
-        }
-    },
-    fetchRelatives: function(node, metacode_id) {
-
-        var topics = Metamaps.Topics.map(function(t){ return t.id });
-        var topics_string = topics.join();
-
-        var creators = Metamaps.Creators.map(function(t){ return t.id });
-        var creators_string = creators.join();
-
-        var topic = node.getData('topic');
-
-        var successCallback = function(data) {
-            if (data.creators.length > 0) Metamaps.Creators.add(data.creators);
-            if (data.topics.length > 0) Metamaps.Topics.add(data.topics);
-            if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses);
-
-            var topicColl = new Metamaps.Backbone.TopicCollection(data.topics);
-            topicColl.add(topic);
-            var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses);
-
-            var graph = Metamaps.JIT.convertModelsToJIT(topicColl, synapseColl)[0];
-            Metamaps.Visualize.mGraph.op.sum(graph, {
-                type: 'fade',
-                duration: 500,
-                hideLabels: false
-            });
-
-            var i, l, t, s;
-
-            Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-                t = Metamaps.Topics.get(n.id);
-                t.set({ node: n }, { silent: true });
-                t.updateNode();
-
-                n.eachAdjacency(function (edge) {
-                    if(!edge.getData('init')) {
-                        edge.setData('init', true);
-
-                        l = edge.getData('synapseIDs').length;
-                        for (i = 0; i < l; i++) {
-                            s = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
-                            s.set({ edge: edge }, { silent: true });
-                            s.updateEdge();
-                        }
-                    }
-                });
-            });
-        };
-
-        var paramsString = metacode_id ? "metacode=" + metacode_id + "&" : "";
-        paramsString += "network=" + topics_string + "&creators=" + creators_string;
-
-        $.ajax({
-            type: "Get",
-            url: "/topics/" + topic.id + "/relatives.json?" + paramsString,
-            success: successCallback,
-            error: function () {
-
-            }
-        });
-    },
-    /*
-     *
-     *
-     */
-    renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter) {
-        var self = Metamaps.Topic;
-
-        var nodeOnViz, tempPos;
-
-        var newnode = topic.createNode();
-
-        var midpoint = {}, pixelPos;
-
-        if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) {
-            Metamaps.Visualize.mGraph.graph.addNode(newnode);
-            nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id);
-            topic.set('node', nodeOnViz, {silent: true});
-            topic.updateNode(); // links the topic and the mapping to the node
-
-            nodeOnViz.setData("dim", 1, "start");
-            nodeOnViz.setData("dim", 25, "end");
-            if (Metamaps.Visualize.type === "RGraph") {
-                tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'));
-                tempPos = tempPos.toPolar();
-                nodeOnViz.setPos(tempPos, "current");
-                nodeOnViz.setPos(tempPos, "start");
-                nodeOnViz.setPos(tempPos, "end");
-            } else if (Metamaps.Visualize.type === "ForceDirected") {
-                nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current");
-                nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start");
-                nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
-            }
-            if (Metamaps.Create.newTopic.addSynapse && permitCreateSynapseAfter) {
-                Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
-
-                // position the form
-                midpoint.x = tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - tempNode.pos.getc().x) / 2;
-                midpoint.y = tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - tempNode.pos.getc().y) / 2;
-                pixelPos = Metamaps.Util.coordsToPixels(midpoint);
-                $('#new_synapse').css('left', pixelPos.x + "px");
-                $('#new_synapse').css('top', pixelPos.y + "px");
-                // show the form
-                Metamaps.Create.newSynapse.open();
-                Metamaps.Visualize.mGraph.fx.animate({
-                    modes: ["node-property:dim"],
-                    duration: 500,
-                    onComplete: function () {
-                        tempNode = null;
-                        tempNode2 = null;
-                        tempInit = false;
-                    }
-                });
-            } else {
-                Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas);
-                Metamaps.Visualize.mGraph.fx.animate({
-                    modes: ["node-property:dim"],
-                    duration: 500,
-                    onComplete: function () {
-
-                    }
-                });
-            }
-        } else {
-            Metamaps.Visualize.mGraph.loadJSON(newnode);
-            nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id);
-            topic.set('node', nodeOnViz, {silent: true});
-            topic.updateNode(); // links the topic and the mapping to the node
-
-            nodeOnViz.setData("dim", 1, "start");
-            nodeOnViz.setData("dim", 25, "end");
-            nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current");
-            nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start");
-            nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
-            Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas);
-            Metamaps.Visualize.mGraph.fx.animate({
-                modes: ["node-property:dim"],
-                duration: 500,
-                onComplete: function () {
-
-                }
-            });
-        }
-
-        var mappingSuccessCallback = function (mappingModel, response) {
-            var newTopicData = {
-                mappingid: mappingModel.id,
-                mappableid: mappingModel.get('mappable_id')
-            };
-
-            $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
-        };
-        var topicSuccessCallback = function (topicModel, response) {
-            if (Metamaps.Active.Map) {
-                mapping.save({ mappable_id: topicModel.id }, {
-                    success: mappingSuccessCallback,
-                    error: function (model, response) {
-                        console.log('error saving mapping to database');
-                    }
-                });
-            }
-
-            if (Metamaps.Create.newTopic.addSynapse) {
-                Metamaps.Create.newSynapse.topic2id = topicModel.id;
-            }
-        };
-
-        if (!Metamaps.Settings.sandbox && createNewInDB) {
-            if (topic.isNew()) {
-                topic.save(null, {
-                    success: topicSuccessCallback,
-                    error: function (model, response) {
-                        console.log('error saving topic to database');
-                    }
-                });
-            } else if (!topic.isNew() && Metamaps.Active.Map) {
-                mapping.save(null, {
-                    success: mappingSuccessCallback
-                });
-            }
-        }
-    },
-    createTopicLocally: function () {
-        var self = Metamaps.Topic;
-
-        if (Metamaps.Create.newTopic.name === "") {
-            Metamaps.GlobalUI.notifyUser("Please enter a topic title...");
-            return;
-        }
-
-        // hide the 'double-click to add a topic' message
-        Metamaps.Famous.viz.hideInstructions();
-
-        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
-
-        var metacode = Metamaps.Metacodes.get(Metamaps.Create.newTopic.metacode);
-
-        var topic = new Metamaps.Backbone.Topic({
-            name: Metamaps.Create.newTopic.name,
-            metacode_id: metacode.id
-        });
-        Metamaps.Topics.add(topic);
-
-        var mapping = new Metamaps.Backbone.Mapping({
-            xloc: Metamaps.Create.newTopic.x,
-            yloc: Metamaps.Create.newTopic.y,
-            mappable_id: topic.cid,
-            mappable_type: "Topic",
-        });
-        Metamaps.Mappings.add(mapping);
-
-        //these can't happen until the value is retrieved, which happens in the line above
-        Metamaps.Create.newTopic.hide();
-
-        self.renderTopic(mapping, topic, true, true); // this function also includes the creation of the topic in the database
-    },
-    getTopicFromAutocomplete: function (id) {
-        var self = Metamaps.Topic;
-
-        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
-
-        Metamaps.Create.newTopic.hide();
-
-        var topic = self.get(id);
-
-        var mapping = new Metamaps.Backbone.Mapping({
-            xloc: Metamaps.Create.newTopic.x,
-            yloc: Metamaps.Create.newTopic.y,
-            mappable_type: "Topic",
-            mappable_id: topic.id,
-        });
-        Metamaps.Mappings.add(mapping);
-
-        self.renderTopic(mapping, topic, true, true);
-    },
-    getTopicFromSearch: function (event, id) {
-        var self = Metamaps.Topic;
-
-        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
-
-        var topic = self.get(id);
-
-        var nextCoords = Metamaps.Map.getNextCoord();
-        var mapping = new Metamaps.Backbone.Mapping({
-            xloc: nextCoords.x,
-            yloc: nextCoords.y,
-            mappable_type: "Topic",
-            mappable_id: topic.id,
-        });
-        Metamaps.Mappings.add(mapping);
-
-        self.renderTopic(mapping, topic, true, true);
-
-        Metamaps.GlobalUI.notifyUser('Topic was added to your map!');
-
-        event.stopPropagation();
-        event.preventDefault();
-        return false;
-    }
-}; // end Metamaps.Topic
-
-
-/*
- *
- *   SYNAPSE
- *
- */
-Metamaps.Synapse = {
-    // this function is to retrieve a synapse JSON object from the database
-    // @param id = the id of the synapse to retrieve
-    get: function (id, callback) {
-        // if the desired topic is not yet in the local topic repository, fetch it
-        if (Metamaps.Synapses.get(id) == undefined) {
-            if (!callback) {
-                var e = $.ajax({
-                    url: "/synapses/" + id + ".json",
-                    async: false
-                });
-                Metamaps.Synapses.add($.parseJSON(e.responseText));
-                return Metamaps.Synapses.get(id);
-            } else {
-                return $.ajax({
-                    url: "/synapses/" + id + ".json",
-                    success: function (data) {
-                        Metamaps.Synapses.add(data);
-                        callback(Metamaps.Synapses.get(id));
-                    }
-                });
-            }
-        } else {
-            if (!callback) {
-                return Metamaps.Synapses.get(id);
-            } else {
-                return callback(Metamaps.Synapses.get(id));
-            }
-        }
-    },
-    /*
-     *
-     *
-     */
-    renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
-        var self = Metamaps.Synapse;
-
-        var edgeOnViz;
-
-        var newedge = synapse.createEdge();
-
-        Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data);
-        edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id);
-        synapse.set('edge', edgeOnViz);
-        synapse.updateEdge(); // links the synapse and the mapping to the edge
-
-        Metamaps.Control.selectEdge(edgeOnViz);
-
-        var mappingSuccessCallback = function (mappingModel, response) {
-            var newSynapseData = {
-                mappingid: mappingModel.id,
-                mappableid: mappingModel.get('mappable_id')
-            };
-
-            $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
-        };
-        var synapseSuccessCallback = function (synapseModel, response) {
-            if (Metamaps.Active.Map) {
-                mapping.save({ mappable_id: synapseModel.id }, {
-                    success: mappingSuccessCallback
-                });
-            }
-        };
-
-        if (!Metamaps.Settings.sandbox && createNewInDB) {
-            if (synapse.isNew()) {
-                synapse.save(null, {
-                    success: synapseSuccessCallback,
-                    error: function (model, response) {
-                        console.log('error saving synapse to database');
-                    }
-                });
-            } else if (!synapse.isNew() && Metamaps.Active.Map) {
-                mapping.save(null, {
-                    success: mappingSuccessCallback
-                });
-            }
-        }
-    },
-    createSynapseLocally: function () {
-        var self = Metamaps.Synapse,
-            topic1,
-            topic2,
-            node1,
-            node2,
-            synapse,
-            mapping;
-
-        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
-
-        //for each node in this array we will create a synapse going to the position2 node.
-        var synapsesToCreate = [];
-
-        topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
-        node2 = topic2.get('node');
-
-        var len = Metamaps.Selected.Nodes.length;
-        if (len == 0) {
-            topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
-            synapsesToCreate[0] = topic1.get('node');
-        } else if (len > 0) {
-            synapsesToCreate = Metamaps.Selected.Nodes;
-        }
-
-        for (var i = 0; i < synapsesToCreate.length; i++) {
-            node1 = synapsesToCreate[i];
-            topic1 = node1.getData('topic');
-            synapse = new Metamaps.Backbone.Synapse({
-                desc: Metamaps.Create.newSynapse.description,// || "",
-                node1_id: topic1.isNew() ? topic1.cid : topic1.id,
-                node2_id: topic2.isNew() ? topic2.cid : topic2.id,
-            });
-            Metamaps.Synapses.add(synapse);
-
-            mapping = new Metamaps.Backbone.Mapping({
-                mappable_type: "Synapse",
-                mappable_id: synapse.cid,
-            });
-            Metamaps.Mappings.add(mapping);
-
-            // this function also includes the creation of the synapse in the database
-            self.renderSynapse(mapping, synapse, node1, node2, true);
-        } // for each in synapsesToCreate
-
-        Metamaps.Create.newSynapse.hide();
-    },
-    getSynapseFromAutocomplete: function (id) {
-        var self = Metamaps.Synapse,
-            topic1,
-            topic2,
-            node1,
-            node2;
-
-        var synapse = self.get(id);
-
-        var mapping = new Metamaps.Backbone.Mapping({
-            mappable_type: "Synapse",
-            mappable_id: synapse.id,
-        });
-        Metamaps.Mappings.add(mapping);
-
-        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
-        node1 = topic1.get('node');
-        topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
-        node2 = topic2.get('node');
-        Metamaps.Create.newSynapse.hide();
-
-        self.renderSynapse(mapping, synapse, node1, node2, true);
-    }
-}; // end Metamaps.Synapse
-
-
-/*
- *
- *   MAP
- *
- */
-Metamaps.Map = {
-    events: {
-        editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper"
-    },
-    nextX: 0,
-    nextY: 0,
-    sideLength: 1,
-    turnCount: 0,
-    nextXshift: 1,
-    nextYshift: 0,
-    timeToTurn: 0,
-    init: function () {
-        var self = Metamaps.Map;
-
-        // prevent right clicks on the main canvas, so as to not get in the way of our right clicks
-        $('#center-container').bind('contextmenu', function (e) {
-            return false;
-        });
-
-        $('.sidebarFork').click(function () {
-            self.fork();
-        });
-
-        Metamaps.GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html();
-
-        self.InfoBox.init();
-        self.CheatSheet.init();
-
-        $(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper);
-    },
-    launch: function (id) {
-        var bb = Metamaps.Backbone;
-        var start = function (data) {
-            Metamaps.Active.Map = new bb.Map(data.map);
-            Metamaps.Mappers = new bb.MapperCollection(data.mappers);
-            Metamaps.Topics = new bb.TopicCollection(data.topics);
-            Metamaps.Synapses = new bb.SynapseCollection(data.synapses);
-            Metamaps.Mappings = new bb.MappingCollection(data.mappings);
-            Metamaps.Messages = data.messages;
-            Metamaps.Backbone.attachCollectionEvents();
-
-            var map = Metamaps.Active.Map;
-            var mapper = Metamaps.Active.Mapper;
-
-            // add class to .wrapper for specifying whether you can edit the map
-            if (map.authorizeToEdit(mapper)) {
-                $('.wrapper').addClass('canEditMap');
-            }
-
-            // add class to .wrapper for specifying if the map can
-            // be collaborated on
-            if (map.get('permission') === 'commons') {
-                $('.wrapper').addClass('commonsMap');
-            }
-
-            // set filter mapper H3 text
-            $('#filter_by_mapper h3').html('MAPPERS');
-
-            // build and render the visualization
-            Metamaps.Visualize.type = "ForceDirected";
-            Metamaps.JIT.prepareVizData();
-
-            // update filters
-            Metamaps.Filter.reset();
-
-            // reset selected arrays
-            Metamaps.Selected.reset();
-
-            // set the proper mapinfobox content
-            Metamaps.Map.InfoBox.load();
-
-            // these three update the actual filter box with the right list items
-            Metamaps.Filter.checkMetacodes();
-            Metamaps.Filter.checkSynapses();
-            Metamaps.Filter.checkMappers();
-
-            Metamaps.Realtime.startActiveMap();
-            Metamaps.Loading.hide();
-        }
-
-        $.ajax({
-            url: "/maps/" + id + "/contains.json",
-            success: start
-        });
-    },
-    end: function () {
-        if (Metamaps.Active.Map) {
-
-            $('.wrapper').removeClass('canEditMap commonsMap');
-            Metamaps.Map.resetSpiral();
-
-            $('.rightclickmenu').remove();
-            Metamaps.TopicCard.hideCard();
-            Metamaps.SynapseCard.hideCard();
-            Metamaps.Create.newTopic.hide();
-            Metamaps.Create.newSynapse.hide();
-            Metamaps.Filter.close();
-            Metamaps.Map.InfoBox.close();
-            Metamaps.Realtime.endActiveMap();
-        }
-    },
-    fork: function () {
-        Metamaps.GlobalUI.openLightbox('forkmap');
-
-        var nodes_data = "",
-            synapses_data = "";
-        var nodes_array = [];
-        var synapses_array = [];
-        // collect the unfiltered topics
-        Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
-            // if the opacity is less than 1 then it's filtered
-            if (n.getData('alpha') === 1) {
-                var id = n.getData('topic').id;
-                nodes_array.push(id);
-                var x, y;
-                if (n.pos.x && n.pos.y) {
-                    x = n.pos.x;
-                    y = n.pos.y;
-                } else {
-                    var x = Math.cos(n.pos.theta) * n.pos.rho;
-                    var y = Math.sin(n.pos.theta) * n.pos.rho;
-                }
-                nodes_data += id + '/' + x + '/' + y + ',';
-            }
-        });
-        // collect the unfiltered synapses
-        Metamaps.Synapses.each(function(synapse){
-            var desc = synapse.get("desc");
-
-            var descNotFiltered = Metamaps.Filter.visible.synapses.indexOf(desc) > -1;
-            // make sure that both topics are being added, otherwise, it
-            // doesn't make sense to add the synapse
-            var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1;
-            topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('node2_id')) > -1;
-            if (descNotFiltered && topicsNotFiltered) {
-                synapses_array.push(synapse.id);
-            }
-        });
-
-        synapses_data = synapses_array.join();
-        nodes_data = nodes_data.slice(0, -1);
-
-        Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data;
-        Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data;
-
-    },
-    leavePrivateMap: function(){
-        var map = Metamaps.Active.Map;
-        Metamaps.Maps.Active.remove(map);
-        Metamaps.Maps.Featured.remove(map);
-        Metamaps.Router.home();
-        Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.');
-    },
-    commonsToPublic: function(){
-        Metamaps.Realtime.turnOff(true); // true is for 'silence'
-        Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.');
-        Metamaps.Active.Map.trigger('changeByOther');
-    },
-    publicToCommons: function(){
-        var confirmString = "This map permission has been changed to Commons! ";
-        confirmString += "Do you want to reload and enable realtime collaboration?";
-        var c = confirm(confirmString);
-        if (c) {
-            Metamaps.Router.maps(Metamaps.Active.Map.id);
-        }
-    },
-    editedByActiveMapper: function () {
-        if (Metamaps.Active.Mapper) {
-            Metamaps.Mappers.add(Metamaps.Active.Mapper);
-        }
-    },
-    getNextCoord: function() {
-        var self = Metamaps.Map;
-        var nextX = self.nextX;
-        var nextY = self.nextY;
-
-        var DISTANCE_BETWEEN = 120;
-
-        self.nextX = self.nextX + DISTANCE_BETWEEN * self.nextXshift;
-        self.nextY = self.nextY + DISTANCE_BETWEEN * self.nextYshift;
-
-        self.timeToTurn += 1;
-        // if true, it's time to turn
-        if (self.timeToTurn === self.sideLength) {
-
-            self.turnCount += 1;
-            // if true, it's time to increase side length
-            if (self.turnCount % 2 === 0) {
-                self.sideLength += 1;
-            }
-            self.timeToTurn = 0;
-
-            // going right? turn down
-            if (self.nextXshift == 1 && self.nextYshift == 0) {
-                self.nextXshift = 0;
-                self.nextYshift = 1;
-            }
-            // going down? turn left
-            else if (self.nextXshift == 0 && self.nextYshift == 1) {
-                self.nextXshift = -1;
-                self.nextYshift = 0;
-            }
-            // going left? turn up
-            else if (self.nextXshift == -1 && self.nextYshift == 0) {
-                self.nextXshift = 0;
-                self.nextYshift = -1;
-            }
-            // going up? turn right
-            else if (self.nextXshift == 0 && self.nextYshift == -1) {
-                self.nextXshift = 1;
-                self.nextYshift = 0;
-            }
-        }
-
-        return {
-            x: nextX,
-            y: nextY
-        }
-    },
-    resetSpiral: function() {
-        Metamaps.Map.nextX = 0;
-        Metamaps.Map.nextY = 0;
-        Metamaps.Map.nextXshift = 1;
-        Metamaps.Map.nextYshift = 0;
-        Metamaps.Map.sideLength = 1;
-        Metamaps.Map.timeToTurn = 0;
-        Metamaps.Map.turnCount = 0;
-    },
-    exportImage: function() {
-
-        var canvas = {};
-
-        canvas.canvas = document.createElement("canvas");
-        canvas.canvas.width  =  1880; // 960;
-        canvas.canvas.height = 1260; // 630
-
-        canvas.scaleOffsetX = 1;
-        canvas.scaleOffsetY = 1;
-        canvas.translateOffsetY = 0;
-        canvas.translateOffsetX = 0;
-        canvas.denySelected = true;
-
-        canvas.getSize =  function() {
-            if(this.size) return this.size;
-            var canvas = this.canvas;
-            return this.size = {
-                width: canvas.width,
-                height: canvas.height
-            };
-        };
-        canvas.scale = function(x, y) {
-            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;
-            this.getCtx().scale(x, y);
-            this.translate(dx, dy);
-        };
-        canvas.translate = function(x, y) {
-            var sx = this.scaleOffsetX,
-                sy = this.scaleOffsetY;
-            this.translateOffsetX += x*sx;
-            this.translateOffsetY += y*sy;
-            this.getCtx().translate(x, y);
-        };
-        canvas.getCtx = function() {
-          return this.canvas.getContext("2d");
-        };
-        // center it
-        canvas.getCtx().translate(1880/2, 1260/2);
-
-        var mGraph = Metamaps.Visualize.mGraph;
-
-        var id = mGraph.root;
-        var root = mGraph.graph.getNode(id);
-        var T = !!root.visited;
-
-        // pass true to avoid basing it on a selection
-        Metamaps.JIT.zoomExtents(null, canvas, true);
-
-        var c = canvas.canvas,
-            ctx = canvas.getCtx(),
-            scale = canvas.scaleOffsetX;
-
-        // draw a grey background
-        ctx.fillStyle = '#d8d9da';
-        var xPoint = (-(c.width/scale)/2) - (canvas.translateOffsetX/scale),
-        yPoint = (-(c.height/scale)/2) - (canvas.translateOffsetY/scale);
-        ctx.fillRect(xPoint,yPoint,c.width/scale,c.height/scale);
-
-        // draw the graph
-        mGraph.graph.eachNode(function(node) {
-           var nodeAlpha = node.getData('alpha');
-           node.eachAdjacency(function(adj) {
-             var nodeTo = adj.nodeTo;
-             if(!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
-               mGraph.fx.plotLine(adj, canvas);
-             }
-           });
-           if(node.drawn) {
-             mGraph.fx.plotNode(node, canvas);
-           }
-           if(!mGraph.labelsHidden) {
-             if(node.drawn && nodeAlpha >= 0.95) {
-               mGraph.labels.plotLabel(canvas, node);
-             } else {
-               mGraph.labels.hideLabel(node, false);
-             }
-           }
-           node.visited = !T;
-         });
-
-        var imageData = {
-            encoded_image: canvas.canvas.toDataURL()
-        };
-
-        var map = Metamaps.Active.Map;
-
-        var today = new Date();
-        var dd = today.getDate();
-        var mm = today.getMonth()+1; //January is 0!
-        var yyyy = today.getFullYear();
-        if(dd<10) {
-            dd='0'+dd
-        }
-        if(mm<10) {
-            mm='0'+mm
-        }
-        today = mm+'/'+dd+'/'+yyyy;
-
-        var mapName = map.get("name").split(" ").join([separator = '-']);
-        var downloadMessage = "";
-        downloadMessage += "Captured map screenshot! ";
-        downloadMessage += "<a href='" + imageData.encoded_image + "' ";
-        downloadMessage += "download='metamap-" + map.id + "-" + mapName + "-" + today + ".png'>DOWNLOAD</a>";
-        Metamaps.GlobalUI.notifyUser(downloadMessage);
-
-        $.ajax({
-            type: "POST",
-            dataType: 'json',
-            url: "/maps/" + Metamaps.Active.Map.id + "/upload_screenshot",
-            data: imageData,
-            success: function (data) {
-                console.log('successfully uploaded map screenshot');
-            },
-            error: function () {
-                console.log('failed to save map screenshot');
-            }
-        });
-    }
-};
-
-
-/*
- *
- *   CHEATSHEET
- *
- */
-Metamaps.Map.CheatSheet = {
-    init: function () {
-        // tab the cheatsheet
-        $('#cheatSheet').tabs();
-        $('#quickReference').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
-        $("#quickReference .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
-
-        // id = the id of a vimeo video
-        var switchVideo = function (element, id) {
-            $('.tutorialItem').removeClass("active");
-            $(element).addClass("active");
-            $('#tutorialVideo').attr('src','//player.vimeo.com/video/'+id);
-        };
-
-        $('#gettingStarted').click(function() {
-            //switchVideo(this,'88334167');
-        });
-        $('#upYourSkillz').click(function() {
-            //switchVideo(this,'100118167');
-        });
-        $('#advancedMapping').click(function() {
-            //switchVideo(this,'88334167');
-        });
-    }
-}; // end Metamaps.Map.CheatSheet
-
-
-/*
- *
- *   INFOBOX
- *
- */
-Metamaps.Map.InfoBox = {
-    isOpen: false,
-    changing: false,
-    selectingPermission: false,
-    changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>",
-    nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
-    descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
-    init: function () {
-        var self = Metamaps.Map.InfoBox;
-
-        $('.mapInfoIcon').click(self.toggleBox);
-        $('.mapInfoBox').click(function(event){
-            event.stopPropagation();
-        });
-        $('body').click(self.close);
-
-        self.attachEventListeners();
-
-        self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html());
-    },
-    toggleBox: function (event) {
-        var self = Metamaps.Map.InfoBox;
-
-        if (self.isOpen) self.close();
-        else self.open();
-
-        event.stopPropagation();
-    },
-    open: function () {
-        var self = Metamaps.Map.InfoBox;
-        $('.mapInfoIcon div').addClass('hide');
-        if (!self.isOpen && !self.changing) {
-            self.changing = true;
-            $('.mapInfoBox').fadeIn(200, function () {
-                self.changing = false;
-                self.isOpen = true;
-            });
-        }
-    },
-    close: function () {
-        var self = Metamaps.Map.InfoBox;
-
-        $('.mapInfoIcon div').removeClass('hide');
-        if (!self.changing) {
-            self.changing = true;
-            $('.mapInfoBox').fadeOut(200, function () {
-                self.changing = false;
-                self.isOpen = false;
-                self.hidePermissionSelect();
-                $('.mapContributors .tip').hide();
-            });
-        }
-    },
-    load: function () {
-        var self = Metamaps.Map.InfoBox;
-
-        var map = Metamaps.Active.Map;
-
-        var obj = map.pick("permission","contributor_count","topic_count","synapse_count");
-
-        var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper);
-        var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper);
-        var shareable = map.get('permission') !== 'private';
-
-        obj["name"] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get("name")}) : map.get("name");
-        obj["desc"] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get("desc")}) : map.get("desc");
-        obj["map_creator_tip"] = isCreator ? self.changePermissionText : "";
-        obj["contributors_class"] = Metamaps.Mappers.length > 1 ? "multiple" : "";
-        obj["contributors_class"] += Metamaps.Mappers.length === 2 ? " mTwo" : "";
-        obj["contributor_image"] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get("image") : "<%= asset_path('user.png') %>";
-        obj["contributor_list"] = self.createContributorList();
-        obj["user_name"] = isCreator ? "You" : map.get("user_name");
-        obj["created_at"] = map.get("created_at_clean");
-        obj["updated_at"] = map.get("updated_at_clean");
-
-        var classes = isCreator ? "yourMap" : "";
-        classes += canEdit ? " canEdit" : "";
-        classes += shareable ? " shareable" : "";
-        $(".mapInfoBox").removeClass("shareable yourMap canEdit")
-            .addClass(classes)
-            .html(self.generateBoxHTML.render(obj));
-
-        self.attachEventListeners();
-    },
-    attachEventListeners: function () {
-        var self = Metamaps.Map.InfoBox;
-
-        $('.mapInfoBox.canEdit .best_in_place').best_in_place();
-
-        // because anyone who can edit the map can change the map title
-        var bipName = $('.mapInfoBox .best_in_place_name');
-        bipName.unbind("best_in_place:activate").bind("best_in_place:activate", function () {
-            var $el = bipName.find('textarea');
-            var el = $el[0];
-
-            $el.attr('maxlength', '140');
-
-            $('.mapInfoName').append('<div class="nameCounter forMap"></div>');
-
-            var callback = function (data) {
-                $('.nameCounter.forMap').html(data.all + '/140');
-            };
-            Countable.live(el, callback);
-        });
-        bipName.unbind("best_in_place:deactivate").bind("best_in_place:deactivate", function () {
-            $('.nameCounter.forMap').remove();
-        });
-
-        $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () {
-            var name = $(this).html();
-            Metamaps.Active.Map.set('name', name);
-            Metamaps.Active.Map.trigger('saved');
-        });
-
-        $('.mapInfoDesc .best_in_place_desc').unbind("ajax:success").bind("ajax:success", function () {
-            var desc = $(this).html();
-            Metamaps.Active.Map.set('desc', desc);
-            Metamaps.Active.Map.trigger('saved');
-        });
-
-        $('.yourMap .mapPermission').unbind().click(self.onPermissionClick);
-        // .yourMap in the unbind/bind is just a namespace for the events
-        // not a reference to the class .yourMap on the .mapInfoBox
-        $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect);
-
-        $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap);
-
-        $('.mapContributors span, #mapContribs').unbind().click(function(event){
-            $('.mapContributors .tip').toggle();
-            event.stopPropagation();
-        });
-        $('.mapContributors .tip').unbind().click(function(event){
-            event.stopPropagation();
-        });
-        $('.mapContributors .tip li a').click(Metamaps.Router.intercept);
-
-        $('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function(){
-            $('.mapContributors .tip').hide();
-        });
-    },
-    updateNameDescPerm: function(name, desc, perm) {
-        $('.mapInfoName .best_in_place_name').html(name);
-        $('.mapInfoDesc .best_in_place_desc').html(desc);
-        $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm);
-    },
-    createContributorList: function () {
-        var self = Metamaps.Map.InfoBox;
-
-        var string = "";
-        string += "<ul>";
-
-        Metamaps.Mappers.each(function(m){
-            string += '<li><a href="/explore/mapper/' + m.get("id") + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get("image") + '" />' + m.get("name") + '</a></li>';
-        });
-
-        string += "</ul>";
-        return string;
-    },
-    updateNumbers: function () {
-        var self = Metamaps.Map.InfoBox;
-        var mapper = Metamaps.Active.Mapper;
-
-        var contributors_class = "";
-        if (Metamaps.Mappers.length === 2) contributors_class = "multiple mTwo";
-        else if (Metamaps.Mappers.length > 2) contributors_class = "multiple";
-
-        var contributors_image = "<%= asset_path('user.png') %>";
-        if (Metamaps.Mappers.length > 0) {
-            // get the first contributor and use their image
-            contributors_image = Metamaps.Mappers.models[0].get("image");
-        }
-        $('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class);
-        $('.mapContributors span').text(Metamaps.Mappers.length)
-        $('.mapContributors .tip').html(self.createContributorList());
-        $('.mapTopics').text(Metamaps.Topics.length);
-        $('.mapSynapses').text(Metamaps.Synapses.length);
-
-        $('.mapEditedAt').html('<span>Last edited: </span>' + Metamaps.Util.nowDateFormatted());
-    },
-    onPermissionClick: function (event) {
-        var self = Metamaps.Map.InfoBox;
-
-        if (!self.selectingPermission) {
-            self.selectingPermission = true;
-            $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
-            if ($(this).hasClass('commons')) {
-                $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
-            } else if ($(this).hasClass('public')) {
-                $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
-            } else if ($(this).hasClass('private')) {
-                $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
-            }
-            $('.mapPermission .permissionSelect li').click(self.selectPermission);
-            event.stopPropagation();
-        }
-    },
-    hidePermissionSelect: function () {
-        var self = Metamaps.Map.InfoBox;
-
-        self.selectingPermission = false;
-        $('.mapPermission').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
-        $('.mapPermission .permissionSelect').remove();
-    },
-    selectPermission: function (event) {
-        var self = Metamaps.Map.InfoBox;
-
-        self.selectingPermission = false;
-        var permission = $(this).attr('class');
-        var permBefore = Metamaps.Active.Map.get('permission');
-        Metamaps.Active.Map.save({
-            permission: permission
-        });
-        Metamaps.Active.Map.updateMapWrapper();
-        if (permBefore !== 'commons' && permission === 'commons') {
-            Metamaps.Realtime.setupSocket();
-            Metamaps.Realtime.turnOn();
-        }
-        else if (permBefore === 'commons' && permission === 'public') {
-            Metamaps.Realtime.turnOff(true); // true is to 'silence'
-            // the notification that would otherwise be sent
-        }
-        shareable = permission === 'private' ? '' : 'shareable';
-        $('.mapPermission').removeClass('commons public private minimize').addClass(permission);
-        $('.mapPermission .permissionSelect').remove();
-        $('.mapInfoBox').removeClass('shareable').addClass(shareable);
-        event.stopPropagation();
-    },
-    deleteActiveMap: function () {
-        var confirmString = 'Are you sure you want to delete this map? ';
-        confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.';
-
-        var doIt = confirm(confirmString);
-        var map = Metamaps.Active.Map;
-        var mapper = Metamaps.Active.Mapper;
-        var authorized = map.authorizePermissionChange(mapper);
-
-        if (doIt && authorized) {
-            Metamaps.Map.InfoBox.close();
-            Metamaps.Maps.Active.remove(map);
-            Metamaps.Maps.Featured.remove(map);
-            Metamaps.Maps.Mine.remove(map);
-            map.destroy();
-            Metamaps.Router.home();
-            Metamaps.GlobalUI.notifyUser('Map eliminated!');
-        }
-        else if (!authorized) {
-            alert('Hey now. We can\'t just go around willy nilly deleting other people\'s maps now can we? Run off and find something constructive to do, eh?');
-        }
-    }
-}; // end Metamaps.Map.InfoBox
-
-/*
-*
-* Account Settings
-*
-*/
-Metamaps.Account = {
-    listenersInitialized: false,
-    init: function () {
-        var self = Metamaps.Account;
-
-
-    },
-    initListeners: function(){
-        var self = Metamaps.Account;
-
-        $('#user_image').change(self.showImagePreview);
-        self.listenersInitialized = true;
-    },
-    toggleChangePicture: function(){
-        var self = Metamaps.Account;
-
-        $('.userImageMenu').toggle();
-        if (!self.listenersInitialized) self.initListeners();
-    },
-    openChangePicture: function(){
-        var self = Metamaps.Account;
-
-        $('.userImageMenu').show();
-        if (!self.listenersInitialized) self.initListeners();
-    },
-    closeChangePicture: function(){
-        var self = Metamaps.Account;
-
-        $('.userImageMenu').hide();
-    },
-    showLoading: function(){
-        var self = Metamaps.Account;
-
-        var loader = new CanvasLoader('accountPageLoading');
-        loader.setColor('#4FC059'); // default is '#000000'
-        loader.setDiameter(28); // default is 40
-        loader.setDensity(41); // default is 40
-        loader.setRange(0.9); // default is 1.3
-        loader.show(); // Hidden by default
-        $('#accountPageLoading').show();
-    },
-    showImagePreview: function(){
-        var self = Metamaps.Account;
-
-        var file = $('#user_image')[0].files[0];
-
-        var reader = new FileReader();
-
-        reader.onload = function(e) {
-            var $canvas = $('<canvas>').attr({
-                width: 84,
-                height: 84
-            });
-            var context = $canvas[0].getContext('2d');
-            var imageObj = new Image();
-
-            imageObj.onload = function() {
-                $('.userImageDiv canvas').remove();
-                $('.userImageDiv img').hide();
-
-                var imgWidth = imageObj.width;
-                var imgHeight = imageObj.height;
-
-                var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth;
-                // draw cropped image
-                var nonZero = Math.abs(imgHeight - imgWidth) / 2;
-                var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero;
-                var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero;
-                var sourceWidth = dimensionToMatch;
-                var sourceHeight = dimensionToMatch;
-                var destX = 0;
-                var destY = 0;
-                var destWidth = 84;
-                var destHeight = 84;
-
-                context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
-                $('.userImageDiv').prepend($canvas);
-            };
-            imageObj.src = reader.result;
-        };
-
-        if (file) {
-            reader.readAsDataURL(file);
-            $('.userImageMenu').hide();
-            $('#remove_image').val('0');
-        }
-    },
-    removePicture: function(){
-        var self = Metamaps.Account;
-
-        $('.userImageDiv canvas').remove();
-        $('.userImageDiv img').attr('src', '<%= asset_path('user.png') %>').show();
-        $('.userImageMenu').hide();
-
-        var input = $('#user_image');
-        input.replaceWith(input.val('').clone(true));
-        $('#remove_image').val('1');
-    },
-    changeName: function(){
-        $('.accountName').hide();
-        $('.changeName').show();
-    },
-    showPass: function(){
-        $(".toHide").show();
-        $(".changePass").hide();
-    },
-    hidePass: function(){
-        $(".toHide").hide();
-        $(".changePass").show();
-
-        $('#current_password').val('');
-        $('#user_password').val('');
-        $('#user_password_confirmation').val('');
-    }
-};
-
-/*
- *
- *   MAPPER
- *
- */
-Metamaps.Mapper = {
-    // this function is to retrieve a mapper JSON object from the database
-    // @param id = the id of the mapper to retrieve
-    get: function (id, callback) {
-        return $.ajax({
-            url: "/users/" + id + ".json",
-            success: function (data) {
-                callback(new Metamaps.Backbone.Mapper(data));
-            }
-        });
-    }
-}; // end Metamaps.Mapper
-
-
-/*
- *
- *   ADMIN
- *
- */
-
-Metamaps.Admin = {
-    selectMetacodes: [],
-    allMetacodes: [],
-    init: function () {
-        var self = Metamaps.Admin;
-
-        $('#metacodes_value').val(self.selectMetacodes.toString());
-    },
-    selectAll: function () {
-        var self = Metamaps.Admin;
-
-        $('.editMetacodes li').removeClass('toggledOff');
-        self.selectMetacodes = self.allMetacodes.slice(0);
-        $('#metacodes_value').val(self.selectMetacodes.toString());
-    },
-    deselectAll: function () {
-        var self = Metamaps.Admin;
-
-        $('.editMetacodes li').addClass('toggledOff');
-        self.selectMetacodes = [];
-        $('#metacodes_value').val(0);
-    },
-    liClickHandler: function () {
-        var self = Metamaps.Admin;
-
-        if ($(this).attr('class') != 'toggledOff') {
-          $(this).addClass('toggledOff');
-          var value_to_remove = $(this).attr('id');
-          self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1);
-          $('#metacodes_value').val(self.selectMetacodes.toString());
-        }
-        else if ($(this).attr('class') == 'toggledOff') {
-          $(this).removeClass('toggledOff');
-          self.selectMetacodes.push($(this).attr('id'));
-          $('#metacodes_value').val(self.selectMetacodes.toString());
-        }
-    },
-    validate: function () {
-        var self = Metamaps.Admin;
-
-        if (self.selectMetacodes.length == 0) {
-          alert('Would you pretty please select at least one metacode for the set?');
-          return false;
-        }
-    }
-};
+var labelType, useGradients, nativeTextSupport, animate;
+
+(function () {
+    var ua = navigator.userAgent,
+        iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
+        typeOfCanvas = typeof HTMLCanvasElement,
+        nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
+        textSupport = nativeCanvasSupport && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
+    //I'm setting this based on the fact that ExCanvas provides text support for IE
+    //and that as of today iPhone/iPad current text support is lame
+    labelType = (!nativeCanvasSupport || (textSupport && !iStuff)) ? 'Native' : 'HTML';
+    nativeTextSupport = labelType == 'Native';
+    useGradients = nativeCanvasSupport;
+    animate = !(iStuff || !nativeCanvasSupport);
+})();
+
+// TODO eliminate these 4 global variables
+var panningInt; // this variable is used to store a 'setInterval' for the Metamaps.JIT.SmoothPanning() function, so that it can be cleared with window.clearInterval
+var tempNode = null,
+    tempInit = false,
+    tempNode2 = null;
+
+Metamaps.Settings = {
+    embed: false, // indicates that the app is on a page that is optimized for embedding in iFrames on other web pages
+    sandbox: false, // puts the app into a mode (when true) where it only creates data locally, and isn't writing it to the database
+    colors: {
+        background: '#344A58',
+        synapses: {
+            normal: '#888888',
+            hover: '#888888',
+            selected: '#FFFFFF'
+        },
+        topics: {
+            selected: '#FFFFFF'
+        },
+        labels: {
+            background: '#18202E',
+            text: '#DDD'
+        }
+    },
+};
+
+Metamaps.Touch = {
+    touchPos: null, // this stores the x and y values of a current touch event
+    touchDragNode: null // this stores a reference to a JIT node that is being dragged
+};
+
+Metamaps.Mouse = {
+    didPan: false,
+    didBoxZoom: false,
+    changeInX: 0,
+    changeInY: 0,
+    edgeHoveringOver: false,
+    boxStartCoordinates: false,
+    boxEndCoordinates: false,
+    synapseStartCoordinates: [],
+    synapseEndCoordinates: null,
+    lastNodeClick: 0,
+    lastCanvasClick: 0,
+    DOUBLE_CLICK_TOLERANCE: 300
+};
+
+Metamaps.Selected = {
+    reset: function () {
+        var self = Metamaps.Selected;
+
+        self.Nodes = [];
+        self.Edges = [];
+    },
+    Nodes: [],
+    Edges: []
+};
+
+/*
+ *
+ *   BACKBONE
+ *
+ */
+Metamaps.Backbone.init = function () {
+    var self = Metamaps.Backbone;
+
+    self.Metacode = Backbone.Model.extend({
+        initialize: function () {
+            var image = new Image();
+            image.crossOrigin = "Anonymous";
+            image.src = this.get('icon');
+            this.set('image',image);
+        },
+        prepareLiForFilter: function () {
+            var li = '';
+            li += '<li data-id="' + this.id.toString() + '">';      
+            li += '<img src="' + this.get('icon') + '" data-id="' + this.id.toString() + '"';
+            li += ' alt="' + this.get('name') + '" />';      
+            li += '<p>' + this.get('name').toLowerCase() + '</p></li>';
+            return li;
+        }
+
+    });
+    self.MetacodeCollection = Backbone.Collection.extend({
+        model: this.Metacode,
+        url: '/metacodes',
+        comparator: function (a, b) {
+            a = a.get('name').toLowerCase();
+            b = b.get('name').toLowerCase();
+            return a > b ? 1 : a < b ? -1 : 0;
+        }
+    });
+
+    self.Topic = Backbone.Model.extend({
+        urlRoot: '/topics',
+        blacklist: ['node', 'created_at', 'updated_at', 'user_name', 'user_image', 'map_count', 'synapse_count'],
+        toJSON: function (options) {
+            return _.omit(this.attributes, this.blacklist);
+        },
+        save: function (key, val, options) {
+
+            var attrs;
+
+            // Handle both `"key", value` and `{key: value}` -style arguments.
+            if (key == null || typeof key === 'object') {
+                attrs = key;
+                options = val;
+            } else {
+                (attrs = {})[key] = val;
+            }
+
+            var newOptions = options || {};
+            var s = newOptions.success;
+
+            var permBefore = this.get('permission');
+
+            newOptions.success = function (model, response, opt) {
+                if (s) s(model, response, opt);
+                model.trigger('saved');
+
+                if (permBefore === 'private' && model.get('permission') !== 'private') {
+                    model.trigger('noLongerPrivate');
+                }
+                else if (permBefore !== 'private' && model.get('permission') === 'private') {
+                    model.trigger('nowPrivate');
+                }
+            };
+            return Backbone.Model.prototype.save.call(this, attrs, newOptions);
+        },
+        initialize: function () {
+            if (this.isNew()) {
+                this.set({
+                    "user_id": Metamaps.Active.Mapper.id,
+                    "desc": '',
+                    "link": '',
+                    "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons'
+                });
+            }
+
+            this.on('changeByOther', this.updateCardView);
+            this.on('change', this.updateNodeView);
+            this.on('saved', this.savedEvent);
+            this.on('nowPrivate', function(){
+                var removeTopicData = {
+                    mappableid: this.id
+                };
+
+                $(document).trigger(Metamaps.JIT.events.removeTopic, [removeTopicData]);
+            });
+            this.on('noLongerPrivate', function(){
+                var newTopicData = {
+                    mappingid: this.getMapping().id,
+                    mappableid: this.id
+                };
+
+                $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
+            });
+
+            this.on('change:metacode_id', Metamaps.Filter.checkMetacodes, this);
+
+        },
+        authorizeToEdit: function (mapper) {
+            if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
+            else return false;
+        },
+        authorizePermissionChange: function (mapper) {
+            if (mapper && this.get('user_id') === mapper.get('id')) return true;
+            else return false;
+        },
+        getDate: function () {
+
+        },
+        getMetacode: function () {
+            return Metamaps.Metacodes.get(this.get('metacode_id'));
+        },
+        getMapping: function () {
+
+            if (!Metamaps.Active.Map) return false;
+
+            return Metamaps.Mappings.findWhere({
+                map_id: Metamaps.Active.Map.id,
+                mappable_type: "Topic",
+                mappable_id: this.isNew() ? this.cid : this.id
+            });
+        },
+        createNode: function () {
+            var mapping;
+            var node = {
+                adjacencies: [],
+                id: this.isNew() ? this.cid : this.id,
+                name: this.get('name')
+            };
+
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                node.data = {
+                    $mapping: null,
+                    $mappingID: mapping.id
+                };
+            }
+
+            return node;
+        },
+        updateNode: function () {
+            var mapping;
+            var node = this.get('node');
+            node.setData('topic', this);
+
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                node.setData('mapping', mapping);
+            }
+
+            return node;
+        },
+        savedEvent: function() {
+            Metamaps.Realtime.sendTopicChange(this);
+        },
+        updateViews: function() {
+            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
+            var node = this.get('node');
+            // update topic card, if this topic is the one open there
+            if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
+                Metamaps.TopicCard.showCard(node);
+            }
+
+            // update the node on the map
+            if (onPageWithTopicCard && node) {
+                node.name = this.get('name');
+                Metamaps.Visualize.mGraph.plot();
+            }
+        },
+        updateCardView: function() {
+            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
+            var node = this.get('node');
+            // update topic card, if this topic is the one open there
+            if (onPageWithTopicCard && this == Metamaps.TopicCard.openTopicCard) {
+                Metamaps.TopicCard.showCard(node);
+            }
+        },
+        updateNodeView: function() {
+            var onPageWithTopicCard = Metamaps.Active.Map || Metamaps.Active.Topic;
+            var node = this.get('node');
+
+            // update the node on the map
+            if (onPageWithTopicCard && node) {
+                node.name = this.get('name');
+                Metamaps.Visualize.mGraph.plot();
+            }
+        }
+    });
+
+    self.TopicCollection = Backbone.Collection.extend({
+        model: self.Topic,
+        url: '/topics'
+    });
+
+    self.Synapse = Backbone.Model.extend({
+        urlRoot: '/synapses',
+        blacklist: ['edge', 'created_at', 'updated_at'],
+        toJSON: function (options) {
+            return _.omit(this.attributes, this.blacklist);
+        },
+        save: function (key, val, options) {
+
+            var attrs;
+
+            // Handle both `"key", value` and `{key: value}` -style arguments.
+            if (key == null || typeof key === 'object') {
+                attrs = key;
+                options = val;
+            } else {
+                (attrs = {})[key] = val;
+            }
+
+            var newOptions = options || {};
+            var s = newOptions.success;
+
+            var permBefore = this.get('permission');
+
+            newOptions.success = function (model, response, opt) {
+                if (s) s(model, response, opt);
+                model.trigger('saved');
+
+                if (permBefore === 'private' && model.get('permission') !== 'private') {
+                    model.trigger('noLongerPrivate');
+                }
+                else if (permBefore !== 'private' && model.get('permission') === 'private') {
+                    model.trigger('nowPrivate');
+                }
+            };
+            return Backbone.Model.prototype.save.call(this, attrs, newOptions);
+        },
+        initialize: function () {
+            if (this.isNew()) {
+                this.set({
+                    "user_id": Metamaps.Active.Mapper.id,
+                    "permission": Metamaps.Active.Map ? Metamaps.Active.Map.get('permission') : 'commons',
+                    "category": "from-to"
+                });
+            }
+
+            this.on('changeByOther', this.updateCardView);
+            this.on('change', this.updateEdgeView);
+            this.on('saved', this.savedEvent);
+            this.on('noLongerPrivate', function(){
+                var newSynapseData = {
+                    mappingid: this.getMapping().id,
+                    mappableid: this.id
+                };
+
+                $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
+            });
+            this.on('nowPrivate', function(){
+                $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
+                    mappableid: this.id
+                }]);
+            });
+
+            this.on('change:desc', Metamaps.Filter.checkSynapses, this);
+        },
+        prepareLiForFilter: function () {
+            var li = '';
+            li += '<li data-id="' + this.get('desc') + '">';      
+            li += '<img src="<%= asset_path('synapse16.png') %>"';
+            li += ' alt="synapse icon" />';      
+            li += '<p>' + this.get('desc') + '</p></li>';
+            return li;
+        },
+        authorizeToEdit: function (mapper) {
+            if (mapper && (this.get('permission') === "commons" || this.get('user_id') === mapper.get('id'))) return true;
+            else return false;
+        },
+        authorizePermissionChange: function (mapper) {
+            if (mapper && this.get('user_id') === mapper.get('id')) return true;
+            else return false;
+        },
+        getTopic1: function () {
+            return Metamaps.Topics.get(this.get('node1_id'));
+        },
+        getTopic2: function () {
+            return Metamaps.Topics.get(this.get('node2_id'));
+        },
+        getDirection: function () {
+            var t1 = this.getTopic1(),
+                t2 = this.getTopic2();
+
+            return t1 && t2 ? [
+                    t1.get('node').id,
+                    t2.get('node').id
+                ] : false;
+        },
+        getMapping: function () {
+
+            if (!Metamaps.Active.Map) return false;
+
+            return Metamaps.Mappings.findWhere({
+                map_id: Metamaps.Active.Map.id,
+                mappable_type: "Synapse",
+                mappable_id: this.isNew() ? this.cid : this.id
+            });
+        },
+        createEdge: function () {
+            var mapping, mappingID;
+            var synapseID = this.isNew() ? this.cid : this.id;
+
+            var edge = {
+                nodeFrom: this.get('node1_id'),
+                nodeTo: this.get('node2_id'),
+                data: {
+                    $synapses: [],
+                    $synapseIDs: [synapseID],
+                }
+            };
+
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                mappingID = mapping.isNew() ? mapping.cid : mapping.id;
+                edge.data.$mappings = [];
+                edge.data.$mappingIDs = [mappingID];
+            }
+
+            return edge;
+        },
+        updateEdge: function () {
+            var mapping;
+            var edge = this.get('edge');
+            edge.getData('synapses').push(this);
+
+            if (Metamaps.Active.Map) {
+                mapping = this.getMapping();
+                edge.getData('mappings').push(mapping);
+            }
+
+            return edge;
+        },
+        savedEvent: function() {
+            Metamaps.Realtime.sendSynapseChange(this);
+        },
+        updateViews: function() {
+            this.updateCardView();
+            this.updateEdgeView();
+        },
+        updateCardView: function() {
+            var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
+            var edge = this.get('edge');
+
+            // update synapse card, if this synapse is the one open there
+            if (onPageWithSynapseCard && edge == Metamaps.SynapseCard.openSynapseCard) {
+                Metamaps.SynapseCard.showCard(edge);
+            }
+        },
+        updateEdgeView: function() {
+            var onPageWithSynapseCard = Metamaps.Active.Map || Metamaps.Active.Topic;
+            var edge = this.get('edge');
+
+            // update the edge on the map
+            if (onPageWithSynapseCard && edge) {
+                Metamaps.Visualize.mGraph.plot();
+            }
+        }
+    });
+
+    self.SynapseCollection = Backbone.Collection.extend({
+        model: self.Synapse,
+        url: '/synapses'
+    });
+
+    self.Mapping = Backbone.Model.extend({
+        urlRoot: '/mappings',
+        blacklist: ['created_at', 'updated_at'],
+        toJSON: function (options) {
+            return _.omit(this.attributes, this.blacklist);
+        },
+        initialize: function () {
+            if (this.isNew()) {
+                this.set({
+                    "user_id": Metamaps.Active.Mapper.id,
+                    "map_id": Metamaps.Active.Map ? Metamaps.Active.Map.id : null
+                });
+            }
+        },
+        getMap: function () {
+            return Metamaps.Map.get(this.get('map_id'));
+        },
+        getTopic: function () {
+            if (this.get('mappable_type') === 'Topic') return Metamaps.Topic.get(this.get('mappable_id'));
+            else return false;
+        },
+        getSynapse: function () {
+            if (this.get('mappable_type') === 'Synapse') return Metamaps.Synapse.get(this.get('mappable_id'));
+            else return false;
+        }
+    });
+
+    self.MappingCollection = Backbone.Collection.extend({
+        model: self.Mapping,
+        url: '/mappings'
+    });
+
+    Metamaps.Metacodes = Metamaps.Metacodes ? new self.MetacodeCollection(Metamaps.Metacodes) : new self.MetacodeCollection();
+
+    Metamaps.Topics = Metamaps.Topics ? new self.TopicCollection(Metamaps.Topics) : new self.TopicCollection();
+
+    Metamaps.Synapses = Metamaps.Synapses ? new self.SynapseCollection(Metamaps.Synapses) : new self.SynapseCollection();
+
+    Metamaps.Mappers = Metamaps.Mappers ? new self.MapperCollection(Metamaps.Mappers) : new self.MapperCollection();
+
+    // this is for topic view
+    Metamaps.Creators = Metamaps.Creators ? new self.MapperCollection(Metamaps.Creators) : new self.MapperCollection();
+
+    if (Metamaps.Active.Map) {
+        Metamaps.Mappings = Metamaps.Mappings ? new self.MappingCollection(Metamaps.Mappings) : new self.MappingCollection();
+
+        Metamaps.Active.Map = new self.Map(Metamaps.Active.Map);
+    }
+
+    if (Metamaps.Active.Topic) Metamaps.Active.Topic = new self.Topic(Metamaps.Active.Topic);
+
+    //attach collection event listeners
+    self.attachCollectionEvents = function () {
+
+        Metamaps.Topics.on("add remove", function(topic){
+            Metamaps.Map.InfoBox.updateNumbers();
+            Metamaps.Filter.checkMetacodes();
+            Metamaps.Filter.checkMappers();
+        });
+
+        Metamaps.Synapses.on("add remove", function(synapse){
+            Metamaps.Map.InfoBox.updateNumbers();
+            Metamaps.Filter.checkSynapses();
+            Metamaps.Filter.checkMappers();
+        });
+
+        if (Metamaps.Active.Map) {
+            Metamaps.Mappings.on("add remove", function(mapping){
+                Metamaps.Map.InfoBox.updateNumbers();
+                Metamaps.Filter.checkSynapses();
+                Metamaps.Filter.checkMetacodes();
+                Metamaps.Filter.checkMappers();
+            });
+        }
+    }
+    self.attachCollectionEvents();
+}; // end Metamaps.Backbone.init
+
+
+/*
+ *
+ *   CREATE
+ *
+ */
+Metamaps.Create = {
+    isSwitchingSet: false, // indicates whether the metacode set switch lightbox is open
+    selectedMetacodeSet: null,
+    selectedMetacodeSetIndex: null,
+    selectedMetacodeNames: [],
+    newSelectedMetacodeNames: [],
+    selectedMetacodes: [],
+    newSelectedMetacodes: [],
+    init: function () {
+        var self = Metamaps.Create;
+        self.newTopic.init();
+        self.newSynapse.init();
+
+        //////
+        //////
+        //// SWITCHING METACODE SETS
+
+        $('#metacodeSwitchTabs').tabs({
+            selected: self.selectedMetacodeSetIndex
+        }).addClass("ui-tabs-vertical ui-helper-clearfix");
+        $("#metacodeSwitchTabs .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
+        $('.customMetacodeList li').click(self.toggleMetacodeSelected); // within the custom metacode set tab
+    },
+    toggleMetacodeSelected: function () {
+        var self = Metamaps.Create;
+
+        if ($(this).attr('class') != 'toggledOff') {
+            $(this).addClass('toggledOff');
+            var value_to_remove = $(this).attr('id');
+            var name_to_remove = $(this).attr('data-name');
+            self.newSelectedMetacodes.splice(self.newSelectedMetacodes.indexOf(value_to_remove), 1);
+            self.newSelectedMetacodeNames.splice(self.newSelectedMetacodeNames.indexOf(name_to_remove), 1);
+        } else if ($(this).attr('class') == 'toggledOff') {
+            $(this).removeClass('toggledOff');
+            self.newSelectedMetacodes.push($(this).attr('id'));
+            self.newSelectedMetacodeNames.push($(this).attr('data-name'));
+        }
+    },
+    updateMetacodeSet: function (set, index, custom) {
+
+        if (custom && Metamaps.Create.newSelectedMetacodes.length == 0) {
+            alert('Please select at least one metacode to use!');
+            return false;
+        }
+
+        var codesToSwitchToIds;
+        var metacodeModels = new Metamaps.Backbone.MetacodeCollection();
+        Metamaps.Create.selectedMetacodeSetIndex = index;
+        Metamaps.Create.selectedMetacodeSet = "metacodeset-" + set;
+
+        if (!custom) {
+            codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',');
+            $('.customMetacodeList li').addClass('toggledOff');
+            Metamaps.Create.selectedMetacodes = [];
+            Metamaps.Create.selectedMetacodeNames = [];
+            Metamaps.Create.newSelectedMetacodes = [];
+            Metamaps.Create.newSelectedMetacodeNames = [];
+        }
+        else if (custom) {
+            // uses .slice to avoid setting the two arrays to the same actual array
+            Metamaps.Create.selectedMetacodes = Metamaps.Create.newSelectedMetacodes.slice(0);
+            Metamaps.Create.selectedMetacodeNames = Metamaps.Create.newSelectedMetacodeNames.slice(0);
+            codesToSwitchToIds = Metamaps.Create.selectedMetacodes.slice(0);
+        }
+
+        // sort by name
+        for (var i = 0; i < codesToSwitchToIds.length; i++) {
+            metacodeModels.add( Metamaps.Metacodes.get(codesToSwitchToIds[i]) );
+        };
+        metacodeModels.sort();
+
+        $('#metacodeImg, #metacodeImgTitle').empty();
+        $('#metacodeImg').removeData('cloudcarousel');
+        var newMetacodes = "";
+        metacodeModels.each(function(metacode){
+            newMetacodes += '<img class="cloudcarousel" width="40" height="40" src="' + metacode.get('icon') + '" data-id="' + metacode.id + '" title="' + metacode.get('name') + '" alt="' + metacode.get('name') + '"/>';
+        });
+
+        $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
+            titleBox: $('#metacodeImgTitle'),
+            yRadius: 40,
+            xRadius: 190,
+            xPos: 170,
+            yPos: 40,
+            speed: 0.3,
+            mouseWheel: true,
+            bringToFront: true
+        });
+
+        Metamaps.GlobalUI.closeLightbox();
+        $('#topic_name').focus();
+
+        var mdata = {
+            "metacodes": {
+                "value": custom ? Metamaps.Create.selectedMetacodes.toString() : Metamaps.Create.selectedMetacodeSet
+            }
+        };
+        $.ajax({
+            type: "POST",
+            dataType: 'json',
+            url: "/user/updatemetacodes",
+            data: mdata,
+            success: function (data) {
+                console.log('selected metacodes saved');
+            },
+            error: function () {
+                console.log('failed to save selected metacodes');
+            }
+        });
+    },
+
+    cancelMetacodeSetSwitch: function () {
+        var self = Metamaps.Create;
+        self.isSwitchingSet = false;
+
+        if (self.selectedMetacodeSet != "metacodeset-custom") {
+            $('.customMetacodeList li').addClass('toggledOff');
+            self.selectedMetacodes = [];
+            self.selectedMetacodeNames = [];
+            self.newSelectedMetacodes = [];
+            self.newSelectedMetacodeNames = [];
+        } else { // custom set is selected
+            // reset it to the current actual selection
+            $('.customMetacodeList li').addClass('toggledOff');
+            for (var i = 0; i < self.selectedMetacodes.length; i++) {
+                $('#' + self.selectedMetacodes[i]).removeClass('toggledOff');
+            };
+            // uses .slice to avoid setting the two arrays to the same actual array
+            self.newSelectedMetacodeNames = self.selectedMetacodeNames.slice(0);
+            self.newSelectedMetacodes = self.selectedMetacodes.slice(0);
+        }
+        $('#metacodeSwitchTabs').tabs("option", "active", self.selectedMetacodeSetIndex);
+        $('#topic_name').focus();
+    },
+    newTopic: {
+        init: function () {
+
+            $('#topic_name').keyup(function () {
+                Metamaps.Create.newTopic.name = $(this).val();
+            });
+
+            var topicBloodhound = new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/topics/autocomplete_topic?term=%QUERY',
+                    wildcard: '%QUERY',
+                },
+            });
+
+            // initialize the autocomplete results for the metacode spinner
+            $('#topic_name').typeahead(
+                {
+                    highlight: true,
+                    minLength: 2,
+                },
+                [{
+                    name: 'topic_autocomplete',
+                    limit: 8,
+                    display: function (s) { return s.label; },
+                    templates: {
+                        suggestion: function(s) {
+                            return Hogan.compile($('#topicAutocompleteTemplate').html()).render(s);
+                        },
+                    },
+                    source: topicBloodhound,
+                }]
+            );
+
+            // tell the autocomplete to submit the form with the topic you clicked on if you pick from the autocomplete
+            $('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
+                Metamaps.Topic.getTopicFromAutocomplete(datum.id);
+            });
+
+            // initialize metacode spinner and then hide it
+            $("#metacodeImg").CloudCarousel({
+                titleBox: $('#metacodeImgTitle'),
+                yRadius: 40,
+                xRadius: 190,
+                xPos: 170,
+                yPos: 40,
+                speed: 0.3,
+                mouseWheel: true,
+                bringToFront: true
+            });
+            $('.new_topic').hide();
+        },
+        name: null,
+        newId: 1,
+        beingCreated: false,
+        metacode: null,
+        x: null,
+        y: null,
+        addSynapse: false,
+        open: function () {
+            $('#new_topic').fadeIn('fast', function () {
+                $('#topic_name').focus();
+            });
+            Metamaps.Create.newTopic.beingCreated = true;
+            Metamaps.Create.newTopic.name = "";
+        },
+        hide: function () {
+            $('#new_topic').fadeOut('fast');
+            $("#topic_name").typeahead('val', '');
+            Metamaps.Create.newTopic.beingCreated = false;
+        }
+    },
+    newSynapse: {
+        init: function () {
+            var self = Metamaps.Create.newSynapse;
+
+            $('#synapse_desc').keyup(function () {
+                Metamaps.Create.newSynapse.description = $(this).val();
+            });
+
+            var synapseBloodhound = new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/synapses?term=%QUERY',
+                    wildcard: '%QUERY',
+                },
+            });
+            var existingSynapseBloodhound = new Bloodhound({
+                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
+                queryTokenizer: Bloodhound.tokenizers.whitespace,
+                remote: {
+                    url: '/search/synapses?topic1id=%TOPIC1&topic2id=%TOPIC2',
+                    prepare: function(query, settings) {
+                      var self = Metamaps.Create.newSynapse;
+                      if (Metamaps.Selected.Nodes.length < 2) {
+                        settings.url = settings.url.replace("%TOPIC1", self.topic1id).replace("%TOPIC2", self.topic2id);
+                        return settings;
+                      } else {
+                        return null;
+                      }
+                    },
+                },
+            });
+
+            // initialize the autocomplete results for synapse creation
+            $('#synapse_desc').typeahead(
+                {
+                    highlight: true,
+                    minLength: 2,
+                },
+                [{
+                    name: 'synapse_autocomplete',
+                    display: function(s) { return s.label; },
+                    templates: {
+                        suggestion: function(s) {
+                            return Hogan.compile("<div class='genericSynapseDesc'>{{label}}</div>").render(s);
+                        },
+                    },
+                    source: synapseBloodhound,
+                },
+                {
+                    name: 'existing_synapses',
+                    limit: 50,
+                    display: function(s) { return s.label; },
+                    templates: {
+                        suggestion: function(s) {
+                            return Hogan.compile($('#synapseAutocompleteTemplate').html()).render(s);
+                        },
+                        header: "<h3>Existing synapses</h3>"
+                    },
+                    source: existingSynapseBloodhound,
+                }]
+          );
+
+            $('#synapse_desc').bind('typeahead:select', function (event, datum, dataset) {
+                if (datum.id) { // if they clicked on an existing synapse get it
+                    Metamaps.Synapse.getSynapseFromAutocomplete(datum.id);
+                }
+                else {
+                    Metamaps.Create.newSynapse.description = datum.value;
+                    Metamaps.Synapse.createSynapseLocally();
+                }
+            });
+        },
+        beingCreated: false,
+        description: null,
+        topic1id: null,
+        topic2id: null,
+        newSynapseId: null,
+        open: function () {
+            $('#new_synapse').fadeIn('fast', function () {
+                $('#synapse_desc').focus();
+            });
+            Metamaps.Create.newSynapse.beingCreated = true;
+        },
+        hide: function () {
+            $('#new_synapse').fadeOut('fast');
+            $("#synapse_desc").typeahead('val', '');
+            Metamaps.Create.newSynapse.beingCreated = false;
+            Metamaps.Create.newTopic.addSynapse = false;
+            Metamaps.Create.newSynapse.topic1id = 0;
+            Metamaps.Create.newSynapse.topic2id = 0;
+            Metamaps.Mouse.synapseStartCoordinates = [];
+            Metamaps.Visualize.mGraph.plot();
+        },
+    }
+}; // end Metamaps.Create
+
+
+////////////////// TOPIC AND SYNAPSE CARDS //////////////////////////
+
+
+/*
+ *
+ *   TOPICCARD
+ *
+ */
+Metamaps.TopicCard = {
+    openTopicCard: null, //stores the topic that's currently open
+    authorizedToEdit: false, // stores boolean for edit permission for open topic card
+    init: function () {
+        var self = Metamaps.TopicCard;
+
+        // initialize best_in_place editing
+        $('.authenticated div.permission.canEdit .best_in_place').best_in_place();
+
+        Metamaps.TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html());
+
+        // initialize topic card draggability and resizability
+        $('.showcard').draggable({
+            handle: ".metacodeImage"
+        });
+
+        embedly('on', 'card.rendered', self.embedlyCardRendered);
+    },
+    /**
+     * Will open the Topic Card for the node that it's passed
+     * @param {$jit.Graph.Node} node
+     */
+    showCard: function (node) {
+        var self = Metamaps.TopicCard;
+
+        var topic = node.getData('topic');
+
+        self.openTopicCard = topic;
+        self.authorizedToEdit = topic.authorizeToEdit(Metamaps.Active.Mapper);
+        //populate the card that's about to show with the right topics data
+        self.populateShowCard(topic);
+        $('.showcard').fadeIn('fast');
+    },
+    hideCard: function () {
+        var self = Metamaps.TopicCard;
+
+        $('.showcard').fadeOut('fast');
+        self.openTopicCard = null;
+        self.authorizedToEdit = false;
+    },
+    embedlyCardRendered: function (iframe) {
+        var self = Metamaps.TopicCard;
+
+        $('#embedlyLinkLoader').hide();
+
+        // means that the embedly call returned 404 not found
+        if ($('#embedlyLink')[0]) {
+            $('#embedlyLink').css('display', 'block').fadeIn('fast');
+            $('.embeds').addClass('nonEmbedlyLink');
+        }
+
+        $('.CardOnGraph').addClass('hasAttachment');
+        if (self.authorizedToEdit) {
+            $('.embeds').append('<div id="linkremove"></div>');
+            $('#linkremove').click(self.removeLink);
+        }
+    },
+    removeLink: function () {
+        var self = Metamaps.TopicCard;
+        self.openTopicCard.save({
+            link: null
+        });
+        $('.embeds').empty().removeClass('nonEmbedlyLink');
+        $('#addLinkInput input').val("");
+        $('.attachments').removeClass('hidden');
+        $('.CardOnGraph').removeClass('hasAttachment');
+    },
+    bindShowCardListeners: function (topic) {
+        var self = Metamaps.TopicCard;
+        var showCard = document.getElementById('showcard');
+
+        var authorized = self.authorizedToEdit;
+
+        // get mapper image
+        var setMapperImage = function (mapper) {
+            $('.contributorIcon').attr('src', mapper.get('image'));
+        };
+        Metamaps.Mapper.get(topic.get('user_id'), setMapperImage);
+
+        // starting embed.ly
+        var resetFunc = function () {
+            $('#addLinkInput input').val("");
+            $('#addLinkInput input').focus();
+        };
+        var inputEmbedFunc = function (event) {
+
+            var element = this;
+            setTimeout(function () {
+                var text = $(element).val();
+                if (event.type=="paste" || (event.type=="keyup" && event.which==13)){
+                  // TODO evaluate converting this to '//' no matter what (infer protocol)
+                  if (text.slice(0, 7) !== 'http://' &&
+                      text.slice(0, 8) !== 'https://' &&
+                      text.slice(0, 2) !== '//') {
+                        text='//'+text;
+                    }
+                    topic.save({
+                        link: text
+                    });
+                    var embedlyEl = $('<a/>', {
+                        id: 'embedlyLink',
+                        'data-card-description': '0',
+                        href: text
+                    }).html(text);
+                    $('.attachments').addClass('hidden');
+                    $('.embeds').append(embedlyEl);
+                    $('.embeds').append('<div id="embedlyLinkLoader"></div>');
+                    var loader = new CanvasLoader('embedlyLinkLoader');
+                    loader.setColor('#4fb5c0'); // default is '#000000'
+                    loader.setDiameter(28); // default is 40
+                    loader.setDensity(41); // default is 40
+                    loader.setRange(0.9); // default is 1.3
+                    loader.show(); // Hidden by default
+                    var e = embedly('card', document.getElementById('embedlyLink'));
+                    if (!e) {
+                        self.handleInvalidLink();
+                    }
+                }
+            }, 100);
+        };
+        $('#addLinkReset').click(resetFunc);
+        $('#addLinkInput input').bind("paste keyup",inputEmbedFunc);
+
+        // initialize the link card, if there is a link
+        if (topic.get('link') && topic.get('link') !== '') {
+            var loader = new CanvasLoader('embedlyLinkLoader');
+            loader.setColor('#4fb5c0'); // default is '#000000'
+            loader.setDiameter(28); // default is 40
+            loader.setDensity(41); // default is 40
+            loader.setRange(0.9); // default is 1.3
+            loader.show(); // Hidden by default
+            var e = embedly('card', document.getElementById('embedlyLink'));
+            if (!e) {
+                self.handleInvalidLink();
+            }
+        }
+
+
+        var selectingMetacode = false;
+        // attach the listener that shows the metacode title when you hover over the image
+        $('.showcard .metacodeImage').mouseenter(function () {
+            $('.showcard .icon').css('z-index', '4');
+            $('.showcard .metacodeTitle').show();
+        });
+        $('.showcard .linkItem.icon').mouseleave(function () {
+            if (!selectingMetacode) {
+                $('.showcard .metacodeTitle').hide();
+                $('.showcard .icon').css('z-index', '1');
+            }
+        });
+
+        var metacodeLiClick = function () {
+            selectingMetacode = false;
+            var metacodeId = parseInt($(this).attr('data-id'));
+            var metacode = Metamaps.Metacodes.get(metacodeId);
+            $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
+                .append('<div class="expandMetacodeSelect"></div>')
+                .attr('class', 'metacodeTitle mbg' + metacode.id);
+            $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')');
+            topic.save({
+                metacode_id: metacode.id
+            });
+            Metamaps.Visualize.mGraph.plot();
+            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
+            $('.metacodeTitle').hide();
+            $('.showcard .icon').css('z-index', '1');
+        };
+
+        var openMetacodeSelect = function (event) {
+            var windowWidth;
+            var showcardLeft;
+            var TOPICCARD_WIDTH = 300;
+            var METACODESELECT_WIDTH = 404;
+            var distanceFromEdge;
+
+            var MAX_METACODELIST_HEIGHT = 270;
+            var windowHeight;
+            var showcardTop;
+            var topicTitleHeight;
+            var distanceFromBottom;
+
+            if (!selectingMetacode) {
+                selectingMetacode = true;
+
+                // this is to make sure the metacode
+                // select is accessible onscreen, when opened
+                // while topic card is close to the right
+                // edge of the screen
+                windowWidth = $(window).width();
+                showcardLeft = parseInt($('.showcard').css('left'));
+                distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH);
+                if (distanceFromEdge < METACODESELECT_WIDTH) {
+                    $('.metacodeSelect').addClass('onRightEdge');
+                }
+
+                // this is to make sure the metacode
+                // select is accessible onscreen, when opened
+                // while topic card is close to the bottom
+                // edge of the screen
+                windowHeight = $(window).height();
+                showcardTop = parseInt($('.showcard').css('top'));
+                topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'));
+                heightOfSetList = $('.showcard .metacodeSelect').height();
+                distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight);
+                if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
+                    $('.metacodeSelect').addClass('onBottomEdge');
+                }
+
+                $('.metacodeSelect').show();
+                event.stopPropagation();
+            }
+        };
+
+        var hideMetacodeSelect = function () {
+            selectingMetacode = false;
+            $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge');
+            $('.metacodeTitle').hide();
+            $('.showcard .icon').css('z-index', '1');
+        };
+
+        if (authorized) {
+            $('.showcard .metacodeTitle').click(openMetacodeSelect);
+            $('.showcard').click(hideMetacodeSelect);
+            $('.metacodeSelect > ul > li').click(function (event){
+                event.stopPropagation();
+            });
+            $('.metacodeSelect li li').click(metacodeLiClick);
+
+            var bipName = $(showCard).find('.best_in_place_name');
+            bipName.bind("best_in_place:activate", function () {
+                var $el = bipName.find('textarea');
+                var el = $el[0];
+
+                $el.attr('maxlength', '140');
+
+                $('.showcard .title').append('<div class="nameCounter forTopic"></div>');
+
+                var callback = function (data) {
+                    $('.nameCounter.forTopic').html(data.all + '/140');
+                };
+                Countable.live(el, callback);
+            });
+            bipName.bind("best_in_place:deactivate", function () {
+                $('.nameCounter.forTopic').remove();
+            });
+
+            //bind best_in_place ajax callbacks
+            bipName.bind("ajax:success", function () {
+                var name = Metamaps.Util.decodeEntities($(this).html());
+                topic.set("name", name);
+                topic.trigger('saved');
+            });
+
+            $(showCard).find('.best_in_place_desc').bind("ajax:success", function () {
+                this.innerHTML = this.innerHTML.replace(/\r/g, '');
+                var desc = $(this).html() === $(this).data('nil') ? "" : $(this).html();
+                topic.set("desc", desc);
+                topic.trigger('saved');
+            });
+        }
+
+
+        var permissionLiClick = function (event) {
+            selectingPermission = false;
+            var permission = $(this).attr('class');
+            topic.save({
+                permission: permission
+            });
+            $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
+            $('.showcard .permissionSelect').remove();
+            event.stopPropagation();
+        };
+
+        var openPermissionSelect = function (event) {
+            if (!selectingPermission) {
+                selectingPermission = true;
+                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+                if ($(this).hasClass('co')) {
+                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pu')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pr')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
+                }
+                $('.showcard .permissionSelect li').click(permissionLiClick);
+                event.stopPropagation();
+            }
+        };
+
+        var hidePermissionSelect = function () {
+            selectingPermission = false;
+            $('.showcard .yourTopic .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+            $('.showcard .permissionSelect').remove();
+        };
+        // ability to change permission
+        var selectingPermission = false;
+        if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
+            $('.showcard .yourTopic .mapPerm').click(openPermissionSelect);
+            $('.showcard').click(hidePermissionSelect);
+        }
+
+        $('.links .mapCount').unbind().click(function(event){
+            $('.mapCount .tip').toggle();
+            $('.showcard .hoverTip').toggleClass('hide');
+            event.stopPropagation();
+        });
+        $('.mapCount .tip').unbind().click(function(event){
+            event.stopPropagation();
+        });
+        $('.showcard').unbind('.hideTip').bind('click.hideTip', function(){
+            $('.mapCount .tip').hide();
+            $('.showcard .hoverTip').removeClass('hide');
+        });
+
+        $('.mapCount .tip li a').click(Metamaps.Router.intercept);
+
+        var originalText = $('.showMore').html();
+        $('.mapCount .tip .showMore').unbind().toggle(
+            function(event){
+                $('.extraText').toggleClass("hideExtra");
+                $('.showMore').html('Show less...');
+            },
+            function(event){
+                $('.extraText').toggleClass("hideExtra");
+                $('.showMore').html(originalText);
+            });
+
+        $('.mapCount .tip showMore').unbind().click(function(event){
+            event.stopPropagation();
+        });
+    },
+    handleInvalidLink: function() {
+        var self = Metamaps.TopicCard;
+
+        self.removeLink();
+        Metamaps.GlobalUI.notifyUser("Invalid link");
+    },
+    populateShowCard: function (topic) {
+        var self = Metamaps.TopicCard;
+
+        var showCard = document.getElementById('showcard');
+
+        $(showCard).find('.permission').remove();
+
+        var topicForTemplate = self.buildObject(topic);
+        var html = self.generateShowcardHTML.render(topicForTemplate);
+
+        if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
+            var perm = document.createElement('div');
+
+            var string = 'permission canEdit';
+            if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) string += ' yourTopic';
+            perm.className = string;
+            perm.innerHTML = html;
+            showCard.appendChild(perm);
+        } else {
+            var perm = document.createElement('div');
+            perm.className = 'permission cannotEdit';
+            perm.innerHTML = html;
+            showCard.appendChild(perm);
+        }
+
+        Metamaps.TopicCard.bindShowCardListeners(topic);
+    },
+    generateShowcardHTML: null, // will be initialized into a Hogan template within init function
+    //generateShowcardHTML
+    buildObject: function (topic) {
+        var self=Metamaps.TopicCard;
+
+        var nodeValues = {};
+
+        var authorized = topic.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+
+        } else {
+
+        }
+
+        var desc_nil = "Click to add description...";
+
+        nodeValues.attachmentsHidden = '';
+        if (topic.get('link') && topic.get('link')!== '') {
+            nodeValues.embeds = '<a href="' + topic.get('link') + '" id="embedlyLink" target="_blank" data-card-description="0">';
+            nodeValues.embeds += topic.get('link');
+            nodeValues.embeds += '</a><div id="embedlyLinkLoader"></div>';
+            nodeValues.attachmentsHidden = 'hidden';
+            nodeValues.hasAttachment = "hasAttachment";
+        }
+        else {
+            nodeValues.embeds = '';
+            nodeValues.hasAttachment = '';
+        }
+
+        if (authorized) {
+            nodeValues.attachments = '<div class="addLink"><div id="addLinkIcon"></div>';
+            nodeValues.attachments += '<div id="addLinkInput"><input placeholder="Enter or paste a link"></input>';
+            nodeValues.attachments += '<div id="addLinkReset"></div></div></div>';
+        } else {
+            nodeValues.attachmentsHidden = 'hidden';
+            nodeValues.attachments = '';
+        }
+
+        var inmapsAr = topic.get("inmaps");
+        var inmapsLinks = topic.get("inmapsLinks");
+        nodeValues.inmaps ='';
+        if (inmapsAr.length < 6) {
+            for (i = 0; i < inmapsAr.length; i++) {
+                var url = "/maps/" + inmapsLinks[i];
+                nodeValues.inmaps += '<li><a href="' + url + '">'  + inmapsAr[i]+ '</a></li>';
+            }
+        }
+        else {
+            for (i = 0; i < 5; i++){
+                var url = "/maps/" + inmapsLinks[i];
+                nodeValues.inmaps += '<li><a href="' + url + '">' + inmapsAr[i] + '</a></li>';
+            }
+            extra = inmapsAr.length - 5;
+            nodeValues.inmaps += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
+            for (i = 5; i < inmapsAr.length; i++){
+                var url = "/maps/" + inmapsLinks[i];
+                nodeValues.inmaps += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsAr[i]+ '</a></li>';
+            }
+        }
+        nodeValues.permission = topic.get("permission");
+        nodeValues.mk_permission = topic.get("permission").substring(0, 2);
+        nodeValues.map_count = topic.get("map_count").toString();
+        nodeValues.synapse_count = topic.get("synapse_count").toString();
+        nodeValues.id = topic.isNew() ? topic.cid : topic.id;
+        nodeValues.metacode = topic.getMetacode().get("name");
+        nodeValues.metacode_class = 'mbg' + topic.get('metacode_id');
+        nodeValues.imgsrc = topic.getMetacode().get("icon");
+        nodeValues.name = topic.get("name");
+        nodeValues.userid = topic.get("user_id");
+        nodeValues.username = topic.get("user_name");
+        nodeValues.date = topic.getDate();
+        // the code for this is stored in /views/main/_metacodeOptions.html.erb
+        nodeValues.metacode_select = $('#metacodeOptions').html();
+        nodeValues.desc_nil = desc_nil;
+        nodeValues.desc = (topic.get("desc") == "" && authorized) ? desc_nil : topic.get("desc");
+        return nodeValues;
+    }
+}; // end Metamaps.TopicCard
+
+
+/*
+ *
+ *   SYNAPSECARD
+ *
+ */
+Metamaps.SynapseCard = {
+    openSynapseCard: null,
+    showCard: function (edge, e) {
+        var self = Metamaps.SynapseCard;
+
+        //reset so we don't interfere with other edges, but first, save its x and y
+        var myX = $('#edit_synapse').css('left');
+        var myY = $('#edit_synapse').css('top');
+        $('#edit_synapse').remove();
+
+        //so label is missing while editing
+        Metamaps.Control.deselectEdge(edge);
+
+        var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0;
+        var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse
+
+        //create the wrapper around the form elements, including permissions
+        //classes to make best_in_place happy
+        var edit_div = document.createElement('div');
+        edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>';
+        edit_div.setAttribute('id', 'edit_synapse');
+        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+            edit_div.className = 'permission canEdit';
+            edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : '';
+        } else {
+            edit_div.className = 'permission cannotEdit';
+        }
+        $('#wrapper').append(edit_div);
+
+        self.populateShowCard(edge, synapse);
+
+        //drop it in the right spot, activate it
+        $('#edit_synapse').css('position', 'absolute');
+        if (e) {
+            $('#edit_synapse').css('left', e.clientX);
+            $('#edit_synapse').css('top', e.clientY);
+        } else {
+            $('#edit_synapse').css('left', myX);
+            $('#edit_synapse').css('top', myY);
+        }
+        //$('#edit_synapse_name').click(); //required in case name is empty
+        //$('#edit_synapse_name input').focus();
+        $('#edit_synapse').show();
+
+        self.openSynapseCard = edge;
+    },
+
+    hideCard: function () {
+        $('#edit_synapse').remove();
+        Metamaps.SynapseCard.openSynapseCard = null;
+    },
+
+    populateShowCard: function (edge, synapse) {
+        var self = Metamaps.SynapseCard;
+
+        self.add_synapse_count(edge);
+        self.add_desc_form(synapse);
+        self.add_drop_down(edge, synapse);
+        self.add_user_info(synapse);
+        self.add_perms_form(synapse);
+        self.add_direction_form(synapse);
+    },
+    add_synapse_count: function (edge) {
+        var count = edge.getData("synapses").length;
+
+        $('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
+    },
+    add_desc_form: function (synapse) {
+        var data_nil = 'Click to add description.';
+
+        // TODO make it so that this would work even in sandbox mode,
+        // currently with Best_in_place it won't
+
+        //desc editing form
+        $('#editSynUpperBar').append('<div id="edit_synapse_desc"></div>');
+        $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc');
+        $('#edit_synapse_desc').attr('data-object', 'synapse');
+        $('#edit_synapse_desc').attr('data-attribute', 'desc');
+        $('#edit_synapse_desc').attr('data-type', 'textarea');
+        $('#edit_synapse_desc').attr('data-nil', data_nil);
+        $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id);
+        $('#edit_synapse_desc').html(synapse.get("desc"));
+
+        //if edge data is blank or just whitespace, populate it with data_nil
+        if ($('#edit_synapse_desc').html().trim() == '') {
+            if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+                $('#edit_synapse_desc').html(data_nil);
+            }
+            else {
+                $('#edit_synapse_desc').html("(no description)");
+            }
+        }
+
+        $('#edit_synapse_desc').bind("ajax:success", function () {
+            var desc = $(this).html();
+            if (desc == data_nil) {
+                synapse.set("desc", '');
+            } else {
+                synapse.set("desc", desc);
+            }
+            synapse.trigger('saved');
+            Metamaps.Control.selectEdge(synapse.get('edge'));
+            Metamaps.Visualize.mGraph.plot();
+        });
+    },
+    add_drop_down: function (edge, synapse) {
+        var list, i, synapses, l, desc;
+
+        synapses = edge.getData("synapses");
+        l = synapses.length;
+
+        if (l > 1) {
+            // append the element that you click to show dropdown select
+            $('#editSynUpperBar').append('<div id="dropdownSynapses"></div>');
+            $('#dropdownSynapses').click(function(e){
+                e.preventDefault();
+                e.stopPropagation(); // stop it from immediately closing it again
+                $('#switchSynapseList').toggle();
+            });
+            // hide the dropdown again if you click anywhere else on the synapse card
+            $('#edit_synapse').click(function(){
+                $('#switchSynapseList').hide();
+            });
+
+            // generate the list of other synapses
+            list = '<ul id="switchSynapseList">';
+            for (i = 0; i < l; i++) {
+                if (synapses[i] !== synapse) { // don't add the current one to the list
+                    desc = synapses[i].get('desc');
+                    desc = desc === "" || desc === null ? "(no description)" : desc;
+                    list += '<li data-synapse-index="' + i + '">' + desc + '</li>';
+                }
+            }
+            list += '</ul>'
+            // add the list of the other synapses
+            $('#editSynLowerBar').append(list);
+
+            // attach click listeners to list items that
+            // will cause it to switch the displayed synapse
+            // when you click it
+            $('#switchSynapseList li').click(function(e){
+                e.stopPropagation();
+                var index = parseInt($(this).attr('data-synapse-index'));
+                edge.setData('displayIndex', index);
+                Metamaps.Visualize.mGraph.plot();
+                Metamaps.SynapseCard.showCard(edge, false);
+            });
+        }
+    },
+    add_user_info: function (synapse) {
+        var u = '<div id="edgeUser" class="hoverForTip">';
+        u += '<a href="/explore/mapper/' + synapse.get("user_id") + '"> <img src="" width="24" height="24" /></a>'
+        u += '<div class="tip">' + synapse.get("user_name") + '</div></div>';
+        $('#editSynLowerBar').append(u);
+
+        // get mapper image
+        var setMapperImage = function (mapper) {
+            $('#edgeUser img').attr('src', mapper.get('image'));
+        };
+        Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage);
+    },
+
+    add_perms_form: function (synapse) {
+        //permissions - if owner, also allow permission editing
+        $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get("permission").substring(0, 2) + '"></div>');
+
+        // ability to change permission
+        var selectingPermission = false;
+        var permissionLiClick = function (event) {
+            selectingPermission = false;
+            var permission = $(this).attr('class');
+            synapse.save({
+                permission: permission
+            });
+            $('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
+            $('#edit_synapse .permissionSelect').remove();
+            event.stopPropagation();
+        };
+
+        var openPermissionSelect = function (event) {
+            if (!selectingPermission) {
+                selectingPermission = true;
+                $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+                if ($(this).hasClass('co')) {
+                    $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pu')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
+                } else if ($(this).hasClass('pr')) {
+                    $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
+                }
+                $('#edit_synapse .permissionSelect li').click(permissionLiClick);
+                event.stopPropagation();
+            }
+        };
+
+        var hidePermissionSelect = function () {
+            selectingPermission = false;
+            $('#edit_synapse.yourEdge .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+            $('#edit_synapse .permissionSelect').remove();
+        };
+
+        if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
+            $('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect);
+            $('#edit_synapse').click(hidePermissionSelect);
+        }
+    }, //add_perms_form
+
+    add_direction_form: function (synapse) {
+        //directionality checkboxes
+        $('#editSynLowerBar').append('<div id="edit_synapse_left"></div>');
+        $('#editSynLowerBar').append('<div id="edit_synapse_right"></div>');
+
+        var edge = synapse.get('edge');
+
+        //determine which node is to the left and the right
+        //if directly in a line, top is left
+        if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
+            edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
+            edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
+            var left = edge.nodeTo.getData("topic");
+            var right = edge.nodeFrom.getData("topic");
+        } else {
+            var left = edge.nodeFrom.getData("topic");
+            var right = edge.nodeTo.getData("topic");
+        }
+
+        /*
+         * One node is actually on the left onscreen. Call it left, & the other right.
+         * If category is from-to, and that node is first, check the 'right' checkbox.
+         * Else check the 'left' checkbox since the arrow is incoming.
+         */
+
+        var directionCat = synapse.get('category'); //both, none, from-to
+        if (directionCat == 'from-to') {
+            var from_to = [synapse.get("node1_id"), synapse.get("node2_id")];
+            if (from_to[0] == left.id) {
+                //check left checkbox
+                $('#edit_synapse_left').addClass('checked');
+            } else {
+                //check right checkbox
+                $('#edit_synapse_right').addClass('checked');
+            }
+        } else if (directionCat == 'both') {
+            //check both checkboxes
+            $('#edit_synapse_left').addClass('checked');
+            $('#edit_synapse_right').addClass('checked');
+        }
+
+        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+            $('#edit_synapse_left, #edit_synapse_right').click(function () {
+
+                $(this).toggleClass('checked');
+
+                var leftChecked = $('#edit_synapse_left').is('.checked');
+                var rightChecked = $('#edit_synapse_right').is('.checked');
+
+                var dir = synapse.getDirection();
+                var dirCat = 'none';
+                if (leftChecked && rightChecked) {
+                    dirCat = 'both';
+                } else if (!leftChecked && rightChecked) {
+                    dirCat = 'from-to';
+                    dir = [right.id, left.id];
+                } else if (leftChecked && !rightChecked) {
+                    dirCat = 'from-to';
+                    dir = [left.id, right.id];
+                }
+
+                synapse.save({
+                    category: dirCat,
+                    node1_id: dir[0],
+                    node2_id: dir[1]
+                });
+                Metamaps.Visualize.mGraph.plot();
+            });
+        } // if
+    } //add_direction_form
+}; // end Metamaps.SynapseCard
+
+
+////////////////////// END TOPIC AND SYNAPSE CARDS //////////////////////////////////
+
+
+/*
+ *
+ *   VISUALIZE
+ *
+ */
+Metamaps.Visualize = {
+    mGraph: null, // a reference to the graph object.
+    cameraPosition: null, // stores the camera position when using a 3D visualization
+    type: "ForceDirected", // the type of graph we're building, could be "RGraph", "ForceDirected", or "ForceDirected3D"
+    loadLater: false, // indicates whether there is JSON that should be loaded right in the offset, or whether to wait till the first topic is created
+    init: function () {
+        var self = Metamaps.Visualize;
+        // disable awkward dragging of the canvas element that would sometimes happen
+        $('#infovis-canvas').on('dragstart', function (event) {
+            event.preventDefault();
+        });
+
+        // prevent touch events on the canvas from default behaviour
+        $("#infovis-canvas").bind('touchstart', function (event) {
+            event.preventDefault();
+            self.mGraph.events.touched = true;
+        });
+
+        // prevent touch events on the canvas from default behaviour
+        $("#infovis-canvas").bind('touchmove', function (event) {
+            //Metamaps.JIT.touchPanZoomHandler(event);
+        });
+
+        // prevent touch events on the canvas from default behaviour
+        $("#infovis-canvas").bind('touchend touchcancel', function (event) {
+            lastDist = 0;
+            if (!self.mGraph.events.touchMoved && !Metamaps.Touch.touchDragNode) Metamaps.TopicCard.hideCurrentCard();
+            self.mGraph.events.touched = self.mGraph.events.touchMoved = false;
+            Metamaps.Touch.touchDragNode = false;
+        });
+    },
+    computePositions: function () {
+        var self = Metamaps.Visualize,
+            mapping;
+
+        if (self.type == "RGraph") {
+            var i, l, startPos, endPos, topic, synapse;
+
+            self.mGraph.graph.eachNode(function (n) {
+                topic = Metamaps.Topics.get(n.id);
+                topic.set({ node: n }, { silent: true });
+                topic.updateNode();
+
+                n.eachAdjacency(function (edge) {
+                    if(!edge.getData('init')) {
+                        edge.setData('init', true);
+
+                        l = edge.getData('synapseIDs').length;
+                        for (i = 0; i < l; i++) {
+                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+                            synapse.set({ edge: edge }, { silent: true });
+                            synapse.updateEdge();
+                        }
+                    }
+                });
+
+                var pos = n.getPos();
+                pos.setc(-200, -200);
+            });
+            self.mGraph.compute('end');
+        } else if (self.type == "ForceDirected") {
+            var i, l, startPos, endPos, topic, synapse;
+
+            self.mGraph.graph.eachNode(function (n) {
+                topic = Metamaps.Topics.get(n.id);
+                topic.set({ node: n }, { silent: true });
+                topic.updateNode();
+                mapping = topic.getMapping();
+
+                n.eachAdjacency(function (edge) {
+                    if(!edge.getData('init')) {
+                        edge.setData('init', true);
+
+                        l = edge.getData('synapseIDs').length;
+                        for (i = 0; i < l; i++) {
+                            synapse = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+                            synapse.set({ edge: edge }, { silent: true });
+                            synapse.updateEdge();
+                        }
+                    }
+                });
+
+                startPos = new $jit.Complex(0, 0);
+                endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'));
+                n.setPos(startPos, 'start');
+                n.setPos(endPos, 'end');
+            });
+        } else if (self.type == "ForceDirected3D") {
+            self.mGraph.compute();
+        }
+    },
+    /**
+     * render does the heavy lifting of creating the engine that renders the graph with the properties we desire
+     *
+     */
+    render: function () {
+        var self = Metamaps.Visualize, RGraphSettings, FDSettings;
+
+        if (self.type == "RGraph" && (!self.mGraph || self.mGraph instanceof $jit.ForceDirected)) {
+
+            RGraphSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);
+
+            $jit.RGraph.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
+            $jit.RGraph.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
+
+            RGraphSettings.width = $(document).width();
+            RGraphSettings.height = $(document).height();
+            RGraphSettings.background = Metamaps.JIT.RGraph.background;
+            RGraphSettings.levelDistance = Metamaps.JIT.RGraph.levelDistance;
+
+            self.mGraph = new $jit.RGraph(RGraphSettings);
+
+        } else if (self.type == "ForceDirected" && (!self.mGraph || self.mGraph instanceof $jit.RGraph)) {
+
+            FDSettings = $.extend(true, {}, Metamaps.JIT.ForceDirected.graphSettings);
+
+            $jit.ForceDirected.Plot.NodeTypes.implement(Metamaps.JIT.ForceDirected.nodeSettings);
+            $jit.ForceDirected.Plot.EdgeTypes.implement(Metamaps.JIT.ForceDirected.edgeSettings);
+
+            FDSettings.width = $('body').width();
+            FDSettings.height = $('body').height();
+
+            self.mGraph = new $jit.ForceDirected(FDSettings);
+
+        } else if (self.type == "ForceDirected3D" && !self.mGraph) {
+            // init ForceDirected3D
+            self.mGraph = new $jit.ForceDirected3D(Metamaps.JIT.ForceDirected3D.graphSettings);
+            self.cameraPosition = self.mGraph.canvas.canvases[0].camera.position;
+        }
+        else {
+            self.mGraph.graph.empty();
+        }
+
+        function runAnimation() {
+            Metamaps.Loading.hide();
+            // load JSON data, if it's not empty
+            if (!self.loadLater) {
+                //load JSON data.
+                var rootIndex = 0;
+                if (Metamaps.Active.Topic) {
+                    var node = _.find(Metamaps.JIT.vizData, function(node){
+                        return node.id === Metamaps.Active.Topic.id;
+                    });
+                    rootIndex = _.indexOf(Metamaps.JIT.vizData, node);
+                }
+                self.mGraph.loadJSON(Metamaps.JIT.vizData, rootIndex);
+                //compute positions and plot.
+                self.computePositions();
+                self.mGraph.busy = true;
+                if (self.type == "RGraph") {
+                    self.mGraph.fx.animate(Metamaps.JIT.RGraph.animate);
+                } else if (self.type == "ForceDirected") {
+                    self.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
+                } else if (self.type == "ForceDirected3D") {
+                    self.mGraph.animate(Metamaps.JIT.ForceDirected.animateFDLayout);
+                }
+            }
+        }
+        // hold until all the needed metacode images are loaded
+        // hold for a maximum of 80 passes, or 4 seconds of waiting time
+        var tries = 0;
+        function hold() {
+            var unique = _.uniq(Metamaps.Topics.models, function (metacode) { return metacode.get('metacode_id'); }),
+                requiredMetacodes = _.map(unique, function (metacode) { return metacode.get('metacode_id'); }),
+                loadedCount = 0;
+
+            _.each(requiredMetacodes, function (metacode_id) {
+                var metacode = Metamaps.Metacodes.get(metacode_id),
+                    img = metacode ? metacode.get('image') : false;
+
+                if (img && (img.complete || (typeof img.naturalWidth !== "undefined" && img.naturalWidth !== 0))) {
+                    loadedCount += 1;
+                }
+            });
+
+            if (loadedCount === requiredMetacodes.length || tries > 80) runAnimation();
+            else setTimeout(function(){ tries++; hold() }, 50);
+        }
+        hold();
+
+        // update the url now that the map is ready
+        clearTimeout(Metamaps.routerTimeoutId);
+        Metamaps.routerTimeoutId = setTimeout(function(){
+            var m = Metamaps.Active.Map;
+            var t = Metamaps.Active.Topic;
+
+            if (m && window.location.pathname !== "/maps/" + m.id) {
+                Metamaps.Router.navigate("/maps/" + m.id);
+            }
+            else if (t && window.location.pathname !== "/topics/" + t.id) {
+                Metamaps.Router.navigate("/topics/" + t.id);
+            }
+        }, 800);
+
+    }
+}; // end Metamaps.Visualize
+
+
+/*
+ *
+ *   UTIL
+ *
+ */
+Metamaps.Util = {
+    // helper function to determine how many lines are needed
+    // Line Splitter Function
+    // copyright Stephen Chapman, 19th April 2006
+    // you may copy this code but please keep the copyright notice as well
+    splitLine: function (st, n) {
+        var b = '';
+        var s = st ? st : '';
+        while (s.length > n) {
+            var c = s.substring(0, n);
+            var d = c.lastIndexOf(' ');
+            var e = c.lastIndexOf('\n');
+            if (e != -1) d = e;
+            if (d == -1) d = n;
+            b += c.substring(0, d) + '\n';
+            s = s.substring(d + 1);
+        }
+        return b + s;
+    },
+    nowDateFormatted: function () {
+        var date = new Date(Date.now());
+        var month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
+        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+        var year = date.getFullYear();
+
+        return month + '/' + day + '/' + year;
+    },
+    decodeEntities: function (desc) {
+        var str, temp = document.createElement('p');
+        temp.innerHTML = desc; //browser handles the topics
+        str = temp.textContent || temp.innerText;
+        temp = null; //delete the element;
+        return str;
+    }, //decodeEntities
+    getDistance: function (p1, p2) {
+        return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
+    },
+    coordsToPixels: function (coords) {
+        if (Metamaps.Visualize.mGraph) {
+            var canvas = Metamaps.Visualize.mGraph.canvas,
+                s = canvas.getSize(),
+                p = canvas.getPos(),
+                ox = canvas.translateOffsetX,
+                oy = canvas.translateOffsetY,
+                sx = canvas.scaleOffsetX,
+                sy = canvas.scaleOffsetY;
+            var pixels = {
+              x: (coords.x / (1/sx)) + p.x + s.width/2 + ox,
+              y: (coords.y / (1/sy)) + p.y + s.height/2 + oy
+            };
+            return pixels;
+        }
+        else {
+            return {
+                x: 0,
+                y: 0
+            };
+        }
+    },
+    pixelsToCoords: function (pixels) {
+        var coords;
+        if (Metamaps.Visualize.mGraph) {
+            var canvas = Metamaps.Visualize.mGraph.canvas,
+                s = canvas.getSize(),
+                p = canvas.getPos(),
+                ox = canvas.translateOffsetX,
+                oy = canvas.translateOffsetY,
+                sx = canvas.scaleOffsetX,
+                sy = canvas.scaleOffsetY;
+            coords = {
+                x: (pixels.x - p.x - s.width/2 - ox) * (1/sx),
+                y: (pixels.y - p.y - s.height/2 - oy) * (1/sy),
+            };
+        }
+        else {
+            coords = {
+                x: 0,
+                y: 0
+            };
+        }
+        return coords;
+    },
+    getPastelColor: function () {
+        var r = (Math.round(Math.random()* 127) + 127).toString(16);
+        var g = (Math.round(Math.random()* 127) + 127).toString(16);
+        var b = (Math.round(Math.random()* 127) + 127).toString(16);
+        return Metamaps.Util.colorLuminance('#' + r + g + b, -0.4);
+    },
+    // darkens a hex value by 'lum' percentage
+    colorLuminance: function (hex, lum) {
+
+        // validate hex string
+        hex = String(hex).replace(/[^0-9a-f]/gi, '');
+        if (hex.length < 6) {
+            hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
+        }
+        lum = lum || 0;
+
+        // convert to decimal and change luminosity
+        var rgb = "#", c, i;
+        for (i = 0; i < 3; i++) {
+            c = parseInt(hex.substr(i*2,2), 16);
+            c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
+            rgb += ("00"+c).substr(c.length);
+        }
+
+        return rgb;
+    },
+    generateOptionsList: function (data) {
+        var newlist = "";
+        for (var i = 0; i < data.length; i++) {
+            newlist = newlist + '<option value="' + data[i]['id'] + '">' + data[i]['1'][1] + '</option>';
+        }
+        return newlist;
+    },
+    checkURLisImage: function (url) {
+        // when the page reloads the following regular expression will be screwed up
+        // please replace it with this one before you save: /*backslashhere*.(jpeg|jpg|gif|png)$/
+        return (url.match(/\.(jpeg|jpg|gif|png)$/) != null);
+    },
+    checkURLisYoutubeVideo: function (url) {
+        return (url.match(/^https?:\/\/(?:www\.)?youtube.com\/watch\?(?=[^?]*v=\w+)(?:[^\s?]+)?$/) != null);
+    }
+}; // end Metamaps.Util
+
+/*
+ *
+ *   REALTIME
+ *
+ */
+Metamaps.Realtime = {
+    videoId: 'video-wrapper',
+    socket: null,
+    webrtc: null,
+    readyToCall: false,
+    mappersOnMap: {},
+    disconnected: false,
+    chatOpen: false,
+    status: true, // stores whether realtime is True/On or False/Off,
+    broadcastingStatus: false,
+    videosInPosition: 1,
+    inConversation: false,
+    localVideo: null,
+    init: function () {
+        var self = Metamaps.Realtime;
+
+        var reenableRealtime = function () {
+            self.reenableRealtime();
+        };
+        var turnOff = function () {
+            self.turnOff();
+        };
+        $(".rtOn").click(reenableRealtime);
+        $(".rtOff").click(turnOff);
+
+        self.addJuntoListeners();
+
+        self.socket = new SocketIoConnection({ url: '<%= ENV['REALTIME_SERVER'] %>' });
+        self.socket.on('connect', function () {
+            console.log('connected');
+            if (!self.disconnected) {
+              self.startActiveMap();
+            } else self.disconnected = false;
+        });
+        self.socket.on('disconnect', function () {
+          self.disconnected = true;
+        });
+
+        if (Metamaps.Active.Mapper) {
+          self.webrtc = new SimpleWebRTC({
+            connection: self.socket,
+            localVideoEl: self.videoId,
+            remoteVideosEl: '',
+            detectSpeakingEvents: true,
+            autoAdjustMic: false, //true,
+            autoRequestMedia: false,
+            localVideo: {
+                autoplay: true,
+                mirror: true,
+                muted: true
+            },
+            media: {
+              video: true,
+              audio: true
+            },
+            nick: Metamaps.Active.Mapper.id
+          });
+
+          var
+            $video = $('<video></video>').attr('id', self.videoId);
+          self.localVideo = {
+              $video: $video,
+              view: new Metamaps.Views.videoView($video[0], $('body'), 'me', true, {
+                  DOUBLE_CLICK_TOLERANCE: 200,
+                  avatar: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : ''
+              })
+          };
+
+          self.room = new Metamaps.Views.room({
+            webrtc: self.webrtc,
+            socket: self.socket,
+            username: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('name') : '',
+            image: Metamaps.Active.Mapper ? Metamaps.Active.Mapper.get('image') : '',
+            room: 'global',
+            $video: self.localVideo.$video,
+            myVideoView: self.localVideo.view,
+            config: { DOUBLE_CLICK_TOLERANCE: 200 }
+          });
+          self.room.videoAdded(self.handleVideoAdded);
+
+          self.room.chat.$container.hide();
+          $('body').prepend(self.room.chat.$container);
+        } // if Metamaps.Active.Mapper
+    },
+    addJuntoListeners: function () {
+      var self = Metamaps.Realtime;
+
+      $(document).on(Metamaps.Views.chatView.events.openTray, function () {
+        $('.main').addClass('compressed');
+        self.chatOpen = true;
+        self.positionPeerIcons();
+      });
+      $(document).on(Metamaps.Views.chatView.events.closeTray, function () {
+        $('.main').removeClass('compressed');
+        self.chatOpen = false;
+        self.positionPeerIcons();
+      });
+      $(document).on(Metamaps.Views.chatView.events.videosOn, function () {
+        $('#wrapper').removeClass('hideVideos');
+      });
+      $(document).on(Metamaps.Views.chatView.events.videosOff, function () {
+        $('#wrapper').addClass('hideVideos');
+      });
+      $(document).on(Metamaps.Views.chatView.events.cursorsOn, function () {
+        $('#wrapper').removeClass('hideCursors');
+      });
+      $(document).on(Metamaps.Views.chatView.events.cursorsOff, function () {
+        $('#wrapper').addClass('hideCursors');
+      });
+    },
+    handleVideoAdded: function (v, id) {
+      var self = Metamaps.Realtime;
+      // random position for now
+      var paddingAboveTop = 72;
+      var heightOfVideo = 150;
+      var padding = 25;
+      var top = paddingAboveTop + (self.videosInPosition * heightOfVideo) + padding;
+      var left = 30;
+      //var right = Math.floor((Math.random() * (468 - 100)) + 1);
+      v.setParent($('#wrapper'));
+      $('#wrapper').append(v.$container);
+      v.$container.css({
+          top: top + 'px',
+          left: left + 'px'
+      });
+      v.$container.find('.video-cutoff').css({
+        border: '2px solid ' + self.mappersOnMap[id].color
+      });
+      self.videosInPosition += 1;
+    },
+    startActiveMap: function () {
+        var self = Metamaps.Realtime;
+
+        if (Metamaps.Active.Map && Metamaps.Active.Mapper) {
+            var commonsMap = Metamaps.Active.Map.get('permission') === 'commons';
+            var publicMap = Metamaps.Active.Map.get('permission') === 'public';
+
+            if (commonsMap) {
+                self.turnOn();
+                self.setupSocket();
+            }
+            else if (publicMap) {
+                self.attachMapListener();
+            }
+            self.room.addMessages(new Metamaps.Backbone.MessageCollection(Metamaps.Messages), true);
+        }
+    },
+    endActiveMap: function () {
+        var self = Metamaps.Realtime;
+
+        $(document).off('mousemove');
+        self.socket.removeAllListeners();
+        self.socket.emit('endMapperNotify');
+        $(".collabCompass").remove();
+        self.status = false;
+        self.room.leave();
+        self.room.chat.$container.hide();
+        self.room.chat.close();
+        self.videosInPosition = 1;
+    },
+    reenableRealtime: function() {
+        var confirmString = "The layout of your map has fallen out of sync with the saved copy. ";
+        confirmString += "To save your changes without overwriting the map, hit 'Cancel' and ";
+        confirmString += "then use 'Save to new map'. ";
+        confirmString += "Do you want to discard your changes and enable realtime?";
+        var c = confirm(confirmString);
+        if (c) {
+            Metamaps.Router.maps(Metamaps.Active.Map.id);
+        }
+    },
+    turnOn: function (notify) {
+        var self = Metamaps.Realtime;
+
+        if (notify) self.sendRealtimeOn();
+        //$(".rtMapperSelf").removeClass('littleRtOff').addClass('littleRtOn');
+        //$('.rtOn').addClass('active');
+        //$('.rtOff').removeClass('active');
+        self.status = true;
+        //$(".sidebarCollaborateIcon").addClass("blue");
+        $(".collabCompass").show();
+        self.room.chat.$container.show();
+        self.room.room = 'map-' + Metamaps.Active.Map.id;
+        self.checkForACallToJoin();
+    },
+    checkForACallToJoin: function () {
+      var self = Metamaps.Realtime;
+      self.socket.emit('checkForCall', { room: self.room.room, mapid: Metamaps.Active.Map.id });
+    },
+    promptToJoin: function (data) {
+      var self = Metamaps.Realtime;
+
+      console.log(data);
+      var notifyText = 'There\'s a conversation happening, want to join?';
+      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
+      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
+      Metamaps.GlobalUI.notifyUser(notifyText, true);
+      self.room.conversationInProgress();
+    },
+    conversationHasBegun: function () {
+      var self = Metamaps.Realtime;
+
+      if (self.inConversation) return;
+      var notifyText = 'There\'s a conversation starting, want to join?';
+      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.joinCall()">Yes</button>';
+      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.GlobalUI.clearNotify()">No</button>';
+      Metamaps.GlobalUI.notifyUser(notifyText, true);
+      self.room.conversationInProgress();
+    },
+    conversationHasEnded: function () {
+      var self = Metamaps.Realtime;
+
+      self.room.conversationEnding();
+    },
+    invitedToCall: function (inviter) {
+      var self = Metamaps.Realtime;
+
+      var username = self.mappersOnMap[inviter].name;
+      var notifyText = username + ' is suggesting a video call. What do you think?';
+      notifyText += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.acceptCall(' + inviter + ')">Yes</button>';
+      notifyText += ' <button type="button" class="toast-button button btn-no" onclick="Metamaps.Realtime.denyCall(' + inviter + ')">No</button>';
+      Metamaps.GlobalUI.notifyUser(notifyText, true);
+    },
+    acceptCall: function (userid) {
+      var self = Metamaps.Realtime;
+      self.socket.emit('callAccepted', {
+        mapid: Metamaps.Active.Map.id,
+        invited: Metamaps.Active.Mapper.id,
+        inviter: userid
+      });
+      self.joinCall();
+      Metamaps.GlobalUI.clearNotify();
+    },
+    denyCall: function (userid) {
+      var self = Metamaps.Realtime;
+      self.socket.emit('callDenied', {
+        mapid: Metamaps.Active.Map.id,
+        invited: Metamaps.Active.Mapper.id,
+        inviter: userid
+      });
+      Metamaps.GlobalUI.clearNotify();
+    },
+    inviteACall: function (userid) {
+      var self = Metamaps.Realtime;
+      self.socket.emit('inviteACall', {
+        mapid: Metamaps.Active.Map.id,
+        inviter: Metamaps.Active.Mapper.id,
+        invited: userid
+      });
+      Metamaps.GlobalUI.notifyUser('Invitation pending...', true);
+    },
+    callAccepted: function (userid) {
+      var self = Metamaps.Realtime;
+
+      var username = self.mappersOnMap[userid].name;
+      Metamaps.GlobalUI.notifyUser('Conversation starting...');
+      self.joinCall();
+    },
+    callDenied: function (userid) {
+      var self = Metamaps.Realtime;
+
+      var username = self.mappersOnMap[userid].name;
+      Metamaps.GlobalUI.notifyUser(username + ' isn\'t feeling it right now...');
+    },
+    joinCall: function () {
+      var self = Metamaps.Realtime;
+
+      self.webrtc.off('readyToCall');
+      self.webrtc.once('readyToCall', function () {
+        self.videoInitialized = true;
+        self.readyToCall = true;
+        self.localVideo.view.$container.show();
+        if (self.localVideo && self.status) {
+          $('#wrapper').append(self.localVideo.view.$container);
+        }
+        self.room.join();
+      });
+      self.inConversation = true;
+      self.webrtc.startLocalVideo();
+      Metamaps.GlobalUI.clearNotify();
+    },
+    leaveCall: function () {
+      var self = Metamaps.Realtime;
+
+      self.room.leaveVideoOnly();
+      self.inConversation = false;
+      self.videosInPosition = 1;
+      self.localVideo.view.$container.hide();
+    },
+    turnOff: function (silent) {
+        var self = Metamaps.Realtime;
+
+        if (self.status) {
+            if (!silent) self.sendRealtimeOff();
+            //$(".rtMapperSelf").removeClass('littleRtOn').addClass('littleRtOff');
+            //$('.rtOn').removeClass('active');
+            //$('.rtOff').addClass('active');
+            self.status = false;
+            //$(".sidebarCollaborateIcon").removeClass("blue");
+            $(".collabCompass").hide();
+            $('#' + self.videoId).remove();
+        }
+    },
+    setupSocket: function () {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+        var myId = Metamaps.Active.Mapper.id;
+
+        socket.emit('newMapperNotify', {
+            userid: myId,
+            username: Metamaps.Active.Mapper.get("name"),
+            userimage: Metamaps.Active.Mapper.get("image"),
+            mapid: Metamaps.Active.Map.id
+        });
+
+        socket.on(myId + '-' + Metamaps.Active.Map.id + '-invitedToCall', self.invitedToCall);
+        socket.on(myId + '-' + Metamaps.Active.Map.id + '-callAccepted', self.callAccepted);
+        socket.on(myId + '-' + Metamaps.Active.Map.id + '-callDenied', self.callDenied);
+
+        // receive word that there's a conversation in progress
+        socket.on('maps-' + Metamaps.Active.Map.id + '-callInProgress', self.promptToJoin);
+        socket.on('maps-' + Metamaps.Active.Map.id + '-callStarting', self.conversationHasBegun);
+        socket.on('maps-' + Metamaps.Active.Map.id + '-callEnding', self.conversationHasEnded);
+
+        // if you're the 'new guy' update your list with who's already online
+        socket.on(myId + '-' + Metamaps.Active.Map.id + '-UpdateMapperList', self.updateMapperList);
+
+        // receive word that there's a new mapper on the map
+        socket.on('maps-' + Metamaps.Active.Map.id + '-newmapper', self.newPeerOnMap);
+
+        // receive word that a mapper left the map
+        socket.on('maps-' + Metamaps.Active.Map.id + '-lostmapper', self.lostPeerOnMap);
+
+        // receive word that there's a mapper turned on realtime
+        socket.on('maps-' + Metamaps.Active.Map.id + '-newrealtime', self.newCollaborator);
+
+        // receive word that there's a mapper turned on realtime
+        socket.on('maps-' + Metamaps.Active.Map.id + '-lostrealtime', self.lostCollaborator);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-topicDrag', self.topicDrag);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-newTopic', self.newTopic);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-newMessage', self.newMessage);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-removeTopic', self.removeTopic);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-newSynapse', self.newSynapse);
+
+        //
+        socket.on('maps-' + Metamaps.Active.Map.id + '-removeSynapse', self.removeSynapse);
+
+        // update mapper compass position
+        socket.on('maps-' + Metamaps.Active.Map.id + '-updatePeerCoords', self.updatePeerCoords);
+
+        // deletions
+        socket.on('deleteTopicFromServer', self.removeTopic);
+        socket.on('deleteSynapseFromServer', self.removeSynapse);
+
+        socket.on('topicChangeFromServer', self.topicChange);
+        socket.on('synapseChangeFromServer', self.synapseChange);
+        self.attachMapListener();
+
+        // local event listeners that trigger events
+        var sendCoords = function (event) {
+            var pixels = {
+                x: event.pageX,
+                y: event.pageY
+            };
+            var coords = Metamaps.Util.pixelsToCoords(pixels);
+            self.sendCoords(coords);
+        };
+        $(document).mousemove(sendCoords);
+
+        var zoom = function (event, e) {
+            if (e) {
+                var pixels = {
+                    x: e.pageX,
+                    y: e.pageY
+                };
+                var coords = Metamaps.Util.pixelsToCoords(pixels);
+                self.sendCoords(coords);
+            }
+            self.positionPeerIcons();
+        };
+        $(document).on(Metamaps.JIT.events.zoom, zoom);
+
+        $(document).on(Metamaps.JIT.events.pan, self.positionPeerIcons);
+
+        var sendTopicDrag = function (event, positions) {
+            self.sendTopicDrag(positions);
+        };
+        $(document).on(Metamaps.JIT.events.topicDrag, sendTopicDrag);
+
+        var sendNewTopic = function (event, data) {
+            self.sendNewTopic(data);
+        };
+        $(document).on(Metamaps.JIT.events.newTopic, sendNewTopic);
+
+        var sendDeleteTopic = function (event, data) {
+            self.sendDeleteTopic(data);
+        };
+        $(document).on(Metamaps.JIT.events.deleteTopic, sendDeleteTopic);
+
+        var sendRemoveTopic = function (event, data) {
+            self.sendRemoveTopic(data);
+        };
+        $(document).on(Metamaps.JIT.events.removeTopic, sendRemoveTopic);
+
+        var sendNewSynapse = function (event, data) {
+            self.sendNewSynapse(data);
+        };
+        $(document).on(Metamaps.JIT.events.newSynapse, sendNewSynapse);
+
+        var sendDeleteSynapse = function (event, data) {
+            self.sendDeleteSynapse(data);
+        };
+        $(document).on(Metamaps.JIT.events.deleteSynapse, sendDeleteSynapse);
+
+        var sendRemoveSynapse = function (event, data) {
+            self.sendRemoveSynapse(data);
+        };
+        $(document).on(Metamaps.JIT.events.removeSynapse, sendRemoveSynapse);
+
+        var sendNewMessage = function (event, data) {
+            self.sendNewMessage(data);
+        };
+        $(document).on(Metamaps.Views.room.events.newMessage, sendNewMessage);
+
+        $(document).on(Metamaps.Views.room.events.callEnded, function () {
+          socket.emit('callEnded', { mapid: Metamaps.Active.Map.id }); // so that anyone who isn't currently in the call gets notified
+          self.inConversation = false;
+          self.videosInPosition = 1;
+          Metamaps.GlobalUI.notifyUser('Conversation has ended.');
+          self.localVideo.view.$container.hide().css({
+            top: '72px',
+            left: '30px'
+          });
+          self.localVideo.view.audioOn();
+          self.localVideo.view.videoOn();
+          self.webrtc.webrtc.localStreams.forEach(function (stream) {
+            stream.getTracks().forEach(function (track) {
+              track.stop();
+            });
+          });
+          self.webrtc.webrtc.localStreams = [];
+        });
+
+    },
+    attachMapListener: function(){
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        socket.on('mapChangeFromServer', self.mapChange);
+    },
+    sendRealtimeOn: function () {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        // send this new mapper back your details, and the awareness that you're online
+        var update = {
+            username: Metamaps.Active.Mapper.get("name"),
+            userid: Metamaps.Active.Mapper.id,
+            mapid: Metamaps.Active.Map.id
+        };
+        socket.emit('notifyStartRealtime', update);
+    },
+    sendRealtimeOff: function () {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        // send this new mapper back your details, and the awareness that you're online
+        var update = {
+            username: Metamaps.Active.Mapper.get("name"),
+            userid: Metamaps.Active.Mapper.id,
+            mapid: Metamaps.Active.Map.id
+        };
+        socket.emit('notifyStopRealtime', update);
+    },
+    updateMapperList: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        // data.userid
+        // data.username
+        // data.userimage
+        // data.userrealtime
+
+        self.mappersOnMap[data.userid] = {
+            id: data.userid,
+            name: data.username,
+            username: data.username,
+            image: data.userimage,
+            color: Metamaps.Util.getPastelColor(),
+            realtime: data.userrealtime,
+            coords: {
+                x: 0,
+                y: 0
+            },
+        };
+
+        var onOff = data.userrealtime ? "On" : "Off";
+        var mapperListItem = '<li id="mapper';
+        mapperListItem += data.userid;
+        mapperListItem += '" class="rtMapper littleRt';
+        mapperListItem += onOff;
+        mapperListItem += '">';
+        mapperListItem += '<img style="border: 2px solid ' + self.mappersOnMap[data.userid].color + ';"';
+        mapperListItem += ' src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
+        mapperListItem += data.username;
+        mapperListItem += '<div class="littleJuntoIcon"></div>';
+        mapperListItem += '</li>';
+
+        if (data.userid !== Metamaps.Active.Mapper.id) {
+            //$('#mapper' + data.userid).remove();
+            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
+
+            // create a div for the collaborators compass
+            self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
+        }
+    },
+    newPeerOnMap: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        // data.userid
+        // data.username
+        // data.userimage
+        // data.coords
+        var firstOtherPerson = Object.keys(self.mappersOnMap).length === 0;
+
+        self.mappersOnMap[data.userid] = {
+            id: data.userid,
+            name: data.username,
+            username: data.username,
+            image: data.userimage,
+            color: Metamaps.Util.getPastelColor(),
+            realtime: true,
+            coords: {
+                x: 0,
+                y: 0
+            },
+        };
+
+        // create an item for them in the realtime box
+        if (data.userid !== Metamaps.Active.Mapper.id && self.status) {
+            var mapperListItem = '<li id="mapper' + data.userid + '" class="rtMapper littleRtOn">';
+            mapperListItem += '<img style="border: 2px solid ' + self.mappersOnMap[data.userid].color + ';"';
+            mapperListItem += ' src="' + data.userimage + '" width="24" height="24" class="rtUserImage" />';
+            mapperListItem += data.username;
+            mapperListItem += '<div class="littleJuntoIcon"></div>';
+            mapperListItem += '</li>';
+            //$('#mapper' + data.userid).remove();
+            self.room.chat.addParticipant(self.mappersOnMap[data.userid]);
+
+            // create a div for the collaborators compass
+            self.createCompass(data.username, data.userid, data.userimage, self.mappersOnMap[data.userid].color, !self.status);
+
+            var notifyMessage = data.username + ' just joined the map';
+            if (firstOtherPerson) {
+              notifyMessage += ' <button type="button" class="toast-button button" onclick="Metamaps.Realtime.inviteACall(' + data.userid + ')">Suggest A Video Call</button>';
+            }
+            Metamaps.GlobalUI.notifyUser(notifyMessage);
+
+            // send this new mapper back your details, and the awareness that you've loaded the map
+            var update = {
+                userToNotify: data.userid,
+                username: Metamaps.Active.Mapper.get("name"),
+                userimage: Metamaps.Active.Mapper.get("image"),
+                userid: Metamaps.Active.Mapper.id,
+                userrealtime: self.status,
+                mapid: Metamaps.Active.Map.id
+            };
+            socket.emit('updateNewMapperList', update);
+        }
+    },
+    createCompass: function(name, id, image, color, hide) {
+        var str =  '<img width="28" height="28" src="'+image+'" /><p>'+name+'</p>';
+        str += '<div id="compassArrow'+id+'" class="compassArrow"></div>';
+        $('#compass' + id).remove();
+        $('<div/>', {
+            id: 'compass' + id,
+            class: 'collabCompass'
+        }).html(str).appendTo('#wrapper');
+        if (hide) {
+            $('#compass' + id).hide();
+        }
+        $('#compass' + id + ' img').css({
+            'border': '2px solid ' + color
+        });
+        $('#compass' + id + ' p').css({
+            'background-color': color
+        });
+    },
+    lostPeerOnMap: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        // data.userid
+        // data.username
+
+        delete self.mappersOnMap[data.userid];
+
+        //$('#mapper' + data.userid).remove();
+        $('#compass' + data.userid).remove();
+        self.room.chat.removeParticipant(data.username);
+
+        Metamaps.GlobalUI.notifyUser(data.username + ' just left the map');
+    },
+    newCollaborator: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        // data.userid
+        // data.username
+
+        self.mappersOnMap[data.userid].realtime = true;
+
+        //$('#mapper' + data.userid).removeClass('littleRtOff').addClass('littleRtOn');
+        $('#compass' + data.userid).show();
+
+        Metamaps.GlobalUI.notifyUser(data.username + ' just turned on realtime');
+    },
+    lostCollaborator: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        // data.userid
+        // data.username
+
+        self.mappersOnMap[data.userid].realtime = false;
+
+        //$('#mapper' + data.userid).removeClass('littleRtOn').addClass('littleRtOff');
+        $('#compass' + data.userid).hide();
+
+        Metamaps.GlobalUI.notifyUser(data.username + ' just turned off realtime');
+    },
+    updatePeerCoords: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        self.mappersOnMap[data.userid].coords={x: data.usercoords.x,y:data.usercoords.y};
+        self.positionPeerIcon(data.userid);
+    },
+    positionPeerIcons: function () {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        if (self.status) { // if i have realtime turned on
+            for (var key in self.mappersOnMap) {
+                var mapper = self.mappersOnMap[key];
+                if (mapper.realtime) {
+                    self.positionPeerIcon(key);
+                }
+            }
+        }
+    },
+    positionPeerIcon: function (id) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        var boundary = self.chatOpen ? '#wrapper' : document;
+        var mapper = self.mappersOnMap[id];
+        var xMax=$(boundary).width();
+        var yMax=$(boundary).height();
+        var compassDiameter=56;
+        var compassArrowSize=24;
+
+        var origPixels = Metamaps.Util.coordsToPixels(mapper.coords);
+        var pixels = self.limitPixelsToScreen(origPixels);
+        $('#compass' + id).css({
+            left: pixels.x + 'px',
+            top: pixels.y + 'px'
+        });
+        /* showing the arrow if the collaborator is off of the viewport screen */
+        if (origPixels.x !== pixels.x || origPixels.y !== pixels.y) {
+
+            var dy = origPixels.y - pixels.y; //opposite
+            var dx = origPixels.x - pixels.x; // adjacent
+            var ratio = dy / dx;
+            var angle = Math.atan2(dy, dx);
+
+            $('#compassArrow' + id).show().css({
+                transform: 'rotate(' + angle + 'rad)',
+                "-webkit-transform": 'rotate(' + angle + 'rad)',
+            });
+
+            if (dx > 0) {
+                $('#compass' + id).addClass('labelLeft');
+            }
+        } else {
+            $('#compassArrow' + id).hide();
+            $('#compass' + id).removeClass('labelLeft');
+        }
+    },
+    limitPixelsToScreen: function (pixels) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        var boundary = self.chatOpen ? '#wrapper' : document;
+        var xLimit, yLimit;
+        var xMax=$(boundary).width();
+        var yMax=$(boundary).height();
+        var compassDiameter=56;
+        var compassArrowSize=24;
+
+        xLimit = Math.max(0 + compassArrowSize, pixels.x);
+        xLimit = Math.min(xLimit, xMax - compassDiameter);
+        yLimit = Math.max(0 + compassArrowSize, pixels.y);
+        yLimit = Math.min(yLimit, yMax - compassDiameter);
+
+        return {x:xLimit,y:yLimit};
+    },
+    sendCoords: function (coords) {
+        var self = Metamaps.Realtime;
+        var socket = Metamaps.Realtime.socket;
+
+        var map = Metamaps.Active.Map;
+        var mapper = Metamaps.Active.Mapper;
+
+        if (self.status && map.authorizeToEdit(mapper) && socket) {
+            var update = {
+                usercoords: coords,
+                userid: Metamaps.Active.Mapper.id,
+                mapid: Metamaps.Active.Map.id
+            };
+            socket.emit('updateMapperCoords', update);
+        }
+    },
+    sendTopicDrag: function (positions) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map && self.status) {
+            positions.mapid = Metamaps.Active.Map.id;
+            socket.emit('topicDrag', positions);
+        }
+    },
+    topicDrag: function (positions) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        var topic;
+        var node;
+
+        if (Metamaps.Active.Map && self.status) {
+            for (var key in positions) {
+                topic = Metamaps.Topics.get(key);
+                if (topic) node = topic.get('node');
+                if (node) node.pos.setc(positions[key].x, positions[key].y);
+            } //for
+            Metamaps.Visualize.mGraph.plot();
+        }
+    },
+    sendTopicChange: function (topic) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        var data = {
+            topicId: topic.id
+        }
+
+        socket.emit('topicChangeFromClient', data);
+    },
+    topicChange: function (data) {
+        var topic = Metamaps.Topics.get(data.topicId);
+        if (topic) {
+            var node = topic.get('node');
+            topic.fetch({
+                success: function (model) {
+                    model.set({ node: node });
+                    model.trigger('changeByOther');
+                }
+            });
+        }
+    },
+    sendSynapseChange: function (synapse) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        var data = {
+            synapseId: synapse.id
+        }
+
+        socket.emit('synapseChangeFromClient', data);
+    },
+    synapseChange: function (data) {
+        var synapse = Metamaps.Synapses.get(data.synapseId);
+        if (synapse) {
+            // edge reset necessary because fetch causes model reset
+            var edge = synapse.get('edge');
+            synapse.fetch({
+                success: function (model) {
+                    model.set({ edge: edge });
+                    model.trigger('changeByOther');
+                }
+            });
+        }
+    },
+    sendMapChange: function (map) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        var data = {
+            mapId: map.id
+        }
+
+        socket.emit('mapChangeFromClient', data);
+    },
+    mapChange: function (data) {
+        var map = Metamaps.Active.Map;
+        var isActiveMap = map && data.mapId === map.id;
+        if (isActiveMap) {
+            var permBefore = map.get('permission');
+            var idBefore = map.id;
+            map.fetch({
+                success: function (model, response) {
+
+                    var idNow = model.id;
+                    var permNow = model.get('permission');
+                    if (idNow !== idBefore) {
+                        Metamaps.Map.leavePrivateMap(); // this means the map has been changed to private
+                    }
+                    else if (permNow === 'public' && permBefore === 'commons') {
+                        Metamaps.Map.commonsToPublic();
+                    }
+                    else if (permNow === 'commons' && permBefore === 'public') {
+                        Metamaps.Map.publicToCommons();
+                    }
+                    else {
+                        model.fetchContained();
+                        model.trigger('changeByOther');
+                    }
+                }
+            });
+        }
+    },
+    // newMessage
+    sendNewMessage: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        var message = data.attributes;
+        message.mapid = Metamaps.Active.Map.id;
+        socket.emit('newMessage', message);
+    },
+    newMessage: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        self.room.addMessages(new Metamaps.Backbone.MessageCollection(data));
+    },
+    // newTopic
+    sendNewTopic: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map && self.status) {
+            data.mapperid = Metamaps.Active.Mapper.id;
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('newTopic', data);
+        }
+    },
+    newTopic: function (data) {
+        var topic, mapping, mapper, mapperCallback, cancel;
+
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (!self.status) return;
+
+        function waitThenRenderTopic() {
+            if (topic && mapping && mapper) {
+                Metamaps.Topic.renderTopic(mapping, topic, false, false);
+            }
+            else if (!cancel) {
+                setTimeout(waitThenRenderTopic, 10);
+            }
+        }
+
+        mapper = Metamaps.Mappers.get(data.mapperid);
+        if (mapper === undefined) {
+            mapperCallback = function (m) {
+                Metamaps.Mappers.add(m);
+                mapper = m;
+            };
+            Metamaps.Mapper.get(data.mapperid, mapperCallback);
+        }
+        $.ajax({
+            url: "/topics/" + data.mappableid + ".json",
+            success: function (response) {
+                Metamaps.Topics.add(response);
+                topic = Metamaps.Topics.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
+        });
+        $.ajax({
+            url: "/mappings/" + data.mappingid + ".json",
+            success: function (response) {
+                Metamaps.Mappings.add(response);
+                mapping = Metamaps.Mappings.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
+        });
+
+        waitThenRenderTopic();
+    },
+    // removeTopic
+    sendDeleteTopic: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map) {
+            socket.emit('deleteTopicFromClient', data);
+        }
+    },
+    // removeTopic
+    sendRemoveTopic: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('removeTopic', data);
+        }
+    },
+    removeTopic: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (!self.status) return;
+
+        var topic = Metamaps.Topics.get(data.mappableid);
+        if (topic) {
+            var node = topic.get('node');
+            var mapping = topic.getMapping();
+            Metamaps.Control.hideNode(node.id);
+            Metamaps.Topics.remove(topic);
+            Metamaps.Mappings.remove(mapping);
+        }
+    },
+    // newSynapse
+    sendNewSynapse: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map) {
+            data.mapperid = Metamaps.Active.Mapper.id;
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('newSynapse', data);
+        }
+    },
+    newSynapse: function (data) {
+        var topic1, topic2, node1, node2, synapse, mapping, cancel;
+
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (!self.status) return;
+
+        function waitThenRenderSynapse() {
+            if (synapse && mapping && mapper) {
+                topic1 = synapse.getTopic1();
+                node1 = topic1.get('node');
+                topic2 = synapse.getTopic2();
+                node2 = topic2.get('node');
+
+                Metamaps.Synapse.renderSynapse(mapping, synapse, node1, node2, false);
+            }
+            else if (!cancel) {
+                setTimeout(waitThenRenderSynapse, 10);
+            }
+        }
+
+        mapper = Metamaps.Mappers.get(data.mapperid);
+        if (mapper === undefined) {
+            mapperCallback = function (m) {
+                Metamaps.Mappers.add(m);
+                mapper = m;
+            };
+            Metamaps.Mapper.get(data.mapperid, mapperCallback);
+        }
+        $.ajax({
+            url: "/synapses/" + data.mappableid + ".json",
+            success: function (response) {
+                Metamaps.Synapses.add(response);
+                synapse = Metamaps.Synapses.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
+        });
+        $.ajax({
+            url: "/mappings/" + data.mappingid + ".json",
+            success: function (response) {
+                Metamaps.Mappings.add(response);
+                mapping = Metamaps.Mappings.get(response.id);
+            },
+            error: function () {
+                cancel = true;
+            }
+        });
+        waitThenRenderSynapse();
+    },
+    // deleteSynapse
+    sendDeleteSynapse: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('deleteSynapseFromClient', data);
+        }
+    },
+    // removeSynapse
+    sendRemoveSynapse: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (Metamaps.Active.Map) {
+            data.mapid = Metamaps.Active.Map.id;
+            socket.emit('removeSynapse', data);
+        }
+    },
+    removeSynapse: function (data) {
+        var self = Metamaps.Realtime;
+        var socket = self.socket;
+
+        if (!self.status) return;
+
+        var synapse = Metamaps.Synapses.get(data.mappableid);
+        if (synapse) {
+            var edge = synapse.get('edge');
+            var mapping = synapse.getMapping();
+            if (edge.getData("mappings").length - 1 === 0) {
+                Metamaps.Control.hideEdge(edge);
+            }
+
+            var index = _.indexOf(edge.getData("synapses"), synapse);
+            edge.getData("mappings").splice(index, 1);
+            edge.getData("synapses").splice(index, 1);
+            if (edge.getData("displayIndex")) {
+                delete edge.data.$displayIndex;
+            }
+            Metamaps.Synapses.remove(synapse);
+            Metamaps.Mappings.remove(mapping);
+        }
+    },
+}; // end Metamaps.Realtime
+
+
+/*
+ *
+ *   CONTROL
+ *
+ */
+Metamaps.Control = {
+    init: function () {
+
+    },
+    selectNode: function (node,e) {
+        var filtered = node.getData('alpha') === 0;
+
+        if (filtered || Metamaps.Selected.Nodes.indexOf(node) != -1) return;
+        node.selected = true;
+        node.setData('dim', 30, 'current');
+        Metamaps.Selected.Nodes.push(node);
+    },
+    deselectAllNodes: function () {
+        var l = Metamaps.Selected.Nodes.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            var node = Metamaps.Selected.Nodes[i];
+            Metamaps.Control.deselectNode(node);
+        }
+        Metamaps.Visualize.mGraph.plot();
+    },
+    deselectNode: function (node) {
+        delete node.selected;
+        node.setData('dim', 25, 'current');
+
+        //remove the node
+        Metamaps.Selected.Nodes.splice(
+            Metamaps.Selected.Nodes.indexOf(node), 1);
+    },
+    deleteSelected: function () {
+
+        if (!Metamaps.Active.Map) return;
+
+        var n = Metamaps.Selected.Nodes.length;
+        var e = Metamaps.Selected.Edges.length;
+        var ntext = n == 1 ? "1 topic" : n + " topics";
+        var etext = e == 1 ? "1 synapse" : e + " synapses";
+        var text = "You have " + ntext + " and " + etext + " selected. ";
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
+        if (r == true) {
+            Metamaps.Control.deleteSelectedEdges();
+            Metamaps.Control.deleteSelectedNodes();
+        }
+    },
+    deleteSelectedNodes: function () { // refers to deleting topics permanently
+
+        if (!Metamaps.Active.Map) return;
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        var l = Metamaps.Selected.Nodes.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            var node = Metamaps.Selected.Nodes[i];
+            Metamaps.Control.deleteNode(node.id);
+        }
+    },
+    deleteNode: function (nodeid) { // refers to deleting topics permanently
+
+        if (!Metamaps.Active.Map) return;
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
+        var topic = node.getData('topic');
+
+        var permToDelete = Metamaps.Active.Mapper.id === topic.get('user_id') || Metamaps.Active.Mapper.get('admin');
+        if (permToDelete) {
+            var mappableid = topic.id;
+            var mapping = node.getData('mapping');
+            topic.destroy();
+            Metamaps.Mappings.remove(mapping);
+            $(document).trigger(Metamaps.JIT.events.deleteTopic, [{
+                mappableid: mappableid
+            }]);
+            Metamaps.Control.hideNode(nodeid);
+        } else {
+            Metamaps.GlobalUI.notifyUser('Only topics you created can be deleted');
+        }
+    },
+    removeSelectedNodes: function () { // refers to removing topics permanently from a map
+
+        if (!Metamaps.Active.Map) return;
+
+        var l = Metamaps.Selected.Nodes.length,
+            i,
+            node,
+            authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        for (i = l - 1; i >= 0; i -= 1) {
+            node = Metamaps.Selected.Nodes[i];
+            Metamaps.Control.removeNode(node.id);
+        }
+    },
+    removeNode: function (nodeid) { // refers to removing topics permanently from a map
+
+        if (!Metamaps.Active.Map) return;
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+        var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        var topic = node.getData('topic');
+        var mappableid = topic.id;
+        var mapping = node.getData('mapping');
+        mapping.destroy();
+        Metamaps.Topics.remove(topic);
+        $(document).trigger(Metamaps.JIT.events.removeTopic, [{
+            mappableid: mappableid
+        }]);
+        Metamaps.Control.hideNode(nodeid);
+    },
+    hideSelectedNodes: function () {
+        var l = Metamaps.Selected.Nodes.length,
+            i,
+            node;
+
+        for (i = l - 1; i >= 0; i -= 1) {
+            node = Metamaps.Selected.Nodes[i];
+            Metamaps.Control.hideNode(node.id);
+        }
+    },
+    hideNode: function (nodeid) {
+        var node = Metamaps.Visualize.mGraph.graph.getNode(nodeid);
+        var graph = Metamaps.Visualize.mGraph;
+
+        Metamaps.Control.deselectNode(node);
+
+        node.setData('alpha', 0, 'end');
+        node.eachAdjacency(function (adj) {
+            adj.setData('alpha', 0, 'end');
+        });
+        Metamaps.Visualize.mGraph.fx.animate({
+            modes: ['node-property:alpha',
+            'edge-property:alpha'
+        ],
+            duration: 500
+        });
+        setTimeout(function () {
+            if (nodeid == Metamaps.Visualize.mGraph.root) { // && Metamaps.Visualize.type === "RGraph"
+                var newroot = _.find(graph.graph.nodes, function(n){ return n.id !== nodeid; });
+                graph.root = newroot ? newroot.id : null;
+            }
+            Metamaps.Visualize.mGraph.graph.removeNode(nodeid);
+        }, 500);
+        Metamaps.Filter.checkMetacodes();
+        Metamaps.Filter.checkMappers();
+    },
+    selectEdge: function (edge) {
+        var filtered = edge.getData('alpha') === 0; // don't select if the edge is filtered
+
+        if (filtered || Metamaps.Selected.Edges.indexOf(edge) != -1) return;
+
+        var width = Metamaps.Mouse.edgeHoveringOver === edge ? 4 : 2;
+        edge.setDataset('current', {
+            showDesc: true,
+            lineWidth: width,
+            color: Metamaps.Settings.colors.synapses.selected
+        });
+        Metamaps.Visualize.mGraph.plot();
+
+        Metamaps.Selected.Edges.push(edge);
+    },
+    deselectAllEdges: function () {
+        var l = Metamaps.Selected.Edges.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            var edge = Metamaps.Selected.Edges[i];
+            Metamaps.Control.deselectEdge(edge);
+        }
+        Metamaps.Visualize.mGraph.plot();
+    },
+    deselectEdge: function (edge) {
+        edge.setData('showDesc', false, 'current');
+
+        edge.setDataset('current', {
+            lineWidth: 2,
+            color: Metamaps.Settings.colors.synapses.normal
+        });
+
+        if (Metamaps.Mouse.edgeHoveringOver == edge) {
+            edge.setDataset('current', {
+                showDesc: true,
+                lineWidth: 4
+            });
+        }
+
+        Metamaps.Visualize.mGraph.plot();
+
+        //remove the edge
+        Metamaps.Selected.Edges.splice(
+            Metamaps.Selected.Edges.indexOf(edge), 1);
+    },
+    deleteSelectedEdges: function () { // refers to deleting topics permanently
+        var edge,
+            l = Metamaps.Selected.Edges.length;
+
+        if (!Metamaps.Active.Map) return;
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        for (var i = l - 1; i >= 0; i -= 1) {
+            edge = Metamaps.Selected.Edges[i];
+            Metamaps.Control.deleteEdge(edge);
+        }
+    },
+    deleteEdge: function (edge) {
+
+        if (!Metamaps.Active.Map) return;
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0;
+
+        var synapse = edge.getData("synapses")[index];
+        var mapping = edge.getData("mappings")[index];
+
+        var permToDelete = Metamaps.Active.Mapper.id === synapse.get('user_id') || Metamaps.Active.Mapper.get('admin');
+        if (permToDelete) {
+            if (edge.getData("synapses").length - 1 === 0) {
+                Metamaps.Control.hideEdge(edge);
+            }
+            var mappableid = synapse.id;
+            synapse.destroy();
+
+            // the server will destroy the mapping, we just need to remove it here
+            Metamaps.Mappings.remove(mapping);
+            edge.getData("mappings").splice(index, 1);
+            edge.getData("synapses").splice(index, 1);
+            if (edge.getData("displayIndex")) {
+                delete edge.data.$displayIndex;
+            }
+            $(document).trigger(Metamaps.JIT.events.deleteSynapse, [{
+                mappableid: mappableid
+            }]);
+        } else {
+            Metamaps.GlobalUI.notifyUser('Only synapses you created can be deleted');
+        }
+    },
+    removeSelectedEdges: function () {
+        var l = Metamaps.Selected.Edges.length,
+            i,
+            edge;
+
+        if (!Metamaps.Active.Map) return;
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        for (i = l - 1; i >= 0; i -= 1) {
+            edge = Metamaps.Selected.Edges[i];
+            Metamaps.Control.removeEdge(edge);
+        }
+        Metamaps.Selected.Edges = new Array();
+    },
+    removeEdge: function (edge) {
+
+        if (!Metamaps.Active.Map) return;
+
+        var authorized = Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
+
+        if (!authorized) {
+            Metamaps.GlobalUI.notifyUser("Cannot edit Public map.");
+            return;
+        }
+
+        if (edge.getData("mappings").length - 1 === 0) {
+            Metamaps.Control.hideEdge(edge);
+        }
+
+        var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0;
+
+        var synapse = edge.getData("synapses")[index];
+        var mapping = edge.getData("mappings")[index];
+        var mappableid = synapse.id;
+        mapping.destroy();
+
+        Metamaps.Synapses.remove(synapse);
+
+        edge.getData("mappings").splice(index, 1);
+        edge.getData("synapses").splice(index, 1);
+        if (edge.getData("displayIndex")) {
+            delete edge.data.$displayIndex;
+        }
+        $(document).trigger(Metamaps.JIT.events.removeSynapse, [{
+            mappableid: mappableid
+        }]);
+    },
+    hideSelectedEdges: function () {
+        var edge,
+            l = Metamaps.Selected.Edges.length,
+            i;
+        for (i = l - 1; i >= 0; i -= 1) {
+            edge = Metamaps.Selected.Edges[i];
+            Metamaps.Control.hideEdge(edge);
+        }
+        Metamaps.Selected.Edges = new Array();
+    },
+    hideEdge: function (edge) {
+        var from = edge.nodeFrom.id;
+        var to = edge.nodeTo.id;
+        edge.setData('alpha', 0, 'end');
+        Metamaps.Control.deselectEdge(edge);
+        Metamaps.Visualize.mGraph.fx.animate({
+            modes: ['edge-property:alpha'],
+            duration: 500
+        });
+        setTimeout(function () {
+            Metamaps.Visualize.mGraph.graph.removeAdjacence(from, to);
+        }, 500);
+        Metamaps.Filter.checkSynapses();
+        Metamaps.Filter.checkMappers();
+    },
+    updateSelectedPermissions: function (permission) {
+
+        var edge, synapse, node, topic;
+
+        Metamaps.GlobalUI.notifyUser('Working...');
+
+        // variables to keep track of how many nodes and synapses you had the ability to change the permission of
+        var nCount = 0,
+            sCount = 0;
+
+        // change the permission of the selected synapses, if logged in user is the original creator
+        var l = Metamaps.Selected.Edges.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            edge = Metamaps.Selected.Edges[i];
+            synapse = edge.getData('synapses')[0];
+
+            if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
+                synapse.save({
+                    permission: permission
+                });
+                sCount++;
+            }
+        }
+
+        // change the permission of the selected topics, if logged in user is the original creator
+        var l = Metamaps.Selected.Nodes.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            node = Metamaps.Selected.Nodes[i];
+            topic = node.getData('topic');
+
+            if (topic.authorizePermissionChange(Metamaps.Active.Mapper)) {
+                topic.save({
+                    permission: permission
+                });
+                nCount++;
+            }
+        }
+
+        var nString = nCount == 1 ? (nCount.toString() + ' topic and ') : (nCount.toString() + ' topics and ');
+        var sString = sCount == 1 ? (sCount.toString() + ' synapse') : (sCount.toString() + ' synapses');
+
+        var message = nString + sString + ' you created updated to ' + permission;
+        Metamaps.GlobalUI.notifyUser(message);
+    },
+    updateSelectedMetacodes: function (metacode_id) {
+
+        var node, topic;
+
+        Metamaps.GlobalUI.notifyUser('Working...');
+
+        var metacode = Metamaps.Metacodes.get(metacode_id);
+
+        // variables to keep track of how many nodes and synapses you had the ability to change the permission of
+        var nCount = 0;
+
+        // change the permission of the selected topics, if logged in user is the original creator
+        var l = Metamaps.Selected.Nodes.length;
+        for (var i = l - 1; i >= 0; i -= 1) {
+            node = Metamaps.Selected.Nodes[i];
+            topic = node.getData('topic');
+
+            if (topic.authorizeToEdit(Metamaps.Active.Mapper)) {
+                topic.save({
+                    'metacode_id': metacode_id
+                });
+                nCount++;
+            }
+        }
+
+        var nString = nCount == 1 ? (nCount.toString() + ' topic') : (nCount.toString() + ' topics');
+
+        var message = nString + ' you can edit updated to ' + metacode.get('name');
+        Metamaps.GlobalUI.notifyUser(message);
+        Metamaps.Visualize.mGraph.plot();
+    },
+}; // end Metamaps.Control
+
+
+/*
+ *
+ *   FILTER
+ *
+ */
+Metamaps.Filter = {
+    filters: {
+        name: "",
+        metacodes: [],
+        mappers: [],
+        synapses: []
+    },
+    visible: {
+        metacodes: [],
+        mappers: [],
+        synapses: []
+    },
+    isOpen: false,
+    changing: false,
+    init: function () {
+        var self = Metamaps.Filter;
+
+        $('.sidebarFilterIcon').click(self.toggleBox);
+
+        $('.sidebarFilterBox .showAllMetacodes').click(self.filterNoMetacodes);
+        $('.sidebarFilterBox .showAllSynapses').click(self.filterNoSynapses);
+        $('.sidebarFilterBox .showAllMappers').click(self.filterNoMappers);
+        $('.sidebarFilterBox .hideAllMetacodes').click(self.filterAllMetacodes);
+        $('.sidebarFilterBox .hideAllSynapses').click(self.filterAllSynapses);
+        $('.sidebarFilterBox .hideAllMappers').click(self.filterAllMappers);
+
+        self.bindLiClicks();
+	    self.getFilterData();
+    },
+    toggleBox: function (event) {
+        var self = Metamaps.Filter;
+
+        if (self.isOpen) self.close();
+        else self.open();
+
+        event.stopPropagation();
+    },
+    open: function () {
+        var self = Metamaps.Filter;
+
+        Metamaps.GlobalUI.Account.close();
+        $('.sidebarFilterIcon div').addClass('hide');
+
+
+        if (!self.isOpen && !self.changing) {
+            self.changing = true;
+
+            var height = $(document).height() - 108;
+            $('.sidebarFilterBox').css('max-height', height + 'px').fadeIn(200, function () {
+                self.changing = false;
+                self.isOpen = true;
+            });
+        }
+    },
+    close: function () {
+        var self = Metamaps.Filter;
+        $('.sidebarFilterIcon div').removeClass('hide');
+
+
+        if (!self.changing) {
+            self.changing = true;
+
+            $('.sidebarFilterBox').fadeOut(200, function () {
+                self.changing = false;
+                self.isOpen = false;
+            });
+        }
+    },
+    reset: function () {
+        var self = Metamaps.Filter;
+
+        self.filters.metacodes = [];
+        self.filters.mappers = [];
+        self.filters.synapses = [];
+        self.visible.metacodes = [];
+        self.visible.mappers = [];
+        self.visible.synapses = [];
+
+        $('#filter_by_metacode ul').empty();
+        $('#filter_by_mapper ul').empty();
+        $('#filter_by_synapse ul').empty();
+
+        $('.filterBox .showAll').addClass('active');
+    },
+    /*
+    Most of this data essentially depends on the ruby function which are happening for filter inside view filterBox
+    But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses
+    */
+    getFilterData: function () {
+        var self = Metamaps.Filter;
+
+        var metacode, mapper, synapse;
+
+        $('#filter_by_metacode li').each(function() {
+            metacode = $( this ).attr('data-id');
+            self.filters.metacodes.push(metacode);
+            self.visible.metacodes.push(metacode);
+        });
+
+        $('#filter_by_mapper li').each(function()  {
+            mapper = ($( this ).attr('data-id'));
+            self.filters.mappers.push(mapper);
+            self.visible.mappers.push(mapper);
+        });
+
+        $('#filter_by_synapse li').each(function()  {
+            synapse = ($( this ).attr('data-id'));
+            self.filters.synapses.push(synapse);
+            self.visible.synapses.push(synapse);
+        });
+    },
+    bindLiClicks: function () {
+        var self = Metamaps.Filter;
+        $('#filter_by_metacode ul li').unbind().click(self.toggleMetacode);
+        $('#filter_by_mapper ul li').unbind().click(self.toggleMapper);
+        $('#filter_by_synapse ul li').unbind().click(self.toggleSynapse);
+    },
+    // an abstraction function for checkMetacodes, checkMappers, checkSynapses to reduce
+    // code redundancy
+    /*
+    @param
+    */
+    updateFilters: function (collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) {
+        var self = Metamaps.Filter;
+
+        var newList = [];
+        var removed = [];
+        var added = [];
+
+        // the first option enables us to accept
+        // ['Topics', 'Synapses'] as 'collection'
+        if (typeof collection === "object") {
+          Metamaps[collection[0]].each(function(model) {
+            var prop = model.get(propertyToCheck);
+            if (prop !== null) {
+              prop = prop.toString();
+              if (newList.indexOf(prop) === -1) {
+                newList.push(prop);
+              }
+            }
+          });
+          Metamaps[collection[1]].each(function(model) {
+            var prop = model.get(propertyToCheck);
+            if (prop !== null) {
+              prop = prop.toString();
+              if (newList.indexOf(prop) === -1) {
+                newList.push(prop);
+              }
+            }
+          });
+        } else if (typeof collection === "string") {
+          Metamaps[collection].each(function(model) {
+            var prop = model.get(propertyToCheck);
+            if (prop !== null) {
+              prop = prop.toString();
+              if (newList.indexOf(prop) === -1) {
+                newList.push(prop);
+              }
+            }
+          });
+        }
+
+        removed = _.difference(self.filters[filtersToUse], newList);
+        added = _.difference(newList, self.filters[filtersToUse]);
+
+        // remove the list items for things no longer present on the map
+        _.each(removed, function(identifier) {
+            $('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast',function(){
+                $(this).remove();
+            });
+            index = self.visible[filtersToUse].indexOf(identifier);
+            self.visible[filtersToUse].splice(index, 1);
+        });
+
+        var model, li, jQueryLi;
+        function sortAlpha(a,b){
+            return a.childNodes[1].innerHTML.toLowerCase() > b.childNodes[1].innerHTML.toLowerCase() ? 1 : -1;
+        }
+        // for each new filter to be added, create a list item for it and fade it in
+        _.each(added, function (identifier) {
+            model = Metamaps[correlatedModel].get(identifier) ||
+                Metamaps[correlatedModel].find(function (model) {
+                    return model.get(propertyToCheck) === identifier;
+                });
+            li = model.prepareLiForFilter();
+            jQueryLi = $(li).hide();
+            $('li', '#filter_by_' + listToModify + ' ul').add(jQueryLi.fadeIn("fast"))
+                .sort(sortAlpha).appendTo('#filter_by_' + listToModify + ' ul');
+            self.visible[filtersToUse].push(identifier);
+        });
+
+        // update the list of filters with the new list we just generated
+        self.filters[filtersToUse] = newList;
+
+        // make sure clicks on list items still trigger the right events
+        self.bindLiClicks();
+    },
+    checkMetacodes: function () {
+        var self = Metamaps.Filter;
+        self.updateFilters('Topics', 'metacode_id', 'Metacodes', 'metacodes', 'metacode');
+    },
+    checkMappers: function () {
+        var self = Metamaps.Filter;
+        var onMap = Metamaps.Active.Map ? true : false;
+        if (onMap) {
+            self.updateFilters('Mappings', 'user_id', 'Mappers', 'mappers', 'mapper');
+        }
+        else {
+            // on topic view
+            self.updateFilters(['Topics', 'Synapses'], 'user_id', 'Creators', 'mappers', 'mapper');
+        }
+    },
+    checkSynapses: function () {
+        var self = Metamaps.Filter;
+        self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse');
+    },
+    filterAllMetacodes: function (e) {
+        var self = Metamaps.Filter;
+        $('#filter_by_metacode ul li').addClass('toggledOff');
+        $('.showAllMetacodes').removeClass('active');
+        $('.hideAllMetacodes').addClass('active');
+        self.visible.metacodes = [];
+        self.passFilters();
+    },
+    filterNoMetacodes: function (e) {
+        var self = Metamaps.Filter;
+        $('#filter_by_metacode ul li').removeClass('toggledOff');
+        $('.showAllMetacodes').addClass('active');
+        $('.hideAllMetacodes').removeClass('active');
+        self.visible.metacodes = self.filters.metacodes.slice();
+        self.passFilters();
+    },
+    filterAllMappers: function (e) {
+        var self = Metamaps.Filter;
+        $('#filter_by_mapper ul li').addClass('toggledOff');
+        $('.showAllMappers').removeClass('active');
+        $('.hideAllMappers').addClass('active');
+        self.visible.mappers = [];
+        self.passFilters();
+    },
+    filterNoMappers: function (e) {
+        var self = Metamaps.Filter;
+        $('#filter_by_mapper ul li').removeClass('toggledOff');
+        $('.showAllMappers').addClass('active');
+        $('.hideAllMappers').removeClass('active');
+        self.visible.mappers = self.filters.mappers.slice();
+        self.passFilters();
+    },
+    filterAllSynapses: function (e) {
+        var self = Metamaps.Filter;
+        $('#filter_by_synapse ul li').addClass('toggledOff');
+        $('.showAllSynapses').removeClass('active');
+        $('.hideAllSynapses').addClass('active');
+        self.visible.synapses = [];
+        self.passFilters();
+    },
+    filterNoSynapses: function (e) {
+        var self = Metamaps.Filter;
+        $('#filter_by_synapse ul li').removeClass('toggledOff');
+        $('.showAllSynapses').addClass('active');
+        $('.hideAllSynapses').removeClass('active');
+        self.visible.synapses = self.filters.synapses.slice();
+        self.passFilters();
+    },
+    // an abstraction function for toggleMetacode, toggleMapper, toggleSynapse
+    // to reduce code redundancy
+    // gets called in the context of a list item in a filter box
+    toggleLi: function (whichToFilter) {
+        var self = Metamaps.Filter, index;
+        var id = $(this).attr("data-id");
+        if (self.visible[whichToFilter].indexOf(id) == -1) {
+            self.visible[whichToFilter].push(id);
+            $(this).removeClass('toggledOff');
+        }
+        else {
+            index = self.visible[whichToFilter].indexOf(id);
+            self.visible[whichToFilter].splice(index, 1);
+            $(this).addClass('toggledOff');
+        }
+        self.passFilters();
+    },
+    toggleMetacode: function () {
+        var self = Metamaps.Filter;
+        self.toggleLi.call(this, 'metacodes');
+
+        if (self.visible.metacodes.length === self.filters.metacodes.length) {
+            $('.showAllMetacodes').addClass('active');
+            $('.hideAllMetacodes').removeClass('active');
+        }
+        else if (self.visible.metacodes.length === 0) {
+            $('.showAllMetacodes').removeClass('active');
+            $('.hideAllMetacodes').addClass('active');
+        }
+        else {
+            $('.showAllMetacodes').removeClass('active');
+            $('.hideAllMetacodes').removeClass('active');
+        }
+    },
+    toggleMapper: function () {
+        var self = Metamaps.Filter;
+        self.toggleLi.call(this, 'mappers');
+
+        if (self.visible.mappers.length === self.filters.mappers.length) {
+            $('.showAllMappers').addClass('active');
+            $('.hideAllMappers').removeClass('active');
+        }
+        else if (self.visible.mappers.length === 0) {
+            $('.showAllMappers').removeClass('active');
+            $('.hideAllMappers').addClass('active');
+        }
+        else {
+            $('.showAllMappers').removeClass('active');
+            $('.hideAllMappers').removeClass('active');
+        }
+    },
+    toggleSynapse: function () {
+        var self = Metamaps.Filter;
+        self.toggleLi.call(this, 'synapses');
+
+        if (self.visible.synapses.length === self.filters.synapses.length) {
+            $('.showAllSynapses').addClass('active');
+            $('.hideAllSynapses').removeClass('active');
+        }
+        else if (self.visible.synapses.length === 0) {
+            $('.showAllSynapses').removeClass('active');
+            $('.hideAllSynapses').addClass('active');
+        }
+        else {
+            $('.showAllSynapses').removeClass('active');
+            $('.hideAllSynapses').removeClass('active');
+        }
+    },
+    passFilters: function () {
+        var self = Metamaps.Filter;
+        var visible = self.visible;
+
+        var passesMetacode, passesMapper, passesSynapse;
+        var onMap;
+
+        if (Metamaps.Active.Map) {
+            onMap = true;
+        }
+        else if (Metamaps.Active.Topic) {
+            onMap = false;
+        }
+
+        var opacityForFilter = onMap ? 0 : 0.4;
+
+        Metamaps.Topics.each(function(topic) {
+            var n = topic.get('node');
+            var metacode_id = topic.get("metacode_id").toString();
+
+            if (visible.metacodes.indexOf(metacode_id) == -1) passesMetacode = false;
+            else passesMetacode = true;
+
+            if (onMap) {
+                // when on a map,
+                // we filter by mapper according to the person who added the
+                // topic or synapse to the map
+                var user_id = topic.getMapping().get("user_id").toString();
+                if (visible.mappers.indexOf(user_id) == -1) passesMapper = false;
+                else passesMapper = true;
+            }
+            else {
+                // when on a topic view,
+                // we filter by mapper according to the person who created the
+                // topic or synapse
+                var user_id = topic.get("user_id").toString();
+                if (visible.mappers.indexOf(user_id) == -1) passesMapper = false;
+                else passesMapper = true;
+            }
+
+            if (passesMetacode && passesMapper) {
+                if (n) {
+                    n.setData('alpha', 1, 'end');
+                }
+                else console.log(topic);
+            }
+            else {
+                if (n) {
+                    Metamaps.Control.deselectNode(n, true);
+                    n.setData('alpha', opacityForFilter, 'end');
+                    n.eachAdjacency(function(e){
+                        Metamaps.Control.deselectEdge(e, true);
+                    });
+                }
+                else console.log(topic);
+            }
+        });
+
+        // flag all the edges back to 'untouched'
+        Metamaps.Synapses.each(function(synapse) {
+           var e = synapse.get('edge');
+           e.setData('touched', false);
+        });
+        Metamaps.Synapses.each(function(synapse) {
+           var e = synapse.get('edge');
+           var desc;
+           var user_id = synapse.get("user_id").toString();
+
+           if (e && !e.getData('touched')) {
+
+                var synapses = e.getData('synapses');
+
+                // if any of the synapses represent by the edge are still unfiltered
+                // leave the edge visible
+                passesSynapse = false;
+                for (var i = 0; i < synapses.length; i++) {
+                    desc = synapses[i].get("desc");
+                    if (visible.synapses.indexOf(desc) > -1) passesSynapse = true;
+                }
+
+                // if the synapse description being displayed is now being
+                // filtered, set the displayIndex to the first unfiltered synapse if there is one
+                var displayIndex = e.getData("displayIndex") ? e.getData("displayIndex") : 0;
+                var displayedSynapse = synapses[displayIndex];
+                desc = displayedSynapse.get("desc");
+                if (passesSynapse && visible.synapses.indexOf(desc) == -1) {
+                    // iterate and find an unfiltered one
+                    for (var i = 0; i < synapses.length; i++) {
+                        desc = synapses[i].get("desc");
+                        if (visible.synapses.indexOf(desc) > -1) {
+                            e.setData('displayIndex', i);
+                            break;
+                        }
+                    }
+                }
+
+                if (onMap) {
+                    // when on a map,
+                    // we filter by mapper according to the person who added the
+                    // topic or synapse to the map
+                    user_id = synapse.getMapping().get("user_id").toString();
+                }
+                if (visible.mappers.indexOf(user_id) == -1) passesMapper = false;
+                else passesMapper = true;
+
+                var color = Metamaps.Settings.colors.synapses.normal;
+                if (passesSynapse && passesMapper) {
+                    e.setData('alpha', 1, 'end');
+                    e.setData('color', color, 'end');
+                }
+                else {
+                    Metamaps.Control.deselectEdge(e, true);
+                    e.setData('alpha', opacityForFilter, 'end');
+                }
+
+                e.setData('touched', true);
+            }
+            else if (!e) console.log(synapse);
+        });
+
+        // run the animation
+        Metamaps.Visualize.mGraph.fx.animate({
+          modes: ['node-property:alpha',
+                'edge-property:alpha'],
+          duration: 200
+        });
+    }
+}; // end Metamaps.Filter
+
+
+/*
+ *
+ *   LISTENERS
+ *
+ */
+Metamaps.Listeners = {
+
+    init: function () {
+
+        $(document).on('keydown', function (e) {
+            if (!(Metamaps.Active.Map || Metamaps.Active.Topic)) return;
+
+            switch (e.which) {
+            case 13: // if enter key is pressed
+                Metamaps.JIT.enterKeyHandler();
+                e.preventDefault();
+                break;
+            case 27: // if esc key is pressed
+                Metamaps.JIT.escKeyHandler();
+                break;
+            case 65: //if a or A is pressed
+                if (e.ctrlKey){
+                    Metamaps.Control.deselectAllNodes();
+                    Metamaps.Control.deselectAllEdges();
+
+                    e.preventDefault();
+                    Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                        Metamaps.Control.selectNode(n,e);
+                    });
+
+                    Metamaps.Visualize.mGraph.plot();
+                }
+
+                break;
+            case 69: //if e or E is pressed
+                if (e.ctrlKey){
+                    e.preventDefault();
+                    if (Metamaps.Active.Map) {
+                        Metamaps.JIT.zoomExtents(null, Metamaps.Visualize.mGraph.canvas);
+                    }
+                }
+                break;
+            case 77: //if m or M is pressed
+                if (e.ctrlKey){
+                    e.preventDefault();
+                    Metamaps.Control.removeSelectedNodes();
+                    Metamaps.Control.removeSelectedEdges();
+                }
+                break;
+            case 68: //if d or D is pressed
+                if (e.ctrlKey){
+                    e.preventDefault();
+                    Metamaps.Control.deleteSelected();
+                }
+                break;
+            case 72: //if h or H is pressed
+                if (e.ctrlKey){
+                    e.preventDefault();
+                    Metamaps.Control.hideSelectedNodes();
+                    Metamaps.Control.hideSelectedEdges();
+                }
+                break;
+            default:
+                break; //alert(e.which);
+            }
+        });
+
+        $(window).resize(function () {
+            if (Metamaps.Visualize && Metamaps.Visualize.mGraph) Metamaps.Visualize.mGraph.canvas.resize($(window).width(), $(window).height());
+            if ((Metamaps.Active.Map || Metamaps.Active.Topic) && Metamaps.Famous && Metamaps.Famous.maps.surf) Metamaps.Famous.maps.reposition();
+        });
+    }
+}; // end Metamaps.Listeners
+
+
+/*
+ *
+ *   ORGANIZE
+ *
+ */
+Metamaps.Organize = {
+    init: function () {
+
+    },
+    arrange: function (layout, centerNode) {
+
+
+        // first option for layout to implement is 'grid', will do an evenly spaced grid with its center at the 0,0 origin
+        if (layout == 'grid') {
+            var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes); // this will always be an integer, the # of nodes on your graph visualization
+            var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
+            var GRIDSPACE = 400;
+            var row = 0;
+            var column = 0;
+            Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                if (column == numColumns) {
+                    column = 0;
+                    row += 1;
+                }
+                var newPos = new $jit.Complex();
+                newPos.x = column * GRIDSPACE;
+                newPos.y = row * GRIDSPACE;
+                n.setPos(newPos, 'end');
+                column += 1;
+            });
+            Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
+        } else if (layout == 'grid_full') {
+
+            // this will always be an integer, the # of nodes on your graph visualization
+            var numNodes = _.size(Metamaps.Visualize.mGraph.graph.nodes);
+            //var numColumns = Math.floor(Math.sqrt(numNodes)); // the number of columns to make an even grid
+            //var GRIDSPACE = 400;
+            var height = Metamaps.Visualize.mGraph.canvas.getSize(0).height;
+            var width = Metamaps.Visualize.mGraph.canvas.getSize(0).width;
+            var totalArea = height * width;
+            var cellArea = totalArea / numNodes;
+            var ratio = height / width;
+            var cellWidth = sqrt(cellArea / ratio);
+            var cellHeight = cellArea / cellWidth;
+            var row = floor(height / cellHeight);
+            var column = floor(width / cellWidth);
+            var totalCells = row * column;
+
+            if (totalCells)
+                Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                    if (column == numColumns) {
+                        column = 0;
+                        row += 1;
+                    }
+                    var newPos = new $jit.Complex();
+                    newPos.x = column * GRIDSPACE;
+                    newPos.y = row * GRIDSPACE;
+                    n.setPos(newPos, 'end');
+                    column += 1;
+                });
+            Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
+        } else if (layout == 'radial') {
+
+            var centerX = centerNode.getPos().x;
+            var centerY = centerNode.getPos().y;
+            centerNode.setPos(centerNode.getPos(), 'end');
+
+            console.log(centerNode.adjacencies);
+            var lineLength = 200;
+            var usedNodes = {};
+            usedNodes[centerNode.id] = centerNode;
+            var radial = function (node, level, degree) {
+                if (level == 1) {
+                    var numLinksTemp = _.size(node.adjacencies);
+                    var angleTemp = 2 * Math.PI / numLinksTemp;
+                } else {
+                    angleTemp = 2 * Math.PI / 20
+                };
+                node.eachAdjacency(function (a) {
+                    var isSecondLevelNode = (centerNode.adjacencies[a.nodeTo.id] != undefined && level > 1);
+                    if (usedNodes[a.nodeTo.id] == undefined && !isSecondLevelNode) {
+                        var newPos = new $jit.Complex();
+                        newPos.x = level * lineLength * Math.sin(degree) + centerX;
+                        newPos.y = level * lineLength * Math.cos(degree) + centerY;
+                        a.nodeTo.setPos(newPos, 'end');
+                        usedNodes[a.nodeTo.id] = a.nodeTo;
+
+                        radial(a.nodeTo, level + 1, degree);
+                        degree += angleTemp;
+                    };
+                });
+            };
+            radial(centerNode, 1, 0);
+            Metamaps.Visualize.mGraph.animate(Metamaps.JIT.ForceDirected.animateSavedLayout);
+
+        } else if (layout == 'center_viewport') {
+
+            var lowX = 0,
+                lowY = 0,
+                highX = 0,
+                highY = 0;
+            var oldOriginX = Metamaps.Visualize.mGraph.canvas.translateOffsetX;
+            var oldOriginY = Metamaps.Visualize.mGraph.canvas.translateOffsetY;
+
+            Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                if (n.id === 1) {
+                    lowX = n.getPos().x;
+                    lowY = n.getPos().y;
+                    highX = n.getPos().x;
+                    highY = n.getPos().y;
+                };
+                if (n.getPos().x < lowX) lowX = n.getPos().x;
+                if (n.getPos().y < lowY) lowY = n.getPos().y;
+                if (n.getPos().x > highX) highX = n.getPos().x;
+                if (n.getPos().y > highY) highY = n.getPos().y;
+            });
+            console.log(lowX, lowY, highX, highY);
+            var newOriginX = (lowX + highX) / 2;
+            var newOriginY = (lowY + highY) / 2;
+
+        } else alert('please call function with a valid layout dammit!');
+    }
+}; // end Metamaps.Organize
+
+
+/*
+ *
+ *   TOPIC
+ *
+ */
+Metamaps.Topic = {
+    // this function is to retrieve a topic JSON object from the database
+    // @param id = the id of the topic to retrieve
+    get: function (id, callback) {
+        // if the desired topic is not yet in the local topic repository, fetch it
+        if (Metamaps.Topics.get(id) == undefined) {
+            //console.log("Ajax call!");
+            if (!callback) {
+                var e = $.ajax({
+                    url: "/topics/" + id + ".json",
+                    async: false
+                });
+                Metamaps.Topics.add($.parseJSON(e.responseText));
+                return Metamaps.Topics.get(id);
+            } else {
+                return $.ajax({
+                    url: "/topics/" + id + ".json",
+                    success: function (data) {
+                        Metamaps.Topics.add(data);
+                        callback(Metamaps.Topics.get(id));
+                    }
+                });
+            }
+        } else {
+            if (!callback) {
+                return Metamaps.Topics.get(id);
+            } else {
+                return callback(Metamaps.Topics.get(id));
+            }
+        }
+    },
+    launch: function (id) {
+        var bb = Metamaps.Backbone;
+        var start = function (data) {
+            Metamaps.Active.Topic = new bb.Topic(data.topic);
+            Metamaps.Creators = new bb.MapperCollection(data.creators);
+            Metamaps.Topics = new bb.TopicCollection([data.topic].concat(data.relatives));
+            Metamaps.Synapses = new bb.SynapseCollection(data.synapses);
+            Metamaps.Backbone.attachCollectionEvents();
+
+            // set filter mapper H3 text
+            $('#filter_by_mapper h3').html('CREATORS');
+
+            // build and render the visualization
+            Metamaps.Visualize.type = "RGraph";
+            Metamaps.JIT.prepareVizData();
+
+            // update filters
+            Metamaps.Filter.reset();
+
+            // reset selected arrays
+            Metamaps.Selected.reset();
+
+            // these three update the actual filter box with the right list items
+            Metamaps.Filter.checkMetacodes();
+            Metamaps.Filter.checkSynapses();
+            Metamaps.Filter.checkMappers();
+        }
+
+        $.ajax({
+            url: "/topics/" + id + "/network.json",
+            success: start
+        });
+    },
+    end: function () {
+        if (Metamaps.Active.Topic) {
+            $('.rightclickmenu').remove();
+            Metamaps.TopicCard.hideCard();
+            Metamaps.SynapseCard.hideCard();
+            Metamaps.Filter.close();
+        }
+    },
+    centerOn: function (nodeid) {
+        if (!Metamaps.Visualize.mGraph.busy) {
+            Metamaps.Visualize.mGraph.onClick(nodeid, {
+                hideLabels: false,
+                duration: 1000,
+                onComplete: function () {
+
+                }
+            });
+        }
+    },
+    fetchRelatives: function(node, metacode_id) {
+
+        var topics = Metamaps.Topics.map(function(t){ return t.id });
+        var topics_string = topics.join();
+
+        var creators = Metamaps.Creators.map(function(t){ return t.id });
+        var creators_string = creators.join();
+
+        var topic = node.getData('topic');
+
+        var successCallback = function(data) {
+            if (data.creators.length > 0) Metamaps.Creators.add(data.creators);
+            if (data.topics.length > 0) Metamaps.Topics.add(data.topics);
+            if (data.synapses.length > 0) Metamaps.Synapses.add(data.synapses);
+
+            var topicColl = new Metamaps.Backbone.TopicCollection(data.topics);
+            topicColl.add(topic);
+            var synapseColl = new Metamaps.Backbone.SynapseCollection(data.synapses);
+
+            var graph = Metamaps.JIT.convertModelsToJIT(topicColl, synapseColl)[0];
+            Metamaps.Visualize.mGraph.op.sum(graph, {
+                type: 'fade',
+                duration: 500,
+                hideLabels: false
+            });
+
+            var i, l, t, s;
+
+            Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+                t = Metamaps.Topics.get(n.id);
+                t.set({ node: n }, { silent: true });
+                t.updateNode();
+
+                n.eachAdjacency(function (edge) {
+                    if(!edge.getData('init')) {
+                        edge.setData('init', true);
+
+                        l = edge.getData('synapseIDs').length;
+                        for (i = 0; i < l; i++) {
+                            s = Metamaps.Synapses.get(edge.getData('synapseIDs')[i]);
+                            s.set({ edge: edge }, { silent: true });
+                            s.updateEdge();
+                        }
+                    }
+                });
+            });
+        };
+
+        var paramsString = metacode_id ? "metacode=" + metacode_id + "&" : "";
+        paramsString += "network=" + topics_string + "&creators=" + creators_string;
+
+        $.ajax({
+            type: "Get",
+            url: "/topics/" + topic.id + "/relatives.json?" + paramsString,
+            success: successCallback,
+            error: function () {
+
+            }
+        });
+    },
+    /*
+     *
+     *
+     */
+    renderTopic: function (mapping, topic, createNewInDB, permitCreateSynapseAfter) {
+        var self = Metamaps.Topic;
+
+        var nodeOnViz, tempPos;
+
+        var newnode = topic.createNode();
+
+        var midpoint = {}, pixelPos;
+
+        if (!$.isEmptyObject(Metamaps.Visualize.mGraph.graph.nodes)) {
+            Metamaps.Visualize.mGraph.graph.addNode(newnode);
+            nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id);
+            topic.set('node', nodeOnViz, {silent: true});
+            topic.updateNode(); // links the topic and the mapping to the node
+
+            nodeOnViz.setData("dim", 1, "start");
+            nodeOnViz.setData("dim", 25, "end");
+            if (Metamaps.Visualize.type === "RGraph") {
+                tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'));
+                tempPos = tempPos.toPolar();
+                nodeOnViz.setPos(tempPos, "current");
+                nodeOnViz.setPos(tempPos, "start");
+                nodeOnViz.setPos(tempPos, "end");
+            } else if (Metamaps.Visualize.type === "ForceDirected") {
+                nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current");
+                nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start");
+                nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
+            }
+            if (Metamaps.Create.newTopic.addSynapse && permitCreateSynapseAfter) {
+                Metamaps.Create.newSynapse.topic1id = tempNode.getData('topic').id;
+
+                // position the form
+                midpoint.x = tempNode.pos.getc().x + (nodeOnViz.pos.getc().x - tempNode.pos.getc().x) / 2;
+                midpoint.y = tempNode.pos.getc().y + (nodeOnViz.pos.getc().y - tempNode.pos.getc().y) / 2;
+                pixelPos = Metamaps.Util.coordsToPixels(midpoint);
+                $('#new_synapse').css('left', pixelPos.x + "px");
+                $('#new_synapse').css('top', pixelPos.y + "px");
+                // show the form
+                Metamaps.Create.newSynapse.open();
+                Metamaps.Visualize.mGraph.fx.animate({
+                    modes: ["node-property:dim"],
+                    duration: 500,
+                    onComplete: function () {
+                        tempNode = null;
+                        tempNode2 = null;
+                        tempInit = false;
+                    }
+                });
+            } else {
+                Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas);
+                Metamaps.Visualize.mGraph.fx.animate({
+                    modes: ["node-property:dim"],
+                    duration: 500,
+                    onComplete: function () {
+
+                    }
+                });
+            }
+        } else {
+            Metamaps.Visualize.mGraph.loadJSON(newnode);
+            nodeOnViz = Metamaps.Visualize.mGraph.graph.getNode(newnode.id);
+            topic.set('node', nodeOnViz, {silent: true});
+            topic.updateNode(); // links the topic and the mapping to the node
+
+            nodeOnViz.setData("dim", 1, "start");
+            nodeOnViz.setData("dim", 25, "end");
+            nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "current");
+            nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "start");
+            nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), "end");
+            Metamaps.Visualize.mGraph.fx.plotNode(nodeOnViz, Metamaps.Visualize.mGraph.canvas);
+            Metamaps.Visualize.mGraph.fx.animate({
+                modes: ["node-property:dim"],
+                duration: 500,
+                onComplete: function () {
+
+                }
+            });
+        }
+
+        var mappingSuccessCallback = function (mappingModel, response) {
+            var newTopicData = {
+                mappingid: mappingModel.id,
+                mappableid: mappingModel.get('mappable_id')
+            };
+
+            $(document).trigger(Metamaps.JIT.events.newTopic, [newTopicData]);
+        };
+        var topicSuccessCallback = function (topicModel, response) {
+            if (Metamaps.Active.Map) {
+                mapping.save({ mappable_id: topicModel.id }, {
+                    success: mappingSuccessCallback,
+                    error: function (model, response) {
+                        console.log('error saving mapping to database');
+                    }
+                });
+            }
+
+            if (Metamaps.Create.newTopic.addSynapse) {
+                Metamaps.Create.newSynapse.topic2id = topicModel.id;
+            }
+        };
+
+        if (!Metamaps.Settings.sandbox && createNewInDB) {
+            if (topic.isNew()) {
+                topic.save(null, {
+                    success: topicSuccessCallback,
+                    error: function (model, response) {
+                        console.log('error saving topic to database');
+                    }
+                });
+            } else if (!topic.isNew() && Metamaps.Active.Map) {
+                mapping.save(null, {
+                    success: mappingSuccessCallback
+                });
+            }
+        }
+    },
+    createTopicLocally: function () {
+        var self = Metamaps.Topic;
+
+        if (Metamaps.Create.newTopic.name === "") {
+            Metamaps.GlobalUI.notifyUser("Please enter a topic title...");
+            return;
+        }
+
+        // hide the 'double-click to add a topic' message
+        Metamaps.Famous.viz.hideInstructions();
+
+        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
+
+        var metacode = Metamaps.Metacodes.get(Metamaps.Create.newTopic.metacode);
+
+        var topic = new Metamaps.Backbone.Topic({
+            name: Metamaps.Create.newTopic.name,
+            metacode_id: metacode.id
+        });
+        Metamaps.Topics.add(topic);
+
+        var mapping = new Metamaps.Backbone.Mapping({
+            xloc: Metamaps.Create.newTopic.x,
+            yloc: Metamaps.Create.newTopic.y,
+            mappable_id: topic.cid,
+            mappable_type: "Topic",
+        });
+        Metamaps.Mappings.add(mapping);
+
+        //these can't happen until the value is retrieved, which happens in the line above
+        Metamaps.Create.newTopic.hide();
+
+        self.renderTopic(mapping, topic, true, true); // this function also includes the creation of the topic in the database
+    },
+    getTopicFromAutocomplete: function (id) {
+        var self = Metamaps.Topic;
+
+        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
+
+        Metamaps.Create.newTopic.hide();
+
+        var topic = self.get(id);
+
+        var mapping = new Metamaps.Backbone.Mapping({
+            xloc: Metamaps.Create.newTopic.x,
+            yloc: Metamaps.Create.newTopic.y,
+            mappable_type: "Topic",
+            mappable_id: topic.id,
+        });
+        Metamaps.Mappings.add(mapping);
+
+        self.renderTopic(mapping, topic, true, true);
+    },
+    getTopicFromSearch: function (event, id) {
+        var self = Metamaps.Topic;
+
+        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
+
+        var topic = self.get(id);
+
+        var nextCoords = Metamaps.Map.getNextCoord();
+        var mapping = new Metamaps.Backbone.Mapping({
+            xloc: nextCoords.x,
+            yloc: nextCoords.y,
+            mappable_type: "Topic",
+            mappable_id: topic.id,
+        });
+        Metamaps.Mappings.add(mapping);
+
+        self.renderTopic(mapping, topic, true, true);
+
+        Metamaps.GlobalUI.notifyUser('Topic was added to your map!');
+
+        event.stopPropagation();
+        event.preventDefault();
+        return false;
+    }
+}; // end Metamaps.Topic
+
+
+/*
+ *
+ *   SYNAPSE
+ *
+ */
+Metamaps.Synapse = {
+    // this function is to retrieve a synapse JSON object from the database
+    // @param id = the id of the synapse to retrieve
+    get: function (id, callback) {
+        // if the desired topic is not yet in the local topic repository, fetch it
+        if (Metamaps.Synapses.get(id) == undefined) {
+            if (!callback) {
+                var e = $.ajax({
+                    url: "/synapses/" + id + ".json",
+                    async: false
+                });
+                Metamaps.Synapses.add($.parseJSON(e.responseText));
+                return Metamaps.Synapses.get(id);
+            } else {
+                return $.ajax({
+                    url: "/synapses/" + id + ".json",
+                    success: function (data) {
+                        Metamaps.Synapses.add(data);
+                        callback(Metamaps.Synapses.get(id));
+                    }
+                });
+            }
+        } else {
+            if (!callback) {
+                return Metamaps.Synapses.get(id);
+            } else {
+                return callback(Metamaps.Synapses.get(id));
+            }
+        }
+    },
+    /*
+     *
+     *
+     */
+    renderSynapse: function (mapping, synapse, node1, node2, createNewInDB) {
+        var self = Metamaps.Synapse;
+
+        var edgeOnViz;
+
+        var newedge = synapse.createEdge();
+
+        Metamaps.Visualize.mGraph.graph.addAdjacence(node1, node2, newedge.data);
+        edgeOnViz = Metamaps.Visualize.mGraph.graph.getAdjacence(node1.id, node2.id);
+        synapse.set('edge', edgeOnViz);
+        synapse.updateEdge(); // links the synapse and the mapping to the edge
+
+        Metamaps.Control.selectEdge(edgeOnViz);
+
+        var mappingSuccessCallback = function (mappingModel, response) {
+            var newSynapseData = {
+                mappingid: mappingModel.id,
+                mappableid: mappingModel.get('mappable_id')
+            };
+
+            $(document).trigger(Metamaps.JIT.events.newSynapse, [newSynapseData]);
+        };
+        var synapseSuccessCallback = function (synapseModel, response) {
+            if (Metamaps.Active.Map) {
+                mapping.save({ mappable_id: synapseModel.id }, {
+                    success: mappingSuccessCallback
+                });
+            }
+        };
+
+        if (!Metamaps.Settings.sandbox && createNewInDB) {
+            if (synapse.isNew()) {
+                synapse.save(null, {
+                    success: synapseSuccessCallback,
+                    error: function (model, response) {
+                        console.log('error saving synapse to database');
+                    }
+                });
+            } else if (!synapse.isNew() && Metamaps.Active.Map) {
+                mapping.save(null, {
+                    success: mappingSuccessCallback
+                });
+            }
+        }
+    },
+    createSynapseLocally: function () {
+        var self = Metamaps.Synapse,
+            topic1,
+            topic2,
+            node1,
+            node2,
+            synapse,
+            mapping;
+
+        $(document).trigger(Metamaps.Map.events.editedByActiveMapper);
+
+        //for each node in this array we will create a synapse going to the position2 node.
+        var synapsesToCreate = [];
+
+        topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
+        node2 = topic2.get('node');
+
+        var len = Metamaps.Selected.Nodes.length;
+        if (len == 0) {
+            topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
+            synapsesToCreate[0] = topic1.get('node');
+        } else if (len > 0) {
+            synapsesToCreate = Metamaps.Selected.Nodes;
+        }
+
+        for (var i = 0; i < synapsesToCreate.length; i++) {
+            node1 = synapsesToCreate[i];
+            topic1 = node1.getData('topic');
+            synapse = new Metamaps.Backbone.Synapse({
+                desc: Metamaps.Create.newSynapse.description,// || "",
+                node1_id: topic1.isNew() ? topic1.cid : topic1.id,
+                node2_id: topic2.isNew() ? topic2.cid : topic2.id,
+            });
+            Metamaps.Synapses.add(synapse);
+
+            mapping = new Metamaps.Backbone.Mapping({
+                mappable_type: "Synapse",
+                mappable_id: synapse.cid,
+            });
+            Metamaps.Mappings.add(mapping);
+
+            // this function also includes the creation of the synapse in the database
+            self.renderSynapse(mapping, synapse, node1, node2, true);
+        } // for each in synapsesToCreate
+
+        Metamaps.Create.newSynapse.hide();
+    },
+    getSynapseFromAutocomplete: function (id) {
+        var self = Metamaps.Synapse,
+            topic1,
+            topic2,
+            node1,
+            node2;
+
+        var synapse = self.get(id);
+
+        var mapping = new Metamaps.Backbone.Mapping({
+            mappable_type: "Synapse",
+            mappable_id: synapse.id,
+        });
+        Metamaps.Mappings.add(mapping);
+
+        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
+        node1 = topic1.get('node');
+        topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
+        node2 = topic2.get('node');
+        Metamaps.Create.newSynapse.hide();
+
+        self.renderSynapse(mapping, synapse, node1, node2, true);
+    }
+}; // end Metamaps.Synapse
+
+
+/*
+ *
+ *   MAP
+ *
+ */
+Metamaps.Map = {
+    events: {
+        editedByActiveMapper: "Metamaps:Map:events:editedByActiveMapper"
+    },
+    nextX: 0,
+    nextY: 0,
+    sideLength: 1,
+    turnCount: 0,
+    nextXshift: 1,
+    nextYshift: 0,
+    timeToTurn: 0,
+    init: function () {
+        var self = Metamaps.Map;
+
+        // prevent right clicks on the main canvas, so as to not get in the way of our right clicks
+        $('#center-container').bind('contextmenu', function (e) {
+            return false;
+        });
+
+        $('.sidebarFork').click(function () {
+            self.fork();
+        });
+
+        Metamaps.GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html();
+
+        self.InfoBox.init();
+        self.CheatSheet.init();
+
+        $(document).on(Metamaps.Map.events.editedByActiveMapper, self.editedByActiveMapper);
+    },
+    launch: function (id) {
+        var bb = Metamaps.Backbone;
+        var start = function (data) {
+            Metamaps.Active.Map = new bb.Map(data.map);
+            Metamaps.Mappers = new bb.MapperCollection(data.mappers);
+            Metamaps.Topics = new bb.TopicCollection(data.topics);
+            Metamaps.Synapses = new bb.SynapseCollection(data.synapses);
+            Metamaps.Mappings = new bb.MappingCollection(data.mappings);
+            Metamaps.Messages = data.messages;
+            Metamaps.Backbone.attachCollectionEvents();
+
+            var map = Metamaps.Active.Map;
+            var mapper = Metamaps.Active.Mapper;
+
+            // add class to .wrapper for specifying whether you can edit the map
+            if (map.authorizeToEdit(mapper)) {
+                $('.wrapper').addClass('canEditMap');
+            }
+
+            // add class to .wrapper for specifying if the map can
+            // be collaborated on
+            if (map.get('permission') === 'commons') {
+                $('.wrapper').addClass('commonsMap');
+            }
+
+            // set filter mapper H3 text
+            $('#filter_by_mapper h3').html('MAPPERS');
+
+            // build and render the visualization
+            Metamaps.Visualize.type = "ForceDirected";
+            Metamaps.JIT.prepareVizData();
+
+            // update filters
+            Metamaps.Filter.reset();
+
+            // reset selected arrays
+            Metamaps.Selected.reset();
+
+            // set the proper mapinfobox content
+            Metamaps.Map.InfoBox.load();
+
+            // these three update the actual filter box with the right list items
+            Metamaps.Filter.checkMetacodes();
+            Metamaps.Filter.checkSynapses();
+            Metamaps.Filter.checkMappers();
+
+            Metamaps.Realtime.startActiveMap();
+            Metamaps.Loading.hide();
+        }
+
+        $.ajax({
+            url: "/maps/" + id + "/contains.json",
+            success: start
+        });
+    },
+    end: function () {
+        if (Metamaps.Active.Map) {
+
+            $('.wrapper').removeClass('canEditMap commonsMap');
+            Metamaps.Map.resetSpiral();
+
+            $('.rightclickmenu').remove();
+            Metamaps.TopicCard.hideCard();
+            Metamaps.SynapseCard.hideCard();
+            Metamaps.Create.newTopic.hide();
+            Metamaps.Create.newSynapse.hide();
+            Metamaps.Filter.close();
+            Metamaps.Map.InfoBox.close();
+            Metamaps.Realtime.endActiveMap();
+        }
+    },
+    fork: function () {
+        Metamaps.GlobalUI.openLightbox('forkmap');
+
+        var nodes_data = "",
+            synapses_data = "";
+        var nodes_array = [];
+        var synapses_array = [];
+        // collect the unfiltered topics
+        Metamaps.Visualize.mGraph.graph.eachNode(function (n) {
+            // if the opacity is less than 1 then it's filtered
+            if (n.getData('alpha') === 1) {
+                var id = n.getData('topic').id;
+                nodes_array.push(id);
+                var x, y;
+                if (n.pos.x && n.pos.y) {
+                    x = n.pos.x;
+                    y = n.pos.y;
+                } else {
+                    var x = Math.cos(n.pos.theta) * n.pos.rho;
+                    var y = Math.sin(n.pos.theta) * n.pos.rho;
+                }
+                nodes_data += id + '/' + x + '/' + y + ',';
+            }
+        });
+        // collect the unfiltered synapses
+        Metamaps.Synapses.each(function(synapse){
+            var desc = synapse.get("desc");
+
+            var descNotFiltered = Metamaps.Filter.visible.synapses.indexOf(desc) > -1;
+            // make sure that both topics are being added, otherwise, it
+            // doesn't make sense to add the synapse
+            var topicsNotFiltered = nodes_array.indexOf(synapse.get('node1_id')) > -1;
+            topicsNotFiltered = topicsNotFiltered && nodes_array.indexOf(synapse.get('node2_id')) > -1;
+            if (descNotFiltered && topicsNotFiltered) {
+                synapses_array.push(synapse.id);
+            }
+        });
+
+        synapses_data = synapses_array.join();
+        nodes_data = nodes_data.slice(0, -1);
+
+        Metamaps.GlobalUI.CreateMap.topicsToMap = nodes_data;
+        Metamaps.GlobalUI.CreateMap.synapsesToMap = synapses_data;
+
+    },
+    leavePrivateMap: function(){
+        var map = Metamaps.Active.Map;
+        Metamaps.Maps.Active.remove(map);
+        Metamaps.Maps.Featured.remove(map);
+        Metamaps.Router.home();
+        Metamaps.GlobalUI.notifyUser('Sorry! That map has been changed to Private.');
+    },
+    commonsToPublic: function(){
+        Metamaps.Realtime.turnOff(true); // true is for 'silence'
+        Metamaps.GlobalUI.notifyUser('Map was changed to Public. Editing is disabled.');
+        Metamaps.Active.Map.trigger('changeByOther');
+    },
+    publicToCommons: function(){
+        var confirmString = "This map permission has been changed to Commons! ";
+        confirmString += "Do you want to reload and enable realtime collaboration?";
+        var c = confirm(confirmString);
+        if (c) {
+            Metamaps.Router.maps(Metamaps.Active.Map.id);
+        }
+    },
+    editedByActiveMapper: function () {
+        if (Metamaps.Active.Mapper) {
+            Metamaps.Mappers.add(Metamaps.Active.Mapper);
+        }
+    },
+    getNextCoord: function() {
+        var self = Metamaps.Map;
+        var nextX = self.nextX;
+        var nextY = self.nextY;
+
+        var DISTANCE_BETWEEN = 120;
+
+        self.nextX = self.nextX + DISTANCE_BETWEEN * self.nextXshift;
+        self.nextY = self.nextY + DISTANCE_BETWEEN * self.nextYshift;
+
+        self.timeToTurn += 1;
+        // if true, it's time to turn
+        if (self.timeToTurn === self.sideLength) {
+
+            self.turnCount += 1;
+            // if true, it's time to increase side length
+            if (self.turnCount % 2 === 0) {
+                self.sideLength += 1;
+            }
+            self.timeToTurn = 0;
+
+            // going right? turn down
+            if (self.nextXshift == 1 && self.nextYshift == 0) {
+                self.nextXshift = 0;
+                self.nextYshift = 1;
+            }
+            // going down? turn left
+            else if (self.nextXshift == 0 && self.nextYshift == 1) {
+                self.nextXshift = -1;
+                self.nextYshift = 0;
+            }
+            // going left? turn up
+            else if (self.nextXshift == -1 && self.nextYshift == 0) {
+                self.nextXshift = 0;
+                self.nextYshift = -1;
+            }
+            // going up? turn right
+            else if (self.nextXshift == 0 && self.nextYshift == -1) {
+                self.nextXshift = 1;
+                self.nextYshift = 0;
+            }
+        }
+
+        return {
+            x: nextX,
+            y: nextY
+        }
+    },
+    resetSpiral: function() {
+        Metamaps.Map.nextX = 0;
+        Metamaps.Map.nextY = 0;
+        Metamaps.Map.nextXshift = 1;
+        Metamaps.Map.nextYshift = 0;
+        Metamaps.Map.sideLength = 1;
+        Metamaps.Map.timeToTurn = 0;
+        Metamaps.Map.turnCount = 0;
+    },
+    exportImage: function() {
+
+        var canvas = {};
+
+        canvas.canvas = document.createElement("canvas");
+        canvas.canvas.width  =  1880; // 960;
+        canvas.canvas.height = 1260; // 630
+
+        canvas.scaleOffsetX = 1;
+        canvas.scaleOffsetY = 1;
+        canvas.translateOffsetY = 0;
+        canvas.translateOffsetX = 0;
+        canvas.denySelected = true;
+
+        canvas.getSize =  function() {
+            if(this.size) return this.size;
+            var canvas = this.canvas;
+            return this.size = {
+                width: canvas.width,
+                height: canvas.height
+            };
+        };
+        canvas.scale = function(x, y) {
+            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;
+            this.getCtx().scale(x, y);
+            this.translate(dx, dy);
+        };
+        canvas.translate = function(x, y) {
+            var sx = this.scaleOffsetX,
+                sy = this.scaleOffsetY;
+            this.translateOffsetX += x*sx;
+            this.translateOffsetY += y*sy;
+            this.getCtx().translate(x, y);
+        };
+        canvas.getCtx = function() {
+          return this.canvas.getContext("2d");
+        };
+        // center it
+        canvas.getCtx().translate(1880/2, 1260/2);
+
+        var mGraph = Metamaps.Visualize.mGraph;
+
+        var id = mGraph.root;
+        var root = mGraph.graph.getNode(id);
+        var T = !!root.visited;
+
+        // pass true to avoid basing it on a selection
+        Metamaps.JIT.zoomExtents(null, canvas, true);
+
+        var c = canvas.canvas,
+            ctx = canvas.getCtx(),
+            scale = canvas.scaleOffsetX;
+
+        // draw a grey background
+        ctx.fillStyle = '#d8d9da';
+        var xPoint = (-(c.width/scale)/2) - (canvas.translateOffsetX/scale),
+        yPoint = (-(c.height/scale)/2) - (canvas.translateOffsetY/scale);
+        ctx.fillRect(xPoint,yPoint,c.width/scale,c.height/scale);
+
+        // draw the graph
+        mGraph.graph.eachNode(function(node) {
+           var nodeAlpha = node.getData('alpha');
+           node.eachAdjacency(function(adj) {
+             var nodeTo = adj.nodeTo;
+             if(!!nodeTo.visited === T && node.drawn && nodeTo.drawn) {
+               mGraph.fx.plotLine(adj, canvas);
+             }
+           });
+           if(node.drawn) {
+             mGraph.fx.plotNode(node, canvas);
+           }
+           if(!mGraph.labelsHidden) {
+             if(node.drawn && nodeAlpha >= 0.95) {
+               mGraph.labels.plotLabel(canvas, node);
+             } else {
+               mGraph.labels.hideLabel(node, false);
+             }
+           }
+           node.visited = !T;
+         });
+
+        var imageData = {
+            encoded_image: canvas.canvas.toDataURL()
+        };
+
+        var map = Metamaps.Active.Map;
+
+        var today = new Date();
+        var dd = today.getDate();
+        var mm = today.getMonth()+1; //January is 0!
+        var yyyy = today.getFullYear();
+        if(dd<10) {
+            dd='0'+dd
+        }
+        if(mm<10) {
+            mm='0'+mm
+        }
+        today = mm+'/'+dd+'/'+yyyy;
+
+        var mapName = map.get("name").split(" ").join([separator = '-']);
+        var downloadMessage = "";
+        downloadMessage += "Captured map screenshot! ";
+        downloadMessage += "<a href='" + imageData.encoded_image + "' ";
+        downloadMessage += "download='metamap-" + map.id + "-" + mapName + "-" + today + ".png'>DOWNLOAD</a>";
+        Metamaps.GlobalUI.notifyUser(downloadMessage);
+
+        $.ajax({
+            type: "POST",
+            dataType: 'json',
+            url: "/maps/" + Metamaps.Active.Map.id + "/upload_screenshot",
+            data: imageData,
+            success: function (data) {
+                console.log('successfully uploaded map screenshot');
+            },
+            error: function () {
+                console.log('failed to save map screenshot');
+            }
+        });
+    }
+};
+
+
+/*
+ *
+ *   CHEATSHEET
+ *
+ */
+Metamaps.Map.CheatSheet = {
+    init: function () {
+        // tab the cheatsheet
+        $('#cheatSheet').tabs();
+        $('#quickReference').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
+        $("#quickReference .ui-tabs-nav li").removeClass("ui-corner-top").addClass("ui-corner-left");
+
+        // id = the id of a vimeo video
+        var switchVideo = function (element, id) {
+            $('.tutorialItem').removeClass("active");
+            $(element).addClass("active");
+            $('#tutorialVideo').attr('src','//player.vimeo.com/video/'+id);
+        };
+
+        $('#gettingStarted').click(function() {
+            //switchVideo(this,'88334167');
+        });
+        $('#upYourSkillz').click(function() {
+            //switchVideo(this,'100118167');
+        });
+        $('#advancedMapping').click(function() {
+            //switchVideo(this,'88334167');
+        });
+    }
+}; // end Metamaps.Map.CheatSheet
+
+
+/*
+ *
+ *   INFOBOX
+ *
+ */
+Metamaps.Map.InfoBox = {
+    isOpen: false,
+    changing: false,
+    selectingPermission: false,
+    changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, but the permissions of the topics and synapses on it must be changed independently.</div>",
+    nameHTML: '<span class="best_in_place best_in_place_name" id="best_in_place_map_{{id}}_name" data-url="/maps/{{id}}" data-object="map" data-attribute="name" data-type="textarea" data-activator="#mapInfoName">{{name}}</span>',
+    descHTML: '<span class="best_in_place best_in_place_desc" id="best_in_place_map_{{id}}_desc" data-url="/maps/{{id}}" data-object="map" data-attribute="desc" data-nil="Click to add description..." data-type="textarea" data-activator="#mapInfoDesc">{{desc}}</span>',
+    init: function () {
+        var self = Metamaps.Map.InfoBox;
+
+        $('.mapInfoIcon').click(self.toggleBox);
+        $('.mapInfoBox').click(function(event){
+            event.stopPropagation();
+        });
+        $('body').click(self.close);
+
+        self.attachEventListeners();
+
+        self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html());
+    },
+    toggleBox: function (event) {
+        var self = Metamaps.Map.InfoBox;
+
+        if (self.isOpen) self.close();
+        else self.open();
+
+        event.stopPropagation();
+    },
+    open: function () {
+        var self = Metamaps.Map.InfoBox;
+        $('.mapInfoIcon div').addClass('hide');
+        if (!self.isOpen && !self.changing) {
+            self.changing = true;
+            $('.mapInfoBox').fadeIn(200, function () {
+                self.changing = false;
+                self.isOpen = true;
+            });
+        }
+    },
+    close: function () {
+        var self = Metamaps.Map.InfoBox;
+
+        $('.mapInfoIcon div').removeClass('hide');
+        if (!self.changing) {
+            self.changing = true;
+            $('.mapInfoBox').fadeOut(200, function () {
+                self.changing = false;
+                self.isOpen = false;
+                self.hidePermissionSelect();
+                $('.mapContributors .tip').hide();
+            });
+        }
+    },
+    load: function () {
+        var self = Metamaps.Map.InfoBox;
+
+        var map = Metamaps.Active.Map;
+
+        var obj = map.pick("permission","contributor_count","topic_count","synapse_count");
+
+        var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper);
+        var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper);
+        var shareable = map.get('permission') !== 'private';
+
+        obj["name"] = canEdit ? Hogan.compile(self.nameHTML).render({id: map.id, name: map.get("name")}) : map.get("name");
+        obj["desc"] = canEdit ? Hogan.compile(self.descHTML).render({id: map.id, desc: map.get("desc")}) : map.get("desc");
+        obj["map_creator_tip"] = isCreator ? self.changePermissionText : "";
+        obj["contributors_class"] = Metamaps.Mappers.length > 1 ? "multiple" : "";
+        obj["contributors_class"] += Metamaps.Mappers.length === 2 ? " mTwo" : "";
+        obj["contributor_image"] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get("image") : "<%= asset_path('user.png') %>";
+        obj["contributor_list"] = self.createContributorList();
+        obj["user_name"] = isCreator ? "You" : map.get("user_name");
+        obj["created_at"] = map.get("created_at_clean");
+        obj["updated_at"] = map.get("updated_at_clean");
+
+        var classes = isCreator ? "yourMap" : "";
+        classes += canEdit ? " canEdit" : "";
+        classes += shareable ? " shareable" : "";
+        $(".mapInfoBox").removeClass("shareable yourMap canEdit")
+            .addClass(classes)
+            .html(self.generateBoxHTML.render(obj));
+
+        self.attachEventListeners();
+    },
+    attachEventListeners: function () {
+        var self = Metamaps.Map.InfoBox;
+
+        $('.mapInfoBox.canEdit .best_in_place').best_in_place();
+
+        // because anyone who can edit the map can change the map title
+        var bipName = $('.mapInfoBox .best_in_place_name');
+        bipName.unbind("best_in_place:activate").bind("best_in_place:activate", function () {
+            var $el = bipName.find('textarea');
+            var el = $el[0];
+
+            $el.attr('maxlength', '140');
+
+            $('.mapInfoName').append('<div class="nameCounter forMap"></div>');
+
+            var callback = function (data) {
+                $('.nameCounter.forMap').html(data.all + '/140');
+            };
+            Countable.live(el, callback);
+        });
+        bipName.unbind("best_in_place:deactivate").bind("best_in_place:deactivate", function () {
+            $('.nameCounter.forMap').remove();
+        });
+
+        $('.mapInfoName .best_in_place_name').unbind("ajax:success").bind("ajax:success", function () {
+            var name = $(this).html();
+            Metamaps.Active.Map.set('name', name);
+            Metamaps.Active.Map.trigger('saved');
+        });
+
+        $('.mapInfoDesc .best_in_place_desc').unbind("ajax:success").bind("ajax:success", function () {
+            var desc = $(this).html();
+            Metamaps.Active.Map.set('desc', desc);
+            Metamaps.Active.Map.trigger('saved');
+        });
+
+        $('.yourMap .mapPermission').unbind().click(self.onPermissionClick);
+        // .yourMap in the unbind/bind is just a namespace for the events
+        // not a reference to the class .yourMap on the .mapInfoBox
+        $('.mapInfoBox.yourMap').unbind('.yourMap').bind('click.yourMap', self.hidePermissionSelect);
+
+        $('.yourMap .mapInfoDelete').unbind().click(self.deleteActiveMap);
+
+        $('.mapContributors span, #mapContribs').unbind().click(function(event){
+            $('.mapContributors .tip').toggle();
+            event.stopPropagation();
+        });
+        $('.mapContributors .tip').unbind().click(function(event){
+            event.stopPropagation();
+        });
+        $('.mapContributors .tip li a').click(Metamaps.Router.intercept);
+
+        $('.mapInfoBox').unbind('.hideTip').bind('click.hideTip', function(){
+            $('.mapContributors .tip').hide();
+        });
+    },
+    updateNameDescPerm: function(name, desc, perm) {
+        $('.mapInfoName .best_in_place_name').html(name);
+        $('.mapInfoDesc .best_in_place_desc').html(desc);
+        $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm);
+    },
+    createContributorList: function () {
+        var self = Metamaps.Map.InfoBox;
+
+        var string = "";
+        string += "<ul>";
+
+        Metamaps.Mappers.each(function(m){
+            string += '<li><a href="/explore/mapper/' + m.get("id") + '">' + '<img class="rtUserImage" width="25" height="25" src="' + m.get("image") + '" />' + m.get("name") + '</a></li>';
+        });
+
+        string += "</ul>";
+        return string;
+    },
+    updateNumbers: function () {
+        var self = Metamaps.Map.InfoBox;
+        var mapper = Metamaps.Active.Mapper;
+
+        var contributors_class = "";
+        if (Metamaps.Mappers.length === 2) contributors_class = "multiple mTwo";
+        else if (Metamaps.Mappers.length > 2) contributors_class = "multiple";
+
+        var contributors_image = "<%= asset_path('user.png') %>";
+        if (Metamaps.Mappers.length > 0) {
+            // get the first contributor and use their image
+            contributors_image = Metamaps.Mappers.models[0].get("image");
+        }
+        $('.mapContributors img').attr('src', contributors_image).removeClass('multiple mTwo').addClass(contributors_class);
+        $('.mapContributors span').text(Metamaps.Mappers.length)
+        $('.mapContributors .tip').html(self.createContributorList());
+        $('.mapTopics').text(Metamaps.Topics.length);
+        $('.mapSynapses').text(Metamaps.Synapses.length);
+
+        $('.mapEditedAt').html('<span>Last edited: </span>' + Metamaps.Util.nowDateFormatted());
+    },
+    onPermissionClick: function (event) {
+        var self = Metamaps.Map.InfoBox;
+
+        if (!self.selectingPermission) {
+            self.selectingPermission = true;
+            $(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
+            if ($(this).hasClass('commons')) {
+                $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
+            } else if ($(this).hasClass('public')) {
+                $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
+            } else if ($(this).hasClass('private')) {
+                $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
+            }
+            $('.mapPermission .permissionSelect li').click(self.selectPermission);
+            event.stopPropagation();
+        }
+    },
+    hidePermissionSelect: function () {
+        var self = Metamaps.Map.InfoBox;
+
+        self.selectingPermission = false;
+        $('.mapPermission').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
+        $('.mapPermission .permissionSelect').remove();
+    },
+    selectPermission: function (event) {
+        var self = Metamaps.Map.InfoBox;
+
+        self.selectingPermission = false;
+        var permission = $(this).attr('class');
+        var permBefore = Metamaps.Active.Map.get('permission');
+        Metamaps.Active.Map.save({
+            permission: permission
+        });
+        Metamaps.Active.Map.updateMapWrapper();
+        if (permBefore !== 'commons' && permission === 'commons') {
+            Metamaps.Realtime.setupSocket();
+            Metamaps.Realtime.turnOn();
+        }
+        else if (permBefore === 'commons' && permission === 'public') {
+            Metamaps.Realtime.turnOff(true); // true is to 'silence'
+            // the notification that would otherwise be sent
+        }
+        shareable = permission === 'private' ? '' : 'shareable';
+        $('.mapPermission').removeClass('commons public private minimize').addClass(permission);
+        $('.mapPermission .permissionSelect').remove();
+        $('.mapInfoBox').removeClass('shareable').addClass(shareable);
+        event.stopPropagation();
+    },
+    deleteActiveMap: function () {
+        var confirmString = 'Are you sure you want to delete this map? ';
+        confirmString += 'This action is irreversible. It will not delete the topics and synapses on the map.';
+
+        var doIt = confirm(confirmString);
+        var map = Metamaps.Active.Map;
+        var mapper = Metamaps.Active.Mapper;
+        var authorized = map.authorizePermissionChange(mapper);
+
+        if (doIt && authorized) {
+            Metamaps.Map.InfoBox.close();
+            Metamaps.Maps.Active.remove(map);
+            Metamaps.Maps.Featured.remove(map);
+            Metamaps.Maps.Mine.remove(map);
+            map.destroy();
+            Metamaps.Router.home();
+            Metamaps.GlobalUI.notifyUser('Map eliminated!');
+        }
+        else if (!authorized) {
+            alert('Hey now. We can\'t just go around willy nilly deleting other people\'s maps now can we? Run off and find something constructive to do, eh?');
+        }
+    }
+}; // end Metamaps.Map.InfoBox
+
+/*
+*
+* Account Settings
+*
+*/
+Metamaps.Account = {
+    listenersInitialized: false,
+    init: function () {
+        var self = Metamaps.Account;
+
+
+    },
+    initListeners: function(){
+        var self = Metamaps.Account;
+
+        $('#user_image').change(self.showImagePreview);
+        self.listenersInitialized = true;
+    },
+    toggleChangePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageMenu').toggle();
+        if (!self.listenersInitialized) self.initListeners();
+    },
+    openChangePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageMenu').show();
+        if (!self.listenersInitialized) self.initListeners();
+    },
+    closeChangePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageMenu').hide();
+    },
+    showLoading: function(){
+        var self = Metamaps.Account;
+
+        var loader = new CanvasLoader('accountPageLoading');
+        loader.setColor('#4FC059'); // default is '#000000'
+        loader.setDiameter(28); // default is 40
+        loader.setDensity(41); // default is 40
+        loader.setRange(0.9); // default is 1.3
+        loader.show(); // Hidden by default
+        $('#accountPageLoading').show();
+    },
+    showImagePreview: function(){
+        var self = Metamaps.Account;
+
+        var file = $('#user_image')[0].files[0];
+
+        var reader = new FileReader();
+
+        reader.onload = function(e) {
+            var $canvas = $('<canvas>').attr({
+                width: 84,
+                height: 84
+            });
+            var context = $canvas[0].getContext('2d');
+            var imageObj = new Image();
+
+            imageObj.onload = function() {
+                $('.userImageDiv canvas').remove();
+                $('.userImageDiv img').hide();
+
+                var imgWidth = imageObj.width;
+                var imgHeight = imageObj.height;
+
+                var dimensionToMatch = imgWidth > imgHeight ? imgHeight : imgWidth;
+                // draw cropped image
+                var nonZero = Math.abs(imgHeight - imgWidth) / 2;
+                var sourceX = dimensionToMatch === imgWidth ? 0 : nonZero;
+                var sourceY = dimensionToMatch === imgHeight ? 0 : nonZero;
+                var sourceWidth = dimensionToMatch;
+                var sourceHeight = dimensionToMatch;
+                var destX = 0;
+                var destY = 0;
+                var destWidth = 84;
+                var destHeight = 84;
+
+                context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
+                $('.userImageDiv').prepend($canvas);
+            };
+            imageObj.src = reader.result;
+        };
+
+        if (file) {
+            reader.readAsDataURL(file);
+            $('.userImageMenu').hide();
+            $('#remove_image').val('0');
+        }
+    },
+    removePicture: function(){
+        var self = Metamaps.Account;
+
+        $('.userImageDiv canvas').remove();
+        $('.userImageDiv img').attr('src', '<%= asset_path('user.png') %>').show();
+        $('.userImageMenu').hide();
+
+        var input = $('#user_image');
+        input.replaceWith(input.val('').clone(true));
+        $('#remove_image').val('1');
+    },
+    changeName: function(){
+        $('.accountName').hide();
+        $('.changeName').show();
+    },
+    showPass: function(){
+        $(".toHide").show();
+        $(".changePass").hide();
+    },
+    hidePass: function(){
+        $(".toHide").hide();
+        $(".changePass").show();
+
+        $('#current_password').val('');
+        $('#user_password').val('');
+        $('#user_password_confirmation').val('');
+    }
+};
+
+/*
+ *
+ *   MAPPER
+ *
+ */
+Metamaps.Mapper = {
+    // this function is to retrieve a mapper JSON object from the database
+    // @param id = the id of the mapper to retrieve
+    get: function (id, callback) {
+        return $.ajax({
+            url: "/users/" + id + ".json",
+            success: function (data) {
+                callback(new Metamaps.Backbone.Mapper(data));
+            }
+        });
+    }
+}; // end Metamaps.Mapper
+
+
+/*
+ *
+ *   ADMIN
+ *
+ */
+
+Metamaps.Admin = {
+    selectMetacodes: [],
+    allMetacodes: [],
+    init: function () {
+        var self = Metamaps.Admin;
+
+        $('#metacodes_value').val(self.selectMetacodes.toString());
+    },
+    selectAll: function () {
+        var self = Metamaps.Admin;
+
+        $('.editMetacodes li').removeClass('toggledOff');
+        self.selectMetacodes = self.allMetacodes.slice(0);
+        $('#metacodes_value').val(self.selectMetacodes.toString());
+    },
+    deselectAll: function () {
+        var self = Metamaps.Admin;
+
+        $('.editMetacodes li').addClass('toggledOff');
+        self.selectMetacodes = [];
+        $('#metacodes_value').val(0);
+    },
+    liClickHandler: function () {
+        var self = Metamaps.Admin;
+
+        if ($(this).attr('class') != 'toggledOff') {
+          $(this).addClass('toggledOff');
+          var value_to_remove = $(this).attr('id');
+          self.selectMetacodes.splice(self.selectMetacodes.indexOf(value_to_remove), 1);
+          $('#metacodes_value').val(self.selectMetacodes.toString());
+        }
+        else if ($(this).attr('class') == 'toggledOff') {
+          $(this).removeClass('toggledOff');
+          self.selectMetacodes.push($(this).attr('id'));
+          $('#metacodes_value').val(self.selectMetacodes.toString());
+        }
+    },
+    validate: function () {
+        var self = Metamaps.Admin;
+
+        if (self.selectMetacodes.length == 0) {
+          alert('Would you pretty please select at least one metacode for the set?');
+          return false;
+        }
+    }
+};
diff --git a/app/assets/stylesheets/application.css.erb b/app/assets/stylesheets/application.css.erb
index 210c29b1..5970c18b 100644
--- a/app/assets/stylesheets/application.css.erb
+++ b/app/assets/stylesheets/application.css.erb
@@ -1,2900 +1,2900 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the top of the
- * compiled file, but it's generally better to create a new file per style scope.
- *
- *= require_self
- *= require_tree .
-*/
-
-/* clear styles */
-
-html,
-body,
-div,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol,
-dl,
-li,
-dt,
-dd,
-p,
-blockquote,
-pre,
-form,
-fieldset,
-table,
-th,
-td,
-legend {
-    margin: 0;
-    padding: 0;
-}
-img {
-    border: 0;
-    padding: 0;
-    margin: 0;
-    display: block;
-    text-indent: -9999px;
-}
-
-::-webkit-input-placeholder { /* WebKit browsers */
-    color:    #BDBDBD;
-}
-:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
-   color:    #BDBDBD;
-   opacity:  1;
-}
-::-moz-placeholder { /* Mozilla Firefox 19+ */
-   color:    #BDBDBD;
-   opacity:  1;
-}
-:-ms-input-placeholder { /* Internet Explorer 10+ */
-   color:    #BDBDBD;
-}
-
-html,
-body,
-.main,
-.wrapper {
-    height: 100%;
-}
-.wrapper.mapPage {
-    overflow: hidden;
-}
-
-html {
-
-}
-body {
-    background: #d8d9da url(<%= asset_data_uri('shattered_@2X.png') %>);
-    font-family: 'din-medium', helvetica, sans-serif;
-    color: #424242;
-    -moz-osx-font-smoothing: grayscale;
-
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-weight: normal;
-}
-a {
-    color: #424242;
-    text-decoration: none;
-}
-button.button,
-a.button,
-input[type="submit"] {
-    border: none;
-    height: 32px;
-    outline: none;
-    padding: 0 18px;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    background: #4FC059;
-    vertical-align: top;
-    color: #FFF;
-    margin: 0px;
-    cursor: pointer;
-    display: inline-block;
-    text-transform: uppercase;
-    font-size: 14px;
-    line-height: 16px;
-    text-align: center;
-    text-decoration: none;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -webkit-user-select: none;
-    font-family: 'din-medium', helvetica, sans-serif;
-    -webkit-font-smoothing: inherit;
-}
-button.button:hover,
-a.button:hover,
-input[type="submit"]:hover {
-    background: #49AD4E;
-}
-button.button:active,
-a.button:active,
-input[type="submit"]:active {
-    background: #429B46;
-}
-
-button.button.btn-no {
-    background-color: #c04f4f;
-}
-button.button.btn-no:hover {
-    background-color: #A54242;
-}
-.toast .toast-button {
-    margin-top: -10px;
-    margin-left: 10px;
-}
-/*
- * Utility
- */
-
-.clearfloat {
-    clear: both;
-}
-.leaveSpace {
-    display: block;
-    height: 25px;
-}
-.hidden {
-    display: none;
-}
-/*
- * Layout stuffs
- */
-
-/*#barometer_tab {
-    display: none;
-}*/
-
-#error_explanation {
-    background: #612127;
-    padding: 30px;
-    color: #FFF;
-}
-#error_explanation h2 {
-    display: none;
-}
-#error_explanation ul {
-    list-style: none;
-}
-.profile {
-    height: 100%;
-    margin-bottom: 50px;
-}
-.centeedProfile {
-    margin: 0 auto;
-    display: block;
-    width: 830px;
-}
-.requestInvite {
-    display: block;
-    margin: -720px auto 0;
-}
-.new_session,
-.new_user,
-.edit_user,
-.login,
-.forgotPassword {
-    display: block;
-    width: 300px;
-    background-color: #E0E0E0;
-    padding: 16px;
-    border-radius: 5px;
-    color: black;
-    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
-    position:absolute;
-    top: 50%;
-    left:50%;
-}
-
-.login{
-    width: 200px;
-    height: 308px;
-    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
-    margin-left:-100px;
-    margin-top:-158px;
-    font-family: din-medium;
-    font-size: 18px;
-    color: #424242;
-}
-
-.new_user{
-    height: 412px;
-    margin-left:-166px;
-    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
-    font-family: din-medium;
-    line-height: 18px;
-    text-transform: uppercase;
-    color:#424242;
-    margin-top: -222px;
-}
-
-.edit_user {
-    width: 300px;
-    margin-top: -282px;
-    margin-left: -166px;
-    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
-    text-transform: uppercase;
-    line-height: 18px;
-    font-family: din-medium;
-    color:#424242;
-}
-
-.toHide {
-    display:none;
-}
-
-.forgotPassword {
-    height: 134px;
-    font-family: din-medium;
-    color:#424242;
-    text-transform: uppercase;
-    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
-    margin-left: -166px;
-    margin-top: -83px;
-    line-height: 18px;
-}
-.forgotPasswordReset {
-    height: 215px !important;
-}
-.forgotPasswordReset input[type="submit"] {
-    top: 200px !important;
-}
-
-/* forgot password fix */
-
-.forgotPassword input[type="submit"] {
-    width: 300px;
-    color: #f5f5f5;
-    font-family: din-regular;
-    top: 118px;
-    position: absolute;
-}
-
-.new_user input[type="submit"] {
-    width: 96px;
-    padding: 0px;
-    font-family: din-regular;
-    text-transform: uppercase;
-    color: #f5f5f5;
-    margin-top:16px;
-    float: right;
-}
-
-.login input[type="submit"]{
-    width:84px;
-    margin-top: 16px;
-    font-family: din-regular;
-    text-transform: uppercase;
-}
-
-.edit_user input[type="submit"]{
-    width: 96px;
-    padding: 0px;
-    font-family: din-regular;
-    text-transform: uppercase;
-    color: #f5f5f5;
-    margin-top:16px;
-    float: right;
-}
-
-.edit_user .userImage {
-    width: 84px;
-    margin: 0 auto;
-    position: relative;
-    margin-top: 32px;
-    cursor: pointer;
-}
-.edit_user .userImage img, .edit_user .userImage canvas {
-    border-radius: 42px;
-}
-.edit_user .editPhoto {
-    display: none;
-    width: 40px;
-    height: 40px;
-    background-image: url(<%= asset_data_uri('photo.png') %>);
-    position: absolute;
-    top: 22px;
-    left: 22px;
-}
-.edit_user .userImageDiv:hover .editPhoto {
-    display: block;
-}
-.userImageMenu {
-    position: absolute;
-    top: 88px;
-    left: -18px;
-    display: none;
-}
-.userMenuArrow {
-    border-color: transparent;
-    border-bottom-color: #202020;
-    border-style: dashed dashed solid;
-    border-width: 0 8px 8px;
-    display: block;
-    position: absolute;
-    left: 52px;
-    top: 0px;
-    z-index: 1;
-    height: 0;
-    width: 0;
-}
-.userImageMenu ul {
-    background: #202020;
-    list-style: none;
-    text-align: center;
-    font-size: 14px;
-    line-height: 14px;
-    color: #FFFFFF;
-    width: 120px;
-    border-radius: 2px;
-    position: absolute;
-    top: 8px;
-    overflow: hidden;
-    z-index: 1;
-}
-.userImageMenu li {
-    height:14px;
-    padding: 5px 0;
-    position: relative;
-}
-.userImageMenu li:hover {
-    background-color: #757575;
-}
-.edit_user #user_image {
-    width: 120px;
-    height: 24px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
-}
-.edit_user .upload label {
-    width: 120px;
-    height: 24px;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-}
-
-.edit_user label.firstFieldText {
-    padding-top: 8px;
-}
-.firstFieldText{
-    font-family: 'din-regular', helvetica, sans-serif;
-    font-size: 14px;
-    color:#424242;
-    padding-top:24px;
-    padding-bottom: 6px;
-    text-transform: none;
-    margin: 0px;
-    line-height: 14px
-}
-.fieldText {
-    font-family: din-regular;
-    font-size: 14px;
-    color:#424242;
-    padding-top:16px;
-    padding-bottom: 6px;
-    text-transform: none;
-    margin: 0px;
-    line-height: 14px;
-}
-
-.smallText{
-    font-family: din-regular;
-    font-size: 12px;
-    line-height: 12px;
-    color: #c04f4f;
-    margin-top: 8px;
-    text-transform: none;
-}
-
-.accountName {
-    font-size: 24px;
-    text-align: center;
-    font-family: 'din-medium', helvetica, sans-serif;
-    color:#424242;
-    margin-top: 24px;
-    text-transform: none;
-
-}
-.accountName:hover .nameEdit:after {
-    background: url(<%= asset_data_uri('edit.png') %>) no-repeat;
-    content:" ";
-    position:absolute;
-    width:25px;
-    height:25px;
-    margin:5px 0px 0px 5px;
-}
-.changeName {
-    display: none;
-    margin-top: 24px;
-}
-
-.changePass {
-    font-family: din-regular;
-    font-size: 14px;
-    line-height: 14px;
-    color: #4fb5c0;
-    padding-top: 16px;
-    float: left;
-    text-transform: none;
-    cursor: pointer;
-}
-
-.noChangePass {
-    font-family: din-regular;
-    font-size: 12px;
-    line-height: 12px;
-    color: #c04f4f;
-    padding-top: 16px;
-    float: left;
-    text-transform: none;
-    cursor: pointer;
-
-}
-
-#accountPageLoading {
-    display: none;
-    position: absolute;
-    bottom: 16px;
-    right: 120px;
-}
-
-.centerGreyForm input[type="text"],
-.centerGreyForm input[type="email"],
-.centerGreyForm input[type="password"] {
-    width: 300px;
-    height: 32px;
-    font-size: 14px;
-    direction: ltr;
-    -webkit-appearance: none;
-    appearance: none;
-    display: inline-block;
-    margin: 0px 0px;
-    padding: 5px 0px 0px 9px;
-    background: #fff;
-    color: #424242 !important;
-    border: none;
-    outline:none;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    border-radius: 2px;
-    font: -webkit-small-control;
-    color: initial;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    display: inline-block;
-    font-family: 'din-regular', helvetica, sans-serif;
-    text-align: left;
-}
-
-.login input[type="email"],
-.login input[type="password"] {
-    width: 200px;
-    height:32px;
-    border-radius: 2px;
-    background-color:#ffffff;
-    color: #424242 !important;
-    font-family: din-medium;
-    font-size: 14px;
-    text-align: left;
-    padding: 5px 0px 0px 10px;
-}
-
-.login input[type="email"] {
-    margin-bottom:10px;
-}
-
-.new_topic {
-    /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
-    top: -1000px;
-    left: -1000px;
-    display: block;
-    position: absolute;
-    width: 340px;
-    margin: -40px 0 0 -35px;
-    z-index: 1;
-}
-
-#new_topic .twitter-typeahead {
-    position: absolute !important;
-    top: 45px;
-    left: 41px;
-    z-index: 9999;
-    width: 256px;
-    height: 34px;
-}
-.new_topic #topic_name,
-.new_topic .tt-hint {
-    width: 244px;
-    background: #FFFFFF;
-    height: 14px;
-    margin: 0;
-    padding: 10px 6px;
-    border: none;
-    border-radius: 2px;
-    outline: none;
-    font-size: 14px;
-    line-height: 14px;
-    color: #424242;
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-.new_topic .tt-hint {
-    color: #BDBDBD;
-}
-.openMetacodeSwitcher {
-    display: block;
-    height: 16px;
-    width: 16px;
-    background-image: url(<%= asset_data_uri('metacodesettings_sprite.png') %>);
-    position: absolute;
-    z-index: 2;
-    top: 20px;
-    left: 16px;
-}
-.openMetacodeSwitcher:hover {
-    background-position: -16px 0;
-}
-#metacodeImg {
-    height: 120px;
-}
-#metacodeImgTitle {
-    float: left;
-    width: 120px;
-    text-align: center;
-    margin-left: 110px;
-}
-/* synapse autocomplete */
-.new_synapse {
-    display: none;
-    position: absolute;
-    z-index: 1;
-    margin-left: -135px;
-    margin-top: -21px;
-}
-.new_synapse #synapse_desc {
-    color: rgba(255, 255, 255, 0.7);
-}
-.new_synapse .tt-hint {
-    color: rgba(255, 255, 255, 0.4);
-}
-.new_synapse #synapse_desc,
-.new_synapse .tt-hint {
-    width: 258px;
-    background: #FFFFFF;
-    height: 14px;
-    margin: 0;
-    padding: 10px 6px;
-    border: none;
-    border-radius: 2px;
-    outline: none;
-    font-size: 14px;
-    line-height: 14px;
-    color: #424242;
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-.new_synapse .tt-hint {
-    color: #BDBDBD;
-}
-label,
-select,
-input,
-textarea {
-    display: block;
-}
-label {
-    margin-top: 10px;
-    margin-bottom: 4px;
-}
-.contentarea p,
-.contentarea ul,
-.contentarea ol,
-.contentarea table {
-    font-size: 14px;
-    line-height: 1.55em;
-    padding: 0.5em 0
-}
-.contentarea ul li {
-    padding: 0.2em 0;
-}
-.contentarea ol li {
-    padding: 0.2em 0;
-}
-.contentarea ul {
-    margin: 0 0 0 1em;
-}
-.contentarea ol {
-    margin: 0 0 0 1.3em;
-}
-.main {
-    position: relative;
-    /*overflow:hidden; */
-}
-.main.compressed {
-  width: calc(100% - 300px);
-}
-#infovis-canvas {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-/* --- top options --*/
-
-.headertop {
-    display: block;
-    position: fixed;
-    top: 20px;
-    z-index: 10;
-    border-radius: 5px;
-    margin: 10px 0px 10px 10px;
-    background: #111614;
-    padding: 5px 10px;
-    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
-}
-.headertop .tab {
-    background: url('tab.png') no-repeat 0 0;
-    position: absolute;
-    top: -11px;
-    right: -2px;
-    display: block;
-    width: 45px;
-    height: 15px;
-    cursor: move;
-}
-.headertop button,
-.headertop input {
-    height: 30px;
-    background: none;
-    color: #717474;
-    font-size: 17px;
-    border: none;
-    border-right: 1px solid #717474;
-    cursor: pointer;
-    margin: 3px 0;
-    clear: both;
-    float: right;
-}
-.headertop button:hover,
-.headertop input:hover {
-    border-right: 1px solid #6d7310;
-    color: #6d7310;
-}
-.wrapper {
-    display: block;
-    height: 100%;
-    margin: 0 0;
-}
-
-/* account */
-
-.sidebarAccount {
-    width: 32px;
-    height: 32px;
-}
-.unauthenticated .sidebarAccount {
-    width: 84px;
-    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
-    border-radius: 2px;
-}
-.sidebarAccountIcon {
-    cursor: pointer;
-}
-.authenticated .sidebarAccountIcon {
-    height: 32px;
-    width: 32px;
-}
-.unauthenticated .sidebarAccountIcon {
-    width: 66px;
-    height: 14px;
-    padding: 9px;
-    border-radius: 2px;
-    background-color: #E0E0E0;
-    color: #424242;
-    text-transform: uppercase;
-    text-align: left;
-    font-size: 14px;
-    line-height: 14px;
-    position:relative;
-}
-.accountInnerArrow {
-    width:16px;
-    height:16px;
-    background-image: url(<%= asset_data_uri('arrowdown_sprite.png') %>);
-    background-repeat: no-repeat;
-    position:absolute;
-    top: 8px;
-    right:6px;
-}
-.unauthenticated .sidebarAccountIcon:hover .accountInnerArrow {
-    background-position: 0px -16px;
-}
-.sidebarAccountIcon img {
-    border-radius: 16px;
-}
-.sidebarAccountBox {
-    display: none;
-    height: auto;
-}
-.authenticated .sidebarAccountBox {
-    width: 138px;
-    padding: 16px;
-}
-.unauthenticated .sidebarAccountBox {
-    width: 270px;
-    height: 280px;
-}
-.sidebarAccountImage {
-    width:48px;
-    height:48px;
-    margin: 0 auto;
-    border-radius: 24px;
-}
-.sidebarAccountBox h3 {
-    text-transform: uppercase;
-    color:#424242;
-    font-size:14px;
-    line-height:14px;
-    margin-top:8px;
-    text-align:center;
-    max-width:138px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.sidebarAccountBox ul {
-    list-style: none;
-    margin-top:10px;
-}
-.sidebarAccountBox .accountListItem {
-    padding: 0;
-    background-size: 18px 18px;
-    background-repeat: no-repeat;
-    background-position: 0px 6px;
-    font-size: 14px;
-    line-height: 14px;
-    color: #757575;
-}
-.accountListItem:hover {
-    color: #424242;
-}
-.accountListItem .accountIcon {
-    width:32px;
-    height:32px;
-    position:absolute;
-    pointer-events:none;
-    background-repeat:no-repeat;
-    background-image: url(<%= asset_data_uri('user_sprite.png') %>);
-}
-.accountSettings .accountIcon {
-    background-position: 0 0;
-}
-.accountAdmin .accountIcon {
-    background-position: 0 -32px;
-}
-.accountInvite .accountIcon {
-    background-position: 0 -64px;
-}
-.accountLogout .accountIcon {
-    background-position: 0 -96px;
-}
-.accountListItem a {
-    display: block;
-    padding: 9px 0 9px 62px;
-    color: #757575;
-}
-.accountListItem:hover a {
-    color: #424242;
-}
-.accountListItem:hover .accountIcon {
-    background-position-x: -32px;
-}
-li.accountInvite span {
-    display: block;
-    padding: 9px 0 9px 62px;
-}
-.accountImage {
-    background-image: url(<%= asset_data_uri 'user.png' %>);
-    background-size: 84px 84px;
-    background-repeat: no-repeat;
-    height:84px;
-    width:84px;
-    margin: 24px auto;
-}
-
-.accountInput {
-    margin: 0 35px 10px;
-}
-.sidebarAccountBox input[type="email"],
-.sidebarAccountBox input[type="password"] {
-    width: 200px;
-    height: 32px;
-    font-size: 14px;
-    direction: ltr;
-    outline:none;
-    -webkit-appearance: none;
-    appearance: none;
-    display: inline-block;
-    margin: 0;
-    padding: 0 10px;
-    background: #fff;
-    border: none;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    border-radius: 2px;
-    font: -webkit-small-control;
-    color: #424242 !important;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    text-align: start;
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-.accountSubmit {
-    float:left;
-}
-.loginAnywhere .accountSubmit {
-    margin-left: 35px;
-}
-.accountRememberMe {
-    float:right;
-}
-.login .accountRememberMe {
-    margin-top: 10px;
-}
-.loginAnywhere .accountRememberMe {
-    margin-right: 35px;
-}
-#user_remember_me {
-    margin-top: 11px;
-    display:inline;
-}
-#user_remember_me,
-label[for="user_remember_me"] {
-    float: right;
-    font-size: 12px;
-    color: #424242;
-}
-.accountForgotPass {
-    font-size: 12px;
-}
-.loginAnywhere .accountForgotPass {
-    margin: 8px 0 0 35px;
-}
-.login .accountForgotPass {
-    margin: 8px 0 0 0;
-}
-.accountForgotPass a {
-    color: #757575;
-}
-.accountForgotPass a:hover {
-    color: #424242;
-}
-
-/* Save To New Map */
-
-.sidebarFork {
-    width: 32px;
-    height: 32px;
-}
-
-.sidebarFork .hoverForTip:hover .tip {
-    display: block;
-}
-.sidebarFork .tip {
-    display: none;
-    position: absolute;
-    background: black;
-    text-align: center;
-    top: 36px;
-    right: 0;
-    color: white;
-    border-radius: 4px;
-    font-size: 15px !important;
-    line-height: 17px;
-    padding: 3px 5px 2px;
-    z-index: 100;
-}
-/* end Save To New Map */
-
-/* Map Created */
-#mapCreatedSuccess {
-    width: 332px;
-    height: 182px;
-    top: 50%;
-    position: absolute;
-    left: 50%;
-    margin-top: -107px;
-    margin-left: -182px;
-    background-color: #E0E0E0;
-    padding: 16px;
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
-    font-size: 14px;
-    font-family: 'din-regular', helvetica, sans-serif;
-    border-radius: 2px;
-}
-
-#mapCreatedSuccess h6 {
-    font-size: 18px;
-    font-family: 'din-medium', helvetica, sans-serif;
-    margin-bottom: 6px;
-}
-
-#mapCreatedSuccess span {
-    margin: 8px auto;
-    display: block;
-    width: 20px;
-}
-
-#mapCreatedSuccess a {
-    display: block;
-    width: 220px;
-    height: 14px;
-    padding: 16px 0;
-    text-align: center;
-    border-radius: 2px;
-    font-size: 12px;
-    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
-    margin-left: auto;
-    margin-right: auto;
-    text-decoration: none;
-    text-transform: uppercase;
-    color: #FFFFFF;
-    cursor: pointer;
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-
-#mapGo {
-    background-color: #4fc059;
-    margin-top: 16px;
-}
-#mapGo:hover {
-    background-color: #49ad4e;
-}
-#mapStay {
-    background-color: #a354cd;
-}
-#mapStay:hover {
-    background-color: #9150bc;
-}
-
-
-/* Filter */
-
-.sidebarFilter {
-    width: 32px;
-    height: 32px;
-}
-
-.sidebarFilterBox {
-    display:none;
-    width: 319px;
-    padding: 16px 0;
-    overflow-y: auto;
-}
-h3.filterBox {
-    text-align: left;
-    float: left;
-}
-.sidebarFilterBox span {
-    float: right;
-    padding: 1px 4px;
-    border-radius: 2px;
-    margin-right: 5px;
-    cursor: pointer;
-    font-size:12px;
-}
-.sidebarFilterBox span:hover, .sidebarFilterBox span.active {
-    color: #00BCD4;
-}
-.sidebarFilterBox ul {
-    list-style: none;
-}
-.sidebarFilterBox li {
-    float: left;
-    width: 72px;
-    height: 72px;
-    cursor: pointer;
-    text-align: center;
-}
-.sidebarFilterBox li:hover {
-
-}
-#filter_by_mapper li img {
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
-    margin: 8px auto;
-}
-#filter_by_metacode li img {
-    width: 40px;
-    height: 40px;
-    margin: 8px auto;
-}
-#filter_by_synapse li img {
-    width: 16px;
-    height: 16px;
-    margin: 8px auto;
-}
-.sidebarFilterBox li p {
-    font-size: 11px;
-    line-height: 11px;
-    font-family: 'din-regular', helvetica, sans-serif;
-}
-.sidebarFilterBox li.toggledOff {
-    opacity: 0.4;
-}
-.sidebarFilterBox h2 {
-    font-size: 18px;
-    margin-left: 16px;
-    line-height: 18px;
-}
-.sidebarFilterBox h3 {
-    text-align: left;
-    text-transform: uppercase;
-    font-size:14px;
-    float:left;
-}
-.filterBySection {
-    margin-left:16px;
-    width: 288px;
-    border-top: 1px solid #BDBDBD;
-    padding-top:8px;
-    margin-top:8px;
-}
-#filter_by_metacode {
-
-}
-#filter_by_mapper {
-
-}
-#filter_by_synapse {
-
-}
-/* end filter by metacode */
-
-.nodemargin {
-    padding-top: 120px;
-}
-.divider {
-    margin: 20px 50px 20px 50px;
-    border-bottom: 2px solid #FFF;
-}
-.empty {
-    margin-left: 50px;
-}
-#menus {
-    margin: 0 7px;
-}
-/* right click menu */
-
-.rightclickmenu {
-    position: absolute;
-    width: 260px;
-    background: #FFFFFF;
-    padding: 6px 0px 6px 0px;
-    z-index: 20;
-    border-radius: 2px;
-    color: black;
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
-}
-
-.rightclickmenu .rc-spacer {
-    width:100%;
-    height:0;
-    border-top:1px solid #EBEBEB;
-    margin: 6px 0;
-    padding: 0;
-}
-.rightclickmenu > ul {
-
-}
-.rightclickmenu li {
-    list-style: none;
-    padding: 6px 10px 6px 32px;
-    font-family: helvetica, sans-serif;
-    font-size: 13px;
-    line-height: 15px;
-    position: relative;
-}
-.rightclickmenu li:hover {
-    background-color: #E0E0E0;
-    cursor: pointer;
-}
-.rightclickmenu li.disabled {
-    opacity: 0.4;
-}
-.rightclickmenu li.disabled:hover {
-    background-color: transparent;
-    cursor: default;
-}
-
-.rc-keyboard {
-    position: absolute;
-    top: 6px;
-    right: 12px;
-    color: #757575;
-}
-
-.rightclickmenu > ul > li .rc-icon {
-    position: absolute;
-    top: 0;
-    left: 4px;
-    background-image: url(<%= asset_data_uri('context_sprite.png') %>);
-    background-repeat: no-repeat;
-    width: 24px;
-    height: 24px;
-}
-.rightclickmenu .rc-hide .rc-icon {
-    background-position: 0 0;
-}
-.rightclickmenu .rc-remove .rc-icon {
-    background-position: 0 -24px;
-}
-.rightclickmenu .rc-delete .rc-icon {
-    background-position: 0 -48px;
-}
-
-.rightclickmenu .rc-center .rc-icon {
-    background-image: url(<%= asset_data_uri('context_topicview_sprite.png') %>);
-}
-.rightclickmenu .rc-popout .rc-icon {
-    background-position: 0 -72px;
-}
-.rightclickmenu .rc-permission .rc-icon {
-    background-position: 0 -96px;
-}
-.rightclickmenu .rc-metacode .rc-icon {
-    background-position: 0 -120px;
-}
-.rightclickmenu .rc-siblings .rc-icon {
-    background-position: 0 -24px;
-    background-image: url(<%= asset_data_uri('context_topicview_sprite.png') %>);
-}
-.rightclickmenu .expandLi {
-    position: absolute;
-    top: 4px;
-    right: 8px;
-    width: 16px;
-    height: 16px;
-    background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
-    background-repeat: no-repeat;
-    background-position: 0 -32px;
-}
-.rc-metacode li img {
-    display: inline-block;
-}
-.rightclickmenu .rc-permission ul,
-.rightclickmenu .rc-metacode ul,
-.rightclickmenu .rc-siblings ul  {
-    display: none;
-    background: white;
-    top: 0;
-    left: 100%;
-    position: absolute;
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-    border-top-right-radius: 2px;
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
-}
-.rightclickmenu .rc-permission:hover > ul,
-.rightclickmenu .rc-metacode:hover > ul,
- .rightclickmenu .rc-siblings:hover > ul {
-    display: block;
-}
-.rightclickmenu p {
-    padding: 7px;
-}
-.rightclickmenu li.changeP {
-
-}
-.rightclickmenu li.changeP .rc-perm-icon {
-    position: absolute;
-    top: 0;
-    left: 4px;
-    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
-    background-size: 72px 48px;
-    background-repeat: no-repeat;
-    width: 24px;
-    height: 24px;
-}
-.rightclickmenu li.toCommons .rc-perm-icon {
-    background-position: 0 0;
-}
-.rightclickmenu li.toPublic .rc-perm-icon {
-    background-position: -48px 0;
-}
-.rightclickmenu li.toPrivate .rc-perm-icon {
-    background-position: -24px 0;
-}
-.rightclickmenu .rc-metacode > ul > li,
-.rightclickmenu .rc-siblings > ul > li {
-    padding: 6px 24px 6px 8px;
-    width: auto;
-    white-space: nowrap;
-}
-.rightclickmenu .rc-metacode ul ul,
-.rightclickmenu .rc-siblings ul ul {
-    display: none;
-    max-height: 270px;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-.rightclickmenu .rc-metacode li:hover ul,
-.rightclickmenu .rc-siblings li:hover ul {
-    display: block;
-}
-.rightclickmenu .rc-metacode ul ul li,
-.rightclickmenu .rc-siblings ul ul li {
-    padding: 4px 10px 4px 8px;
-    width: auto;
-    white-space: nowrap;
-    height: 24px;
-}
-.rightclickmenu .expandMetacodeSet {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 16px;
-    height: 16px;
-    background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
-    background-repeat: no-repeat;
-    background-position: 0 -32px;
-}
-.rightclickmenu .rc-metacode .mSelectName {
-    padding: 0 16px 0 4px;
-    display: inline-block;
-    position: relative;
-    top: -7px;
-}
-
-.moveMenusUp .rc-metacode ul,
-.moveMenusUp .rc-permission ul,
-.moveMenusUp .rc-siblings ul {
-    top: auto;
-    bottom: 0;
-}
-.moveMenusToLeft .rc-metacode ul,
-.moveMenusToLeft .rc-permission ul,
-.moveMenusToLeft .rc-siblings ul {
-    left: auto;
-    right: 100%;
-}
-
-#loadingSiblings div {
-    width: 15px;
-    margin: 0 auto;
-}
-
-
-/* end right click menu */
-
-/* topic and synapse autocomplete */
-
-#new_topic .tt-suggestion:hover,
-#new_topic .tt-suggestion.tt-cursor,
-#new_synapse .tt-suggestion:hover,
-#new_synapse .tt-suggestion.tt-cursor {
-    background: #E0E0E0;
-}
-#new_topic .tt-suggestion,
-#new_synapse .tt-dataset h3,
-#new_synapse .tt-suggestion {
-    background: #F5F5F5;
-    position: relative;
-}
-#new_topic .tt-suggestion {
-    width: 256px;
-}
-#new_synapse .tt-suggestion {
-    width: 270px;
-}
-#new_topic .autocompleteSection {
-    float: left;
-}
-#new_topic .topicType {
-    padding: 4px 0 0 4px;
-}
-#new_topic .topicTitle {
-    width: 190px;
-    line-height: 14px;
-    font-size: 14px;
-    padding: 9px 0 9px 4px;
-}
-#new_synapse .synapseDesc,
-#new_synapse .genericSynapseDesc {
-    width: 190px;
-    line-height: 14px;
-    font-size: 14px;
-    padding: 9px 0 9px 8px;
-    display: inline-block;
-}
-#new_topic .expandTopicMetadata {
-    display:none;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background-repeat: no-repeat;
-    background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
-    background-position: 0 -32px;
-}
-#new_topic .tt-suggestion:hover .expandTopicMetadata,
-#new_topic .tt-suggestion.tt-cursor .expandTopicMetadata {
-    display: block;
-}
-#new_topic .tt-suggestion:hover .topicMetadata,
-#new_topic .tt-suggestion.tt-cursor .topicMetadata {
-    display: block;
-}
-#new_topic .topicMetadata {
-    position: absolute;
-    display: none;
-    top: -18px;
-    right: -100px;
-    width: 100px;
-    height: 70px;
-    background-color: #E0E0E0;
-    font-family: 'din-regular', helvetica, sans-serif;
-    font-size: 14px;
-}
-#new_topic .topicPermission {
-    width: 32px;
-    height: 32px;
-    background-repeat: no-repeat;
-    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-}
-#new_topic .topicPermission.commons,
-#new_synapse .synapsePermission.commons {
-    background-position: 0 0;
-}
-#new_topic .topicPermission.public,
-#new_synapse .synapsePermission.public {
-    background-position: -64px 0;
-}
-#new_topic .topicPermission.private,
-#new_synapse .synapsePermission.private {
-    background-position: -32px 0;
-}
-#new_topic .topicNumMaps {
-    height: 14px;
-    padding: 1px 0 1px 32px;
-    background-image: url(<%= asset_data_uri('metamap16.png') %>);
-    background-repeat: no-repeat;
-    background-position: 8px 0;
-    position: absolute;
-    top: 10px;
-}
-#new_topic .topicNumSynapses {
-    height: 14px;
-    padding: 1px 0 1px 32px;
-    background-image: url(<%= asset_data_uri('synapse16.png') %>);
-    background-repeat: no-repeat;
-    background-position: 8px 0;
-    position: absolute;
-    bottom: 10px;
-}
-#new_topic .topicOriginatorIcon {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-}
-#new_topic .topicOriginatorIcon img {
-    border-radius: 12px;
-}
-#new_topic .topicOriginatorIcon .tooltips {
-    left: 32px;
-    top: -2px;
-    right: auto;
-}
-#new_topic .topicOriginatorIcon .tooltips:after {
-    content: '';
-    position: absolute;
-    top: 57%;
-    left: -4px;
-    margin-top: -6px;
-    width: 0;
-    height: 0;
-    border-right: 4px solid #000000;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-}
-#new_topic .topicOriginatorIcon:hover .tooltips {
-    display:block;
-}
-
-#new_synapse .tt-dropdown-menu {
-    background: #F5F5F5;
-}
-#new_synapse .tt-dropdown-menu h3 {
-    font-size: 14px;
-    line-height: 16px;
-    padding: 8px;
-    border-top: 1px solid #BFBFBF;
-    color: #808080;
-}
-#new_synapse .tt-suggestion .resultnoresult .synapsePermission,
-#new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
-    display: none;
-}
-
-#new_synapse .synapseMetadata {
-    width: 64px;
-    padding-left: 4px;
-    height: 32px;
-    position: absolute;
-    left: 202px;
-    top: 0;
-}
-#new_synapse .synapseOriginatorIcon {
-    position: absolute;
-    top: 4px;
-}
-#new_synapse .synapseOriginatorIcon .tooltips {
-    right: 32px;
-    top: -2px;
-}
-#new_synapse .synapseOriginatorIcon .tooltips:after {
-    content: '';
-    position: absolute;
-    top: 57%;
-    left: 100%;
-    margin-top: -6px;
-    width: 0;
-    height: 0;
-    border-left: 4px solid #000000;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-}
-#new_synapse .synapseOriginatorIcon:hover .tooltips {
-    display:block;
-}
-#new_synapse .synapseOriginatorIcon img {
-    border-radius: 12px;
-}
-#new_synapse .synapsePermission {
-    position: absolute;
-    left: 32px;
-    width: 32px;
-    height: 32px;
-    background-repeat: no-repeat;
-    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
-}
-/* map info box */
-/* map info box */
-
-.wrapper div.mapInfoBox {
-    display: none;
-    position: absolute;
-    bottom: 40px;
-    right: 3px;
-    background-color: #424242;
-    color: #F5F5F5;
-    border-radius: 2px;
-    width: 360px;
-    min-height: 300px;
-    padding: 0;
-    font-style: normal;
-    text-align: center;
-    box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
-}
-.mapInfoName {
-    font-size: 18px;
-    line-height: 20px;
-    padding: 13px 16px;
-    margin: 13px 0;
-    position: relative;
-}
-.mapInfoName textarea {
-    width: 328px;
-    font-size: 18px;
-    line-height: 20px;
-    color: #F5F5F5;
-    font-family: 'din-medium', helvetica, sans-serif;
-    border: 0;
-    outline: none;
-    background: none;
-    text-align: center;
-    resize: none;
-}
-.mapInfoBox.canEdit #mapInfoName:hover {
-    background-image: url(<%= asset_data_uri('edit.png') %>);
-    background-repeat: no-repeat;
-    background-position: bottom right;
-    cursor: text;
-}
-
-.mapInfoStat {
-    background-color: #E0E0E0;
-    font-size: 18px;
-    line-height: 20px;
-    height: 48px;
-    padding: 0;
-    color: #424242;
-}
-.wrapper div.mapInfoName span,
-.wrapper div.mapInfoDesc span {
-    float: none !important;
-    padding-bottom: 10px;
-    word-wrap: break-word;
-}
-.infoStatIcon {
-    float: left;
-    width: 25px;
-    padding: 14px 0px 14px 45px;
-    height: 20px;
-    background-repeat: no-repeat;
-    text-align: left;
-}
-.mapContributors {
-    position: relative;
-    height: 30px;
-    margin: 9px 0px 9px 56px;
-    padding: 0;
-    width: 64px;
-}
-#mapContribs {
-    float: left;
-    border: 2px solid #424242;
-    background-color: #fff;
-    width: 25px;
-    height: 25px;
-    border-radius: 15px;
-    cursor: pointer;
-}
-#mapContribs.multiple.mTwo {
-    box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242;
-}
-#mapContribs.multiple {
-    box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242,4px 3px 0 0 #B5B5B5,5px 4px 0 0 #424242;
-}
-.mapContributors span {
-    height: 20px;
-    padding-top: 5px;
-    padding-left: 8px;
-    float: left;
-    cursor: pointer;
-}
-
-
-#mapContribsTip {
-    border: 2px solid #424242;
-    background-color: #fff;
-    width: 25px;
-    height: 25px;
-    border-radius: 15px;
-}
-
-.infoStatIcon .tip {
-    display: none;
-    position: absolute;
-    background: #202020;
-    min-width: 180px;
-    max-width: 250px;
-    text-align: center;
-    color: black;
-    border-radius: 4px;
-    font-size: 15px !important;
-    line-height: 17px;
-    padding: 6px 8px 6px 8px;
-    z-index: 100;
-}
-
-.mapContributors .tip {
-    top: 45px;
-    left: -10px;
-}
-
-.mapContributors .tip ul {
-    max-height: 188px;
-    overflow-y: auto;
-}
-
-.mapContributors .tip li {
-    list-style-type: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 12px 40px;
-    display: block;
-    height: 14px;
-    font-family: 'din-regular', helvetica, sans-serif;
-    font-size: 14px;
-    line-height: 14px;
-    position: relative;
-    text-align: left;
-    color: white;
-}
-
-.mapContributors .tip li a {
-    color: white;
-}
-.mapContributors div:after {
-    content: '';
-    position: absolute;
-    top: -4px;
-    left: 21px;
-    width: 0;
-    height: 0;
-    border-bottom: 4px solid #202020;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-}
-
-.mapContributors .tip img {
-    border: 2px solid #bdbdbd;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    border-radius: 14px;
-}
-
-.mapInfoBox .mapPermission .tooltips {
-    top: -20px;
-    right: 36px;
-    width: 155px;
-    white-space: normal;
-    text-align: center;
-}
-.mapInfoBox .mapPermission .tooltips:after {
-    content: '';
-    position: absolute;
-    right: -4px;
-    top: 24px;
-    width: 0;
-    height: 0;
-    border-left: 4px solid black;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-}
-.mapInfoBox.yourMap .mapPermission.hoverForTip:hover .tooltips {
-    display: block;
-}
-
-.mapTopics {
-    background-image: url(<%= asset_data_uri('topic32.png') %>);
-    background-position: 13px center;
-}
-.mapSynapses {
-    background-image: url(<%= asset_data_uri('synapse32padded.png') %>);
-    background-position: 13px center;
-}
-.mapInfoBox .mapPermission {
-    background-position: 0 center;
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    margin: 8px 30px 8px 10px;
-    position: relative;
-    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
-}
-.mapInfoBox .mapPermission.commons {
-    background-position: 0 0;
-}
-.mapInfoBox .mapPermission.public {
-    background-position: -64px 0;
-}
-.mapInfoBox .mapPermission.private {
-    background-position: -32px 0;
-}
-.yourMap .mapPermission:hover {
-    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
-    cursor: pointer;
-    background-position: -32px 0;
-}
-.yourMap .mapPermission.minimize {
-    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
-    cursor: pointer;
-    background-position: 0 0;
-}
-.mapInfoBox .mapPermission .permissionSelect {
-    list-style: none;
-    width: 32px;
-    height: 64px;
-    position: relative;
-    top: 32px;
-}
-.mapInfoBox .mapPermission .permissionSelect li {
-    width: 32px;
-    height: 32px;
-    background-repeat: no-repeat;
-    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
-}
-.mapInfoBox .mapPermission .permissionSelect .commons {
-    background-position: 0 0;
-}
-.mapInfoBox .mapPermission .permissionSelect .public {
-    background-position: -64px 0;
-}
-.mapInfoBox .mapPermission .permissionSelect .private {
-    background-position: -32px 0;
-}
-.mapInfoBox .mapPermission .permissionSelect .commons:hover {
-    background-position: 0 -32px;
-}
-.mapInfoBox .mapPermission .permissionSelect .public:hover {
-    background-position: -64px -32px;
-}
-.mapInfoBox .mapPermission .permissionSelect .private:hover {
-    background-position: -32px -32px;
-}
-.mapInfoBox .mapInfoDesc {
-    font-family: helvetica, sans-serif;
-    color: #E0E0E0;
-    margin: 16px;
-    padding-right: 16px;
-    height: 115px;
-    font-size: 14px;
-    line-height: 16px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    font-style: italic;
-    text-align: left;
-}
-.mapInfoBox .mapInfoDesc textarea {
-    font-family: helvetica, sans-serif;
-    text-align: left;
-    color: #E0E0E0;
-    font-size: 14px;
-    line-height: 16px;
-    font-style: italic;
-    border: 0;
-    outline: 0;
-    background: none;
-    resize: none;
-    width: 340px;
-}
-.mapInfoBox.canEdit .mapInfoDesc:hover {
-    background-image: url(<%= asset_data_uri('edit.png') %>);
-    background-position: top right;
-    background-repeat: no-repeat;
-    cursor: text;
-}
-
-.mapInfoBox .mapInfoMeta {
-    height: 35px;
-    border-top: 1px solid #F5F5F5;
-    padding: 6px 0 7px 16px;
-    text-align: left;
-    position: relative;
-}
-.mapInfoBox .mapInfoMeta p {
-    margin: 2px 0;
-    font-size: 12px;
-    color: #F5F5F5;
-}
-
-.mapCreatedAt span {
-    color: #4fc059;
-}
-
-.mapEditedAt span {
-    color: #dab539;
-}
-
-.mapInfoButtonsWrapper {
-    position: absolute;
-    top: 0;
-    right: 4px;
-}
-.mapInfoButtonsWrapper > div {
-    float: right;
-    width: 48px;
-    height: 48px;
-    font-size: 12px;
-    text-align: center;
-    position: relative;
-    cursor: pointer;
-    display: none;
-}
-.mapInfoShareIcon {
-    width: 24px;
-    height: 24px;
-    background-image: url(<%= asset_data_uri('share_sprite_mapinfo.png') %>);
-    background-repeat: no-repeat;
-    margin: 4px auto 0;
-    background-position: 0 -24px;
-}
-.mapInfoShare:hover .mapInfoShareIcon {
-    background-position: 0 0;
-}
-/* only display share button if 'public' or 'commons' */
-/* we're currently disabling this, as we're not ready for it
-and it won't be important on password protected instances */
-.shareable .mapInfoShare {
-    display: none;
-}
-.mapInfoDelete {
-    color: #E0E0E0;
-}
-.mapInfoDelete .deleteMap {
-    width: 16px;
-    height: 16px;
-    margin: 8px auto 0;
-    background-image: url(<%= asset_data_uri('remove_mapinfo_sprite.png') %>);
-    background-repeat: no-repeat;
-    background-position: -16px 0;
-}
-.mapInfoDelete:hover {
-    color: #F5F5F5;
-}
-.mapInfoDelete:hover .deleteMap {
-    background-position: 0 0;
-}
-/* only display delete button if it's a map you created */
-.yourMap .mapInfoDelete {
-    display: block;
-}
-.mapInfoButtonsWrapper span {
-    position: absolute;
-    width: 100%;
-    display: block;
-    bottom: 8px;
-}
-
-/* lightboxes */
-
-#lightbox_overlay {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: 1000000;
-    display: none;
-}
-#lightbox_main {
-    width: 800px;
-    height: auto;
-    margin: 0 auto;
-    z-index: 2;
-    position: relative;
-    top: 50%;
-    background-color: transparent;
-    color: black;
-}
-#lightbox_screen {
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    position: absolute;
-    background-color: #000;
-    opacity: 0.0;
-    filter: alpha(opacity=0);
-    -moz-opacity: 0.0;
-}
-#lightbox_overlay #lightbox_main #lightbox_header {
-    padding: 6px 5px 1px 0;
-    background-color: #333;
-    font-weight: bold;
-    height: 18px;
-    border: solid 2px #000;
-}
-#lightbox_overlay #lightbox_main a#lightbox_close {
-    background-image: url(<%= asset_data_uri('xlightbox.png') %>);
-    cursor: pointer;
-    height: 32px;
-    outline-style: none;
-    outline-width: medium;
-    overflow: hidden;
-    position: absolute;
-    top: -8px;
-    right: -32px;
-    width: 32px;
-    z-index: 4;
-    border: none;
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-#lightbox_content {
-    width: 552px;
-    height: 434px;
-    background-color: #e0e0e0;
-    padding: 64px 124px 64px 124px;
-    box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
-    border-radius: 2px;
-}
-.lightboxContent h3 {
-/*    font-style: italic;
-    text-transform: uppercase;
-    font-family: 'vinyl';
-    font-size: 30px;
-    line-height: 35px;
-    color: black;*/
-    font-family: 'din-medium';
-    font-size: 24px;
-    text-transform: uppercase;
-    color: #424242;
-    text-align: left;
-    padding: 0 0 0 0;
-}
-.lightboxContent h3.forCreateMap {
-    text-align: left;
-}
-#svi {
-    padding-top: 56px;
-    padding-left: 162px;
-    margin: 0 auto;
-}
-#svi1 {
-    font-family: 'din-medium';
-    font-size: 14px;
-    font-color: #424242;
-    text-transform: uppercase;
-    text-align: left;
-    display: inline-block;
-}
-#svi2 {
-    font-family: 'din-medium';
-    font-size: 14px;
-    font-color: #424242;
-    text-transform: uppercase;
-    text-align: left;
-    display: inline-block;
-}
-
-#svi1 > p, #svi2 > p {
-    width: 150px;
-}
-.lightboxContent {
-    font-family: 'din-regular';
-    font-size: 14px;
-    color: #424242;
-    text-align: left;
-}
-.lightboxContent li {
-    list-style: none;
-}
-.openLightbox {
-    cursor: pointer;
-}
-.lightbox_links a {
-    height: 70px;
-    width: 104px;
-    border-radius: 2px;
-    padding-bottom: 0;
-    font-family: 'din-medium';
-    font-size: 14px;
-    text-transform: uppercase;
-    color: #757575;
-    text-align: center;
-    display: block;
-    cursor: pointer;
-    position:relative;
-
-}
-.lightbox_links a:hover {
-    color: #424242;
-}
-.lightbox_links a:active {
-    color: #00bcd4;
-}
-.lightbox_links .lightboxAboutIcon {
-    background-image: url(<%= asset_data_uri('about_sprite.png') %>);
-    background-repeat: no-repeat;
-    width:32px;
-    height:32px;
-    margin:10px auto;
-}
-#lightbox_metamapps .lightboxAboutIcon {
-    background-position: 0 0;
-}
-#lightbox_community .lightboxAboutIcon {
-    background-position: -32px 0;
-}
-#lightbox_source .lightboxAboutIcon {
-    background-position: -64px 0;
-}
-#lightbox_blog .lightboxAboutIcon {
-    background-position: -96px 0;
-}
-#lightbox_term .lightboxAboutIcon {
-    background-position: -128px 0;
-}
-#lightbox_metamapps:hover .lightboxAboutIcon {
-    background-position: 0 -32px;
-}
-#lightbox_community:hover .lightboxAboutIcon {
-    background-position: -32px -32px;
-}
-#lightbox_source:hover .lightboxAboutIcon {
-    background-position: -64px -32px;
-}
-#lightbox_blog:hover .lightboxAboutIcon {
-    background-position: -96px -32px;
-}
-#lightbox_term:hover .lightboxAboutIcon {
-    background-position: -128px -32px;
-}
-
-/* jquery ui tabs */
-
-.ui-tabs-hide {
-    display: none !important;
-}
-.ui-tabs-vertical {
-
-}
-.ui-tabs-vertical .ui-tabs-nav {
-    float: left;
-    width: 100px;
-    background: none;
-    border: none;
-    font-size: 15px;
-    padding: 0 !important;
-}
-.ui-tabs-vertical .ui-tabs-nav li {
-    clear: left;
-    width: 100%;
-    border: none !important;
-    background: none !important;
-    margin: 0 0 .2em 0 !important;
-    white-space: normal !important;
-}
-.ui-tabs-vertical .ui-tabs-nav li.ui-state-active,
-.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover {
-    border-right: none;
-}
-.ui-tabs-vertical .ui-tabs-nav li a {
-    display: block;
-    width: 100%;
-    padding: 4px 0 !important;
-    outline: none;
-}
-.ui-tabs-vertical .ui-tabs-panel {
-    padding: 0 !important;
-    float: right;
-    width: 388px;
-}
-/* switch metacode set */
-
-#metacodeSwitchTabs {
-    width: 100%;
-    font-size: 17px;
-    line-height: 21px;
-    border: none;
-    background: none;
-    padding: 0;
-}
-#metacodeSwitchTabs .setDesc {
-    margin-bottom: 5px;
-    font-family: 'din-medium', helvetica, sans-serif;
-    color: #424242;
-    font-size: 14px;
-    text-align: justify;
-    padding-right: 16px;
-}
-#switchMetacodes > p {
-    margin: 16px 0 16px 0;
-}
-#metacodeSwitchTabs > ul {
-    width: 130px;
-}
-#metacodeSwitchTabs > ul li {
-    font-size: 14px;
-    text-transform: uppercase;
-}
-#metacodeSwitchTabs li.ui-state-active a {
-    color: #00BCD4;
-    cursor: pointer;
-}
-.metacodeSwitchTab {
-    max-height: 300px;
-    overflow-y: auto;
-    margin-bottom: 16px;
-}
-.customMetacodeList {
-    overflow-y: auto;
-}
-.customMetacodeList,
-.metacodeSetList {
-    height: 301px;
-    margin: 5px 0 15px 0;
-}
-.customMetacodeList ul li {
-    cursor: pointer;
-}
-.customMetacodeList ul li,
-.metacodeSetList ul li {
-    list-style-type: none;
-    display: block;
-    padding: 0px;
-    width: 92px;
-    height: 70px;
-    float: left;
-    text-align: center;
-}
-.customMetacodeList li.toggledOff {
-    opacity: 0.4;
-}
-.customMetacodeList ul img,
-.metacodeSetList ul img {
-    width: 40px;
-    height: 40px;
-    margin: 0 auto;
-}
-.customMetacodeList ul p,
-.metacodeSetList ul p {
-    display: block;
-    margin: 0;
-    background: none;
-    font-size: 14px;
-    line-height: 14px;
-    font-family: 'din-regular', helvetica, sans-serif;
-    color: #424242;
-}
-#metacodeSwitchTabs button.button {
-    width: auto !important;
-    padding: 0 10px;
-    font-weight: normal;
-    float: right;
-}
-/* about, getInvolved, colophon */
-
-#aboutParms {
-    margin: 30px auto;
-    width: 218px;
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-#leftAboutParms {
-    text-align: left;
-    float: left;
-    margin-right: 30px;
-}
-#rightAboutParms {
-    text-align: left;
-    float: left;
-}
-
-#colophon {
-    overflow-y: scroll;
-    height:434px;
-}
-#colophonLinks {
-    padding-left:20px;
-}
-
-#colophoneHeader {
-    padding-bottom:12px;
-}
-
-
-#getInvolved a, #donate a {
-    color: #c04f4f;
-    text-decoration: underline;
-}
-#about > p, #getInvolved > p, #invite > p, #colophon p, #donate > p {
-    margin: 0px 0px 10px 0px;
-    line-height: 20px;
-}
-#about ul {
-    list-style: none;
-}
-#about ul li {
-    display: inline-block;
-}
-#colophonSectionIndented {
-    font-family: 'din-medium', helvetica, sans-serif;
-    text-align: left;
-    padding-left:20px;
-}
-
-
-#colophonSection {
-    font-family: 'din-medium', helvetica, sans-serif;
-    text-align: left;
-}
-
-#colophon a {
-    color: #c04f4f;
-    text-decoration: underline;
-}
-
-#colophonCols {
-    -webkit-column-count: 2; /* Chrome, Safari, Opera */
-    -moz-column-count: 2; /* Firefox */
-    column-count: 2;
-}
-
-#noIE{
-    border-radius: 2px;
-}
-#noIE p {
-    text-align: center;
-    font-family: din-regular;
-    font-size: 18px;
-    line-height: 18px;
-    color: #424242;
-    padding: 0px;
-    width: 400px;
-    left:195px;
-    position: absolute;
-}
-
-#noIEsubheading{
-    top: 144px;
-
-}
-
-#noIEbody {
-    top:416px;
-}
-
-#noIEbody a {
-    color: #c04f4f;
-    text-decoration: underline;
-}
-
-#noIE h3 {
-    text-align: center;
-    text-transform: uppercase;
-    padding: 0px;
-    margin: 0px;
-}
-
-#chromeIcon, #fireFoxIcon, #safariIcon {
-    position: relative;
-    height: 105px;
-    width: 105px;
-    display: inline-block;
-    margin: 110px 32px 0px 32px;
-    font-family: din-medium;
-    font-size: 24px;
-    line-height: 24px;
-    text-align: center;
-    text-transform: uppercase;
-    padding: 115px 0px 0px 0px;
-    opacity: 0.7;
-}
-#chromeIcon {
-    background: url(<%= asset_data_uri 'browser_icons.png' %>) no-repeat;
-}
-
-#fireFoxIcon {
-    background: url(<%= asset_data_uri 'browser_icons.png' %>) no-repeat -105px 0;
-}
-
-#safariIcon {
-    background: url(<%= asset_data_uri 'browser_icons.png' %>) no-repeat -220px 0;
-}
-
-#chromeIcon:hover{
-    opacity: 1;
-}
-
-#fireFoxIcon:hover{
-    opacity: 1;
-}
-
-#safariIcon:hover{
-    opacity: 1;
-}
-
-/* invite */
-
-.joinCodes {
-    text-align: center;
-    display: block;
-    color: #424242;
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-#joinCodesBox {
-    margin-top: 30px;
-}
-#joinCodesBox button {
-    margin: 16px 198px 0;
-}
-/* new map */
-
-.new_map {
-    color: black;
-}
-.new_map .inputGroup {
-    margin: 15px 0 5px;
-    position: relative;
-}
-
-.new_map .feedback_message {
-    float: right;
-    width: 388px;
-    background: #c04f4f;
-    margin: 5px 1px;
-    padding: 2px 5px;
-    border-radius: 2px;
-    color: #FFF;
-}
-.new_map label {
-    float: left;
-    width: 100px;
-    text-align: left;
-    margin-right: 15px;
-    font-size: 18px;
-    color: #424242;
-    font-family: 'din-regular', helvetica, sans-serif;
-}
-.new_map input[type="text"] {
-    font-family: 'din-medium', helvetica, sans-serif;
-    width: 400px;
-    height: 32px;
-    font-size: 14px;
-    direction: ltr;
-    -webkit-appearance: none;
-    appearance: none;
-    display: inline-block;
-    margin: 0;
-    padding: 0 8px;
-    background: #fff;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid #c0c0c0;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 1px;
-    -moz-border-radius: 1px;
-    border-radius: 2px;
-    color: #424242;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    display: inline-block;
-    text-align: start;
-    float: right;
-}
-.new_map input[type="text"]:hover,
-.new_map textarea:hover {
-    border: 1px solid #b9b9b9;
-    border-top: 1px solid #a0a0a0;
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.new_map textarea {
-    color: #424242;
-    padding: 8px;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid #c0c0c0;
-    resize: none;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    text-align: start;
-    font-family: 'din-medium', helvetica, sans-serif;
-    font-size: 14px;
-    line-height: 17px;
-    width: 400px;
-    box-sizing: border-box;
-    float: right;
-    border-radius: 2px;
-}
-
-.permHelper {
-    position: absolute;
-    width: 128px;
-    top: 36px;
-    color: #424242;
-    font-family: 'din-regular', helvetica, sans-serif;
-    font-size: 12px;
-}
-
-.permIconWrapper {
-    width: 276px;
-    padding: 0 62px;
-    float: right;
-}
-.new_map .permIcon {
-    float: left;
-    width: 92px;
-    height: 102px;
-    position: relative;
-}
-.new_map .mapPermIcon {
-    background-image: url(<%= asset_data_uri('permissions64sprite.png') %>);
-    background-repeat: no-repeat;
-    width:64px;
-    height:64px;
-    margin:10px auto 0;
-    background-position: 0 0;
-}
-.mapPermIcon:hover, .mapPermIcon.selected {
-    background-position: -64px 0;
-}
-#newmap_co {
-    background-position: 0 0;
-}
-#newmap_pu {
-    background-position: -64px 0;
-}
-#newmap_pr {
-    background-position: -128px 0;
-}
-#newmap_co:hover, #newmap_co.selected {
-    background-position: 0 -64px;
-}
-#newmap_pu:hover, #newmap_pu.selected {
-    background-position: -64px -64px;
-}
-#newmap_pr:hover, #newmap_pr.selected {
-    background-position: -128px -64px;
-}
-
-
-.new_map .permIcon h4 {
-    font-style: italic;
-    font-family: 'Vinyl';
-    text-transform: uppercase;
-    font-size: 18px;
-    line-height: 20px;
-    color: #424242 ;
-    text-align: center;
-}
-.new_map .tip {
-    display: none;
-}
-.permText {
-    width: 360px;
-    height: 32px;
-    margin: 16px 20px 0;
-    text-align: center;
-    float: right;
-    color: #424242;
-    font-family: 'din-regular', helvetica, sans-serif;
-    font-size: 14px;
-}
-.buttonWrapper {
-    width: 286px;
-    float:right;
-    margin: 16px 0 0 0;
-}
-.onConsole .new_map button.cancel {
-    margin-right: 20px;
-}
-.onConsole .new_map button,
-.onConsole .new_map input.add {
-    float: left;
-    margin-top: 5px;
-    height: 40px;
-    font-size: 17px;
-    width: auto;
-    padding: 0 30px;
-    cursor: pointer;
-    font-weight: normal;
-}
-.onConsole .new_map button:hover,
-.onConsole .new_map input.add:hover {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-/* Cheatsheet */
-
-#cheatSheet {
-    width: 100%;
-    height: 350px;
-    font-size: 17px;
-    line-height: 21px;
-    border: none;
-    background: none;
-    padding: 0;
-}
-#cheatSheet .sectionTitle {
-    font-weight: bold;
-}
-#cheatSheet .csItem {
-    margin: 5px 0;
-    font-size: 14px;
-    line-height: 18px;
-    font-family: 'din-regular';
-}
-
-#cheatSheet .csItem a {
-    color: #c04f4f;
-}
-
-#cheatSheet .csItem img {
-    display: inline-block;
-    margin-bottom: 10px;
-}
-#cheatSheet .csTitle {
-    font-weight: bold;
-
-
-}
-#cheatSheet .indented {
-    margin-left: 15px;
-}
-
-#zoomIn {
-    background: #424242 url(<%= asset_data_uri('zoom_sprite.png') %>) no-repeat;
-    width: 22px;
-    height: 22px;
-    display: inline-block;
-    background-position: -37px -5px;
-    border-radius: 2px;
-    margin: 0 4px;
-    position: relative;
-    top: 3px;
-}
-
-#zoomOut {
-    background: #424242 url(<%= asset_data_uri('zoom_sprite.png') %>) no-repeat;
-    width: 22px;
-    height: 22px;
-    display: inline-block;
-    background-position: -37px -37px;
-    border-radius: 2px;
-    margin: 0 4px;
-    position: relative;
-    top: 3px;
-}
-
-#centerMap {
-    background: #424242 url(<%= asset_data_uri('extents_sprite.png') %>) no-repeat;
-    width: 22px;
-    height: 22px;
-    display: inline-block;
-    background-position: -5px -5px;
-    border-radius: 2px;
-    margin: 0 4px;
-    position: relative;
-    top: 3px;
-
-}
-
-#helpWrapper {
-    background: none;
-    border: none;
-    border-bottom: 1px solid #BDBDBD;
-    border-radius: 0;
-}
-#helpWrapper li {
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0 30px 0 0;
-    border-bottom: 2px solid rgba(0,0,0,0);
-}
-#helpWrapper li:hover, #helpWrapper li.ui-state-active {
-    border-bottom: 2px solid #00BCD4;
-}
-#helpWrapper li.ui-state-active a, #helpWrapper li.ui-state-hover a {
-  color: #424242;
-}
-#helpWrapper li a {
-    padding: 0;
-    font-family: 'din-medium', helvetica, sans-serif;
-    font-size: 14px;
-}
-#quickReference {
-    padding: 32px 0 0 0;
-}
-#quickReference .ui-widget-content {
-  color: #424242;
-}
-#quickReference ul {
-    width: 150px;
-    text-transform: uppercase;
-    font-size: 14px;
-    line-height: 14px;
-    font-family: din-medium;
-
-}
-
-#quickReference ul li {
-    padding-bottom: 16px;
-}
-
-#quickReference li.ui-state-active a {
-    color: #00BCD4;
-}
-#tutorials {
-    padding: 16px 0 0 0;
-}
-.tutorialItem {
-    margin-top: 16px;
-    display: inline-block;
-    font-size: 14px;
-    font-family: 'din-medium', helvetica, sans-serif;
-    cursor: pointer;
-    color: #757575;
-}
-.tutorialItem:hover {
-    color: #424242;
-}
-.tutorialItem.active {
-    color: #00bcd4;
-}
-.tutorialItem.disable {
-    color: #999;
-    cursor: default;
-}
-.tutorialItem.disable:hover {
-    color: #999;
-}
-#upYourSkillz {
-    margin: 0 67px;
-}
-#moreResources {
-    padding: 16px 0 0 0;
-    font-size: 14px;
-    line-height: 18px;
-    color: #424242;
-}
-.resourcesColumn {
-    margin-top: 32px;
-    width: 273px;
-    display: inline-block;
-    text-align: center;
-    text-transform: uppercase;
-}
-.resourcesColumn ul {
-    list-style: none;
-}
-.resourcesColumn li {
-    margin-top: 16px;
-}
-.resourcesColumn a.button {
-    background-color: #00BCD4;
-    color: #FFF;
-    padding-top: 8px;
-    height: 24px;
-}
-.resourcesColumn li a {
-    color: #424242;
-}
-
-/* Admin Pages */
-
-.blackBox {
-    width: 760px;
-    margin: 0 auto;
-    padding: 20px 0 60px 20px;
-    background: rgba(0, 0, 0, 0.4);
-    color: white;
-    overflow: hidden;
-    position: relative;
-}
-.blackBox .metacodeSetsDescription {
-    width: 314px;
-}
-.blackBox td.metacodeSetDesc {
-    width: 314px;
-    word-wrap: break-word;
-}
-.blackBox .metacodeSetImage {
-    width: 36px;
-    height: 36px;
-    float: left;
-}
-.blackBox tr {
-    display: table-row;
-}
-.blackBox tr:nth-child(odd) {
-    background: rgba(0, 0, 0, 0.2);
-}
-.blackBox tr:nth-child(even) {
-    background: rgba(0, 0, 0, 0.3);
-}
-.blackBox th,
-.blackBox td {
-    padding: 10px;
-}
-.blackBox td.iconURL {
-    max-width: 415px;
-    word-wrap: break-word;
-}
-.blackBox td.iconColor {
-
-}
-.blackBox .field {
-    margin: 15px 0 5px;
-}
-.blackBox label {
-    float: left;
-    width: 100px;
-    margin-right: 15px;
-}
-.blackBox input[type="text"] {
-    width: 336px;
-    height: 32px;
-    font-size: 15px;
-    direction: ltr;
-    -webkit-appearance: none;
-    appearance: none;
-    display: inline-block;
-    margin: 0;
-    padding: 0 8px;
-    background: #fff;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid #c0c0c0;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 1px;
-    -moz-border-radius: 1px;
-    border-radius: 1px;
-    font: -webkit-small-control;
-    color: initial;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    display: inline-block;
-    text-align: start;
-    font-family: arial;
-}
-.blackBox input[type="text"]:hover,
-.blackBox textarea:hover {
-    border: 1px solid #b9b9b9;
-    border-top: 1px solid #a0a0a0;
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.blackBox textarea {
-    padding: 8px;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid #c0c0c0;
-    resize: none;
-    font: -webkit-small-control;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    text-align: start;
-    font-family: arial;
-    font-size: 15px;
-    line-height: 17px;
-    width: 318px;
-}
-.blackBox .allMetacodes {
-    padding: 5px 0;
-}
-.blackBox a.button {
-    margin-right: 20px;
-    line-height: 40px;
-}
-.blackBox a.button,
-.blackBox input.add {
-    float: left;
-    margin-top: 5px;
-    height: 40px;
-    font-size: 17px;
-    width: auto;
-    padding: 0 30px;
-    cursor: pointer;
-    font-weight: normal;
-}
-.blackBox a.button:hover,
-.blackBox input.add:hover {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-/* request */
-
-#wrapper .requestInvite {
-    width: 700px;
-    margin: 0 auto;
-    padding: 0 0 60px 0;
-    background: #FFFFFF;
-    color: white;
-    height: 100%;
-    overflow: hidden;
-}
-
-.home_bg {
-    display: block;
-    height: 100%;
-}
-
-.templates {
-    display: none;
-}
-
-
-/* collabCompass section */
-.collabCompass {
-    position:fixed;
-    top:50%;
-    left:50%;
-    z-index: 1;
-}
-
-.collabCompass:hover p {
-    display: block;
-}
-.collabCompass p {
-    display: none;
-    background-color: #4fb5c0;
-    color: #FFFFFF;
-    padding: 2px 8px 2px 8px;
-    position: absolute;
-    top: 7px;
-    left:28px;
-    z-index: 1;
-    font-size: 14px;
-    line-height: 14px;
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
-    white-space: nowrap;
-}
-.collabCompass.labelLeft p {
-    left: auto;
-    right: 28px;
-}
-.collabCompass img {
-    border-radius: 16px;
-    border: 2px solid #4fb5c0;
-    z-index: 2;
-    position: relative;
-}
-.compassArrow {
-    display: none;
-    background-repeat: no-repeat;
-    background-image: url(<%= asset_data_uri('compass_arrow.png') %>);
-    width: 48px;
-    height: 32px;
-    position: absolute;
-    top: 0;
-    left: 16px;
-    background-position: 16px 8px;
-    -webkit-transform-origin: left center;
-    transform-origin: left center;
-}
-.blockchain-btn {
-    display: inline;
-    float: right;
-}
-script.data-gratipay-username {
-    display: inline;
-    float: left;
-}
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+*/
+
+/* clear styles */
+
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+dl,
+li,
+dt,
+dd,
+p,
+blockquote,
+pre,
+form,
+fieldset,
+table,
+th,
+td,
+legend {
+    margin: 0;
+    padding: 0;
+}
+img {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    display: block;
+    text-indent: -9999px;
+}
+
+::-webkit-input-placeholder { /* WebKit browsers */
+    color:    #BDBDBD;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+   color:    #BDBDBD;
+   opacity:  1;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+   color:    #BDBDBD;
+   opacity:  1;
+}
+:-ms-input-placeholder { /* Internet Explorer 10+ */
+   color:    #BDBDBD;
+}
+
+html,
+body,
+.main,
+.wrapper {
+    height: 100%;
+}
+.wrapper.mapPage {
+    overflow: hidden;
+}
+
+html {
+
+}
+body {
+    background: #d8d9da url(<%= asset_data_uri('shattered_@2X.png') %>);
+    font-family: 'din-medium', helvetica, sans-serif;
+    color: #424242;
+    -moz-osx-font-smoothing: grayscale;
+
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: normal;
+}
+a {
+    color: #424242;
+    text-decoration: none;
+}
+button.button,
+a.button,
+input[type="submit"] {
+    border: none;
+    height: 32px;
+    outline: none;
+    padding: 0 18px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: #4FC059;
+    vertical-align: top;
+    color: #FFF;
+    margin: 0px;
+    cursor: pointer;
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 14px;
+    line-height: 16px;
+    text-align: center;
+    text-decoration: none;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -webkit-user-select: none;
+    font-family: 'din-medium', helvetica, sans-serif;
+    -webkit-font-smoothing: inherit;
+}
+button.button:hover,
+a.button:hover,
+input[type="submit"]:hover {
+    background: #49AD4E;
+}
+button.button:active,
+a.button:active,
+input[type="submit"]:active {
+    background: #429B46;
+}
+
+button.button.btn-no {
+    background-color: #c04f4f;
+}
+button.button.btn-no:hover {
+    background-color: #A54242;
+}
+.toast .toast-button {
+    margin-top: -10px;
+    margin-left: 10px;
+}
+/*
+ * Utility
+ */
+
+.clearfloat {
+    clear: both;
+}
+.leaveSpace {
+    display: block;
+    height: 25px;
+}
+.hidden {
+    display: none;
+}
+/*
+ * Layout stuffs
+ */
+
+/*#barometer_tab {
+    display: none;
+}*/
+
+#error_explanation {
+    background: #612127;
+    padding: 30px;
+    color: #FFF;
+}
+#error_explanation h2 {
+    display: none;
+}
+#error_explanation ul {
+    list-style: none;
+}
+.profile {
+    height: 100%;
+    margin-bottom: 50px;
+}
+.centeedProfile {
+    margin: 0 auto;
+    display: block;
+    width: 830px;
+}
+.requestInvite {
+    display: block;
+    margin: -720px auto 0;
+}
+.new_session,
+.new_user,
+.edit_user,
+.login,
+.forgotPassword {
+    display: block;
+    width: 300px;
+    background-color: #E0E0E0;
+    padding: 16px;
+    border-radius: 5px;
+    color: black;
+    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
+    position:absolute;
+    top: 50%;
+    left:50%;
+}
+
+.login{
+    width: 200px;
+    height: 308px;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    margin-left:-100px;
+    margin-top:-158px;
+    font-family: din-medium;
+    font-size: 18px;
+    color: #424242;
+}
+
+.new_user{
+    height: 412px;
+    margin-left:-166px;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    font-family: din-medium;
+    line-height: 18px;
+    text-transform: uppercase;
+    color:#424242;
+    margin-top: -222px;
+}
+
+.edit_user {
+    width: 300px;
+    margin-top: -282px;
+    margin-left: -166px;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    text-transform: uppercase;
+    line-height: 18px;
+    font-family: din-medium;
+    color:#424242;
+}
+
+.toHide {
+    display:none;
+}
+
+.forgotPassword {
+    height: 134px;
+    font-family: din-medium;
+    color:#424242;
+    text-transform: uppercase;
+    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.23), 0px 3px 3px rgba(0, 0, 0, 0.16);
+    margin-left: -166px;
+    margin-top: -83px;
+    line-height: 18px;
+}
+.forgotPasswordReset {
+    height: 215px !important;
+}
+.forgotPasswordReset input[type="submit"] {
+    top: 200px !important;
+}
+
+/* forgot password fix */
+
+.forgotPassword input[type="submit"] {
+    width: 300px;
+    color: #f5f5f5;
+    font-family: din-regular;
+    top: 118px;
+    position: absolute;
+}
+
+.new_user input[type="submit"] {
+    width: 96px;
+    padding: 0px;
+    font-family: din-regular;
+    text-transform: uppercase;
+    color: #f5f5f5;
+    margin-top:16px;
+    float: right;
+}
+
+.login input[type="submit"]{
+    width:84px;
+    margin-top: 16px;
+    font-family: din-regular;
+    text-transform: uppercase;
+}
+
+.edit_user input[type="submit"]{
+    width: 96px;
+    padding: 0px;
+    font-family: din-regular;
+    text-transform: uppercase;
+    color: #f5f5f5;
+    margin-top:16px;
+    float: right;
+}
+
+.edit_user .userImage {
+    width: 84px;
+    margin: 0 auto;
+    position: relative;
+    margin-top: 32px;
+    cursor: pointer;
+}
+.edit_user .userImage img, .edit_user .userImage canvas {
+    border-radius: 42px;
+}
+.edit_user .editPhoto {
+    display: none;
+    width: 40px;
+    height: 40px;
+    background-image: url(<%= asset_data_uri('photo.png') %>);
+    position: absolute;
+    top: 22px;
+    left: 22px;
+}
+.edit_user .userImageDiv:hover .editPhoto {
+    display: block;
+}
+.userImageMenu {
+    position: absolute;
+    top: 88px;
+    left: -18px;
+    display: none;
+}
+.userMenuArrow {
+    border-color: transparent;
+    border-bottom-color: #202020;
+    border-style: dashed dashed solid;
+    border-width: 0 8px 8px;
+    display: block;
+    position: absolute;
+    left: 52px;
+    top: 0px;
+    z-index: 1;
+    height: 0;
+    width: 0;
+}
+.userImageMenu ul {
+    background: #202020;
+    list-style: none;
+    text-align: center;
+    font-size: 14px;
+    line-height: 14px;
+    color: #FFFFFF;
+    width: 120px;
+    border-radius: 2px;
+    position: absolute;
+    top: 8px;
+    overflow: hidden;
+    z-index: 1;
+}
+.userImageMenu li {
+    height:14px;
+    padding: 5px 0;
+    position: relative;
+}
+.userImageMenu li:hover {
+    background-color: #757575;
+}
+.edit_user #user_image {
+    width: 120px;
+    height: 24px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+.edit_user .upload label {
+    width: 120px;
+    height: 24px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
+
+.edit_user label.firstFieldText {
+    padding-top: 8px;
+}
+.firstFieldText{
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
+    color:#424242;
+    padding-top:24px;
+    padding-bottom: 6px;
+    text-transform: none;
+    margin: 0px;
+    line-height: 14px
+}
+.fieldText {
+    font-family: din-regular;
+    font-size: 14px;
+    color:#424242;
+    padding-top:16px;
+    padding-bottom: 6px;
+    text-transform: none;
+    margin: 0px;
+    line-height: 14px;
+}
+
+.smallText{
+    font-family: din-regular;
+    font-size: 12px;
+    line-height: 12px;
+    color: #c04f4f;
+    margin-top: 8px;
+    text-transform: none;
+}
+
+.accountName {
+    font-size: 24px;
+    text-align: center;
+    font-family: 'din-medium', helvetica, sans-serif;
+    color:#424242;
+    margin-top: 24px;
+    text-transform: none;
+
+}
+.accountName:hover .nameEdit:after {
+    background: url(<%= asset_data_uri('edit.png') %>) no-repeat;
+    content:" ";
+    position:absolute;
+    width:25px;
+    height:25px;
+    margin:5px 0px 0px 5px;
+}
+.changeName {
+    display: none;
+    margin-top: 24px;
+}
+
+.changePass {
+    font-family: din-regular;
+    font-size: 14px;
+    line-height: 14px;
+    color: #4fb5c0;
+    padding-top: 16px;
+    float: left;
+    text-transform: none;
+    cursor: pointer;
+}
+
+.noChangePass {
+    font-family: din-regular;
+    font-size: 12px;
+    line-height: 12px;
+    color: #c04f4f;
+    padding-top: 16px;
+    float: left;
+    text-transform: none;
+    cursor: pointer;
+
+}
+
+#accountPageLoading {
+    display: none;
+    position: absolute;
+    bottom: 16px;
+    right: 120px;
+}
+
+.centerGreyForm input[type="text"],
+.centerGreyForm input[type="email"],
+.centerGreyForm input[type="password"] {
+    width: 300px;
+    height: 32px;
+    font-size: 14px;
+    direction: ltr;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0px 0px;
+    padding: 5px 0px 0px 9px;
+    background: #fff;
+    color: #424242 !important;
+    border: none;
+    outline:none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    font: -webkit-small-control;
+    color: initial;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    font-family: 'din-regular', helvetica, sans-serif;
+    text-align: left;
+}
+
+.login input[type="email"],
+.login input[type="password"] {
+    width: 200px;
+    height:32px;
+    border-radius: 2px;
+    background-color:#ffffff;
+    color: #424242 !important;
+    font-family: din-medium;
+    font-size: 14px;
+    text-align: left;
+    padding: 5px 0px 0px 10px;
+}
+
+.login input[type="email"] {
+    margin-bottom:10px;
+}
+
+.new_topic {
+    /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
+    top: -1000px;
+    left: -1000px;
+    display: block;
+    position: absolute;
+    width: 340px;
+    margin: -40px 0 0 -35px;
+    z-index: 1;
+}
+
+#new_topic .twitter-typeahead {
+    position: absolute !important;
+    top: 45px;
+    left: 41px;
+    z-index: 9999;
+    width: 256px;
+    height: 34px;
+}
+.new_topic #topic_name,
+.new_topic .tt-hint {
+    width: 244px;
+    background: #FFFFFF;
+    height: 14px;
+    margin: 0;
+    padding: 10px 6px;
+    border: none;
+    border-radius: 2px;
+    outline: none;
+    font-size: 14px;
+    line-height: 14px;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+.new_topic .tt-hint {
+    color: #BDBDBD;
+}
+.openMetacodeSwitcher {
+    display: block;
+    height: 16px;
+    width: 16px;
+    background-image: url(<%= asset_data_uri('metacodesettings_sprite.png') %>);
+    position: absolute;
+    z-index: 2;
+    top: 20px;
+    left: 16px;
+}
+.openMetacodeSwitcher:hover {
+    background-position: -16px 0;
+}
+#metacodeImg {
+    height: 120px;
+}
+#metacodeImgTitle {
+    float: left;
+    width: 120px;
+    text-align: center;
+    margin-left: 110px;
+}
+/* synapse autocomplete */
+.new_synapse {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    margin-left: -135px;
+    margin-top: -21px;
+}
+.new_synapse #synapse_desc {
+    color: rgba(255, 255, 255, 0.7);
+}
+.new_synapse .tt-hint {
+    color: rgba(255, 255, 255, 0.4);
+}
+.new_synapse #synapse_desc,
+.new_synapse .tt-hint {
+    width: 258px;
+    background: #FFFFFF;
+    height: 14px;
+    margin: 0;
+    padding: 10px 6px;
+    border: none;
+    border-radius: 2px;
+    outline: none;
+    font-size: 14px;
+    line-height: 14px;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+.new_synapse .tt-hint {
+    color: #BDBDBD;
+}
+label,
+select,
+input,
+textarea {
+    display: block;
+}
+label {
+    margin-top: 10px;
+    margin-bottom: 4px;
+}
+.contentarea p,
+.contentarea ul,
+.contentarea ol,
+.contentarea table {
+    font-size: 14px;
+    line-height: 1.55em;
+    padding: 0.5em 0
+}
+.contentarea ul li {
+    padding: 0.2em 0;
+}
+.contentarea ol li {
+    padding: 0.2em 0;
+}
+.contentarea ul {
+    margin: 0 0 0 1em;
+}
+.contentarea ol {
+    margin: 0 0 0 1.3em;
+}
+.main {
+    position: relative;
+    /*overflow:hidden; */
+}
+.main.compressed {
+  width: calc(100% - 300px);
+}
+#infovis-canvas {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+/* --- top options --*/
+
+.headertop {
+    display: block;
+    position: fixed;
+    top: 20px;
+    z-index: 10;
+    border-radius: 5px;
+    margin: 10px 0px 10px 10px;
+    background: #111614;
+    padding: 5px 10px;
+    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4);
+}
+.headertop .tab {
+    background: url('tab.png') no-repeat 0 0;
+    position: absolute;
+    top: -11px;
+    right: -2px;
+    display: block;
+    width: 45px;
+    height: 15px;
+    cursor: move;
+}
+.headertop button,
+.headertop input {
+    height: 30px;
+    background: none;
+    color: #717474;
+    font-size: 17px;
+    border: none;
+    border-right: 1px solid #717474;
+    cursor: pointer;
+    margin: 3px 0;
+    clear: both;
+    float: right;
+}
+.headertop button:hover,
+.headertop input:hover {
+    border-right: 1px solid #6d7310;
+    color: #6d7310;
+}
+.wrapper {
+    display: block;
+    height: 100%;
+    margin: 0 0;
+}
+
+/* account */
+
+.sidebarAccount {
+    width: 32px;
+    height: 32px;
+}
+.unauthenticated .sidebarAccount {
+    width: 84px;
+    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
+    border-radius: 2px;
+}
+.sidebarAccountIcon {
+    cursor: pointer;
+}
+.authenticated .sidebarAccountIcon {
+    height: 32px;
+    width: 32px;
+}
+.unauthenticated .sidebarAccountIcon {
+    width: 66px;
+    height: 14px;
+    padding: 9px;
+    border-radius: 2px;
+    background-color: #E0E0E0;
+    color: #424242;
+    text-transform: uppercase;
+    text-align: left;
+    font-size: 14px;
+    line-height: 14px;
+    position:relative;
+}
+.accountInnerArrow {
+    width:16px;
+    height:16px;
+    background-image: url(<%= asset_data_uri('arrowdown_sprite.png') %>);
+    background-repeat: no-repeat;
+    position:absolute;
+    top: 8px;
+    right:6px;
+}
+.unauthenticated .sidebarAccountIcon:hover .accountInnerArrow {
+    background-position: 0px -16px;
+}
+.sidebarAccountIcon img {
+    border-radius: 16px;
+}
+.sidebarAccountBox {
+    display: none;
+    height: auto;
+}
+.authenticated .sidebarAccountBox {
+    width: 138px;
+    padding: 16px;
+}
+.unauthenticated .sidebarAccountBox {
+    width: 270px;
+    height: 280px;
+}
+.sidebarAccountImage {
+    width:48px;
+    height:48px;
+    margin: 0 auto;
+    border-radius: 24px;
+}
+.sidebarAccountBox h3 {
+    text-transform: uppercase;
+    color:#424242;
+    font-size:14px;
+    line-height:14px;
+    margin-top:8px;
+    text-align:center;
+    max-width:138px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.sidebarAccountBox ul {
+    list-style: none;
+    margin-top:10px;
+}
+.sidebarAccountBox .accountListItem {
+    padding: 0;
+    background-size: 18px 18px;
+    background-repeat: no-repeat;
+    background-position: 0px 6px;
+    font-size: 14px;
+    line-height: 14px;
+    color: #757575;
+}
+.accountListItem:hover {
+    color: #424242;
+}
+.accountListItem .accountIcon {
+    width:32px;
+    height:32px;
+    position:absolute;
+    pointer-events:none;
+    background-repeat:no-repeat;
+    background-image: url(<%= asset_data_uri('user_sprite.png') %>);
+}
+.accountSettings .accountIcon {
+    background-position: 0 0;
+}
+.accountAdmin .accountIcon {
+    background-position: 0 -32px;
+}
+.accountInvite .accountIcon {
+    background-position: 0 -64px;
+}
+.accountLogout .accountIcon {
+    background-position: 0 -96px;
+}
+.accountListItem a {
+    display: block;
+    padding: 9px 0 9px 62px;
+    color: #757575;
+}
+.accountListItem:hover a {
+    color: #424242;
+}
+.accountListItem:hover .accountIcon {
+    background-position-x: -32px;
+}
+li.accountInvite span {
+    display: block;
+    padding: 9px 0 9px 62px;
+}
+.accountImage {
+    background-image: url(<%= asset_data_uri 'user.png' %>);
+    background-size: 84px 84px;
+    background-repeat: no-repeat;
+    height:84px;
+    width:84px;
+    margin: 24px auto;
+}
+
+.accountInput {
+    margin: 0 35px 10px;
+}
+.sidebarAccountBox input[type="email"],
+.sidebarAccountBox input[type="password"] {
+    width: 200px;
+    height: 32px;
+    font-size: 14px;
+    direction: ltr;
+    outline:none;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0 10px;
+    background: #fff;
+    border: none;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    font: -webkit-small-control;
+    color: #424242 !important;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    text-align: start;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+.accountSubmit {
+    float:left;
+}
+.loginAnywhere .accountSubmit {
+    margin-left: 35px;
+}
+.accountRememberMe {
+    float:right;
+}
+.login .accountRememberMe {
+    margin-top: 10px;
+}
+.loginAnywhere .accountRememberMe {
+    margin-right: 35px;
+}
+#user_remember_me {
+    margin-top: 11px;
+    display:inline;
+}
+#user_remember_me,
+label[for="user_remember_me"] {
+    float: right;
+    font-size: 12px;
+    color: #424242;
+}
+.accountForgotPass {
+    font-size: 12px;
+}
+.loginAnywhere .accountForgotPass {
+    margin: 8px 0 0 35px;
+}
+.login .accountForgotPass {
+    margin: 8px 0 0 0;
+}
+.accountForgotPass a {
+    color: #757575;
+}
+.accountForgotPass a:hover {
+    color: #424242;
+}
+
+/* Save To New Map */
+
+.sidebarFork {
+    width: 32px;
+    height: 32px;
+}
+
+.sidebarFork .hoverForTip:hover .tip {
+    display: block;
+}
+.sidebarFork .tip {
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    top: 36px;
+    right: 0;
+    color: white;
+    border-radius: 4px;
+    font-size: 15px !important;
+    line-height: 17px;
+    padding: 3px 5px 2px;
+    z-index: 100;
+}
+/* end Save To New Map */
+
+/* Map Created */
+#mapCreatedSuccess {
+    width: 332px;
+    height: 182px;
+    top: 50%;
+    position: absolute;
+    left: 50%;
+    margin-top: -107px;
+    margin-left: -182px;
+    background-color: #E0E0E0;
+    padding: 16px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
+    font-size: 14px;
+    font-family: 'din-regular', helvetica, sans-serif;
+    border-radius: 2px;
+}
+
+#mapCreatedSuccess h6 {
+    font-size: 18px;
+    font-family: 'din-medium', helvetica, sans-serif;
+    margin-bottom: 6px;
+}
+
+#mapCreatedSuccess span {
+    margin: 8px auto;
+    display: block;
+    width: 20px;
+}
+
+#mapCreatedSuccess a {
+    display: block;
+    width: 220px;
+    height: 14px;
+    padding: 16px 0;
+    text-align: center;
+    border-radius: 2px;
+    font-size: 12px;
+    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
+    margin-left: auto;
+    margin-right: auto;
+    text-decoration: none;
+    text-transform: uppercase;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+
+#mapGo {
+    background-color: #4fc059;
+    margin-top: 16px;
+}
+#mapGo:hover {
+    background-color: #49ad4e;
+}
+#mapStay {
+    background-color: #a354cd;
+}
+#mapStay:hover {
+    background-color: #9150bc;
+}
+
+
+/* Filter */
+
+.sidebarFilter {
+    width: 32px;
+    height: 32px;
+}
+
+.sidebarFilterBox {
+    display:none;
+    width: 319px;
+    padding: 16px 0;
+    overflow-y: auto;
+}
+h3.filterBox {
+    text-align: left;
+    float: left;
+}
+.sidebarFilterBox span {
+    float: right;
+    padding: 1px 4px;
+    border-radius: 2px;
+    margin-right: 5px;
+    cursor: pointer;
+    font-size:12px;
+}
+.sidebarFilterBox span:hover, .sidebarFilterBox span.active {
+    color: #00BCD4;
+}
+.sidebarFilterBox ul {
+    list-style: none;
+}
+.sidebarFilterBox li {
+    float: left;
+    width: 72px;
+    height: 72px;
+    cursor: pointer;
+    text-align: center;
+}
+.sidebarFilterBox li:hover {
+
+}
+#filter_by_mapper li img {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    margin: 8px auto;
+}
+#filter_by_metacode li img {
+    width: 40px;
+    height: 40px;
+    margin: 8px auto;
+}
+#filter_by_synapse li img {
+    width: 16px;
+    height: 16px;
+    margin: 8px auto;
+}
+.sidebarFilterBox li p {
+    font-size: 11px;
+    line-height: 11px;
+    font-family: 'din-regular', helvetica, sans-serif;
+}
+.sidebarFilterBox li.toggledOff {
+    opacity: 0.4;
+}
+.sidebarFilterBox h2 {
+    font-size: 18px;
+    margin-left: 16px;
+    line-height: 18px;
+}
+.sidebarFilterBox h3 {
+    text-align: left;
+    text-transform: uppercase;
+    font-size:14px;
+    float:left;
+}
+.filterBySection {
+    margin-left:16px;
+    width: 288px;
+    border-top: 1px solid #BDBDBD;
+    padding-top:8px;
+    margin-top:8px;
+}
+#filter_by_metacode {
+
+}
+#filter_by_mapper {
+
+}
+#filter_by_synapse {
+
+}
+/* end filter by metacode */
+
+.nodemargin {
+    padding-top: 120px;
+}
+.divider {
+    margin: 20px 50px 20px 50px;
+    border-bottom: 2px solid #FFF;
+}
+.empty {
+    margin-left: 50px;
+}
+#menus {
+    margin: 0 7px;
+}
+/* right click menu */
+
+.rightclickmenu {
+    position: absolute;
+    width: 260px;
+    background: #FFFFFF;
+    padding: 6px 0px 6px 0px;
+    z-index: 20;
+    border-radius: 2px;
+    color: black;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
+}
+
+.rightclickmenu .rc-spacer {
+    width:100%;
+    height:0;
+    border-top:1px solid #EBEBEB;
+    margin: 6px 0;
+    padding: 0;
+}
+.rightclickmenu > ul {
+
+}
+.rightclickmenu li {
+    list-style: none;
+    padding: 6px 10px 6px 32px;
+    font-family: helvetica, sans-serif;
+    font-size: 13px;
+    line-height: 15px;
+    position: relative;
+}
+.rightclickmenu li:hover {
+    background-color: #E0E0E0;
+    cursor: pointer;
+}
+.rightclickmenu li.disabled {
+    opacity: 0.4;
+}
+.rightclickmenu li.disabled:hover {
+    background-color: transparent;
+    cursor: default;
+}
+
+.rc-keyboard {
+    position: absolute;
+    top: 6px;
+    right: 12px;
+    color: #757575;
+}
+
+.rightclickmenu > ul > li .rc-icon {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    background-image: url(<%= asset_data_uri('context_sprite.png') %>);
+    background-repeat: no-repeat;
+    width: 24px;
+    height: 24px;
+}
+.rightclickmenu .rc-hide .rc-icon {
+    background-position: 0 0;
+}
+.rightclickmenu .rc-remove .rc-icon {
+    background-position: 0 -24px;
+}
+.rightclickmenu .rc-delete .rc-icon {
+    background-position: 0 -48px;
+}
+
+.rightclickmenu .rc-center .rc-icon {
+    background-image: url(<%= asset_data_uri('context_topicview_sprite.png') %>);
+}
+.rightclickmenu .rc-popout .rc-icon {
+    background-position: 0 -72px;
+}
+.rightclickmenu .rc-permission .rc-icon {
+    background-position: 0 -96px;
+}
+.rightclickmenu .rc-metacode .rc-icon {
+    background-position: 0 -120px;
+}
+.rightclickmenu .rc-siblings .rc-icon {
+    background-position: 0 -24px;
+    background-image: url(<%= asset_data_uri('context_topicview_sprite.png') %>);
+}
+.rightclickmenu .expandLi {
+    position: absolute;
+    top: 4px;
+    right: 8px;
+    width: 16px;
+    height: 16px;
+    background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
+    background-repeat: no-repeat;
+    background-position: 0 -32px;
+}
+.rc-metacode li img {
+    display: inline-block;
+}
+.rightclickmenu .rc-permission ul,
+.rightclickmenu .rc-metacode ul,
+.rightclickmenu .rc-siblings ul  {
+    display: none;
+    background: white;
+    top: 0;
+    left: 100%;
+    position: absolute;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.24);
+}
+.rightclickmenu .rc-permission:hover > ul,
+.rightclickmenu .rc-metacode:hover > ul,
+ .rightclickmenu .rc-siblings:hover > ul {
+    display: block;
+}
+.rightclickmenu p {
+    padding: 7px;
+}
+.rightclickmenu li.changeP {
+
+}
+.rightclickmenu li.changeP .rc-perm-icon {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
+    background-size: 72px 48px;
+    background-repeat: no-repeat;
+    width: 24px;
+    height: 24px;
+}
+.rightclickmenu li.toCommons .rc-perm-icon {
+    background-position: 0 0;
+}
+.rightclickmenu li.toPublic .rc-perm-icon {
+    background-position: -48px 0;
+}
+.rightclickmenu li.toPrivate .rc-perm-icon {
+    background-position: -24px 0;
+}
+.rightclickmenu .rc-metacode > ul > li,
+.rightclickmenu .rc-siblings > ul > li {
+    padding: 6px 24px 6px 8px;
+    width: auto;
+    white-space: nowrap;
+}
+.rightclickmenu .rc-metacode ul ul,
+.rightclickmenu .rc-siblings ul ul {
+    display: none;
+    max-height: 270px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.rightclickmenu .rc-metacode li:hover ul,
+.rightclickmenu .rc-siblings li:hover ul {
+    display: block;
+}
+.rightclickmenu .rc-metacode ul ul li,
+.rightclickmenu .rc-siblings ul ul li {
+    padding: 4px 10px 4px 8px;
+    width: auto;
+    white-space: nowrap;
+    height: 24px;
+}
+.rightclickmenu .expandMetacodeSet {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 16px;
+    height: 16px;
+    background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
+    background-repeat: no-repeat;
+    background-position: 0 -32px;
+}
+.rightclickmenu .rc-metacode .mSelectName {
+    padding: 0 16px 0 4px;
+    display: inline-block;
+    position: relative;
+    top: -7px;
+}
+
+.moveMenusUp .rc-metacode ul,
+.moveMenusUp .rc-permission ul,
+.moveMenusUp .rc-siblings ul {
+    top: auto;
+    bottom: 0;
+}
+.moveMenusToLeft .rc-metacode ul,
+.moveMenusToLeft .rc-permission ul,
+.moveMenusToLeft .rc-siblings ul {
+    left: auto;
+    right: 100%;
+}
+
+#loadingSiblings div {
+    width: 15px;
+    margin: 0 auto;
+}
+
+
+/* end right click menu */
+
+/* topic and synapse autocomplete */
+
+#new_topic .tt-suggestion:hover,
+#new_topic .tt-suggestion.tt-cursor,
+#new_synapse .tt-suggestion:hover,
+#new_synapse .tt-suggestion.tt-cursor {
+    background: #E0E0E0;
+}
+#new_topic .tt-suggestion,
+#new_synapse .tt-dataset h3,
+#new_synapse .tt-suggestion {
+    background: #F5F5F5;
+    position: relative;
+}
+#new_topic .tt-suggestion {
+    width: 256px;
+}
+#new_synapse .tt-suggestion {
+    width: 270px;
+}
+#new_topic .autocompleteSection {
+    float: left;
+}
+#new_topic .topicType {
+    padding: 4px 0 0 4px;
+}
+#new_topic .topicTitle {
+    width: 190px;
+    line-height: 14px;
+    font-size: 14px;
+    padding: 9px 0 9px 4px;
+}
+#new_synapse .synapseDesc,
+#new_synapse .genericSynapseDesc {
+    width: 190px;
+    line-height: 14px;
+    font-size: 14px;
+    padding: 9px 0 9px 8px;
+    display: inline-block;
+}
+#new_topic .expandTopicMetadata {
+    display:none;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-repeat: no-repeat;
+    background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
+    background-position: 0 -32px;
+}
+#new_topic .tt-suggestion:hover .expandTopicMetadata,
+#new_topic .tt-suggestion.tt-cursor .expandTopicMetadata {
+    display: block;
+}
+#new_topic .tt-suggestion:hover .topicMetadata,
+#new_topic .tt-suggestion.tt-cursor .topicMetadata {
+    display: block;
+}
+#new_topic .topicMetadata {
+    position: absolute;
+    display: none;
+    top: -18px;
+    right: -100px;
+    width: 100px;
+    height: 70px;
+    background-color: #E0E0E0;
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
+}
+#new_topic .topicPermission {
+    width: 32px;
+    height: 32px;
+    background-repeat: no-repeat;
+    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+}
+#new_topic .topicPermission.commons,
+#new_synapse .synapsePermission.commons {
+    background-position: 0 0;
+}
+#new_topic .topicPermission.public,
+#new_synapse .synapsePermission.public {
+    background-position: -64px 0;
+}
+#new_topic .topicPermission.private,
+#new_synapse .synapsePermission.private {
+    background-position: -32px 0;
+}
+#new_topic .topicNumMaps {
+    height: 14px;
+    padding: 1px 0 1px 32px;
+    background-image: url(<%= asset_data_uri('metamap16.png') %>);
+    background-repeat: no-repeat;
+    background-position: 8px 0;
+    position: absolute;
+    top: 10px;
+}
+#new_topic .topicNumSynapses {
+    height: 14px;
+    padding: 1px 0 1px 32px;
+    background-image: url(<%= asset_data_uri('synapse16.png') %>);
+    background-repeat: no-repeat;
+    background-position: 8px 0;
+    position: absolute;
+    bottom: 10px;
+}
+#new_topic .topicOriginatorIcon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}
+#new_topic .topicOriginatorIcon img {
+    border-radius: 12px;
+}
+#new_topic .topicOriginatorIcon .tooltips {
+    left: 32px;
+    top: -2px;
+    right: auto;
+}
+#new_topic .topicOriginatorIcon .tooltips:after {
+    content: '';
+    position: absolute;
+    top: 57%;
+    left: -4px;
+    margin-top: -6px;
+    width: 0;
+    height: 0;
+    border-right: 4px solid #000000;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+#new_topic .topicOriginatorIcon:hover .tooltips {
+    display:block;
+}
+
+#new_synapse .tt-dropdown-menu {
+    background: #F5F5F5;
+}
+#new_synapse .tt-dropdown-menu h3 {
+    font-size: 14px;
+    line-height: 16px;
+    padding: 8px;
+    border-top: 1px solid #BFBFBF;
+    color: #808080;
+}
+#new_synapse .tt-suggestion .resultnoresult .synapsePermission,
+#new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
+    display: none;
+}
+
+#new_synapse .synapseMetadata {
+    width: 64px;
+    padding-left: 4px;
+    height: 32px;
+    position: absolute;
+    left: 202px;
+    top: 0;
+}
+#new_synapse .synapseOriginatorIcon {
+    position: absolute;
+    top: 4px;
+}
+#new_synapse .synapseOriginatorIcon .tooltips {
+    right: 32px;
+    top: -2px;
+}
+#new_synapse .synapseOriginatorIcon .tooltips:after {
+    content: '';
+    position: absolute;
+    top: 57%;
+    left: 100%;
+    margin-top: -6px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid #000000;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+#new_synapse .synapseOriginatorIcon:hover .tooltips {
+    display:block;
+}
+#new_synapse .synapseOriginatorIcon img {
+    border-radius: 12px;
+}
+#new_synapse .synapsePermission {
+    position: absolute;
+    left: 32px;
+    width: 32px;
+    height: 32px;
+    background-repeat: no-repeat;
+    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
+}
+/* map info box */
+/* map info box */
+
+.wrapper div.mapInfoBox {
+    display: none;
+    position: absolute;
+    bottom: 40px;
+    right: 3px;
+    background-color: #424242;
+    color: #F5F5F5;
+    border-radius: 2px;
+    width: 360px;
+    min-height: 300px;
+    padding: 0;
+    font-style: normal;
+    text-align: center;
+    box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
+}
+.mapInfoName {
+    font-size: 18px;
+    line-height: 20px;
+    padding: 13px 16px;
+    margin: 13px 0;
+    position: relative;
+}
+.mapInfoName textarea {
+    width: 328px;
+    font-size: 18px;
+    line-height: 20px;
+    color: #F5F5F5;
+    font-family: 'din-medium', helvetica, sans-serif;
+    border: 0;
+    outline: none;
+    background: none;
+    text-align: center;
+    resize: none;
+}
+.mapInfoBox.canEdit #mapInfoName:hover {
+    background-image: url(<%= asset_data_uri('edit.png') %>);
+    background-repeat: no-repeat;
+    background-position: bottom right;
+    cursor: text;
+}
+
+.mapInfoStat {
+    background-color: #E0E0E0;
+    font-size: 18px;
+    line-height: 20px;
+    height: 48px;
+    padding: 0;
+    color: #424242;
+}
+.wrapper div.mapInfoName span,
+.wrapper div.mapInfoDesc span {
+    float: none !important;
+    padding-bottom: 10px;
+    word-wrap: break-word;
+}
+.infoStatIcon {
+    float: left;
+    width: 25px;
+    padding: 14px 0px 14px 45px;
+    height: 20px;
+    background-repeat: no-repeat;
+    text-align: left;
+}
+.mapContributors {
+    position: relative;
+    height: 30px;
+    margin: 9px 0px 9px 56px;
+    padding: 0;
+    width: 64px;
+}
+#mapContribs {
+    float: left;
+    border: 2px solid #424242;
+    background-color: #fff;
+    width: 25px;
+    height: 25px;
+    border-radius: 15px;
+    cursor: pointer;
+}
+#mapContribs.multiple.mTwo {
+    box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242;
+}
+#mapContribs.multiple {
+    box-shadow: 1px 1px 0 0 #B5B5B5,3px 2px 0 0 #424242,4px 3px 0 0 #B5B5B5,5px 4px 0 0 #424242;
+}
+.mapContributors span {
+    height: 20px;
+    padding-top: 5px;
+    padding-left: 8px;
+    float: left;
+    cursor: pointer;
+}
+
+
+#mapContribsTip {
+    border: 2px solid #424242;
+    background-color: #fff;
+    width: 25px;
+    height: 25px;
+    border-radius: 15px;
+}
+
+.infoStatIcon .tip {
+    display: none;
+    position: absolute;
+    background: #202020;
+    min-width: 180px;
+    max-width: 250px;
+    text-align: center;
+    color: black;
+    border-radius: 4px;
+    font-size: 15px !important;
+    line-height: 17px;
+    padding: 6px 8px 6px 8px;
+    z-index: 100;
+}
+
+.mapContributors .tip {
+    top: 45px;
+    left: -10px;
+}
+
+.mapContributors .tip ul {
+    max-height: 188px;
+    overflow-y: auto;
+}
+
+.mapContributors .tip li {
+    list-style-type: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 12px 40px;
+    display: block;
+    height: 14px;
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
+    line-height: 14px;
+    position: relative;
+    text-align: left;
+    color: white;
+}
+
+.mapContributors .tip li a {
+    color: white;
+}
+.mapContributors div:after {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: 21px;
+    width: 0;
+    height: 0;
+    border-bottom: 4px solid #202020;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+.mapContributors .tip img {
+    border: 2px solid #bdbdbd;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 14px;
+}
+
+.mapInfoBox .mapPermission .tooltips {
+    top: -20px;
+    right: 36px;
+    width: 155px;
+    white-space: normal;
+    text-align: center;
+}
+.mapInfoBox .mapPermission .tooltips:after {
+    content: '';
+    position: absolute;
+    right: -4px;
+    top: 24px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid black;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+.mapInfoBox.yourMap .mapPermission.hoverForTip:hover .tooltips {
+    display: block;
+}
+
+.mapTopics {
+    background-image: url(<%= asset_data_uri('topic32.png') %>);
+    background-position: 13px center;
+}
+.mapSynapses {
+    background-image: url(<%= asset_data_uri('synapse32padded.png') %>);
+    background-position: 13px center;
+}
+.mapInfoBox .mapPermission {
+    background-position: 0 center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    margin: 8px 30px 8px 10px;
+    position: relative;
+    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
+}
+.mapInfoBox .mapPermission.commons {
+    background-position: 0 0;
+}
+.mapInfoBox .mapPermission.public {
+    background-position: -64px 0;
+}
+.mapInfoBox .mapPermission.private {
+    background-position: -32px 0;
+}
+.yourMap .mapPermission:hover {
+    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
+    cursor: pointer;
+    background-position: -32px 0;
+}
+.yourMap .mapPermission.minimize {
+    background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
+    cursor: pointer;
+    background-position: 0 0;
+}
+.mapInfoBox .mapPermission .permissionSelect {
+    list-style: none;
+    width: 32px;
+    height: 64px;
+    position: relative;
+    top: 32px;
+}
+.mapInfoBox .mapPermission .permissionSelect li {
+    width: 32px;
+    height: 32px;
+    background-repeat: no-repeat;
+    background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
+}
+.mapInfoBox .mapPermission .permissionSelect .commons {
+    background-position: 0 0;
+}
+.mapInfoBox .mapPermission .permissionSelect .public {
+    background-position: -64px 0;
+}
+.mapInfoBox .mapPermission .permissionSelect .private {
+    background-position: -32px 0;
+}
+.mapInfoBox .mapPermission .permissionSelect .commons:hover {
+    background-position: 0 -32px;
+}
+.mapInfoBox .mapPermission .permissionSelect .public:hover {
+    background-position: -64px -32px;
+}
+.mapInfoBox .mapPermission .permissionSelect .private:hover {
+    background-position: -32px -32px;
+}
+.mapInfoBox .mapInfoDesc {
+    font-family: helvetica, sans-serif;
+    color: #E0E0E0;
+    margin: 16px;
+    padding-right: 16px;
+    height: 115px;
+    font-size: 14px;
+    line-height: 16px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-style: italic;
+    text-align: left;
+}
+.mapInfoBox .mapInfoDesc textarea {
+    font-family: helvetica, sans-serif;
+    text-align: left;
+    color: #E0E0E0;
+    font-size: 14px;
+    line-height: 16px;
+    font-style: italic;
+    border: 0;
+    outline: 0;
+    background: none;
+    resize: none;
+    width: 340px;
+}
+.mapInfoBox.canEdit .mapInfoDesc:hover {
+    background-image: url(<%= asset_data_uri('edit.png') %>);
+    background-position: top right;
+    background-repeat: no-repeat;
+    cursor: text;
+}
+
+.mapInfoBox .mapInfoMeta {
+    height: 35px;
+    border-top: 1px solid #F5F5F5;
+    padding: 6px 0 7px 16px;
+    text-align: left;
+    position: relative;
+}
+.mapInfoBox .mapInfoMeta p {
+    margin: 2px 0;
+    font-size: 12px;
+    color: #F5F5F5;
+}
+
+.mapCreatedAt span {
+    color: #4fc059;
+}
+
+.mapEditedAt span {
+    color: #dab539;
+}
+
+.mapInfoButtonsWrapper {
+    position: absolute;
+    top: 0;
+    right: 4px;
+}
+.mapInfoButtonsWrapper > div {
+    float: right;
+    width: 48px;
+    height: 48px;
+    font-size: 12px;
+    text-align: center;
+    position: relative;
+    cursor: pointer;
+    display: none;
+}
+.mapInfoShareIcon {
+    width: 24px;
+    height: 24px;
+    background-image: url(<%= asset_data_uri('share_sprite_mapinfo.png') %>);
+    background-repeat: no-repeat;
+    margin: 4px auto 0;
+    background-position: 0 -24px;
+}
+.mapInfoShare:hover .mapInfoShareIcon {
+    background-position: 0 0;
+}
+/* only display share button if 'public' or 'commons' */
+/* we're currently disabling this, as we're not ready for it
+and it won't be important on password protected instances */
+.shareable .mapInfoShare {
+    display: none;
+}
+.mapInfoDelete {
+    color: #E0E0E0;
+}
+.mapInfoDelete .deleteMap {
+    width: 16px;
+    height: 16px;
+    margin: 8px auto 0;
+    background-image: url(<%= asset_data_uri('remove_mapinfo_sprite.png') %>);
+    background-repeat: no-repeat;
+    background-position: -16px 0;
+}
+.mapInfoDelete:hover {
+    color: #F5F5F5;
+}
+.mapInfoDelete:hover .deleteMap {
+    background-position: 0 0;
+}
+/* only display delete button if it's a map you created */
+.yourMap .mapInfoDelete {
+    display: block;
+}
+.mapInfoButtonsWrapper span {
+    position: absolute;
+    width: 100%;
+    display: block;
+    bottom: 8px;
+}
+
+/* lightboxes */
+
+#lightbox_overlay {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 1000000;
+    display: none;
+}
+#lightbox_main {
+    width: 800px;
+    height: auto;
+    margin: 0 auto;
+    z-index: 2;
+    position: relative;
+    top: 50%;
+    background-color: transparent;
+    color: black;
+}
+#lightbox_screen {
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    position: absolute;
+    background-color: #000;
+    opacity: 0.0;
+    filter: alpha(opacity=0);
+    -moz-opacity: 0.0;
+}
+#lightbox_overlay #lightbox_main #lightbox_header {
+    padding: 6px 5px 1px 0;
+    background-color: #333;
+    font-weight: bold;
+    height: 18px;
+    border: solid 2px #000;
+}
+#lightbox_overlay #lightbox_main a#lightbox_close {
+    background-image: url(<%= asset_data_uri('xlightbox.png') %>);
+    cursor: pointer;
+    height: 32px;
+    outline-style: none;
+    outline-width: medium;
+    overflow: hidden;
+    position: absolute;
+    top: -8px;
+    right: -32px;
+    width: 32px;
+    z-index: 4;
+    border: none;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+#lightbox_content {
+    width: 552px;
+    height: 434px;
+    background-color: #e0e0e0;
+    padding: 64px 124px 64px 124px;
+    box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);
+    border-radius: 2px;
+}
+.lightboxContent h3 {
+/*    font-style: italic;
+    text-transform: uppercase;
+    font-family: 'vinyl';
+    font-size: 30px;
+    line-height: 35px;
+    color: black;*/
+    font-family: 'din-medium';
+    font-size: 24px;
+    text-transform: uppercase;
+    color: #424242;
+    text-align: left;
+    padding: 0 0 0 0;
+}
+.lightboxContent h3.forCreateMap {
+    text-align: left;
+}
+#svi {
+    padding-top: 56px;
+    padding-left: 162px;
+    margin: 0 auto;
+}
+#svi1 {
+    font-family: 'din-medium';
+    font-size: 14px;
+    font-color: #424242;
+    text-transform: uppercase;
+    text-align: left;
+    display: inline-block;
+}
+#svi2 {
+    font-family: 'din-medium';
+    font-size: 14px;
+    font-color: #424242;
+    text-transform: uppercase;
+    text-align: left;
+    display: inline-block;
+}
+
+#svi1 > p, #svi2 > p {
+    width: 150px;
+}
+.lightboxContent {
+    font-family: 'din-regular';
+    font-size: 14px;
+    color: #424242;
+    text-align: left;
+}
+.lightboxContent li {
+    list-style: none;
+}
+.openLightbox {
+    cursor: pointer;
+}
+.lightbox_links a {
+    height: 70px;
+    width: 104px;
+    border-radius: 2px;
+    padding-bottom: 0;
+    font-family: 'din-medium';
+    font-size: 14px;
+    text-transform: uppercase;
+    color: #757575;
+    text-align: center;
+    display: block;
+    cursor: pointer;
+    position:relative;
+
+}
+.lightbox_links a:hover {
+    color: #424242;
+}
+.lightbox_links a:active {
+    color: #00bcd4;
+}
+.lightbox_links .lightboxAboutIcon {
+    background-image: url(<%= asset_data_uri('about_sprite.png') %>);
+    background-repeat: no-repeat;
+    width:32px;
+    height:32px;
+    margin:10px auto;
+}
+#lightbox_metamapps .lightboxAboutIcon {
+    background-position: 0 0;
+}
+#lightbox_community .lightboxAboutIcon {
+    background-position: -32px 0;
+}
+#lightbox_source .lightboxAboutIcon {
+    background-position: -64px 0;
+}
+#lightbox_blog .lightboxAboutIcon {
+    background-position: -96px 0;
+}
+#lightbox_term .lightboxAboutIcon {
+    background-position: -128px 0;
+}
+#lightbox_metamapps:hover .lightboxAboutIcon {
+    background-position: 0 -32px;
+}
+#lightbox_community:hover .lightboxAboutIcon {
+    background-position: -32px -32px;
+}
+#lightbox_source:hover .lightboxAboutIcon {
+    background-position: -64px -32px;
+}
+#lightbox_blog:hover .lightboxAboutIcon {
+    background-position: -96px -32px;
+}
+#lightbox_term:hover .lightboxAboutIcon {
+    background-position: -128px -32px;
+}
+
+/* jquery ui tabs */
+
+.ui-tabs-hide {
+    display: none !important;
+}
+.ui-tabs-vertical {
+
+}
+.ui-tabs-vertical .ui-tabs-nav {
+    float: left;
+    width: 100px;
+    background: none;
+    border: none;
+    font-size: 15px;
+    padding: 0 !important;
+}
+.ui-tabs-vertical .ui-tabs-nav li {
+    clear: left;
+    width: 100%;
+    border: none !important;
+    background: none !important;
+    margin: 0 0 .2em 0 !important;
+    white-space: normal !important;
+}
+.ui-tabs-vertical .ui-tabs-nav li.ui-state-active,
+.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover {
+    border-right: none;
+}
+.ui-tabs-vertical .ui-tabs-nav li a {
+    display: block;
+    width: 100%;
+    padding: 4px 0 !important;
+    outline: none;
+}
+.ui-tabs-vertical .ui-tabs-panel {
+    padding: 0 !important;
+    float: right;
+    width: 388px;
+}
+/* switch metacode set */
+
+#metacodeSwitchTabs {
+    width: 100%;
+    font-size: 17px;
+    line-height: 21px;
+    border: none;
+    background: none;
+    padding: 0;
+}
+#metacodeSwitchTabs .setDesc {
+    margin-bottom: 5px;
+    font-family: 'din-medium', helvetica, sans-serif;
+    color: #424242;
+    font-size: 14px;
+    text-align: justify;
+    padding-right: 16px;
+}
+#switchMetacodes > p {
+    margin: 16px 0 16px 0;
+}
+#metacodeSwitchTabs > ul {
+    width: 130px;
+}
+#metacodeSwitchTabs > ul li {
+    font-size: 14px;
+    text-transform: uppercase;
+}
+#metacodeSwitchTabs li.ui-state-active a {
+    color: #00BCD4;
+    cursor: pointer;
+}
+.metacodeSwitchTab {
+    max-height: 300px;
+    overflow-y: auto;
+    margin-bottom: 16px;
+}
+.customMetacodeList {
+    overflow-y: auto;
+}
+.customMetacodeList,
+.metacodeSetList {
+    height: 301px;
+    margin: 5px 0 15px 0;
+}
+.customMetacodeList ul li {
+    cursor: pointer;
+}
+.customMetacodeList ul li,
+.metacodeSetList ul li {
+    list-style-type: none;
+    display: block;
+    padding: 0px;
+    width: 92px;
+    height: 70px;
+    float: left;
+    text-align: center;
+}
+.customMetacodeList li.toggledOff {
+    opacity: 0.4;
+}
+.customMetacodeList ul img,
+.metacodeSetList ul img {
+    width: 40px;
+    height: 40px;
+    margin: 0 auto;
+}
+.customMetacodeList ul p,
+.metacodeSetList ul p {
+    display: block;
+    margin: 0;
+    background: none;
+    font-size: 14px;
+    line-height: 14px;
+    font-family: 'din-regular', helvetica, sans-serif;
+    color: #424242;
+}
+#metacodeSwitchTabs button.button {
+    width: auto !important;
+    padding: 0 10px;
+    font-weight: normal;
+    float: right;
+}
+/* about, getInvolved, colophon */
+
+#aboutParms {
+    margin: 30px auto;
+    width: 218px;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+#leftAboutParms {
+    text-align: left;
+    float: left;
+    margin-right: 30px;
+}
+#rightAboutParms {
+    text-align: left;
+    float: left;
+}
+
+#colophon {
+    overflow-y: scroll;
+    height:434px;
+}
+#colophonLinks {
+    padding-left:20px;
+}
+
+#colophoneHeader {
+    padding-bottom:12px;
+}
+
+
+#getInvolved a, #donate a {
+    color: #c04f4f;
+    text-decoration: underline;
+}
+#about > p, #getInvolved > p, #invite > p, #colophon p, #donate > p {
+    margin: 0px 0px 10px 0px;
+    line-height: 20px;
+}
+#about ul {
+    list-style: none;
+}
+#about ul li {
+    display: inline-block;
+}
+#colophonSectionIndented {
+    font-family: 'din-medium', helvetica, sans-serif;
+    text-align: left;
+    padding-left:20px;
+}
+
+
+#colophonSection {
+    font-family: 'din-medium', helvetica, sans-serif;
+    text-align: left;
+}
+
+#colophon a {
+    color: #c04f4f;
+    text-decoration: underline;
+}
+
+#colophonCols {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+}
+
+#noIE{
+    border-radius: 2px;
+}
+#noIE p {
+    text-align: center;
+    font-family: din-regular;
+    font-size: 18px;
+    line-height: 18px;
+    color: #424242;
+    padding: 0px;
+    width: 400px;
+    left:195px;
+    position: absolute;
+}
+
+#noIEsubheading{
+    top: 144px;
+
+}
+
+#noIEbody {
+    top:416px;
+}
+
+#noIEbody a {
+    color: #c04f4f;
+    text-decoration: underline;
+}
+
+#noIE h3 {
+    text-align: center;
+    text-transform: uppercase;
+    padding: 0px;
+    margin: 0px;
+}
+
+#chromeIcon, #fireFoxIcon, #safariIcon {
+    position: relative;
+    height: 105px;
+    width: 105px;
+    display: inline-block;
+    margin: 110px 32px 0px 32px;
+    font-family: din-medium;
+    font-size: 24px;
+    line-height: 24px;
+    text-align: center;
+    text-transform: uppercase;
+    padding: 115px 0px 0px 0px;
+    opacity: 0.7;
+}
+#chromeIcon {
+    background: url(<%= asset_data_uri 'browser_icons.png' %>) no-repeat;
+}
+
+#fireFoxIcon {
+    background: url(<%= asset_data_uri 'browser_icons.png' %>) no-repeat -105px 0;
+}
+
+#safariIcon {
+    background: url(<%= asset_data_uri 'browser_icons.png' %>) no-repeat -220px 0;
+}
+
+#chromeIcon:hover{
+    opacity: 1;
+}
+
+#fireFoxIcon:hover{
+    opacity: 1;
+}
+
+#safariIcon:hover{
+    opacity: 1;
+}
+
+/* invite */
+
+.joinCodes {
+    text-align: center;
+    display: block;
+    color: #424242;
+    font-family: 'din-medium', helvetica, sans-serif;
+}
+#joinCodesBox {
+    margin-top: 30px;
+}
+#joinCodesBox button {
+    margin: 16px 198px 0;
+}
+/* new map */
+
+.new_map {
+    color: black;
+}
+.new_map .inputGroup {
+    margin: 15px 0 5px;
+    position: relative;
+}
+
+.new_map .feedback_message {
+    float: right;
+    width: 388px;
+    background: #c04f4f;
+    margin: 5px 1px;
+    padding: 2px 5px;
+    border-radius: 2px;
+    color: #FFF;
+}
+.new_map label {
+    float: left;
+    width: 100px;
+    text-align: left;
+    margin-right: 15px;
+    font-size: 18px;
+    color: #424242;
+    font-family: 'din-regular', helvetica, sans-serif;
+}
+.new_map input[type="text"] {
+    font-family: 'din-medium', helvetica, sans-serif;
+    width: 400px;
+    height: 32px;
+    font-size: 14px;
+    direction: ltr;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0 8px;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    border-radius: 2px;
+    color: #424242;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
+    float: right;
+}
+.new_map input[type="text"]:hover,
+.new_map textarea:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.new_map textarea {
+    color: #424242;
+    padding: 8px;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    resize: none;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    text-align: start;
+    font-family: 'din-medium', helvetica, sans-serif;
+    font-size: 14px;
+    line-height: 17px;
+    width: 400px;
+    box-sizing: border-box;
+    float: right;
+    border-radius: 2px;
+}
+
+.permHelper {
+    position: absolute;
+    width: 128px;
+    top: 36px;
+    color: #424242;
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 12px;
+}
+
+.permIconWrapper {
+    width: 276px;
+    padding: 0 62px;
+    float: right;
+}
+.new_map .permIcon {
+    float: left;
+    width: 92px;
+    height: 102px;
+    position: relative;
+}
+.new_map .mapPermIcon {
+    background-image: url(<%= asset_data_uri('permissions64sprite.png') %>);
+    background-repeat: no-repeat;
+    width:64px;
+    height:64px;
+    margin:10px auto 0;
+    background-position: 0 0;
+}
+.mapPermIcon:hover, .mapPermIcon.selected {
+    background-position: -64px 0;
+}
+#newmap_co {
+    background-position: 0 0;
+}
+#newmap_pu {
+    background-position: -64px 0;
+}
+#newmap_pr {
+    background-position: -128px 0;
+}
+#newmap_co:hover, #newmap_co.selected {
+    background-position: 0 -64px;
+}
+#newmap_pu:hover, #newmap_pu.selected {
+    background-position: -64px -64px;
+}
+#newmap_pr:hover, #newmap_pr.selected {
+    background-position: -128px -64px;
+}
+
+
+.new_map .permIcon h4 {
+    font-style: italic;
+    font-family: 'Vinyl';
+    text-transform: uppercase;
+    font-size: 18px;
+    line-height: 20px;
+    color: #424242 ;
+    text-align: center;
+}
+.new_map .tip {
+    display: none;
+}
+.permText {
+    width: 360px;
+    height: 32px;
+    margin: 16px 20px 0;
+    text-align: center;
+    float: right;
+    color: #424242;
+    font-family: 'din-regular', helvetica, sans-serif;
+    font-size: 14px;
+}
+.buttonWrapper {
+    width: 286px;
+    float:right;
+    margin: 16px 0 0 0;
+}
+.onConsole .new_map button.cancel {
+    margin-right: 20px;
+}
+.onConsole .new_map button,
+.onConsole .new_map input.add {
+    float: left;
+    margin-top: 5px;
+    height: 40px;
+    font-size: 17px;
+    width: auto;
+    padding: 0 30px;
+    cursor: pointer;
+    font-weight: normal;
+}
+.onConsole .new_map button:hover,
+.onConsole .new_map input.add:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+/* Cheatsheet */
+
+#cheatSheet {
+    width: 100%;
+    height: 350px;
+    font-size: 17px;
+    line-height: 21px;
+    border: none;
+    background: none;
+    padding: 0;
+}
+#cheatSheet .sectionTitle {
+    font-weight: bold;
+}
+#cheatSheet .csItem {
+    margin: 5px 0;
+    font-size: 14px;
+    line-height: 18px;
+    font-family: 'din-regular';
+}
+
+#cheatSheet .csItem a {
+    color: #c04f4f;
+}
+
+#cheatSheet .csItem img {
+    display: inline-block;
+    margin-bottom: 10px;
+}
+#cheatSheet .csTitle {
+    font-weight: bold;
+
+
+}
+#cheatSheet .indented {
+    margin-left: 15px;
+}
+
+#zoomIn {
+    background: #424242 url(<%= asset_data_uri('zoom_sprite.png') %>) no-repeat;
+    width: 22px;
+    height: 22px;
+    display: inline-block;
+    background-position: -37px -5px;
+    border-radius: 2px;
+    margin: 0 4px;
+    position: relative;
+    top: 3px;
+}
+
+#zoomOut {
+    background: #424242 url(<%= asset_data_uri('zoom_sprite.png') %>) no-repeat;
+    width: 22px;
+    height: 22px;
+    display: inline-block;
+    background-position: -37px -37px;
+    border-radius: 2px;
+    margin: 0 4px;
+    position: relative;
+    top: 3px;
+}
+
+#centerMap {
+    background: #424242 url(<%= asset_data_uri('extents_sprite.png') %>) no-repeat;
+    width: 22px;
+    height: 22px;
+    display: inline-block;
+    background-position: -5px -5px;
+    border-radius: 2px;
+    margin: 0 4px;
+    position: relative;
+    top: 3px;
+
+}
+
+#helpWrapper {
+    background: none;
+    border: none;
+    border-bottom: 1px solid #BDBDBD;
+    border-radius: 0;
+}
+#helpWrapper li {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0 30px 0 0;
+    border-bottom: 2px solid rgba(0,0,0,0);
+}
+#helpWrapper li:hover, #helpWrapper li.ui-state-active {
+    border-bottom: 2px solid #00BCD4;
+}
+#helpWrapper li.ui-state-active a, #helpWrapper li.ui-state-hover a {
+  color: #424242;
+}
+#helpWrapper li a {
+    padding: 0;
+    font-family: 'din-medium', helvetica, sans-serif;
+    font-size: 14px;
+}
+#quickReference {
+    padding: 32px 0 0 0;
+}
+#quickReference .ui-widget-content {
+  color: #424242;
+}
+#quickReference ul {
+    width: 150px;
+    text-transform: uppercase;
+    font-size: 14px;
+    line-height: 14px;
+    font-family: din-medium;
+
+}
+
+#quickReference ul li {
+    padding-bottom: 16px;
+}
+
+#quickReference li.ui-state-active a {
+    color: #00BCD4;
+}
+#tutorials {
+    padding: 16px 0 0 0;
+}
+.tutorialItem {
+    margin-top: 16px;
+    display: inline-block;
+    font-size: 14px;
+    font-family: 'din-medium', helvetica, sans-serif;
+    cursor: pointer;
+    color: #757575;
+}
+.tutorialItem:hover {
+    color: #424242;
+}
+.tutorialItem.active {
+    color: #00bcd4;
+}
+.tutorialItem.disable {
+    color: #999;
+    cursor: default;
+}
+.tutorialItem.disable:hover {
+    color: #999;
+}
+#upYourSkillz {
+    margin: 0 67px;
+}
+#moreResources {
+    padding: 16px 0 0 0;
+    font-size: 14px;
+    line-height: 18px;
+    color: #424242;
+}
+.resourcesColumn {
+    margin-top: 32px;
+    width: 273px;
+    display: inline-block;
+    text-align: center;
+    text-transform: uppercase;
+}
+.resourcesColumn ul {
+    list-style: none;
+}
+.resourcesColumn li {
+    margin-top: 16px;
+}
+.resourcesColumn a.button {
+    background-color: #00BCD4;
+    color: #FFF;
+    padding-top: 8px;
+    height: 24px;
+}
+.resourcesColumn li a {
+    color: #424242;
+}
+
+/* Admin Pages */
+
+.blackBox {
+    width: 760px;
+    margin: 0 auto;
+    padding: 20px 0 60px 20px;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    overflow: hidden;
+    position: relative;
+}
+.blackBox .metacodeSetsDescription {
+    width: 314px;
+}
+.blackBox td.metacodeSetDesc {
+    width: 314px;
+    word-wrap: break-word;
+}
+.blackBox .metacodeSetImage {
+    width: 36px;
+    height: 36px;
+    float: left;
+}
+.blackBox tr {
+    display: table-row;
+}
+.blackBox tr:nth-child(odd) {
+    background: rgba(0, 0, 0, 0.2);
+}
+.blackBox tr:nth-child(even) {
+    background: rgba(0, 0, 0, 0.3);
+}
+.blackBox th,
+.blackBox td {
+    padding: 10px;
+}
+.blackBox td.iconURL {
+    max-width: 415px;
+    word-wrap: break-word;
+}
+.blackBox td.iconColor {
+
+}
+.blackBox .field {
+    margin: 15px 0 5px;
+}
+.blackBox label {
+    float: left;
+    width: 100px;
+    margin-right: 15px;
+}
+.blackBox input[type="text"] {
+    width: 336px;
+    height: 32px;
+    font-size: 15px;
+    direction: ltr;
+    -webkit-appearance: none;
+    appearance: none;
+    display: inline-block;
+    margin: 0;
+    padding: 0 8px;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 1px;
+    -moz-border-radius: 1px;
+    border-radius: 1px;
+    font: -webkit-small-control;
+    color: initial;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    display: inline-block;
+    text-align: start;
+    font-family: arial;
+}
+.blackBox input[type="text"]:hover,
+.blackBox textarea:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.blackBox textarea {
+    padding: 8px;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    resize: none;
+    font: -webkit-small-control;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 0px;
+    text-shadow: none;
+    text-align: start;
+    font-family: arial;
+    font-size: 15px;
+    line-height: 17px;
+    width: 318px;
+}
+.blackBox .allMetacodes {
+    padding: 5px 0;
+}
+.blackBox a.button {
+    margin-right: 20px;
+    line-height: 40px;
+}
+.blackBox a.button,
+.blackBox input.add {
+    float: left;
+    margin-top: 5px;
+    height: 40px;
+    font-size: 17px;
+    width: auto;
+    padding: 0 30px;
+    cursor: pointer;
+    font-weight: normal;
+}
+.blackBox a.button:hover,
+.blackBox input.add:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+/* request */
+
+#wrapper .requestInvite {
+    width: 700px;
+    margin: 0 auto;
+    padding: 0 0 60px 0;
+    background: #FFFFFF;
+    color: white;
+    height: 100%;
+    overflow: hidden;
+}
+
+.home_bg {
+    display: block;
+    height: 100%;
+}
+
+.templates {
+    display: none;
+}
+
+
+/* collabCompass section */
+.collabCompass {
+    position:fixed;
+    top:50%;
+    left:50%;
+    z-index: 1;
+}
+
+.collabCompass:hover p {
+    display: block;
+}
+.collabCompass p {
+    display: none;
+    background-color: #4fb5c0;
+    color: #FFFFFF;
+    padding: 2px 8px 2px 8px;
+    position: absolute;
+    top: 7px;
+    left:28px;
+    z-index: 1;
+    font-size: 14px;
+    line-height: 14px;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    white-space: nowrap;
+}
+.collabCompass.labelLeft p {
+    left: auto;
+    right: 28px;
+}
+.collabCompass img {
+    border-radius: 16px;
+    border: 2px solid #4fb5c0;
+    z-index: 2;
+    position: relative;
+}
+.compassArrow {
+    display: none;
+    background-repeat: no-repeat;
+    background-image: url(<%= asset_data_uri('compass_arrow.png') %>);
+    width: 48px;
+    height: 32px;
+    position: absolute;
+    top: 0;
+    left: 16px;
+    background-position: 16px 8px;
+    -webkit-transform-origin: left center;
+    transform-origin: left center;
+}
+.blockchain-btn {
+    display: inline;
+    float: right;
+}
+script.data-gratipay-username {
+    display: inline;
+    float: left;
+}
diff --git a/app/assets/stylesheets/base.css.erb b/app/assets/stylesheets/base.css.erb
index 216fa04d..1fc0030b 100644
--- a/app/assets/stylesheets/base.css.erb
+++ b/app/assets/stylesheets/base.css.erb
@@ -1,1129 +1,1129 @@
-.nameCounter {
-  position: absolute;
-  bottom: 1px;
-  right: 2px;
-  font-size: 11px;
-  font-family: helvetica;
-  color: #727272;
-  line-height: 11px;
-}
-
-.nameCounter.forMap {
-  color: #FFF;
-  bottom: -11px;
-}
-
-.nameCounter.forTopic {
-  
-}
-
-
-#center-container {
-  position:relative;
-	height:100%;
-	width:100%;
-  
-  /* background-color:#031924; */
-  color:#444;
-}
-
-.showcard {
-    position:absolute;
-    display:none;
-    top:100px;
-    left:100px;
-    width:300px;
-    background-color:#F5F5F5;
-    text-align: left;
-    overflow: visible;
-	  z-index:2;
-    color: #424242;
-    border-radius:2px;
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-}
-
-.text {
-  margin: 7px;
-}
-
-#infovis {
-  width:100%;
-  height:100%;
-}
-
-.showcard .permission {
-  width:100%;
-  height:100%;
-}
-
-.CardOnGraph {
-  display:block;
-  position:relative;
-  width:100%;
-  min-height:360px;
-  z-index: 25;
-}
-.CardOnGraph.hasAttachment {
-  min-height:0;
-}
-
-.CardOnGraph .title {
-  font-size: 18px;
-  line-height: 22px;
-  display: table;
-  padding: 8px 0 16px;
-  height: 80px;
-  text-align: center;
-  font-family: 'din-regular', sans-serif;
-  width: 300px;
-  position: relative;
-}
-
-.CardOnGraph .titleWrapper {
-  display: table-cell;
-  vertical-align: middle;
-  padding: 0 16px;
-}
-.canEdit #titleActivator:hover {
-  background-image: url(<%= asset_data_uri('edit.png') %>);
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  cursor: text;
-}
-
-.showcard .best_in_place_name textarea, .showcard .best_in_place_name input {
-  font-family: 'din-regular', sans-serif;
-  color: #424242;
-  font-size: 18px;
-  line-height: 22px;
-  height: 15px;
-  padding: 5px 0;
-  width: 100%;
-  margin: 0;
-  border: 0;
-  outline: none;
-  background: none;
-  text-align:center;
-  resize: none;
-}
-
-.CardOnGraph .scroll {
-   display:block;
-   padding: 8px 0 8px 16px;
-   height: 152px;
-   font-size: 13px;
-   line-height:15px;
-   font-family: helvetica, sans-serif;
-   overflow-y: auto;
-}
-.CardOnGraph.hasAttachment .scroll {
-  height: auto;
-}
-
-.CardOnGraph .best_in_place_desc textarea {
-  font-size: 13px;
-  line-height:15px;
-  font-family: helvetica, sans-serif;
-  color: #424242;
-  padding: 0;
-  width: 100%;
-  margin: 0;
-  border: 0;
-  outline: none;
-  font-size: 12px;
-  line-height: 15px;
-  background: none;
-  resize: none;
-}
-
-.CardOnGraph .desc h3 {
-  font-style:normal;
-  margin-top:5px;
-}
-
-.CardOnGraph .best_in_place_desc {
-  display:block;
-  margin-top:2px;	
-  padding-right: 18px;
-  margin-right: 8px;
-}
-.canEdit .CardOnGraph .best_in_place_desc:hover {
-  background-image: url(<%= asset_data_uri('edit.png') %>);
-  background-position: top right;
-  background-repeat: no-repeat;
-  cursor: text;
-}
-
-#edit_synapse .best_in_place_desc {
-  width: auto;
-}
-
-.CardOnGraph .links {
-  position:relative;
-  border-bottom: 1px solid #BDBDBD;
-  border-top: 1px solid #BDBDBD;
-  background-color: #e0e0e0;
-}
-
-.linkItem {
-  float:left;
-  height:46px;
-  z-index: 1;
-  position: relative;
-  color: #424242;
-  font-size: 14px;
-  line-height:14px;
-  height:12px;
-  padding:17px 0;
-}
-.linkItem a {
-  color: #424242;
-}
-
-.CardOnGraph .icon {
-  position:absolute;
-  width:100%;
-  z-index:1;
-  padding: 0;
-  height: 48px;
-}
-.linkItem.contributor {
-  margin-left:40px;
-  z-index:1;
-  padding:17px 16px 17px 30px;
-  position: relative;
-}
-.contributor .contributorIcon {
-  position: absolute;
-  top: 8px;
-  left: 0;
-  border-radius: 16px;
-}
-
-.contributor:hover .contributorName {
-  display: block;
-}
-
-.contributorName {
-  display: none;
-  position: absolute;
-  background: black;
-  text-align: center;
-  color: white;
-  border-radius: 2px;
-  font-family: din-regular;
-  line-height: 15px;
-  font-size: 12px;
-  padding: 3px 5px 2px;
-  white-space: nowrap;
-  margin-top: 36px;
-  margin-left: -32px;
-}
-
-.contributor div:before {
-  content: '';
-  position: absolute;
-  top: 128%;
-  left: 13px;
-  margin-top: -30px;
-  width: 0;
-  height: 0;
-  border-bottom: 4px solid #000000;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-
-.linkItem.mapCount {
-  margin-left: 12px;
-  width: 24px;
-  padding:17px 0 17px 36px;
-}
-.linkItem.mapCount .mapCountIcon {
-  position: absolute;
-  top: 8px;
-  left: 0;
-  width: 32px;
-  height: 32px;
-  background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  cursor: pointer;
-}
-.linkItem.mapCount:hover .mapCountIcon {
-  background-position: 0 -32px;
-}
-
-.linkItem.mapCount:hover .hoverTip {
-  display: block;
-}
-.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
-  top: 44px;
-  left: 0px;
-  font-size: 12px !important;
-}
-
-.hoverTip {
-  white-space: nowrap;
-  font-family: 'din-regular';
-  top: 44px;
-  left: 0px;
-  font-size: 12px !important;
-  display: none;
-  position: absolute;
-  background: black;
-  color: white;
-  border-radius: 4px;
-  line-height: 17px;
-  padding: 3px 5px 2px;
-  z-index: 100;
-}
-
-
-.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip:before {
-  content: '';
-  position: absolute;
-  top: 26px;
-  left: 10px;
-  margin-top: -30px;
-  width: 0;
-  height: 0;
-  border-bottom: 4px solid #000000;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-
-.CardOnGraph .mapCount .tip li {
-  list-style-type: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 6px 10px;
-  display: block;
-  height: 14px;
-  font-family: 'din-regular', helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 14px;
-  position: relative;
-}
-
-.CardOnGraph .mapCount li.hideExtra {
-  display: none;
-}
-
-.showMore {
-  cursor: pointer;
-  color: #4FC059;
-}
-
-.mapCount .tip a {
-  color: white;
-}
-
-.mapCount .tip a:hover {
-  color: #757575;
-}
-
-
-.linkItem.synapseCount {
-  margin-left: 2px;
-  width: 24px;
-  padding:17px 0 17px 32px;
-}
-.linkItem.synapseCount .synapseCountIcon {
-  position: absolute;
-  top: 8px;
-  left: 0;
-  width: 32px;
-  height: 32px;
-  background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
-  background-repeat: no-repeat;
-  background-position: 0 0;
-}
-.linkItem.synapseCount:hover .synapseCountIcon {
-  background-position: 0 -32px;
-}
-
-.CardOnGraph .synapseCount .tip {
-  position: absolute;
-  background: black;
-  width: auto;
-  top: 44px;
-  color: white;
-  white-space: nowrap;
-  border-radius: 2px;
-  font-size: 12px !important;
-  font-family: 'din-regular';
-  line-height: 12px;
-  padding: 4px 4px 4px;
-  z-index: 100;
-}
-
-.CardOnGraph .synapseCount:hover .tip {
-  display: block;
-}
-
-.CardOnGraph .synapseCount .tip:before {
-  content: '';
-  position: absolute;
-  margin-top: -8px;
-  margin-left: 6px;
-  width: 0;
-  height: 0;
-  border-bottom: 4px solid black;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-
-
-.mapPerm {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  min-width: 32px;
-  margin-top: 8px;
-  margin-left: 8px;
-  background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
-  background-position: 0 0;
-}
-.mapPerm.co {
-  background-position: 0 0;
-}
-.mapPerm.pu {
-  background-position: -64px 0;
-}
-.mapPerm.pr {
-  background-position: -32px 0;
-}
-
-.yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
-  background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
-  background-position: -32px 0;
-  cursor:pointer;
-}
-.yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
- background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
-background-position: 0 0;
-cursor: pointer;
-}
-.mapPerm .permissionSelect {
-  list-style: none;
-  width: 32px;
-  height: 64px;
-  position: relative;
-  top: 32px;
-}
-.mapPerm .permissionSelect li {
-  width: 32px;
-  height: 32px;
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
-}
-.mapPerm .permissionSelect .commons {
-  background-position: 0 0;
-}
-.mapPerm .permissionSelect .public {
-  background-position: -64px 0;
-}
-.mapPerm .permissionSelect .private {
-  background-position: -32px 0;
-}
-.mapPerm .permissionSelect .commons:hover {
-  background-position: 0 -32px;
-}
-.mapPerm .permissionSelect .public:hover {
-  background-position: -64px -32px;
-}
-.mapPerm .permissionSelect .private:hover {
-  background-position: -32px -32px;
-}
-
-.CardOnGraph .metacodeTitle {
-  font-style: italic;
-  font-family: 'vinyl';
-  text-transform: uppercase;
-  position: absolute;
-  line-height: 24px;
-  height:24px;
-  font-size: 24px;
-  display: none;
-  width: 90%;
-  padding: 13px 0 9px 10%;
-  background-color: #E0E0E0;
-  color: #424242;
-}
-.permission.canEdit .metacodeTitle {
-  cursor:pointer;
-}
-
-.permission.canEdit .expandMetacodeSelect {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 16px;
-  height: 16px;
-  background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
-  background-repeat: no-repeat;
-  background-position: 0 -32px;
-}
-.permission.canEdit .minimize .expandMetacodeSelect {
-  
-}
-
-.CardOnGraph .metacodeImage {
-  cursor:move;
-  width:46px;
-  height:46px;
-  position:absolute;
-  left:-23px;
-  top:0;
-  background-size:46px 46px;
-  background-position:0 0;
-  background-repeat:no-repeat;
-}
-
-#metacodeOptions {
-  display:none;
-}
-.CardOnGraph .metacodeSelect {
-  display:none;
-  width:auto;
-  z-index: 2;
-  position: absolute;
-  background: #EAEAEA;
-  left: 300px;
-  white-space: nowrap;
-}
-.CardOnGraph .metacodeSelect ul {
-  position: relative; 
-  line-height: 14px;
-  font-size: 14px;
-  font-family: helvetica, sans-serif;
-  display:block;
-  width: 100%;
-  margin:0;
-  padding: 0;
-  list-style:none;
-  border: 1px solid #BDBDBD;
-}
-.CardOnGraph .metacodeSelect ul li {
-    background-color: #F5F5F5;
-    cursor:pointer;
-    position: relative;
-    padding: 9px 24px 9px 12px;
-}
-.CardOnGraph .metacodeSelect ul li:hover {
-background-color: #E0E0E0;
-}
-.CardOnGraph .metacodeSelect ul li img {
-  position: absolute;
-  top: 4px;
-  left: 8px;
-}
-.CardOnGraph .metacodeSelect ul li .mSelectName {
-  margin-left: 28px;
-  margin-right: 4px;
-}
-.CardOnGraph .metacodeSelect ul ul {
-  display:none;
-  position: absolute;
-  left: 100%;
-  top: -1px;
-  max-height: 270px;
-  overflow-y: auto;
-  width: auto;
-}
-.CardOnGraph .metacodeSelect li:hover ul {
-  display: block;
-}
-.CardOnGraph .metacodeSelect .expandMetacodeSet {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 16px;
-  height: 16px;
-  background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
-  background-repeat: no-repeat;
-  background-position: 0 -32px;
-}
-
-/* too close to right side of screen case */
-.onRightEdge.metacodeSelect {
-  right: 1px;
-  left: auto;
-  top: 46px;
-}
-.onRightEdge.metacodeSelect ul ul {
-  left: auto;
-  right: 100%;
-}
-/* too close to bottom of screen case */
-.onBottomEdge.metacodeSelect {
-  bottom: 0;
-}
-.onBottomEdge.metacodeSelect ul ul {
-  top: auto;
-  bottom: 0;
-}
-
-.tip li {
-  list-style-type: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 10px 34px;
-  display: block;
-  height: 14px;
-  font-family: 'din-regular', helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 14px;
-  position: relative;
-}
-
-.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip, #mapContribs:hover .tip {
-  display:block;
-}
-.CardOnGraph .tip, .mapCard .tip {
- display:none;
- position: absolute;
- background: black;
- top: 35px;
- left: 0;
- color: white;
- border-radius: 4px;
- font-size:15px !important;
- line-height:17px;
- padding: 3px 5px 2px;
- z-index:100;
-}
-
-#embedlyLink {
-  display: none;
-}
-#embedlyLinkLoader {
-  margin: 0 auto;
-  width: 28px;
-}
-
-.CardOnGraph .attachments {
-  border-top: 1px solid #BDBDBD;
-  width:100%;
-  height:47px;
-}
-
-.attachments a {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: block;
-  margin-left: 40px; 
-  padding-top:9px;
-  font-size: 16px;
-  line-height: 16px;
-}
-
-#addlink, #addupload {
-  display: inline-block;
-  width: 102px;
-  height: 12px;
-  text-align: left; 
-  padding: 18px 0 18px 48px;
-  font-size: 12px;
-  color: #9e9e9e;
-  cursor: pointer;
-  position: relative;
-}
-
-#addlink:hover, #addupload:hover {
-  color: #616161;
-}
-
-.attachmentIcon {
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 12px;
-  left: 12px;
-}
-#linkIcon {
-  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
-}
-#uploadIcon {
-  background-image: url(<%= asset_data_uri('upload_sprite.png') %>);
-}
-#addlink:hover #linkIcon, #addupload:hover #uploadIcon {
-  background-position: 0 -24px;
-}
-
-.addLink {
-  position: relative;
-}
-#addLinkInput {
-  height: 32px;
-  width: 268px;
-  padding: 8px 16px 8px 16px;
-  position: relative;
-  border: none;
-  line-height: 14px;
-}
-
-#addLinkInput input{
-padding: 9px 7px 9px 31px;
-height: 12px;
-width: 198px;
-margin: 0 0 0 0;
-border: none;
-outline: none;
-font-size: 12px;
-line-height: 12px;
-background: white;
-color: black;
-font-family: 'din-regular', helvetica, sans-serif;
-}
-#addLinkIcon {
-  position: absolute;
-  top: 12px;
-  left: 20px;
-  width: 24px;
-  height: 24px;
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
-  pointer-events: none;
-  z-index: 1;
-}
-
-#addLinkReset {
-  position: absolute;
-  top: 8px;
-  right: 15px;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  float:none;
-  background-image: url(<%= asset_data_uri('remove.png') %>);
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.embeds.nonEmbedlyLink {
-  padding-top: 24px;
-}
-
-#embedlyLink {
-  border-left: 8px solid #CCC;
-  overflow: hidden;
-  padding: 8px;
-  padding-left: 12px;
-  -moz-box-shadow: 1px 1px 5px 0 #ccc;
-  -webkit-box-shadow: 1px 1px 5px 0 #ccc;
-  box-shadow: 1px 1px 5px 0 #ccc;
-  -moz-border-radius-topright: 5px;
-  -webkit-border-top-right-radius: 5px;
-  border-top-right-radius: 5px;
-  -moz-border-radius-bottomright: 8px;
-  -webkit-border-bottom-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-  display: none;
-  margin: 8px;
-}
-
-.linkActions {
-  position: relative;
-}
-
-.CardOnGraph .embeds {
-  position: relative;
-  overflow: hidden;
-}
-
-#linkremove {
-  background-image: url(<%= asset_data_uri 'remove.png' %>);
-  background-repeat: no-repeat;
-  background-position: center center;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 3px;
-  right: 0;
-  cursor: pointer;
-}
-
-.cardSettings {
-  position: absolute;
-  left: 12px;
-  top: 12px;
-}
-
-.editSettings {
-  background: #ddd;
-  border-radius: 10px;
-  padding: 5px 0 5px 5px;
-  position: relative;
-  left: 16px;
-  width: 175px;
-  opacity: 0.98;
-  box-shadow: 4px 4px 5px #888888;
-  border: 1px solid #AAA;
-  z-index: 5;
-}
-
-.editSettings span {
-  display: inline-block;
-}
-
-#edit_synapse {
-  border-radius: 2px;
-  width: 270px;
-  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-}
-
-#editSynUpperBar {
-  background: #FFFFFF url(<%= asset_data_uri('synapse32.png') %>) no-repeat 8px center;
-  min-height: 48px;
-  height: 48px;
-  border-bottom: 1px solid #222222;
-  display: table;
-  width: 100%;
-}
-
-#editSynLowerBar {
-  background-color: #E0E0E0;
-  height: 48px;
-  position: relative;
-}
-
-#synapseCardCount {
-  font-size: 18px;
-  display: table-cell;
-  vertical-align: middle;
-  padding-left: 44px;
-  width: 20px;
-  line-height: 18px;
-}
-
-#edit_synapse_desc {
-  font-size: 14px;
-  font-family: 'din-regular', helvetica, sans-serif;
-  padding: 8px 38px 8px 4px;
-  display: table-cell;
-  vertical-align: middle;
-  line-height: 16px;
-}
-
-.canEdit #edit_synapse_desc:hover {
-  background-image: url(<%= asset_data_uri('edit.png') %>);
-  background-repeat: no-repeat;
-  background-position: 164px center;
-  cursor: text;
-}
-
-#edit_synapse .best_in_place_desc textarea {
-  font-family: 'din-regular', sans-serif;
-  color: #424242;
-  font-size: 14px;
-  line-height: 16px;
-  width: 100%;
-  height: auto;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: none;
-  background: none;
-  resize: none;
-}
-
-#dropdownSynapses {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  top: 12px;
-  right: 8px;
-  background-image: url(<%= asset_data_uri('arrowdown_sprite.png') %>);
-  background-repeat: no-repeat;
-  background-position: 4px -12px;
-}
-#dropdownSynapses:hover {
-  background-position: 4px -28px;
-  cursor: pointer;
-}
-#switchSynapseList {
-  display: none;
-  list-style: none;
-  width: 270px;
-  position: absolute;
-  z-index: 1;
-  background: #FFFFFF;
-  border-bottom: 1px solid #BBBBBB;
-}
-#switchSynapseList li {
-  padding: 8px 8px 8px 68px;
-  cursor: pointer;
-  font-family: 'din-regular';
-  font-size: 14px;
-  line-height: 16px;
-}
-#switchSynapseList li:hover {
-  background: #DAB539;
-}
-
-#edgeUser {
-    display:inline-block;
-    position: relative;
-    margin: 12px 0 0 11px;
-}
-#edgeUser img {
-  border-radius: 12px;
-}
-#edgeUser.hoverForTip:hover .tip {
-  display:block;
-}
-#edgeUser .tip {
-  display: none;
-  position: absolute;
-  background: black;
-  text-align: center;
-  text-transform: none;
-  color: white;
-  border-radius: 2px;
-  font-family: din-regular;
-  line-height: 15px;
-  font-size: 12px;
-  padding: 3px 5px 2px;
-  white-space: nowrap;
-  margin-top: 9px;
-  font-style: normal;
-}
-
-#edgeUser:hover div:before{
-  content: '';
-  position: absolute;
-  margin-top: -7px;
-  margin-left: 2px;
-  width: 0;
-  height: 0;
-  border-bottom: 4px solid #000000;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-
-#edit_synapse .mapPerm {
-  position: absolute;
-  top: 0px;
-  left: 40px;
-}
-
-#edit_synapse_left, #edit_synapse_right {
-  position: absolute;
-  height: 24px;
-  width: 24px;
-  top: 12px;
-  background-repeat: no-repeat;
-}
-#edit_synapse_right {
-  background-image: url(<%= asset_data_uri('synapsedirectionright_sprite.png') %>);
-  right: 16px; 
-}
-#edit_synapse_left {
-  background-image: url(<%= asset_data_uri('synapsedirectionleft_sprite.png') %>);
-  right: 56px; 
-}
-#edit_synapse_left.checked, #edit_synapse_right.checked {
-  background-position: 0 -48px;
-}
-.canEdit #edit_synapse_left, .canEdit #edit_synapse_right {
-  cursor: pointer;
-}
-.canEdit #edit_synapse_left:not(.checked):hover, .canEdit #edit_synapse_right:not(.checked):hover {
- background-position: 0 -24px;
-}
-
-/* Map Cards */
-
-.map {
-    display:inline-block;
-    width:220px;
-	  height:340px;
-    font-size: 12px;
-    text-align: left;
-    overflow: visible;
-    background: #424242;
-    border-radius:2px;
-    margin:16px 16px 16px 19px;
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-}
-
-.mapCard {
-  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox;      /* TWEENER - IE 10 */
-  display: -webkit-flex;     /* NEW - Chrome */
-  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-  -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -moz-box-direction: normal;
-  -ms-flex-direction: column;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  position:relative;
-  width:100%;
-  height:308px;
-  padding: 16px 0;
-  color:#F5F5F5;
-}
-
-.mapCard .title {
-  word-wrap: break-word;
-  font-size:18px;
-  line-height:22px;
-  height: 44px;
-  display:block;
-  padding: 0 16px;
-  text-align: center;
-  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
-  -moz-box-flex: none;         /* OLD - Firefox 19- */
-  -webkit-flex: none;          /* Chrome */
-  -ms-flex: none;              /* IE 10 */
-  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
-  font-family: 'din-regular', sans-serif;
-}
-
-.mapCard .mapScreenshot {
-  width: 188px;
-  height: 126px;
-  padding: 8px 16px;
-}
-.mapCard .mapScreenshot img {
-  width: 188px;
-  height: 126px;
-  border-radius: 2px;
-}
-
-.mapCard .scroll {
-   display:block;
-   -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
-  -moz-box-flex: 1;         /* OLD - Firefox 19- */
-  -webkit-flex: 1;          /* Chrome */
-  -ms-flex: 1;              /* IE 10 */
-  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
-   padding:0 16px 8px;
-   font-family: helvetica, sans-serif;
-   font-style: italic;
-   font-size: 12px;
-   word-wrap: break-word;
-}
-.mCS_no_scrollbar {
-  padding-right: 5px;
-}
-
-.mapCard .mapMetadata {
-  font-family: 'din-regular', sans-serif;
-  font-size: 12px;
-  position:relative;
-  border-top: 1px solid #BDBDBD;
-  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
-  -moz-box-flex: none;         /* OLD - Firefox 19- */
-  -webkit-flex: none;          /* Chrome */
-  -ms-flex: none;              /* IE 10 */
-  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
-}
-
-.mapCard .metadataSection {
-  padding: 8px 16px 0 16px;
-  width: 78px;
-  float: left;
-}
-
-.mapPermission {
-  font-family: 'din-medium', sans-serif;
-}
-.cCountColor {
-  font-family: 'din-medium', sans-serif;
-  color: #DB5D5D;
-}
-.tCountColor {
-  font-family: 'din-medium', sans-serif;
-  color: #4FC059;
-}
-.sCountColor {
-  font-family: 'din-medium', sans-serif;
-  color: #DAB539;
-}
-
-
-/* mapper card */
-
-.mapper {
-    float: left;
-    width:220px;
-    height:340px;
-    font-size: 12px;
-    text-align: left;
-    overflow: visible;
-    background: #E0E0E0;
-    border-radius:2px;
-    margin:16px 16px 16px 19px;
-    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-}
-
-.mapperCard {
-  width:100%;
-  height:308px;
-  padding: 16px 0;
-  color:#424242;
-}
-
-.mapperImage {
-    margin: 16px auto 0;
-    width: 96px;
-}
-.mapperImage img {
-  border-radius: 48px;
-  box-shadow: 0px 3px 3px rgba(0,0,0,0.23);
-}
-
-.mapperName {
-    font-size: 24px;
-    text-align: center;
-    margin-top: 24px;
-    padding: 0 16px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 189px;
-    overflow: hidden;
-}
-
-.mapperInfo {
-    color: #DB5D5D;
-    text-align:center;
-    margin-top: 16px;
-}
-
-.mapperMetadata {
-    background: url(<%= asset_data_uri('profile_card_sprite.png') %>) no-repeat center 0;
-    height: 64px;
-    width: 160px;
-    margin: 16px auto 0;
-}
-.mapperMetadata .metadataSection {
-    width: 32%;
-    display: inline-block;
-    text-align: center;
-}
-.mapperMetadata .metadataSection div {
-    font-size: 16px;
-    color: #424242;
-    margin: 14px 0;
-}
-.mapperMetadata .metadataMaps {
-    color: #DB5D5D;
-}
-.mapperMetadata .metadataTopics {
-    color: #4FC059;
-}
-.mapperMetadata .metadataSynapses {
-    color: #DAB539;
-}
+.nameCounter {
+  position: absolute;
+  bottom: 1px;
+  right: 2px;
+  font-size: 11px;
+  font-family: helvetica;
+  color: #727272;
+  line-height: 11px;
+}
+
+.nameCounter.forMap {
+  color: #FFF;
+  bottom: -11px;
+}
+
+.nameCounter.forTopic {
+  
+}
+
+
+#center-container {
+  position:relative;
+	height:100%;
+	width:100%;
+  
+  /* background-color:#031924; */
+  color:#444;
+}
+
+.showcard {
+    position:absolute;
+    display:none;
+    top:100px;
+    left:100px;
+    width:300px;
+    background-color:#F5F5F5;
+    text-align: left;
+    overflow: visible;
+	  z-index:2;
+    color: #424242;
+    border-radius:2px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+}
+
+.text {
+  margin: 7px;
+}
+
+#infovis {
+  width:100%;
+  height:100%;
+}
+
+.showcard .permission {
+  width:100%;
+  height:100%;
+}
+
+.CardOnGraph {
+  display:block;
+  position:relative;
+  width:100%;
+  min-height:360px;
+  z-index: 25;
+}
+.CardOnGraph.hasAttachment {
+  min-height:0;
+}
+
+.CardOnGraph .title {
+  font-size: 18px;
+  line-height: 22px;
+  display: table;
+  padding: 8px 0 16px;
+  height: 80px;
+  text-align: center;
+  font-family: 'din-regular', sans-serif;
+  width: 300px;
+  position: relative;
+}
+
+.CardOnGraph .titleWrapper {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 0 16px;
+}
+.canEdit #titleActivator:hover {
+  background-image: url(<%= asset_data_uri('edit.png') %>);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  cursor: text;
+}
+
+.showcard .best_in_place_name textarea, .showcard .best_in_place_name input {
+  font-family: 'din-regular', sans-serif;
+  color: #424242;
+  font-size: 18px;
+  line-height: 22px;
+  height: 15px;
+  padding: 5px 0;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  text-align:center;
+  resize: none;
+}
+
+.CardOnGraph .scroll {
+   display:block;
+   padding: 8px 0 8px 16px;
+   height: 152px;
+   font-size: 13px;
+   line-height:15px;
+   font-family: helvetica, sans-serif;
+   overflow-y: auto;
+}
+.CardOnGraph.hasAttachment .scroll {
+  height: auto;
+}
+
+.CardOnGraph .best_in_place_desc textarea {
+  font-size: 13px;
+  line-height:15px;
+  font-family: helvetica, sans-serif;
+  color: #424242;
+  padding: 0;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  outline: none;
+  font-size: 12px;
+  line-height: 15px;
+  background: none;
+  resize: none;
+}
+
+.CardOnGraph .desc h3 {
+  font-style:normal;
+  margin-top:5px;
+}
+
+.CardOnGraph .best_in_place_desc {
+  display:block;
+  margin-top:2px;	
+  padding-right: 18px;
+  margin-right: 8px;
+}
+.canEdit .CardOnGraph .best_in_place_desc:hover {
+  background-image: url(<%= asset_data_uri('edit.png') %>);
+  background-position: top right;
+  background-repeat: no-repeat;
+  cursor: text;
+}
+
+#edit_synapse .best_in_place_desc {
+  width: auto;
+}
+
+.CardOnGraph .links {
+  position:relative;
+  border-bottom: 1px solid #BDBDBD;
+  border-top: 1px solid #BDBDBD;
+  background-color: #e0e0e0;
+}
+
+.linkItem {
+  float:left;
+  height:46px;
+  z-index: 1;
+  position: relative;
+  color: #424242;
+  font-size: 14px;
+  line-height:14px;
+  height:12px;
+  padding:17px 0;
+}
+.linkItem a {
+  color: #424242;
+}
+
+.CardOnGraph .icon {
+  position:absolute;
+  width:100%;
+  z-index:1;
+  padding: 0;
+  height: 48px;
+}
+.linkItem.contributor {
+  margin-left:40px;
+  z-index:1;
+  padding:17px 16px 17px 30px;
+  position: relative;
+}
+.contributor .contributorIcon {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  border-radius: 16px;
+}
+
+.contributor:hover .contributorName {
+  display: block;
+}
+
+.contributorName {
+  display: none;
+  position: absolute;
+  background: black;
+  text-align: center;
+  color: white;
+  border-radius: 2px;
+  font-family: din-regular;
+  line-height: 15px;
+  font-size: 12px;
+  padding: 3px 5px 2px;
+  white-space: nowrap;
+  margin-top: 36px;
+  margin-left: -32px;
+}
+
+.contributor div:before {
+  content: '';
+  position: absolute;
+  top: 128%;
+  left: 13px;
+  margin-top: -30px;
+  width: 0;
+  height: 0;
+  border-bottom: 4px solid #000000;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.linkItem.mapCount {
+  margin-left: 12px;
+  width: 24px;
+  padding:17px 0 17px 36px;
+}
+.linkItem.mapCount .mapCountIcon {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  cursor: pointer;
+}
+.linkItem.mapCount:hover .mapCountIcon {
+  background-position: 0 -32px;
+}
+
+.linkItem.mapCount:hover .hoverTip {
+  display: block;
+}
+.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
+  top: 44px;
+  left: 0px;
+  font-size: 12px !important;
+}
+
+.hoverTip {
+  white-space: nowrap;
+  font-family: 'din-regular';
+  top: 44px;
+  left: 0px;
+  font-size: 12px !important;
+  display: none;
+  position: absolute;
+  background: black;
+  color: white;
+  border-radius: 4px;
+  line-height: 17px;
+  padding: 3px 5px 2px;
+  z-index: 100;
+}
+
+
+.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip:before {
+  content: '';
+  position: absolute;
+  top: 26px;
+  left: 10px;
+  margin-top: -30px;
+  width: 0;
+  height: 0;
+  border-bottom: 4px solid #000000;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.CardOnGraph .mapCount .tip li {
+  list-style-type: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 6px 10px;
+  display: block;
+  height: 14px;
+  font-family: 'din-regular', helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 14px;
+  position: relative;
+}
+
+.CardOnGraph .mapCount li.hideExtra {
+  display: none;
+}
+
+.showMore {
+  cursor: pointer;
+  color: #4FC059;
+}
+
+.mapCount .tip a {
+  color: white;
+}
+
+.mapCount .tip a:hover {
+  color: #757575;
+}
+
+
+.linkItem.synapseCount {
+  margin-left: 2px;
+  width: 24px;
+  padding:17px 0 17px 32px;
+}
+.linkItem.synapseCount .synapseCountIcon {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
+  background-repeat: no-repeat;
+  background-position: 0 0;
+}
+.linkItem.synapseCount:hover .synapseCountIcon {
+  background-position: 0 -32px;
+}
+
+.CardOnGraph .synapseCount .tip {
+  position: absolute;
+  background: black;
+  width: auto;
+  top: 44px;
+  color: white;
+  white-space: nowrap;
+  border-radius: 2px;
+  font-size: 12px !important;
+  font-family: 'din-regular';
+  line-height: 12px;
+  padding: 4px 4px 4px;
+  z-index: 100;
+}
+
+.CardOnGraph .synapseCount:hover .tip {
+  display: block;
+}
+
+.CardOnGraph .synapseCount .tip:before {
+  content: '';
+  position: absolute;
+  margin-top: -8px;
+  margin-left: 6px;
+  width: 0;
+  height: 0;
+  border-bottom: 4px solid black;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+
+.mapPerm {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  min-width: 32px;
+  margin-top: 8px;
+  margin-left: 8px;
+  background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
+  background-position: 0 0;
+}
+.mapPerm.co {
+  background-position: 0 0;
+}
+.mapPerm.pu {
+  background-position: -64px 0;
+}
+.mapPerm.pr {
+  background-position: -32px 0;
+}
+
+.yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
+  background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
+  background-position: -32px 0;
+  cursor:pointer;
+}
+.yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
+ background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
+background-position: 0 0;
+cursor: pointer;
+}
+.mapPerm .permissionSelect {
+  list-style: none;
+  width: 32px;
+  height: 64px;
+  position: relative;
+  top: 32px;
+}
+.mapPerm .permissionSelect li {
+  width: 32px;
+  height: 32px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
+}
+.mapPerm .permissionSelect .commons {
+  background-position: 0 0;
+}
+.mapPerm .permissionSelect .public {
+  background-position: -64px 0;
+}
+.mapPerm .permissionSelect .private {
+  background-position: -32px 0;
+}
+.mapPerm .permissionSelect .commons:hover {
+  background-position: 0 -32px;
+}
+.mapPerm .permissionSelect .public:hover {
+  background-position: -64px -32px;
+}
+.mapPerm .permissionSelect .private:hover {
+  background-position: -32px -32px;
+}
+
+.CardOnGraph .metacodeTitle {
+  font-style: italic;
+  font-family: 'vinyl';
+  text-transform: uppercase;
+  position: absolute;
+  line-height: 24px;
+  height:24px;
+  font-size: 24px;
+  display: none;
+  width: 90%;
+  padding: 13px 0 9px 10%;
+  background-color: #E0E0E0;
+  color: #424242;
+}
+.permission.canEdit .metacodeTitle {
+  cursor:pointer;
+}
+
+.permission.canEdit .expandMetacodeSelect {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 16px;
+  height: 16px;
+  background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
+  background-repeat: no-repeat;
+  background-position: 0 -32px;
+}
+.permission.canEdit .minimize .expandMetacodeSelect {
+  
+}
+
+.CardOnGraph .metacodeImage {
+  cursor:move;
+  width:46px;
+  height:46px;
+  position:absolute;
+  left:-23px;
+  top:0;
+  background-size:46px 46px;
+  background-position:0 0;
+  background-repeat:no-repeat;
+}
+
+#metacodeOptions {
+  display:none;
+}
+.CardOnGraph .metacodeSelect {
+  display:none;
+  width:auto;
+  z-index: 2;
+  position: absolute;
+  background: #EAEAEA;
+  left: 300px;
+  white-space: nowrap;
+}
+.CardOnGraph .metacodeSelect ul {
+  position: relative; 
+  line-height: 14px;
+  font-size: 14px;
+  font-family: helvetica, sans-serif;
+  display:block;
+  width: 100%;
+  margin:0;
+  padding: 0;
+  list-style:none;
+  border: 1px solid #BDBDBD;
+}
+.CardOnGraph .metacodeSelect ul li {
+    background-color: #F5F5F5;
+    cursor:pointer;
+    position: relative;
+    padding: 9px 24px 9px 12px;
+}
+.CardOnGraph .metacodeSelect ul li:hover {
+background-color: #E0E0E0;
+}
+.CardOnGraph .metacodeSelect ul li img {
+  position: absolute;
+  top: 4px;
+  left: 8px;
+}
+.CardOnGraph .metacodeSelect ul li .mSelectName {
+  margin-left: 28px;
+  margin-right: 4px;
+}
+.CardOnGraph .metacodeSelect ul ul {
+  display:none;
+  position: absolute;
+  left: 100%;
+  top: -1px;
+  max-height: 270px;
+  overflow-y: auto;
+  width: auto;
+}
+.CardOnGraph .metacodeSelect li:hover ul {
+  display: block;
+}
+.CardOnGraph .metacodeSelect .expandMetacodeSet {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 16px;
+  height: 16px;
+  background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
+  background-repeat: no-repeat;
+  background-position: 0 -32px;
+}
+
+/* too close to right side of screen case */
+.onRightEdge.metacodeSelect {
+  right: 1px;
+  left: auto;
+  top: 46px;
+}
+.onRightEdge.metacodeSelect ul ul {
+  left: auto;
+  right: 100%;
+}
+/* too close to bottom of screen case */
+.onBottomEdge.metacodeSelect {
+  bottom: 0;
+}
+.onBottomEdge.metacodeSelect ul ul {
+  top: auto;
+  bottom: 0;
+}
+
+.tip li {
+  list-style-type: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 10px 34px;
+  display: block;
+  height: 14px;
+  font-family: 'din-regular', helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 14px;
+  position: relative;
+}
+
+.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip, #mapContribs:hover .tip {
+  display:block;
+}
+.CardOnGraph .tip, .mapCard .tip {
+ display:none;
+ position: absolute;
+ background: black;
+ top: 35px;
+ left: 0;
+ color: white;
+ border-radius: 4px;
+ font-size:15px !important;
+ line-height:17px;
+ padding: 3px 5px 2px;
+ z-index:100;
+}
+
+#embedlyLink {
+  display: none;
+}
+#embedlyLinkLoader {
+  margin: 0 auto;
+  width: 28px;
+}
+
+.CardOnGraph .attachments {
+  border-top: 1px solid #BDBDBD;
+  width:100%;
+  height:47px;
+}
+
+.attachments a {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-left: 40px; 
+  padding-top:9px;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+#addlink, #addupload {
+  display: inline-block;
+  width: 102px;
+  height: 12px;
+  text-align: left; 
+  padding: 18px 0 18px 48px;
+  font-size: 12px;
+  color: #9e9e9e;
+  cursor: pointer;
+  position: relative;
+}
+
+#addlink:hover, #addupload:hover {
+  color: #616161;
+}
+
+.attachmentIcon {
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+#linkIcon {
+  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
+}
+#uploadIcon {
+  background-image: url(<%= asset_data_uri('upload_sprite.png') %>);
+}
+#addlink:hover #linkIcon, #addupload:hover #uploadIcon {
+  background-position: 0 -24px;
+}
+
+.addLink {
+  position: relative;
+}
+#addLinkInput {
+  height: 32px;
+  width: 268px;
+  padding: 8px 16px 8px 16px;
+  position: relative;
+  border: none;
+  line-height: 14px;
+}
+
+#addLinkInput input{
+padding: 9px 7px 9px 31px;
+height: 12px;
+width: 198px;
+margin: 0 0 0 0;
+border: none;
+outline: none;
+font-size: 12px;
+line-height: 12px;
+background: white;
+color: black;
+font-family: 'din-regular', helvetica, sans-serif;
+}
+#addLinkIcon {
+  position: absolute;
+  top: 12px;
+  left: 20px;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-image: url(<%= asset_data_uri('link_sprite.png') %>);
+  pointer-events: none;
+  z-index: 1;
+}
+
+#addLinkReset {
+  position: absolute;
+  top: 8px;
+  right: 15px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  float:none;
+  background-image: url(<%= asset_data_uri('remove.png') %>);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.embeds.nonEmbedlyLink {
+  padding-top: 24px;
+}
+
+#embedlyLink {
+  border-left: 8px solid #CCC;
+  overflow: hidden;
+  padding: 8px;
+  padding-left: 12px;
+  -moz-box-shadow: 1px 1px 5px 0 #ccc;
+  -webkit-box-shadow: 1px 1px 5px 0 #ccc;
+  box-shadow: 1px 1px 5px 0 #ccc;
+  -moz-border-radius-topright: 5px;
+  -webkit-border-top-right-radius: 5px;
+  border-top-right-radius: 5px;
+  -moz-border-radius-bottomright: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  display: none;
+  margin: 8px;
+}
+
+.linkActions {
+  position: relative;
+}
+
+.CardOnGraph .embeds {
+  position: relative;
+  overflow: hidden;
+}
+
+#linkremove {
+  background-image: url(<%= asset_data_uri 'remove.png' %>);
+  background-repeat: no-repeat;
+  background-position: center center;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 3px;
+  right: 0;
+  cursor: pointer;
+}
+
+.cardSettings {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+}
+
+.editSettings {
+  background: #ddd;
+  border-radius: 10px;
+  padding: 5px 0 5px 5px;
+  position: relative;
+  left: 16px;
+  width: 175px;
+  opacity: 0.98;
+  box-shadow: 4px 4px 5px #888888;
+  border: 1px solid #AAA;
+  z-index: 5;
+}
+
+.editSettings span {
+  display: inline-block;
+}
+
+#edit_synapse {
+  border-radius: 2px;
+  width: 270px;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+}
+
+#editSynUpperBar {
+  background: #FFFFFF url(<%= asset_data_uri('synapse32.png') %>) no-repeat 8px center;
+  min-height: 48px;
+  height: 48px;
+  border-bottom: 1px solid #222222;
+  display: table;
+  width: 100%;
+}
+
+#editSynLowerBar {
+  background-color: #E0E0E0;
+  height: 48px;
+  position: relative;
+}
+
+#synapseCardCount {
+  font-size: 18px;
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 44px;
+  width: 20px;
+  line-height: 18px;
+}
+
+#edit_synapse_desc {
+  font-size: 14px;
+  font-family: 'din-regular', helvetica, sans-serif;
+  padding: 8px 38px 8px 4px;
+  display: table-cell;
+  vertical-align: middle;
+  line-height: 16px;
+}
+
+.canEdit #edit_synapse_desc:hover {
+  background-image: url(<%= asset_data_uri('edit.png') %>);
+  background-repeat: no-repeat;
+  background-position: 164px center;
+  cursor: text;
+}
+
+#edit_synapse .best_in_place_desc textarea {
+  font-family: 'din-regular', sans-serif;
+  color: #424242;
+  font-size: 14px;
+  line-height: 16px;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  resize: none;
+}
+
+#dropdownSynapses {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 12px;
+  right: 8px;
+  background-image: url(<%= asset_data_uri('arrowdown_sprite.png') %>);
+  background-repeat: no-repeat;
+  background-position: 4px -12px;
+}
+#dropdownSynapses:hover {
+  background-position: 4px -28px;
+  cursor: pointer;
+}
+#switchSynapseList {
+  display: none;
+  list-style: none;
+  width: 270px;
+  position: absolute;
+  z-index: 1;
+  background: #FFFFFF;
+  border-bottom: 1px solid #BBBBBB;
+}
+#switchSynapseList li {
+  padding: 8px 8px 8px 68px;
+  cursor: pointer;
+  font-family: 'din-regular';
+  font-size: 14px;
+  line-height: 16px;
+}
+#switchSynapseList li:hover {
+  background: #DAB539;
+}
+
+#edgeUser {
+    display:inline-block;
+    position: relative;
+    margin: 12px 0 0 11px;
+}
+#edgeUser img {
+  border-radius: 12px;
+}
+#edgeUser.hoverForTip:hover .tip {
+  display:block;
+}
+#edgeUser .tip {
+  display: none;
+  position: absolute;
+  background: black;
+  text-align: center;
+  text-transform: none;
+  color: white;
+  border-radius: 2px;
+  font-family: din-regular;
+  line-height: 15px;
+  font-size: 12px;
+  padding: 3px 5px 2px;
+  white-space: nowrap;
+  margin-top: 9px;
+  font-style: normal;
+}
+
+#edgeUser:hover div:before{
+  content: '';
+  position: absolute;
+  margin-top: -7px;
+  margin-left: 2px;
+  width: 0;
+  height: 0;
+  border-bottom: 4px solid #000000;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+#edit_synapse .mapPerm {
+  position: absolute;
+  top: 0px;
+  left: 40px;
+}
+
+#edit_synapse_left, #edit_synapse_right {
+  position: absolute;
+  height: 24px;
+  width: 24px;
+  top: 12px;
+  background-repeat: no-repeat;
+}
+#edit_synapse_right {
+  background-image: url(<%= asset_data_uri('synapsedirectionright_sprite.png') %>);
+  right: 16px; 
+}
+#edit_synapse_left {
+  background-image: url(<%= asset_data_uri('synapsedirectionleft_sprite.png') %>);
+  right: 56px; 
+}
+#edit_synapse_left.checked, #edit_synapse_right.checked {
+  background-position: 0 -48px;
+}
+.canEdit #edit_synapse_left, .canEdit #edit_synapse_right {
+  cursor: pointer;
+}
+.canEdit #edit_synapse_left:not(.checked):hover, .canEdit #edit_synapse_right:not(.checked):hover {
+ background-position: 0 -24px;
+}
+
+/* Map Cards */
+
+.map {
+    display:inline-block;
+    width:220px;
+	  height:340px;
+    font-size: 12px;
+    text-align: left;
+    overflow: visible;
+    background: #424242;
+    border-radius:2px;
+    margin:16px 16px 16px 19px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+}
+
+.mapCard {
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -moz-box-direction: normal;
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  position:relative;
+  width:100%;
+  height:308px;
+  padding: 16px 0;
+  color:#F5F5F5;
+}
+
+.mapCard .title {
+  word-wrap: break-word;
+  font-size:18px;
+  line-height:22px;
+  height: 44px;
+  display:block;
+  padding: 0 16px;
+  text-align: center;
+  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: none;         /* OLD - Firefox 19- */
+  -webkit-flex: none;          /* Chrome */
+  -ms-flex: none;              /* IE 10 */
+  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  font-family: 'din-regular', sans-serif;
+}
+
+.mapCard .mapScreenshot {
+  width: 188px;
+  height: 126px;
+  padding: 8px 16px;
+}
+.mapCard .mapScreenshot img {
+  width: 188px;
+  height: 126px;
+  border-radius: 2px;
+}
+
+.mapCard .scroll {
+   display:block;
+   -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: 1;         /* OLD - Firefox 19- */
+  -webkit-flex: 1;          /* Chrome */
+  -ms-flex: 1;              /* IE 10 */
+  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+   padding:0 16px 8px;
+   font-family: helvetica, sans-serif;
+   font-style: italic;
+   font-size: 12px;
+   word-wrap: break-word;
+}
+.mCS_no_scrollbar {
+  padding-right: 5px;
+}
+
+.mapCard .mapMetadata {
+  font-family: 'din-regular', sans-serif;
+  font-size: 12px;
+  position:relative;
+  border-top: 1px solid #BDBDBD;
+  -webkit-box-flex: none;      /* OLD - iOS 6-, Safari 3.1-6 */
+  -moz-box-flex: none;         /* OLD - Firefox 19- */
+  -webkit-flex: none;          /* Chrome */
+  -ms-flex: none;              /* IE 10 */
+  flex: none;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+}
+
+.mapCard .metadataSection {
+  padding: 8px 16px 0 16px;
+  width: 78px;
+  float: left;
+}
+
+.mapPermission {
+  font-family: 'din-medium', sans-serif;
+}
+.cCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #DB5D5D;
+}
+.tCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #4FC059;
+}
+.sCountColor {
+  font-family: 'din-medium', sans-serif;
+  color: #DAB539;
+}
+
+
+/* mapper card */
+
+.mapper {
+    float: left;
+    width:220px;
+    height:340px;
+    font-size: 12px;
+    text-align: left;
+    overflow: visible;
+    background: #E0E0E0;
+    border-radius:2px;
+    margin:16px 16px 16px 19px;
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
+}
+
+.mapperCard {
+  width:100%;
+  height:308px;
+  padding: 16px 0;
+  color:#424242;
+}
+
+.mapperImage {
+    margin: 16px auto 0;
+    width: 96px;
+}
+.mapperImage img {
+  border-radius: 48px;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.23);
+}
+
+.mapperName {
+    font-size: 24px;
+    text-align: center;
+    margin-top: 24px;
+    padding: 0 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 189px;
+    overflow: hidden;
+}
+
+.mapperInfo {
+    color: #DB5D5D;
+    text-align:center;
+    margin-top: 16px;
+}
+
+.mapperMetadata {
+    background: url(<%= asset_data_uri('profile_card_sprite.png') %>) no-repeat center 0;
+    height: 64px;
+    width: 160px;
+    margin: 16px auto 0;
+}
+.mapperMetadata .metadataSection {
+    width: 32%;
+    display: inline-block;
+    text-align: center;
+}
+.mapperMetadata .metadataSection div {
+    font-size: 16px;
+    color: #424242;
+    margin: 14px 0;
+}
+.mapperMetadata .metadataMaps {
+    color: #DB5D5D;
+}
+.mapperMetadata .metadataTopics {
+    color: #4FC059;
+}
+.mapperMetadata .metadataSynapses {
+    color: #DAB539;
+}
diff --git a/app/assets/stylesheets/jquery-ui.css.erb b/app/assets/stylesheets/jquery-ui.css.erb
index 88113a6e..0033d8af 100644
--- a/app/assets/stylesheets/jquery-ui.css.erb
+++ b/app/assets/stylesheets/jquery-ui.css.erb
@@ -1,474 +1,474 @@
-/*! jQuery UI - v1.9.2 - 2012-11-23
-* http://jqueryui.com
-* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
-* Copyright 2012 jQuery Foundation and other contributors; Licensed MIT */
-
-/* Layout helpers
-----------------------------------*/
-.ui-helper-hidden { display: none; }
-.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
-.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
-.ui-helper-clearfix:after { clear: both; }
-.ui-helper-clearfix { zoom: 1; }
-.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
-
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-disabled { cursor: default !important; }
-
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Overlays */
-.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-
-.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: .5em .5em .5em .7em; zoom: 1; }
-.ui-accordion .ui-accordion-icons { padding-left: 2.2em; }
-.ui-accordion .ui-accordion-noicons { padding-left: .7em; }
-.ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; }
-.ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
-.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; zoom: 1; }
-
-.ui-autocomplete {
-	position: absolute;
-	top: 0;
-	left: 0;
-	cursor: default;
-}
-
-/* workarounds */
-* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
-
-.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
-.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; }
-.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
-button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
-.ui-button-icons-only { width: 3.4em; } 
-button.ui-button-icons-only { width: 3.7em; } 
-
-/*button text element */
-.ui-button .ui-button-text { display: block; line-height: 1.4;  }
-.ui-button-text-only .ui-button-text { padding: .4em 1em; }
-.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
-.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
-.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
-.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
-/* no icon support for input elements, provide padding by default */
-input.ui-button { padding: .4em 1em; }
-
-/*button icon element(s) */
-.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
-.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
-.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
-.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
-.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
-
-/*button sets*/
-.ui-buttonset { margin-right: 7px; }
-.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
-
-/* workarounds */
-button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
-
-.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
-.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
-.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
-.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
-.ui-datepicker .ui-datepicker-prev { left:2px; }
-.ui-datepicker .ui-datepicker-next { right:2px; }
-.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
-.ui-datepicker .ui-datepicker-next-hover { right:1px; }
-.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
-.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
-.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
-.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
-.ui-datepicker select.ui-datepicker-month, 
-.ui-datepicker select.ui-datepicker-year { width: 49%;}
-.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
-.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
-.ui-datepicker td { border: 0; padding: 1px; }
-.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
-.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
-.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
-.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
-
-/* with multiple calendars */
-.ui-datepicker.ui-datepicker-multi { width:auto; }
-.ui-datepicker-multi .ui-datepicker-group { float:left; }
-.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
-.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
-.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
-.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
-.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
-.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
-.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
-.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
-
-/* RTL support */
-.ui-datepicker-rtl { direction: rtl; }
-.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
-.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
-.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
-.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
-.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
-.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
-.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
-.ui-datepicker-rtl .ui-datepicker-group { float:right; }
-.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
-.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
-
-/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
-.ui-datepicker-cover {
-    position: absolute; /*must have*/
-    z-index: -1; /*must have*/
-    filter: mask(); /*must have*/
-    top: -4px; /*must have*/
-    left: -4px; /*must have*/
-    width: 200px; /*must have*/
-    height: 200px; /*must have*/
-}
-.ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; width: 300px; overflow: hidden; }
-.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
-.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
-.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
-.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
-.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
-.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
-.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
-.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
-.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
-.ui-draggable .ui-dialog-titlebar { cursor: move; }
-
-.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
-.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
-.ui-menu .ui-menu-topic { margin: 0; padding: 0; zoom: 1; width: 100%; }
-.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
-.ui-menu .ui-menu-topic a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
-.ui-menu .ui-menu-topic a.ui-state-focus,
-.ui-menu .ui-menu-topic a.ui-state-active { font-weight: normal; margin: -1px; }
-
-.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
-.ui-menu .ui-state-disabled a { cursor: default; }
-
-/* icon support */
-.ui-menu-icons { position: relative; }
-.ui-menu-icons .ui-menu-topic a { position: relative; padding-left: 2em; }
-
-/* left-aligned */
-.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
-
-/* right-aligned */
-.ui-menu .ui-menu-icon { position: static; float: right; }
-
-.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
-.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
-.ui-resizable { position: relative;}
-.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
-.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
-.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
-.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
-.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
-.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
-.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
-.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
-.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
-.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
-.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
-
-.ui-slider { position: relative; text-align: left; }
-.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
-.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
-
-.ui-slider-horizontal { height: .8em; }
-.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
-.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
-.ui-slider-horizontal .ui-slider-range-min { left: 0; }
-.ui-slider-horizontal .ui-slider-range-max { right: 0; }
-
-.ui-slider-vertical { width: .8em; height: 100px; }
-.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
-.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
-.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
-.ui-slider-vertical .ui-slider-range-max { top: 0; }
-.ui-spinner { position:relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; }
-.ui-spinner-input { border: none; background: none; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; }
-.ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; }
-.ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* more specificity required here to overide default borders */
-.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } /* vertical centre icon */
-.ui-spinner-up { top: 0; }
-.ui-spinner-down { bottom: 0; }
-
-/* TR overrides */
-.ui-spinner .ui-icon-triangle-1-s {
-	/* need to fix icons sprite */
-	background-position:-65px -16px;
-}
-
-.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
-.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
-.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom: 0; padding: 0; white-space: nowrap; }
-.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
-.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; }
-.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
-.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
-.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
-
-.ui-tooltip {
-	padding: 8px;
-	position: absolute;
-	z-index: 9999;
-	max-width: 300px;
-	-webkit-box-shadow: 0 0 5px #aaa;
-	box-shadow: 0 0 5px #aaa;
-}
-/* Fades and background-images don't work well together in IE6, drop the image */
-* html .ui-tooltip {
-	background-image: none;
-}
-body .ui-tooltip { border-width: 2px; }
-
-/* Component containers
-----------------------------------*/
-.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
-.ui-widget .ui-widget { font-size: 1em; }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
-.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(<%= asset_data_uri('ui-bg_flat_75_ffffff_40x100.png') %>)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
-.ui-widget-content a { color: #222222/*{fcContent}*/; }
-.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(<%= asset_data_uri('images/ui-bg_highlight-soft_75_cccccc_1x100.png') %>)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
-.ui-widget-header a { color: #222222/*{fcHeader}*/; }
-
-/* Interaction states
-----------------------------------*/
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(<%= asset_data_uri('images/ui-bg_glass_75_e6e6e6_1x400.png') %>)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
-.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 0px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(<%= asset_data_uri('images/ui-bg_glass_75_dadada_1x400.png') %>)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
-.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #212121/*{fcHover}*/; text-decoration: none; }
-.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(<%= asset_data_uri('images/ui-bg_glass_65_ffffff_1x400.png') %>)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
-.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }
-
-/* Interaction Cues
-----------------------------------*/
-.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(<%= asset_data_uri('images/ui-bg_glass_55_fbf9ee_1x400.png') %>)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
-.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
-.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(<%= asset_data_uri('images/ui-bg_glass_95_fef1ec_1x400.png') %>)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
-.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }
-.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
-.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
-.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
-.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
-.ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); } /* For IE8 - See #6059 */
-
-/* Icons
-----------------------------------*/
-
-/* states and images */
-.ui-icon { width: 16px; height: 16px; background-image: url(<%= asset_data_uri('images/ui-icons_222222_256x240.png') %>)/*{iconsContent}*/; }
-.ui-widget-content .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_222222_256x240.png') %>)/*{iconsContent}*/; }
-.ui-widget-header .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_222222_256x240.png') %>)/*{iconsHeader}*/; }
-.ui-state-default .ui-icon { background-image: url(<%= asset_data_uri('images/ui-icons_888888_256x240.png') %>)/*{iconsDefault}*/; }
-.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_454545_256x240.png') %>)/*{iconsHover}*/; }
-.ui-state-active .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_454545_256x240.png') %>)/*{iconsActive}*/; }
-.ui-state-highlight .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_2e83ff_256x240.png') %>)/*{iconsHighlight}*/; }
-.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_cd0a0a_256x240.png') %>)/*{iconsError}*/; }
-
-/* positioning */
-.ui-icon-carat-1-n { background-position: 0 0; }
-.ui-icon-carat-1-ne { background-position: -16px 0; }
-.ui-icon-carat-1-e { background-position: -32px 0; }
-.ui-icon-carat-1-se { background-position: -48px 0; }
-.ui-icon-carat-1-s { background-position: -64px 0; }
-.ui-icon-carat-1-sw { background-position: -80px 0; }
-.ui-icon-carat-1-w { background-position: -96px 0; }
-.ui-icon-carat-1-nw { background-position: -112px 0; }
-.ui-icon-carat-2-n-s { background-position: -128px 0; }
-.ui-icon-carat-2-e-w { background-position: -144px 0; }
-.ui-icon-triangle-1-n { background-position: 0 -16px; }
-.ui-icon-triangle-1-ne { background-position: -16px -16px; }
-.ui-icon-triangle-1-e { background-position: -32px -16px; }
-.ui-icon-triangle-1-se { background-position: -48px -16px; }
-.ui-icon-triangle-1-s { background-position: -64px -16px; }
-.ui-icon-triangle-1-sw { background-position: -80px -16px; }
-.ui-icon-triangle-1-w { background-position: -96px -16px; }
-.ui-icon-triangle-1-nw { background-position: -112px -16px; }
-.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
-.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
-.ui-icon-arrow-1-n { background-position: 0 -32px; }
-.ui-icon-arrow-1-ne { background-position: -16px -32px; }
-.ui-icon-arrow-1-e { background-position: -32px -32px; }
-.ui-icon-arrow-1-se { background-position: -48px -32px; }
-.ui-icon-arrow-1-s { background-position: -64px -32px; }
-.ui-icon-arrow-1-sw { background-position: -80px -32px; }
-.ui-icon-arrow-1-w { background-position: -96px -32px; }
-.ui-icon-arrow-1-nw { background-position: -112px -32px; }
-.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
-.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
-.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
-.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
-.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
-.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
-.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
-.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
-.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
-.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
-.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
-.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
-.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
-.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
-.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
-.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
-.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
-.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
-.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
-.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
-.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
-.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
-.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
-.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
-.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
-.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
-.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
-.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
-.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
-.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
-.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
-.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
-.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
-.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
-.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
-.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
-.ui-icon-arrow-4 { background-position: 0 -80px; }
-.ui-icon-arrow-4-diag { background-position: -16px -80px; }
-.ui-icon-extlink { background-position: -32px -80px; }
-.ui-icon-newwin { background-position: -48px -80px; }
-.ui-icon-refresh { background-position: -64px -80px; }
-.ui-icon-shuffle { background-position: -80px -80px; }
-.ui-icon-transfer-e-w { background-position: -96px -80px; }
-.ui-icon-transferthick-e-w { background-position: -112px -80px; }
-.ui-icon-folder-collapsed { background-position: 0 -96px; }
-.ui-icon-folder-open { background-position: -16px -96px; }
-.ui-icon-document { background-position: -32px -96px; }
-.ui-icon-document-b { background-position: -48px -96px; }
-.ui-icon-note { background-position: -64px -96px; }
-.ui-icon-mail-closed { background-position: -80px -96px; }
-.ui-icon-mail-open { background-position: -96px -96px; }
-.ui-icon-suitcase { background-position: -112px -96px; }
-.ui-icon-comment { background-position: -128px -96px; }
-.ui-icon-person { background-position: -144px -96px; }
-.ui-icon-print { background-position: -160px -96px; }
-.ui-icon-trash { background-position: -176px -96px; }
-.ui-icon-locked { background-position: -192px -96px; }
-.ui-icon-unlocked { background-position: -208px -96px; }
-.ui-icon-bookmark { background-position: -224px -96px; }
-.ui-icon-tag { background-position: -240px -96px; }
-.ui-icon-home { background-position: 0 -112px; }
-.ui-icon-flag { background-position: -16px -112px; }
-.ui-icon-calendar { background-position: -32px -112px; }
-.ui-icon-cart { background-position: -48px -112px; }
-.ui-icon-pencil { background-position: -64px -112px; }
-.ui-icon-clock { background-position: -80px -112px; }
-.ui-icon-disk { background-position: -96px -112px; }
-.ui-icon-calculator { background-position: -112px -112px; }
-.ui-icon-zoomin { background-position: -128px -112px; }
-.ui-icon-zoomout { background-position: -144px -112px; }
-.ui-icon-search { background-position: -160px -112px; }
-.ui-icon-wrench { background-position: -176px -112px; }
-.ui-icon-gear { background-position: -192px -112px; }
-.ui-icon-heart { background-position: -208px -112px; }
-.ui-icon-star { background-position: -224px -112px; }
-.ui-icon-link { background-position: -240px -112px; }
-.ui-icon-cancel { background-position: 0 -128px; }
-.ui-icon-plus { background-position: -16px -128px; }
-.ui-icon-plusthick { background-position: -32px -128px; }
-.ui-icon-minus { background-position: -48px -128px; }
-.ui-icon-minusthick { background-position: -64px -128px; }
-.ui-icon-close { background-position: -80px -128px; }
-.ui-icon-closethick { background-position: -96px -128px; }
-.ui-icon-key { background-position: -112px -128px; }
-.ui-icon-lightbulb { background-position: -128px -128px; }
-.ui-icon-scissors { background-position: -144px -128px; }
-.ui-icon-clipboard { background-position: -160px -128px; }
-.ui-icon-copy { background-position: -176px -128px; }
-.ui-icon-contact { background-position: -192px -128px; }
-.ui-icon-image { background-position: -208px -128px; }
-.ui-icon-video { background-position: -224px -128px; }
-.ui-icon-script { background-position: -240px -128px; }
-.ui-icon-alert { background-position: 0 -144px; }
-.ui-icon-info { background-position: -16px -144px; }
-.ui-icon-notice { background-position: -32px -144px; }
-.ui-icon-help { background-position: -48px -144px; }
-.ui-icon-check { background-position: -64px -144px; }
-.ui-icon-bullet { background-position: -80px -144px; }
-.ui-icon-radio-on { background-position: -96px -144px; }
-.ui-icon-radio-off { background-position: -112px -144px; }
-.ui-icon-pin-w { background-position: -128px -144px; }
-.ui-icon-pin-s { background-position: -144px -144px; }
-.ui-icon-play { background-position: 0 -160px; }
-.ui-icon-pause { background-position: -16px -160px; }
-.ui-icon-seek-next { background-position: -32px -160px; }
-.ui-icon-seek-prev { background-position: -48px -160px; }
-.ui-icon-seek-end { background-position: -64px -160px; }
-.ui-icon-seek-start { background-position: -80px -160px; }
-/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
-.ui-icon-seek-first { background-position: -80px -160px; }
-.ui-icon-stop { background-position: -96px -160px; }
-.ui-icon-eject { background-position: -112px -160px; }
-.ui-icon-volume-off { background-position: -128px -160px; }
-.ui-icon-volume-on { background-position: -144px -160px; }
-.ui-icon-power { background-position: 0 -176px; }
-.ui-icon-signal-diag { background-position: -16px -176px; }
-.ui-icon-signal { background-position: -32px -176px; }
-.ui-icon-battery-0 { background-position: -48px -176px; }
-.ui-icon-battery-1 { background-position: -64px -176px; }
-.ui-icon-battery-2 { background-position: -80px -176px; }
-.ui-icon-battery-3 { background-position: -96px -176px; }
-.ui-icon-circle-plus { background-position: 0 -192px; }
-.ui-icon-circle-minus { background-position: -16px -192px; }
-.ui-icon-circle-close { background-position: -32px -192px; }
-.ui-icon-circle-triangle-e { background-position: -48px -192px; }
-.ui-icon-circle-triangle-s { background-position: -64px -192px; }
-.ui-icon-circle-triangle-w { background-position: -80px -192px; }
-.ui-icon-circle-triangle-n { background-position: -96px -192px; }
-.ui-icon-circle-arrow-e { background-position: -112px -192px; }
-.ui-icon-circle-arrow-s { background-position: -128px -192px; }
-.ui-icon-circle-arrow-w { background-position: -144px -192px; }
-.ui-icon-circle-arrow-n { background-position: -160px -192px; }
-.ui-icon-circle-zoomin { background-position: -176px -192px; }
-.ui-icon-circle-zoomout { background-position: -192px -192px; }
-.ui-icon-circle-check { background-position: -208px -192px; }
-.ui-icon-circlesmall-plus { background-position: 0 -208px; }
-.ui-icon-circlesmall-minus { background-position: -16px -208px; }
-.ui-icon-circlesmall-close { background-position: -32px -208px; }
-.ui-icon-squaresmall-plus { background-position: -48px -208px; }
-.ui-icon-squaresmall-minus { background-position: -64px -208px; }
-.ui-icon-squaresmall-close { background-position: -80px -208px; }
-.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
-.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
-.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
-.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
-.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
-.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
-
-
-/* Misc visuals
-----------------------------------*/
-
-/* Corner radius */
-.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
-.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
-.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
-.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }
-
-/* Overlays */
-.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(<%= asset_data_uri('images/ui-bg_flat_0_aaaaaa_40x100.png') %>)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
-.ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(images/<%= asset_data_uri('ui-bg_flat_0_aaaaaa_40x100.png') %>)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; }
+/*! jQuery UI - v1.9.2 - 2012-11-23
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
+* Copyright 2012 jQuery Foundation and other contributors; Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
+.ui-helper-clearfix:after { clear: both; }
+.ui-helper-clearfix { zoom: 1; }
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: .5em .5em .5em .7em; zoom: 1; }
+.ui-accordion .ui-accordion-icons { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-noicons { padding-left: .7em; }
+.ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; }
+.ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
+.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; zoom: 1; }
+
+.ui-autocomplete {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: default;
+}
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
+.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; }
+.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
+button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
+.ui-button-icons-only { width: 3.4em; } 
+button.ui-button-icons-only { width: 3.7em; } 
+
+/*button text element */
+.ui-button .ui-button-text { display: block; line-height: 1.4;  }
+.ui-button-text-only .ui-button-text { padding: .4em 1em; }
+.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
+.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
+.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
+.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
+/* no icon support for input elements, provide padding by default */
+input.ui-button { padding: .4em 1em; }
+
+/*button icon element(s) */
+.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
+.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
+.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
+.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
+
+/*button sets*/
+.ui-buttonset { margin-right: 7px; }
+.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
+
+/* workarounds */
+button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
+
+.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
+.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
+.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
+.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
+.ui-datepicker .ui-datepicker-prev { left:2px; }
+.ui-datepicker .ui-datepicker-next { right:2px; }
+.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
+.ui-datepicker .ui-datepicker-next-hover { right:1px; }
+.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
+.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
+.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
+.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
+.ui-datepicker select.ui-datepicker-month, 
+.ui-datepicker select.ui-datepicker-year { width: 49%;}
+.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
+.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
+.ui-datepicker td { border: 0; padding: 1px; }
+.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
+.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
+.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi { width:auto; }
+.ui-datepicker-multi .ui-datepicker-group { float:left; }
+.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
+.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
+.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
+.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
+.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
+.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
+
+/* RTL support */
+.ui-datepicker-rtl { direction: rtl; }
+.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
+.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group { float:right; }
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
+
+/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
+.ui-datepicker-cover {
+    position: absolute; /*must have*/
+    z-index: -1; /*must have*/
+    filter: mask(); /*must have*/
+    top: -4px; /*must have*/
+    left: -4px; /*must have*/
+    width: 200px; /*must have*/
+    height: 200px; /*must have*/
+}
+.ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; width: 300px; overflow: hidden; }
+.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
+.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
+.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
+.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
+.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
+.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
+.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
+.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
+.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
+.ui-draggable .ui-dialog-titlebar { cursor: move; }
+
+.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
+.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
+.ui-menu .ui-menu-topic { margin: 0; padding: 0; zoom: 1; width: 100%; }
+.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
+.ui-menu .ui-menu-topic a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
+.ui-menu .ui-menu-topic a.ui-state-focus,
+.ui-menu .ui-menu-topic a.ui-state-active { font-weight: normal; margin: -1px; }
+
+.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
+.ui-menu .ui-state-disabled a { cursor: default; }
+
+/* icon support */
+.ui-menu-icons { position: relative; }
+.ui-menu-icons .ui-menu-topic a { position: relative; padding-left: 2em; }
+
+/* left-aligned */
+.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
+
+/* right-aligned */
+.ui-menu .ui-menu-icon { position: static; float: right; }
+
+.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
+.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
+.ui-resizable { position: relative;}
+.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
+.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
+.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
+.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
+.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
+.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
+.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
+.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
+.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
+.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
+.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
+
+.ui-slider { position: relative; text-align: left; }
+.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
+.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
+
+.ui-slider-horizontal { height: .8em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+.ui-slider-horizontal .ui-slider-range-min { left: 0; }
+.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+
+.ui-slider-vertical { width: .8em; height: 100px; }
+.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
+.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
+.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
+.ui-slider-vertical .ui-slider-range-max { top: 0; }
+.ui-spinner { position:relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; }
+.ui-spinner-input { border: none; background: none; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; }
+.ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; }
+.ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* more specificity required here to overide default borders */
+.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } /* vertical centre icon */
+.ui-spinner-up { top: 0; }
+.ui-spinner-down { bottom: 0; }
+
+/* TR overrides */
+.ui-spinner .ui-icon-triangle-1-s {
+	/* need to fix icons sprite */
+	background-position:-65px -16px;
+}
+
+.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
+.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom: 0; padding: 0; white-space: nowrap; }
+.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
+.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
+
+.ui-tooltip {
+	padding: 8px;
+	position: absolute;
+	z-index: 9999;
+	max-width: 300px;
+	-webkit-box-shadow: 0 0 5px #aaa;
+	box-shadow: 0 0 5px #aaa;
+}
+/* Fades and background-images don't work well together in IE6, drop the image */
+* html .ui-tooltip {
+	background-image: none;
+}
+body .ui-tooltip { border-width: 2px; }
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
+.ui-widget .ui-widget { font-size: 1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(<%= asset_data_uri('ui-bg_flat_75_ffffff_40x100.png') %>)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
+.ui-widget-content a { color: #222222/*{fcContent}*/; }
+.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(<%= asset_data_uri('images/ui-bg_highlight-soft_75_cccccc_1x100.png') %>)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
+.ui-widget-header a { color: #222222/*{fcHeader}*/; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(<%= asset_data_uri('images/ui-bg_glass_75_e6e6e6_1x400.png') %>)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 0px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(<%= asset_data_uri('images/ui-bg_glass_75_dadada_1x400.png') %>)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
+.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #212121/*{fcHover}*/; text-decoration: none; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(<%= asset_data_uri('images/ui-bg_glass_65_ffffff_1x400.png') %>)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(<%= asset_data_uri('images/ui-bg_glass_55_fbf9ee_1x400.png') %>)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(<%= asset_data_uri('images/ui-bg_glass_95_fef1ec_1x400.png') %>)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+.ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); } /* For IE8 - See #6059 */
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image: url(<%= asset_data_uri('images/ui-icons_222222_256x240.png') %>)/*{iconsContent}*/; }
+.ui-widget-content .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_222222_256x240.png') %>)/*{iconsContent}*/; }
+.ui-widget-header .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_222222_256x240.png') %>)/*{iconsHeader}*/; }
+.ui-state-default .ui-icon { background-image: url(<%= asset_data_uri('images/ui-icons_888888_256x240.png') %>)/*{iconsDefault}*/; }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_454545_256x240.png') %>)/*{iconsHover}*/; }
+.ui-state-active .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_454545_256x240.png') %>)/*{iconsActive}*/; }
+.ui-state-highlight .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_2e83ff_256x240.png') %>)/*{iconsHighlight}*/; }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(<%= asset_data_uri('images/ui-icons_cd0a0a_256x240.png') %>)/*{iconsError}*/; }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }
+
+/* Overlays */
+.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(<%= asset_data_uri('images/ui-bg_flat_0_aaaaaa_40x100.png') %>)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
+.ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(images/<%= asset_data_uri('ui-bg_flat_0_aaaaaa_40x100.png') %>)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; }
diff --git a/app/assets/stylesheets/jquery.mCustomScrollbar.css.erb b/app/assets/stylesheets/jquery.mCustomScrollbar.css.erb
index e8588f35..f9266519 100644
--- a/app/assets/stylesheets/jquery.mCustomScrollbar.css.erb
+++ b/app/assets/stylesheets/jquery.mCustomScrollbar.css.erb
@@ -1,473 +1,473 @@
-/* basic scrollbar styling */
-/* vertical scrollbar */
-.mCSB_container{
-	width:auto;
-	margin-right:30px;
-	overflow:hidden;
-}
-.mCSB_container.mCS_no_scrollbar{
-	margin-right:0;
-}
-.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
-.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
-	margin-right:30px;
-}
-.mCustomScrollBox>.mCSB_scrollTools{
-	width:16px;
-	height:100%;
-	top:0;
-	right:0;
-}
-.mCSB_scrollTools .mCSB_draggerContainer{
-	position:absolute;
-	top:0;
-	left:0;
-	bottom:0;
-	right:0; 
-	height:auto;
-}
-.mCSB_scrollTools a+.mCSB_draggerContainer{
-	margin:20px 0;
-}
-.mCSB_scrollTools .mCSB_draggerRail{
-	width:2px;
-	height:100%;
-	margin:0 auto;
-	-webkit-border-radius:10px;
-	-moz-border-radius:10px;
-	border-radius:10px;
-}
-.mCSB_scrollTools .mCSB_dragger{
-	cursor:pointer;
-	width:100%;
-	height:30px;
-}
-.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:4px;
-	height:100%;
-	margin:0 auto;
-	-webkit-border-radius:10px;
-	-moz-border-radius:10px;
-	border-radius:10px;
-	text-align:center;
-}
-.mCSB_scrollTools .mCSB_buttonUp,
-.mCSB_scrollTools .mCSB_buttonDown{
-	display:block;
-	position:relative;
-	height:20px;
-	overflow:hidden;
-	margin:0 auto;
-	cursor:pointer;
-}
-.mCSB_scrollTools .mCSB_buttonDown{
-	top:100%;
-	margin-top:-40px;
-}
-/* horizontal scrollbar */
-.mCSB_horizontal>.mCSB_container{
-	height:auto;
-	margin-right:0;
-	margin-bottom:30px;
-	overflow:hidden;
-}
-.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
-	margin-bottom:0;
-}
-.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
-.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
-	margin-right:0;
-	margin-bottom:30px;
-}
-.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
-	width:100%;
-	height:16px;
-	top:auto;
-	right:auto;
-	bottom:0;
-	left:0;
-	overflow:hidden;
-}
-.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
-	margin:0 20px;
-}
-.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
-	width:100%;
-	height:2px;
-	margin:7px 0;
-	-webkit-border-radius:10px;
-	-moz-border-radius:10px;
-	border-radius:10px;
-}
-.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
-	width:30px;
-	height:100%;
-}
-.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:100%;
-	height:4px;
-	margin:6px auto;
-	-webkit-border-radius:10px;
-	-moz-border-radius:10px;
-	border-radius:10px;
-}
-.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
-.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
-	display:block;
-	position:relative;
-	width:20px;
-	height:100%;
-	overflow:hidden;
-	margin:0 auto;
-	cursor:pointer;
-	float:left;
-}
-.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
-	margin-left:-40px;
-	float:right;
-}
-.mCustomScrollBox{
-	-ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
-}
-
-/* default scrollbar colors and backgrounds (default theme) */
-.mCustomScrollBox>.mCSB_scrollTools{
-	opacity:0.75;
-	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
-}
-.mCustomScrollBox:hover>.mCSB_scrollTools{
-	opacity:1;
-	filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
-}
-.mCSB_scrollTools .mCSB_draggerRail{
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.4);
-	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
-}
-.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	background:#fff; /* rgba fallback */
-	background:rgba(255,255,255,0.75);
-	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
-}
-.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
-	background:rgba(255,255,255,0.85);
-	filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
-}
-.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
-.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-	background:rgba(255,255,255,0.9);
-	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
-}
-.mCSB_scrollTools .mCSB_buttonUp,
-.mCSB_scrollTools .mCSB_buttonDown,
-.mCSB_scrollTools .mCSB_buttonLeft,
-.mCSB_scrollTools .mCSB_buttonRight{
-	background-repeat:no-repeat;
-	opacity:0.4;
-	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
-}
-.mCSB_scrollTools .mCSB_buttonUp{
-	background-position:0 0;
-	/* 
-	sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
-	*/
-}
-.mCSB_scrollTools .mCSB_buttonDown{
-	background-position:0 -20px;
-	/* 
-	sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) 
-	*/
-}
-.mCSB_scrollTools .mCSB_buttonLeft{
-	background-position:0 -40px;
-	/* 
-	sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) 
-	*/
-}
-.mCSB_scrollTools .mCSB_buttonRight{
-	background-position:0 -56px;
-	/* 
-	sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) 
-	*/
-}
-.mCSB_scrollTools .mCSB_buttonUp:hover,
-.mCSB_scrollTools .mCSB_buttonDown:hover,
-.mCSB_scrollTools .mCSB_buttonLeft:hover,
-.mCSB_scrollTools .mCSB_buttonRight:hover{
-	opacity:0.75;
-	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
-}
-.mCSB_scrollTools .mCSB_buttonUp:active,
-.mCSB_scrollTools .mCSB_buttonDown:active,
-.mCSB_scrollTools .mCSB_buttonLeft:active,
-.mCSB_scrollTools .mCSB_buttonRight:active{
-	opacity:0.9;
-	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
-}
-
-/*scrollbar themes*/
-/*dark (dark colored scrollbar)*/
-.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.15);
-}
-.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.75);
-}
-.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.85);
-}
-.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
-.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.9);
-}
-.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
-	background-position:-80px 0;
-}
-.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
-	background-position:-80px -20px;
-}
-.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
-	background-position:-80px -40px;
-}
-.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
-	background-position:-80px -56px;
-}
-/*light-2*/
-.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
-	width:4px;
-	background:#fff; /* rgba fallback */
-	background:rgba(255,255,255,0.1);
-	-webkit-border-radius:1px;
-	-moz-border-radius:1px;
-	border-radius:1px;
-}
-.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:4px;
-	background:#fff; /* rgba fallback */
-	background:rgba(255,255,255,0.75);
-	-webkit-border-radius:1px;
-	-moz-border-radius:1px;
-	border-radius:1px;
-}
-.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
-	width:100%;
-	height:4px;
-	margin:6px 0;
-}
-.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:100%;
-	height:4px;
-	margin:6px auto;
-}
-.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
-	background:rgba(255,255,255,0.85);
-}
-.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
-.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-	background:rgba(255,255,255,0.9);
-}
-.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
-	background-position:-32px 0;
-}
-.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
-	background-position:-32px -20px;
-}
-.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
-	background-position:-40px -40px;
-}
-.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
-	background-position:-40px -56px;
-}
-/*dark-2*/
-.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
-	width:4px;
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.1);
-	-webkit-border-radius:1px;
-	-moz-border-radius:1px;
-	border-radius:1px;
-}
-.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:4px;
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.75);
-	-webkit-border-radius:1px;
-	-moz-border-radius:1px;
-	border-radius:1px;
-}
-.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
-	width:100%;
-	height:4px;
-	margin:6px 0;
-}
-.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:100%;
-	height:4px;
-	margin:6px auto;
-}
-.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.85);
-}
-.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
-.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.9);
-}
-.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
-	background-position:-112px 0;
-}
-.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
-	background-position:-112px -20px;
-}
-.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
-	background-position:-120px -40px;
-}
-.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
-	background-position:-120px -56px;
-}
-/*light-thick*/
-.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
-	width:4px;
-	background:#fff; /* rgba fallback */
-	background:rgba(255,255,255,0.1);
-	-webkit-border-radius:2px;
-	-moz-border-radius:2px;
-	border-radius:2px;
-}
-.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:6px;
-	background:#fff; /* rgba fallback */
-	background:rgba(255,255,255,0.75);
-	-webkit-border-radius:2px;
-	-moz-border-radius:2px;
-	border-radius:2px;
-}
-.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
-	width:100%;
-	height:4px;
-	margin:6px 0;
-}
-.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:100%;
-	height:6px;
-	margin:5px auto;
-}
-.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
-	background:rgba(255,255,255,0.85);
-}
-.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
-.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-	background:rgba(255,255,255,0.9);
-}
-.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
-	background-position:-16px 0;
-}
-.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
-	background-position:-16px -20px;
-}
-.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
-	background-position:-20px -40px;
-}
-.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
-	background-position:-20px -56px;
-}
-/*dark-thick*/
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
-	width:4px;
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.1);
-	-webkit-border-radius:2px;
-	-moz-border-radius:2px;
-	border-radius:2px;
-}
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:6px;
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.75);
-	-webkit-border-radius:2px;
-	-moz-border-radius:2px;
-	border-radius:2px;
-}
-.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
-	width:100%;
-	height:4px;
-	margin:6px 0;
-}
-.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:100%;
-	height:6px;
-	margin:5px auto;
-}
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.85);
-}
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.9);
-}
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
-	background-position:-96px 0;
-}
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
-	background-position:-96px -20px;
-}
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
-	background-position:-100px -40px;
-}
-.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
-	background-position:-100px -56px;
-}
-/*light-thin*/
-.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
-	background:#fff; /* rgba fallback */
-	background:rgba(255,255,255,0.1);
-}
-.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:2px;
-}
-.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
-	width:100%;
-}
-.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:100%;
-	height:2px;
-	margin:7px auto;
-}
-/*dark-thin*/
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.15);
-}
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:2px;
-	background:#000; /* rgba fallback */
-	background:rgba(0,0,0,0.75);
-}
-.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
-	width:100%;
-}
-.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-	width:100%;
-	height:2px;
-	margin:7px auto;
-}
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.85);
-}
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
-	background:rgba(0,0,0,0.9);
-}
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
-	background-position:-80px 0;
-}
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
-	background-position:-80px -20px;
-}
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
-	background-position:-80px -40px;
-}
-.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
-	background-position:-80px -56px;
-}
+/* basic scrollbar styling */
+/* vertical scrollbar */
+.mCSB_container{
+	width:auto;
+	margin-right:30px;
+	overflow:hidden;
+}
+.mCSB_container.mCS_no_scrollbar{
+	margin-right:0;
+}
+.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar,
+.mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{
+	margin-right:30px;
+}
+.mCustomScrollBox>.mCSB_scrollTools{
+	width:16px;
+	height:100%;
+	top:0;
+	right:0;
+}
+.mCSB_scrollTools .mCSB_draggerContainer{
+	position:absolute;
+	top:0;
+	left:0;
+	bottom:0;
+	right:0; 
+	height:auto;
+}
+.mCSB_scrollTools a+.mCSB_draggerContainer{
+	margin:20px 0;
+}
+.mCSB_scrollTools .mCSB_draggerRail{
+	width:2px;
+	height:100%;
+	margin:0 auto;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+}
+.mCSB_scrollTools .mCSB_dragger{
+	cursor:pointer;
+	width:100%;
+	height:30px;
+}
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:4px;
+	height:100%;
+	margin:0 auto;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+	text-align:center;
+}
+.mCSB_scrollTools .mCSB_buttonUp,
+.mCSB_scrollTools .mCSB_buttonDown{
+	display:block;
+	position:relative;
+	height:20px;
+	overflow:hidden;
+	margin:0 auto;
+	cursor:pointer;
+}
+.mCSB_scrollTools .mCSB_buttonDown{
+	top:100%;
+	margin-top:-40px;
+}
+/* horizontal scrollbar */
+.mCSB_horizontal>.mCSB_container{
+	height:auto;
+	margin-right:0;
+	margin-bottom:30px;
+	overflow:hidden;
+}
+.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
+	margin-bottom:0;
+}
+.mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar,
+.mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{
+	margin-right:0;
+	margin-bottom:30px;
+}
+.mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{
+	width:100%;
+	height:16px;
+	top:auto;
+	right:auto;
+	bottom:0;
+	left:0;
+	overflow:hidden;
+}
+.mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{
+	margin:0 20px;
+}
+.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+	height:2px;
+	margin:7px 0;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+}
+.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{
+	width:30px;
+	height:100%;
+}
+.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:4px;
+	margin:6px auto;
+	-webkit-border-radius:10px;
+	-moz-border-radius:10px;
+	border-radius:10px;
+}
+.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft,
+.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
+	display:block;
+	position:relative;
+	width:20px;
+	height:100%;
+	overflow:hidden;
+	margin:0 auto;
+	cursor:pointer;
+	float:left;
+}
+.mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{
+	margin-left:-40px;
+	float:right;
+}
+.mCustomScrollBox{
+	-ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/
+}
+
+/* default scrollbar colors and backgrounds (default theme) */
+.mCustomScrollBox>.mCSB_scrollTools{
+	opacity:0.75;
+	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
+}
+.mCustomScrollBox:hover>.mCSB_scrollTools{
+	opacity:1;
+	filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_draggerRail{
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.4);
+	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	background:#fff; /* rgba fallback */
+	background:rgba(255,255,255,0.75);
+	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.85);
+	filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.9);
+	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_buttonUp,
+.mCSB_scrollTools .mCSB_buttonDown,
+.mCSB_scrollTools .mCSB_buttonLeft,
+.mCSB_scrollTools .mCSB_buttonRight{
+	background-repeat:no-repeat;
+	opacity:0.4;
+	filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:0 0;
+	/* 
+	sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:0 -20px;
+	/* 
+	sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:0 -40px;
+	/* 
+	sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:0 -56px;
+	/* 
+	sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) 
+	*/
+}
+.mCSB_scrollTools .mCSB_buttonUp:hover,
+.mCSB_scrollTools .mCSB_buttonDown:hover,
+.mCSB_scrollTools .mCSB_buttonLeft:hover,
+.mCSB_scrollTools .mCSB_buttonRight:hover{
+	opacity:0.75;
+	filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */
+}
+.mCSB_scrollTools .mCSB_buttonUp:active,
+.mCSB_scrollTools .mCSB_buttonDown:active,
+.mCSB_scrollTools .mCSB_buttonLeft:active,
+.mCSB_scrollTools .mCSB_buttonRight:active{
+	opacity:0.9;
+	filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */
+}
+
+/*scrollbar themes*/
+/*dark (dark colored scrollbar)*/
+.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.15);
+}
+.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.75);
+}
+.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.85);
+}
+.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.9);
+}
+.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:-80px 0;
+}
+.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:-80px -20px;
+}
+.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:-80px -40px;
+}
+.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:-80px -56px;
+}
+/*light-2*/
+.mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{
+	width:4px;
+	background:#fff; /* rgba fallback */
+	background:rgba(255,255,255,0.1);
+	-webkit-border-radius:1px;
+	-moz-border-radius:1px;
+	border-radius:1px;
+}
+.mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:4px;
+	background:#fff; /* rgba fallback */
+	background:rgba(255,255,255,0.75);
+	-webkit-border-radius:1px;
+	-moz-border-radius:1px;
+	border-radius:1px;
+}
+.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+	height:4px;
+	margin:6px 0;
+}
+.mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:4px;
+	margin:6px auto;
+}
+.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.85);
+}
+.mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.9);
+}
+.mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:-32px 0;
+}
+.mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:-32px -20px;
+}
+.mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:-40px -40px;
+}
+.mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:-40px -56px;
+}
+/*dark-2*/
+.mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{
+	width:4px;
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.1);
+	-webkit-border-radius:1px;
+	-moz-border-radius:1px;
+	border-radius:1px;
+}
+.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:4px;
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.75);
+	-webkit-border-radius:1px;
+	-moz-border-radius:1px;
+	border-radius:1px;
+}
+.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+	height:4px;
+	margin:6px 0;
+}
+.mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:4px;
+	margin:6px auto;
+}
+.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.85);
+}
+.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.9);
+}
+.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:-112px 0;
+}
+.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:-112px -20px;
+}
+.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:-120px -40px;
+}
+.mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:-120px -56px;
+}
+/*light-thick*/
+.mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{
+	width:4px;
+	background:#fff; /* rgba fallback */
+	background:rgba(255,255,255,0.1);
+	-webkit-border-radius:2px;
+	-moz-border-radius:2px;
+	border-radius:2px;
+}
+.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:6px;
+	background:#fff; /* rgba fallback */
+	background:rgba(255,255,255,0.75);
+	-webkit-border-radius:2px;
+	-moz-border-radius:2px;
+	border-radius:2px;
+}
+.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+	height:4px;
+	margin:6px 0;
+}
+.mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:6px;
+	margin:5px auto;
+}
+.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.85);
+}
+.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(255,255,255,0.9);
+}
+.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:-16px 0;
+}
+.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:-16px -20px;
+}
+.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:-20px -40px;
+}
+.mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:-20px -56px;
+}
+/*dark-thick*/
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{
+	width:4px;
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.1);
+	-webkit-border-radius:2px;
+	-moz-border-radius:2px;
+	border-radius:2px;
+}
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:6px;
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.75);
+	-webkit-border-radius:2px;
+	-moz-border-radius:2px;
+	border-radius:2px;
+}
+.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+	height:4px;
+	margin:6px 0;
+}
+.mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:6px;
+	margin:5px auto;
+}
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.85);
+}
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.9);
+}
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:-96px 0;
+}
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:-96px -20px;
+}
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:-100px -40px;
+}
+.mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:-100px -56px;
+}
+/*light-thin*/
+.mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{
+	background:#fff; /* rgba fallback */
+	background:rgba(255,255,255,0.1);
+}
+.mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:2px;
+}
+.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+}
+.mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:2px;
+	margin:7px auto;
+}
+/*dark-thin*/
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.15);
+}
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:2px;
+	background:#000; /* rgba fallback */
+	background:rgba(0,0,0,0.75);
+}
+.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{
+	width:100%;
+}
+.mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+	width:100%;
+	height:2px;
+	margin:7px auto;
+}
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.85);
+}
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+	background:rgba(0,0,0,0.9);
+}
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{
+	background-position:-80px 0;
+}
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{
+	background-position:-80px -20px;
+}
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{
+	background-position:-80px -40px;
+}
+.mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{
+	background-position:-80px -56px;
+}
diff --git a/app/controllers/topics_controller.rb b/app/controllers/topics_controller.rb
index d73be190..19062ba9 100644
--- a/app/controllers/topics_controller.rb
+++ b/app/controllers/topics_controller.rb
@@ -1,215 +1,215 @@
-class TopicsController < ApplicationController
-    include TopicsHelper
-
-    before_filter :require_user, only: [:create, :update, :destroy]
-
-    respond_to :html, :js, :json
-
-    # GET /topics/autocomplete_topic
-    def autocomplete_topic
-        @current = current_user
-        term = params[:term]
-        if term && !term.empty?
-            @topics = Topic.where('LOWER("name") like ?', term.downcase + '%').order('"name"')
-
-            #read this next line as 'delete a topic if its private and you're either 
-            #1. logged out or 2. logged in but not the topic creator
-            @topics.to_a.delete_if {|t| t.permission == "private" && 
-                (!authenticated? || (authenticated? && @current.id != t.user_id)) }
-        else
-            @topics = []
-        end
-        render json: autocomplete_array_json(@topics)
-    end
-
-    # GET topics/:id
-    def show
-        @current = current_user
-        @topic = Topic.find(params[:id]).authorize_to_show(@current)
-
-        if not @topic
-            redirect_to root_url, notice: "Access denied. That topic is private." and return
-        end
-
-        respond_to do |format|
-            format.html { 
-                @alltopics = ([@topic] + @topic.relatives).delete_if {|t| t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)) } # should limit to topics visible to user
-                @allsynapses = @topic.synapses.to_a.delete_if {|s| s.permission == "private" && (!authenticated? || (authenticated? && @current.id != s.user_id)) }
-
-                @allcreators = []
-                @alltopics.each do |t|
-                    if @allcreators.index(t.user) == nil
-                      @allcreators.push(t.user)
-                    end
-                end
-                @allsynapses.each do |s|
-                    if @allcreators.index(s.user) == nil
-                      @allcreators.push(s.user)
-                    end
-                end
-
-                respond_with(@allsynapses, @alltopics, @allcreators, @topic) 
-            }
-            format.json { render json: @topic }
-        end
-    end
-
-    # GET topics/:id/network
-    def network
-        @current = current_user
-        @topic = Topic.find(params[:id]).authorize_to_show(@current)
-
-        if not @topic
-            redirect_to root_url, notice: "Access denied. That topic is private." and return
-        end
-
-        @alltopics = @topic.relatives.to_a.delete_if {|t| t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)) }
-        @allsynapses = @topic.synapses.to_a.delete_if {|s| s.permission == "private" && (!authenticated? || (authenticated? && @current.id != s.user_id)) }
-        @allcreators = []
-        @allcreators.push(@topic.user)
-        @alltopics.each do |t|
-            if @allcreators.index(t.user) == nil
-              @allcreators.push(t.user)
-            end
-        end
-        @allsynapses.each do |s|
-            if @allcreators.index(s.user) == nil
-              @allcreators.push(s.user)
-            end
-        end
-                
-        @json = Hash.new()
-        @json['topic'] = @topic
-        @json['creators'] = @allcreators
-        @json['relatives'] = @alltopics
-        @json['synapses'] = @allsynapses
-
-        respond_to do |format|
-            format.json { render json: @json }
-        end
-    end
-
-    # GET topics/:id/relative_numbers
-    def relative_numbers
-        @current = current_user
-        @topic = Topic.find(params[:id]).authorize_to_show(@current)
-
-        if not @topic
-            redirect_to root_url, notice: "Access denied. That topic is private." and return
-        end
-
-        @topicsAlreadyHas = params[:network] ? params[:network].split(',') : []
-
-        @alltopics = @topic.relatives.to_a.delete_if {|t| 
-            @topicsAlreadyHas.index(t.id.to_s) != nil ||
-                (t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)))
-        }
-
-        @alltopics.uniq!
-
-        @json = Hash.new()
-        @alltopics.each do |t|
-            if @json[t.metacode.id] 
-                @json[t.metacode.id] += 1
-            else
-                @json[t.metacode.id] = 1
-            end
-        end
-
-        respond_to do |format|
-            format.json { render json: @json }
-        end
-    end
-
-    # GET topics/:id/relatives
-    def relatives
-        @current = current_user
-        @topic = Topic.find(params[:id]).authorize_to_show(@current)
-
-        if not @topic
-            redirect_to root_url, notice: "Access denied. That topic is private." and return
-        end
-
-        @topicsAlreadyHas = params[:network] ? params[:network].split(',') : []
-
-        @alltopics = @topic.relatives.to_a.delete_if {|t| 
-            @topicsAlreadyHas.index(t.id.to_s) != nil ||
-                (params[:metacode] && t.metacode_id.to_s != params[:metacode]) ||
-                (t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)))
-        }
-
-        @alltopics.uniq!
-
-        @allsynapses = @topic.synapses.to_a.delete_if {|s|
-            (s.topic1 == @topic && @alltopics.index(s.topic2) == nil) ||
-            (s.topic2 == @topic && @alltopics.index(s.topic1) == nil)
-        }
-
-        @creatorsAlreadyHas = params[:creators] ? params[:creators].split(',') : []
-        @allcreators = []
-        @alltopics.each do |t|
-            if @allcreators.index(t.user) == nil && @creatorsAlreadyHas.index(t.user_id.to_s) == nil
-              @allcreators.push(t.user)
-            end
-        end
-        @allsynapses.each do |s|
-            if @allcreators.index(s.user) == nil && @creatorsAlreadyHas.index(s.user_id.to_s) == nil
-              @allcreators.push(s.user)
-            end
-        end
-
-        @json = Hash.new()
-        @json['topics'] = @alltopics
-        @json['synapses'] = @allsynapses
-        @json['creators'] = @allcreators
-
-        respond_to do |format|
-            format.json { render json: @json }
-        end
-    end
-
-    # POST /topics
-    # POST /topics.json
-    def create
-        @topic = Topic.new(topic_params)
-
-        respond_to do |format|
-            if @topic.save
-                format.json { render json: @topic, status: :created }
-            else
-                format.json { render json: @topic.errors, status: :unprocessable_entity }
-            end
-        end
-    end
-
-    # PUT /topics/1
-    # PUT /topics/1.json
-    def update
-        @topic = Topic.find(params[:id])
-
-        respond_to do |format|
-            if @topic.update_attributes(topic_params)
-                format.json { head :no_content }
-            else
-                format.json { render json: @topic.errors, status: :unprocessable_entity }
-            end
-        end
-    end
-
-    # DELETE topics/:id
-    def destroy
-        @current = current_user
-        @topic = Topic.find(params[:id]).authorize_to_delete(@current)
-        @topic.delete if @topic
-
-        respond_to do |format|
-            format.json { head :no_content }
-        end
-    end
-
-  private
-
-  def topic_params
-    params.require(:topic).permit(:id, :name, :desc, :link, :permission, :user_id, :metacode_id)
-  end
-end
+class TopicsController < ApplicationController
+    include TopicsHelper
+
+    before_filter :require_user, only: [:create, :update, :destroy]
+
+    respond_to :html, :js, :json
+
+    # GET /topics/autocomplete_topic
+    def autocomplete_topic
+        @current = current_user
+        term = params[:term]
+        if term && !term.empty?
+            @topics = Topic.where('LOWER("name") like ?', term.downcase + '%').order('"name"')
+
+            #read this next line as 'delete a topic if its private and you're either 
+            #1. logged out or 2. logged in but not the topic creator
+            @topics.to_a.delete_if {|t| t.permission == "private" && 
+                (!authenticated? || (authenticated? && @current.id != t.user_id)) }
+        else
+            @topics = []
+        end
+        render json: autocomplete_array_json(@topics)
+    end
+
+    # GET topics/:id
+    def show
+        @current = current_user
+        @topic = Topic.find(params[:id]).authorize_to_show(@current)
+
+        if not @topic
+            redirect_to root_url, notice: "Access denied. That topic is private." and return
+        end
+
+        respond_to do |format|
+            format.html { 
+                @alltopics = ([@topic] + @topic.relatives).delete_if {|t| t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)) } # should limit to topics visible to user
+                @allsynapses = @topic.synapses.to_a.delete_if {|s| s.permission == "private" && (!authenticated? || (authenticated? && @current.id != s.user_id)) }
+
+                @allcreators = []
+                @alltopics.each do |t|
+                    if @allcreators.index(t.user) == nil
+                      @allcreators.push(t.user)
+                    end
+                end
+                @allsynapses.each do |s|
+                    if @allcreators.index(s.user) == nil
+                      @allcreators.push(s.user)
+                    end
+                end
+
+                respond_with(@allsynapses, @alltopics, @allcreators, @topic) 
+            }
+            format.json { render json: @topic }
+        end
+    end
+
+    # GET topics/:id/network
+    def network
+        @current = current_user
+        @topic = Topic.find(params[:id]).authorize_to_show(@current)
+
+        if not @topic
+            redirect_to root_url, notice: "Access denied. That topic is private." and return
+        end
+
+        @alltopics = @topic.relatives.to_a.delete_if {|t| t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)) }
+        @allsynapses = @topic.synapses.to_a.delete_if {|s| s.permission == "private" && (!authenticated? || (authenticated? && @current.id != s.user_id)) }
+        @allcreators = []
+        @allcreators.push(@topic.user)
+        @alltopics.each do |t|
+            if @allcreators.index(t.user) == nil
+              @allcreators.push(t.user)
+            end
+        end
+        @allsynapses.each do |s|
+            if @allcreators.index(s.user) == nil
+              @allcreators.push(s.user)
+            end
+        end
+                
+        @json = Hash.new()
+        @json['topic'] = @topic
+        @json['creators'] = @allcreators
+        @json['relatives'] = @alltopics
+        @json['synapses'] = @allsynapses
+
+        respond_to do |format|
+            format.json { render json: @json }
+        end
+    end
+
+    # GET topics/:id/relative_numbers
+    def relative_numbers
+        @current = current_user
+        @topic = Topic.find(params[:id]).authorize_to_show(@current)
+
+        if not @topic
+            redirect_to root_url, notice: "Access denied. That topic is private." and return
+        end
+
+        @topicsAlreadyHas = params[:network] ? params[:network].split(',') : []
+
+        @alltopics = @topic.relatives.to_a.delete_if {|t| 
+            @topicsAlreadyHas.index(t.id.to_s) != nil ||
+                (t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)))
+        }
+
+        @alltopics.uniq!
+
+        @json = Hash.new()
+        @alltopics.each do |t|
+            if @json[t.metacode.id] 
+                @json[t.metacode.id] += 1
+            else
+                @json[t.metacode.id] = 1
+            end
+        end
+
+        respond_to do |format|
+            format.json { render json: @json }
+        end
+    end
+
+    # GET topics/:id/relatives
+    def relatives
+        @current = current_user
+        @topic = Topic.find(params[:id]).authorize_to_show(@current)
+
+        if not @topic
+            redirect_to root_url, notice: "Access denied. That topic is private." and return
+        end
+
+        @topicsAlreadyHas = params[:network] ? params[:network].split(',') : []
+
+        @alltopics = @topic.relatives.to_a.delete_if {|t| 
+            @topicsAlreadyHas.index(t.id.to_s) != nil ||
+                (params[:metacode] && t.metacode_id.to_s != params[:metacode]) ||
+                (t.permission == "private" && (!authenticated? || (authenticated? && @current.id != t.user_id)))
+        }
+
+        @alltopics.uniq!
+
+        @allsynapses = @topic.synapses.to_a.delete_if {|s|
+            (s.topic1 == @topic && @alltopics.index(s.topic2) == nil) ||
+            (s.topic2 == @topic && @alltopics.index(s.topic1) == nil)
+        }
+
+        @creatorsAlreadyHas = params[:creators] ? params[:creators].split(',') : []
+        @allcreators = []
+        @alltopics.each do |t|
+            if @allcreators.index(t.user) == nil && @creatorsAlreadyHas.index(t.user_id.to_s) == nil
+              @allcreators.push(t.user)
+            end
+        end
+        @allsynapses.each do |s|
+            if @allcreators.index(s.user) == nil && @creatorsAlreadyHas.index(s.user_id.to_s) == nil
+              @allcreators.push(s.user)
+            end
+        end
+
+        @json = Hash.new()
+        @json['topics'] = @alltopics
+        @json['synapses'] = @allsynapses
+        @json['creators'] = @allcreators
+
+        respond_to do |format|
+            format.json { render json: @json }
+        end
+    end
+
+    # POST /topics
+    # POST /topics.json
+    def create
+        @topic = Topic.new(topic_params)
+
+        respond_to do |format|
+            if @topic.save
+                format.json { render json: @topic, status: :created }
+            else
+                format.json { render json: @topic.errors, status: :unprocessable_entity }
+            end
+        end
+    end
+
+    # PUT /topics/1
+    # PUT /topics/1.json
+    def update
+        @topic = Topic.find(params[:id])
+
+        respond_to do |format|
+            if @topic.update_attributes(topic_params)
+                format.json { head :no_content }
+            else
+                format.json { render json: @topic.errors, status: :unprocessable_entity }
+            end
+        end
+    end
+
+    # DELETE topics/:id
+    def destroy
+        @current = current_user
+        @topic = Topic.find(params[:id]).authorize_to_delete(@current)
+        @topic.delete if @topic
+
+        respond_to do |format|
+            format.json { head :no_content }
+        end
+    end
+
+  private
+
+  def topic_params
+    params.require(:topic).permit(:id, :name, :desc, :link, :permission, :user_id, :metacode_id)
+  end
+end
diff --git a/app/models/topic.rb b/app/models/topic.rb
index e80d3df7..c528aa6e 100644
--- a/app/models/topic.rb
+++ b/app/models/topic.rb
@@ -1,117 +1,117 @@
-class Topic < ActiveRecord::Base
-  include TopicsHelper
-
-  belongs_to :user
-
-  has_many :synapses1, :class_name => 'Synapse', :foreign_key => 'node1_id', dependent: :destroy
-  has_many :synapses2, :class_name => 'Synapse', :foreign_key => 'node2_id', dependent: :destroy
-  has_many :topics1, :through => :synapses2, :source => :topic1
-  has_many :topics2, :through => :synapses1, :source => :topic2
-
-  has_many :mappings, as: :mappable, dependent: :destroy
-  has_many :maps, :through => :mappings
-
-  validates :permission, presence: true
-  validates :permission, inclusion: { in: Perm::ISSIONS.map(&:to_s) }
-    
-  # This method associates the attribute ":image" with a file attachment
-  has_attached_file :image
-    
-  #, styles: {
-  # thumb: '100x100>',
-  # square: '200x200#',
-  # medium: '300x300>'
-  #}
-
-  # Validate the attached image is image/jpg, image/png, etc
-  validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/
-  
-  # This method associates the attribute ":image" with a file attachment
-  has_attached_file :audio
-  # Validate the attached audio is audio/wav, audio/mp3, etc
-  validates_attachment_content_type :audio, :content_type => /\Aaudio\/.*\Z/   
-    
-  def synapses
-     synapses1 + synapses2
-  end
-  
-  def relatives
-     topics1 + topics2
-  end
-
-  belongs_to :metacode
-
-  def user_name
-    user.name
-  end
-
-  def user_image
-    user.image.url
-  end
-
-  def map_count
-    maps.count
-  end
-
-  def synapse_count
-    synapses.count
-  end
-
-  def inmaps
-    maps.map(&:name)
-  end
-
-  def inmapsLinks
-    maps.map(&:id)
-  end
-
-  def as_json(options={})
-    super(:methods =>[:user_name, :user_image, :map_count, :synapse_count, :inmaps, :inmapsLinks])
-  end
-
-  def topic_autocomplete_method
-    "Get: #{self.name}"
-  end
-  
-  def mk_permission
-    Perm.short(permission)
-  end
-
-  # has no viewable synapses helper function
-  def has_viewable_synapses(current)
-  	result = false
-  	synapses.each do |synapse|
-  		if synapse.authorize_to_show(current)
-  			result = true
-  		end
-  	end
-  	result
-  end
-  
-  ##### PERMISSIONS ######
-  
-  # returns false if user not allowed to 'show' Topic, Synapse, or Map
-  def authorize_to_show(user)  
-	if (self.permission == "private" && self.user != user)
-		return false
-	end
-	return self
-  end
-  
-  # returns false if user not allowed to 'edit' Topic, Synapse, or Map
-  def authorize_to_edit(user)  
-	if (self.permission == "private" && self.user != user)
-		return false
-	elsif (self.permission == "public" && self.user != user)
-		return false
-	end
-	return self
-  end
-
-  def authorize_to_delete(user)  
-    if (self.user == user || user.admin)
-      return self
-    end
-    return false
-  end
-end
+class Topic < ActiveRecord::Base
+  include TopicsHelper
+
+  belongs_to :user
+
+  has_many :synapses1, :class_name => 'Synapse', :foreign_key => 'node1_id', dependent: :destroy
+  has_many :synapses2, :class_name => 'Synapse', :foreign_key => 'node2_id', dependent: :destroy
+  has_many :topics1, :through => :synapses2, :source => :topic1
+  has_many :topics2, :through => :synapses1, :source => :topic2
+
+  has_many :mappings, as: :mappable, dependent: :destroy
+  has_many :maps, :through => :mappings
+
+  validates :permission, presence: true
+  validates :permission, inclusion: { in: Perm::ISSIONS.map(&:to_s) }
+    
+  # This method associates the attribute ":image" with a file attachment
+  has_attached_file :image
+    
+  #, styles: {
+  # thumb: '100x100>',
+  # square: '200x200#',
+  # medium: '300x300>'
+  #}
+
+  # Validate the attached image is image/jpg, image/png, etc
+  validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/
+  
+  # This method associates the attribute ":image" with a file attachment
+  has_attached_file :audio
+  # Validate the attached audio is audio/wav, audio/mp3, etc
+  validates_attachment_content_type :audio, :content_type => /\Aaudio\/.*\Z/   
+    
+  def synapses
+     synapses1 + synapses2
+  end
+  
+  def relatives
+     topics1 + topics2
+  end
+
+  belongs_to :metacode
+
+  def user_name
+    user.name
+  end
+
+  def user_image
+    user.image.url
+  end
+
+  def map_count
+    maps.count
+  end
+
+  def synapse_count
+    synapses.count
+  end
+
+  def inmaps
+    maps.map(&:name)
+  end
+
+  def inmapsLinks
+    maps.map(&:id)
+  end
+
+  def as_json(options={})
+    super(:methods =>[:user_name, :user_image, :map_count, :synapse_count, :inmaps, :inmapsLinks])
+  end
+
+  def topic_autocomplete_method
+    "Get: #{self.name}"
+  end
+  
+  def mk_permission
+    Perm.short(permission)
+  end
+
+  # has no viewable synapses helper function
+  def has_viewable_synapses(current)
+  	result = false
+  	synapses.each do |synapse|
+  		if synapse.authorize_to_show(current)
+  			result = true
+  		end
+  	end
+  	result
+  end
+  
+  ##### PERMISSIONS ######
+  
+  # returns false if user not allowed to 'show' Topic, Synapse, or Map
+  def authorize_to_show(user)  
+	if (self.permission == "private" && self.user != user)
+		return false
+	end
+	return self
+  end
+  
+  # returns false if user not allowed to 'edit' Topic, Synapse, or Map
+  def authorize_to_edit(user)  
+	if (self.permission == "private" && self.user != user)
+		return false
+	elsif (self.permission == "public" && self.user != user)
+		return false
+	end
+	return self
+  end
+
+  def authorize_to_delete(user)  
+    if (self.user == user || user.admin)
+      return self
+    end
+    return false
+  end
+end
diff --git a/app/models/user_preference.rb b/app/models/user_preference.rb
index 9c2732a4..aaced385 100644
--- a/app/models/user_preference.rb
+++ b/app/models/user_preference.rb
@@ -1,11 +1,11 @@
-class UserPreference
-  attr_accessor :metacodes
- 
-  def initialize
-    array = []
-    Metacode.all.each do |m|
-      array.push(m.id.to_s)
-    end
-    @metacodes = array
-  end
+class UserPreference
+  attr_accessor :metacodes
+ 
+  def initialize
+    array = []
+    Metacode.all.each do |m|
+      array.push(m.id.to_s)
+    end
+    @metacodes = array
+  end
 end
\ No newline at end of file
diff --git a/app/views/admin/_adminpanel.html.erb b/app/views/admin/_adminpanel.html.erb
index cbc9bb69..7733824f 100644
--- a/app/views/admin/_adminpanel.html.erb
+++ b/app/views/admin/_adminpanel.html.erb
@@ -1,6 +1,6 @@
-<%= link_to 'Metacode Sets', metacode_sets_path, { :class => 'button', 'data-bypass' => 'true' }%>
-<%= link_to 'New Set', new_metacode_set_path, { :class => 'button', 'data-bypass' => 'true' }%>
-<%= link_to 'Metacodes', metacodes_path, { :class => 'button', 'data-bypass' => 'true' }%>
-<%= link_to 'New Metacode', new_metacode_path, { :class => 'button', 'data-bypass' => 'true' }%>
-<div class='clearfloat'></div>
-<br />
+<%= link_to 'Metacode Sets', metacode_sets_path, { :class => 'button', 'data-bypass' => 'true' }%>
+<%= link_to 'New Set', new_metacode_set_path, { :class => 'button', 'data-bypass' => 'true' }%>
+<%= link_to 'Metacodes', metacodes_path, { :class => 'button', 'data-bypass' => 'true' }%>
+<%= link_to 'New Metacode', new_metacode_path, { :class => 'button', 'data-bypass' => 'true' }%>
+<div class='clearfloat'></div>
+<br />
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index e21a91c3..c09d227e 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,152 +1,152 @@
-<%#
-# @file
-# Main application file. Holds scaffolding present on every page.
-# Then a certain non-partial view (no _ preceding filename) will be
-# displayed within, based on URL
-#%>
-
-<!DOCTYPE html>
-<html>
-<head>
-  <title><%=h yield(:title) %></title>
-  <%= csrf_meta_tags %>
-  <meta name="viewport" content="width=device-width, user-scalable=no">
-
-  <%= stylesheet_link_tag    "application", :media => "all" %>
-  <%= javascript_include_tag "application" %>
-
-  <!-- typekit for vinyl font -->
-  <script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script>
-  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-
-        <!-- app code -->
-        <script type="text/javascript">
-            require.config({baseUrl: '<%= "#{ asset_path '/famous/main.js' }".chomp('main.js') %>'});
-            require(['main']);
-        </script>
-
-  <!--[if (IE)]>
-    <style type="text/css">
-      #lightbox_overlay {
-        display: block;
-      }
-
-      #lightbox_main {
-        top: 50%;
-        margin-top: -281px;
-      }
-
-      #lightbox_screen {
-        height: 100%;
-        opacity: 0.42;
-      }
-
-      .lightboxContent {
-        display: none;
-      }
-
-      #noIE {
-        display: block;
-      }
-
-      #lightbox_close {
-        display: none;
-      }
-
-    </style>
-    <script type="text/javascript">
-      $(document).ready(function(){
-        $("#lightbox_screen").unbind().click(function(event){
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        });
-      });
-    </script>
-  <![endif]-->
-</head>
-
-<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %>">
-
-    <% if devise_error_messages? %>
-      <p id="toast"><%= devise_error_messages! %></p>
-    <% elsif notice %>
-      <p id="toast"><%= notice %></p>
-    <% end %>
-
-    <%= content_tag :div, class: "main" do %>
-
-        <% classes = action_name == "home" ? "homePage" : ""
-           classes += action_name == "home" && authenticated? ? " explorePage" : ""
-           classes += controller_name == "maps" && action_name == "index" ? " explorePage" : ""
-           if controller_name == "maps" && action_name == "show" 
-             classes += " mapPage"
-             if @map.authorize_to_edit(current_user)
-               classes += " canEditMap"
-             end
-             if @map.permission == "commons"
-               classes += " commonsMap"
-             end
-           end
-           classes += controller_name == "topics" && action_name == "show" ? " topicPage" : ""
-           %>
-
-        <div class="wrapper <%= classes %>" id="wrapper">
-            
-            <%= render :partial => 'layouts/upperelements' %>
-
-            <%= yield %>
-
-            <div class="showcard mapElement mapElementHidden" id="showcard"></div> <!-- the topic card -->
-            <% if authenticated? %>
-                <% # for creating and pulling in topics and synapses %>
-                <%= render :partial => 'maps/newtopic' %>
-                <%= render :partial => 'maps/newsynapse' %>
-                <% # for populating the change metacode list on the topic card %>
-                <%= render :partial => 'shared/metacodeoptions' %>
-            <% end %>
-            <%= render :partial => 'layouts/lowermapelements' %>
-
-            <div id="famousOverlay"></div>
-            <div id="loading"></div>
-        </div>
-
-    <% end %>
-
-<%= render :partial => 'layouts/lightboxes' %>
-<%= render :partial => 'layouts/templates' %>
-<%= render :partial => 'shared/metacodeBgColors' %>
-<script type="text/javascript" charset="utf-8">
-    <% if authenticated? %>
-        Metamaps.Active.Mapper = <%= user.to_json.html_safe %>
-    <% else %>
-        Metamaps.Active.Mapper = null;
-    <% end %>
-    Metamaps.Metacodes = <%= Metacode.all.to_json.html_safe %>;
-
-    Metamaps.Loading = {
-        loader: new CanvasLoader('loading'),
-        hide: function () {
-          $('#loading').hide();
-        },
-        show: function () {
-          $('#loading').show();
-        }
-    };
-    Metamaps.Loading.loader.setColor('#4fb5c0'); // default is '#000000'
-    Metamaps.Loading.loader.setDiameter(28); // default is 40
-    Metamaps.Loading.loader.setDensity(41); // default is 40
-    Metamaps.Loading.loader.setRange(0.9); // default is 1.3
-    Metamaps.Loading.loader.show(); // Hidden by default
-
-    // set up uservoice with signed in user
-    <% if authenticated? && ENV['SSO_KEY'] %>
-      USERVOICE.load(Metamaps.Active.Mapper.name, Metamaps.Active.Mapper.id, "<%= user.email %>", "<%= current_sso_token %>");
-    <% else %>
-      USERVOICE.load();
-    <% end %>
-</script>
-
-<%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
-</body>
-</html>
+<%#
+# @file
+# Main application file. Holds scaffolding present on every page.
+# Then a certain non-partial view (no _ preceding filename) will be
+# displayed within, based on URL
+#%>
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title><%=h yield(:title) %></title>
+  <%= csrf_meta_tags %>
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+
+  <%= stylesheet_link_tag    "application", :media => "all" %>
+  <%= javascript_include_tag "application" %>
+
+  <!-- typekit for vinyl font -->
+  <script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script>
+  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
+        <!-- app code -->
+        <script type="text/javascript">
+            require.config({baseUrl: '<%= "#{ asset_path '/famous/main.js' }".chomp('main.js') %>'});
+            require(['main']);
+        </script>
+
+  <!--[if (IE)]>
+    <style type="text/css">
+      #lightbox_overlay {
+        display: block;
+      }
+
+      #lightbox_main {
+        top: 50%;
+        margin-top: -281px;
+      }
+
+      #lightbox_screen {
+        height: 100%;
+        opacity: 0.42;
+      }
+
+      .lightboxContent {
+        display: none;
+      }
+
+      #noIE {
+        display: block;
+      }
+
+      #lightbox_close {
+        display: none;
+      }
+
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function(){
+        $("#lightbox_screen").unbind().click(function(event){
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        });
+      });
+    </script>
+  <![endif]-->
+</head>
+
+<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %>">
+
+    <% if devise_error_messages? %>
+      <p id="toast"><%= devise_error_messages! %></p>
+    <% elsif notice %>
+      <p id="toast"><%= notice %></p>
+    <% end %>
+
+    <%= content_tag :div, class: "main" do %>
+
+        <% classes = action_name == "home" ? "homePage" : ""
+           classes += action_name == "home" && authenticated? ? " explorePage" : ""
+           classes += controller_name == "maps" && action_name == "index" ? " explorePage" : ""
+           if controller_name == "maps" && action_name == "show" 
+             classes += " mapPage"
+             if @map.authorize_to_edit(current_user)
+               classes += " canEditMap"
+             end
+             if @map.permission == "commons"
+               classes += " commonsMap"
+             end
+           end
+           classes += controller_name == "topics" && action_name == "show" ? " topicPage" : ""
+           %>
+
+        <div class="wrapper <%= classes %>" id="wrapper">
+            
+            <%= render :partial => 'layouts/upperelements' %>
+
+            <%= yield %>
+
+            <div class="showcard mapElement mapElementHidden" id="showcard"></div> <!-- the topic card -->
+            <% if authenticated? %>
+                <% # for creating and pulling in topics and synapses %>
+                <%= render :partial => 'maps/newtopic' %>
+                <%= render :partial => 'maps/newsynapse' %>
+                <% # for populating the change metacode list on the topic card %>
+                <%= render :partial => 'shared/metacodeoptions' %>
+            <% end %>
+            <%= render :partial => 'layouts/lowermapelements' %>
+
+            <div id="famousOverlay"></div>
+            <div id="loading"></div>
+        </div>
+
+    <% end %>
+
+<%= render :partial => 'layouts/lightboxes' %>
+<%= render :partial => 'layouts/templates' %>
+<%= render :partial => 'shared/metacodeBgColors' %>
+<script type="text/javascript" charset="utf-8">
+    <% if authenticated? %>
+        Metamaps.Active.Mapper = <%= user.to_json.html_safe %>
+    <% else %>
+        Metamaps.Active.Mapper = null;
+    <% end %>
+    Metamaps.Metacodes = <%= Metacode.all.to_json.html_safe %>;
+
+    Metamaps.Loading = {
+        loader: new CanvasLoader('loading'),
+        hide: function () {
+          $('#loading').hide();
+        },
+        show: function () {
+          $('#loading').show();
+        }
+    };
+    Metamaps.Loading.loader.setColor('#4fb5c0'); // default is '#000000'
+    Metamaps.Loading.loader.setDiameter(28); // default is 40
+    Metamaps.Loading.loader.setDensity(41); // default is 40
+    Metamaps.Loading.loader.setRange(0.9); // default is 1.3
+    Metamaps.Loading.loader.show(); // Hidden by default
+
+    // set up uservoice with signed in user
+    <% if authenticated? && ENV['SSO_KEY'] %>
+      USERVOICE.load(Metamaps.Active.Mapper.name, Metamaps.Active.Mapper.id, "<%= user.email %>", "<%= current_sso_token %>");
+    <% else %>
+      USERVOICE.load();
+    <% end %>
+</script>
+
+<%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
+</body>
+</html>
diff --git a/app/views/maps/_newsynapse.html.erb b/app/views/maps/_newsynapse.html.erb
index 1c190324..00066933 100644
--- a/app/views/maps/_newsynapse.html.erb
+++ b/app/views/maps/_newsynapse.html.erb
@@ -1,3 +1,3 @@
-<%= form_for Synapse.new, url: synapses_url, remote: true do |form| %>
-<%= form.text_field :desc, :placeholder => "describe the connection..." %>
-<% end %>
+<%= form_for Synapse.new, url: synapses_url, remote: true do |form| %>
+<%= form.text_field :desc, :placeholder => "describe the connection..." %>
+<% end %>
diff --git a/app/views/synapses/_new.html.erb b/app/views/synapses/_new.html.erb
index e1e7d176..82a3d604 100644
--- a/app/views/synapses/_new.html.erb
+++ b/app/views/synapses/_new.html.erb
@@ -1,10 +1,10 @@
-<%#
-  # @file
-  # Partial for rendered a new synapse form
-  # TODO: Is this used? Where?
-  #%>
-<div class="anypage">
-	<%= form_for Synapse.new, url: synapses_url, remote: true do |form| %>
-    <%= form.text_field :desc, :placeholder => "describe the connection..." %>
-	<% end %>
-</div>
+<%#
+  # @file
+  # Partial for rendered a new synapse form
+  # TODO: Is this used? Where?
+  #%>
+<div class="anypage">
+	<%= form_for Synapse.new, url: synapses_url, remote: true do |form| %>
+    <%= form.text_field :desc, :placeholder => "describe the connection..." %>
+	<% end %>
+</div>
diff --git a/config/database.yml b/config/database.yml
index 469ede34..c6cad0fa 100644
--- a/config/database.yml
+++ b/config/database.yml
@@ -1,21 +1,21 @@
-default: &default
-  min_messages: WARNING
-  encoding: unicode
-  pool: 5
-  adapter: postgresql
-  host: <%= ENV['DB_HOST'] %>
-  port: <%= ENV['DB_PORT'] %>
-  username: <%= ENV['DB_USERNAME'] %>
-  password: <%= ENV['DB_PASSWORD'] %>
-
-development:
-  <<: *default
-  database: <%= ENV['DB_NAME'] %>_development
-
-test:
-  <<: *default
-  database: <%= ENV['DB_NAME'] %>_test
-
-production:
-  <<: *default
-  database: <%= ENV['DB_NAME'] %>_production
+default: &default
+  min_messages: WARNING
+  encoding: unicode
+  pool: 5
+  adapter: postgresql
+  host: <%= ENV['DB_HOST'] %>
+  port: <%= ENV['DB_PORT'] %>
+  username: <%= ENV['DB_USERNAME'] %>
+  password: <%= ENV['DB_PASSWORD'] %>
+
+development:
+  <<: *default
+  database: <%= ENV['DB_NAME'] %>_development
+
+test:
+  <<: *default
+  database: <%= ENV['DB_NAME'] %>_test
+
+production:
+  <<: *default
+  database: <%= ENV['DB_NAME'] %>_production
diff --git a/config/initializers/paperclip.rb b/config/initializers/paperclip.rb
index 1447988b..07d6e2f3 100644
--- a/config/initializers/paperclip.rb
+++ b/config/initializers/paperclip.rb
@@ -1,2 +1,2 @@
-Paperclip::Attachment.default_options[:url] = ':s3_domain_url'
+Paperclip::Attachment.default_options[:url] = ':s3_domain_url'
 Paperclip::Attachment.default_options[:path] = '/:class/:attachment/:id_partition/:style/:filename'
\ No newline at end of file
diff --git a/config/initializers/uservoice.rb b/config/initializers/uservoice.rb
index 3a303174..293b908b 100644
--- a/config/initializers/uservoice.rb
+++ b/config/initializers/uservoice.rb
@@ -1,7 +1,7 @@
-require 'uservoice-ruby'
-
-def current_sso_token
-	@current_sso_token ||= UserVoice.generate_sso_token('metamapscc', ENV['SSO_KEY'], {
-      :email => current_user.email
-    }, 300) # Default expiry time is 5 minutes = 300 seconds
+require 'uservoice-ruby'
+
+def current_sso_token
+	@current_sso_token ||= UserVoice.generate_sso_token('metamapscc', ENV['SSO_KEY'], {
+      :email => current_user.email
+    }, 300) # Default expiry time is 5 minutes = 300 seconds
 end
\ No newline at end of file
diff --git a/realtime/README.md b/realtime/README.md
index 5c81979b..6aad3e60 100644
--- a/realtime/README.md
+++ b/realtime/README.md
@@ -1,18 +1,18 @@
-## Node.js realtime server
-
-To run the server, you need to install the dependencies and run the server.
-Please ensure you have followed the OS-specific instructions in doc/ to
-install NodeJS. Once you have node, then you can proceed to install the
-node packages for the realtime server:
-
-    cd realtime
-    npm install #creates node_modules directory
-    node realtime-server.js
-
-That's it!
-
-To run the server as a daemon that will be re-run if it crashes, you can
-use the forever node package.
-
-    sudo npm install -g forever
-    forever start realtime-server.js
+## Node.js realtime server
+
+To run the server, you need to install the dependencies and run the server.
+Please ensure you have followed the OS-specific instructions in doc/ to
+install NodeJS. Once you have node, then you can proceed to install the
+node packages for the realtime server:
+
+    cd realtime
+    npm install #creates node_modules directory
+    node realtime-server.js
+
+That's it!
+
+To run the server as a daemon that will be re-run if it crashes, you can
+use the forever node package.
+
+    sudo npm install -g forever
+    forever start realtime-server.js