From 81088843abdbefd8aba7e25e31812ee08ea3906f Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Tue, 12 Mar 2013 10:25:44 +0200
Subject: [PATCH] componentize

---
 .gitignore                      |    2 +
 Makefile                        |   16 +
 build/xgui.min.js               |   75 -
 component.json                  |   10 +
 dist/xgui.js                    | 2274 +++++++++++++++++++++++++++++++
 dist/xgui.min.js                |   78 ++
 examples/testbed.html           |   16 +-
 examples/testbed_component.html |  184 +++
 examples/testbed_touch.html     |   18 +-
 index.js                        |    1 +
 src/xgui.js                     |    5 +
 utils/builder.py                |    4 +-
 12 files changed, 2589 insertions(+), 94 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 Makefile
 delete mode 100644 build/xgui.min.js
 create mode 100644 component.json
 create mode 100644 dist/xgui.js
 create mode 100644 dist/xgui.min.js
 create mode 100644 examples/testbed_component.html
 create mode 100644 index.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f4d3e5b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+components
+build
\ No newline at end of file
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..6a67f8e
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,16 @@
+
+build: index.js src
+	@component-build --dev
+
+components: component.json
+	@component-install --dev
+
+dist: build
+	@component-build -s xgui -n xgui -o dist/ \
+		&& cd utils \
+		&& python builder.py
+
+clean:
+	rm -rf components build dist
+
+.PHONY: clean
diff --git a/build/xgui.min.js b/build/xgui.min.js
deleted file mode 100644
index bc0e325..0000000
--- a/build/xgui.min.js
+++ /dev/null
@@ -1,75 +0,0 @@
-// xgui.js r1 - https://github.com/oosmoxiecode/xgui.js
-var xgui=function(j){function m(a,c){a.preventDefault();var b=a,d=1,e=0;c&&(d=a.touches.length);for(var f=0;f<d;f++){c&&(b=a.touches[f],e=b.identifier);if(!r[e]){if(null!=k[e]){var h=i[k[e]];if("ColorPicker2"==h.name){var g=n.relMouseCoords(b);h.mouseMove(g.x-h.x,g.y-h.y)}}break}g=n.relMouseCoords(b);h=i[k[e]];if("CheckBox"==h.name||"RadioButton"==h.name||"Button"==h.name||"ImageButton"==h.name||"Matrix"==h.name)break;if("Stepper"==h.name&&(h.mouseDownPlus||h.mouseDownMinus))break;h.mouseDown(g.x-
-h.x,g.y-h.y)}}function p(a,c){var b=a,d=0;c&&(d=a.changedTouches[0].identifier);if(a.target==g||a.target==n)null!=k[d]?"InputText"!=i[k[d]].name&&"DropDown"!=i[k[d]].name&&a.preventDefault():a.preventDefault();c&&(b=a.touches[d]);for(var e=n.relMouseCoords(b),f=0;f<i.length;++f)if(b=i[f],e.x>b.x&&e.x<b.x+b.width&&e.y>b.y&&e.y<b.y+b.height){b.mouseDown(e.x-b.x,e.y-b.y);r[d]=!0;null!=k[d]&&(e=i[k[d]],"ColorPicker2"==e.name&&e.mouseUp());k[d]=b.id;break}}function l(a,c){var b=0;c&&(b=a.changedTouches[0].identifier);
-r[b]=!1;null!=k[b]&&i[k[b]].mouseUp(b)}void 0==j&&(j={});var g,n,a,i=[],r=[!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1],k=[null,null,null,null,null,null,null,null,null,null,null],e=j.backgroundColor||"rgb(100, 100, 100)",f=j.frontColor||"rgb(230, 230, 230)",o=j.dimColor||"rgb(140, 140, 140)",q;this.width=j.width||600;this.height=j.height||400;g=document.createElement("div");g.style.position="relative";g.style.width=""+this.width+"px";g.style.height=""+this.height+"px";g.setAttribute("id","xgui_container");n=
-document.createElement("canvas");n.width=this.width;n.height=this.height;a=n.getContext("2d");g.appendChild(n);var s="ontouchstart"in n||null!=navigator.userAgent.match(/ipad|iphone|android/i);s?(document.addEventListener("touchmove",function(a){m(a,!0)},!1),g.addEventListener("touchstart",function(a){p(a,!0)},!1),document.addEventListener("touchend",function(a){l(a,!0)},!1)):(document.addEventListener("mousemove",function(a){m(a)},!1),g.addEventListener("mousedown",function(a){p(a)},!1),document.addEventListener("mouseup",
-function(a){l(a)},!1));Base=function c(a){if(this.constructor!=c){a==void 0&&(a={});this.id=i.push(this)-1;this.x=a.x||0;this.y=a.y||0;this.updateInterval=a.updateInterval||200;this.lastUpdate=0}};Value=function(c){this.v=c;this.bindArray=[];this.both=this.receiver=false};Value.prototype.bind=function(){var c=arguments[0];if(typeof c=="function")this.bindArray.push(c);else if(typeof c=="object"){for(var c=[c],a=1;a<arguments.length;++a)c.push(arguments[a]);this.bindArray.push(c)}else console.log("error")};
-Value.prototype.updateBind=function(c){for(var c=c||false,a=0;a<this.bindArray.length;++a){var d=this.bindArray[a];if(typeof d=="function")d(this.v,c);else if(typeof d=="object")for(var e=d[0],f=1;f<d.length;++f)if(this.receiver)this.v=e[d[f]];else{if(this.both)this.v=e[d[f]];e[d[f]]=this.v}else console.log("error")}};this.Matrix=function(c){Base.call(this,c);this.name="Matrix";this.w=c.w||4;this.h=c.h||4;this.size=c.size||10;this.width=this.w*this.size+this.w-1;this.height=this.h*this.size+this.h-
-1;for(var a=[],d=0;d<this.h;++d){a[d]=[];for(var e=0;e<this.w;++e)a[d][e]=0}this.value=new Value(c.array||a);this.draw()};this.Matrix.prototype=new Base;this.Matrix.prototype.constructor=this.Matrix;this.Matrix.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);for(var c=0;c<this.h;++c)for(var b=0;b<this.w;++b){a.fillStyle=e;a.fillRect(this.x+b*this.size+b,this.y+c*this.size+c,this.size,this.size);if(this.value.v[c][b]){a.fillStyle=f;a.fillRect(this.x+b*this.size+b+2,this.y+
-c*this.size+c+2,this.size-4,this.size-4)}}};this.Matrix.prototype.mouseDown=function(c,a){var d=Math.floor(c/(this.size+1)),e=Math.floor(a/(this.size+1));this.value.v[e][d]=this.value.v[e][d]?0:1;this.value.updateBind();this.draw()};this.Matrix.prototype.mouseUp=function(){this.value.updateBind(true)};this.RangeSlider=function(a){Base.call(this,a);this.name="RangeSlider";this.mouseIsOver=false;this.value1=new Value(a.value1||25);this.value2=new Value(a.value2||75);this.width=a.width||100;this.height=
-a.height||10;this.min=a.min||0;this.max=a.max||this.width;this.range=this.max-this.min;this.decimals=a.decimals||0;this.draw()};this.RangeSlider.prototype=new Base;this.RangeSlider.prototype.constructor=this.RangeSlider;this.RangeSlider.prototype.draw=function(){if(this.value1.v>this.max)this.value1.v=this.max;if(this.value1.v<this.min)this.value1.v=this.min;if(this.value2.v>this.max)this.value2.v=this.max;if(this.value2.v<this.min)this.value2.v=this.min;if(this.value1.v>this.value2.v)this.value1.v=
-this.value2.v;if(this.value2.v<this.value1.v)this.value2.v=this.value1.v;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=e;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=f;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value1.v.toFixed(this.decimals),this.x,this.y+9+c);a.fillStyle=f;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="right";a.fillText(this.value2.v.toFixed(this.decimals),
-this.x+this.width-1,this.y+9+c);a.fillStyle=f;var b=this.getPositionFromValue(this.value1.v),d=this.getPositionFromValue(this.value2.v);a.fillRect(this.x+b,this.y,d-b,this.height);a.save();a.fillStyle="transparent";a.beginPath();a.rect(this.x+b,this.y,d-b,this.height);a.clip();a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value1.v.toFixed(this.decimals),this.x,this.y+9+c);a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="right";
-a.fillText(this.value2.v.toFixed(this.decimals),this.x+this.width-1,this.y+9+c);a.restore()};this.RangeSlider.prototype.setValueFromPosition=function(a,b){var d=this.range/this.width*a-(this.range-this.max);if(d>this.max)d=this.max;if(d<this.min)d=this.min;b==1?this.value1.v=d:this.value2.v=d};this.RangeSlider.prototype.getPositionFromValue=function(a){var b=this.width/this.range,d=Math.abs(this.min);this.min>0&&(d=d*-1);return b*(a+d)};this.RangeSlider.prototype.mouseDown=function(a){var b=this.getPositionFromValue(this.value1.v),
-d=this.getPositionFromValue(this.value2.v),b=Math.abs(a-b),d=Math.abs(a-d);if(b<d){this.setValueFromPosition(a,1);this.value1.updateBind()}else{this.setValueFromPosition(a,2);this.value2.updateBind()}this.draw()};this.RangeSlider.prototype.mouseUp=function(){this.value1.updateBind(true);this.value2.updateBind(true)};this.DropDown=function(a){Base.call(this,a);this.name="DropDown";this.values=a.values||["DropDown"];this.texts=a.texts||this.values;this.dropdown=document.createElement("select");this.dropdown.setAttribute("id",
-this.id);this.value=new Value(this.values[0]);for(a=0;a<this.values.length;++a){var b=document.createElement("option");b.text=this.texts[a];b.value=this.values[a];this.dropdown.options.add(b)}a=document.createElement("canvas");a.width=16;a.height=16;b=a.getContext("2d");b.clearRect(0,0,16,16);b.fillStyle=o;b.fillRect(0,0,16,16);b.fillStyle=f;b.beginPath();b.moveTo(4.5,6);b.lineTo(12.5,6);b.lineTo(8.5,11);b.lineTo(4.5,6);b.closePath();b.fill();b.strokeStyle=e;b.beginPath();b.moveTo(0,0);b.lineTo(0,
-16);b.closePath();b.stroke();b.beginPath();b.moveTo(16,0);b.lineTo(16,16);b.closePath();b.stroke();this.div=document.createElement("div");this.div.setAttribute("id","input"+this.id);this.div.style.position="absolute";this.div.style.overflow="hidden";this.div.style.left=this.x-1+"px";this.div.style.top=this.y-1+"px";this.div.style.width="101px";this.div.style.height="16px";this.div.style.background="url('"+a.toDataURL("image/png")+"') no-repeat right "+f+"";this.dropdown.style.position="absolute";
-this.dropdown.style.left="0px";this.dropdown.style.top="0px";this.dropdown.style.borderWidth="1px";this.dropdown.style.fontFamily="sans-serif";this.dropdown.style.fontSize="10px";this.dropdown.style.outlineStyle="none";this.dropdown.style.color=e;this.dropdown.style.webkitAppearance="none";this.dropdown.style.webkitBorderRadius="0px";this.dropdown.style.background="rgba(0,0,0,0)";this.dropdown.style.borderStyle="solid";this.dropdown.style.width="119px";this.dropdown.style.height="16px";this.dropdown.style.textIndent=
-"0px";this.dropdown.style.borderLeftColor=e;this.dropdown.style.borderTopColor=e;this.dropdown.style.borderRightColor=e;this.dropdown.style.borderBottomColor=e;g.appendChild(this.div);this.div.appendChild(this.dropdown);this.dropdown.onchange=this.onChange;this.dropdown.onfocus=this.onFocus;this.draw()};this.DropDown.prototype=new Base;this.DropDown.prototype.constructor=this.DropDown;this.DropDown.prototype.onChange=function(){var a=i[this.id];a.value.v=this.value;a.value.updateBind()};this.DropDown.prototype.onFocus=
-function(){};this.DropDown.prototype.draw=function(){};this.DropDown.prototype.mouseDown=function(){};this.DropDown.prototype.mouseUp=function(){};this.InputText=function(a){Base.call(this,a);this.name="InputText";this.text=a.text||"";this.input=document.createElement("input");this.value=new Value(this.text);this.input.value=this.value.v;this.input.type="text";this.input.setAttribute("id",this.id);this.input.style.position="absolute";this.input.style.left=this.x-1+"px";this.input.style.top=this.y-
-1+"px";this.input.style.borderWidth="1px";this.input.style.fontFamily="sans-serif";this.input.style.fontSize="10px";this.input.style.outlineStyle="none";this.input.style.color=e;this.input.style.backgroundColor=f;this.input.style.borderStyle="solid";this.input.style.width="100px";this.input.style.height="12px";this.input.style.marginLeft="0px";this.input.style.textIndent="3px";this.input.style.borderLeftColor=e;this.input.style.borderTopColor=e;this.input.style.borderRightColor=e;this.input.style.borderBottomColor=
-e;this.input.oninput=this.onTextChange;this.input.onfocus=this.onFocus;g.appendChild(this.input);this.draw()};this.InputText.prototype=new Base;this.InputText.prototype.constructor=this.InputText;this.InputText.prototype.draw=function(){};this.InputText.prototype.onTextChange=function(){var a=i[this.id];a.value.v=this.value;a.value.updateBind()};this.InputText.prototype.onFocus=function(){};this.InputText.prototype.mouseDown=function(){};this.InputText.prototype.mouseUp=function(){};this.Stepper=
-function(a){Base.call(this,a);this.name="Stepper";this.mouseIsOver=false;this.value=new Value(a.value||0);this.width=a.width||60;this.height=a.height||10;this.min=a.min||-1E4;this.max=a.max||1E4;this.mouseDownPlus=this.mouseDownMinus=this.mouseDownNumber=false;this.lastMouseY=this.lastMouseX=null;this.step=a.step||10;this.decimals=a.decimals||0;this.bx=this.width-22;this.draw()};this.Stepper.prototype=new Base;this.Stepper.prototype.constructor=this.Stepper;this.Stepper.prototype.draw=function(){if(this.value.v<
-this.min)this.value.v=this.min;if(this.value.v>this.max)this.value.v=this.max;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=e;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=f;if(this.mouseDownMinus)a.fillStyle=e;a.fillRect(this.x+this.bx,this.y+1,10,this.height-2);a.fillStyle=e;if(this.mouseDownMinus)a.fillStyle=f;a.fillRect(this.x+this.bx+2,this.y+4+c,6,2);a.fillStyle=f;if(this.mouseDownPlus)a.fillStyle=e;a.fillRect(this.x+
-this.bx+11,this.y+1,10,this.height-2);a.fillStyle=e;if(this.mouseDownPlus)a.fillStyle=f;a.fillRect(this.x+this.bx+13,this.y+4+c,6,2);a.fillRect(this.x+this.bx+15,this.y+2+c,2,6);a.fillStyle=f;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="center";a.fillText(this.value.v.toFixed(this.decimals),this.x+this.bx/2,this.y+9+c)};this.Stepper.prototype.mouseDown=function(a,b){if(a<this.bx&&!this.mouseDownMinus&&!this.mouseDownPlus){this.mouseDownNumber=true;this.mouseDownPlus=this.mouseDownMinus=
-false}else if(a>=this.bx&&a<this.bx+11&&!this.mouseDownNumber&&!this.mouseDownPlus){this.mouseDownMinus=true;this.mouseDownPlus=this.mouseDownNumber=false;this.value.v=this.value.v-this.step}else if(a>=this.bx+11&&!this.mouseDownNumber&&!this.mouseDownMinus){this.mouseDownPlus=true;this.mouseDownMinus=this.mouseDownNumber=false;this.value.v=this.value.v+this.step}if(this.lastMouseX!=null&&this.mouseDownNumber){this.value.v=this.value.v+(a-this.lastMouseX-(b-this.lastMouseY))*this.step;this.draw()}this.lastMouseX=
-a;this.lastMouseY=b;this.draw();this.value.updateBind()};this.Stepper.prototype.mouseUp=function(){this.mouseDownPlus=this.mouseDownMinus=this.mouseDownNumber=false;this.lastMouseY=this.lastMouseX=null;this.value.updateBind(true);this.draw()};this.Graph=function(a){Base.call(this,a);this.name="Graph";this.width=a.width||100;this.height=a.height||40;this.min=a.min||0;this.max=a.max||1;this.range=this.max-this.min;this.value=new Value(this.min);this.draw()};this.Graph.prototype=new Base;this.Graph.prototype.constructor=
-this.Graph;this.Graph.prototype.draw=function(){if(this.value.v>this.max)this.value.v=this.max;if(this.value.v<this.min)this.value.v=this.min;var c=a.getImageData(this.x,this.y,this.width,this.height);a.clearRect(this.x,this.y,this.width,this.height);a.strokeStyle=e;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);a.fillStyle=f;a.fillRect(this.x,this.y,this.width,this.height);a.save();a.fillStyle="transparent";a.beginPath();a.rect(this.x,this.y,this.width,this.height);a.clip();var b=
-document.createElement("canvas");b.width=this.width;b.height=this.height;b.getContext("2d").putImageData(c,0,0);a.drawImage(b,this.x-1,this.y);a.fillStyle=o;c=this.height/this.range*(this.value.v+Math.abs(this.min));a.fillRect(this.x+this.width-1,this.y+this.height-c,1,c);a.restore()};this.Graph.prototype.mouseDown=function(){};this.Graph.prototype.mouseUp=function(){};this.ImageButton=function(a){Base.call(this,a);this.name="ImageButton";this.image=a.image||new Image;this.width=a.width||this.image.width;
-this.height=a.height||this.image.height;this.mouseIsDown=false;this.value=new Value(this.mouseIsDown);this.draw()};this.ImageButton.prototype=new Base;this.ImageButton.prototype.constructor=this.ImageButton;this.ImageButton.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.globalAlpha=this.mouseIsDown?0.5:1;a.drawImage(this.image,this.x,this.y,this.width,this.height);a.globalAlpha=1};this.ImageButton.prototype.mouseDown=function(){this.mouseIsDown=true;this.value.v=this.mouseIsDown;
-this.value.updateBind();this.draw()};this.ImageButton.prototype.mouseUp=function(){this.value.updateBind(true);this.mouseIsDown=false;this.value.v=this.mouseIsDown;this.value.updateBind();this.draw()};this.Button=function(a){Base.call(this,a);this.name="Button";this.width=this.fullWidth=0;this.height=Math.max(a.height,14)||14;this.text=a.text||"";this.mouseIsDown=false;this.value=new Value(this.mouseIsDown);this.draw();this.draw()};this.Button.prototype=new Base;this.Button.prototype.constructor=
-this.Button;this.Button.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.strokeStyle=e;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);a.fillStyle=f;if(this.mouseIsDown)a.fillStyle=o;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-14)*0.5);a.fillStyle=e;if(this.mouseIsDown)a.fillStyle=f;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.text,this.x+4,this.y+11+c);this.width=this.fullWidth+
-a.measureText(this.text).width+9};this.Button.prototype.mouseDown=function(){this.mouseIsDown=true;this.value.v=this.mouseIsDown;this.value.updateBind();this.draw()};this.Button.prototype.mouseUp=function(){this.value.updateBind(true);this.mouseIsDown=false;this.value.v=this.mouseIsDown;this.draw()};this.TrackPad=function(a){Base.call(this,a);this.name="TrackPad";this.width=a.width||100;this.height=a.height||60;this.min=a.min||-1;this.max=a.max||1;this.size=a.size||6;this.range=this.max-this.min;
-var b=(this.range/2-this.max)*-1;this.value1=new Value(a.value1||b);this.value2=new Value(a.value2||b);this.draw()};this.TrackPad.prototype=new Base;this.TrackPad.prototype.constructor=this.TrackPad;this.TrackPad.prototype.draw=function(){if(this.value1.v<this.min)this.value1.v=this.min;if(this.value1.v>this.max)this.value1.v=this.max;if(this.value2.v<this.min)this.value2.v=this.min;if(this.value2.v>this.max)this.value2.v=this.max;a.clearRect(this.x-1,this.y,this.width,this.height+14);a.strokeStyle=
-e;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);a.fillStyle=f;a.fillRect(this.x,this.y,this.width,this.height);a.strokeStyle=o;a.lineWidth=1;a.beginPath();a.moveTo(this.x,0.5+this.y+this.height/2);a.lineTo(this.x+this.width,0.5+this.y+this.height/2);a.closePath();a.stroke();a.beginPath();a.moveTo(0.5+this.x+this.width/2,this.y);a.lineTo(0.5+this.x+this.width/2,this.y+this.height);a.closePath();a.stroke();var c=this.getXPositionFromValue(),b=this.getYPositionFromValue(),d=this.size/
-2;c<d&&(c=d);c>this.width-d&&(c=this.width-d);b<d&&(b=d);b>this.height-d&&(b=this.height-d);a.fillStyle=o;a.fillRect(this.x+c-d,this.y+b-d,this.size,this.size);a.fillStyle=e;a.font="8px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText("X: "+this.value1.v.toFixed(2)+" Y: "+this.value2.v.toFixed(2),this.x,this.y+this.height+9)};this.TrackPad.prototype.setXValueFromPosition=function(a){this.value1.v=this.range/this.width*a-(this.range-this.max)};this.TrackPad.prototype.setYValueFromPosition=
-function(a){this.value2.v=this.range/this.height*a-(this.range-this.max)};this.TrackPad.prototype.getXPositionFromValue=function(){var a=this.width/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return a*(this.value1.v+b)};this.TrackPad.prototype.getYPositionFromValue=function(){var a=this.height/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return a*(this.value2.v+b)};this.TrackPad.prototype.mouseDown=function(a,b){this.setXValueFromPosition(a);this.setYValueFromPosition(b);this.draw();
-this.value1.updateBind();this.value2.updateBind()};this.TrackPad.prototype.mouseUp=function(){this.value1.updateBind(true);this.value2.updateBind(true)};this.ColorPicker2=function(a){Base.call(this,a);this.name="ColorPicker2";this.framewidth=a.framewidth||10;this.frameheight=a.frameheight||10;this.colorwidth=a.width||100;this.colorheight=a.height||30;this.width=this.framewidth;this.height=this.frameheight;this.r=a.r||255;this.g=a.g||255;this.b=a.b||255;this.oldColor={r:this.r,g:this.g,b:this.b};this.mousehack=
-this.open=false;this.lastTime=0;this.hex=a.hex||colorToHex("rgb("+this.r+","+this.g+","+this.b+")");this.value=new Value(this.hex);this.draw()};this.ColorPicker2.prototype=new Base;this.ColorPicker2.prototype.constructor=this.ColorPicker2;this.ColorPicker2.prototype.draw=function(){a.clearRect(this.x-1,this.y-1,this.framewidth+60,this.height+3);a.clearRect(this.x-1,this.y+this.frameheight,this.colorwidth+2,this.colorheight+3);a.strokeStyle=e;a.lineWidth=2;a.strokeRect(this.x,this.y,this.framewidth,
-this.frameheight);a.fillStyle="#"+this.value.v;a.fillRect(this.x,this.y,this.framewidth,this.frameheight);var c=Math.round(Math.max(0,this.frameheight-11)*0.5);a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText("#"+this.value.v.toUpperCase(),this.x+this.framewidth+4,this.y+9+c);if(this.open){a.strokeStyle=e;a.lineWidth=2;a.strokeRect(this.x,this.y+this.frameheight+1,this.colorwidth,this.colorheight);var c=a.createLinearGradient(this.x,this.y+this.frameheight+
-1,this.x+this.colorwidth,this.y+this.frameheight+1),b=1/6,d=0;c.addColorStop(b*d++,"rgb(255, 0, 0)");c.addColorStop(b*d++,"rgb(255, 255, 0)");c.addColorStop(b*d++,"rgb(0, 255, 0)");c.addColorStop(b*d++,"rgb(0, 255, 255)");c.addColorStop(b*d++,"rgb(0, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 0)");a.fillStyle=c;a.fillRect(this.x,this.y+this.frameheight+1,this.colorwidth,this.colorheight);b=1/(this.colorheight/2);c=a.createLinearGradient(this.x,this.y+this.frameheight+
-1,this.x,this.y+this.frameheight+1+this.colorheight/2);c.addColorStop(0,"rgba(255, 255, 255, 1)");c.addColorStop(b,"rgba(255, 255, 255, 1)");c.addColorStop(1,"rgba(255, 255, 255, 0)");a.fillStyle=c;a.fillRect(this.x,this.y+this.frameheight+1,this.colorwidth,this.colorheight/2);c=a.createLinearGradient(this.x,this.y+this.frameheight+1+this.colorheight/2,this.x,this.y+this.frameheight+1+this.colorheight);c.addColorStop(0,"rgba(0, 0, 0, 0)");c.addColorStop(1-b,"rgba(0, 0, 0, 1)");c.addColorStop(1,"rgba(0, 0, 0, 1)");
-a.fillStyle=c;a.fillRect(this.x,this.y+this.frameheight+1+this.colorheight/2,this.colorwidth,this.colorheight/2)}};this.ColorPicker2.prototype.mouseDown=function(a,b){if(!((new Date).getTime()-this.lastTime<200)){if(this.open&&a>0&&a<this.colorwidth-1&&b>this.frameheight&&b<this.frameheight+this.colorheight){s&&this.mouseMove(a,b);this.oldColor={r:this.r,g:this.g,b:this.b}}if(!this.open&&b<this.frameheight)this.open=true;else if(this.open)this.open=false;if(this.open){this.width=this.colorwidth;this.height=
-this.frameheight+this.colorheight}else{this.width=this.framewidth;this.height=this.frameheight}this.draw();this.mousehack=false;this.lastTime=(new Date).getTime();if(!this.open)for(var d=0;d<i.length;++d)i[d].draw()}};this.ColorPicker2.prototype.setOldColor=function(){this.r=this.oldColor.r;this.g=this.oldColor.g;this.b=this.oldColor.b;this.hex=colorToHex("rgb("+this.r+","+this.g+","+this.b+")")};this.ColorPicker2.prototype.mouseMove=function(c,b){var d=false;if(c<0){c=0;this.setOldColor();d=true}if(c>
-this.colorwidth-1){c=this.colorwidth-1;this.setOldColor();d=true}if(b<=this.frameheight){b=this.frameheight;this.setOldColor();d=true}if(b>this.frameheight+this.colorheight){b=this.frameheight+this.colorheight;this.setOldColor();d=true}if(!d){d=a.getImageData(this.x+c,this.y+b,1,1).data;this.r=d[0];this.g=d[1];this.b=d[2];this.hex=colorToHex("rgb("+this.r+","+this.g+","+this.b+")")}this.value.v=this.hex;this.value.updateBind();this.draw()};this.ColorPicker2.prototype.mouseUp=function(a){this.open||
-(k[a]=null);if(this.mousehack){this.setOldColor();this.mouseDown();k[a]=null}this.mousehack=true;this.value.updateBind(true)};this.ColorPicker=function(a){Base.call(this,a);this.name="ColorPicker";this.framewidth=a.framewidth||10;this.frameheight=a.frameheight||10;this.width=a.width||100;this.height=a.height||20;this.r=a.r||255;this.g=a.g||255;this.b=a.b||255;this.hex=a.hex||colorToHex("rgb("+this.r+","+this.g+","+this.b+")");this.value=new Value(this.hex);this.draw()};this.ColorPicker.prototype=
-new Base;this.ColorPicker.prototype.constructor=this.ColorPicker;this.ColorPicker.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height+this.frameheight+4);a.strokeStyle=e;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);var c=a.createLinearGradient(this.x,this.y,this.x+this.width,this.y),b=1/6,d=0;c.addColorStop(b*d++,"rgb(255, 0, 0)");c.addColorStop(b*d++,"rgb(255, 255, 0)");c.addColorStop(b*d++,"rgb(0, 255, 0)");c.addColorStop(b*d++,"rgb(0, 255, 255)");c.addColorStop(b*
-d++,"rgb(0, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 0)");a.fillStyle=c;a.fillRect(this.x,this.y,this.width,this.height);b=1/(this.height/2);c=a.createLinearGradient(this.x,this.y,this.x,this.y+this.height/2);c.addColorStop(0,"rgba(255, 255, 255, 1)");c.addColorStop(b,"rgba(255, 255, 255, 1)");c.addColorStop(1,"rgba(255, 255, 255, 0)");a.fillStyle=c;a.fillRect(this.x,this.y,this.width,this.height/2);c=a.createLinearGradient(this.x,this.y+this.height/2,this.x,
-this.y+this.height);c.addColorStop(0,"rgba(0, 0, 0, 0)");c.addColorStop(1-b,"rgba(0, 0, 0, 1)");c.addColorStop(1,"rgba(0, 0, 0, 1)");a.fillStyle=c;a.fillRect(this.x,this.y+this.height/2,this.width,this.height/2);a.strokeStyle=e;a.lineWidth=2;a.strokeRect(this.x,this.y+this.height+4,this.framewidth,this.frameheight);a.fillStyle="#"+this.value.v;a.fillRect(this.x,this.y+this.height+4,this.framewidth,this.frameheight);c=Math.round(Math.max(0,this.frameheight-10)*0.5);a.fillStyle=e;a.font="11px Arial";
-a.textBaseline="alphabetic";a.textAlign="left";a.fillText("#"+this.value.v.toUpperCase(),this.x+this.framewidth+4,this.y+this.height+13+c)};this.ColorPicker.prototype.mouseDown=function(c,b){c<0&&(c=0);c>this.width-1&&(c=this.width-1);b<0&&(b=0);b>this.height-1&&(b=this.height-1);var d=a.getImageData(this.x+c,this.y+b,1,1).data;this.r=d[0];this.g=d[1];this.b=d[2];this.hex=colorToHex("rgb("+this.r+","+this.g+","+this.b+")");this.value.v=this.hex;this.value.updateBind();this.draw()};this.ColorPicker.prototype.mouseUp=
-function(){this.value.updateBind(true)};this.Knob=function(a){Base.call(this,a);this.name="Knob";this.radius=a.radius||15;this.centerx=this.x+this.radius;this.centery=this.y+this.radius;this.width=this.radius*2;this.height=this.radius*2;this.min=a.min||0;this.max=a.max||100;this.range=this.max-this.min;this.value=new Value(a.value||0);this.rotationValue=this.getRotationValue();this.lastMouseY=this.lastMouseX=null;this.decimals=a.decimals||0;this.draw()};this.Knob.prototype=new Base;this.Knob.prototype.constructor=
-this.Knob;this.Knob.prototype.getRotationValue=function(){return(this.value.v-this.min)*(1/this.range)};this.Knob.prototype.draw=function(){if(this.value.v<this.min)this.value.v=this.min;if(this.value.v>this.max)this.value.v=this.max;a.clearRect(this.x-4,this.y-4,this.width+8,this.height+13);a.fillStyle=e;a.beginPath();a.arc(this.centerx,this.centery,this.radius,0,Math.PI*2,false);a.closePath();a.fill();var c=Math.PI+Math.PI/1.25,b=Math.PI-Math.PI/1.25,d=(c-b)/this.radius;a.strokeStyle=e;a.lineWidth=
-0.5;for(var g=0;g<=this.radius;++g){var i=this.centerx+Math.sin(c-d*g)*(this.radius+1),h=this.centery+Math.cos(c-d*g)*(this.radius+1),j=this.centerx+Math.sin(c-d*g)*(this.radius+4),k=this.centery+Math.cos(c-d*g)*(this.radius+4);a.beginPath();a.moveTo(i,h);a.lineTo(j,k);a.closePath();a.stroke()}this.rotationValue=this.getRotationValue();d=(c-b)*this.rotationValue;b=this.centerx+Math.sin(c-d)*this.radius;c=this.centery+Math.cos(c-d)*this.radius;a.strokeStyle=f;a.lineWidth=2;a.beginPath();a.moveTo(this.centerx,
-this.centery);a.lineTo(b,c);a.closePath();a.stroke();a.fillStyle=e;a.font="8px Arial";a.textBaseline="alphabetic";a.textAlign="center";a.fillText(this.value.v.toFixed(this.decimals),this.centerx,this.centery+this.radius+7)};this.Knob.prototype.mouseDown=function(a,b){if(this.lastMouseX!=null){var d=(a-this.lastMouseX-(b-this.lastMouseY))/100,d=d*this.range;this.value.v=this.value.v+d;this.draw();this.value.updateBind()}this.lastMouseX=a;this.lastMouseY=b};this.Knob.prototype.mouseUp=function(){this.lastMouseY=
-this.lastMouseX=null;this.value.updateBind(true)};this.CheckBox=function(a){Base.call(this,a);this.name="CheckBox";this.text=a.text||"";this.value=new Value(a.selected||false);this.width=this.fullWidth=a.width||10;this.height=a.height||10;this.draw()};this.CheckBox.prototype=new Base;this.CheckBox.prototype.constructor=this.CheckBox;this.CheckBox.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=e;a.fillRect(this.x,this.y,this.fullWidth,this.height);a.fillStyle=
-this.value.v?f:e;a.fillRect(this.x+2,this.y+2,this.fullWidth-4,this.height-4);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.text,this.x+this.fullWidth+2,this.y+9+c);this.width=this.fullWidth+a.measureText(this.text).width+3};this.CheckBox.prototype.mouseDown=function(){this.value.v=this.value.v?false:true;this.value.updateBind();this.draw()};this.CheckBox.prototype.mouseUp=function(){this.value.updateBind(true)};
-this.RadioButtonGroup=function(){this.name="RadioButtonGroup";this.array=[];this.value=new Value([])};this.RadioButtonGroup.prototype.add=function(a){this.array.push(a);this.value.v.push(a.value.v);a.group=this};this.RadioButtonGroup.prototype.clear=function(a){for(var b=0;b<this.array.length;++b){var d=this.array[b];if(d==a)this.value.v[b]=true;else{this.value.v[b]=false;d.value.v=false;d.value.updateBind();d.draw()}}this.value.updateBind()};this.RadioButton=function(a){Base.call(this,a);this.name=
-"RadioButton";this.group=null;this.text=a.text||"";this.value=new Value(a.selected||false);this.width=this.fullWidth=a.width||18;this.height=a.height||10;this.draw()};this.RadioButton.prototype=new Base;this.RadioButton.prototype.constructor=this.RadioButton;this.RadioButton.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=e;a.fillRect(this.x,this.y,this.fullWidth,this.height);if(this.value.v){a.fillStyle=f;a.fillRect(this.x+this.fullWidth/2+1,this.y+2,this.fullWidth/
-2-3,this.height-4)}else{a.fillStyle=o;a.fillRect(this.x+2,this.y+2,this.fullWidth/2-3,this.height-4)}var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.text,this.x+this.fullWidth+2,this.y+9+c);this.width=this.fullWidth+a.measureText(this.text).width+3};this.RadioButton.prototype.mouseDown=function(){this.group.clear(this);if(!this.value.v)this.value.v=true;this.value.updateBind();this.draw()};this.RadioButton.prototype.mouseUp=
-function(){this.value.updateBind(true)};this.RadioButton.prototype.mouseMove=function(){};this.HSlider=function(a){Base.call(this,a);this.name="HSlider";this.mouseIsOver=false;this.value=new Value(a.value||0);this.width=a.width||100;this.height=a.height||10;this.min=a.min||0;this.max=a.max||this.width;this.range=this.max-this.min;this.decimals=a.decimals||0;this.draw()};this.HSlider.prototype=new Base;this.HSlider.prototype.constructor=this.HSlider;this.HSlider.prototype.draw=function(){if(this.value.v>
-this.max)this.value.v=this.max;if(this.value.v<this.min)this.value.v=this.min;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=e;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=f;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v.toFixed(this.decimals),this.x,this.y+9+c);var b=this.getPositionFromValue();a.fillStyle=f;a.fillRect(this.x,this.y,b,this.height);a.save();a.fillStyle="transparent";
-a.beginPath();a.rect(this.x,this.y,b,this.height);a.clip();a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v.toFixed(this.decimals),this.x,this.y+9+c);a.restore()};this.HSlider.prototype.setValueFromPosition=function(a){this.value.v=this.range/this.width*a-(this.range-this.max)};this.HSlider.prototype.getPositionFromValue=function(){var a=this.width/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return a*(this.value.v+b)};this.HSlider.prototype.mouseDown=
-function(a){this.setValueFromPosition(a);this.draw();this.value.updateBind()};this.HSlider.prototype.mouseUp=function(){this.value.updateBind(true)};this.VSlider=function(a){Base.call(this,a);this.name="VSlider";this.mouseIsOver=false;this.value=new Value(a.value||0);this.width=a.width||10;this.height=a.height||100;this.min=a.min||0;this.max=a.max||this.height;this.decimals=a.decimals||0;this.range=this.max-this.min;this.draw()};this.VSlider.prototype=new Base;this.VSlider.prototype.constructor=this.VSlider;
-this.VSlider.prototype.draw=function(){if(this.value.v>this.max)this.value.v=this.max;if(this.value.v<this.min)this.value.v=this.min;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=e;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.width-11)*0.5);a.save();a.translate(this.x+9+c,this.y+this.height-1);a.rotate(-Math.PI/2);a.fillStyle=f;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v.toFixed(this.decimals),0,0);
-a.restore();var b=this.getPositionFromValue();a.fillStyle=f;a.fillRect(this.x,this.y+b,this.width,this.height-b);a.save();a.translate(this.x+9+c,this.y+this.height-1);a.rotate(-Math.PI/2);a.fillStyle="transparent";a.beginPath();a.rect(-1,-this.width+1,this.height-b,this.width);a.clip();a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v.toFixed(this.decimals),0,0);a.restore()};this.VSlider.prototype.setValueFromPosition=function(a){this.value.v=
-this.range-this.range/this.height*a-(this.range-this.max)};this.VSlider.prototype.getPositionFromValue=function(){var a=this.height/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return this.height-a*(this.value.v+b)};this.VSlider.prototype.mouseDown=function(a,b){this.setValueFromPosition(b);this.draw();this.value.updateBind()};this.VSlider.prototype.mouseUp=function(){this.value.updateBind(true)};this.Joystick=function(a){Base.call(this,a);this.name="Joystick";this.value1=new Value(0);this.value2=
-new Value(0);this.radius=a.radius||50;this.innerRadius=a.innerRadius||this.radius*0.65;this.centerx=this.x+this.radius;this.centery=this.y+this.radius;this.width=this.radius*2;this.height=this.radius*2;this.sticky=this.stickx=0;this.laststicky=this.laststickx=-1;this.maxDistance=this.radius-this.innerRadius-5;this.mouseIsDown=false;this.draw()};this.Joystick.prototype=new Base;this.Joystick.prototype.constructor=this.Joystick;this.Joystick.prototype.draw=function(c){if(!this.mouseIsDown){this.stickx=
-this.stickx+(0-this.stickx)/3;this.sticky=this.sticky+(0-this.sticky)/3}if(!(this.stickx.toFixed(2)==this.laststickx.toFixed(2)&&this.sticky.toFixed(2)==this.laststicky.toFixed(2)&&c)){this.value1.v=this.stickx/this.maxDistance;this.value2.v=this.sticky/this.maxDistance;a.clearRect(this.x-2,this.y-2,this.width+14,this.height+14);c=a.createRadialGradient(this.centerx,this.centery,this.radius+5,this.centerx-7,this.centery-7,5);c.addColorStop(0,o);c.addColorStop(0.2,f);c.addColorStop(1,o);a.fillStyle=
-c;a.beginPath();a.arc(this.centerx,this.centery,this.radius,0,Math.PI*2,false);a.closePath();a.fill();var b=(1-this.value1.v)*5,d=(1-this.value2.v)*5,c=a.createRadialGradient(this.centerx+this.stickx+b,this.centery+this.sticky+d,this.innerRadius+10,this.centerx+this.stickx+b,this.centery+this.sticky+d,1);c.addColorStop(0,"rgba(0,0,0,0.00001)");c.addColorStop(1,"rgba(0,0,0,1)");a.fillStyle=c;a.beginPath();a.arc(this.centerx+this.stickx+b,this.centery+this.sticky+d,this.innerRadius+10,0,Math.PI*2,false);
-a.closePath();a.fill();c=a.createLinearGradient(this.centerx+this.stickx-this.innerRadius,this.centery+this.sticky-this.innerRadius,this.centerx+this.stickx-this.innerRadius,this.centery+this.sticky+this.innerRadius);c.addColorStop(0,f);c.addColorStop(1,o);a.fillStyle=c;a.beginPath();a.arc(this.centerx+this.stickx,this.centery+this.sticky,this.innerRadius,0,Math.PI*2,false);a.closePath();a.fill();c=a.createRadialGradient(this.centerx+this.stickx,this.centery+this.sticky,this.radius,this.centerx+this.stickx,
-this.centery+this.sticky,1);c.addColorStop(0,o);c.addColorStop(1,f);a.fillStyle=c;a.beginPath();a.arc(this.centerx+this.stickx,this.centery+this.sticky,this.innerRadius-6,0,Math.PI*2,false);a.closePath();a.fill();this.laststickx=this.stickx;this.laststicky=this.sticky}};this.Joystick.prototype.mouseDown=function(a,b){this.mouseIsDown=true;this.stickx=a-this.radius;this.sticky=b-this.radius;if(Math.sqrt(this.stickx*this.stickx+this.sticky*this.sticky)>this.maxDistance){var d=Math.atan2(this.stickx,
-this.sticky);this.stickx=Math.sin(d)*this.maxDistance;this.sticky=Math.cos(d)*this.maxDistance}this.draw();this.value1.updateBind();this.value2.updateBind()};this.Joystick.prototype.mouseUp=function(){this.mouseIsDown=false;this.value1.updateBind(true);this.value2.updateBind(true)};this.Label=function(a){Base.call(this,a);this.name="Label";this.group=null;this.value=new Value(a.text||"");this.width=0;this.height=13;this.draw()};this.Label.prototype=new Base;this.Label.prototype.constructor=this.Label;
-this.Label.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=e;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v,this.x,this.y+9);this.width=a.measureText(this.value.v).width+3};this.Label.prototype.mouseDown=function(){};this.Label.prototype.mouseUp=function(){};this.update=function(){q=Date.now();for(var a=0;a<i.length;++a){var b=i[a];if(b.name=="Joystick")b.draw(true);else{if(b.value&&(b.value.receiver||b.value.both)&&
-q>b.lastUpdate+b.updateInterval){b.value.updateBind();b.draw();b.lastUpdate=q}if(b.value1){var d=false;if((b.value1.receiver||b.value1.both)&&q>b.lastUpdate+b.updateInterval){b.value1.updateBind();d=true}if((b.value2.receiver||b.value2.both)&&q>b.lastUpdate+b.updateInterval){b.value2.updateBind();d=true}if(d){b.draw();b.lastUpdate=q}}}}};return{getDomElement:function(){return g},getContext:function(){return a},HSlider:this.HSlider,VSlider:this.VSlider,Label:this.Label,RadioButton:this.RadioButton,
-RadioButtonGroup:this.RadioButtonGroup,CheckBox:this.CheckBox,Knob:this.Knob,ColorPicker:this.ColorPicker,ColorPicker2:this.ColorPicker2,TrackPad:this.TrackPad,Button:this.Button,ImageButton:this.ImageButton,Graph:this.Graph,Stepper:this.Stepper,InputText:this.InputText,DropDown:this.DropDown,Matrix:this.Matrix,RangeSlider:this.RangeSlider,Joystick:this.Joystick,update:this.update}};
-function colorToHex(j){var m=/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(j);return m?(16777216|m[1]<<16|m[2]<<8|m[3]).toString(16).substr(1):j}HTMLCanvasElement.prototype.relMouseCoords=function(j){var m=0,p=0,l=0,g=0,l=this;do m+=l.offsetLeft,p+=l.offsetTop;while(l=l.offsetParent);l=j.pageX-m;g=j.pageY-p;l=Math.round(l*(this.width/this.offsetWidth));g=Math.round(g*(this.height/this.offsetHeight));return{x:l,y:g}};
diff --git a/component.json b/component.json
new file mode 100644
index 0000000..008f3b3
--- /dev/null
+++ b/component.json
@@ -0,0 +1,10 @@
+{
+  "name": "xgui",
+  "description": "reactive canvas gui elements",
+  "version": "0.0.1",
+  "keywords": ["gui","ui","canvas"],
+  "author": "oosmoxiecode",
+  "www": "http://oos.moxiecode.com/",
+  "license": "MIT",
+  "scripts": ["index.js","src/xgui.js"]
+}
\ No newline at end of file
diff --git a/dist/xgui.js b/dist/xgui.js
new file mode 100644
index 0000000..a970551
--- /dev/null
+++ b/dist/xgui.js
@@ -0,0 +1,2274 @@
+;(function(){
+
+
+/**
+ * hasOwnProperty.
+ */
+
+var has = Object.prototype.hasOwnProperty;
+
+/**
+ * Require the given path.
+ *
+ * @param {String} path
+ * @return {Object} exports
+ * @api public
+ */
+
+function require(path, parent, orig) {
+  var resolved = require.resolve(path);
+
+  // lookup failed
+  if (null == resolved) {
+    orig = orig || path;
+    parent = parent || 'root';
+    var err = new Error('Failed to require "' + orig + '" from "' + parent + '"');
+    err.path = orig;
+    err.parent = parent;
+    err.require = true;
+    throw err;
+  }
+
+  var module = require.modules[resolved];
+
+  // perform real require()
+  // by invoking the module's
+  // registered function
+  if (!module.exports) {
+    module.exports = {};
+    module.client = module.component = true;
+    module.call(this, module.exports, require.relative(resolved), module);
+  }
+
+  return module.exports;
+}
+
+/**
+ * Registered modules.
+ */
+
+require.modules = {};
+
+/**
+ * Registered aliases.
+ */
+
+require.aliases = {};
+
+/**
+ * Resolve `path`.
+ *
+ * Lookup:
+ *
+ *   - PATH/index.js
+ *   - PATH.js
+ *   - PATH
+ *
+ * @param {String} path
+ * @return {String} path or null
+ * @api private
+ */
+
+require.resolve = function(path) {
+  if (path.charAt(0) === '/') path = path.slice(1);
+  var index = path + '/index.js';
+
+  var paths = [
+    path,
+    path + '.js',
+    path + '.json',
+    path + '/index.js',
+    path + '/index.json'
+  ];
+
+  for (var i = 0; i < paths.length; i++) {
+    var path = paths[i];
+    if (has.call(require.modules, path)) return path;
+  }
+
+  if (has.call(require.aliases, index)) {
+    return require.aliases[index];
+  }
+};
+
+/**
+ * Normalize `path` relative to the current path.
+ *
+ * @param {String} curr
+ * @param {String} path
+ * @return {String}
+ * @api private
+ */
+
+require.normalize = function(curr, path) {
+  var segs = [];
+
+  if ('.' != path.charAt(0)) return path;
+
+  curr = curr.split('/');
+  path = path.split('/');
+
+  for (var i = 0; i < path.length; ++i) {
+    if ('..' == path[i]) {
+      curr.pop();
+    } else if ('.' != path[i] && '' != path[i]) {
+      segs.push(path[i]);
+    }
+  }
+
+  return curr.concat(segs).join('/');
+};
+
+/**
+ * Register module at `path` with callback `definition`.
+ *
+ * @param {String} path
+ * @param {Function} definition
+ * @api private
+ */
+
+require.register = function(path, definition) {
+  require.modules[path] = definition;
+};
+
+/**
+ * Alias a module definition.
+ *
+ * @param {String} from
+ * @param {String} to
+ * @api private
+ */
+
+require.alias = function(from, to) {
+  if (!has.call(require.modules, from)) {
+    throw new Error('Failed to alias "' + from + '", it does not exist');
+  }
+  require.aliases[to] = from;
+};
+
+/**
+ * Return a require function relative to the `parent` path.
+ *
+ * @param {String} parent
+ * @return {Function}
+ * @api private
+ */
+
+require.relative = function(parent) {
+  var p = require.normalize(parent, '..');
+
+  /**
+   * lastIndexOf helper.
+   */
+
+  function lastIndexOf(arr, obj) {
+    var i = arr.length;
+    while (i--) {
+      if (arr[i] === obj) return i;
+    }
+    return -1;
+  }
+
+  /**
+   * The relative require() itself.
+   */
+
+  function localRequire(path) {
+    var resolved = localRequire.resolve(path);
+    return require(resolved, parent, path);
+  }
+
+  /**
+   * Resolve relative to the parent.
+   */
+
+  localRequire.resolve = function(path) {
+    var c = path.charAt(0);
+    if ('/' == c) return path.slice(1);
+    if ('.' == c) return require.normalize(p, path);
+
+    // resolve deps by returning
+    // the dep in the nearest "deps"
+    // directory
+    var segs = parent.split('/');
+    var i = lastIndexOf(segs, 'deps') + 1;
+    if (!i) i = 0;
+    path = segs.slice(0, i + 1).join('/') + '/deps/' + path;
+    return path;
+  };
+
+  /**
+   * Check if module is defined at `path`.
+   */
+
+  localRequire.exists = function(path) {
+    return has.call(require.modules, localRequire.resolve(path));
+  };
+
+  return localRequire;
+};
+require.register("xgui/index.js", function(exports, require, module){
+module.exports = require('./src/xgui')
+});
+require.register("xgui/src/xgui.js", function(exports, require, module){
+/**
+ * @author oosmoxiecode - http://oos.moxiecode.com/
+ */
+
+var xgui = function ( p ) {
+
+	if (p == undefined) p = {};
+
+	var container, canvas, context;
+	var pool = [];
+	var mouseDownArray = [false,false,false,false,false,false,false,false,false,false,false]; // 11 touch events, hopefully no one has more fingers than that...
+	var mouseHitIdArray = [null,null,null,null,null,null,null,null,null,null,null];
+	var mouseHitCanvas = true;
+	var bgColor = p.backgroundColor || "rgb(100, 100, 100)";
+	var frontColor = p.frontColor || "rgb(230, 230, 230)";
+	var dimColor = p.dimColor || "rgb(140, 140, 140)";
+	var font = "11px Arial";
+	var fontsm = "8px Arial";
+
+	var delta
+	var time;
+	var oldTime;
+
+	this.width = p.width || 600;
+	this.height = p.height || 400;
+
+	container = document.createElement( "div" );
+	container.style.position = "relative";
+	container.style.width = ""+this.width+"px";
+	container.style.height = ""+this.height+"px";
+	container.setAttribute("id","xgui_container");
+
+	canvas = document.createElement("canvas");
+	canvas.width = this.width;
+	canvas.height = this.height;
+	context = canvas.getContext('2d');
+
+	container.appendChild(canvas);
+
+	var isTouchDevice = ('ontouchstart' in canvas) || (navigator.userAgent.match(/ipad|iphone|android/i) != null);
+
+	if (isTouchDevice) {
+
+		// touch events
+		document.addEventListener( 'touchmove', function ( event ) {
+			onMouseMove(event, true);
+		}, false );
+		container.addEventListener( 'touchstart', function ( event ) {
+			onMouseDown(event, true);
+		}, false );
+		document.addEventListener( 'touchend', function ( event ) {
+			onMouseUp(event, true);
+		}, false );
+
+	} else {
+
+		// mouse events
+		document.addEventListener( 'mousemove', function ( event ) {
+			onMouseMove(event);
+		}, false );
+		container.addEventListener( 'mousedown', function ( event ) {
+			onMouseDown(event);
+		}, false );
+		document.addEventListener( 'mouseup', function ( event ) {
+			onMouseUp(event);
+		}, false );
+
+	}
+
+
+	function onMouseMove ( event, isTouchEvent ) {
+
+		event.preventDefault();
+
+		var mouse = event;
+
+		var loopNum = 1;
+		var inputid = 0;
+		if (isTouchEvent) loopNum = event.touches.length;
+
+		for (var t = 0; t < loopNum; t++) {
+
+			if (isTouchEvent) {
+				mouse = event.touches[t];
+				inputid = mouse.identifier;
+			}
+
+			if (!mouseDownArray[inputid]) {
+				if (mouseHitIdArray[inputid] != null) {
+					var o = pool[mouseHitIdArray[inputid]];
+					if (o.name == "ColorPicker2") {
+						var m = canvas.relMouseCoords(mouse);
+						o.mouseMove(m.x-o.x,m.y-o.y);
+					}
+				}
+				return;
+			}
+
+			var m = canvas.relMouseCoords(mouse);
+			var o = pool[mouseHitIdArray[inputid]];
+
+			if (o.name == "CheckBox" || o.name == "RadioButton" || o.name == "Button" || o.name == "ImageButton" || o.name == "Matrix") return;
+			if (o.name == "Stepper" && (o.mouseDownPlus || o.mouseDownMinus)) {
+				return;
+			}
+
+			o.mouseDown(m.x-o.x,m.y-o.y);
+
+		}
+
+	}
+
+	function onMouseDown ( event, isTouchEvent ) {
+
+		var mouse = event;
+
+		var inputid = 0;
+		if (isTouchEvent) inputid = event.changedTouches[0].identifier;
+
+		// fix for textfields
+		if (event.target == container || event.target == canvas) {
+			if (mouseHitIdArray[inputid] != null) {
+				if (pool[mouseHitIdArray[inputid]].name != "InputText" && pool[mouseHitIdArray[inputid]].name != "DropDown") {
+					event.preventDefault();
+				}
+			} else {
+				event.preventDefault();
+			}
+		}
+
+
+		if (isTouchEvent) mouse = event.touches[inputid];
+
+		var m = canvas.relMouseCoords(mouse);
+
+		for (var i=0; i<pool.length; ++i ) {
+			var o = pool[i];
+			if (m.x > o.x && m.x < o.x+o.width) {
+				if (m.y > o.y && m.y < o.y+o.height) {
+					o.mouseDown(m.x-o.x,m.y-o.y);
+					mouseDownArray[inputid] = true;
+					// check old id
+					if (mouseHitIdArray[inputid] != null) {
+						var old = pool[mouseHitIdArray[inputid]];
+						if (old.name == "ColorPicker2") {
+							old.mouseUp();
+						}
+					}
+					mouseHitIdArray[inputid] = o.id;
+					break;
+				}
+			}
+		}
+
+	}
+
+	function onMouseUp ( event, isTouchEvent ) {
+
+		var inputid = 0;
+		if (isTouchEvent) inputid = event.changedTouches[0].identifier;
+
+		mouseDownArray[inputid] = false;
+		if (mouseHitIdArray[inputid] != null) {
+			var o = pool[mouseHitIdArray[inputid]];
+			o.mouseUp( inputid );
+		}
+
+	}
+
+
+	/*
+	 * Base
+	 */
+
+	Base = function Base( p ) {
+		if (this.constructor == Base) return;
+		if (p == undefined) p = {};
+
+		this.id = pool.push(this)-1;
+		this.x = p.x || 0;
+		this.y = p.y || 0;
+		this.updateInterval = p.updateInterval || 200;
+		this.lastUpdate = 0;
+	}
+
+	/*
+	 * Value
+	 */
+
+	Value = function ( value ) {
+
+		this.v = value;
+		this.bindArray = new Array();
+		this.receiver = false;
+		this.both = false;
+
+	}
+
+	Value.prototype.bind = function() {
+		var bind = arguments[0];
+
+		if (typeof bind == "function") {
+			this.bindArray.push(bind);
+		} else if (typeof bind == "object") {
+			var objArray = [bind];
+			for (var i=1; i<arguments.length; ++i ) {
+				objArray.push(arguments[i]);
+			}
+			this.bindArray.push(objArray);
+		} else {
+			console.log("error");
+		}
+
+	}
+
+	Value.prototype.updateBind = function( onMouseUp ) {
+		var mouseup = onMouseUp || false;
+
+		for (var i=0; i<this.bindArray.length; ++i ) {
+			var bind = this.bindArray[i];
+			if (typeof bind == "function") {
+				bind(this.v, mouseup);
+			} else if (typeof bind == "object") {
+				var obj = bind[0]
+				for (var j=1; j<bind.length; ++j ) {
+					// receiver
+					if (this.receiver) {
+						this.v = obj[bind[j]];
+					} else if (this.both) {
+						this.v = obj[bind[j]];
+						obj[bind[j]] = this.v;
+					} else {
+						// normal
+						obj[bind[j]] = this.v;
+					}
+				}
+			} else {
+				console.log("error");
+			}
+		}
+	}
+
+	/*
+	 * Matrix
+	 */
+
+
+	this.Matrix = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "Matrix";
+		this.w = p.w || 4;
+		this.h = p.h || 4;
+		this.size = p.size || 10;
+		this.width = (this.w*this.size)+this.w-1;
+		this.height = (this.h*this.size)+this.h-1;
+		var generatedArray = [];
+			for (var y=0; y<this.h; ++y ) {
+				generatedArray[y] = [];
+				for (var x=0; x<this.w; ++x ) {
+					generatedArray[y][x] = 0;
+				}
+			}
+		this.value = new Value(p.array || generatedArray);
+		this.draw();
+	}
+
+
+	this.Matrix.prototype = new Base();
+	this.Matrix.prototype.constructor = this.Matrix;
+
+
+	this.Matrix.prototype.draw = function() {
+		context.clearRect(this.x,this.y,this.width,this.height);
+
+		for (var y=0; y<this.h; ++y ) {
+			for (var x=0; x<this.w; ++x ) {
+				context.fillStyle = bgColor;
+				context.fillRect(this.x+(x*this.size)+x,this.y+(y*this.size)+y,this.size,this.size);
+				// selected?
+				if (this.value.v[y][x]) {
+					context.fillStyle = frontColor;
+					context.fillRect(this.x+(x*this.size)+x+2,this.y+(y*this.size)+y+2,this.size-4,this.size-4);
+				}
+			}
+		}
+
+
+	}
+
+	this.Matrix.prototype.mouseDown = function(x,y) {
+		var gridx = Math.floor(x/(this.size+1));
+		var gridy = Math.floor(y/(this.size+1));
+
+		var val = this.value.v[gridy][gridx];
+		if (!val) {
+			this.value.v[gridy][gridx] = 1;
+		} else {
+			this.value.v[gridy][gridx] = 0;
+		}
+
+		this.value.updateBind();
+
+		this.draw();
+	}
+
+	this.Matrix.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+	}
+
+
+	/*
+	 * RangeSlider
+	 */
+
+	this.RangeSlider = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "RangeSlider";
+		this.mouseIsOver = false;
+		this.value1 = new Value(p.value1 || 25);
+		this.value2 = new Value(p.value2 || 75);
+		this.width = p.width || 100,
+		this.height = p.height|| 10;
+		this.min = p.min || 0;
+		this.max = p.max || this.width;
+		this.range = this.max - this.min;
+		this.decimals = p.decimals || 0;
+		this.draw();
+	}
+
+	this.RangeSlider.prototype = new Base();
+	this.RangeSlider.prototype.constructor = this.RangeSlider;
+
+	this.RangeSlider.prototype.draw = function() {
+		if (this.value1.v > this.max) this.value1.v = this.max;
+		if (this.value1.v < this.min) this.value1.v = this.min;
+		if (this.value2.v > this.max) this.value2.v = this.max;
+		if (this.value2.v < this.min) this.value2.v = this.min;
+
+		if (this.value1.v > this.value2.v) this.value1.v = this.value2.v;
+		if (this.value2.v < this.value1.v) this.value2.v = this.value1.v;
+
+		context.clearRect(this.x,this.y,this.width,this.height);
+		context.fillStyle = bgColor;
+		context.fillRect(this.x,this.y,this.width,this.height);
+
+		var addy = Math.round( Math.max(0, this.height - 11)*0.5 );
+
+		// label 1:1
+		context.fillStyle = frontColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.value1.v.toFixed(this.decimals), this.x, this.y+9+addy);
+		// label 2:1
+		context.fillStyle = frontColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "right";
+		context.fillText(this.value2.v.toFixed(this.decimals), this.x+this.width-1, this.y+9+addy);
+
+		context.fillStyle = frontColor;
+		var p1 = this.getPositionFromValue(this.value1.v);
+		var p2 = this.getPositionFromValue(this.value2.v);
+
+		context.fillRect(this.x+p1,this.y,p2-p1,this.height);
+
+		context.save();
+
+		// mask
+		context.fillStyle = "transparent";
+		context.beginPath();
+		context.rect(this.x+p1,this.y,p2-p1,this.height);
+		context.clip();
+
+		// label 1:2
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.value1.v.toFixed(this.decimals), this.x, this.y+9+addy);
+		// label 2:2
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "right";
+		context.fillText(this.value2.v.toFixed(this.decimals), this.x+this.width-1, this.y+9+addy);
+
+		context.restore();
+
+	}
+
+	this.RangeSlider.prototype.setValueFromPosition = function(x, val) {
+		var value = ( (this.range/this.width)*x )-(this.range-this.max);
+		if (value > this.max) value = this.max;
+		if (value < this.min) value = this.min;
+		if (val == 1) {
+			this.value1.v = value;
+		} else {
+			this.value2.v = value;
+		}
+	}
+
+	this.RangeSlider.prototype.getPositionFromValue = function(value) {
+		var steps = this.width/this.range;
+		var extra = Math.abs(this.min);
+		if (this.min > 0) extra = extra*-1;
+		var p = steps*(value+extra);
+
+		return p;
+	}
+
+	this.RangeSlider.prototype.mouseDown = function(x,y) {
+		// closest
+		var p1 = this.getPositionFromValue(this.value1.v);
+		var p2 = this.getPositionFromValue(this.value2.v);
+
+		var difx0 = Math.abs(x-p1);
+		var difx1 = Math.abs(x-p2);
+		if (difx0 < difx1) {
+			this.setValueFromPosition(x, 1);
+			this.value1.updateBind();
+		} else {
+			this.setValueFromPosition(x, 2);
+			this.value2.updateBind();
+		}
+		this.draw();
+	}
+
+	this.RangeSlider.prototype.mouseUp = function() {
+		this.value1.updateBind(true);
+		this.value2.updateBind(true);
+	}
+
+	/**
+	 * DropDown
+	 */
+
+	this.DropDown = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "DropDown";
+		this.values = p.values || ["DropDown"];
+		this.texts = p.texts || this.values;
+
+		this.dropdown = document.createElement("select");
+		this.dropdown.setAttribute("id",this.id);
+
+		this.value = new Value(this.values[0]);
+
+		for (var i=0; i<this.values.length; ++i ) {
+			var option = document.createElement("option");
+			option.text = this.texts[i];
+			option.value = this.values[i];
+			this.dropdown.options.add(option);
+		}
+
+		// draw arrow
+		var arrowCanvas = document.createElement("canvas");
+		arrowCanvas.width = 16;
+		arrowCanvas.height = 16;
+		var arrowContext = arrowCanvas.getContext('2d');
+		arrowContext.clearRect(0,0,16,16);
+		arrowContext.fillStyle = dimColor;
+		arrowContext.fillRect(0,0,16,16);
+		arrowContext.fillStyle = frontColor;
+		arrowContext.beginPath();
+		arrowContext.moveTo(4.5,6);
+		arrowContext.lineTo(12.5,6);
+		arrowContext.lineTo(8.5,11);
+		arrowContext.lineTo(4.5,6);
+		arrowContext.closePath();
+		arrowContext.fill();
+		arrowContext.strokeStyle = bgColor;
+		arrowContext.beginPath();
+		arrowContext.moveTo(0,0);
+		arrowContext.lineTo(0,16);
+		arrowContext.closePath();
+		arrowContext.stroke();
+		arrowContext.beginPath();
+		arrowContext.moveTo(16,0);
+		arrowContext.lineTo(16,16);
+		arrowContext.closePath();
+		arrowContext.stroke();
+
+		// input container
+		this.div = document.createElement("div");
+		var inputdivId = "input"+this.id;
+		this.div.setAttribute("id",inputdivId);
+		this.div.style.position = "absolute";
+		this.div.style.overflow = "hidden";
+		this.div.style.left = this.x-1+"px";
+		this.div.style.top = this.y-1+"px";
+		this.div.style.width = "101px";
+		this.div.style.height = "16px";
+		this.div.style.background = "url('"+arrowCanvas.toDataURL("image/png")+"') no-repeat right "+frontColor+"";
+
+		this.dropdown.style.position = "absolute"
+		this.dropdown.style.left = "0px";
+		this.dropdown.style.top = "0px";
+		this.dropdown.style.borderWidth = "1px";
+		this.dropdown.style.fontFamily = "sans-serif";
+		this.dropdown.style.fontSize = "10px";
+		this.dropdown.style.outlineStyle = "none"
+		this.dropdown.style.color = bgColor;
+		this.dropdown.style.webkitAppearance = "none";
+		this.dropdown.style.webkitBorderRadius = "0px";
+		this.dropdown.style.background = "rgba(0,0,0,0)";//"transparent";
+		this.dropdown.style.borderStyle = "solid";
+		this.dropdown.style.width = "119px";
+		this.dropdown.style.height = "16px";
+		this.dropdown.style.textIndent = "0px";
+		this.dropdown.style.borderLeftColor = bgColor;
+		this.dropdown.style.borderTopColor = bgColor;
+		this.dropdown.style.borderRightColor = bgColor;
+		this.dropdown.style.borderBottomColor = bgColor;
+		container.appendChild( this.div );
+		this.div.appendChild( this.dropdown );
+
+		this.dropdown.onchange = this.onChange;
+		this.dropdown.onfocus = this.onFocus;
+
+		this.draw();
+	}
+
+	this.DropDown.prototype = new Base();
+	this.DropDown.prototype.constructor = this.DropDown;
+
+	this.DropDown.prototype.onChange = function( event ) {
+		var o = pool[this.id];
+		o.value.v = this.value;
+		o.value.updateBind();
+	}
+
+	this.DropDown.prototype.onFocus = function( event ) {
+		//mouseHitId = this.id;
+	}
+
+	this.DropDown.prototype.draw = function() {
+
+	}
+
+	this.DropDown.prototype.mouseDown = function(x,y) {
+
+	}
+
+	this.DropDown.prototype.mouseUp = function() {
+
+	}
+
+	/*
+	 * InputText
+	 */
+
+	this.InputText = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "InputText";
+		this.text = p.text || "";
+
+		this.input = document.createElement("input");
+		this.value = new Value(this.text);
+		this.input.value = this.value.v;
+		this.input.type = "text";
+		this.input.setAttribute("id",this.id);
+
+		this.input.style.position = "absolute"
+		this.input.style.left = this.x-1+"px";
+		this.input.style.top = this.y-1+"px";
+		this.input.style.borderWidth = "1px";
+		this.input.style.fontFamily = "sans-serif";
+		this.input.style.fontSize = "10px";
+		this.input.style.outlineStyle = "none"
+		this.input.style.color = bgColor;
+		this.input.style.backgroundColor = frontColor;
+		this.input.style.borderStyle = "solid";
+		this.input.style.width = "100px";
+		this.input.style.height = "12px";
+		this.input.style.marginLeft = "0px";
+		this.input.style.textIndent = "3px";
+		this.input.style.borderLeftColor = bgColor;
+		this.input.style.borderTopColor = bgColor;
+		this.input.style.borderRightColor = bgColor;
+		this.input.style.borderBottomColor = bgColor;
+
+		this.input.oninput = this.onTextChange;
+		this.input.onfocus = this.onFocus;
+
+		container.appendChild( this.input );
+
+		this.draw();
+	}
+
+	this.InputText.prototype = new Base();
+	this.InputText.prototype.constructor = this.InputText;
+
+	this.InputText.prototype.draw = function() {
+
+	}
+
+	this.InputText.prototype.onTextChange = function( event ) {
+		var o = pool[this.id];
+		o.value.v = this.value;
+		o.value.updateBind();
+	}
+
+	this.InputText.prototype.onFocus = function( event ) {
+		//mouseHitId = this.id;
+	}
+
+	this.InputText.prototype.mouseDown = function(x,y) {
+
+	}
+
+	this.InputText.prototype.mouseUp = function() {
+
+	}
+
+	/*
+	 * Stepper
+	 */
+
+	this.Stepper = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "Stepper";
+		this.mouseIsOver = false;
+		this.value = new Value(p.value || 0);
+		this.width = p.width || 60,
+		this.height = p.height || 10;
+		this.min = p.min || -10000;
+		this.max = p.max || 10000;
+		this.mouseDownNumber = false;
+		this.mouseDownMinus = false;
+		this.mouseDownPlus = false;
+		this.lastMouseX = null;
+		this.lastMouseY = null;
+		this.step = p.step || 10;
+		this.decimals = p.decimals || 0;
+		this.bx = this.width-22;
+		this.draw();
+	}
+
+	this.Stepper.prototype = new Base();
+	this.Stepper.prototype.constructor = this.Stepper;
+
+	this.Stepper.prototype.draw = function() {
+		if (this.value.v < this.min) this.value.v = this.min;
+		if (this.value.v > this.max) this.value.v = this.max;
+
+		context.clearRect(this.x,this.y,this.width,this.height);
+		context.fillStyle = bgColor;
+		context.fillRect(this.x,this.y,this.width,this.height);
+
+		var addy = Math.round( Math.max(0, this.height - 11)*0.5 );
+
+		// -
+		context.fillStyle = frontColor;
+		if (this.mouseDownMinus) context.fillStyle = bgColor;
+		context.fillRect(this.x+this.bx,this.y+1,10,this.height-2);
+		context.fillStyle = bgColor;
+		if (this.mouseDownMinus) context.fillStyle = frontColor;
+		context.fillRect(this.x+this.bx+2,this.y+4+addy,6,2);
+
+		// +
+		context.fillStyle = frontColor;
+		if (this.mouseDownPlus) context.fillStyle = bgColor;
+		context.fillRect(this.x+this.bx+11,this.y+1,10,this.height-2);
+		context.fillStyle = bgColor;
+		if (this.mouseDownPlus) context.fillStyle = frontColor;
+		context.fillRect(this.x+this.bx+13,this.y+4+addy,6,2);
+		context.fillRect(this.x+this.bx+15,this.y+2+addy,2,6);
+
+		// label
+		context.fillStyle = frontColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "center";
+		context.fillText(this.value.v.toFixed(this.decimals), this.x+this.bx/2, this.y+9+addy);
+
+	}
+
+
+	this.Stepper.prototype.mouseDown = function(x,y) {
+		if (x < this.bx && !this.mouseDownMinus && !this.mouseDownPlus) {
+			this.mouseDownNumber = true;
+			this.mouseDownMinus = false;
+			this.mouseDownPlus = false;
+		} else if (x >= this.bx && x < this.bx+11 && !this.mouseDownNumber && !this.mouseDownPlus) {
+			this.mouseDownMinus = true;
+			this.mouseDownNumber = false;
+			this.mouseDownPlus = false;
+			this.value.v -= this.step;
+		} else if (x >= this.bx+11 && !this.mouseDownNumber && !this.mouseDownMinus) {
+			this.mouseDownPlus = true;
+			this.mouseDownNumber = false;
+			this.mouseDownMinus = false;
+			this.value.v += this.step;
+		}
+
+		if (this.lastMouseX != null && this.mouseDownNumber) {
+			var difx = x-this.lastMouseX;
+			var dify = y-this.lastMouseY;
+
+			var avg = (difx-dify);
+			this.value.v += avg*this.step;
+			this.draw();
+		}
+
+		this.lastMouseX = x;
+		this.lastMouseY = y;
+
+		this.draw();
+		this.value.updateBind();
+
+	}
+
+	this.Stepper.prototype.mouseUp = function() {
+		this.mouseDownNumber = false;
+		this.mouseDownMinus = false;
+		this.mouseDownPlus = false;
+
+		this.lastMouseX = null;
+		this.lastMouseY = null;
+
+		this.value.updateBind(true);
+
+		this.draw();
+	}
+
+	/*
+	 * Graph
+	 */
+
+	this.Graph = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "Graph";
+		this.width = p.width || 100;
+		this.height = p.height || 40;
+		this.min = p.min || 0;
+		this.max = p.max || 1;
+		this.range = this.max - this.min;
+		this.value = new Value(this.min);
+		this.draw();
+	}
+
+	this.Graph.prototype = new Base();
+	this.Graph.prototype.constructor = this.Graph;
+
+	this.Graph.prototype.draw = function() {
+		if (this.value.v > this.max) this.value.v = this.max;
+		if (this.value.v < this.min) this.value.v = this.min;
+
+		// get old
+		var old = context.getImageData(this.x, this.y, this.width, this.height);
+
+		context.clearRect(this.x,this.y,this.width,this.height);
+
+		// frame
+		context.strokeStyle = bgColor;
+		context.lineWidth = 2.0;
+		context.strokeRect(this.x, this.y, this.width, this.height);
+
+		context.fillStyle = frontColor;
+		context.fillRect(this.x, this.y, this.width, this.height);
+
+		// move one step left
+		context.save();
+
+		// mask
+		context.fillStyle = "transparent";
+		context.beginPath();
+		context.rect(this.x,this.y,this.width,this.height);
+		context.clip();
+
+		var tempCanvas = document.createElement('canvas');
+		tempCanvas.width = this.width;
+		tempCanvas.height = this.height;
+		var tempContext = tempCanvas.getContext('2d');
+
+		tempContext.putImageData(old, 0, 0);
+
+		context.drawImage(tempCanvas, this.x-1, this.y);
+
+		// draw new
+		context.fillStyle = dimColor;
+
+		var steps = this.height/this.range;
+		var h = steps*(this.value.v+Math.abs(this.min));
+		context.fillRect(this.x+this.width-1, this.y+this.height-h, 1, h);
+
+		context.restore();
+
+	}
+
+	this.Graph.prototype.mouseDown = function(x,y) {
+	}
+
+	this.Graph.prototype.mouseUp = function() {
+	}
+
+	/*
+	 * ImageButton
+	 */
+
+	this.ImageButton = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "ImageButton";
+		this.image = p.image || new Image();
+		this.width = p.width || this.image.width;
+		this.height = p.height || this.image.height;
+		this.mouseIsDown = false;
+		this.value = new Value(this.mouseIsDown);
+		this.draw();
+	}
+
+	this.ImageButton.prototype = new Base();
+	this.ImageButton.prototype.constructor = this.ImageButton;
+
+	this.ImageButton.prototype.draw = function() {
+		context.clearRect(this.x,this.y,this.width,this.height);
+
+		if (this.mouseIsDown) {
+			context.globalAlpha = 0.5;
+		} else {
+			context.globalAlpha = 1.0;
+		}
+		// image
+		context.drawImage(this.image, this.x, this.y, this.width, this.height);
+		context.globalAlpha = 1.0;
+	}
+
+	this.ImageButton.prototype.mouseDown = function(x,y) {
+		this.mouseIsDown = true;
+		this.value.v = this.mouseIsDown;
+		this.value.updateBind();
+		this.draw();
+	}
+
+	this.ImageButton.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+		this.mouseIsDown = false;
+		this.value.v = this.mouseIsDown;
+		this.value.updateBind();
+		this.draw();
+	}
+
+	/*
+	 * Button
+	 */
+
+	this.Button = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "Button";
+		this.fullWidth = 0;
+		this.width = this.fullWidth;
+		this.height = Math.max(p.height, 14) || 14;
+		this.text = p.text || "";
+		this.mouseIsDown = false;
+		this.value = new Value(this.mouseIsDown);
+		this.draw();
+		this.draw();
+	}
+
+	this.Button.prototype = new Base();
+	this.Button.prototype.constructor = this.Button;
+
+	this.Button.prototype.draw = function() {
+		context.clearRect(this.x,this.y,this.width,this.height);
+
+		// frame
+		context.strokeStyle = bgColor;
+		context.lineWidth = 2.0;
+		context.strokeRect(this.x, this.y, this.width, this.height);
+
+		context.fillStyle = frontColor;
+		if (this.mouseIsDown) context.fillStyle = dimColor;
+		context.fillRect(this.x, this.y, this.width, this.height);
+
+		// label
+		var addy = Math.round( Math.max(0, this.height - 14)*0.5 );
+
+		context.fillStyle = bgColor;
+		if (this.mouseIsDown) context.fillStyle = frontColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.text, this.x+4, this.y+11+addy);
+		var labelWidth = context.measureText(this.text);
+		this.width = this.fullWidth + labelWidth.width + 9;
+
+	}
+
+	this.Button.prototype.mouseDown = function(x,y) {
+		this.mouseIsDown = true;
+		this.value.v = this.mouseIsDown;
+		this.value.updateBind();
+		this.draw();
+	}
+
+	this.Button.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+		this.mouseIsDown = false;
+		this.value.v = this.mouseIsDown;
+		this.draw();
+	}
+
+
+	/*
+	 * TrackPad
+	 */
+
+	this.TrackPad = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "TrackPad";
+		this.width = p.width || 100;
+		this.height = p.height || 60;
+		this.min = p.min || -1;
+		this.max = p.max || 1;
+		this.size =  p.size || 6;
+		this.range = this.max - this.min;
+		var center = ((this.range/2)-this.max)*-1;
+		this.value1 = new Value(p.value1 || center);
+		this.value2 = new Value(p.value2 || center);
+		this.draw();
+	}
+
+	this.TrackPad.prototype = new Base();
+	this.TrackPad.prototype.constructor = this.TrackPad;
+
+	this.TrackPad.prototype.draw = function() {
+		if (this.value1.v < this.min) this.value1.v = this.min;
+		if (this.value1.v > this.max) this.value1.v = this.max;
+		if (this.value2.v < this.min) this.value2.v = this.min;
+		if (this.value2.v > this.max) this.value2.v = this.max;
+
+		context.clearRect(this.x-1,this.y,this.width,this.height+14);
+
+		// frame
+		context.strokeStyle = bgColor;
+		context.lineWidth = 2.0;
+		context.strokeRect(this.x, this.y, this.width, this.height);
+
+		context.fillStyle = frontColor;
+		context.fillRect(this.x, this.y, this.width, this.height);
+
+		// horizontal line
+		context.strokeStyle = dimColor;
+		context.lineWidth = 1.0;
+		context.beginPath();
+		context.moveTo(this.x, 0.5+this.y+this.height/2);
+		context.lineTo(this.x+this.width, 0.5+this.y+this.height/2);
+		context.closePath();
+		context.stroke();
+
+		// vertical line
+		context.beginPath();
+		context.moveTo(0.5+this.x+this.width/2, this.y);
+		context.lineTo(0.5+this.x+this.width/2, this.y+this.height);
+		context.closePath();
+		context.stroke();
+
+		var x = this.getXPositionFromValue();
+		var y = this.getYPositionFromValue();
+
+		var half = this.size/2;
+
+		if (x < half) x = half;
+		if (x > this.width-half) x = this.width-half;
+		if (y < half) y = half;
+		if (y > this.height-half) y = this.height-half;
+
+		// point
+		context.fillStyle = dimColor;
+		context.fillRect(this.x+x-half, this.y+y-half, this.size, this.size);
+
+		// label
+		context.fillStyle = bgColor;
+		context.font = fontsm;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText("X: "+this.value1.v.toFixed(2)+" Y: "+this.value2.v.toFixed(2), this.x, this.y+this.height+9);
+
+	}
+
+	this.TrackPad.prototype.setXValueFromPosition = function(x) {
+		var value1 = ( (this.range/this.width)*x )-(this.range-this.max);
+		this.value1.v = value1;
+	}
+
+	this.TrackPad.prototype.setYValueFromPosition = function(y) {
+		var value2 = ( (this.range/this.height)*y )-(this.range-this.max);
+		this.value2.v = value2;
+	}
+
+	this.TrackPad.prototype.getXPositionFromValue = function() {
+		var steps = this.width/this.range;
+		var extra = Math.abs(this.min);
+		if (this.min > 0) extra = extra*-1;
+		var p = steps*(this.value1.v+extra);
+		return p;
+	}
+
+	this.TrackPad.prototype.getYPositionFromValue = function() {
+		var steps = this.height/this.range;
+		var extra = Math.abs(this.min);
+		if (this.min > 0) extra = extra*-1;
+		var p = steps*(this.value2.v+extra);
+		return p;
+	}
+
+	this.TrackPad.prototype.mouseDown = function(x,y) {
+		this.setXValueFromPosition(x);
+		this.setYValueFromPosition(y);
+
+		this.draw();
+
+		this.value1.updateBind();
+		this.value2.updateBind();
+	}
+
+	this.TrackPad.prototype.mouseUp = function() {
+		this.value1.updateBind(true);
+		this.value2.updateBind(true);
+	}
+
+	/*
+	 * ColorPicker2
+	 */
+
+	this.ColorPicker2 = function  ( p ) {
+		Base.call( this, p );
+
+		this.name = "ColorPicker2";
+		this.framewidth = p.framewidth || 10;
+		this.frameheight = p.frameheight || 10;
+		this.colorwidth = p.width || 100;
+		this.colorheight = p.height || 30;
+		this.width = this.framewidth;
+		this.height = this.frameheight;
+		this.r = p.r || 255;
+		this.g = p.g || 255;
+		this.b = p.b || 255;
+		this.oldColor = { r:this.r, g:this.g, b:this.b };
+		this.open = false;
+		this.mousehack = false;
+		this.lastTime = 0;
+		this.hex = p.hex || colorToHex("rgb("+this.r+","+this.g+","+this.b+")");
+		this.value = new Value(this.hex);
+		this.draw();
+	}
+
+	this.ColorPicker2.prototype = new Base();
+	this.ColorPicker2.prototype.constructor = this.ColorPicker2;
+
+	this.ColorPicker2.prototype.draw = function() {
+
+		context.clearRect(this.x-1,this.y-1,this.framewidth+60,this.height+3);
+		context.clearRect(this.x-1,this.y+this.frameheight,this.colorwidth+2,this.colorheight+3);
+
+		// frame
+		context.strokeStyle = bgColor;
+		context.lineWidth = 2.0;
+		context.strokeRect(this.x, this.y, this.framewidth, this.frameheight);
+
+		// current color
+		context.fillStyle = "#"+this.value.v;
+		context.fillRect(this.x, this.y, this.framewidth, this.frameheight);
+
+		// label
+		var addy = Math.round( Math.max(0, this.frameheight - 11)*0.5 );
+
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText("#"+this.value.v.toUpperCase(), this.x+this.framewidth+4, this.y+9+addy);
+
+		if (this.open) {
+			var extray = 1;
+			// frame
+			context.strokeStyle = bgColor;
+			context.lineWidth = 2.0;
+			context.strokeRect(this.x, this.y+this.frameheight+extray, this.colorwidth, this.colorheight);
+
+			// gradient colors
+			var gradient = context.createLinearGradient(this.x, this.y+this.frameheight+extray, this.x+this.colorwidth, this.y+this.frameheight+extray);
+			var offset = 1/6;
+			var index = 0;
+			gradient.addColorStop(offset*index++, "rgb(255, 0, 0)");	// red
+			gradient.addColorStop(offset*index++, "rgb(255, 255, 0)");	// yellow
+			gradient.addColorStop(offset*index++, "rgb(0, 255, 0)");	// green
+			gradient.addColorStop(offset*index++, "rgb(0, 255, 255)");	// cyan
+			gradient.addColorStop(offset*index++, "rgb(0, 0, 255)");	// blue
+			gradient.addColorStop(offset*index++, "rgb(255, 0, 255)");	// magenta
+			gradient.addColorStop(offset*index++, "rgb(255, 0, 0)");	// red
+			context.fillStyle = gradient;
+			context.fillRect(this.x, this.y+this.frameheight+extray, this.colorwidth, this.colorheight);
+
+			var onepixel = 1/(this.colorheight/2);
+
+			// gradient white overlay
+			var gradient = context.createLinearGradient(this.x, this.y+this.frameheight+extray, this.x, this.y+this.frameheight+extray+(this.colorheight/2));
+			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");				// white
+			gradient.addColorStop(onepixel, "rgba(255, 255, 255, 1)");		// white
+			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");				// alpha
+			context.fillStyle = gradient;
+			context.fillRect(this.x, this.y+this.frameheight+extray, this.colorwidth, (this.colorheight/2));
+
+			// gradient black overlay
+			var gradient = context.createLinearGradient(this.x, this.y+this.frameheight+extray+(this.colorheight/2), this.x, this.y+this.frameheight+extray+this.colorheight);
+			gradient.addColorStop(0, "rgba(0, 0, 0, 0)");			// alpha
+			gradient.addColorStop(1-onepixel, "rgba(0, 0, 0, 1)");	// black
+			gradient.addColorStop(1, "rgba(0, 0, 0, 1)");			// black
+			context.fillStyle = gradient;
+			context.fillRect(this.x, this.y+this.frameheight+extray+(this.colorheight/2), this.colorwidth, (this.colorheight/2));
+		}
+
+	}
+
+	this.ColorPicker2.prototype.mouseDown = function(x,y) {
+		var nowTimer = new Date().getTime();
+		if (nowTimer-this.lastTime < 200) {
+			return;
+		}
+
+		if (this.open) {
+			if (x > 0 && x < this.colorwidth-1) {
+				if (y > this.frameheight && y < this.frameheight+this.colorheight) {
+					if (isTouchDevice) {
+						this.mouseMove(x,y);
+					}
+					this.oldColor = { r:this.r, g:this.g, b:this.b };
+				}
+			}
+		}
+
+		if (!this.open && y < this.frameheight) {
+			this.open = true;
+		} else if (this.open) {
+			this.open = false;
+		}
+
+		if (this.open) {
+			this.width = this.colorwidth;
+			this.height = this.frameheight+this.colorheight;
+		} else {
+			this.width = this.framewidth;
+			this.height = this.frameheight;
+		}
+
+		this.draw();
+
+		this.mousehack = false;
+
+		this.lastTime = new Date().getTime();
+
+		if (!this.open) {
+			for (var i=0; i<pool.length; ++i ) {
+				var o = pool[i];
+				o.draw();
+			}
+		}
+
+
+	}
+
+	this.ColorPicker2.prototype.setOldColor = function() {
+		this.r = this.oldColor.r;
+		this.g = this.oldColor.g;
+		this.b = this.oldColor.b;
+		this.hex = colorToHex("rgb("+this.r+","+this.g+","+this.b+")");
+	}
+
+	this.ColorPicker2.prototype.mouseMove = function(x,y) {
+		var old = false;
+		if (x < 0) {
+			x = 0;
+			this.setOldColor();
+			old = true;
+		}
+		if (x > this.colorwidth-1) {
+			x = this.colorwidth-1;
+			this.setOldColor();
+			old = true;
+		}
+		if (y <= this.frameheight) {
+			y = this.frameheight;
+			this.setOldColor();
+			old = true;
+		}
+		if (y > this.frameheight+this.colorheight) {
+			y = this.frameheight+this.colorheight;
+			this.setOldColor();
+			old = true;
+		}
+
+		if (!old) {
+			var pixel = context.getImageData(this.x+x, this.y+y, 1, 1).data;
+			this.r = pixel[0];
+			this.g = pixel[1];
+			this.b = pixel[2];
+			this.hex = colorToHex("rgb("+this.r+","+this.g+","+this.b+")");
+		}
+
+		this.value.v = this.hex;
+		this.value.updateBind();
+
+		this.draw();
+	}
+
+	this.ColorPicker2.prototype.mouseUp = function( inputid ) {
+		if (!this.open) {
+			mouseHitIdArray[inputid] = null;
+		}
+		if (this.mousehack) {
+			this.setOldColor();
+
+			this.mouseDown();
+
+			mouseHitIdArray[inputid] = null;
+		}
+
+		this.mousehack = true;
+		this.value.updateBind(true);
+	}
+
+
+	/*
+	 * ColorPicker
+	 */
+
+	this.ColorPicker = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "ColorPicker";
+		this.framewidth = p.framewidth || 10;
+		this.frameheight = p.frameheight || 10;
+		this.width = p.width || 100;
+		this.height = p.height || 20;
+		this.r = p.r || 255;
+		this.g = p.g || 255;
+		this.b = p.b || 255;
+		this.hex = p.hex || colorToHex("rgb("+this.r+","+this.g+","+this.b+")");
+		this.value = new Value(this.hex);
+		this.draw();
+	}
+
+	this.ColorPicker.prototype = new Base();
+	this.ColorPicker.prototype.constructor = this.ColorPicker;
+
+	this.ColorPicker.prototype.draw = function() {
+		context.clearRect(this.x,this.y,this.width,this.height+this.frameheight+4);
+
+		// frame
+		context.strokeStyle = bgColor;
+		context.lineWidth = 2.0;
+		context.strokeRect(this.x, this.y, this.width, this.height);
+
+		// gradient colors
+		var gradient = context.createLinearGradient(this.x, this.y, this.x+this.width, this.y);
+		var offset = 1/6;
+		var index = 0;
+		gradient.addColorStop(offset*index++, "rgb(255, 0, 0)");	// red
+		gradient.addColorStop(offset*index++, "rgb(255, 255, 0)");	// yellow
+		gradient.addColorStop(offset*index++, "rgb(0, 255, 0)");	// green
+		gradient.addColorStop(offset*index++, "rgb(0, 255, 255)");	// cyan
+		gradient.addColorStop(offset*index++, "rgb(0, 0, 255)");	// blue
+		gradient.addColorStop(offset*index++, "rgb(255, 0, 255)");	// magenta
+		gradient.addColorStop(offset*index++, "rgb(255, 0, 0)");	// red
+		context.fillStyle = gradient;
+		context.fillRect(this.x, this.y, this.width, this.height);
+
+		var onepixel = 1/(this.height/2);
+
+		// gradient white overlay
+		var gradient = context.createLinearGradient(this.x, this.y, this.x, this.y+(this.height/2));
+		gradient.addColorStop(0, "rgba(255, 255, 255, 1)");				// white
+		gradient.addColorStop(onepixel, "rgba(255, 255, 255, 1)");		// white
+		gradient.addColorStop(1, "rgba(255, 255, 255, 0)");				// alpha
+		context.fillStyle = gradient;
+		context.fillRect(this.x, this.y, this.width, (this.height/2));
+
+		// gradient black overlay
+		var gradient = context.createLinearGradient(this.x, this.y+(this.height/2), this.x, this.y+this.height);
+		gradient.addColorStop(0, "rgba(0, 0, 0, 0)");			// alpha
+		gradient.addColorStop(1-onepixel, "rgba(0, 0, 0, 1)");	// black
+		gradient.addColorStop(1, "rgba(0, 0, 0, 1)");			// black
+		context.fillStyle = gradient;
+		context.fillRect(this.x, this.y+(this.height/2), this.width, (this.height/2));
+
+		// current color
+		context.strokeStyle = bgColor;
+		context.lineWidth = 2.0;
+		context.strokeRect(this.x, this.y+this.height+4, this.framewidth, this.frameheight);
+
+		context.fillStyle = "#"+this.value.v;
+		context.fillRect(this.x, this.y+this.height+4, this.framewidth, this.frameheight);
+
+		// label
+		var addy = Math.round( Math.max(0, this.frameheight - 10)*0.5 );
+
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText("#"+this.value.v.toUpperCase(), this.x+this.framewidth+4, this.y+this.height+13+addy);
+
+	}
+
+	this.ColorPicker.prototype.mouseDown = function(x,y) {
+		if (x < 0) x = 0;
+		if (x > this.width-1) x = this.width-1;
+		if (y < 0) y = 0;
+		if (y > this.height-1) y = this.height-1;
+
+		var pixel = context.getImageData(this.x+x, this.y+y, 1, 1).data;
+		this.r = pixel[0];
+		this.g = pixel[1];
+		this.b = pixel[2];
+		this.hex = colorToHex("rgb("+this.r+","+this.g+","+this.b+")");
+		this.value.v = this.hex;
+		this.value.updateBind();
+		this.draw();
+	}
+
+	this.ColorPicker.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+	}
+
+	/*
+	 * Knob
+	 */
+
+	this.Knob = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "Knob";
+		this.radius = p.radius || 15;
+		this.centerx = this.x+this.radius;
+		this.centery = this.y+this.radius;
+		this.width = this.radius*2;
+		this.height = this.radius*2;
+		this.min = p.min || 0;
+		this.max = p.max || 100;
+		this.range = this.max - this.min;
+		this.value = new Value(p.value || 0);
+		this.rotationValue = this.getRotationValue();
+		this.lastMouseX = null;
+		this.lastMouseY = null;
+		this.decimals = p.decimals || 0;
+		this.draw();
+	}
+
+	this.Knob.prototype = new Base();
+	this.Knob.prototype.constructor = this.Knob;
+
+	this.Knob.prototype.getRotationValue = function() {
+		var steps = 1/this.range;
+		var value = (this.value.v-this.min)*steps;
+		return value;
+	}
+
+	this.Knob.prototype.draw = function() {
+		if (this.value.v < this.min) this.value.v = this.min;
+		if (this.value.v > this.max) this.value.v = this.max;
+
+		context.clearRect(this.x-4,this.y-4,this.width+8,this.height+13);
+		//draw a circle
+		context.fillStyle = bgColor;
+		context.beginPath();
+		context.arc(this.centerx, this.centery, this.radius, 0, Math.PI*2, false);
+		context.closePath();
+		context.fill();
+
+		// draw lines
+		var startangle = Math.PI+(Math.PI/1.25);
+		var endangle = Math.PI-(Math.PI/1.25);
+		var step = (startangle-endangle)/this.radius;
+
+		context.strokeStyle = bgColor;
+		context.lineWidth = 0.5;
+
+		for (var i=0; i<=this.radius; ++i ) {
+			var startx = this.centerx + Math.sin(startangle-(step*i))*(this.radius+1);
+			var starty = this.centery + Math.cos(startangle-(step*i))*(this.radius+1);
+			var endx = this.centerx + Math.sin(startangle-(step*i))*(this.radius+4);
+			var endy = this.centery + Math.cos(startangle-(step*i))*(this.radius+4);
+
+			context.beginPath();
+			context.moveTo(startx, starty);
+			context.lineTo(endx, endy);
+			context.closePath();
+			context.stroke();
+
+		}
+
+		this.rotationValue = this.getRotationValue();
+
+		// line
+		var valueadd = (startangle-endangle)*this.rotationValue;
+		var linex = this.centerx + Math.sin(startangle-valueadd)*(this.radius);
+		var liney = this.centery + Math.cos(startangle-valueadd)*(this.radius);
+		context.strokeStyle = frontColor;
+		context.lineWidth = 2.0;
+		context.beginPath();
+		context.moveTo(this.centerx, this.centery);
+		context.lineTo(linex, liney);
+		context.closePath();
+		context.stroke();
+
+		// label
+		context.fillStyle = bgColor;
+		context.font = fontsm;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "center";
+		context.fillText(this.value.v.toFixed(this.decimals), this.centerx, this.centery+this.radius+7);
+	}
+
+	this.Knob.prototype.mouseDown = function(x,y) {
+		if (this.lastMouseX != null) {
+			var difx = x-this.lastMouseX;
+			var dify = y-this.lastMouseY;
+
+			var avg = (difx-dify)/100;//-this.range;
+			avg *= this.range;
+			this.value.v += avg;
+
+			this.draw();
+			this.value.updateBind();
+		}
+
+		this.lastMouseX = x;
+		this.lastMouseY = y;
+	}
+
+	this.Knob.prototype.mouseUp = function() {
+		this.lastMouseX = null;
+		this.lastMouseY = null;
+		this.value.updateBind(true);
+	}
+
+	/*
+	 * CheckBox
+	 */
+
+	this.CheckBox = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "CheckBox";
+		this.text = p.text || "";
+		this.value = new Value(p.selected || false);
+		this.fullWidth = p.width || 10;
+		this.width = this.fullWidth,
+		this.height = p.height || 10;
+		this.draw();
+	}
+
+	this.CheckBox.prototype = new Base();
+	this.CheckBox.prototype.constructor = this.CheckBox;
+
+	this.CheckBox.prototype.draw = function() {
+		context.clearRect(this.x,this.y,this.width,this.height);
+		context.fillStyle = bgColor;
+		context.fillRect(this.x,this.y,this.fullWidth,this.height);
+		if (this.value.v) {
+			context.fillStyle = frontColor;
+		} else {
+			context.fillStyle = bgColor;
+		}
+		context.fillRect(this.x+2,this.y+2,this.fullWidth-4,this.height-4);
+
+		// label
+		var addy = Math.round( Math.max(0, this.height - 11)*0.5 );
+
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.text, this.x+this.fullWidth+2, this.y+9+addy);
+		var labelWidth = context.measureText(this.text);
+		this.width = this.fullWidth + labelWidth.width + 3;
+	}
+
+	this.CheckBox.prototype.mouseDown = function() {
+		if (!this.value.v) {
+			this.value.v = true;
+		} else {
+			this.value.v = false;
+		}
+
+		this.value.updateBind();
+
+		this.draw();
+	}
+
+	this.CheckBox.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+	}
+
+	/*
+	 * RadioButtons
+	 */
+
+
+	this.RadioButtonGroup = function () {
+		this.name = "RadioButtonGroup";
+		this.array = [];
+		this.value = new Value( new Array() );
+	}
+
+	this.RadioButtonGroup.prototype.add = function(radioButton) {
+		this.array.push(radioButton);
+		this.value.v.push(radioButton.value.v);
+		radioButton.group = this;
+	}
+
+	this.RadioButtonGroup.prototype.clear = function(omit) {
+		for (var i=0; i<this.array.length; ++i ) {
+			var r = this.array[i];
+			if (r == omit) {
+				this.value.v[i] = true;
+				continue;
+			}
+			this.value.v[i] = false;
+
+			r.value.v = false;
+			r.value.updateBind();
+			r.draw();
+		}
+		this.value.updateBind();
+	}
+
+	this.RadioButton = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "RadioButton";
+		this.group = null;
+		this.text = p.text || "";
+		this.value = new Value(p.selected || false);
+		this.fullWidth = p.width || 18;
+		this.width = this.fullWidth;
+		this.height = p.height || 10;
+		this.draw();
+	}
+
+	this.RadioButton.prototype = new Base();
+	this.RadioButton.prototype.constructor = this.RadioButton;
+
+	this.RadioButton.prototype.draw = function() {
+		context.clearRect(this.x,this.y,this.width,this.height);
+		context.fillStyle = bgColor;
+		context.fillRect(this.x,this.y,this.fullWidth,this.height);
+		if (this.value.v) {
+			context.fillStyle = frontColor;
+			context.fillRect((this.x+this.fullWidth/2)+1,this.y+2,(this.fullWidth/2)-3,this.height-4);
+		} else {
+			context.fillStyle = dimColor;
+			context.fillRect(this.x+2,this.y+2,(this.fullWidth/2)-3,this.height-4);
+		}
+		// label
+		var addy = Math.round( Math.max(0, this.height - 11)*0.5 );
+
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.text, this.x+this.fullWidth+2, this.y+9+addy);
+		var labelWidth = context.measureText(this.text);
+		this.width = this.fullWidth + labelWidth.width + 3;
+	}
+
+	this.RadioButton.prototype.mouseDown = function() {
+		this.group.clear(this);
+		if (!this.value.v) {
+			this.value.v = true;
+		}
+
+		this.value.updateBind();
+		this.draw();
+	}
+
+	this.RadioButton.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+	}
+
+	this.RadioButton.prototype.mouseMove = function() {
+
+	}
+
+
+	/*
+	 * HSlider
+	 */
+
+	this.HSlider = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "HSlider";
+		this.mouseIsOver = false;
+		this.value = new Value(p.value || 0);
+		this.width = p.width || 100,
+		this.height = p.height|| 10;
+		this.min = p.min || 0;
+		this.max = p.max || this.width;
+		this.range = this.max - this.min;
+		this.decimals = p.decimals || 0;
+		this.draw();
+	}
+
+	this.HSlider.prototype = new Base();
+	this.HSlider.prototype.constructor = this.HSlider;
+
+	this.HSlider.prototype.draw = function() {
+		if (this.value.v > this.max) this.value.v = this.max;
+		if (this.value.v < this.min) this.value.v = this.min;
+
+		context.clearRect(this.x,this.y,this.width,this.height);
+		context.fillStyle = bgColor;
+		context.fillRect(this.x,this.y,this.width,this.height);
+
+		var addy = Math.round( Math.max(0, this.height - 11)*0.5 );
+
+		// label
+		context.fillStyle = frontColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.value.v.toFixed(this.decimals), this.x, this.y+9+addy);
+
+		var p = this.getPositionFromValue();
+		context.fillStyle = frontColor;
+		context.fillRect(this.x,this.y,p,this.height);
+
+		context.save();
+
+		context.fillStyle = "transparent";
+		context.beginPath();
+		context.rect(this.x,this.y,p,this.height);
+		context.clip();
+
+		// label2
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.value.v.toFixed(this.decimals), this.x, this.y+9+addy);
+
+		context.restore();
+
+	}
+
+	this.HSlider.prototype.setValueFromPosition = function(x) {
+		var value = ( (this.range/this.width)*x )-(this.range-this.max);
+		this.value.v = value;
+	}
+
+	this.HSlider.prototype.getPositionFromValue = function() {
+		var steps = this.width/this.range;
+		var extra = Math.abs(this.min);
+		if (this.min > 0) extra = extra*-1;
+		var p = steps*(this.value.v+extra);
+
+		return p;
+	}
+
+	this.HSlider.prototype.mouseDown = function(x,y) {
+		this.setValueFromPosition(x);
+		this.draw();
+		this.value.updateBind();
+	}
+
+	this.HSlider.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+	}
+
+
+	/*
+	 * VSlider
+	 */
+
+	this.VSlider = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "VSlider";
+		this.mouseIsOver = false;
+		this.value = new Value(p.value || 0);
+		this.width = p.width || 10;
+		this.height = p.height || 100;
+		this.min = p.min || 0;
+		this.max = p.max || this.height;
+		this.decimals = p.decimals || 0;
+		this.range = this.max - this.min;
+		this.draw();
+	}
+
+	this.VSlider.prototype = new Base();
+	this.VSlider.prototype.constructor = this.VSlider;
+
+	this.VSlider.prototype.draw = function() {
+		if (this.value.v > this.max) this.value.v = this.max;
+		if (this.value.v < this.min) this.value.v = this.min;
+
+		context.clearRect(this.x,this.y,this.width,this.height);
+		context.fillStyle = bgColor;
+		context.fillRect(this.x,this.y,this.width,this.height);
+
+		var addx = Math.round( Math.max(0, this.width - 11)*0.5 );
+
+		// label
+		context.save();
+		context.translate(this.x+9+addx, this.y+this.height-1);
+		context.rotate(-Math.PI/2);
+
+		context.fillStyle = frontColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.value.v.toFixed(this.decimals), 0, 0);
+
+		context.restore();
+
+		var p = this.getPositionFromValue();
+		context.fillStyle = frontColor;
+		context.fillRect(this.x,this.y+p,this.width,this.height-p);
+
+		context.save();
+		context.translate(this.x+9+addx, this.y+this.height-1);
+		context.rotate(-Math.PI/2);
+
+		context.fillStyle = "transparent";
+		context.beginPath();
+		context.rect(-1,-this.width+1,this.height-p,this.width);
+		context.clip();
+
+		// label2
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.value.v.toFixed(this.decimals), 0, 0);
+
+		context.restore();
+
+	}
+
+	this.VSlider.prototype.setValueFromPosition = function(y) {
+		var value = this.range - ( (this.range/this.height)*y )-(this.range-this.max);
+		this.value.v = value;
+	}
+
+	this.VSlider.prototype.getPositionFromValue = function() {
+		var steps = this.height/this.range;
+		var extra = Math.abs(this.min);
+		if (this.min > 0) extra = extra*-1;
+		var p = steps*(this.value.v+extra);
+		return this.height-p;
+	}
+
+	this.VSlider.prototype.mouseDown = function(x,y) {
+		this.setValueFromPosition(y);
+		this.draw();
+		this.value.updateBind();
+	}
+
+	this.VSlider.prototype.mouseUp = function() {
+		this.value.updateBind(true);
+	}
+
+	/*
+	 * Joystick
+	 */
+
+	this.Joystick = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "Joystick";
+		this.value1 = new Value(0);
+		this.value2 = new Value(0);
+		this.radius = p.radius || 50;
+		this.innerRadius = p.innerRadius || this.radius*0.65;
+		this.centerx = this.x+this.radius;
+		this.centery = this.y+this.radius;
+		this.width = this.radius*2;
+		this.height = this.radius*2;
+		this.stickx = 0;
+		this.sticky = 0;
+		this.laststickx = -1;
+		this.laststicky = -1;
+		this.maxDistance = this.radius - this.innerRadius - 5;
+		this.mouseIsDown = false;
+		this.draw();
+	}
+
+	this.Joystick.prototype = new Base();
+	this.Joystick.prototype.constructor = this.Joystick;
+
+	this.Joystick.prototype.draw = function( updateCalling ) {
+
+		// normalize
+		if (!this.mouseIsDown) {
+			this.stickx += (0 - this.stickx)/3;
+			this.sticky += (0 - this.sticky)/3;
+		}
+
+		if (this.stickx.toFixed(2) == this.laststickx.toFixed(2) && this.sticky.toFixed(2) == this.laststicky.toFixed(2) && updateCalling) {
+			return;
+		}
+
+		this.value1.v = this.stickx/this.maxDistance;
+		this.value2.v = this.sticky/this.maxDistance;
+
+		context.clearRect(this.x-2,this.y-2,this.width+14,this.height+14);
+
+		// ToDo: Move this gradient creation to the construct and use translate instead...
+
+		//draw outer circle
+		var gradient = context.createRadialGradient(this.centerx, this.centery, this.radius+5, this.centerx-7, this.centery-7, 5);
+		gradient.addColorStop(0, dimColor);
+		gradient.addColorStop(0.2, frontColor);
+		gradient.addColorStop(1, dimColor);
+		context.fillStyle = gradient;
+		context.beginPath();
+		context.arc(this.centerx, this.centery, this.radius, 0, Math.PI*2, false);
+		context.closePath();
+		context.fill();
+
+		//draw inner circle
+
+		// shadow
+		var shadowaddx = (1-this.value1.v)*5;
+		var shadowaddy = (1-this.value2.v)*5;
+
+		var gradient = context.createRadialGradient(this.centerx+this.stickx+shadowaddx, this.centery+this.sticky+shadowaddy, this.innerRadius+10, this.centerx+this.stickx+shadowaddx, this.centery+this.sticky+shadowaddy, 1);
+		gradient.addColorStop(0, 'rgba(0,0,0,0.00001)');
+		gradient.addColorStop(1, 'rgba(0,0,0,1)');
+		context.fillStyle = gradient;
+		context.beginPath();
+		context.arc(this.centerx+this.stickx+shadowaddx, this.centery+this.sticky+shadowaddy, this.innerRadius+10, 0, Math.PI*2, false);
+		context.closePath();
+		context.fill();
+
+		// gradient + first circle
+		var gradient = context.createLinearGradient(this.centerx+this.stickx-this.innerRadius, this.centery+this.sticky-this.innerRadius, this.centerx+this.stickx-this.innerRadius, this.centery+this.sticky+this.innerRadius);
+		gradient.addColorStop(0, frontColor);
+		gradient.addColorStop(1, dimColor);
+		context.fillStyle = gradient;
+		context.beginPath();
+		context.arc(this.centerx+this.stickx, this.centery+this.sticky, this.innerRadius, 0, Math.PI*2, false);
+		context.closePath();
+		context.fill();
+
+		// gradient + second circle
+		var gradient = context.createRadialGradient(this.centerx+this.stickx, this.centery+this.sticky, this.radius, this.centerx+this.stickx, this.centery+this.sticky, 1);
+		gradient.addColorStop(0, dimColor);
+		gradient.addColorStop(1, frontColor);
+		context.fillStyle = gradient;
+		context.beginPath();
+		context.arc(this.centerx+this.stickx, this.centery+this.sticky, this.innerRadius-6, 0, Math.PI*2, false);
+		context.closePath();
+		context.fill();
+
+
+		this.laststickx = this.stickx;
+		this.laststicky = this.sticky;
+
+	}
+
+	this.Joystick.prototype.mouseDown = function(x,y) {
+
+		this.mouseIsDown = true;
+
+		this.stickx = x-this.radius;
+		this.sticky = y-this.radius;
+
+		var distance = Math.sqrt(this.stickx * this.stickx + this.sticky * this.sticky);
+
+		if (distance > this.maxDistance) {
+			var angleRad = Math.atan2(this.stickx, this.sticky);
+			this.stickx = Math.sin(angleRad) * this.maxDistance;
+			this.sticky = Math.cos(angleRad) * this.maxDistance;
+		}
+
+		this.draw();
+
+		this.value1.updateBind();
+		this.value2.updateBind();
+
+	}
+
+	this.Joystick.prototype.mouseUp = function() {
+		this.mouseIsDown = false;
+		this.value1.updateBind(true);
+		this.value2.updateBind(true);
+	}
+
+
+	/*
+	 * Label
+	 */
+
+	this.Label = function ( p ) {
+		Base.call( this, p );
+
+		this.name = "Label";
+		this.group = null;
+		this.value = new Value(p.text || "");
+		this.width = 0;
+		this.height = 13;
+		this.draw();
+	}
+
+	this.Label.prototype = new Base();
+	this.Label.prototype.constructor = this.Label;
+
+	this.Label.prototype.draw = function() {
+		context.clearRect(this.x,this.y,this.width,this.height);
+
+		// label
+		context.fillStyle = bgColor;
+		context.font = font;
+		context.textBaseline = "alphabetic";
+		context.textAlign = "left";
+		context.fillText(this.value.v, this.x, this.y+9);
+		var labelWidth = context.measureText(this.value.v);
+		this.width = labelWidth.width + 3;
+	}
+
+	this.Label.prototype.mouseDown = function() {
+
+	}
+
+	this.Label.prototype.mouseUp = function() {
+
+	}
+
+	this.update = function () {
+		time = Date.now();
+		delta = time - oldTime;
+		oldTime = time;
+
+		for (var i=0; i<pool.length; ++i ) {
+			var o = pool[i];
+
+			// special joystick case
+			if (o.name == "Joystick") {
+				o.draw( true );
+				continue;
+			}
+
+			// 1 value
+			if (o.value) {
+				if ((o.value.receiver || o.value.both) && time > (o.lastUpdate+o.updateInterval)) {
+					o.value.updateBind();
+					o.draw();
+					o.lastUpdate = time;
+				}
+			}
+			// 2 values
+			if (o.value1) {
+				var doUpdate = false;
+				if ((o.value1.receiver || o.value1.both) && time > (o.lastUpdate+o.updateInterval)) {
+					o.value1.updateBind();
+					doUpdate = true;
+				}
+				if ((o.value2.receiver || o.value2.both) && time > (o.lastUpdate+o.updateInterval)) {
+					o.value2.updateBind();
+					doUpdate = true;
+				}
+				if (doUpdate) {
+					o.draw();
+					o.lastUpdate = time;
+				}
+			}
+
+		}
+	}
+
+
+	return {
+
+		getDomElement: function () { return container; },
+		getContext: function () { return context; },
+		HSlider: this.HSlider,
+		VSlider: this.VSlider,
+		Label: this.Label,
+		RadioButton: this.RadioButton,
+		RadioButtonGroup: this.RadioButtonGroup,
+		CheckBox: this.CheckBox,
+		Knob: this.Knob,
+		ColorPicker: this.ColorPicker,
+		ColorPicker2: this.ColorPicker2,
+		TrackPad: this.TrackPad,
+		Button: this.Button,
+		ImageButton: this.ImageButton,
+		Graph: this.Graph,
+		Stepper: this.Stepper,
+		InputText: this.InputText,
+		DropDown: this.DropDown,
+		Matrix: this.Matrix,
+		RangeSlider: this.RangeSlider,
+		Joystick: this.Joystick,
+		update: this.update
+
+	};
+
+
+};
+
+/*
+ * Exports
+ */
+
+module.exports = xgui;
+
+/*
+ * General
+ */
+
+
+function colorToHex(c) {
+	var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
+	return m ? (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
+}
+
+HTMLCanvasElement.prototype.relMouseCoords = function (event) {
+	var totalOffsetX = 0;
+	var totalOffsetY = 0;
+	var canvasX = 0;
+	var canvasY = 0;
+	var currentElement = this;
+
+	do {
+		totalOffsetX += currentElement.offsetLeft;
+		totalOffsetY += currentElement.offsetTop;
+	}
+	while (currentElement = currentElement.offsetParent)
+
+	canvasX = event.pageX - totalOffsetX;
+	canvasY = event.pageY - totalOffsetY;
+
+	// Fix for variable canvas width
+	canvasX = Math.round( canvasX * (this.width / this.offsetWidth) );
+	canvasY = Math.round( canvasY * (this.height / this.offsetHeight) );
+
+	return {x:canvasX, y:canvasY}
+}
+});
+
+if (typeof exports == "object") {
+  module.exports = require("xgui");
+} else if (typeof define == "function" && define.amd) {
+  define(function(){ return require("xgui"); });
+} else {
+  window["xgui"] = require("xgui");
+}})();
\ No newline at end of file
diff --git a/dist/xgui.min.js b/dist/xgui.min.js
new file mode 100644
index 0000000..c325aae
--- /dev/null
+++ b/dist/xgui.min.js
@@ -0,0 +1,78 @@
+// xgui.js r1 - https://github.com/oosmoxiecode/xgui.js
+(function(){function f(h,e,m){var i=f.resolve(h);if(null==i)throw m=m||h,e=e||"root",i=Error('Failed to require "'+m+'" from "'+e+'"'),i.path=m,i.parent=e,i.require=!0,i;e=f.modules[i];e.exports||(e.exports={},e.client=e.component=!0,e.call(this,e.exports,f.relative(i),e));return e.exports}var s=Object.prototype.hasOwnProperty;f.modules={};f.aliases={};f.resolve=function(h){"/"===h.charAt(0)&&(h=h.slice(1));for(var e=h+"/index.js",m=[h,h+".js",h+".json",h+"/index.js",h+"/index.json"],i=0;i<m.length;i++)if(h=
+m[i],s.call(f.modules,h))return h;if(s.call(f.aliases,e))return f.aliases[e]};f.normalize=function(h,e){var f=[];if("."!=e.charAt(0))return e;for(var h=h.split("/"),e=e.split("/"),i=0;i<e.length;++i)".."==e[i]?h.pop():"."!=e[i]&&""!=e[i]&&f.push(e[i]);return h.concat(f).join("/")};f.register=function(h,e){f.modules[h]=e};f.alias=function(h,e){if(!s.call(f.modules,h))throw Error('Failed to alias "'+h+'", it does not exist');f.aliases[e]=h};f.relative=function(h){function e(i){var q=e.resolve(i);return f(q,
+h,i)}var m=f.normalize(h,"..");e.resolve=function(e){var q=e.charAt(0);if("/"==q)return e.slice(1);if("."==q)return f.normalize(m,e);var q=h.split("/"),r;a:{for(r=q.length;r--;)if("deps"===q[r])break a;r=-1}(r+=1)||(r=0);return e=q.slice(0,r+1).join("/")+"/deps/"+e};e.exists=function(h){return s.call(f.modules,e.resolve(h))};return e};f.register("xgui/index.js",function(h,e,f){f.exports=e("./src/xgui")});f.register("xgui/src/xgui.js",function(h,e,f){function i(e){var h=/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(e);
+return h?(16777216|h[1]<<16|h[2]<<8|h[3]).toString(16).substr(1):e}f.exports=function(e){function h(a,c){a.preventDefault();var b=a,d=1,e=0;c&&(d=a.touches.length);for(var g=0;g<d;g++){c&&(b=a.touches[g],e=b.identifier);if(!m[e]){if(null!=n[e]){var f=l[n[e]];if("ColorPicker2"==f.name){var i=o.relMouseCoords(b);f.mouseMove(i.x-f.x,i.y-f.y)}}break}i=o.relMouseCoords(b);f=l[n[e]];if("CheckBox"==f.name||"RadioButton"==f.name||"Button"==f.name||"ImageButton"==f.name||"Matrix"==f.name)break;if("Stepper"==
+f.name&&(f.mouseDownPlus||f.mouseDownMinus))break;f.mouseDown(i.x-f.x,i.y-f.y)}}function f(a,c){var b=a,d=0;c&&(d=a.changedTouches[0].identifier);if(a.target==k||a.target==o)null!=n[d]?"InputText"!=l[n[d]].name&&"DropDown"!=l[n[d]].name&&a.preventDefault():a.preventDefault();c&&(b=a.touches[d]);for(var e=o.relMouseCoords(b),g=0;g<l.length;++g)if(b=l[g],e.x>b.x&&e.x<b.x+b.width&&e.y>b.y&&e.y<b.y+b.height){b.mouseDown(e.x-b.x,e.y-b.y);m[d]=!0;null!=n[d]&&(e=l[n[d]],"ColorPicker2"==e.name&&e.mouseUp());
+n[d]=b.id;break}}function u(a,c){var b=0;c&&(b=a.changedTouches[0].identifier);m[b]=!1;null!=n[b]&&l[n[b]].mouseUp(b)}void 0==e&&(e={});var k,o,a,l=[],m=[!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1],n=[null,null,null,null,null,null,null,null,null,null,null],g=e.backgroundColor||"rgb(100, 100, 100)",j=e.frontColor||"rgb(230, 230, 230)",p=e.dimColor||"rgb(140, 140, 140)",t;this.width=e.width||600;this.height=e.height||400;k=document.createElement("div");k.style.position="relative";k.style.width=""+this.width+
+"px";k.style.height=""+this.height+"px";k.setAttribute("id","xgui_container");o=document.createElement("canvas");o.width=this.width;o.height=this.height;a=o.getContext("2d");k.appendChild(o);var s="ontouchstart"in o||null!=navigator.userAgent.match(/ipad|iphone|android/i);s?(document.addEventListener("touchmove",function(a){h(a,!0)},!1),k.addEventListener("touchstart",function(a){f(a,!0)},!1),document.addEventListener("touchend",function(a){u(a,!0)},!1)):(document.addEventListener("mousemove",function(a){h(a)},
+!1),k.addEventListener("mousedown",function(a){f(a)},!1),document.addEventListener("mouseup",function(a){u(a)},!1));Base=function c(a){if(this.constructor!=c){a==void 0&&(a={});this.id=l.push(this)-1;this.x=a.x||0;this.y=a.y||0;this.updateInterval=a.updateInterval||200;this.lastUpdate=0}};Value=function(c){this.v=c;this.bindArray=[];this.both=this.receiver=false};Value.prototype.bind=function(){var c=arguments[0];if(typeof c=="function")this.bindArray.push(c);else if(typeof c=="object"){for(var c=
+[c],a=1;a<arguments.length;++a)c.push(arguments[a]);this.bindArray.push(c)}else console.log("error")};Value.prototype.updateBind=function(c){for(var c=c||false,a=0;a<this.bindArray.length;++a){var d=this.bindArray[a];if(typeof d=="function")d(this.v,c);else if(typeof d=="object")for(var e=d[0],f=1;f<d.length;++f)if(this.receiver)this.v=e[d[f]];else{if(this.both)this.v=e[d[f]];e[d[f]]=this.v}else console.log("error")}};this.Matrix=function(c){Base.call(this,c);this.name="Matrix";this.w=c.w||4;this.h=
+c.h||4;this.size=c.size||10;this.width=this.w*this.size+this.w-1;this.height=this.h*this.size+this.h-1;for(var a=[],d=0;d<this.h;++d){a[d]=[];for(var e=0;e<this.w;++e)a[d][e]=0}this.value=new Value(c.array||a);this.draw()};this.Matrix.prototype=new Base;this.Matrix.prototype.constructor=this.Matrix;this.Matrix.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);for(var c=0;c<this.h;++c)for(var b=0;b<this.w;++b){a.fillStyle=g;a.fillRect(this.x+b*this.size+b,this.y+c*this.size+
+c,this.size,this.size);if(this.value.v[c][b]){a.fillStyle=j;a.fillRect(this.x+b*this.size+b+2,this.y+c*this.size+c+2,this.size-4,this.size-4)}}};this.Matrix.prototype.mouseDown=function(c,a){var d=Math.floor(c/(this.size+1)),e=Math.floor(a/(this.size+1));this.value.v[e][d]=this.value.v[e][d]?0:1;this.value.updateBind();this.draw()};this.Matrix.prototype.mouseUp=function(){this.value.updateBind(true)};this.RangeSlider=function(a){Base.call(this,a);this.name="RangeSlider";this.mouseIsOver=false;this.value1=
+new Value(a.value1||25);this.value2=new Value(a.value2||75);this.width=a.width||100;this.height=a.height||10;this.min=a.min||0;this.max=a.max||this.width;this.range=this.max-this.min;this.decimals=a.decimals||0;this.draw()};this.RangeSlider.prototype=new Base;this.RangeSlider.prototype.constructor=this.RangeSlider;this.RangeSlider.prototype.draw=function(){if(this.value1.v>this.max)this.value1.v=this.max;if(this.value1.v<this.min)this.value1.v=this.min;if(this.value2.v>this.max)this.value2.v=this.max;
+if(this.value2.v<this.min)this.value2.v=this.min;if(this.value1.v>this.value2.v)this.value1.v=this.value2.v;if(this.value2.v<this.value1.v)this.value2.v=this.value1.v;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=g;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=j;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value1.v.toFixed(this.decimals),this.x,this.y+9+c);a.fillStyle=j;a.font="11px Arial";
+a.textBaseline="alphabetic";a.textAlign="right";a.fillText(this.value2.v.toFixed(this.decimals),this.x+this.width-1,this.y+9+c);a.fillStyle=j;var b=this.getPositionFromValue(this.value1.v),d=this.getPositionFromValue(this.value2.v);a.fillRect(this.x+b,this.y,d-b,this.height);a.save();a.fillStyle="transparent";a.beginPath();a.rect(this.x+b,this.y,d-b,this.height);a.clip();a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value1.v.toFixed(this.decimals),
+this.x,this.y+9+c);a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="right";a.fillText(this.value2.v.toFixed(this.decimals),this.x+this.width-1,this.y+9+c);a.restore()};this.RangeSlider.prototype.setValueFromPosition=function(a,b){var d=this.range/this.width*a-(this.range-this.max);if(d>this.max)d=this.max;if(d<this.min)d=this.min;b==1?this.value1.v=d:this.value2.v=d};this.RangeSlider.prototype.getPositionFromValue=function(a){var b=this.width/this.range,d=Math.abs(this.min);
+this.min>0&&(d=d*-1);return b*(a+d)};this.RangeSlider.prototype.mouseDown=function(a){var b=this.getPositionFromValue(this.value1.v),d=this.getPositionFromValue(this.value2.v),b=Math.abs(a-b),d=Math.abs(a-d);if(b<d){this.setValueFromPosition(a,1);this.value1.updateBind()}else{this.setValueFromPosition(a,2);this.value2.updateBind()}this.draw()};this.RangeSlider.prototype.mouseUp=function(){this.value1.updateBind(true);this.value2.updateBind(true)};this.DropDown=function(a){Base.call(this,a);this.name=
+"DropDown";this.values=a.values||["DropDown"];this.texts=a.texts||this.values;this.dropdown=document.createElement("select");this.dropdown.setAttribute("id",this.id);this.value=new Value(this.values[0]);for(a=0;a<this.values.length;++a){var b=document.createElement("option");b.text=this.texts[a];b.value=this.values[a];this.dropdown.options.add(b)}a=document.createElement("canvas");a.width=16;a.height=16;b=a.getContext("2d");b.clearRect(0,0,16,16);b.fillStyle=p;b.fillRect(0,0,16,16);b.fillStyle=j;
+b.beginPath();b.moveTo(4.5,6);b.lineTo(12.5,6);b.lineTo(8.5,11);b.lineTo(4.5,6);b.closePath();b.fill();b.strokeStyle=g;b.beginPath();b.moveTo(0,0);b.lineTo(0,16);b.closePath();b.stroke();b.beginPath();b.moveTo(16,0);b.lineTo(16,16);b.closePath();b.stroke();this.div=document.createElement("div");this.div.setAttribute("id","input"+this.id);this.div.style.position="absolute";this.div.style.overflow="hidden";this.div.style.left=this.x-1+"px";this.div.style.top=this.y-1+"px";this.div.style.width="101px";
+this.div.style.height="16px";this.div.style.background="url('"+a.toDataURL("image/png")+"') no-repeat right "+j+"";this.dropdown.style.position="absolute";this.dropdown.style.left="0px";this.dropdown.style.top="0px";this.dropdown.style.borderWidth="1px";this.dropdown.style.fontFamily="sans-serif";this.dropdown.style.fontSize="10px";this.dropdown.style.outlineStyle="none";this.dropdown.style.color=g;this.dropdown.style.webkitAppearance="none";this.dropdown.style.webkitBorderRadius="0px";this.dropdown.style.background=
+"rgba(0,0,0,0)";this.dropdown.style.borderStyle="solid";this.dropdown.style.width="119px";this.dropdown.style.height="16px";this.dropdown.style.textIndent="0px";this.dropdown.style.borderLeftColor=g;this.dropdown.style.borderTopColor=g;this.dropdown.style.borderRightColor=g;this.dropdown.style.borderBottomColor=g;k.appendChild(this.div);this.div.appendChild(this.dropdown);this.dropdown.onchange=this.onChange;this.dropdown.onfocus=this.onFocus;this.draw()};this.DropDown.prototype=new Base;this.DropDown.prototype.constructor=
+this.DropDown;this.DropDown.prototype.onChange=function(){var a=l[this.id];a.value.v=this.value;a.value.updateBind()};this.DropDown.prototype.onFocus=function(){};this.DropDown.prototype.draw=function(){};this.DropDown.prototype.mouseDown=function(){};this.DropDown.prototype.mouseUp=function(){};this.InputText=function(a){Base.call(this,a);this.name="InputText";this.text=a.text||"";this.input=document.createElement("input");this.value=new Value(this.text);this.input.value=this.value.v;this.input.type=
+"text";this.input.setAttribute("id",this.id);this.input.style.position="absolute";this.input.style.left=this.x-1+"px";this.input.style.top=this.y-1+"px";this.input.style.borderWidth="1px";this.input.style.fontFamily="sans-serif";this.input.style.fontSize="10px";this.input.style.outlineStyle="none";this.input.style.color=g;this.input.style.backgroundColor=j;this.input.style.borderStyle="solid";this.input.style.width="100px";this.input.style.height="12px";this.input.style.marginLeft="0px";this.input.style.textIndent=
+"3px";this.input.style.borderLeftColor=g;this.input.style.borderTopColor=g;this.input.style.borderRightColor=g;this.input.style.borderBottomColor=g;this.input.oninput=this.onTextChange;this.input.onfocus=this.onFocus;k.appendChild(this.input);this.draw()};this.InputText.prototype=new Base;this.InputText.prototype.constructor=this.InputText;this.InputText.prototype.draw=function(){};this.InputText.prototype.onTextChange=function(){var a=l[this.id];a.value.v=this.value;a.value.updateBind()};this.InputText.prototype.onFocus=
+function(){};this.InputText.prototype.mouseDown=function(){};this.InputText.prototype.mouseUp=function(){};this.Stepper=function(a){Base.call(this,a);this.name="Stepper";this.mouseIsOver=false;this.value=new Value(a.value||0);this.width=a.width||60;this.height=a.height||10;this.min=a.min||-1E4;this.max=a.max||1E4;this.mouseDownPlus=this.mouseDownMinus=this.mouseDownNumber=false;this.lastMouseY=this.lastMouseX=null;this.step=a.step||10;this.decimals=a.decimals||0;this.bx=this.width-22;this.draw()};
+this.Stepper.prototype=new Base;this.Stepper.prototype.constructor=this.Stepper;this.Stepper.prototype.draw=function(){if(this.value.v<this.min)this.value.v=this.min;if(this.value.v>this.max)this.value.v=this.max;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=g;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=j;if(this.mouseDownMinus)a.fillStyle=g;a.fillRect(this.x+this.bx,this.y+1,10,this.height-2);a.fillStyle=g;if(this.mouseDownMinus)a.fillStyle=
+j;a.fillRect(this.x+this.bx+2,this.y+4+c,6,2);a.fillStyle=j;if(this.mouseDownPlus)a.fillStyle=g;a.fillRect(this.x+this.bx+11,this.y+1,10,this.height-2);a.fillStyle=g;if(this.mouseDownPlus)a.fillStyle=j;a.fillRect(this.x+this.bx+13,this.y+4+c,6,2);a.fillRect(this.x+this.bx+15,this.y+2+c,2,6);a.fillStyle=j;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="center";a.fillText(this.value.v.toFixed(this.decimals),this.x+this.bx/2,this.y+9+c)};this.Stepper.prototype.mouseDown=function(a,b){if(a<
+this.bx&&!this.mouseDownMinus&&!this.mouseDownPlus){this.mouseDownNumber=true;this.mouseDownPlus=this.mouseDownMinus=false}else if(a>=this.bx&&a<this.bx+11&&!this.mouseDownNumber&&!this.mouseDownPlus){this.mouseDownMinus=true;this.mouseDownPlus=this.mouseDownNumber=false;this.value.v=this.value.v-this.step}else if(a>=this.bx+11&&!this.mouseDownNumber&&!this.mouseDownMinus){this.mouseDownPlus=true;this.mouseDownMinus=this.mouseDownNumber=false;this.value.v=this.value.v+this.step}if(this.lastMouseX!=
+null&&this.mouseDownNumber){this.value.v=this.value.v+(a-this.lastMouseX-(b-this.lastMouseY))*this.step;this.draw()}this.lastMouseX=a;this.lastMouseY=b;this.draw();this.value.updateBind()};this.Stepper.prototype.mouseUp=function(){this.mouseDownPlus=this.mouseDownMinus=this.mouseDownNumber=false;this.lastMouseY=this.lastMouseX=null;this.value.updateBind(true);this.draw()};this.Graph=function(a){Base.call(this,a);this.name="Graph";this.width=a.width||100;this.height=a.height||40;this.min=a.min||0;
+this.max=a.max||1;this.range=this.max-this.min;this.value=new Value(this.min);this.draw()};this.Graph.prototype=new Base;this.Graph.prototype.constructor=this.Graph;this.Graph.prototype.draw=function(){if(this.value.v>this.max)this.value.v=this.max;if(this.value.v<this.min)this.value.v=this.min;var c=a.getImageData(this.x,this.y,this.width,this.height);a.clearRect(this.x,this.y,this.width,this.height);a.strokeStyle=g;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);a.fillStyle=j;a.fillRect(this.x,
+this.y,this.width,this.height);a.save();a.fillStyle="transparent";a.beginPath();a.rect(this.x,this.y,this.width,this.height);a.clip();var b=document.createElement("canvas");b.width=this.width;b.height=this.height;b.getContext("2d").putImageData(c,0,0);a.drawImage(b,this.x-1,this.y);a.fillStyle=p;c=this.height/this.range*(this.value.v+Math.abs(this.min));a.fillRect(this.x+this.width-1,this.y+this.height-c,1,c);a.restore()};this.Graph.prototype.mouseDown=function(){};this.Graph.prototype.mouseUp=function(){};
+this.ImageButton=function(a){Base.call(this,a);this.name="ImageButton";this.image=a.image||new Image;this.width=a.width||this.image.width;this.height=a.height||this.image.height;this.mouseIsDown=false;this.value=new Value(this.mouseIsDown);this.draw()};this.ImageButton.prototype=new Base;this.ImageButton.prototype.constructor=this.ImageButton;this.ImageButton.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.globalAlpha=this.mouseIsDown?0.5:1;a.drawImage(this.image,this.x,
+this.y,this.width,this.height);a.globalAlpha=1};this.ImageButton.prototype.mouseDown=function(){this.mouseIsDown=true;this.value.v=this.mouseIsDown;this.value.updateBind();this.draw()};this.ImageButton.prototype.mouseUp=function(){this.value.updateBind(true);this.mouseIsDown=false;this.value.v=this.mouseIsDown;this.value.updateBind();this.draw()};this.Button=function(a){Base.call(this,a);this.name="Button";this.width=this.fullWidth=0;this.height=Math.max(a.height,14)||14;this.text=a.text||"";this.mouseIsDown=
+false;this.value=new Value(this.mouseIsDown);this.draw();this.draw()};this.Button.prototype=new Base;this.Button.prototype.constructor=this.Button;this.Button.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.strokeStyle=g;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);a.fillStyle=j;if(this.mouseIsDown)a.fillStyle=p;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-14)*0.5);a.fillStyle=g;if(this.mouseIsDown)a.fillStyle=
+j;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.text,this.x+4,this.y+11+c);this.width=this.fullWidth+a.measureText(this.text).width+9};this.Button.prototype.mouseDown=function(){this.mouseIsDown=true;this.value.v=this.mouseIsDown;this.value.updateBind();this.draw()};this.Button.prototype.mouseUp=function(){this.value.updateBind(true);this.mouseIsDown=false;this.value.v=this.mouseIsDown;this.draw()};this.TrackPad=function(a){Base.call(this,a);this.name="TrackPad";
+this.width=a.width||100;this.height=a.height||60;this.min=a.min||-1;this.max=a.max||1;this.size=a.size||6;this.range=this.max-this.min;var b=(this.range/2-this.max)*-1;this.value1=new Value(a.value1||b);this.value2=new Value(a.value2||b);this.draw()};this.TrackPad.prototype=new Base;this.TrackPad.prototype.constructor=this.TrackPad;this.TrackPad.prototype.draw=function(){if(this.value1.v<this.min)this.value1.v=this.min;if(this.value1.v>this.max)this.value1.v=this.max;if(this.value2.v<this.min)this.value2.v=
+this.min;if(this.value2.v>this.max)this.value2.v=this.max;a.clearRect(this.x-1,this.y,this.width,this.height+14);a.strokeStyle=g;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);a.fillStyle=j;a.fillRect(this.x,this.y,this.width,this.height);a.strokeStyle=p;a.lineWidth=1;a.beginPath();a.moveTo(this.x,0.5+this.y+this.height/2);a.lineTo(this.x+this.width,0.5+this.y+this.height/2);a.closePath();a.stroke();a.beginPath();a.moveTo(0.5+this.x+this.width/2,this.y);a.lineTo(0.5+this.x+this.width/
+2,this.y+this.height);a.closePath();a.stroke();var c=this.getXPositionFromValue(),b=this.getYPositionFromValue(),d=this.size/2;c<d&&(c=d);c>this.width-d&&(c=this.width-d);b<d&&(b=d);b>this.height-d&&(b=this.height-d);a.fillStyle=p;a.fillRect(this.x+c-d,this.y+b-d,this.size,this.size);a.fillStyle=g;a.font="8px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText("X: "+this.value1.v.toFixed(2)+" Y: "+this.value2.v.toFixed(2),this.x,this.y+this.height+9)};this.TrackPad.prototype.setXValueFromPosition=
+function(a){this.value1.v=this.range/this.width*a-(this.range-this.max)};this.TrackPad.prototype.setYValueFromPosition=function(a){this.value2.v=this.range/this.height*a-(this.range-this.max)};this.TrackPad.prototype.getXPositionFromValue=function(){var a=this.width/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return a*(this.value1.v+b)};this.TrackPad.prototype.getYPositionFromValue=function(){var a=this.height/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return a*(this.value2.v+b)};
+this.TrackPad.prototype.mouseDown=function(a,b){this.setXValueFromPosition(a);this.setYValueFromPosition(b);this.draw();this.value1.updateBind();this.value2.updateBind()};this.TrackPad.prototype.mouseUp=function(){this.value1.updateBind(true);this.value2.updateBind(true)};this.ColorPicker2=function(a){Base.call(this,a);this.name="ColorPicker2";this.framewidth=a.framewidth||10;this.frameheight=a.frameheight||10;this.colorwidth=a.width||100;this.colorheight=a.height||30;this.width=this.framewidth;this.height=
+this.frameheight;this.r=a.r||255;this.g=a.g||255;this.b=a.b||255;this.oldColor={r:this.r,g:this.g,b:this.b};this.mousehack=this.open=false;this.lastTime=0;this.hex=a.hex||i("rgb("+this.r+","+this.g+","+this.b+")");this.value=new Value(this.hex);this.draw()};this.ColorPicker2.prototype=new Base;this.ColorPicker2.prototype.constructor=this.ColorPicker2;this.ColorPicker2.prototype.draw=function(){a.clearRect(this.x-1,this.y-1,this.framewidth+60,this.height+3);a.clearRect(this.x-1,this.y+this.frameheight,
+this.colorwidth+2,this.colorheight+3);a.strokeStyle=g;a.lineWidth=2;a.strokeRect(this.x,this.y,this.framewidth,this.frameheight);a.fillStyle="#"+this.value.v;a.fillRect(this.x,this.y,this.framewidth,this.frameheight);var c=Math.round(Math.max(0,this.frameheight-11)*0.5);a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText("#"+this.value.v.toUpperCase(),this.x+this.framewidth+4,this.y+9+c);if(this.open){a.strokeStyle=g;a.lineWidth=2;a.strokeRect(this.x,this.y+
+this.frameheight+1,this.colorwidth,this.colorheight);var c=a.createLinearGradient(this.x,this.y+this.frameheight+1,this.x+this.colorwidth,this.y+this.frameheight+1),b=1/6,d=0;c.addColorStop(b*d++,"rgb(255, 0, 0)");c.addColorStop(b*d++,"rgb(255, 255, 0)");c.addColorStop(b*d++,"rgb(0, 255, 0)");c.addColorStop(b*d++,"rgb(0, 255, 255)");c.addColorStop(b*d++,"rgb(0, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 0)");a.fillStyle=c;a.fillRect(this.x,this.y+this.frameheight+
+1,this.colorwidth,this.colorheight);b=1/(this.colorheight/2);c=a.createLinearGradient(this.x,this.y+this.frameheight+1,this.x,this.y+this.frameheight+1+this.colorheight/2);c.addColorStop(0,"rgba(255, 255, 255, 1)");c.addColorStop(b,"rgba(255, 255, 255, 1)");c.addColorStop(1,"rgba(255, 255, 255, 0)");a.fillStyle=c;a.fillRect(this.x,this.y+this.frameheight+1,this.colorwidth,this.colorheight/2);c=a.createLinearGradient(this.x,this.y+this.frameheight+1+this.colorheight/2,this.x,this.y+this.frameheight+
+1+this.colorheight);c.addColorStop(0,"rgba(0, 0, 0, 0)");c.addColorStop(1-b,"rgba(0, 0, 0, 1)");c.addColorStop(1,"rgba(0, 0, 0, 1)");a.fillStyle=c;a.fillRect(this.x,this.y+this.frameheight+1+this.colorheight/2,this.colorwidth,this.colorheight/2)}};this.ColorPicker2.prototype.mouseDown=function(a,b){if(!((new Date).getTime()-this.lastTime<200)){if(this.open&&a>0&&a<this.colorwidth-1&&b>this.frameheight&&b<this.frameheight+this.colorheight){s&&this.mouseMove(a,b);this.oldColor={r:this.r,g:this.g,b:this.b}}if(!this.open&&
+b<this.frameheight)this.open=true;else if(this.open)this.open=false;if(this.open){this.width=this.colorwidth;this.height=this.frameheight+this.colorheight}else{this.width=this.framewidth;this.height=this.frameheight}this.draw();this.mousehack=false;this.lastTime=(new Date).getTime();if(!this.open)for(var d=0;d<l.length;++d)l[d].draw()}};this.ColorPicker2.prototype.setOldColor=function(){this.r=this.oldColor.r;this.g=this.oldColor.g;this.b=this.oldColor.b;this.hex=i("rgb("+this.r+","+this.g+","+this.b+
+")")};this.ColorPicker2.prototype.mouseMove=function(c,b){var d=false;if(c<0){c=0;this.setOldColor();d=true}if(c>this.colorwidth-1){c=this.colorwidth-1;this.setOldColor();d=true}if(b<=this.frameheight){b=this.frameheight;this.setOldColor();d=true}if(b>this.frameheight+this.colorheight){b=this.frameheight+this.colorheight;this.setOldColor();d=true}if(!d){d=a.getImageData(this.x+c,this.y+b,1,1).data;this.r=d[0];this.g=d[1];this.b=d[2];this.hex=i("rgb("+this.r+","+this.g+","+this.b+")")}this.value.v=
+this.hex;this.value.updateBind();this.draw()};this.ColorPicker2.prototype.mouseUp=function(a){this.open||(n[a]=null);if(this.mousehack){this.setOldColor();this.mouseDown();n[a]=null}this.mousehack=true;this.value.updateBind(true)};this.ColorPicker=function(a){Base.call(this,a);this.name="ColorPicker";this.framewidth=a.framewidth||10;this.frameheight=a.frameheight||10;this.width=a.width||100;this.height=a.height||20;this.r=a.r||255;this.g=a.g||255;this.b=a.b||255;this.hex=a.hex||i("rgb("+this.r+","+
+this.g+","+this.b+")");this.value=new Value(this.hex);this.draw()};this.ColorPicker.prototype=new Base;this.ColorPicker.prototype.constructor=this.ColorPicker;this.ColorPicker.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height+this.frameheight+4);a.strokeStyle=g;a.lineWidth=2;a.strokeRect(this.x,this.y,this.width,this.height);var c=a.createLinearGradient(this.x,this.y,this.x+this.width,this.y),b=1/6,d=0;c.addColorStop(b*d++,"rgb(255, 0, 0)");c.addColorStop(b*d++,"rgb(255, 255, 0)");
+c.addColorStop(b*d++,"rgb(0, 255, 0)");c.addColorStop(b*d++,"rgb(0, 255, 255)");c.addColorStop(b*d++,"rgb(0, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 255)");c.addColorStop(b*d++,"rgb(255, 0, 0)");a.fillStyle=c;a.fillRect(this.x,this.y,this.width,this.height);b=1/(this.height/2);c=a.createLinearGradient(this.x,this.y,this.x,this.y+this.height/2);c.addColorStop(0,"rgba(255, 255, 255, 1)");c.addColorStop(b,"rgba(255, 255, 255, 1)");c.addColorStop(1,"rgba(255, 255, 255, 0)");a.fillStyle=c;a.fillRect(this.x,
+this.y,this.width,this.height/2);c=a.createLinearGradient(this.x,this.y+this.height/2,this.x,this.y+this.height);c.addColorStop(0,"rgba(0, 0, 0, 0)");c.addColorStop(1-b,"rgba(0, 0, 0, 1)");c.addColorStop(1,"rgba(0, 0, 0, 1)");a.fillStyle=c;a.fillRect(this.x,this.y+this.height/2,this.width,this.height/2);a.strokeStyle=g;a.lineWidth=2;a.strokeRect(this.x,this.y+this.height+4,this.framewidth,this.frameheight);a.fillStyle="#"+this.value.v;a.fillRect(this.x,this.y+this.height+4,this.framewidth,this.frameheight);
+c=Math.round(Math.max(0,this.frameheight-10)*0.5);a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText("#"+this.value.v.toUpperCase(),this.x+this.framewidth+4,this.y+this.height+13+c)};this.ColorPicker.prototype.mouseDown=function(c,b){c<0&&(c=0);c>this.width-1&&(c=this.width-1);b<0&&(b=0);b>this.height-1&&(b=this.height-1);var d=a.getImageData(this.x+c,this.y+b,1,1).data;this.r=d[0];this.g=d[1];this.b=d[2];this.hex=i("rgb("+this.r+","+this.g+","+this.b+")");
+this.value.v=this.hex;this.value.updateBind();this.draw()};this.ColorPicker.prototype.mouseUp=function(){this.value.updateBind(true)};this.Knob=function(a){Base.call(this,a);this.name="Knob";this.radius=a.radius||15;this.centerx=this.x+this.radius;this.centery=this.y+this.radius;this.width=this.radius*2;this.height=this.radius*2;this.min=a.min||0;this.max=a.max||100;this.range=this.max-this.min;this.value=new Value(a.value||0);this.rotationValue=this.getRotationValue();this.lastMouseY=this.lastMouseX=
+null;this.decimals=a.decimals||0;this.draw()};this.Knob.prototype=new Base;this.Knob.prototype.constructor=this.Knob;this.Knob.prototype.getRotationValue=function(){return(this.value.v-this.min)*(1/this.range)};this.Knob.prototype.draw=function(){if(this.value.v<this.min)this.value.v=this.min;if(this.value.v>this.max)this.value.v=this.max;a.clearRect(this.x-4,this.y-4,this.width+8,this.height+13);a.fillStyle=g;a.beginPath();a.arc(this.centerx,this.centery,this.radius,0,Math.PI*2,false);a.closePath();
+a.fill();var c=Math.PI+Math.PI/1.25,b=Math.PI-Math.PI/1.25,d=(c-b)/this.radius;a.strokeStyle=g;a.lineWidth=0.5;for(var e=0;e<=this.radius;++e){var f=this.centerx+Math.sin(c-d*e)*(this.radius+1),h=this.centery+Math.cos(c-d*e)*(this.radius+1),i=this.centerx+Math.sin(c-d*e)*(this.radius+4),k=this.centery+Math.cos(c-d*e)*(this.radius+4);a.beginPath();a.moveTo(f,h);a.lineTo(i,k);a.closePath();a.stroke()}this.rotationValue=this.getRotationValue();d=(c-b)*this.rotationValue;b=this.centerx+Math.sin(c-d)*
+this.radius;c=this.centery+Math.cos(c-d)*this.radius;a.strokeStyle=j;a.lineWidth=2;a.beginPath();a.moveTo(this.centerx,this.centery);a.lineTo(b,c);a.closePath();a.stroke();a.fillStyle=g;a.font="8px Arial";a.textBaseline="alphabetic";a.textAlign="center";a.fillText(this.value.v.toFixed(this.decimals),this.centerx,this.centery+this.radius+7)};this.Knob.prototype.mouseDown=function(a,b){if(this.lastMouseX!=null){var d=(a-this.lastMouseX-(b-this.lastMouseY))/100,d=d*this.range;this.value.v=this.value.v+
+d;this.draw();this.value.updateBind()}this.lastMouseX=a;this.lastMouseY=b};this.Knob.prototype.mouseUp=function(){this.lastMouseY=this.lastMouseX=null;this.value.updateBind(true)};this.CheckBox=function(a){Base.call(this,a);this.name="CheckBox";this.text=a.text||"";this.value=new Value(a.selected||false);this.width=this.fullWidth=a.width||10;this.height=a.height||10;this.draw()};this.CheckBox.prototype=new Base;this.CheckBox.prototype.constructor=this.CheckBox;this.CheckBox.prototype.draw=function(){a.clearRect(this.x,
+this.y,this.width,this.height);a.fillStyle=g;a.fillRect(this.x,this.y,this.fullWidth,this.height);a.fillStyle=this.value.v?j:g;a.fillRect(this.x+2,this.y+2,this.fullWidth-4,this.height-4);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.text,this.x+this.fullWidth+2,this.y+9+c);this.width=this.fullWidth+a.measureText(this.text).width+3};this.CheckBox.prototype.mouseDown=function(){this.value.v=this.value.v?
+false:true;this.value.updateBind();this.draw()};this.CheckBox.prototype.mouseUp=function(){this.value.updateBind(true)};this.RadioButtonGroup=function(){this.name="RadioButtonGroup";this.array=[];this.value=new Value([])};this.RadioButtonGroup.prototype.add=function(a){this.array.push(a);this.value.v.push(a.value.v);a.group=this};this.RadioButtonGroup.prototype.clear=function(a){for(var b=0;b<this.array.length;++b){var d=this.array[b];if(d==a)this.value.v[b]=true;else{this.value.v[b]=false;d.value.v=
+false;d.value.updateBind();d.draw()}}this.value.updateBind()};this.RadioButton=function(a){Base.call(this,a);this.name="RadioButton";this.group=null;this.text=a.text||"";this.value=new Value(a.selected||false);this.width=this.fullWidth=a.width||18;this.height=a.height||10;this.draw()};this.RadioButton.prototype=new Base;this.RadioButton.prototype.constructor=this.RadioButton;this.RadioButton.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=g;a.fillRect(this.x,
+this.y,this.fullWidth,this.height);if(this.value.v){a.fillStyle=j;a.fillRect(this.x+this.fullWidth/2+1,this.y+2,this.fullWidth/2-3,this.height-4)}else{a.fillStyle=p;a.fillRect(this.x+2,this.y+2,this.fullWidth/2-3,this.height-4)}var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.text,this.x+this.fullWidth+2,this.y+9+c);this.width=this.fullWidth+a.measureText(this.text).width+3};this.RadioButton.prototype.mouseDown=
+function(){this.group.clear(this);if(!this.value.v)this.value.v=true;this.value.updateBind();this.draw()};this.RadioButton.prototype.mouseUp=function(){this.value.updateBind(true)};this.RadioButton.prototype.mouseMove=function(){};this.HSlider=function(a){Base.call(this,a);this.name="HSlider";this.mouseIsOver=false;this.value=new Value(a.value||0);this.width=a.width||100;this.height=a.height||10;this.min=a.min||0;this.max=a.max||this.width;this.range=this.max-this.min;this.decimals=a.decimals||0;
+this.draw()};this.HSlider.prototype=new Base;this.HSlider.prototype.constructor=this.HSlider;this.HSlider.prototype.draw=function(){if(this.value.v>this.max)this.value.v=this.max;if(this.value.v<this.min)this.value.v=this.min;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=g;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.height-11)*0.5);a.fillStyle=j;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v.toFixed(this.decimals),
+this.x,this.y+9+c);var b=this.getPositionFromValue();a.fillStyle=j;a.fillRect(this.x,this.y,b,this.height);a.save();a.fillStyle="transparent";a.beginPath();a.rect(this.x,this.y,b,this.height);a.clip();a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v.toFixed(this.decimals),this.x,this.y+9+c);a.restore()};this.HSlider.prototype.setValueFromPosition=function(a){this.value.v=this.range/this.width*a-(this.range-this.max)};this.HSlider.prototype.getPositionFromValue=
+function(){var a=this.width/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return a*(this.value.v+b)};this.HSlider.prototype.mouseDown=function(a){this.setValueFromPosition(a);this.draw();this.value.updateBind()};this.HSlider.prototype.mouseUp=function(){this.value.updateBind(true)};this.VSlider=function(a){Base.call(this,a);this.name="VSlider";this.mouseIsOver=false;this.value=new Value(a.value||0);this.width=a.width||10;this.height=a.height||100;this.min=a.min||0;this.max=a.max||this.height;
+this.decimals=a.decimals||0;this.range=this.max-this.min;this.draw()};this.VSlider.prototype=new Base;this.VSlider.prototype.constructor=this.VSlider;this.VSlider.prototype.draw=function(){if(this.value.v>this.max)this.value.v=this.max;if(this.value.v<this.min)this.value.v=this.min;a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=g;a.fillRect(this.x,this.y,this.width,this.height);var c=Math.round(Math.max(0,this.width-11)*0.5);a.save();a.translate(this.x+9+c,this.y+this.height-1);a.rotate(-Math.PI/
+2);a.fillStyle=j;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v.toFixed(this.decimals),0,0);a.restore();var b=this.getPositionFromValue();a.fillStyle=j;a.fillRect(this.x,this.y+b,this.width,this.height-b);a.save();a.translate(this.x+9+c,this.y+this.height-1);a.rotate(-Math.PI/2);a.fillStyle="transparent";a.beginPath();a.rect(-1,-this.width+1,this.height-b,this.width);a.clip();a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";
+a.fillText(this.value.v.toFixed(this.decimals),0,0);a.restore()};this.VSlider.prototype.setValueFromPosition=function(a){this.value.v=this.range-this.range/this.height*a-(this.range-this.max)};this.VSlider.prototype.getPositionFromValue=function(){var a=this.height/this.range,b=Math.abs(this.min);this.min>0&&(b=b*-1);return this.height-a*(this.value.v+b)};this.VSlider.prototype.mouseDown=function(a,b){this.setValueFromPosition(b);this.draw();this.value.updateBind()};this.VSlider.prototype.mouseUp=
+function(){this.value.updateBind(true)};this.Joystick=function(a){Base.call(this,a);this.name="Joystick";this.value1=new Value(0);this.value2=new Value(0);this.radius=a.radius||50;this.innerRadius=a.innerRadius||this.radius*0.65;this.centerx=this.x+this.radius;this.centery=this.y+this.radius;this.width=this.radius*2;this.height=this.radius*2;this.sticky=this.stickx=0;this.laststicky=this.laststickx=-1;this.maxDistance=this.radius-this.innerRadius-5;this.mouseIsDown=false;this.draw()};this.Joystick.prototype=
+new Base;this.Joystick.prototype.constructor=this.Joystick;this.Joystick.prototype.draw=function(c){if(!this.mouseIsDown){this.stickx=this.stickx+(0-this.stickx)/3;this.sticky=this.sticky+(0-this.sticky)/3}if(!(this.stickx.toFixed(2)==this.laststickx.toFixed(2)&&this.sticky.toFixed(2)==this.laststicky.toFixed(2)&&c)){this.value1.v=this.stickx/this.maxDistance;this.value2.v=this.sticky/this.maxDistance;a.clearRect(this.x-2,this.y-2,this.width+14,this.height+14);c=a.createRadialGradient(this.centerx,
+this.centery,this.radius+5,this.centerx-7,this.centery-7,5);c.addColorStop(0,p);c.addColorStop(0.2,j);c.addColorStop(1,p);a.fillStyle=c;a.beginPath();a.arc(this.centerx,this.centery,this.radius,0,Math.PI*2,false);a.closePath();a.fill();var b=(1-this.value1.v)*5,d=(1-this.value2.v)*5,c=a.createRadialGradient(this.centerx+this.stickx+b,this.centery+this.sticky+d,this.innerRadius+10,this.centerx+this.stickx+b,this.centery+this.sticky+d,1);c.addColorStop(0,"rgba(0,0,0,0.00001)");c.addColorStop(1,"rgba(0,0,0,1)");
+a.fillStyle=c;a.beginPath();a.arc(this.centerx+this.stickx+b,this.centery+this.sticky+d,this.innerRadius+10,0,Math.PI*2,false);a.closePath();a.fill();c=a.createLinearGradient(this.centerx+this.stickx-this.innerRadius,this.centery+this.sticky-this.innerRadius,this.centerx+this.stickx-this.innerRadius,this.centery+this.sticky+this.innerRadius);c.addColorStop(0,j);c.addColorStop(1,p);a.fillStyle=c;a.beginPath();a.arc(this.centerx+this.stickx,this.centery+this.sticky,this.innerRadius,0,Math.PI*2,false);
+a.closePath();a.fill();c=a.createRadialGradient(this.centerx+this.stickx,this.centery+this.sticky,this.radius,this.centerx+this.stickx,this.centery+this.sticky,1);c.addColorStop(0,p);c.addColorStop(1,j);a.fillStyle=c;a.beginPath();a.arc(this.centerx+this.stickx,this.centery+this.sticky,this.innerRadius-6,0,Math.PI*2,false);a.closePath();a.fill();this.laststickx=this.stickx;this.laststicky=this.sticky}};this.Joystick.prototype.mouseDown=function(a,b){this.mouseIsDown=true;this.stickx=a-this.radius;
+this.sticky=b-this.radius;if(Math.sqrt(this.stickx*this.stickx+this.sticky*this.sticky)>this.maxDistance){var d=Math.atan2(this.stickx,this.sticky);this.stickx=Math.sin(d)*this.maxDistance;this.sticky=Math.cos(d)*this.maxDistance}this.draw();this.value1.updateBind();this.value2.updateBind()};this.Joystick.prototype.mouseUp=function(){this.mouseIsDown=false;this.value1.updateBind(true);this.value2.updateBind(true)};this.Label=function(a){Base.call(this,a);this.name="Label";this.group=null;this.value=
+new Value(a.text||"");this.width=0;this.height=13;this.draw()};this.Label.prototype=new Base;this.Label.prototype.constructor=this.Label;this.Label.prototype.draw=function(){a.clearRect(this.x,this.y,this.width,this.height);a.fillStyle=g;a.font="11px Arial";a.textBaseline="alphabetic";a.textAlign="left";a.fillText(this.value.v,this.x,this.y+9);this.width=a.measureText(this.value.v).width+3};this.Label.prototype.mouseDown=function(){};this.Label.prototype.mouseUp=function(){};this.update=function(){t=
+Date.now();for(var a=0;a<l.length;++a){var b=l[a];if(b.name=="Joystick")b.draw(true);else{if(b.value&&(b.value.receiver||b.value.both)&&t>b.lastUpdate+b.updateInterval){b.value.updateBind();b.draw();b.lastUpdate=t}if(b.value1){var d=false;if((b.value1.receiver||b.value1.both)&&t>b.lastUpdate+b.updateInterval){b.value1.updateBind();d=true}if((b.value2.receiver||b.value2.both)&&t>b.lastUpdate+b.updateInterval){b.value2.updateBind();d=true}if(d){b.draw();b.lastUpdate=t}}}}};return{getDomElement:function(){return k},
+getContext:function(){return a},HSlider:this.HSlider,VSlider:this.VSlider,Label:this.Label,RadioButton:this.RadioButton,RadioButtonGroup:this.RadioButtonGroup,CheckBox:this.CheckBox,Knob:this.Knob,ColorPicker:this.ColorPicker,ColorPicker2:this.ColorPicker2,TrackPad:this.TrackPad,Button:this.Button,ImageButton:this.ImageButton,Graph:this.Graph,Stepper:this.Stepper,InputText:this.InputText,DropDown:this.DropDown,Matrix:this.Matrix,RangeSlider:this.RangeSlider,Joystick:this.Joystick,update:this.update}};
+HTMLCanvasElement.prototype.relMouseCoords=function(e){var f=0,h=0,i=0,k=0,i=this;do f+=i.offsetLeft,h+=i.offsetTop;while(i=i.offsetParent);i=e.pageX-f;k=e.pageY-h;i=Math.round(i*(this.width/this.offsetWidth));k=Math.round(k*(this.height/this.offsetHeight));return{x:i,y:k}}});"object"==typeof exports?module.exports=f("xgui"):"function"==typeof define&&define.amd?define(function(){return f("xgui")}):window.xgui=f("xgui")})();
diff --git a/examples/testbed.html b/examples/testbed.html
index 055e59f..52a225f 100644
--- a/examples/testbed.html
+++ b/examples/testbed.html
@@ -11,14 +11,14 @@
 			background:#cdcdcd;
 		}
 	</style>
-		
-	<script type="application/javascript" src="../src/xgui.js"></script>
-	<!-- <script type="application/javascript" src="../build/xgui.min.js"></script> -->
+
+	<script type="application/javascript" src="../dist/xgui.js"></script>
+	<!-- <script type="application/javascript" src="../dist/xgui.min.js"></script> -->
 
  </HEAD>
 
 <body>
-	
+
 	<script>
 
 		// xgui test
@@ -29,7 +29,7 @@
 
 		// add to dom
 		document.body.appendChild( gui.getDomElement() );
-		
+
 		// bunch of test elements
 
 		// HSlider
@@ -105,7 +105,7 @@
 			var i1 = new gui.ImageButton( {x: 330, y: 218, image: this } );
 		};
 		image1.src = "assets/flag_en.jpg";
-		
+
 		var image2 = new Image();
 		image2.onload = function () {
 			var i2 = new gui.ImageButton( {x: 350, y: 218, image: this } );
@@ -154,7 +154,7 @@
 		g0.value.bind(testObj1, "a");
 		g0.value.receiver = true; // receiver = true, means the value is updated from the bound object/property and not the other way around.
 		g0.updateInterval = 100; // How many ms between updates, 1000 is One second for example.
-		
+
 		l0.value.bind(testObj1, "b");
 		l0.value.receiver = true;
 		l0.updateInterval = 40;
@@ -174,7 +174,7 @@
 			//console.log(testObj0.x, testObj0.y);
 
 		}
-	
+
 	</script>
 
 	Testbed for <a href="https://github.com/oosmoxiecode/xgui.js">xgui.js</a>.
diff --git a/examples/testbed_component.html b/examples/testbed_component.html
new file mode 100644
index 0000000..e7b8e39
--- /dev/null
+++ b/examples/testbed_component.html
@@ -0,0 +1,184 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
+<HTML>
+ <HEAD>
+  <TITLE>xgui.js testbed</TITLE>
+    <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+  <meta name="Author" content="oosmoxiecode">
+  <meta name="Keywords" content="xgui.js testbed">
+  <style type="text/css">
+    body {
+      background:#cdcdcd;
+    }
+  </style>
+
+  <script type="application/javascript" src="../build/build.js"></script>
+
+ </HEAD>
+
+<body>
+
+  <script>
+
+    var xgui = require('xgui');
+
+    // xgui test
+    var gui = new xgui( {width: 640, height: 260} );
+    // you can change colors like this:
+    //var gui = new xgui( {width: 640, height: 260, backgroundColor: "rgb(65, 104, 137)", frontColor: "rgb(153, 193, 226)", dimColor: "rgb(90, 137, 177)"} );
+    //var gui = new xgui( {width: 640, height: 260, backgroundColor: "#000000", frontColor: "#ffffff", dimColor: "#333333"} );
+
+    // add to dom
+    document.body.appendChild( gui.getDomElement() );
+
+    // bunch of test elements
+
+    // HSlider
+    var h0 = new gui.HSlider( {x:10, y:20, value: 20, min:20, max:100} );
+    var h1 = new gui.HSlider( {x:10, y:40, value: 80} );
+
+    // Label
+    var l0 = new gui.Label( {x: 10, y: 58, text: "Generic Label"} );
+
+    // RadioButton
+    var radioGroup = new gui.RadioButtonGroup();
+    radioGroup.add( new gui.RadioButton( {x: 140, y: 20, text: "Radio(group 1) - 1", selected: false } ) );
+    radioGroup.add( new gui.RadioButton( {x: 140, y: 35, text: "Radio(group 1) - 2", selected: true } ) );
+    radioGroup.add( new gui.RadioButton( {x: 140, y: 50, text: "Radio(group 1) - 3", selected: false } ) );
+
+    var radioGroup2 = new gui.RadioButtonGroup();
+    radioGroup2.add( new gui.RadioButton( {x: 280, y: 20, text: "Radio(group 2) - 1", selected: false } ) );
+    radioGroup2.add( new gui.RadioButton( {x: 280, y: 35, text: "Radio(group 2) - 2", selected: false } ) );
+
+    // CheckBox
+    var c0 = new gui.CheckBox( {x: 10, y: 80, text: "Checkbox A" } );
+    var c1 = new gui.CheckBox( {x: 10, y: 95, text: "Checkbox B", selected: true } );
+    var c2 = new gui.CheckBox( {x: 10, y: 110, text: "Checkbox C" } );
+
+    // Knob
+    var k0 = new gui.Knob( {x: 10, y: 140, radius: 20, value: -80, min: -200, max: 200 } );
+    var k1 = new gui.Knob( {x: 65, y: 150, radius: 10, value: 0.75, min: 0, max: 1, decimals: 2 } );
+    var k2 = new gui.Knob( {x: 100, y: 150, radius: 10, value: 0.35, min: 0, max: 1, decimals: 2 } );
+
+    // VSlider
+    var v0 = new gui.VSlider( {x: 140, y: 80, value: 50} );
+    var v1 = new gui.VSlider( {x: 160, y: 80, value: 20} );
+    var v2 = new gui.VSlider( {x: 180, y: 80, value: 80, min:20, max:100} );
+    var v3 = new gui.VSlider( {x: 200, y: 80, value: 60, min: -1150, max: 300} );
+
+    // ColorPicker
+    var cp0 = new gui.ColorPicker( {x: 230, y: 80 } );
+
+    // TrackPad
+    var tp0 = new gui.TrackPad( {x: 350, y: 80, min: 10, max: 100, value1: 20, value2: 40 } );
+
+    // Buttom
+    var b0 = new gui.Button( {x: 420, y: 20, text: "Test Button" } );
+    var b1 = new gui.Button( {x: 420, y: 40, text: "Another Button", height: 30 } );
+
+    // HSlider
+    var h2 = new gui.HSlider( {x:10, y:200, value: 240, min: 0, max: 255} );
+    var h3 = new gui.HSlider( {x:10, y:220, value: 250, min: -1000, max: 1000} );
+
+    // ColorPicker2
+    var cp1 = new gui.ColorPicker2( {x: 140, y: 200 } );
+    var cp2 = new gui.ColorPicker2( {x: 140, y: 220 } );
+
+    // Graph
+    var g0 = new gui.Graph( {x: 230, y: 140, max: 100, min: -100 } );
+
+    // Stepper
+    var s0 = new gui.Stepper( {x: 230, y: 200, value: 5500 } );
+    var s1 = new gui.Stepper( {x: 230, y: 212, value: -2560 } );
+    var s2 = new gui.Stepper( {x: 230, y: 224, value: 390 } );
+/*
+    // ImageButton
+    var l1 = new gui.Label( {x: 310, y: 200, text: "ImageButton's" } );
+
+    var image0 = new Image();
+    image0.onload = function () {
+      var i0 = new gui.ImageButton( {x: 310, y: 218, image: this } );
+    };
+    image0.src = "assets/flag_sv.jpg";
+
+    var image1 = new Image();
+    image1.onload = function () {
+      var i1 = new gui.ImageButton( {x: 330, y: 218, image: this } );
+    };
+    image1.src = "assets/flag_en.jpg";
+
+    var image2 = new Image();
+    image2.onload = function () {
+      var i2 = new gui.ImageButton( {x: 350, y: 218, image: this } );
+    };
+    image2.src = "assets/flag_fr.jpg";
+*/
+    // InputText
+    var it0 = new gui.InputText( {x: 470, y: 80, text: "Input field 1" } );
+    var it1 = new gui.InputText( {x: 470, y: 103, text: "Input field 2" } );
+
+    // DropDown
+    var dd0 = new gui.DropDown( {x: 470, y: 126, values: ["v0","v1","v2","v3","v4"], texts: ["Value 0","Value 1","Value 2","Value 3", "Value 4"] } );
+    var dd1 = new gui.DropDown( {x: 350, y: 166, values: ["Dropdown 2","Value 0","Value 1","Value 2","Value 3","Value 4","Value 5","Value 6"] } );
+
+    // Matrix
+    var m0 = new gui.Matrix( {x: 470, y: 166} );
+    var m1 = new gui.Matrix( {x: 530, y: 166, w: 3, h: 3, array: [ [1,0,0],[0,1,0],[0,0,1] ]} );
+
+    // RangeSlider
+    var rs0 = new gui.RangeSlider( {x:400, y:224, min:20} );
+    var rs1 = new gui.RangeSlider( {x:520, y:224, value1:-20, value2:20, min:-400, max:100, decimals: 0} );
+
+
+    // Set up some stuff to test with
+    var testObj0 = {x: 20, y: 80};
+    var testObj1 = {a: 50, b: 75};
+    var test = 0;
+
+    function testFunction (value) {
+      console.log("testFunction called", value);
+    }
+
+    // Bind some values (basic)
+    h0.value.bind(testObj0, "x");
+    h1.value.bind(testObj0, "y");
+
+    // You could also bind several properties, like: someSlider.value.bind(scale, "x", "y", "z");
+
+    // You can also bind values to a function, like
+    //h0.value.bind(testFunction);
+
+    // Note. some elements have two value's. Like RangeSlider and TrackPad, those are called 'value1' and 'value2' as opposed to the usual 'value'.
+
+    // Some values can also be "receiver's", it means if you change the value by code it can update the gui-element at a given interval.
+    // Graph is a typical element meant to be a receiver, for example
+    g0.value.bind(testObj1, "a");
+    g0.value.receiver = true; // receiver = true, means the value is updated from the bound object/property and not the other way around.
+    g0.updateInterval = 100; // How many ms between updates, 1000 is One second for example.
+
+    l0.value.bind(testObj1, "b");
+    l0.value.receiver = true;
+    l0.updateInterval = 40;
+
+    // Run a dummy update
+    setInterval(tempUpdate, 1000/60);
+
+    function tempUpdate() {
+
+      testObj1.a = Math.sin(test+=0.03)*75; // sin wave for the Graph
+      testObj1.b = "Label with value: " + Math.round(testObj1.a); // number for the Label
+
+      // If you have any receiver's you must 'update()' xgui.
+      gui.update();
+
+      // test the binds
+      //console.log(testObj0.x, testObj0.y);
+
+    }
+
+  </script>
+
+  Testbed for <a href="https://github.com/oosmoxiecode/xgui.js">xgui.js</a>.
+
+</body>
+</HTML>
diff --git a/examples/testbed_touch.html b/examples/testbed_touch.html
index d47701b..d3b6671 100644
--- a/examples/testbed_touch.html
+++ b/examples/testbed_touch.html
@@ -11,14 +11,14 @@
 			background:#cdcdcd;
 		}
 	</style>
-		
-	<script type="application/javascript" src="../src/xgui.js"></script>
-	<!-- <script type="application/javascript" src="../build/xgui.min.js"></script> -->
+
+	<script type="application/javascript" src="../dist/xgui.js"></script>
+	<!-- <script type="application/javascript" src="../dist/xgui.min.js"></script> -->
 
  </HEAD>
 
 <body>
-	
+
 	<script>
 
 		// xgui test
@@ -29,7 +29,7 @@
 
 		// add to dom
 		document.body.appendChild( gui.getDomElement() );
-		
+
 		// bunch of test elements
 
 		// HSlider
@@ -97,8 +97,8 @@
 		var rs1 = new gui.RangeSlider( {x:10, y:280, value1:-20, value2:20, min:-400, max:100, decimals: 0, width:160, height:20} );
 
 		// Joystick // this one needs 'update' to fallback to center on release
-		var joy0 = new gui.Joystick( {x:185, y:250} );		
-		var joy1 = new gui.Joystick( {x:345, y:250} );		
+		var joy0 = new gui.Joystick( {x:185, y:250} );
+		var joy1 = new gui.Joystick( {x:345, y:250} );
 
 		// Set up some stuff to test with
 		var testObj0 = {x: 20, y: 80};
@@ -125,7 +125,7 @@
 		g0.value.bind(testObj1, "a");
 		g0.value.receiver = true; // receiver = true, means the value is updated from the bound object/property and not the other way around.
 		g0.updateInterval = 100; // How many ms between updates, 1000 is One second for example.
-		
+
 		l0.value.bind(testObj1, "b");
 		l0.value.receiver = true;
 		l0.updateInterval = 40;
@@ -146,7 +146,7 @@
 			//console.log(testObj0.x, testObj0.y);
 
 		}
-	
+
 	</script>
 
 	Testbed touch for <a href="https://github.com/oosmoxiecode/xgui.js">xgui.js</a>.
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..2c777a6
--- /dev/null
+++ b/index.js
@@ -0,0 +1 @@
+module.exports = require('./src/xgui')
\ No newline at end of file
diff --git a/src/xgui.js b/src/xgui.js
index 84164e8..cf67de6 100644
--- a/src/xgui.js
+++ b/src/xgui.js
@@ -2012,6 +2012,11 @@ var xgui = function ( p ) {
 
 };
 
+/*
+ * Exports
+ */
+
+module.exports = xgui;
 
 /*
  * General
diff --git a/utils/builder.py b/utils/builder.py
index b15f5e8..37f6054 100644
--- a/utils/builder.py
+++ b/utils/builder.py
@@ -1,8 +1,8 @@
 import os
 
 rev = 1
-source = '../src/xgui.js'
-build = '../build/xgui.min.js'
+source = '../dist/xgui.js'
+build = '../dist/xgui.min.js'
 header = '// xgui.js r' + str( rev ) + ' - https://github.com/oosmoxiecode/xgui.js\n'
 
 os.system( 'java -jar compiler/compiler.jar --language_in=ECMASCRIPT5 --js ' + source + ' --js_output_file ' + build )