Node drawing moved to GraphCanvas

2026-04-30 19:21:54 +00:00 · 2013-10-23 19:23:50 +02:00
parent d9d998336d
commit 2b3503640e
31 changed files with 16321 additions and 692 deletions
--- a/build/litegraph.js
+++ b/build/litegraph.js
@@ -18,9 +18,10 @@ var LiteGraph = {
 	NODE_WIDTH: 140,
 	NODE_MIN_WIDTH: 50,
 	NODE_COLLAPSED_RADIUS: 10,
 	NODE_COLLAPSED_WIDTH: 80,
 	CANVAS_GRID_SIZE: 10,
-	NODE_DEFAULT_COLOR: "#888",
+	NODE_DEFAULT_COLOR: "#999",
-	NODE_DEFAULT_BGCOLOR: "#333",
+	NODE_DEFAULT_BGCOLOR: "#444",
 	NODE_DEFAULT_BOXCOLOR: "#AEF",
 	NODE_DEFAULT_SHAPE: "box",
 	MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
@@ -1167,7 +1168,7 @@ LGraphNode.prototype.computeSize = function(minHeight)
 //returns the bounding of the object, used for rendering purposes
 LGraphNode.prototype.getBounding = function()
 {
-	return new Float32Array([this.pos[0] - 4, this.pos[1] - LGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
+	return new Float32Array([this.pos[0] - 4, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
 }
 //checks if a point is inside the shape of a node
@@ -1176,7 +1177,8 @@ LGraphNode.prototype.isPointInsideNode = function(x,y)
 	var margin_top = this.graph.isLive() ? 0 : 20;
 	if(this.flags.collapsed)
 	{
-		if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
+		//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
 		if( isInsideRectangle(x,y, this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_COLLAPSED_WIDTH, LiteGraph.NODE_TITLE_HEIGHT) )
 			return true;
 	}
 	else if (this.pos[0] - 4 < x && (this.pos[0] + this.size[0] + 4) > x
@@ -1385,7 +1387,13 @@ LGraphNode.prototype.disconnectInput = function(slot)
 LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
 {
 	if(this.flags.collapsed)
-		return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
+	{
 		if(is_input)
 			return [this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
 		else
 			return [this.pos[0] + LiteGraph.NODE_COLLAPSED_WIDTH, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
 		//return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
 	}
 	if(is_input && slot_number == -1)
 	{
@@ -1402,331 +1410,6 @@ LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
 	return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT];
 }
 /* Renders the LGraphNode on the canvas */
 LGraphNode.prototype.draw = function(ctx, canvasrender)
 {
 	var glow = false;
 	var color = this.color || LiteGraph.NODE_DEFAULT_COLOR;
 	//if (this.selected) color = "#88F";
 	var render_title = true;
 	if(this.flags.skip_title_render || this.graph.isLive())
 		render_title = false;
 	if(this.mouseOver)
 		render_title = true;
 	//shadow and glow
 	if (this.mouseOver) glow = true;
 	if(this.selected)
 	{
 		/*
 		ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
 		ctx.shadowOffsetX = 0;
 		ctx.shadowOffsetY = 0;
 		ctx.shadowBlur = 1;
 		*/
 	}
 	else if(canvasrender.render_shadows)
 	{
 		ctx.shadowColor = "#111";
 		ctx.shadowOffsetX = 2;
 		ctx.shadowOffsetY = 2;
 		ctx.shadowBlur = 4;
 	}
 	else
 		ctx.shadowColor = "transparent";
 	//only render if it forces it to do it
 	if(canvasrender.live_mode)
 	{
 		if(!this.flags.collapsed)
 		{
 			ctx.shadowColor = "transparent";
 			if(this.onDrawBackground)
 				this.onDrawBackground(ctx);
 			if(this.onDrawForeground)
 				this.onDrawForeground(ctx);
 		}
 		return;
 	}
 	//draw in collapsed form
 	if(this.flags.collapsed)
 	{
 		if(!this.onDrawCollapsed || this.onDrawCollapsed(ctx) == false)
 			this.drawNodeCollapsed(ctx,color,this.bgcolor);
 		return;
 	}
 	//clip if required (mask)
 	if(this.flags.clip_area)
 	{
 		ctx.save();
 		if(this.shape == null || this.shape == "box")
 		{
 			ctx.beginPath();
 			ctx.rect(0,0,this.size[0], this.size[1]);
 		}
 		else if (this.shape == "round")
 		{
 			ctx.roundRect(0,0,this.size[0], this.size[1],10);
 		}
 		else if (this.shape == "circle")
 		{
 			ctx.beginPath();
 			ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
 		}
 		ctx.clip();
 	}
 	//draw shape
 	this.drawNodeShape(ctx,color, this.bgcolor, !render_title, this.selected );
 	ctx.shadowColor = "transparent";
 	//connection slots
 	ctx.textAlign = "left";
 	ctx.font = "12px Arial";
 	var render_text = this.graph.config.canvas_scale > 0.6;
 	//input connection slots
 	if(this.inputs)
 		for(var i = 0; i < this.inputs.length; i++)
 		{
 			var slot = this.inputs[i];
 			ctx.globalAlpha = 1.0;
 			if (canvasrender.connecting_node != null && canvasrender.connecting_output.type != 0 && this.inputs[i].type != 0 && canvasrender.connecting_output.type != this.inputs[i].type)
 				ctx.globalAlpha = 0.4;
 			ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
 			var pos = this.getConnectionPos(true,i);
 			pos[0] -= this.pos[0];
 			pos[1] -= this.pos[1];
 			ctx.beginPath();
 			if (1 || slot.round)
 				ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 			//else
 			//	ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
 			ctx.fill();
 			//render name
 			if(render_text)
 			{
 				var text = slot.label != null ? slot.label : slot.name;
 				if(text)
 				{
 					ctx.fillStyle = color; 
 					ctx.fillText(text,pos[0] + 10,pos[1] + 5);
 				}
 			}
 		}
 	//output connection slots
 	if(canvasrender.connecting_node)
 		ctx.globalAlpha = 0.4;
 	ctx.lineWidth = 1;
 	ctx.textAlign = "right";
 	ctx.strokeStyle = "black";
 	if(this.outputs)
 		for(var i = 0; i < this.outputs.length; i++)
 		{
 			var slot = this.outputs[i];
 			var pos = this.getConnectionPos(false,i);
 			pos[0] -= this.pos[0];
 			pos[1] -= this.pos[1];
 			ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
 			ctx.beginPath();
 			//ctx.rect( this.size[0] - 14,i*14,10,10);
 			if (1 || slot.round)
 				ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 			//else
 			//	ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
 			//trigger
 			//if(slot.node_id != null && slot.slot == -1)
 			//	ctx.fillStyle = "#F85";
 			//if(slot.links != null && slot.links.length)
 			ctx.fill();
 			ctx.stroke();
 			//render output name
 			if(render_text)
 			{
 				var text = slot.label != null ? slot.label : slot.name;
 				if(text)
 				{
 					ctx.fillStyle = color;
 					ctx.fillText(text, pos[0] - 10,pos[1] + 5);
 				}
 			}
 		}
 	ctx.textAlign = "left";
 	ctx.globalAlpha = 1.0;
 	if(this.onDrawForeground)
 		this.onDrawForeground(ctx);
 	if(this.flags.clip_area)
 		ctx.restore();
 }
 /* Renders the node shape */
 LGraphNode.prototype.drawNodeShape = function(ctx, fgcolor, bgcolor, no_title, selected )
 {
 	//bg rect
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	/* gradient test
 	var grad = ctx.createLinearGradient(0,0,0,this.size[1]);
 	grad.addColorStop(0, "#AAA");
 	grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
 	grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
 	ctx.fillStyle = grad;
 	*/
 	var title_height = LiteGraph.NODE_TITLE_HEIGHT;
 	//render depending on shape
 	if(this.shape == null || this.shape == "box")
 	{
 		if(selected)
 		{
 			ctx.strokeStyle = "#CCC";
 			ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5,this.size[0]+2, no_title ? (this.size[1]+2) : (this.size[1] + title_height+2) );
 			ctx.strokeStyle = fgcolor;
 		}
 		ctx.beginPath();
 		ctx.rect(0.5,no_title ? 0.5 : -title_height + 0.5,this.size[0], no_title ? this.size[1] : this.size[1] + title_height);
 	}
 	else if (this.shape == "round")
 	{
 		ctx.roundRect(0,no_title ? 0 : -title_height,this.size[0], no_title ? this.size[1] : this.size[1] + title_height, 10);
 	}
 	else if (this.shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
 	}
 	ctx.fill();
 	ctx.shadowColor = "transparent";
 	ctx.stroke();
 	//image
 	if (this.bgImage && this.bgImage.width)
 		ctx.drawImage( this.bgImage, (this.size[0] - this.bgImage.width) * 0.5 , (this.size[1] - this.bgImage.height) * 0.5);
 	if(this.bgImageUrl && !this.bgImage)
 		this.bgImage = this.loadImage(this.bgImageUrl);
 	if(this.onDrawBackground)
 		this.onDrawBackground(ctx);
 	//title bg
 	if(!no_title)
 	{
 		ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 		if(this.shape == null || this.shape == "box")
 		{
 			ctx.fillRect(0,-title_height,this.size[0],title_height);
 			ctx.stroke();
 		}
 		else if (this.shape == "round")
 		{
 			ctx.roundRect(0,-title_height,this.size[0], title_height,10,0);
 			//ctx.fillRect(0,8,this.size[0],NODE_TITLE_HEIGHT - 12);
 			ctx.fill();
 			ctx.stroke();
 		}
 		//box
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		if (this.shape == "round")
 			ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
 		else
 			ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
 		ctx.fill();
 		//title text
 		ctx.font = "bold 12px Arial";
 		if(this.name != "" && this.graph.config.canvas_scale > 0.8)
 		{
 			ctx.fillStyle = "#222";
 			ctx.fillText(this.name,16,13-title_height );
 		}
 	}
 }
 /* Renders the node when collapsed */
 LGraphNode.prototype.drawNodeCollapsed = function(ctx, fgcolor, bgcolor)
 {
 	//draw default collapsed shape
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
 	//circle shape
 	if(this.shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
 		ctx.fill();
 	}
 	else if(this.shape == "round") //rounded box
 	{
 		ctx.beginPath();
 		ctx.roundRect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.roundRect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
 		ctx.fill();
 	}
 	else //flat box
 	{
 		ctx.beginPath();
 		ctx.rect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.rect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
 		ctx.fill();
 	}
 }
 /* Force align to grid */
 LGraphNode.prototype.alignToGrid = function()
 {
@@ -2947,14 +2630,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
 		for (var i in visible_nodes)
 		{
-			var n = visible_nodes[i];
+			var node = visible_nodes[i];
 			//transform coords system
 			ctx.save();
-			ctx.translate( n.pos[0], n.pos[1] );
+			ctx.translate( node.pos[0], node.pos[1] );
 			//Draw
-			n.draw(ctx,this);
+			this.drawNode(node, ctx );
 			drawn_nodes += 1;
 			//Restore
@@ -3091,6 +2774,349 @@ LGraphCanvas.prototype.drawBgcanvas = function()
 	this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas 
 }
 /* Renders the LGraphNode on the canvas */
 LGraphCanvas.prototype.drawNode = function(node, ctx )
 {
 	var glow = false;
 	var color = node.color || LiteGraph.NODE_DEFAULT_COLOR;
 	//if (this.selected) color = "#88F";
 	var render_title = true;
 	if(node.flags.skip_title_render || node.graph.isLive())
 		render_title = false;
 	if(node.mouseOver)
 		render_title = true;
 	//shadow and glow
 	if (node.mouseOver) glow = true;
 	if(node.selected)
 	{
 		/*
 		ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
 		ctx.shadowOffsetX = 0;
 		ctx.shadowOffsetY = 0;
 		ctx.shadowBlur = 1;
 		*/
 	}
 	else if(this.render_shadows)
 	{
 		ctx.shadowColor = "#111";
 		ctx.shadowOffsetX = 2;
 		ctx.shadowOffsetY = 2;
 		ctx.shadowBlur = 4;
 	}
 	else
 		ctx.shadowColor = "transparent";
 	//only render if it forces it to do it
 	if(this.live_mode)
 	{
 		if(!node.flags.collapsed)
 		{
 			ctx.shadowColor = "transparent";
 			if(node.onDrawBackground)
 				node.onDrawBackground(ctx);
 			if(node.onDrawForeground)
 				node.onDrawForeground(ctx);
 		}
 		return;
 	}
 	//draw in collapsed form
 	/*
 	if(node.flags.collapsed)
 	{
 		if(!node.onDrawCollapsed || node.onDrawCollapsed(ctx) == false)
 			this.drawNodeCollapsed(node, ctx, color, node.bgcolor);
 		return;
 	}
 	*/
 	//clip if required (mask)
 	var shape = node.shape || "box";
 	var size = new Float32Array(node.size);
 	if(node.flags.collapsed)
 		size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]);
 	//Start cliping
 	if(node.flags.clip_area)
 	{
 		ctx.save();
 		if(shape == "box")
 		{
 			ctx.beginPath();
 			ctx.rect(0,0,size[0], size[1]);
 		}
 		else if (shape == "round")
 		{
 			ctx.roundRect(0,0,size[0], size[1],10);
 		}
 		else if (shape == "circle")
 		{
 			ctx.beginPath();
 			ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
 		}
 		ctx.clip();
 	}
 	//draw shape
 	this.drawNodeShape(node, ctx, size, color, node.bgcolor, !render_title, node.selected );
 	ctx.shadowColor = "transparent";
 	//connection slots
 	ctx.textAlign = "left";
 	ctx.font = "12px Arial";
 	var render_text = node.graph.config.canvas_scale > 0.6;
 	//render inputs and outputs
 	if(!node.flags.collapsed)
 	{
 		//input connection slots
 		if(node.inputs)
 			for(var i = 0; i < node.inputs.length; i++)
 			{
 				var slot = node.inputs[i];
 				ctx.globalAlpha = 1.0;
 				if (this.connecting_node != null && this.connecting_output.type != 0 && node.inputs[i].type != 0 && this.connecting_output.type != node.inputs[i].type)
 					ctx.globalAlpha = 0.4;
 				ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
 				var pos = node.getConnectionPos(true,i);
 				pos[0] -= node.pos[0];
 				pos[1] -= node.pos[1];
 				ctx.beginPath();
 				if (1 || slot.round)
 					ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 				//else
 				//	ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
 				ctx.fill();
 				//render name
 				if(render_text)
 				{
 					var text = slot.label != null ? slot.label : slot.name;
 					if(text)
 					{
 						ctx.fillStyle = color; 
 						ctx.fillText(text,pos[0] + 10,pos[1] + 5);
 					}
 				}
 			}
 		//output connection slots
 		if(this.connecting_node)
 			ctx.globalAlpha = 0.4;
 		ctx.lineWidth = 1;
 		ctx.textAlign = "right";
 		ctx.strokeStyle = "black";
 		if(node.outputs)
 			for(var i = 0; i < node.outputs.length; i++)
 			{
 				var slot = node.outputs[i];
 				var pos = node.getConnectionPos(false,i);
 				pos[0] -= node.pos[0];
 				pos[1] -= node.pos[1];
 				ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
 				ctx.beginPath();
 				//ctx.rect( node.size[0] - 14,i*14,10,10);
 				if (1 || slot.round)
 					ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 				//else
 				//	ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
 				//trigger
 				//if(slot.node_id != null && slot.slot == -1)
 				//	ctx.fillStyle = "#F85";
 				//if(slot.links != null && slot.links.length)
 				ctx.fill();
 				ctx.stroke();
 				//render output name
 				if(render_text)
 				{
 					var text = slot.label != null ? slot.label : slot.name;
 					if(text)
 					{
 						ctx.fillStyle = color;
 						ctx.fillText(text, pos[0] - 10,pos[1] + 5);
 					}
 				}
 			}
 		ctx.textAlign = "left";
 		ctx.globalAlpha = 1.0;
 		if(node.onDrawForeground)
 			node.onDrawForeground(ctx);
 	}//!collapsed
 	if(node.flags.clip_area)
 		ctx.restore();
 }
 /* Renders the node shape */
 LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolor, no_title, selected )
 {
 	//bg rect
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	/* gradient test
 	var grad = ctx.createLinearGradient(0,0,0,node.size[1]);
 	grad.addColorStop(0, "#AAA");
 	grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
 	grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
 	ctx.fillStyle = grad;
 	*/
 	var title_height = LiteGraph.NODE_TITLE_HEIGHT;
 	//render depending on shape
 	var shape = node.shape || "box";
 	if(shape == "box")
 	{
 		if(selected)
 		{
 			ctx.strokeStyle = "#CCC";
 			ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) );
 			ctx.strokeStyle = fgcolor;
 		}
 		ctx.beginPath();
 		ctx.rect(0,no_title ? 0.5 : -title_height + 1,size[0]+1, no_title ? size[1] : size[1] + title_height);
 	}
 	else if (node.shape == "round")
 	{
 		ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10);
 	}
 	else if (node.shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
 	}
 	ctx.fill();
 	ctx.shadowColor = "transparent";
 	//ctx.stroke();
 	//image
 	if (node.bgImage && node.bgImage.width)
 		ctx.drawImage( node.bgImage, (size[0] - node.bgImage.width) * 0.5 , (size[1] - node.bgImage.height) * 0.5);
 	if(node.bgImageUrl && !node.bgImage)
 		node.bgImage = node.loadImage(node.bgImageUrl);
 	if(node.onDrawBackground)
 		node.onDrawBackground(ctx);
 	//title bg
 	if(!no_title)
 	{
 		ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 		if(shape == "box")
 		{
 			ctx.beginPath();
 			ctx.fillRect(0,-title_height,size[0]+1,title_height);
 			ctx.stroke();
 		}
 		else if (shape == "round")
 		{
 			ctx.roundRect(0,-title_height,size[0], title_height,10,0);
 			//ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12);
 			ctx.fill();
 			ctx.stroke();
 		}
 		//box
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		if (shape == "round")
 			ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
 		else
 			ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
 		ctx.fill();
 		//title text
 		ctx.font = "bold 12px Arial";
 		if(node.name != "" && node.graph.config.canvas_scale > 0.8)
 		{
 			ctx.fillStyle = "#222";
 			ctx.fillText(node.name,16,13-title_height );
 		}
 	}
 }
 /* Renders the node when collapsed */
 LGraphCanvas.prototype.drawNodeCollapsed = function(node, ctx, fgcolor, bgcolor)
 {
 	//draw default collapsed shape
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
 	//circle shape
 	var shape = node.shape || "box";
 	if(shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
 		ctx.fill();
 	}
 	else if(shape == "round") //rounded box
 	{
 		ctx.beginPath();
 		ctx.roundRect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.roundRect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
 		ctx.fill();
 	}
 	else //flat box
 	{
 		ctx.beginPath();
 		//ctx.rect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius, 2*collapsed_radius);
 		ctx.rect(0, 0, node.size[0], collapsed_radius * 2 );
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		//ctx.rect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
 		ctx.rect(collapsed_radius*0.5, collapsed_radius*0.5, collapsed_radius, collapsed_radius);
 		ctx.fill();
 	}
 }
 LGraphCanvas.link_colors = ["#AAC","#ACA","#CAA"];
 LGraphCanvas.prototype.drawConnections = function(ctx)
--- a/build/litegraph.min.js
+++ b/build/litegraph.min.js
@@ -1,8 +1,8 @@
-var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#888",NODE_DEFAULT_BGCOLOR:"#333",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,registered_node_types:{},graphs:[],registerNodeType:function(a,b){b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,
+var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",debug:!1,registered_node_types:{},graphs:[],registerNodeType:function(a,b){b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");
-c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;var e=d.prototype||d;b=b||e.title||d.title||a;var f=null;if(d.prototype)f=new d(b);else{f=new LGraphNode(b);f.inputs=[];f.outputs=[];for(var g in e)if("inputs"==g)for(var h in e[g])f.addInput(e[g][h][0],e[g][h][1],
+b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;var e=d.prototype||d;b=b||e.title||d.title||a;var f=null;if(d.prototype)f=new d(b);else{f=new LGraphNode(b);f.inputs=[];f.outputs=[];for(var g in e)if("inputs"==g)for(var h in e[g])f.addInput(e[g][h][0],
-e[g][h][2]);else if("outputs"==g)for(h in e[g])f.addOutput(e[g][h][0],e[g][h][1],e[g][h][2]);else f[g]=e[g].concat?e[g].concat():"object"==typeof e[g]?jQuery.extend({},e[g]):e[g];d.size&&(f.size=d.size.concat())}f.type=a;f.name||(f.name=b);f.flags||(f.flags={});f.size||(f.size=f.computeSize());f.pos||(f.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(g in c)f[g]=c[g];return f},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==
+e[g][h][1],e[g][h][2]);else if("outputs"==g)for(h in e[g])f.addOutput(e[g][h][0],e[g][h][1],e[g][h][2]);else f[g]=e[g].concat?e[g].concat():"object"==typeof e[g]?jQuery.extend({},e[g]):e[g];d.size&&(f.size=d.size.concat())}f.type=a;f.name||(f.name=b);f.flags||(f.flags={});f.size||(f.size=f.computeSize());f.pos||(f.pos=LiteGraph.DEFAULT_POSITION.concat());if(c)for(g in c)f[g]=c[g];return f},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;
-a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=
+for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),
-[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}for(d in LiteGraph.graphs)for(var h in LiteGraph.graphs[d].nodes)if(a=LiteGraph.graphs[d].nodes[h],
+c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}for(d in LiteGraph.graphs)for(var h in LiteGraph.graphs[d].nodes)if(a=LiteGraph.graphs[d].nodes[h],
 c=LiteGraph.getNodeType(n.type))for(var k in c)"function"==typeof c[k]&&(a[k]=c[k]);LiteGraph.debug&&console.log("Nodes reloaded")}};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.canvas=null;LiteGraph.graphs.push(this);this.clear()}LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2;
 LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this.nodes=[];this.nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={canvas_offset:[0,0],canvas_scale:1};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.graph={};this.debug=!0;this.change();this.canvas&&this.canvas.clear()};
 LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=(new Date).getTime();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1)}};
@@ -27,28 +27,18 @@ LGraphNode.prototype.isInputConnected=function(a){return this.inputs?a<this.inpu
 LGraphNode.prototype.getOutputNodes=function(a){if(!this.outputs||0==this.outputs.length)return null;if(a<this.outputs.length){a=this.outputs[a];for(var b=[],c=0;c<a.length;c++)b.push(this.graph.getNodeById(a.links[c][3]));return b}return null};LGraphNode.prototype.triggerOutput=function(a,b){var c=this.getOutputNode(a);if(c&&c.onTrigger)c.onTrigger(b)};
 LGraphNode.prototype.addOutput=function(a,b,c){a={name:a,type:b,links:null};if(c)for(var d in c)a[d]=c[d];this.outputs||(this.outputs=[]);this.outputs.push(a);this.size=this.computeSize()};LGraphNode.prototype.removeOutput=function(a){this.disconnectOutput(a);this.outputs.splice(a,1);this.size=this.computeSize()};LGraphNode.prototype.addInput=function(a,b,c){a={name:a,type:b,link:null};if(c)for(var d in c)a[d]=c[d];this.inputs||(this.inputs=[]);this.inputs.push(a);this.size=this.computeSize()};
 LGraphNode.prototype.removeInput=function(a){this.disconnectInput(a);this.inputs.splice(a,1);this.size=this.computeSize()};LGraphNode.prototype.addConnection=function(a,b,c,d){this.connections.push({name:a,type:b,pos:c,direction:d,links:null})};
-LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=[0,0];b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-LGraph.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};
+LGraphNode.prototype.computeSize=function(a){a=Math.max(this.inputs?this.inputs.length:1,this.outputs?this.outputs.length:1);var b=[0,0];b[1]=14*a+6;b[0]=this.inputs&&0!=this.inputs.length&&this.outputs&&0!=this.outputs.length?LiteGraph.NODE_WIDTH:0.5*LiteGraph.NODE_WIDTH;return b};LGraphNode.prototype.getBounding=function(){return new Float32Array([this.pos[0]-4,this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,this.pos[0]+this.size[0]+4,this.pos[1]+this.size[1]+LGraph.NODE_TITLE_HEIGHT])};
-LGraphNode.prototype.isPointInsideNode=function(a,b){var c=this.graph.isLive()?0:20;if(this.flags.collapsed){if(distance([a,b],[this.pos[0]+0.5*this.size[0],this.pos[1]+0.5*this.size[1]])<LiteGraph.NODE_COLLAPSED_RADIUS)return!0}else if(this.pos[0]-4<a&&this.pos[0]+this.size[0]+4>a&&this.pos[1]-c<b&&this.pos[1]+this.size[1]>b)return!0;return!1};LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b<c;++b)if(a==this.inputs[b].name)return b;return-1};
+LGraphNode.prototype.isPointInsideNode=function(a,b){var c=this.graph.isLive()?0:20;if(this.flags.collapsed){if(isInsideRectangle(a,b,this.pos[0],this.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_COLLAPSED_WIDTH,LiteGraph.NODE_TITLE_HEIGHT))return!0}else if(this.pos[0]-4<a&&this.pos[0]+this.size[0]+4>a&&this.pos[1]-c<b&&this.pos[1]+this.size[1]>b)return!0;return!1};
-LGraphNode.prototype.findOutputSlot=function(a){if(!this.outputs)return-1;for(var b=0,c=this.outputs.length;b<c;++b)if(a==this.outputs[b].name)return b;return-1};
+LGraphNode.prototype.findInputSlot=function(a){if(!this.inputs)return-1;for(var b=0,c=this.inputs.length;b<c;++b)if(a==this.inputs[b].name)return b;return-1};LGraphNode.prototype.findOutputSlot=function(a){if(!this.outputs)return-1;for(var b=0,c=this.outputs.length;b<c;++b)if(a==this.outputs[b].name)return b;return-1};
 LGraphNode.prototype.connect=function(a,b,c){c=c||0;if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(b==this)return!1;if(c.constructor===String){if(c=b.findInputSlot(c),-1==c)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+c),!1}else if(!b.inputs||c>=b.inputs.length)return LiteGraph.debug&&
 console.log("Connect: Error, slot number not found"),!1;-1!=c&&null!=b.inputs[c].link&&b.disconnectInput(c);var d=this.outputs[a];if(-1==c)null==d.links&&(d.links=[]),d.links.push({id:b.id,slot:-1});else if(0==d.type||0==b.inputs[c].type||d.type==b.inputs[c].type)a=[this.graph.last_link_id++,this.id,a,b.id,c],null==d.links&&(d.links=[]),d.links.push(a),b.inputs[c].link=a,this.setDirtyCanvas(!1,!0),this.graph.onConnectionChange();return!0};
 LGraphNode.prototype.disconnectOutput=function(a,b){if(a.constructor===String){if(a=this.findOutputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.outputs||a>=this.outputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;var c=this.outputs[a];if(!c.links||0==c.links.length)return!1;if(b)for(var d=0,e=c.links.length;d<e;d++){var f=c.links[d];if(f[3]==b.id){c.links.splice(d,1);b.inputs[f[4]].link=null;delete this.graph.links[f[0]];
 break}}else{d=0;for(e=c.links.length;d<e;d++)if(f=c.links[d],b=this.graph.getNodeById(f[3]))b.inputs[f[4]].link=null;c.links=null}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
 LGraphNode.prototype.disconnectInput=function(a){if(a.constructor===String){if(a=this.findInputSlot(a),-1==a)return LiteGraph.debug&&console.log("Connect: Error, no slot of name "+a),!1}else if(!this.inputs||a>=this.inputs.length)return LiteGraph.debug&&console.log("Connect: Error, slot number not found"),!1;if(!this.inputs[a])return!1;var b=this.inputs[a].link;this.inputs[a].link=null;a=this.graph.getNodeById(b[1]);if(!a)return!1;a=a.outputs[b[2]];if(!a||!a.links||0==a.links.length)return!1;for(var c=
 0,d=a.links.length;c<d;c++)if(b=a.links[c],b[3]==this.id){a.links.splice(c,1);break}this.setDirtyCanvas(!1,!0);this.graph.onConnectionChange();return!0};
-LGraphNode.prototype.getConnectionPos=function(a,b){return this.flags.collapsed?[this.pos[0]+0.5*this.size[0],this.pos[1]+0.5*this.size[1]]:a&&-1==b?[this.pos[0]+10,this.pos[1]+10]:a&&this.inputs.length>b&&this.inputs[b].pos?[this.pos[0]+this.inputs[b].pos[0],this.pos[1]+this.inputs[b].pos[1]]:!a&&this.outputs.length>b&&this.outputs[b].pos?[this.pos[0]+this.outputs[b].pos[0],this.pos[1]+this.outputs[b].pos[1]]:a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.size[0]+1,
+LGraphNode.prototype.getConnectionPos=function(a,b){return this.flags.collapsed?a?[this.pos[0],this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:[this.pos[0]+LiteGraph.NODE_COLLAPSED_WIDTH,this.pos[1]-0.5*LiteGraph.NODE_TITLE_HEIGHT]:a&&-1==b?[this.pos[0]+10,this.pos[1]+10]:a&&this.inputs.length>b&&this.inputs[b].pos?[this.pos[0]+this.inputs[b].pos[0],this.pos[1]+this.inputs[b].pos[1]]:!a&&this.outputs.length>b&&this.outputs[b].pos?[this.pos[0]+this.outputs[b].pos[0],this.pos[1]+this.outputs[b].pos[1]]:
-this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]};
+a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.size[0]+1,this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]};LGraphNode.prototype.alignToGrid=function(){this.pos[0]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[0]/LiteGraph.CANVAS_GRID_SIZE);this.pos[1]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[1]/LiteGraph.CANVAS_GRID_SIZE)};
-LGraphNode.prototype.draw=function(a,b){var c=this.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(this.flags.skip_title_render||this.graph.isLive())d=!1;this.mouseOver&&(d=!0);this.selected||(b.render_shadows?(a.shadowColor="#111",a.shadowOffsetX=2,a.shadowOffsetY=2,a.shadowBlur=4):a.shadowColor="transparent");if(b.live_mode){if(!this.flags.collapsed){a.shadowColor="transparent";if(this.onDrawBackground)this.onDrawBackground(a);if(this.onDrawForeground)this.onDrawForeground(a)}}else if(this.flags.collapsed)this.onDrawCollapsed&&!1!=
+LGraphNode.prototype.copyFromObject=function(a,b){for(var c in a)(!b||"outputs"!=c&&"inputs"!=c)&&"console"!=c&&null!=a[c]&&(this[c]=a[c].concat?a[c].concat():"object"==typeof a[c]?jQuery.extend({},a[c]):a[c])};
 this.onDrawCollapsed(a)||this.drawNodeCollapsed(a,c,this.bgcolor);else{this.flags.clip_area&&(a.save(),null==this.shape||"box"==this.shape?(a.beginPath(),a.rect(0,0,this.size[0],this.size[1])):"round"==this.shape?a.roundRect(0,0,this.size[0],this.size[1],10):"circle"==this.shape&&(a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],0.5*this.size[0],0,2*Math.PI)),a.clip());this.drawNodeShape(a,c,this.bgcolor,!d,this.selected);a.shadowColor="transparent";a.textAlign="left";a.font="12px Arial";d=0.6<
 this.graph.config.canvas_scale;if(this.inputs)for(var e=0;e<this.inputs.length;e++){var f=this.inputs[e];a.globalAlpha=1;null!=b.connecting_node&&0!=b.connecting_output.type&&0!=this.inputs[e].type&&b.connecting_output.type!=this.inputs[e].type&&(a.globalAlpha=0.4);a.fillStyle=null!=f.link?"#7F7":"#AAA";var g=this.getConnectionPos(!0,e);g[0]-=this.pos[0];g[1]-=this.pos[1];a.beginPath();a.arc(g[0],g[1],4,0,2*Math.PI);a.fill();d&&(f=null!=f.label?f.label:f.name)&&(a.fillStyle=c,a.fillText(f,g[0]+10,
 g[1]+5))}b.connecting_node&&(a.globalAlpha=0.4);a.lineWidth=1;a.textAlign="right";a.strokeStyle="black";if(this.outputs)for(e=0;e<this.outputs.length;e++)if(f=this.outputs[e],g=this.getConnectionPos(!1,e),g[0]-=this.pos[0],g[1]-=this.pos[1],a.fillStyle=f.links&&f.links.length?"#7F7":"#AAA",a.beginPath(),a.arc(g[0],g[1],4,0,2*Math.PI),a.fill(),a.stroke(),d&&(f=null!=f.label?f.label:f.name))a.fillStyle=c,a.fillText(f,g[0]-10,g[1]+5);a.textAlign="left";a.globalAlpha=1;if(this.onDrawForeground)this.onDrawForeground(a);
 this.flags.clip_area&&a.restore()}};
 LGraphNode.prototype.drawNodeShape=function(a,b,c,d,e){a.strokeStyle=b||LiteGraph.NODE_DEFAULT_COLOR;a.fillStyle=c||LiteGraph.NODE_DEFAULT_BGCOLOR;c=LiteGraph.NODE_TITLE_HEIGHT;null==this.shape||"box"==this.shape?(e&&(a.strokeStyle="#CCC",a.strokeRect(-0.5,d?-0.5:-c+-0.5,this.size[0]+2,d?this.size[1]+2:this.size[1]+c+2),a.strokeStyle=b),a.beginPath(),a.rect(0.5,d?0.5:-c+0.5,this.size[0],d?this.size[1]:this.size[1]+c)):"round"==this.shape?a.roundRect(0,d?0:-c,this.size[0],d?this.size[1]:this.size[1]+
 c,10):"circle"==this.shape&&(a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],0.5*this.size[0],0,2*Math.PI));a.fill();a.shadowColor="transparent";a.stroke();this.bgImage&&this.bgImage.width&&a.drawImage(this.bgImage,0.5*(this.size[0]-this.bgImage.width),0.5*(this.size[1]-this.bgImage.height));this.bgImageUrl&&!this.bgImage&&(this.bgImage=this.loadImage(this.bgImageUrl));if(this.onDrawBackground)this.onDrawBackground(a);d||(a.fillStyle=b||LiteGraph.NODE_DEFAULT_COLOR,null==this.shape||"box"==
 this.shape?(a.fillRect(0,-c,this.size[0],c),a.stroke()):"round"==this.shape&&(a.roundRect(0,-c,this.size[0],c,10,0),a.fill(),a.stroke()),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),"round"==this.shape?a.arc(0.5*c,-0.5*c,0.5*(c-6),0,2*Math.PI):a.rect(3,-c+3,c-6,c-6),a.fill(),a.font="bold 12px Arial",""!=this.name&&0.8<this.graph.config.canvas_scale&&(a.fillStyle="#222",a.fillText(this.name,16,13-c)))};
 LGraphNode.prototype.drawNodeCollapsed=function(a,b,c){a.strokeStyle=b||LiteGraph.NODE_DEFAULT_COLOR;a.fillStyle=c||LiteGraph.NODE_DEFAULT_BGCOLOR;b=LiteGraph.NODE_COLLAPSED_RADIUS;"circle"==this.shape?(a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],b,0,2*Math.PI),a.fill(),a.shadowColor="rgba(0,0,0,0)",a.stroke(),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),a.arc(0.5*this.size[0],0.5*this.size[1],0.5*b,0,2*Math.PI)):"round"==this.shape?(a.beginPath(),a.roundRect(0.5*
 this.size[0]-b,0.5*this.size[1]-b,2*b,2*b,5),a.fill(),a.shadowColor="rgba(0,0,0,0)",a.stroke(),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),a.roundRect(0.5*this.size[0]-0.5*b,0.5*this.size[1]-0.5*b,b,b,2)):(a.beginPath(),a.rect(0.5*this.size[0]-b,0.5*this.size[1]-b,2*b,2*b),a.fill(),a.shadowColor="rgba(0,0,0,0)",a.stroke(),a.fillStyle=this.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,a.beginPath(),a.rect(0.5*this.size[0]-0.5*b,0.5*this.size[1]-0.5*b,b,b));a.fill()};
 LGraphNode.prototype.alignToGrid=function(){this.pos[0]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[0]/LiteGraph.CANVAS_GRID_SIZE);this.pos[1]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[1]/LiteGraph.CANVAS_GRID_SIZE)};LGraphNode.prototype.copyFromObject=function(a,b){for(var c in a)(!b||"outputs"!=c&&"inputs"!=c)&&"console"!=c&&null!=a[c]&&(this[c]=a[c].concat?a[c].concat():"object"==typeof a[c]?jQuery.extend({},a[c]):a[c])};
 LGraphNode.prototype.clone=function(){var a=LiteGraph.createNode(this.type);a.size=this.size.concat();if(this.inputs)for(var b=0,c=this.inputs.length;b<c;++b)-1==a.findInputSlot(this.inputs[b].name)&&a.addInput(this.inputs[b].name,this.inputs[b].type);if(this.outputs)for(b=0,c=this.outputs.length;b<c;++b)-1==a.findOutputSlot(this.outputs[b].name)&&a.addOutput(this.outputs[b].name,this.outputs[b].type);return a};
 LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.canvas&&(a&&(this.graph.canvas.dirty_canvas=!0),b&&(this.graph.canvas.dirty_bgcanvas=!0))};
 LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b};
@@ -91,11 +81,21 @@ LGraphCanvas.prototype.computeVisibleNodes=function(){var a=[],b;for(b in this.g
 LGraphCanvas.prototype.draw=function(a,b){var c=(new Date).getTime();this.render_time=0.001*(c-this.last_draw_time);this.last_draw_time=c;if(this.graph){var c=[-this.graph.config.canvas_offset[0],-this.graph.config.canvas_offset[1]],d=[c[0]+this.canvas.width/this.graph.config.canvas_scale,c[1]+this.canvas.height/this.graph.config.canvas_scale];this.visible_area=new Float32Array([c[0],c[1],d[0],d[1]])}(this.dirty_bgcanvas||b)&&this.drawBgcanvas();(this.dirty_canvas||a)&&this.drawFrontCanvas();this.fps=
 this.render_time?1/this.render_time:0;this.frame+=1};
 LGraphCanvas.prototype.drawFrontCanvas=function(){var a=this.ctx,b=this.canvas;a.restore();a.setTransform(1,0,0,1,0,0);this.dirty_area&&(a.save(),a.beginPath(),a.rect(this.dirty_area[0],this.dirty_area[1],this.dirty_area[2],this.dirty_area[3]),a.clip());a.clearRect(0,0,b.width,b.height);a.drawImage(this.bgcanvas,0,0);this.show_info&&(a.font="10px Arial",a.fillStyle="#888",this.graph?(a.fillText("T: "+this.graph.globaltime.toFixed(2)+"s",5,13),a.fillText("I: "+this.graph.iteration,5,26),a.fillText("F: "+
-this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);a.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);d.draw(a,this);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=this.connecting_pos&&
+this.frame,5,39),a.fillText("FPS:"+this.fps.toFixed(2),5,52)):a.fillText("No graph selected",5,13));if(this.graph){a.save();a.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);a.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);this.visible_nodes=b=this.computeVisibleNodes();for(var c in b){var d=b[c];a.save();a.translate(d.pos[0],d.pos[1]);this.drawNode(d,a);a.restore()}this.graph.config.links_ontop&&(this.live_mode||this.drawConnections(a));null!=
-(a.lineWidth=LGraphCanvas.link_width,a.fillStyle="node"==this.connecting_output.type?"#F85":"#AFA",a.strokeStyle=a.fillStyle,this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]]),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();this.dirty_canvas=!1};
+this.connecting_pos&&(a.lineWidth=LGraphCanvas.link_width,a.fillStyle="node"==this.connecting_output.type?"#F85":"#AFA",a.strokeStyle=a.fillStyle,this.renderLink(a,this.connecting_pos,[this.canvas_mouse[0],this.canvas_mouse[1]]),a.beginPath(),a.arc(this.connecting_pos[0],this.connecting_pos[1],4,0,2*Math.PI),a.fill(),a.fillStyle="#ffcc00",this._highlight_input&&(a.beginPath(),a.arc(this._highlight_input[0],this._highlight_input[1],6,0,2*Math.PI),a.fill()));a.restore()}this.dirty_area&&a.restore();
 this.dirty_canvas=!1};
 LGraphCanvas.prototype.drawBgcanvas=function(){var a=this.bgcanvas,b=this.bgctx;a.width=a.width;b.restore();b.setTransform(1,0,0,1,0,0);if(this.graph){b.save();b.scale(this.graph.config.canvas_scale,this.graph.config.canvas_scale);b.translate(this.graph.config.canvas_offset[0],this.graph.config.canvas_offset[1]);if(this.background_image&&0.5<this.graph.config.canvas_scale){b.globalAlpha=1-0.5/this.graph.config.canvas_scale;b.webkitImageSmoothingEnabled=b.mozImageSmoothingEnabled=b.imageSmoothingEnabled=
 !1;if(!this._bg_img||this._bg_img.name!=this.background_image){this._bg_img=new Image;this._bg_img.name=this.background_image;this._bg_img.src=this.background_image;var c=this;this._bg_img.onload=function(){c.draw(!0,!0)}}var d=null;this._bg_img!=this._pattern_img&&0<this._bg_img.width?(d=b.createPattern(this._bg_img,"repeat"),this._pattern_img=this._bg_img,this._pattern=d):d=this._pattern;d&&(b.fillStyle=d,b.fillRect(this.visible_area[0],this.visible_area[1],this.visible_area[2]-this.visible_area[0],
-this.visible_area[3]-this.visible_area[1]),b.fillStyle="transparent");b.globalAlpha=1}b.strokeStyle="#235";b.strokeRect(0,0,a.width,a.height);this.live_mode||this.drawConnections(b);b.restore()}this.dirty_bgcanvas=!1;this.dirty_canvas=!0};LGraphCanvas.link_colors=["#AAC","#ACA","#CAA"];
+this.visible_area[3]-this.visible_area[1]),b.fillStyle="transparent");b.globalAlpha=1}b.strokeStyle="#235";b.strokeRect(0,0,a.width,a.height);this.live_mode||this.drawConnections(b);b.restore()}this.dirty_bgcanvas=!1;this.dirty_canvas=!0};
 LGraphCanvas.prototype.drawNode=function(a,b){var c=a.color||LiteGraph.NODE_DEFAULT_COLOR,d=!0;if(a.flags.skip_title_render||a.graph.isLive())d=!1;a.mouseOver&&(d=!0);a.selected||(this.render_shadows?(b.shadowColor="#111",b.shadowOffsetX=2,b.shadowOffsetY=2,b.shadowBlur=4):b.shadowColor="transparent");if(this.live_mode){if(!a.flags.collapsed){b.shadowColor="transparent";if(a.onDrawBackground)a.onDrawBackground(b);if(a.onDrawForeground)a.onDrawForeground(b)}}else{var e=a.shape||"box",f=new Float32Array(a.size);
 a.flags.collapsed&&f.set([LiteGraph.NODE_COLLAPSED_WIDTH,0]);a.flags.clip_area&&(b.save(),"box"==e?(b.beginPath(),b.rect(0,0,f[0],f[1])):"round"==e?b.roundRect(0,0,f[0],f[1],10):"circle"==e&&(b.beginPath(),b.arc(0.5*f[0],0.5*f[1],0.5*f[0],0,2*Math.PI)),b.clip());this.drawNodeShape(a,b,f,c,a.bgcolor,!d,a.selected);b.shadowColor="transparent";b.textAlign="left";b.font="12px Arial";d=0.6<a.graph.config.canvas_scale;if(!a.flags.collapsed){if(a.inputs)for(e=0;e<a.inputs.length;e++){var g=a.inputs[e];b.globalAlpha=
 1;null!=this.connecting_node&&0!=this.connecting_output.type&&0!=a.inputs[e].type&&this.connecting_output.type!=a.inputs[e].type&&(b.globalAlpha=0.4);b.fillStyle=null!=g.link?"#7F7":"#AAA";f=a.getConnectionPos(!0,e);f[0]-=a.pos[0];f[1]-=a.pos[1];b.beginPath();b.arc(f[0],f[1],4,0,2*Math.PI);b.fill();d&&(g=null!=g.label?g.label:g.name)&&(b.fillStyle=c,b.fillText(g,f[0]+10,f[1]+5))}this.connecting_node&&(b.globalAlpha=0.4);b.lineWidth=1;b.textAlign="right";b.strokeStyle="black";if(a.outputs)for(e=0;e<
 a.outputs.length;e++)if(g=a.outputs[e],f=a.getConnectionPos(!1,e),f[0]-=a.pos[0],f[1]-=a.pos[1],b.fillStyle=g.links&&g.links.length?"#7F7":"#AAA",b.beginPath(),b.arc(f[0],f[1],4,0,2*Math.PI),b.fill(),b.stroke(),d&&(g=null!=g.label?g.label:g.name))b.fillStyle=c,b.fillText(g,f[0]-10,f[1]+5);b.textAlign="left";b.globalAlpha=1;if(a.onDrawForeground)a.onDrawForeground(b)}a.flags.clip_area&&b.restore()}};
 LGraphCanvas.prototype.drawNodeShape=function(a,b,c,d,e,f,g){b.strokeStyle=d||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=e||LiteGraph.NODE_DEFAULT_BGCOLOR;e=LiteGraph.NODE_TITLE_HEIGHT;var h=a.shape||"box";"box"==h?(g&&(b.strokeStyle="#CCC",b.strokeRect(-0.5,f?-0.5:-e+-0.5,c[0]+2,f?c[1]+2:c[1]+e+2),b.strokeStyle=d),b.beginPath(),b.rect(0,f?0.5:-e+1,c[0]+1,f?c[1]:c[1]+e)):"round"==a.shape?b.roundRect(0,f?0:-e,c[0],f?c[1]:c[1]+e,10):"circle"==a.shape&&(b.beginPath(),b.arc(0.5*c[0],0.5*c[1],0.5*c[0],0,
 2*Math.PI));b.fill();b.shadowColor="transparent";a.bgImage&&a.bgImage.width&&b.drawImage(a.bgImage,0.5*(c[0]-a.bgImage.width),0.5*(c[1]-a.bgImage.height));a.bgImageUrl&&!a.bgImage&&(a.bgImage=a.loadImage(a.bgImageUrl));if(a.onDrawBackground)a.onDrawBackground(b);f||(b.fillStyle=d||LiteGraph.NODE_DEFAULT_COLOR,"box"==h?(b.beginPath(),b.fillRect(0,-e,c[0]+1,e),b.stroke()):"round"==h&&(b.roundRect(0,-e,c[0],e,10,0),b.fill(),b.stroke()),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),
 "round"==h?b.arc(0.5*e,-0.5*e,0.5*(e-6),0,2*Math.PI):b.rect(3,-e+3,e-6,e-6),b.fill(),b.font="bold 12px Arial",""!=a.name&&0.8<a.graph.config.canvas_scale&&(b.fillStyle="#222",b.fillText(a.name,16,13-e)))};
 LGraphCanvas.prototype.drawNodeCollapsed=function(a,b,c,d){b.strokeStyle=c||LiteGraph.NODE_DEFAULT_COLOR;b.fillStyle=d||LiteGraph.NODE_DEFAULT_BGCOLOR;c=LiteGraph.NODE_COLLAPSED_RADIUS;d=a.shape||"box";"circle"==d?(b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],c,0,2*Math.PI),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.arc(0.5*a.size[0],0.5*a.size[1],0.5*c,0,2*Math.PI)):"round"==d?(b.beginPath(),b.roundRect(0.5*a.size[0]-
 c,0.5*a.size[1]-c,2*c,2*c,5),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.roundRect(0.5*a.size[0]-0.5*c,0.5*a.size[1]-0.5*c,c,c,2)):(b.beginPath(),b.rect(0,0,a.size[0],2*c),b.fill(),b.shadowColor="rgba(0,0,0,0)",b.stroke(),b.fillStyle=a.boxcolor||LiteGraph.NODE_DEFAULT_BOXCOLOR,b.beginPath(),b.rect(0.5*c,0.5*c,c,c));b.fill()};LGraphCanvas.link_colors=["#AAC","#ACA","#CAA"];
 LGraphCanvas.prototype.drawConnections=function(a){a.lineWidth=LGraphCanvas.link_width;a.fillStyle="#AAA";a.strokeStyle="#AAA";for(var b in this.graph.nodes){var c=this.graph.nodes[b];if(c.inputs&&c.inputs.length)for(var d in c.inputs){var e=c.inputs[d];if(e&&e.link){var f=e.link,e=this.graph.getNodeById(f[1]);if(null!=e){var g=f[2],f=null,f=-1==g?[e.pos[0]+10,e.pos[1]+10]:e.getConnectionPos(!1,g),e=LGraphCanvas.link_type_colors[c.inputs[d].type];null==e&&(e=LGraphCanvas.link_colors[c.id%LGraphCanvas.link_colors.length]);
 a.fillStyle=a.strokeStyle=e;this.renderLink(a,f,c.getConnectionPos(!0,d))}}}}};
 LGraphCanvas.prototype.renderLink=function(a,b,c){if(this.highquality_render){var d=distance(b,c);a.beginPath();a.moveTo(b[0],b[1]);a.bezierCurveTo(b[0]+0.25*d,b[1],c[0]-0.25*d,c[1],c[0],c[1]);a.stroke();0.6<this.graph.config.canvas_scale&&(d=this.computeConnectionPoint(b,c,0.5),b=this.computeConnectionPoint(b,c,0.51),c=0,c=-Math.atan2(b[0]-d[0],b[1]-d[1]),a.save(),a.translate(d[0],d[1]),a.rotate(c),a.beginPath(),a.moveTo(-5,-5),a.lineTo(0,5),a.lineTo(5,-5),a.fill(),a.restore())}else a.beginPath(),
--- a/build/litescene.js
+++ b/build/litescene.js
--- a/demo/code.js
+++ b/demo/code.js
@@ -18,7 +18,7 @@ $(window).load(function() {
 		if(graph.status == LGraph.STATUS_STOPPED)
 		{
 			$(this).html("<img src='imgs/icon-stop.png'/> Stop");
-			graph.run(1); 
+			graph.start(1); 
 		}
 		else
 		{
--- a/doc/api.js
+++ b/doc/api.js
@@ -0,0 +1,11 @@
 YUI.add("yuidoc-meta", function(Y) {
   Y.YUIDoc = { meta: {
    "classes": [
        "LGraph",
        "LGraphNode",
        "LiteGraph"
    ],
    "modules": [],
    "allModules": []
 } };
 });
--- a/doc/assets/css/external-small.png
+++ b/doc/assets/css/external-small.png
--- a/doc/assets/css/logo.png
+++ b/doc/assets/css/logo.png
--- a/doc/assets/css/main.css
+++ b/doc/assets/css/main.css
@@ -0,0 +1,783 @@
 /*
 Font sizes for all selectors other than the body are given in percentages,
 with 100% equal to 13px. To calculate a font size percentage, multiply the
 desired size in pixels by 7.6923076923.
 Here's a quick lookup table:
 10px - 76.923%
 11px - 84.615%
 12px - 92.308%
 13px - 100%
 14px - 107.692%
 15px - 115.385%
 16px - 123.077%
 17px - 130.769%
 18px - 138.462%
 19px - 146.154%
 20px - 153.846%
 */
 html {
    background: #fff;
    color: #333;
    overflow-y: scroll;
 }
 body {
    /*font: 13px/1.4 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', 'Bitstream Vera Sans', 'Helvetica', 'Arial', sans-serif;*/
    font: 13px/1.4 'Helvetica', 'Arial', sans-serif;
    margin: 0;
    padding: 0;
 }
 /* -- Links ----------------------------------------------------------------- */
 a {
    color: #356de4;
    text-decoration: none;
 }
 .hidden {
    display: none;
 }
 a:hover { text-decoration: underline; }
 /* "Jump to Table of Contents" link is shown to assistive tools, but hidden from
   sight until it's focused. */
 .jump {
    position: absolute;
    padding: 3px 6px;
    left: -99999px;
    top: 0;
 }
 .jump:focus { left: 40%; }
 /* -- Paragraphs ------------------------------------------------------------ */
 p { margin: 1.3em 0; }
 dd p, td p { margin-bottom: 0; }
 dd p:first-child, td p:first-child { margin-top: 0; }
 /* -- Headings -------------------------------------------------------------- */
 h1, h2, h3, h4, h5, h6 {
    color: #D98527;/*was #f80*/
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: bold;
    line-height: 1.1;
    margin: 1.1em 0 0.5em;
 }
 h1 {
    font-size: 184.6%;
    color: #30418C;
    margin: 0.75em 0 0.5em;
 }
 h2 {
    font-size: 153.846%;
    color: #E48A2B;
 }
 h3 { font-size: 138.462%; }
 h4 {
    border-bottom: 1px solid #DBDFEA;
    color: #E48A2B;
    font-size: 115.385%;
    font-weight: normal;
    padding-bottom: 2px;
 }
 h5, h6 { font-size: 107.692%; }
 /* -- Code and examples ----------------------------------------------------- */
 code, kbd, pre, samp {
    font-family: Menlo, Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
    font-size: 92.308%;
    line-height: 1.35;
 }
 p code, p kbd, p samp {
    background: #FCFBFA;
    border: 1px solid #EFEEED;
    padding: 0 3px;
 }
 a code, a kbd, a samp,
 pre code, pre kbd, pre samp,
 table code, table kbd, table samp,
 .intro code, .intro kbd, .intro samp,
 .toc code, .toc kbd, .toc samp {
    background: none;
    border: none;
    padding: 0;
 }
 pre.code, pre.terminal, pre.cmd {
    overflow-x: auto;
    *overflow-x: scroll;
    padding: 0.3em 0.6em;
 }
 pre.code {
    background: #FCFBFA;
    border: 1px solid #EFEEED;
    border-left-width: 5px;
 }
 pre.terminal, pre.cmd {
    background: #F0EFFC;
    border: 1px solid #D0CBFB;
    border-left: 5px solid #D0CBFB;
 }
 /* Don't reduce the font size of <code>/<kbd>/<samp> elements inside <pre>
   blocks. */
 pre code, pre kbd, pre samp { font-size: 100%; }
 /* Used to denote text that shouldn't be selectable, such as line numbers or
   shell prompts. Guess which browser this doesn't work in. */
 .noselect {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
 }
 /* -- Lists ----------------------------------------------------------------- */
 dd { margin: 0.2em 0 0.7em 1em; }
 dl { margin: 1em 0; }
 dt { font-weight: bold; }
 /* -- Tables ---------------------------------------------------------------- */
 caption, th { text-align: left; }
 table {
    border-collapse: collapse;
    width: 100%;
 }
 td, th {
    border: 1px solid #fff;
    padding: 5px 12px;
    vertical-align: top;
 }
 td { background: #E6E9F5; }
 td dl { margin: 0; }
 td dl dl { margin: 1em 0; }
 td pre:first-child { margin-top: 0; }
 th {
    background: #D2D7E6;/*#97A0BF*/
    border-bottom: none;
    border-top: none;
    color: #000;/*#FFF1D5*/
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: bold;
    line-height: 1.3;
    white-space: nowrap;
 }
 /* -- Layout and Content ---------------------------------------------------- */
 #doc {
    margin: auto;
    min-width: 1024px;
 }
 .content { padding: 0 20px 0 25px; }
 .sidebar {
    padding: 0 15px 0 10px;
 }
 #bd {
    padding: 7px 0 130px;
    position: relative;
    width: 99%;
 }
 /* -- Table of Contents ----------------------------------------------------- */
 /* The #toc id refers to the single global table of contents, while the .toc
   class refers to generic TOC lists that could be used throughout the page. */
 .toc code, .toc kbd, .toc samp { font-size: 100%; }
 .toc li { font-weight: bold; }
 .toc li li { font-weight: normal; }
 /* -- Intro and Example Boxes ----------------------------------------------- */
 /*
 .intro, .example { margin-bottom: 2em; }
 .example {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 0 5px #bfbfbf;
    -webkit-box-shadow: 0 0 5px #bfbfbf;
    box-shadow: 0 0 5px #bfbfbf;
    padding: 1em;
 }
 .intro {
    background: none repeat scroll 0 0 #F0F1F8; border: 1px solid #D4D8EB; padding: 0 1em;
 }
 */
 /* -- Other Styles ---------------------------------------------------------- */
 /* These are probably YUI-specific, and should be moved out of Selleck's default
   theme. */
 .button {
    border: 1px solid #dadada;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #444;
    display: inline-block;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 92.308%;
    font-weight: bold;
    padding: 4px 13px 3px;
    -moz-text-shadow: 1px 1px 0 #fff;
    -webkit-text-shadow: 1px 1px 0 #fff;
    text-shadow: 1px 1px 0 #fff;
    white-space: nowrap;
    background: #EFEFEF; /* old browsers */
    background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#efefef), color-stop(51%,#e5e5e5), color-stop(100%,#dfdfdf)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
 }
 .button:hover {
    border-color: #466899;
    color: #fff;
    text-decoration: none;
    -moz-text-shadow: 1px 1px 0 #222;
    -webkit-text-shadow: 1px 1px 0 #222;
    text-shadow: 1px 1px 0 #222;
    background: #6396D8; /* old browsers */
    background: -moz-linear-gradient(top, #6396D8 0%, #5A83BC 50%, #547AB7 51%, #466899 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6396D8), color-stop(50%,#5A83BC), color-stop(51%,#547AB7), color-stop(100%,#466899)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6396D8', endColorstr='#466899',GradientType=0 ); /* ie */
 }
 .newwindow { text-align: center; }
 .header .version em {
    display: block;
    text-align: right;
 }
 #classdocs .item {
    border-bottom: 1px solid #466899;
    margin: 1em 0;
    padding: 1.5em;
 }
 #classdocs .item .params p,
    #classdocs .item .returns p,{
    display: inline;
 }
 #classdocs .item em code, #classdocs .item em.comment {
    color: green;
 }
 #classdocs .item em.comment a {
    color: green;
    text-decoration: underline;
 }
 #classdocs .foundat {
    font-size: 11px;
    font-style: normal;
 }
 .attrs .emits {
    margin-left: 2em;
    padding: .5em;
    border-left: 1px dashed #ccc;
 }
 abbr {
    border-bottom: 1px dashed #ccc;
    font-size: 80%;
    cursor: help;
 }
 .prettyprint li.L0, 
 .prettyprint li.L1, 
 .prettyprint li.L2, 
 .prettyprint li.L3, 
 .prettyprint li.L5, 
 .prettyprint li.L6, 
 .prettyprint li.L7, 
 .prettyprint li.L8 {
    list-style: decimal;
 }
 ul li p {
    margin-top: 0;
 }
 .method .name {
    font-size: 110%;
 }
 .apidocs .methods .extends .method,
 .apidocs .properties .extends .property,
 .apidocs .attrs .extends .attr,
 .apidocs .events .extends .event {
    font-weight: bold;
 }
 .apidocs .methods .extends .inherited,
 .apidocs .properties .extends .inherited,
 .apidocs .attrs .extends .inherited,
 .apidocs .events .extends .inherited {
    font-weight: normal;
 }
 #hd {
    background: whiteSmoke;
    background: -moz-linear-gradient(top,#DCDBD9 0,#F6F5F3 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#DCDBD9),color-stop(100%,#F6F5F3));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdbd9',endColorstr='#F6F5F3',GradientType=0);
    border-bottom: 1px solid #DFDFDF;
    padding: 0 15px 1px 20px;
    margin-bottom: 15px;
 }
 #hd img {
    margin-right: 10px;
    vertical-align: middle;
 }
 /* -- API Docs CSS ---------------------------------------------------------- */
 /*
 This file is organized so that more generic styles are nearer the top, and more
 specific styles are nearer the bottom of the file. This allows us to take full
 advantage of the cascade to avoid redundant style rules. Please respect this
 convention when making changes.
 */
 /* -- Generic TabView styles ------------------------------------------------ */
 /*
 These styles apply to all API doc tabviews. To change styles only for a
 specific tabview, see the other sections below.
 */
 .yui3-js-enabled .apidocs .tabview {
    visibility: hidden; /* Hide until the TabView finishes rendering. */
    _visibility: visible;
 }
 .apidocs .tabview.yui3-tabview-content { visibility: visible; }
 .apidocs .tabview .yui3-tabview-panel { background: #fff; }
 /* -- Generic Content Styles ------------------------------------------------ */
 /* Headings */
 h2, h3, h4, h5, h6 {
    border: none;
    color: #30418C;
    font-weight: bold;
    text-decoration: none;
 }
 .link-docs {
    float: right;
    font-size: 15px;
    margin: 4px 4px 6px;
    padding: 6px 30px 5px;
 }
 .apidocs { zoom: 1; }
 /* Generic box styles. */
 .apidocs .box {
    border: 1px solid;
    border-radius: 3px;
    margin: 1em 0;
    padding: 0 1em;
 }
 /* A flag is a compact, capsule-like indicator of some kind. It's used to
   indicate private and protected items, item return types, etc. in an
   attractive and unobtrusive way. */
 .apidocs .flag {
    background: #bababa;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    margin: 0 0.5em;
    padding: 2px 4px 1px;
 }
 /* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
 .apidocs .meta {
    background: #f9f9f9;
    border-color: #efefef;
    color: #555;
    font-size: 11px;
    padding: 3px 6px;
 }
 .apidocs .meta p { margin: 0; }
 /* Deprecation warning. */
 .apidocs .box.deprecated,
 .apidocs .flag.deprecated {
    background: #fdac9f;
    border: 1px solid #fd7775;
 }
 .apidocs .box.deprecated p { margin: 0.5em 0; }
 .apidocs .flag.deprecated { color: #333; }
 /* Module/Class intro description. */
 .apidocs .intro {
    background: #f0f1f8;
    border-color: #d4d8eb;
 }
 /* Loading spinners. */
 #bd.loading .apidocs,
 #api-list.loading .yui3-tabview-panel {
    background: #fff url(../img/spinner.gif) no-repeat center 70px;
    min-height: 150px;
 }
 #bd.loading .apidocs .content,
 #api-list.loading .yui3-tabview-panel .apis {
    display: none;
 }
 .apidocs .no-visible-items { color: #666; }
 /* Generic inline list. */
 .apidocs ul.inline {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
 }
 .apidocs ul.inline li { display: inline; }
 /* Comma-separated list. */
 .apidocs ul.commas li:after { content: ','; }
 .apidocs ul.commas li:last-child:after { content: ''; }
 /* Keyboard shortcuts. */
 kbd .cmd { font-family: Monaco, Helvetica; }
 /* -- Generic Access Level styles ------------------------------------------- */
 .apidocs .item.protected,
 .apidocs .item.private,
 .apidocs .index-item.protected,
 .apidocs .index-item.deprecated,
 .apidocs .index-item.private {
    display: none;
 }
 .show-deprecated .item.deprecated,
 .show-deprecated .index-item.deprecated,
 .show-protected .item.protected,
 .show-protected .index-item.protected,
 .show-private .item.private,
 .show-private .index-item.private {
    display: block;
 }
 .hide-inherited .item.inherited,
 .hide-inherited .index-item.inherited {
    display: none;
 }
 /* -- Generic Item Index styles --------------------------------------------- */
 .apidocs .index { margin: 1.5em 0 3em; }
 .apidocs .index h3 {
    border-bottom: 1px solid #efefef;
    color: #333;
    font-size: 13px;
    margin: 2em 0 0.6em;
    padding-bottom: 2px;
 }
 .apidocs .index .no-visible-items { margin-top: 2em; }
 .apidocs .index-list {
    border-color: #efefef;
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -moz-column-width: 170px;
    -ms-column-count: 4;
    -ms-column-gap: 10px;
    -ms-column-width: 170px;
    -o-column-count: 4;
    -o-column-gap: 10px;
    -o-column-width: 170px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -webkit-column-width: 170px;
    column-count: 4;
    column-gap: 10px;
    column-width: 170px;
 }
 .apidocs .no-columns .index-list {
    -moz-column-count: 1;
    -ms-column-count: 1;
    -o-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
 }
 .apidocs .index-item { white-space: nowrap; }
 .apidocs .index-item .flag {
    background: none;
    border: none;
    color: #afafaf;
    display: inline;
    margin: 0 0 0 0.2em;
    padding: 0;
 }
 /* -- Generic API item styles ----------------------------------------------- */
 .apidocs .args {
    display: inline;
    margin: 0 0.5em;
 }
 .apidocs .flag.chainable { background: #46ca3b; }
 .apidocs .flag.protected { background: #9b86fc; }
 .apidocs .flag.private { background: #fd6b1b; }
 .apidocs .flag.async { background: #356de4; }
 .apidocs .flag.required { background: #e60923; }
 .apidocs .item {
    border-bottom: 1px solid #efefef;
    margin: 1.5em 0 2em;
    padding-bottom: 2em;
 }
 .apidocs .item h4,
 .apidocs .item h5,
 .apidocs .item h6 {
    color: #333;
    font-family: inherit;
    font-size: 100%;
 }
 .apidocs .item .description p,
 .apidocs .item pre.code {
    margin: 1em 0 0;
 }
 .apidocs .item .meta {
    background: none;
    border: none;
    padding: 0;
 }
 .apidocs .item .name {
    display: inline;
    font-size: 14px;
 }
 .apidocs .item .type,
 .apidocs .item .type a,
 .apidocs .returns-inline {
    color: #555;
 }
 .apidocs .item .type,
 .apidocs .returns-inline {
    font-size: 11px;
    margin: 0 0 0 0;
 }
 .apidocs .item .type a { border-bottom: 1px dotted #afafaf; }
 .apidocs .item .type a:hover { border: none; }
 /* -- Item Parameter List --------------------------------------------------- */
 .apidocs .params-list {
    list-style: square;
    margin: 1em 0 0 2em;
    padding: 0;
 }
 .apidocs .param { margin-bottom: 1em; }
 .apidocs .param .type,
 .apidocs .param .type a {
    color: #666;
 }
 .apidocs .param .type {
    margin: 0 0 0 0.5em;
    *margin-left: 0.5em;
 }
 .apidocs .param-name { font-weight: bold; }
 /* -- Item "Emits" block ---------------------------------------------------- */
 .apidocs .item .emits {
    background: #f9f9f9;
    border-color: #eaeaea;
 }
 /* -- Item "Returns" block -------------------------------------------------- */
 .apidocs .item .returns .type,
 .apidocs .item .returns .type a {
    font-size: 100%;
    margin: 0;
 }
 /* -- Class Constructor block ----------------------------------------------- */
 .apidocs .constructor .item {
    border: none;
    padding-bottom: 0;
 }
 /* -- File Source View ------------------------------------------------------ */
 .apidocs .file pre.code,
 #doc .apidocs .file pre.prettyprint {
    background: inherit;
    border: none;
    overflow: visible;
    padding: 0;
 }
 .apidocs .L0,
 .apidocs .L1,
 .apidocs .L2,
 .apidocs .L3,
 .apidocs .L4,
 .apidocs .L5,
 .apidocs .L6,
 .apidocs .L7,
 .apidocs .L8,
 .apidocs .L9 {
    background: inherit;
 }
 /* -- Submodule List -------------------------------------------------------- */
 .apidocs .module-submodule-description {
    font-size: 12px;
    margin: 0.3em 0 1em;
 }
 .apidocs .module-submodule-description p:first-child { margin-top: 0; }
 /* -- Sidebar TabView ------------------------------------------------------- */
 #api-tabview { margin-top: 0.6em; }
 #api-tabview-filter,
 #api-tabview-panel {
    border: 1px solid #dfdfdf;
 }
 #api-tabview-filter {
    border-bottom: none;
    border-top: none;
    padding: 0.6em 10px 0 10px;
 }
 #api-tabview-panel { border-top: none; }
 #api-filter { width: 97%; }
 /* -- Content TabView ------------------------------------------------------- */
 #classdocs .yui3-tabview-panel { border: none; }
 /* -- Source File Contents -------------------------------------------------- */
 .prettyprint li.L0,
 .prettyprint li.L1,
 .prettyprint li.L2,
 .prettyprint li.L3,
 .prettyprint li.L5,
 .prettyprint li.L6,
 .prettyprint li.L7,
 .prettyprint li.L8 {
    list-style: decimal;
 }
 /* -- API options ----------------------------------------------------------- */
 #api-options {
    font-size: 11px;
    margin-top: 2.2em;
    position: absolute;
    right: 1.5em;
 }
 /*#api-options label { margin-right: 0.6em; }*/
 /* -- API list -------------------------------------------------------------- */
 #api-list {
    margin-top: 1.5em;
    *zoom: 1;
 }
 .apis {
    font-size: 12px;
    line-height: 1.4;
    list-style: none;
    margin: 0;
    padding: 0.5em 0 0.5em 0.4em;
 }
 .apis a {
    border: 1px solid transparent;
    display: block;
    margin: 0 0 0 -4px;
    padding: 1px 4px 0;
    text-decoration: none;
    _border: none;
    _display: inline;
 }
 .apis a:hover,
 .apis a:focus {
    background: #E8EDFC;
    background: -moz-linear-gradient(top, #e8edfc 0%, #becef7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E8EDFC), color-stop(100%,#BECEF7));
    border-color: #AAC0FA;
    border-radius: 3px;
    color: #333;
    outline: none;
 }
 .api-list-item a:hover,
 .api-list-item a:focus {
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
 }
 .apis .message { color: #888; }
 .apis .result a { padding: 3px 5px 2px; }
 .apis .result .type {
    right: 4px;
    top: 7px;
 }
 .api-list-item .yui3-highlight {
    font-weight: bold;
 }
--- a/doc/assets/favicon.png
+++ b/doc/assets/favicon.png
--- a/doc/assets/img/spinner.gif
+++ b/doc/assets/img/spinner.gif
--- a/doc/assets/index.html
+++ b/doc/assets/index.html
@@ -0,0 +1,10 @@
 <!doctype html>
 <html>
    <head>
        <title>Redirector</title>
        <meta http-equiv="refresh" content="0;url=../">
    </head>
    <body>
        <a href="../">Click here to redirect</a>
    </body>
 </html>
--- a/doc/assets/js/api-filter.js
+++ b/doc/assets/js/api-filter.js
@@ -0,0 +1,52 @@
 YUI.add('api-filter', function (Y) {
 Y.APIFilter = Y.Base.create('apiFilter', Y.Base, [Y.AutoCompleteBase], {
    // -- Initializer ----------------------------------------------------------
    initializer: function () {
        this._bindUIACBase();
        this._syncUIACBase();
    },
    getDisplayName: function(name) {
        Y.each(Y.YUIDoc.meta.allModules, function(i) {
            if (i.name === name && i.displayName) {
                name = i.displayName;
            }
        });
        return name;
    }
 }, {
    // -- Attributes -----------------------------------------------------------
    ATTRS: {
        resultHighlighter: {
            value: 'phraseMatch'
        },
        // May be set to "classes" or "modules".
        queryType: {
            value: 'classes'
        },
        source: {
            valueFn: function() {
                var self = this;
                return function(q) {
                    var data = Y.YUIDoc.meta[self.get('queryType')],
                        out = [];
                    Y.each(data, function(v) {
                        if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
                            out.push(v);
                        }
                    });
                    return out;
                };
            }
        }
    }
 });
 }, '3.4.0', {requires: [
    'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources'
 ]});
--- a/doc/assets/js/api-list.js
+++ b/doc/assets/js/api-list.js
@@ -0,0 +1,251 @@
 YUI.add('api-list', function (Y) {
 var Lang   = Y.Lang,
    YArray = Y.Array,
    APIList = Y.namespace('APIList'),
    classesNode    = Y.one('#api-classes'),
    inputNode      = Y.one('#api-filter'),
    modulesNode    = Y.one('#api-modules'),
    tabviewNode    = Y.one('#api-tabview'),
    tabs = APIList.tabs = {},
    filter = APIList.filter = new Y.APIFilter({
        inputNode : inputNode,
        maxResults: 1000,
        on: {
            results: onFilterResults
        }
    }),
    search = APIList.search = new Y.APISearch({
        inputNode : inputNode,
        maxResults: 100,
        on: {
            clear  : onSearchClear,
            results: onSearchResults
        }
    }),
    tabview = APIList.tabview = new Y.TabView({
        srcNode  : tabviewNode,
        panelNode: '#api-tabview-panel',
        render   : true,
        on: {
            selectionChange: onTabSelectionChange
        }
    }),
    focusManager = APIList.focusManager = tabviewNode.plug(Y.Plugin.NodeFocusManager, {
        circular   : true,
        descendants: '#api-filter, .yui3-tab-panel-selected .api-list-item a, .yui3-tab-panel-selected .result a',
        keys       : {next: 'down:40', previous: 'down:38'}
    }).focusManager,
    LIST_ITEM_TEMPLATE =
        '<li class="api-list-item {typeSingular}">' +
            '<a href="{rootPath}{typePlural}/{name}.html">{displayName}</a>' +
        '</li>';
 // -- Init ---------------------------------------------------------------------
 // Duckpunch FocusManager's key event handling to prevent it from handling key
 // events when a modifier is pressed.
 Y.before(function (e, activeDescendant) {
    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
        return new Y.Do.Prevent();
    }
 }, focusManager, '_focusPrevious', focusManager);
 Y.before(function (e, activeDescendant) {
    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
        return new Y.Do.Prevent();
    }
 }, focusManager, '_focusNext', focusManager);
 // Create a mapping of tabs in the tabview so we can refer to them easily later.
 tabview.each(function (tab, index) {
    var name = tab.get('label').toLowerCase();
    tabs[name] = {
        index: index,
        name : name,
        tab  : tab
    };
 });
 // Switch tabs on Ctrl/Cmd-Left/Right arrows.
 tabviewNode.on('key', onTabSwitchKey, 'down:37,39');
 // Focus the filter input when the `/` key is pressed.
 Y.one(Y.config.doc).on('key', onSearchKey, 'down:83');
 // Keep the Focus Manager up to date.
 inputNode.on('focus', function () {
    focusManager.set('activeDescendant', inputNode);
 });
 // Update all tabview links to resolved URLs.
 tabview.get('panelNode').all('a').each(function (link) {
    link.setAttribute('href', link.get('href'));
 });
 // -- Private Functions --------------------------------------------------------
 function getFilterResultNode() {
    return filter.get('queryType') === 'classes' ? classesNode : modulesNode;
 }
 // -- Event Handlers -----------------------------------------------------------
 function onFilterResults(e) {
    var frag         = Y.one(Y.config.doc.createDocumentFragment()),
        resultNode   = getFilterResultNode(),
        typePlural   = filter.get('queryType'),
        typeSingular = typePlural === 'classes' ? 'class' : 'module';
    if (e.results.length) {
        YArray.each(e.results, function (result) {
            frag.append(Lang.sub(LIST_ITEM_TEMPLATE, {
                rootPath    : APIList.rootPath,
                displayName : filter.getDisplayName(result.highlighted),
                name        : result.text,
                typePlural  : typePlural,
                typeSingular: typeSingular
            }));
        });
    } else {
        frag.append(
            '<li class="message">' +
                'No ' + typePlural + ' found.' +
            '</li>'
        );
    }
    resultNode.empty(true);
    resultNode.append(frag);
    focusManager.refresh();
 }
 function onSearchClear(e) {
    focusManager.refresh();
 }
 function onSearchKey(e) {
    var target = e.target;
    if (target.test('input,select,textarea')
            || target.get('isContentEditable')) {
        return;
    }
    e.preventDefault();
    inputNode.focus();
    focusManager.refresh();
 }
 function onSearchResults(e) {
    var frag = Y.one(Y.config.doc.createDocumentFragment());
    if (e.results.length) {
        YArray.each(e.results, function (result) {
            frag.append(result.display);
        });
    } else {
        frag.append(
            '<li class="message">' +
                'No results found. Maybe you\'ll have better luck with a ' +
                'different query?' +
            '</li>'
        );
    }
    focusManager.refresh();
 }
 function onTabSelectionChange(e) {
    var tab  = e.newVal,
        name = tab.get('label').toLowerCase();
    tabs.selected = {
        index: tab.get('index'),
        name : name,
        tab  : tab
    };
    switch (name) {
    case 'classes': // fallthru
    case 'modules':
        filter.setAttrs({
            minQueryLength: 0,
            queryType     : name
        });
        search.set('minQueryLength', -1);
        // Only send a request if this isn't the initially-selected tab.
        if (e.prevVal) {
            filter.sendRequest(filter.get('value'));
        }
        break;
    case 'everything':
        filter.set('minQueryLength', -1);
        search.set('minQueryLength', 1);
        if (search.get('value')) {
            search.sendRequest(search.get('value'));
        } else {
            inputNode.focus();
        }
        break;
    default:
        // WTF? We shouldn't be here!
        filter.set('minQueryLength', -1);
        search.set('minQueryLength', -1);
    }
    if (focusManager) {
        setTimeout(function () {
            focusManager.refresh();
        }, 1);
    }
 }
 function onTabSwitchKey(e) {
    var currentTabIndex = tabs.selected.index;
    if (!(e.ctrlKey || e.metaKey)) {
        return;
    }
    e.preventDefault();
    switch (e.keyCode) {
    case 37: // left arrow
        if (currentTabIndex > 0) {
            tabview.selectChild(currentTabIndex - 1);
            inputNode.focus();
        }
        break;
    case 39: // right arrow
        if (currentTabIndex < (Y.Object.size(tabs) - 2)) {
            tabview.selectChild(currentTabIndex + 1);
            inputNode.focus();
        }
        break;
    }
 }
 }, '3.4.0', {requires: [
    'api-filter', 'api-search', 'event-key', 'node-focusmanager', 'tabview'
 ]});
--- a/doc/assets/js/api-search.js
+++ b/doc/assets/js/api-search.js
@@ -0,0 +1,98 @@
 YUI.add('api-search', function (Y) {
 var Lang   = Y.Lang,
    Node   = Y.Node,
    YArray = Y.Array;
 Y.APISearch = Y.Base.create('apiSearch', Y.Base, [Y.AutoCompleteBase], {
    // -- Public Properties ----------------------------------------------------
    RESULT_TEMPLATE:
        '<li class="result {resultType}">' +
            '<a href="{url}">' +
                '<h3 class="title">{name}</h3>' +
                '<span class="type">{resultType}</span>' +
                '<div class="description">{description}</div>' +
                '<span class="className">{class}</span>' +
            '</a>' +
        '</li>',
    // -- Initializer ----------------------------------------------------------
    initializer: function () {
        this._bindUIACBase();
        this._syncUIACBase();
    },
    // -- Protected Methods ----------------------------------------------------
    _apiResultFilter: function (query, results) {
        // Filter components out of the results.
        return YArray.filter(results, function (result) {
            return result.raw.resultType === 'component' ? false : result;
        });
    },
    _apiResultFormatter: function (query, results) {
        return YArray.map(results, function (result) {
            var raw  = Y.merge(result.raw), // create a copy
                desc = raw.description || '';
            // Convert description to text and truncate it if necessary.
            desc = Node.create('<div>' + desc + '</div>').get('text');
            if (desc.length > 65) {
                desc = Y.Escape.html(desc.substr(0, 65)) + ' &hellip;';
            } else {
                desc = Y.Escape.html(desc);
            }
            raw['class'] || (raw['class'] = '');
            raw.description = desc;
            // Use the highlighted result name.
            raw.name = result.highlighted;
            return Lang.sub(this.RESULT_TEMPLATE, raw);
        }, this);
    },
    _apiTextLocator: function (result) {
        return result.displayName || result.name;
    }
 }, {
    // -- Attributes -----------------------------------------------------------
    ATTRS: {
        resultFormatter: {
            valueFn: function () {
                return this._apiResultFormatter;
            }
        },
        resultFilters: {
            valueFn: function () {
                return this._apiResultFilter;
            }
        },
        resultHighlighter: {
            value: 'phraseMatch'
        },
        resultListLocator: {
            value: 'data.results'
        },
        resultTextLocator: {
            valueFn: function () {
                return this._apiTextLocator;
            }
        },
        source: {
            value: '/api/v1/search?q={query}&count={maxResults}'
        }
    }
 });
 }, '3.4.0', {requires: [
    'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources',
    'escape'
 ]});
--- a/doc/assets/js/apidocs.js
+++ b/doc/assets/js/apidocs.js
@@ -0,0 +1,370 @@
 YUI().use(
    'yuidoc-meta',
    'api-list', 'history-hash', 'node-screen', 'node-style', 'pjax',
 function (Y) {
 var win          = Y.config.win,
    localStorage = win.localStorage,
    bdNode = Y.one('#bd'),
    pjax,
    defaultRoute,
    classTabView,
    selectedTab;
 // Kill pjax functionality unless serving over HTTP.
 if (!Y.getLocation().protocol.match(/^https?\:/)) {
    Y.Router.html5 = false;
 }
 // Create the default route with middleware which enables syntax highlighting
 // on the loaded content.
 defaultRoute = Y.Pjax.defaultRoute.concat(function (req, res, next) {
    prettyPrint();
    bdNode.removeClass('loading');
    next();
 });
 pjax = new Y.Pjax({
    container      : '#docs-main',
    contentSelector: '#docs-main > .content',
    linkSelector   : '#bd a',
    titleSelector  : '#xhr-title',
    navigateOnHash: true,
    root          : '/',
    routes        : [
        // -- / ----------------------------------------------------------------
        {
            path     : '/(index.html)?',
            callbacks: defaultRoute
        },
        // -- /classes/* -------------------------------------------------------
        {
            path     : '/classes/:class.html*',
            callbacks: [defaultRoute, 'handleClasses']
        },
        // -- /files/* ---------------------------------------------------------
        {
            path     : '/files/*file',
            callbacks: [defaultRoute, 'handleFiles']
        },
        // -- /modules/* -------------------------------------------------------
        {
            path     : '/modules/:module.html*',
            callbacks: defaultRoute
        }
    ]
 });
 // -- Utility Functions --------------------------------------------------------
 pjax.checkVisibility = function (tab) {
    tab || (tab = selectedTab);
    if (!tab) { return; }
    var panelNode = tab.get('panelNode'),
        visibleItems;
    // If no items are visible in the tab panel due to the current visibility
    // settings, display a message to that effect.
    visibleItems = panelNode.all('.item,.index-item').some(function (itemNode) {
        if (itemNode.getComputedStyle('display') !== 'none') {
            return true;
        }
    });
    panelNode.all('.no-visible-items').remove();
    if (!visibleItems) {
        if (Y.one('#index .index-item')) {
            panelNode.append(
                '<div class="no-visible-items">' +
                    '<p>' +
                    'Some items are not shown due to the current visibility ' +
                    'settings. Use the checkboxes at the upper right of this ' +
                    'page to change the visibility settings.' +
                    '</p>' +
                '</div>'
            );
        } else {
            panelNode.append(
                '<div class="no-visible-items">' +
                    '<p>' +
                    'This class doesn\'t provide any methods, properties, ' +
                    'attributes, or events.' +
                    '</p>' +
                '</div>'
            );
        }
    }
    // Hide index sections without any visible items.
    Y.all('.index-section').each(function (section) {
        var items        = 0,
            visibleItems = 0;
        section.all('.index-item').each(function (itemNode) {
            items += 1;
            if (itemNode.getComputedStyle('display') !== 'none') {
                visibleItems += 1;
            }
        });
        section.toggleClass('hidden', !visibleItems);
        section.toggleClass('no-columns', visibleItems < 4);
    });
 };
 pjax.initClassTabView = function () {
    if (!Y.all('#classdocs .api-class-tab').size()) {
        return;
    }
    if (classTabView) {
        classTabView.destroy();
        selectedTab = null;
    }
    classTabView = new Y.TabView({
        srcNode: '#classdocs',
        on: {
            selectionChange: pjax.onTabSelectionChange
        }
    });
    pjax.updateTabState();
    classTabView.render();
 };
 pjax.initLineNumbers = function () {
    var hash      = win.location.hash.substring(1),
        container = pjax.get('container'),
        hasLines, node;
    // Add ids for each line number in the file source view.
    container.all('.linenums>li').each(function (lineNode, index) {
        lineNode.set('id', 'l' + (index + 1));
        lineNode.addClass('file-line');
        hasLines = true;
    });
    // Scroll to the desired line.
    if (hasLines && /^l\d+$/.test(hash)) {
        if ((node = container.getById(hash))) {
            win.scroll(0, node.getY());
        }
    }
 };
 pjax.initRoot = function () {
    var terminators = /^(?:classes|files|modules)$/,
        parts       = pjax._getPathRoot().split('/'),
        root        = [],
        i, len, part;
    for (i = 0, len = parts.length; i < len; i += 1) {
        part = parts[i];
        if (part.match(terminators)) {
            // Makes sure the path will end with a "/".
            root.push('');
            break;
        }
        root.push(part);
    }
    pjax.set('root', root.join('/'));
 };
 pjax.updateTabState = function (src) {
    var hash = win.location.hash.substring(1),
        defaultTab, node, tab, tabPanel;
    function scrollToNode() {
        if (node.hasClass('protected')) {
            Y.one('#api-show-protected').set('checked', true);
            pjax.updateVisibility();
        }
        if (node.hasClass('private')) {
            Y.one('#api-show-private').set('checked', true);
            pjax.updateVisibility();
        }
        setTimeout(function () {
            // For some reason, unless we re-get the node instance here,
            // getY() always returns 0.
            var node = Y.one('#classdocs').getById(hash);
            win.scrollTo(0, node.getY() - 70);
        }, 1);
    }
    if (!classTabView) {
        return;
    }
    if (src === 'hashchange' && !hash) {
        defaultTab = 'index';
    } else {
        if (localStorage) {
            defaultTab = localStorage.getItem('tab_' + pjax.getPath()) ||
                'index';
        } else {
            defaultTab = 'index';
        }
    }
    if (hash && (node = Y.one('#classdocs').getById(hash))) {
        if ((tabPanel = node.ancestor('.api-class-tabpanel', true))) {
            if ((tab = Y.one('#classdocs .api-class-tab.' + tabPanel.get('id')))) {
                if (classTabView.get('rendered')) {
                    Y.Widget.getByNode(tab).set('selected', 1);
                } else {
                    tab.addClass('yui3-tab-selected');
                }
            }
        }
        // Scroll to the desired element if this is a hash URL.
        if (node) {
            if (classTabView.get('rendered')) {
                scrollToNode();
            } else {
                classTabView.once('renderedChange', scrollToNode);
            }
        }
    } else {
        tab = Y.one('#classdocs .api-class-tab.' + defaultTab);
        // When the `defaultTab` node isn't found, `localStorage` is stale.
        if (!tab && defaultTab !== 'index') {
            tab = Y.one('#classdocs .api-class-tab.index');
        }
        if (classTabView.get('rendered')) {
            Y.Widget.getByNode(tab).set('selected', 1);
        } else {
            tab.addClass('yui3-tab-selected');
        }
    }
 };
 pjax.updateVisibility = function () {
    var container = pjax.get('container');
    container.toggleClass('hide-inherited',
            !Y.one('#api-show-inherited').get('checked'));
    container.toggleClass('show-deprecated',
            Y.one('#api-show-deprecated').get('checked'));
    container.toggleClass('show-protected',
            Y.one('#api-show-protected').get('checked'));
    container.toggleClass('show-private',
            Y.one('#api-show-private').get('checked'));
    pjax.checkVisibility();
 };
 // -- Route Handlers -----------------------------------------------------------
 pjax.handleClasses = function (req, res, next) {
    var status = res.ioResponse.status;
    // Handles success and local filesystem XHRs.
    if (!status || (status >= 200 && status < 300)) {
        pjax.initClassTabView();
    }
    next();
 };
 pjax.handleFiles = function (req, res, next) {
    var status = res.ioResponse.status;
    // Handles success and local filesystem XHRs.
    if (!status || (status >= 200 && status < 300)) {
        pjax.initLineNumbers();
    }
    next();
 };
 // -- Event Handlers -----------------------------------------------------------
 pjax.onNavigate = function (e) {
    var hash         = e.hash,
        originTarget = e.originEvent && e.originEvent.target,
        tab;
    if (hash) {
        tab = originTarget && originTarget.ancestor('.yui3-tab', true);
        if (hash === win.location.hash) {
            pjax.updateTabState('hashchange');
        } else if (!tab) {
            win.location.hash = hash;
        }
        e.preventDefault();
        return;
    }
    // Only scroll to the top of the page when the URL doesn't have a hash.
    this.set('scrollToTop', !e.url.match(/#.+$/));
    bdNode.addClass('loading');
 };
 pjax.onOptionClick = function (e) {
    pjax.updateVisibility();
 };
 pjax.onTabSelectionChange = function (e) {
    var tab   = e.newVal,
        tabId = tab.get('contentBox').getAttribute('href').substring(1);
    selectedTab = tab;
    // If switching from a previous tab (i.e., this is not the default tab),
    // replace the history entry with a hash URL that will cause this tab to
    // be selected if the user navigates away and then returns using the back
    // or forward buttons.
    if (e.prevVal && localStorage) {
        localStorage.setItem('tab_' + pjax.getPath(), tabId);
    }
    pjax.checkVisibility(tab);
 };
 // -- Init ---------------------------------------------------------------------
 pjax.on('navigate', pjax.onNavigate);
 pjax.initRoot();
 pjax.upgrade();
 pjax.initClassTabView();
 pjax.initLineNumbers();
 pjax.updateVisibility();
 Y.APIList.rootPath = pjax.get('root');
 Y.one('#api-options').delegate('click', pjax.onOptionClick, 'input');
 Y.on('hashchange', function (e) {
    pjax.updateTabState('hashchange');
 }, win);
 });
--- a/doc/assets/js/yui-prettify.js
+++ b/doc/assets/js/yui-prettify.js
@@ -0,0 +1,17 @@
 YUI().use('node', function(Y) {
    var code = Y.all('.prettyprint.linenums');
    if (code.size()) {
        code.each(function(c) {
            var lis = c.all('ol li'),
                l = 1;
            lis.each(function(n) {
                n.prepend('<a name="LINENUM_' + l + '"></a>');
                l++;
            });
        });
        var h = location.hash;
        location.hash = '';
        h = h.replace('LINE_', 'LINENUM_');
        location.hash = h;
    }
 });
--- a/doc/assets/vendor/prettify/CHANGES.html
+++ b/doc/assets/vendor/prettify/CHANGES.html
@@ -0,0 +1,130 @@
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Change Log</title>
  </head>
  <body bgcolor="white">
    <a style="float:right" href="README.html">README</a>
    <h1>Known Issues</h1>
    <ul>
      <li>Perl formatting is really crappy.  Partly because the author is lazy and
      partly because Perl is
      <a href="http://www.perlmonks.org/?node_id=663393">hard</a> to parse.
      <li>On some browsers, <code>&lt;code&gt;</code> elements with newlines in the text
      which use CSS to specify <code>white-space:pre</code> will have the newlines
      improperly stripped if the element is not attached to the document at the time
      the stripping is done.  Also, on IE 6, all newlines will be stripped from
      <code>&lt;code&gt;</code> elements because of the way IE6 produces
      <code>innerHTML</code>.  Workaround: use <code>&lt;pre&gt;</code> for code with
      newlines.
    </ul>
    <h1>Change Log</h1>
    <h2>29 March 2007</h2>
    <ul>
      <li>Added <a href="tests/prettify_test.html#PHP">tests</a> for PHP support
        to address 
      <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=3"
       >issue 3</a>.
      <li>Fixed
      <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=6"
       >bug</a>: <code>prettyPrintOne</code> was not halting.  This was not
        reachable through the normal entry point.
      <li>Fixed
      <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=4"
       >bug</a>: recursing into a script block or PHP tag that was not properly
        closed would not silently drop the content.
        (<a href="tests/prettify_test.html#issue4">test</a>)
      <li>Fixed
      <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=8"
       >bug</a>: was eating tabs
        (<a href="tests/prettify_test.html#issue8">test</a>)
      <li>Fixed entity handling so that the caveat
        <blockquote>
          <p>Caveats: please properly escape less-thans.  <tt>x&amp;lt;y</tt>
          instead of <tt>x&lt;y</tt>, and use <tt>&quot;</tt> instead of 
          <tt>&amp;quot;</tt> for string delimiters.</p>
        </blockquote>
        is no longer applicable.
      <li>Added noisefree's C#
      <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=4"
       >patch</a>
      <li>Added a <a href="http://google-code-prettify.googlecode.com/files/prettify-small.zip">distribution</a> that has comments and
        whitespace removed to reduce download size from 45.5kB to 12.8kB.
    </ul>
    <h2>4 Jul 2008</h2>
    <ul>
      <li>Added <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=17">language specific formatters</a> that are triggered by the presence
      of a <code>lang-&lt;language-file-extension&gt;</code></li>
      <li>Fixed <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=29">bug</a>: python handling of <code>'''string'''</code>
      <li>Fixed bug: <code>/</code> in regex <code>[charsets] should not end regex</code>
    </ul>
    <h2>5 Jul 2008</h2>
    <ul>
      <li>Defined language extensions for Lisp and Lua</code>
    </ul>
    <h2>14 Jul 2008</h2>
    <ul>
      <li>Language handlers for F#, OCAML, SQL</code>
      <li>Support for <code>nocode</code> spans to allow embedding of line
      numbers and code annotations which should not be styled or otherwise
      affect the tokenization of prettified code.
      See the issue 22
      <a href="tests/prettify_test.html#issue22">testcase</a>.</code>
    </ul>
    <h2>6 Jan 2009</h2>
    <ul>
      <li>Language handlers for Visual Basic, Haskell, CSS, and WikiText</li>
      <li>Added <tt>.mxml</tt> extension to the markup style handler for
        Flex <a href="http://en.wikipedia.org/wiki/MXML">MXML files</a>.  See
        <a
        href="http://code.google.com/p/google-code-prettify/issues/detail?id=37"
        >issue 37</a>.
      <li>Added <tt>.m</tt> extension to the C style handler so that Objective
        C source files properly highlight.  See
        <a
        href="http://code.google.com/p/google-code-prettify/issues/detail?id=58"
       >issue 58</a>.
      <li>Changed HTML lexer to use the same embedded source mechanism as the
        wiki language handler, and changed to use the registered
        CSS handler for STYLE element content.
    </ul>
    <h2>21 May 2009</h2>
    <ul>
      <li>Rewrote to improve performance on large files.
        See <a href="http://mikesamuel.blogspot.com/2009/05/efficient-parsing-in-javascript.html">benchmarks</a>.</li>
      <li>Fixed bugs with highlighting of Haskell line comments, Lisp
        number literals, Lua strings, C preprocessor directives,
        newlines in Wiki code on Windows, and newlines in IE6.</li>
    </ul>
    <h2>14 August 2009</h2>
    <ul>
      <li>Fixed prettifying of <code>&lt;code&gt;</code> blocks with embedded newlines.
    </ul>
    <h2>3 October 2009</h2>
    <ul>
      <li>Fixed prettifying of XML/HTML tags that contain uppercase letters.
    </ul>
    <h2>19 July 2010</h2>
    <ul>
      <li>Added support for line numbers.  Bug
        <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=22"
         >22</a></li>
      <li>Added YAML support.  Bug
        <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=123"
         >123</a></li>
      <li>Added VHDL support courtesy Le Poussin.</li>
      <li>IE performance improvements.  Bug
        <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=102"
         >102</a> courtesy jacobly.</li>
      <li>A variety of markup formatting fixes courtesy smain and thezbyg.</li>
      <li>Fixed copy and paste in IE[678].
      <li>Changed output to use <code>&amp;#160;</code> instead of
        <code>&amp;nbsp;</code> so that the output works when embedded in XML.
        Bug
        <a href="http://code.google.com/p/google-code-prettify/issues/detail?id=108"
         >108</a>.</li>
    </ul>
  </body>
 </html>
--- a/doc/assets/vendor/prettify/COPYING
+++ b/doc/assets/vendor/prettify/COPYING
@@ -0,0 +1,202 @@
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/
   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
   1. Definitions.
      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.
      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.
      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.
      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.
      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.
      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.
      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).
      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.
      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."
      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.
   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.
   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.
   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:
      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and
      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and
      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and
      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.
      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.
   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.
   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.
   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.
   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.
   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.
   END OF TERMS AND CONDITIONS
   APPENDIX: How to apply the Apache License to your work.
      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.
   Copyright [yyyy] [name of copyright owner]
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
       http://www.apache.org/licenses/LICENSE-2.0
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
--- a/doc/assets/vendor/prettify/README.html
+++ b/doc/assets/vendor/prettify/README.html
@@ -0,0 +1,203 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
  <head>
    <title>Javascript code prettifier</title>
    <link href="src/prettify.css" type="text/css" rel="stylesheet" />
    <script src="src/prettify.js" type="text/javascript"></script>
    <style type="text/css">
      body { margin-left: .5in }
      h1, h2, h3, h4, .footer { margin-left: -.4in; }
    </style>
  </head>
  <body onload="prettyPrint()" bgcolor="white">
    <small style="float: right">Languages : <a href="README-zh-Hans.html">CH</a></small>
    <h1>Javascript code prettifier</h1>
    <h2>Setup</h2>
    <ol>
      <li><a href="http://code.google.com/p/google-code-prettify/downloads/list">Download</a> a distribution
      <li>Include the script and stylesheets in your document
        (you will need to make sure the css and js file are on your server, and
         adjust the paths in the <tt>script</tt> and <tt>link</tt> tag)
        <pre class="prettyprint">
 &lt;link href="prettify.css" type="text/css" rel="stylesheet" />
 &lt;script type="text/javascript" src="prettify.js">&lt;/script></pre>
      <li>Add <code class="prettyprint lang-html">onload="prettyPrint()"</code> to your
      document's body tag.
      <li>Modify the stylesheet to get the coloring you prefer</li>
    </ol>
    <h2>Usage</h2>
    <p>Put code snippets in
    <tt>&lt;pre class="prettyprint"&gt;...&lt;/pre&gt;</tt>
    or <tt>&lt;code class="prettyprint"&gt;...&lt;/code&gt;</tt>
    and it will automatically be pretty printed.
    <table summary="code examples">
      <tr>
        <th>The original
        <th>Prettier
      <tr>
        <td><pre style="border: 1px solid #888;padding: 2px"
             ><a name="voila1"></a>class Voila {
 public:
  // Voila
  static const string VOILA = "Voila";
  // will not interfere with embedded <a href="#voila1">tags</a>.
 }</pre>
        <td><pre class="prettyprint"><a name="voila2"></a>class Voila {
 public:
  // Voila
  static const string VOILA = "Voila";
  // will not interfere with embedded <a href="#voila2">tags</a>.
 }</pre>
    </table>
    <h2>FAQ</h2>
    <h3 id="langs">Which languages does it work for?</h3>
    <p>The comments in <tt>prettify.js</tt> are authoritative but the lexer
    should work on a number of languages including C and friends,
    Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles.
    It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl
    and Ruby, but, because of commenting conventions, doesn't work on
    Smalltalk, or CAML-like languages.</p>
    <p>LISPy languages are supported via an extension:
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lisp.js"
     ><code>lang-lisp.js</code></a>.</p>
    <p>And similarly for
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-css.js"
     ><code>CSS</code></a>,
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-hs.js"
     ><code>Haskell</code></a>,
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-lua.js"
     ><code>Lua</code></a>,
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-ml.js"
     ><code>OCAML, SML, F#</code></a>,
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-vb.js"
     ><code>Visual Basic</code></a>,
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-sql.js"
     ><code>SQL</code></a>,
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-proto.js"
     ><code>Protocol Buffers</code></a>, and
    <a href="http://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-wiki.js"
     ><code>WikiText</code></a>..
    <p>If you'd like to add an extension for your favorite language, please
    look at <tt>src/lang-lisp.js</tt> and file an
    <a href="http://code.google.com/p/google-code-prettify/issues/list"
     >issue</a> including your language extension, and a testcase.</p>
    <h3>How do I specify which language my code is in?</h3>
    <p>You don't need to specify the language since <code>prettyprint()</code>
    will guess.  You can specify a language by specifying the language extension
    along with the <code>prettyprint</code> class like so:</p>
    <pre class="prettyprint lang-html"
 >&lt;pre class=&quot;prettyprint <b>lang-html</b>&quot;&gt;
  The lang-* class specifies the language file extensions.
  File extensions supported by default include
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".
 &lt;/pre&gt;</pre>
    <h3>It doesn't work on <tt>&lt;obfuscated code sample&gt;</tt>?</h3>
    <p>Yes.  Prettifying obfuscated code is like putting lipstick on a pig
    &mdash; i.e. outside the scope of this tool.</p>
    <h3>Which browsers does it work with?</h3>
    <p>It's been tested with IE 6, Firefox 1.5 &amp; 2, and Safari 2.0.4.
    Look at <a href="tests/prettify_test.html">the test page</a> to see if it
    works in your browser.</p>
    <h3>What's changed?</h3>
    <p>See the <a href="CHANGES.html">change log</a></p>
    <h3>Why doesn't Prettyprinting of strings work on WordPress?</h3>
    <p>Apparently wordpress does "smart quoting" which changes close quotes.
    This causes end quotes to not match up with open quotes.
    <p>This breaks prettifying as well as copying and pasting of code samples.
    See
    <a href="http://wordpress.org/support/topic/125038"
    >WordPress's help center</a> for info on how to stop smart quoting of code
    snippets.</p>
    <h3 id="linenums">How do I put line numbers in my code?</h3>
    <p>You can use the <code>linenums</code> class to turn on line
    numbering.  If your code doesn't start at line number 1, you can
    add a colon and a line number to the end of that class as in
    <code>linenums:52</code>.
    <p>For example
 <pre class="prettyprint">&lt;pre class="prettyprint linenums:<b>4</b>"
 &gt;// This is line 4.
 foo();
 bar();
 baz();
 boo();
 far();
 faz();
 &lt;pre&gt;</pre>
    produces
 <pre class="prettyprint linenums:4"
 >// This is line 4.
 foo();
 bar();
 baz();
 boo();
 far();
 faz();
 </pre>
    <h3>How do I prevent a portion of markup from being marked as code?</h3>
    <p>You can use the <code>nocode</code> class to identify a span of markup
    that is not code.
 <pre class="prettyprint">&lt;pre class=prettyprint&gt;
 int x = foo();  /* This is a comment  &lt;span class="nocode"&gt;This is not code&lt;/span&gt;
  Continuation of comment */
 int y = bar();
 &lt;/pre&gt;</pre>
 produces
 <pre class="prettyprint">
 int x = foo();  /* This is a comment  <span class="nocode">This is not code</span>
  Continuation of comment */
 int y = bar();
 </pre>
    <p>For a more complete example see the issue22
    <a href="tests/prettify_test.html#issue22">testcase</a>.</p>
    <h3>I get an error message "a is not a function" or "opt_whenDone is not a function"</h3>
    <p>If you are calling <code>prettyPrint</code> via an event handler, wrap it in a function.
    Instead of doing
    <blockquote>
      <code class="prettyprint lang-js"
       >addEventListener('load', prettyPrint, false);</code>
    </blockquote>
    wrap it in a closure like
    <blockquote>
      <code class="prettyprint lang-js"
       >addEventListener('load', function (event) { prettyPrint() }, false);</code>
    </blockquote>
    so that the browser does not pass an event object to <code>prettyPrint</code> which
    will confuse it.
    <br><br><br>
    <div class="footer">
 <!-- Created: Tue Oct  3 17:51:56 PDT 2006 -->
 <!-- hhmts start -->
 Last modified: Wed Jul 19 13:56:00 PST 2010
 <!-- hhmts end -->
    </div>
  </body>
 </html>
--- a/doc/assets/vendor/prettify/prettify-min.css
+++ b/doc/assets/vendor/prettify/prettify-min.css
@@ -0,0 +1 @@
 .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
--- a/doc/assets/vendor/prettify/prettify-min.js
+++ b/doc/assets/vendor/prettify/prettify-min.js
--- a/doc/classes/LGraph.html
+++ b/doc/classes/LGraph.html
--- a/doc/classes/LGraphNode.html
+++ b/doc/classes/LGraphNode.html
@@ -0,0 +1,163 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>LGraphNode</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
 </head>
 <body class="yui3-skin-sam">
 <div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
                <h1><img src="../assets/css/logo.png" title=""></h1>
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">
        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>
        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>
        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
                <li><a href="../classes/LGraph.html">LGraph</a></li>
                <li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
                <li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
            </ul>
            <ul id="api-modules" class="apis modules">
            </ul>
        </div>
    </div>
 </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>
        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>
        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>
    </div>
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>LGraphNode Class</h1>
 <div class="box meta">
        <div class="foundat">
            Defined in: <a href="../files/.._src_litegraph.js.html#l947"><code>..&#x2F;src&#x2F;litegraph.js:947</code></a>
        </div>
 </div>
 <div class="box intro">
    <p>Base Class for all the node type classes</p>
 </div>
 <div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>
    </ul>
    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>
        </div>
    </div>
 </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <script src="../assets/vendor/prettify/prettify-min.js"></script>
 <script>prettyPrint();</script>
 <script src="../assets/js/yui-prettify.js"></script>
 <script src="../assets/../api.js"></script>
 <script src="../assets/js/api-filter.js"></script>
 <script src="../assets/js/api-list.js"></script>
 <script src="../assets/js/api-search.js"></script>
 <script src="../assets/js/apidocs.js"></script>
 </body>
 </html>
--- a/doc/classes/LiteGraph.html
+++ b/doc/classes/LiteGraph.html
@@ -0,0 +1,802 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>LiteGraph</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
 </head>
 <body class="yui3-skin-sam">
 <div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
                <h1><img src="../assets/css/logo.png" title=""></h1>
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">
        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>
        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>
        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
                <li><a href="../classes/LGraph.html">LGraph</a></li>
                <li><a href="../classes/LGraphNode.html">LGraphNode</a></li>
                <li><a href="../classes/LiteGraph.html">LiteGraph</a></li>
            </ul>
            <ul id="api-modules" class="apis modules">
            </ul>
        </div>
    </div>
 </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>
        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>
        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>
    </div>
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>LiteGraph Class</h1>
 <div class="box meta">
        <div class="foundat">
            Defined in: <a href="../files/.._src_litegraph.js.html#l6"><code>..&#x2F;src&#x2F;litegraph.js:6</code></a>
        </div>
 </div>
 <div class="box intro">
    <p>The Global Scope. It contains all the registered node classes.</p>
 </div>
    <div class="constructor">
        <h2>Constructor</h2>
        <div id="method_LiteGraph" class="method item">
    <h3 class="name"><code>LiteGraph</code></h3>
        <span class="paren">()</span>
    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l6"><code>..&#x2F;src&#x2F;litegraph.js:6</code></a>
        </p>
    </div>
    <div class="description">
    </div>
 </div>
    </div>
 <div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>
            <li class="api-class-tab methods"><a href="#methods">Methods</a></li>
    </ul>
    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>
                <div class="index-section methods">
                    <h3>Methods</h3>
                    <ul class="index-list methods">
                            <li class="index-item method">
                                <a href="#method_createNode">createNode</a>
                            </li>
                            <li class="index-item method">
                                <a href="#method_getNodeType">getNodeType</a>
                            </li>
                            <li class="index-item method">
                                <a href="#method_getNodeType">getNodeType</a>
                            </li>
                            <li class="index-item method">
                                <a href="#method_getNodeTypesCategories">getNodeTypesCategories</a>
                            </li>
                            <li class="index-item method">
                                <a href="#method_registerNodeType">registerNodeType</a>
                            </li>
                    </ul>
                </div>
        </div>
            <div id="methods" class="api-class-tabpanel">
                <h2 class="off-left">Methods</h2>
                    <div id="method_createNode" class="method item">
    <h3 class="name"><code>createNode</code></h3>
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>type</code>
                </li>
                <li class="arg">
                        <code>name</code>
                </li>
                <li class="arg">
                        <code>options</code>
                </li>
            </ul><span class="paren">)</span>
        </div>
    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l67"><code>..&#x2F;src&#x2F;litegraph.js:67</code></a>
        </p>
    </div>
    <div class="description">
        <p>Create a node of a given type with a name. The node is not attached to any graph yet.</p>
    </div>
        <div class="params">
            <h4>Parameters:</h4>
            <ul class="params-list">
                <li class="param">
                        <code class="param-name">type</code>
                        <span class="type">String</span>
                    <div class="param-description">
                        <p>full name of the node class. p.e. &quot;math/sin&quot;</p>
                    </div>
                </li>
                <li class="param">
                        <code class="param-name">name</code>
                        <span class="type">String</span>
                    <div class="param-description">
                        <p>a name to distinguish from other nodes</p>
                    </div>
                </li>
                <li class="param">
                        <code class="param-name">options</code>
                        <span class="type">Object</span>
                    <div class="param-description">
                        <p>to set options</p>
                    </div>
                </li>
            </ul>
        </div>
 </div>
                    <div id="method_getNodeType" class="method item">
    <h3 class="name"><code>getNodeType</code></h3>
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>type</code>
                </li>
            </ul><span class="paren">)</span>
        </div>
        <span class="returns-inline">
            <span class="type">Class</span>
        </span>
    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l143"><code>..&#x2F;src&#x2F;litegraph.js:143</code></a>
        </p>
    </div>
    <div class="description">
        <p>Returns a registered node type with a given name</p>
    </div>
        <div class="params">
            <h4>Parameters:</h4>
            <ul class="params-list">
                <li class="param">
                        <code class="param-name">type</code>
                        <span class="type">String</span>
                    <div class="param-description">
                        <p>full name of the node class. p.e. &quot;math/sin&quot;</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="returns">
            <h4>Returns:</h4>
            <div class="returns-description">
                        <span class="type">Class</span>:
                    <p>the node class</p>
            </div>
        </div>
 </div>
                    <div id="method_getNodeType" class="method item">
    <h3 class="name"><code>getNodeType</code></h3>
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>category</code>
                </li>
            </ul><span class="paren">)</span>
        </div>
        <span class="returns-inline">
            <span class="type">Array</span>
        </span>
    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l156"><code>..&#x2F;src&#x2F;litegraph.js:156</code></a>
        </p>
    </div>
    <div class="description">
        <p>Returns a list of node types matching one category</p>
    </div>
        <div class="params">
            <h4>Parameters:</h4>
            <ul class="params-list">
                <li class="param">
                        <code class="param-name">category</code>
                        <span class="type">String</span>
                    <div class="param-description">
                        <p>category name</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="returns">
            <h4>Returns:</h4>
            <div class="returns-description">
                        <span class="type">Array</span>:
                    <p>array with all the node classes</p>
            </div>
        </div>
 </div>
                    <div id="method_getNodeTypesCategories" class="method item">
    <h3 class="name"><code>getNodeTypesCategories</code></h3>
        <span class="paren">()</span>
        <span class="returns-inline">
            <span class="type">Array</span>
        </span>
    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l178"><code>..&#x2F;src&#x2F;litegraph.js:178</code></a>
        </p>
    </div>
    <div class="description">
        <p>Returns a list with all the node type categories</p>
    </div>
        <div class="returns">
            <h4>Returns:</h4>
            <div class="returns-description">
                        <span class="type">Array</span>:
                    <p>array with all the names of the categories</p>
            </div>
        </div>
 </div>
                    <div id="method_registerNodeType" class="method item">
    <h3 class="name"><code>registerNodeType</code></h3>
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
                <li class="arg">
                        <code>type</code>
                </li>
                <li class="arg">
                        <code>base_class</code>
                </li>
            </ul><span class="paren">)</span>
        </div>
    <div class="meta">
                <p>
                Defined in
        <a href="../files/.._src_litegraph.js.html#l33"><code>..&#x2F;src&#x2F;litegraph.js:33</code></a>
        </p>
    </div>
    <div class="description">
        <p>Register a node class so it can be listed when the user wants to create a new one</p>
    </div>
        <div class="params">
            <h4>Parameters:</h4>
            <ul class="params-list">
                <li class="param">
                        <code class="param-name">type</code>
                        <span class="type">String</span>
                    <div class="param-description">
                        <p>name of the node and path</p>
                    </div>
                </li>
                <li class="param">
                        <code class="param-name">base_class</code>
                        <span class="type">Class</span>
                    <div class="param-description">
                        <p>class containing the structure of a node</p>
                    </div>
                </li>
            </ul>
        </div>
 </div>
            </div>
    </div>
 </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <script src="../assets/vendor/prettify/prettify-min.js"></script>
 <script>prettyPrint();</script>
 <script src="../assets/js/yui-prettify.js"></script>
 <script src="../assets/../api.js"></script>
 <script src="../assets/js/api-filter.js"></script>
 <script src="../assets/js/api-list.js"></script>
 <script src="../assets/js/api-search.js"></script>
 <script src="../assets/js/apidocs.js"></script>
 </body>
 </html>
--- a/doc/classes/index.html
+++ b/doc/classes/index.html
@@ -0,0 +1,10 @@
 <!doctype html>
 <html>
    <head>
        <title>Redirector</title>
        <meta http-equiv="refresh" content="0;url=../">
    </head>
    <body>
        <a href="../">Click here to redirect</a>
    </body>
 </html>
--- a/doc/data.json
+++ b/doc/data.json
@@ -0,0 +1,450 @@
 {
    "project": {},
    "files": {
        "../src/litegraph.js": {
            "name": "../src/litegraph.js",
            "modules": {},
            "classes": {
                "LiteGraph": 1,
                "LGraph": 1,
                "LGraphNode": 1
            },
            "fors": {},
            "namespaces": {}
        }
    },
    "modules": {},
    "classes": {
        "LiteGraph": {
            "name": "LiteGraph",
            "shortname": "LiteGraph",
            "classitems": [],
            "plugins": [],
            "extensions": [],
            "plugin_for": [],
            "extension_for": [],
            "file": "../src/litegraph.js",
            "line": 6,
            "description": "The Global Scope. It contains all the registered node classes.",
            "is_constructor": 1
        },
        "LGraph": {
            "name": "LGraph",
            "shortname": "LGraph",
            "classitems": [],
            "plugins": [],
            "extensions": [],
            "plugin_for": [],
            "extension_for": [],
            "file": "../src/litegraph.js",
            "line": 302,
            "description": "LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.",
            "is_constructor": 1
        },
        "LGraphNode": {
            "name": "LGraphNode",
            "shortname": "LGraphNode",
            "classitems": [],
            "plugins": [],
            "extensions": [],
            "plugin_for": [],
            "extension_for": [],
            "file": "../src/litegraph.js",
            "line": 947,
            "description": "Base Class for all the node type classes",
            "params": [
                {
                    "name": "name",
                    "description": "a name for the node",
                    "type": "String"
                }
            ]
        }
    },
    "classitems": [
        {
            "file": "../src/litegraph.js",
            "line": 33,
            "description": "Register a node class so it can be listed when the user wants to create a new one",
            "itemtype": "method",
            "name": "registerNodeType",
            "params": [
                {
                    "name": "type",
                    "description": "name of the node and path",
                    "type": "String"
                },
                {
                    "name": "base_class",
                    "description": "class containing the structure of a node",
                    "type": "Class"
                }
            ],
            "class": "LiteGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 67,
            "description": "Create a node of a given type with a name. The node is not attached to any graph yet.",
            "itemtype": "method",
            "name": "createNode",
            "params": [
                {
                    "name": "type",
                    "description": "full name of the node class. p.e. \"math/sin\"",
                    "type": "String"
                },
                {
                    "name": "name",
                    "description": "a name to distinguish from other nodes",
                    "type": "String"
                },
                {
                    "name": "options",
                    "description": "to set options",
                    "type": "Object"
                }
            ],
            "class": "LiteGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 143,
            "description": "Returns a registered node type with a given name",
            "itemtype": "method",
            "name": "getNodeType",
            "params": [
                {
                    "name": "type",
                    "description": "full name of the node class. p.e. \"math/sin\"",
                    "type": "String"
                }
            ],
            "return": {
                "description": "the node class",
                "type": "Class"
            },
            "class": "LiteGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 156,
            "description": "Returns a list of node types matching one category",
            "itemtype": "method",
            "name": "getNodeType",
            "params": [
                {
                    "name": "category",
                    "description": "category name",
                    "type": "String"
                }
            ],
            "return": {
                "description": "array with all the node classes",
                "type": "Array"
            },
            "class": "LiteGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 178,
            "description": "Returns a list with all the node type categories",
            "itemtype": "method",
            "name": "getNodeTypesCategories",
            "return": {
                "description": "array with all the names of the categories",
                "type": "Array"
            },
            "class": "LiteGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 321,
            "description": "Removes all nodes from this graph",
            "itemtype": "method",
            "name": "clear",
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 364,
            "description": "Starts running this graph every interval milliseconds.",
            "itemtype": "method",
            "name": "start",
            "params": [
                {
                    "name": "interval",
                    "description": "amount of milliseconds between executions, default is 1",
                    "type": "Number"
                }
            ],
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 391,
            "description": "Stops the execution loop of the graph",
            "itemtype": "method",
            "name": "stop",
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 413,
            "description": "Run N steps (cycles) of the graph",
            "itemtype": "method",
            "name": "runStep",
            "params": [
                {
                    "name": "num",
                    "description": "number of steps to run, default is 1",
                    "type": "Number"
                }
            ],
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 457,
            "description": "Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than\nnodes with only inputs.",
            "itemtype": "method",
            "name": "updateExecutionOrder",
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 553,
            "description": "Returns the amount of time the graph has been running in milliseconds",
            "itemtype": "method",
            "name": "getTime",
            "return": {
                "description": "number of milliseconds the graph has been running",
                "type": "Number"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 564,
            "description": "Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant",
            "itemtype": "method",
            "name": "getFixedTime",
            "return": {
                "description": "number of milliseconds the graph has been running",
                "type": "Number"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 575,
            "description": "Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct\nif the nodes are using graphical actions",
            "itemtype": "method",
            "name": "getElapsedTime",
            "return": {
                "description": "number of milliseconds it took the last cycle",
                "type": "Number"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 587,
            "description": "Sends an event to all the nodes, useful to trigger stuff",
            "itemtype": "method",
            "name": "sendEventToAllNodes",
            "params": [
                {
                    "name": "eventname",
                    "description": "the name of the event",
                    "type": "String"
                },
                {
                    "name": "param",
                    "description": "an object containing the info",
                    "type": "Object"
                }
            ],
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 602,
            "description": "Adds a new node instasnce to this graph",
            "itemtype": "method",
            "name": "add",
            "params": [
                {
                    "name": "node",
                    "description": "the instance of the node",
                    "type": "LGraphNode"
                }
            ],
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 647,
            "description": "Removes a node from the graph",
            "itemtype": "method",
            "name": "remove",
            "params": [
                {
                    "name": "node",
                    "description": "the instance of the node",
                    "type": "LGraphNode"
                }
            ],
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 708,
            "description": "Returns a node by its id.",
            "itemtype": "method",
            "name": "getNodeById",
            "params": [
                {
                    "name": "id",
                    "description": "",
                    "type": "String"
                }
            ],
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 721,
            "description": "Returns a list of nodes that matches a type",
            "itemtype": "method",
            "name": "findNodesByType",
            "params": [
                {
                    "name": "type",
                    "description": "the name of the node type",
                    "type": "String"
                }
            ],
            "return": {
                "description": "a list with all the nodes of this type",
                "type": "Array"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 737,
            "description": "Returns a list of nodes that matches a name",
            "itemtype": "method",
            "name": "findNodesByName",
            "params": [
                {
                    "name": "name",
                    "description": "the name of the node to search",
                    "type": "String"
                }
            ],
            "return": {
                "description": "a list with all the nodes with this name",
                "type": "Array"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 753,
            "description": "Returns the top-most node in this position of the canvas",
            "itemtype": "method",
            "name": "getNodeOnPos",
            "params": [
                {
                    "name": "x",
                    "description": "the x coordinate in canvas space",
                    "type": "Number"
                },
                {
                    "name": "y",
                    "description": "the y coordinate in canvas space",
                    "type": "Number"
                },
                {
                    "name": "nodes_list",
                    "description": "a list with all the nodes to search from, by default is all the nodes in the graph",
                    "type": "Array"
                }
            ],
            "return": {
                "description": "a list with all the nodes that intersect this coordinate",
                "type": "Array"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 774,
            "description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph",
            "itemtype": "method",
            "name": "setInputData",
            "params": [
                {
                    "name": "name",
                    "description": "the name of the node",
                    "type": "String"
                },
                {
                    "name": "value",
                    "description": "value to assign to this node",
                    "type": "*"
                }
            ],
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 789,
            "description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside",
            "itemtype": "method",
            "name": "setInputData",
            "params": [
                {
                    "name": "name",
                    "description": "the name of the node",
                    "type": "String"
                }
            ],
            "return": {
                "description": "value of the node",
                "type": "*"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 843,
            "description": "Creates a JSON String containing all the info about this graph",
            "itemtype": "method",
            "name": "serialize",
            "return": {
                "description": "value of the node",
                "type": "String"
            },
            "class": "LGraph"
        },
        {
            "file": "../src/litegraph.js",
            "line": 869,
            "description": "Configure a graph from a JSON string",
            "itemtype": "method",
            "name": "unserialize",
            "params": [
                {
                    "name": "str",
                    "description": "configure a graph from a JSON string",
                    "type": "String"
                }
            ],
            "class": "LGraph"
        }
    ],
    "warnings": []
 }
--- a/doc/files/.._src_litegraph.js.html
+++ b/doc/files/.._src_litegraph.js.html
--- a/doc/files/index.html
+++ b/doc/files/index.html
@@ -0,0 +1,10 @@
 <!doctype html>
 <html>
    <head>
        <title>Redirector</title>
        <meta http-equiv="refresh" content="0;url=../">
    </head>
    <body>
        <a href="../">Click here to redirect</a>
    </body>
 </html>
--- a/doc/index.html
+++ b/doc/index.html
@@ -0,0 +1,126 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="./assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="./assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="./assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
 </head>
 <body class="yui3-skin-sam">
 <div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
                <h1><img src="./assets/css/logo.png" title=""></h1>
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">
        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>
        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>
        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
                <li><a href="./classes/LGraph.html">LGraph</a></li>
                <li><a href="./classes/LGraphNode.html">LGraphNode</a></li>
                <li><a href="./classes/LiteGraph.html">LiteGraph</a></li>
            </ul>
            <ul id="api-modules" class="apis modules">
            </ul>
        </div>
    </div>
 </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>
        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>
        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>
    </div>
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                            <div class="apidocs">
        <div id="docs-main" class="content">
            <p>
            Browse to a module or class using the sidebar to view its API documentation.
            </p>
            <h2>Keyboard Shortcuts</h2>
            <ul>
                <li><p>Press <kbd>s</kbd> to focus the API search box.</p></li>
                <li><p>Use <kbd>Up</kbd> and <kbd>Down</kbd> to select classes, modules, and search results.</p></li>
                <li class="mac-only"><p>With the API search box or sidebar focused, use <kbd><span class="cmd">&#x2318;</span>-Left</kbd> or <kbd><span class="cmd">&#x2318;</span>-Right</kbd> to switch sidebar tabs.</p></li>
                <li class="pc-only"><p>With the API search box or sidebar focused, use <kbd>Ctrl+Left</kbd> and <kbd>Ctrl+Right</kbd> to switch sidebar tabs.</p></li>
            </ul>
        </div>
    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
 <script src="./assets/vendor/prettify/prettify-min.js"></script>
 <script>prettyPrint();</script>
 <script src="./assets/js/yui-prettify.js"></script>
 <script src="./assets/../api.js"></script>
 <script src="./assets/js/api-filter.js"></script>
 <script src="./assets/js/api-list.js"></script>
 <script src="./assets/js/api-search.js"></script>
 <script src="./assets/js/apidocs.js"></script>
 </body>
 </html>
--- a/doc/modules/index.html
+++ b/doc/modules/index.html
@@ -0,0 +1,10 @@
 <!doctype html>
 <html>
    <head>
        <title>Redirector</title>
        <meta http-equiv="refresh" content="0;url=../">
    </head>
    <body>
        <a href="../">Click here to redirect</a>
    </body>
 </html>
--- a/src/litegraph.js
+++ b/src/litegraph.js
@@ -17,9 +17,10 @@ var LiteGraph = {
 	NODE_WIDTH: 140,
 	NODE_MIN_WIDTH: 50,
 	NODE_COLLAPSED_RADIUS: 10,
 	NODE_COLLAPSED_WIDTH: 80,
 	CANVAS_GRID_SIZE: 10,
-	NODE_DEFAULT_COLOR: "#888",
+	NODE_DEFAULT_COLOR: "#999",
-	NODE_DEFAULT_BGCOLOR: "#333",
+	NODE_DEFAULT_BGCOLOR: "#444",
 	NODE_DEFAULT_BOXCOLOR: "#AEF",
 	NODE_DEFAULT_SHAPE: "box",
 	MAX_NUMBER_OF_NODES: 1000, //avoid infinite loops
@@ -1166,7 +1167,7 @@ LGraphNode.prototype.computeSize = function(minHeight)
 //returns the bounding of the object, used for rendering purposes
 LGraphNode.prototype.getBounding = function()
 {
-	return new Float32Array([this.pos[0] - 4, this.pos[1] - LGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
+	return new Float32Array([this.pos[0] - 4, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, this.pos[0] + this.size[0] + 4, this.pos[1] + this.size[1] + LGraph.NODE_TITLE_HEIGHT]);
 }
 //checks if a point is inside the shape of a node
@@ -1175,7 +1176,8 @@ LGraphNode.prototype.isPointInsideNode = function(x,y)
 	var margin_top = this.graph.isLive() ? 0 : 20;
 	if(this.flags.collapsed)
 	{
-		if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
+		//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
 		if( isInsideRectangle(x,y, this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT, LiteGraph.NODE_COLLAPSED_WIDTH, LiteGraph.NODE_TITLE_HEIGHT) )
 			return true;
 	}
 	else if (this.pos[0] - 4 < x && (this.pos[0] + this.size[0] + 4) > x
@@ -1384,7 +1386,13 @@ LGraphNode.prototype.disconnectInput = function(slot)
 LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
 {
 	if(this.flags.collapsed)
-		return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
+	{
 		if(is_input)
 			return [this.pos[0], this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
 		else
 			return [this.pos[0] + LiteGraph.NODE_COLLAPSED_WIDTH, this.pos[1] - LiteGraph.NODE_TITLE_HEIGHT * 0.5];
 		//return [this.pos[0] + this.size[0] * 0.5, this.pos[1] + this.size[1] * 0.5];
 	}
 	if(is_input && slot_number == -1)
 	{
@@ -1401,331 +1409,6 @@ LGraphNode.prototype.getConnectionPos = function(is_input,slot_number)
 	return [this.pos[0] , this.pos[1] + 10 + slot_number * LiteGraph.NODE_SLOT_HEIGHT];
 }
 /* Renders the LGraphNode on the canvas */
 LGraphNode.prototype.draw = function(ctx, canvasrender)
 {
 	var glow = false;
 	var color = this.color || LiteGraph.NODE_DEFAULT_COLOR;
 	//if (this.selected) color = "#88F";
 	var render_title = true;
 	if(this.flags.skip_title_render || this.graph.isLive())
 		render_title = false;
 	if(this.mouseOver)
 		render_title = true;
 	//shadow and glow
 	if (this.mouseOver) glow = true;
 	if(this.selected)
 	{
 		/*
 		ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
 		ctx.shadowOffsetX = 0;
 		ctx.shadowOffsetY = 0;
 		ctx.shadowBlur = 1;
 		*/
 	}
 	else if(canvasrender.render_shadows)
 	{
 		ctx.shadowColor = "#111";
 		ctx.shadowOffsetX = 2;
 		ctx.shadowOffsetY = 2;
 		ctx.shadowBlur = 4;
 	}
 	else
 		ctx.shadowColor = "transparent";
 	//only render if it forces it to do it
 	if(canvasrender.live_mode)
 	{
 		if(!this.flags.collapsed)
 		{
 			ctx.shadowColor = "transparent";
 			if(this.onDrawBackground)
 				this.onDrawBackground(ctx);
 			if(this.onDrawForeground)
 				this.onDrawForeground(ctx);
 		}
 		return;
 	}
 	//draw in collapsed form
 	if(this.flags.collapsed)
 	{
 		if(!this.onDrawCollapsed || this.onDrawCollapsed(ctx) == false)
 			this.drawNodeCollapsed(ctx,color,this.bgcolor);
 		return;
 	}
 	//clip if required (mask)
 	if(this.flags.clip_area)
 	{
 		ctx.save();
 		if(this.shape == null || this.shape == "box")
 		{
 			ctx.beginPath();
 			ctx.rect(0,0,this.size[0], this.size[1]);
 		}
 		else if (this.shape == "round")
 		{
 			ctx.roundRect(0,0,this.size[0], this.size[1],10);
 		}
 		else if (this.shape == "circle")
 		{
 			ctx.beginPath();
 			ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
 		}
 		ctx.clip();
 	}
 	//draw shape
 	this.drawNodeShape(ctx,color, this.bgcolor, !render_title, this.selected );
 	ctx.shadowColor = "transparent";
 	//connection slots
 	ctx.textAlign = "left";
 	ctx.font = "12px Arial";
 	var render_text = this.graph.config.canvas_scale > 0.6;
 	//input connection slots
 	if(this.inputs)
 		for(var i = 0; i < this.inputs.length; i++)
 		{
 			var slot = this.inputs[i];
 			ctx.globalAlpha = 1.0;
 			if (canvasrender.connecting_node != null && canvasrender.connecting_output.type != 0 && this.inputs[i].type != 0 && canvasrender.connecting_output.type != this.inputs[i].type)
 				ctx.globalAlpha = 0.4;
 			ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
 			var pos = this.getConnectionPos(true,i);
 			pos[0] -= this.pos[0];
 			pos[1] -= this.pos[1];
 			ctx.beginPath();
 			if (1 || slot.round)
 				ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 			//else
 			//	ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
 			ctx.fill();
 			//render name
 			if(render_text)
 			{
 				var text = slot.label != null ? slot.label : slot.name;
 				if(text)
 				{
 					ctx.fillStyle = color; 
 					ctx.fillText(text,pos[0] + 10,pos[1] + 5);
 				}
 			}
 		}
 	//output connection slots
 	if(canvasrender.connecting_node)
 		ctx.globalAlpha = 0.4;
 	ctx.lineWidth = 1;
 	ctx.textAlign = "right";
 	ctx.strokeStyle = "black";
 	if(this.outputs)
 		for(var i = 0; i < this.outputs.length; i++)
 		{
 			var slot = this.outputs[i];
 			var pos = this.getConnectionPos(false,i);
 			pos[0] -= this.pos[0];
 			pos[1] -= this.pos[1];
 			ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
 			ctx.beginPath();
 			//ctx.rect( this.size[0] - 14,i*14,10,10);
 			if (1 || slot.round)
 				ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 			//else
 			//	ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
 			//trigger
 			//if(slot.node_id != null && slot.slot == -1)
 			//	ctx.fillStyle = "#F85";
 			//if(slot.links != null && slot.links.length)
 			ctx.fill();
 			ctx.stroke();
 			//render output name
 			if(render_text)
 			{
 				var text = slot.label != null ? slot.label : slot.name;
 				if(text)
 				{
 					ctx.fillStyle = color;
 					ctx.fillText(text, pos[0] - 10,pos[1] + 5);
 				}
 			}
 		}
 	ctx.textAlign = "left";
 	ctx.globalAlpha = 1.0;
 	if(this.onDrawForeground)
 		this.onDrawForeground(ctx);
 	if(this.flags.clip_area)
 		ctx.restore();
 }
 /* Renders the node shape */
 LGraphNode.prototype.drawNodeShape = function(ctx, fgcolor, bgcolor, no_title, selected )
 {
 	//bg rect
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	/* gradient test
 	var grad = ctx.createLinearGradient(0,0,0,this.size[1]);
 	grad.addColorStop(0, "#AAA");
 	grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
 	grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
 	ctx.fillStyle = grad;
 	*/
 	var title_height = LiteGraph.NODE_TITLE_HEIGHT;
 	//render depending on shape
 	if(this.shape == null || this.shape == "box")
 	{
 		if(selected)
 		{
 			ctx.strokeStyle = "#CCC";
 			ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5,this.size[0]+2, no_title ? (this.size[1]+2) : (this.size[1] + title_height+2) );
 			ctx.strokeStyle = fgcolor;
 		}
 		ctx.beginPath();
 		ctx.rect(0.5,no_title ? 0.5 : -title_height + 0.5,this.size[0], no_title ? this.size[1] : this.size[1] + title_height);
 	}
 	else if (this.shape == "round")
 	{
 		ctx.roundRect(0,no_title ? 0 : -title_height,this.size[0], no_title ? this.size[1] : this.size[1] + title_height, 10);
 	}
 	else if (this.shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5,this.size[0] * 0.5, 0, Math.PI*2);
 	}
 	ctx.fill();
 	ctx.shadowColor = "transparent";
 	ctx.stroke();
 	//image
 	if (this.bgImage && this.bgImage.width)
 		ctx.drawImage( this.bgImage, (this.size[0] - this.bgImage.width) * 0.5 , (this.size[1] - this.bgImage.height) * 0.5);
 	if(this.bgImageUrl && !this.bgImage)
 		this.bgImage = this.loadImage(this.bgImageUrl);
 	if(this.onDrawBackground)
 		this.onDrawBackground(ctx);
 	//title bg
 	if(!no_title)
 	{
 		ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 		if(this.shape == null || this.shape == "box")
 		{
 			ctx.fillRect(0,-title_height,this.size[0],title_height);
 			ctx.stroke();
 		}
 		else if (this.shape == "round")
 		{
 			ctx.roundRect(0,-title_height,this.size[0], title_height,10,0);
 			//ctx.fillRect(0,8,this.size[0],NODE_TITLE_HEIGHT - 12);
 			ctx.fill();
 			ctx.stroke();
 		}
 		//box
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		if (this.shape == "round")
 			ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
 		else
 			ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
 		ctx.fill();
 		//title text
 		ctx.font = "bold 12px Arial";
 		if(this.name != "" && this.graph.config.canvas_scale > 0.8)
 		{
 			ctx.fillStyle = "#222";
 			ctx.fillText(this.name,16,13-title_height );
 		}
 	}
 }
 /* Renders the node when collapsed */
 LGraphNode.prototype.drawNodeCollapsed = function(ctx, fgcolor, bgcolor)
 {
 	//draw default collapsed shape
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
 	//circle shape
 	if(this.shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.arc(this.size[0] * 0.5, this.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
 		ctx.fill();
 	}
 	else if(this.shape == "round") //rounded box
 	{
 		ctx.beginPath();
 		ctx.roundRect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.roundRect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
 		ctx.fill();
 	}
 	else //flat box
 	{
 		ctx.beginPath();
 		ctx.rect(this.size[0] * 0.5 - collapsed_radius, this.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.rect(this.size[0] * 0.5 - collapsed_radius*0.5, this.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
 		ctx.fill();
 	}
 }
 /* Force align to grid */
 LGraphNode.prototype.alignToGrid = function()
 {
@@ -2946,14 +2629,14 @@ LGraphCanvas.prototype.drawFrontCanvas = function()
 		for (var i in visible_nodes)
 		{
-			var n = visible_nodes[i];
+			var node = visible_nodes[i];
 			//transform coords system
 			ctx.save();
-			ctx.translate( n.pos[0], n.pos[1] );
+			ctx.translate( node.pos[0], node.pos[1] );
 			//Draw
-			n.draw(ctx,this);
+			this.drawNode(node, ctx );
 			drawn_nodes += 1;
 			//Restore
@@ -3090,6 +2773,349 @@ LGraphCanvas.prototype.drawBgcanvas = function()
 	this.dirty_canvas = true; //to force to repaint the front canvas with the bgcanvas 
 }
 /* Renders the LGraphNode on the canvas */
 LGraphCanvas.prototype.drawNode = function(node, ctx )
 {
 	var glow = false;
 	var color = node.color || LiteGraph.NODE_DEFAULT_COLOR;
 	//if (this.selected) color = "#88F";
 	var render_title = true;
 	if(node.flags.skip_title_render || node.graph.isLive())
 		render_title = false;
 	if(node.mouseOver)
 		render_title = true;
 	//shadow and glow
 	if (node.mouseOver) glow = true;
 	if(node.selected)
 	{
 		/*
 		ctx.shadowColor = "#EEEEFF";//glow ? "#AAF" : "#000";
 		ctx.shadowOffsetX = 0;
 		ctx.shadowOffsetY = 0;
 		ctx.shadowBlur = 1;
 		*/
 	}
 	else if(this.render_shadows)
 	{
 		ctx.shadowColor = "#111";
 		ctx.shadowOffsetX = 2;
 		ctx.shadowOffsetY = 2;
 		ctx.shadowBlur = 4;
 	}
 	else
 		ctx.shadowColor = "transparent";
 	//only render if it forces it to do it
 	if(this.live_mode)
 	{
 		if(!node.flags.collapsed)
 		{
 			ctx.shadowColor = "transparent";
 			if(node.onDrawBackground)
 				node.onDrawBackground(ctx);
 			if(node.onDrawForeground)
 				node.onDrawForeground(ctx);
 		}
 		return;
 	}
 	//draw in collapsed form
 	/*
 	if(node.flags.collapsed)
 	{
 		if(!node.onDrawCollapsed || node.onDrawCollapsed(ctx) == false)
 			this.drawNodeCollapsed(node, ctx, color, node.bgcolor);
 		return;
 	}
 	*/
 	//clip if required (mask)
 	var shape = node.shape || "box";
 	var size = new Float32Array(node.size);
 	if(node.flags.collapsed)
 		size.set([LiteGraph.NODE_COLLAPSED_WIDTH, 0]);
 	//Start cliping
 	if(node.flags.clip_area)
 	{
 		ctx.save();
 		if(shape == "box")
 		{
 			ctx.beginPath();
 			ctx.rect(0,0,size[0], size[1]);
 		}
 		else if (shape == "round")
 		{
 			ctx.roundRect(0,0,size[0], size[1],10);
 		}
 		else if (shape == "circle")
 		{
 			ctx.beginPath();
 			ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
 		}
 		ctx.clip();
 	}
 	//draw shape
 	this.drawNodeShape(node, ctx, size, color, node.bgcolor, !render_title, node.selected );
 	ctx.shadowColor = "transparent";
 	//connection slots
 	ctx.textAlign = "left";
 	ctx.font = "12px Arial";
 	var render_text = node.graph.config.canvas_scale > 0.6;
 	//render inputs and outputs
 	if(!node.flags.collapsed)
 	{
 		//input connection slots
 		if(node.inputs)
 			for(var i = 0; i < node.inputs.length; i++)
 			{
 				var slot = node.inputs[i];
 				ctx.globalAlpha = 1.0;
 				if (this.connecting_node != null && this.connecting_output.type != 0 && node.inputs[i].type != 0 && this.connecting_output.type != node.inputs[i].type)
 					ctx.globalAlpha = 0.4;
 				ctx.fillStyle = slot.link != null ? "#7F7" : "#AAA";
 				var pos = node.getConnectionPos(true,i);
 				pos[0] -= node.pos[0];
 				pos[1] -= node.pos[1];
 				ctx.beginPath();
 				if (1 || slot.round)
 					ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 				//else
 				//	ctx.rect((pos[0] - 6) + 0.5, (pos[1] - 5) + 0.5,14,10);
 				ctx.fill();
 				//render name
 				if(render_text)
 				{
 					var text = slot.label != null ? slot.label : slot.name;
 					if(text)
 					{
 						ctx.fillStyle = color; 
 						ctx.fillText(text,pos[0] + 10,pos[1] + 5);
 					}
 				}
 			}
 		//output connection slots
 		if(this.connecting_node)
 			ctx.globalAlpha = 0.4;
 		ctx.lineWidth = 1;
 		ctx.textAlign = "right";
 		ctx.strokeStyle = "black";
 		if(node.outputs)
 			for(var i = 0; i < node.outputs.length; i++)
 			{
 				var slot = node.outputs[i];
 				var pos = node.getConnectionPos(false,i);
 				pos[0] -= node.pos[0];
 				pos[1] -= node.pos[1];
 				ctx.fillStyle = slot.links && slot.links.length ? "#7F7" : "#AAA";
 				ctx.beginPath();
 				//ctx.rect( node.size[0] - 14,i*14,10,10);
 				if (1 || slot.round)
 					ctx.arc(pos[0],pos[1],4,0,Math.PI*2);
 				//else
 				//	ctx.rect((pos[0] - 6) + 0.5,(pos[1] - 5) + 0.5,14,10);
 				//trigger
 				//if(slot.node_id != null && slot.slot == -1)
 				//	ctx.fillStyle = "#F85";
 				//if(slot.links != null && slot.links.length)
 				ctx.fill();
 				ctx.stroke();
 				//render output name
 				if(render_text)
 				{
 					var text = slot.label != null ? slot.label : slot.name;
 					if(text)
 					{
 						ctx.fillStyle = color;
 						ctx.fillText(text, pos[0] - 10,pos[1] + 5);
 					}
 				}
 			}
 		ctx.textAlign = "left";
 		ctx.globalAlpha = 1.0;
 		if(node.onDrawForeground)
 			node.onDrawForeground(ctx);
 	}//!collapsed
 	if(node.flags.clip_area)
 		ctx.restore();
 }
 /* Renders the node shape */
 LGraphCanvas.prototype.drawNodeShape = function(node, ctx, size, fgcolor, bgcolor, no_title, selected )
 {
 	//bg rect
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	/* gradient test
 	var grad = ctx.createLinearGradient(0,0,0,node.size[1]);
 	grad.addColorStop(0, "#AAA");
 	grad.addColorStop(0.5, fgcolor || LiteGraph.NODE_DEFAULT_COLOR);
 	grad.addColorStop(1, bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR);
 	ctx.fillStyle = grad;
 	*/
 	var title_height = LiteGraph.NODE_TITLE_HEIGHT;
 	//render depending on shape
 	var shape = node.shape || "box";
 	if(shape == "box")
 	{
 		if(selected)
 		{
 			ctx.strokeStyle = "#CCC";
 			ctx.strokeRect(-0.5,no_title ? -0.5 : -title_height + -0.5, size[0]+2, no_title ? (size[1]+2) : (size[1] + title_height+2) );
 			ctx.strokeStyle = fgcolor;
 		}
 		ctx.beginPath();
 		ctx.rect(0,no_title ? 0.5 : -title_height + 1,size[0]+1, no_title ? size[1] : size[1] + title_height);
 	}
 	else if (node.shape == "round")
 	{
 		ctx.roundRect(0,no_title ? 0 : -title_height,size[0], no_title ? size[1] : size[1] + title_height, 10);
 	}
 	else if (node.shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5, 0, Math.PI*2);
 	}
 	ctx.fill();
 	ctx.shadowColor = "transparent";
 	//ctx.stroke();
 	//image
 	if (node.bgImage && node.bgImage.width)
 		ctx.drawImage( node.bgImage, (size[0] - node.bgImage.width) * 0.5 , (size[1] - node.bgImage.height) * 0.5);
 	if(node.bgImageUrl && !node.bgImage)
 		node.bgImage = node.loadImage(node.bgImageUrl);
 	if(node.onDrawBackground)
 		node.onDrawBackground(ctx);
 	//title bg
 	if(!no_title)
 	{
 		ctx.fillStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 		if(shape == "box")
 		{
 			ctx.beginPath();
 			ctx.fillRect(0,-title_height,size[0]+1,title_height);
 			ctx.stroke();
 		}
 		else if (shape == "round")
 		{
 			ctx.roundRect(0,-title_height,size[0], title_height,10,0);
 			//ctx.fillRect(0,8,size[0],NODE_TITLE_HEIGHT - 12);
 			ctx.fill();
 			ctx.stroke();
 		}
 		//box
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		if (shape == "round")
 			ctx.arc(title_height *0.5, title_height * -0.5, (title_height - 6) *0.5,0,Math.PI*2);
 		else
 			ctx.rect(3,-title_height + 3,title_height - 6,title_height - 6);
 		ctx.fill();
 		//title text
 		ctx.font = "bold 12px Arial";
 		if(node.name != "" && node.graph.config.canvas_scale > 0.8)
 		{
 			ctx.fillStyle = "#222";
 			ctx.fillText(node.name,16,13-title_height );
 		}
 	}
 }
 /* Renders the node when collapsed */
 LGraphCanvas.prototype.drawNodeCollapsed = function(node, ctx, fgcolor, bgcolor)
 {
 	//draw default collapsed shape
 	ctx.strokeStyle = fgcolor || LiteGraph.NODE_DEFAULT_COLOR;
 	ctx.fillStyle = bgcolor || LiteGraph.NODE_DEFAULT_BGCOLOR;
 	var collapsed_radius = LiteGraph.NODE_COLLAPSED_RADIUS;
 	//circle shape
 	var shape = node.shape || "box";
 	if(shape == "circle")
 	{
 		ctx.beginPath();
 		ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius,0,Math.PI * 2);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.arc(node.size[0] * 0.5, node.size[1] * 0.5, collapsed_radius * 0.5,0,Math.PI * 2);
 		ctx.fill();
 	}
 	else if(shape == "round") //rounded box
 	{
 		ctx.beginPath();
 		ctx.roundRect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius,2*collapsed_radius,5);
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		ctx.roundRect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius,2);
 		ctx.fill();
 	}
 	else //flat box
 	{
 		ctx.beginPath();
 		//ctx.rect(node.size[0] * 0.5 - collapsed_radius, node.size[1] * 0.5 - collapsed_radius, 2*collapsed_radius, 2*collapsed_radius);
 		ctx.rect(0, 0, node.size[0], collapsed_radius * 2 );
 		ctx.fill();
 		ctx.shadowColor = "rgba(0,0,0,0)";
 		ctx.stroke();
 		ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
 		ctx.beginPath();
 		//ctx.rect(node.size[0] * 0.5 - collapsed_radius*0.5, node.size[1] * 0.5 - collapsed_radius*0.5, collapsed_radius,collapsed_radius);
 		ctx.rect(collapsed_radius*0.5, collapsed_radius*0.5, collapsed_radius, collapsed_radius);
 		ctx.fill();
 	}
 }
 LGraphCanvas.link_colors = ["#AAC","#ACA","#CAA"];
 LGraphCanvas.prototype.drawConnections = function(ctx)
@@ -3398,7 +3424,7 @@ LGraphCanvas.onMenuNodeColors = function(node, e, prev_menu)
 LGraphCanvas.onMenuNodeShapes = function(node,e)
 {
-	LiteGraph.createContextualMenu(["box","round","circle"], {event: e, callback: inner_clicked});
+	LiteGraph.createContextualMenu(["box","round"], {event: e, callback: inner_clicked});
 	function inner_clicked(v)
 	{
		`@@ -0,0 +1 @@`
							.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}