diff --git a/scripts/javascript/lib/widgetlibrary/osc_controller_interface.js b/scripts/javascript/lib/widgetlibrary/osc_controller_interface.js
new file mode 100644
index 00000000..de6659ab
--- /dev/null
+++ b/scripts/javascript/lib/widgetlibrary/osc_controller_interface.js
@@ -0,0 +1,149 @@
+// OSC controller interface
+// buZz, Puik. started aug. 2009
+
+// ment to do :
+//  - widgets
+//  - editing of interface?
+//  - send OSC events on widget change
+
+// startup with:
+// # freej -cFj osc_controller_interface.js 
+
+// eee fullscreen res ;)
+W = 800;
+H = 480;
+
+include('widget_class.js');
+
+set_resolution(W,H);
+
+MAX_WIDGETS = 10; // unused atm
+
+widgets = new Array();
+
+mousestate = 0;
+plzredraw = 1;
+
+geo = new GeometryLayer();
+geo.set_blit("ADD");
+geo.set_fps();
+geo.activate(true);
+geo.color(255,255,255,255);
+add_layer(geo);
+
+kbd = new KeyboardController();
+kbd.activate(true);
+kbd.pressed_esc = function() { quit(); }
+register_controller( kbd );
+
+ms = new MouseController();
+ms.activate(true);
+ms.grab(true);
+ms.button = function(b, s, x, y) {
+	var i;
+	// (button, state, x, y)
+//    	echo("mousestate "+mousestate+" b"+b+" s"+s+" x"+x+" y"+y);
+	this.grab(s);
+
+
+	switch (mousestate) {
+		// mousestate 0 = nothing
+		// mousestate 1 = click
+		// mousestate 2 = nothing + just clicked earlier (needs a timer)
+		// mousestate 3 = double click
+		// mousestate 4 = drag (not working right)
+		case 0:
+			if ((s == 1) && (b == 1)) {
+				// left mousebutton pressed
+				mousestate = 1;
+
+				// do widget click change?
+				for (i=0; i<widgets.length; i++) {
+					if (widgets[i].intersects(x,y)) {
+						widgets[i].change(b,mousestate);
+						plzredraw = 1;
+					}
+				}
+
+			} else {
+				mousestate = 0;
+			}
+			break;
+		case 1:
+			if (s == 0) {
+				// button released
+				mousestate = 2;
+			} else {
+				// button held
+				mousestate = 4;
+			}
+			break;
+		case 2:
+			if ((s == 1) && (b == 1)) {
+				// button pressed
+				mousestate = 3;
+			} else {
+				mousestate = 0;
+			}
+			break;
+		case 3:
+			// do widget doubleclick change ?
+			for (i=0; i<widgets.length; i++) {
+
+				if (widgets[i].intersects(x,y)) {
+					widgets[i].change(b,mousestate); // this might need to be swapped with something else ...
+					plzredraw = 1;
+				}
+			}
+			mousestate = 0;
+			break;
+		case 4:
+			// do widget dragchange!
+			for (i=0; i<widgets.length; i++) {
+
+				if (widgets[i].intersects(x,y)) {
+					widgets[i].change(b,mousestate); // yeah, this is not right :D
+					plzredraw = 1;
+				}
+			}
+			mousestate = 0;
+			break;
+	}
+
+}
+
+ms.motion = function(b, x, y, dx, dy) {
+
+	// dno if i need anything with motion ...
+
+	// (buttonmask, x, y, xrel, yrel)
+//	echo("b"+b+" x"+x+" y"+y+" dx"+dx+" dy"+dy);
+	// geo.pixel(x,y);
+}
+
+register_controller( ms );
+
+// this just sets up a small scene with two toggle buttons on the left, and one bang button on the right
+
+widgets[0] = new Widget("toggle1",10,10,100,100,2);
+widgets[0].data = 1;
+widgets[1] = new Widget("toggle2",200,10,100,100,2);
+widgets[1].data = 0;
+widgets[2] = new Widget("bang1",400,10,100,100,1);
+widgets[2].data = 0;
+plzredraw = 1;
+
+var loopbang;
+loopbang = new TriggerController();
+register_controller(loopbang);
+loopbang.frame = function() {
+
+	// mainloops should be like this :P
+
+	if (plzredraw) {
+		for (i=0; i<widgets.length; i++) widgets[i].draw(geo);
+		plzredraw = 0;
+	}
+
+}
+
diff --git a/scripts/javascript/lib/widgetlibrary/widget_class.js b/scripts/javascript/lib/widgetlibrary/widget_class.js
new file mode 100644
index 00000000..c4bf3e71
--- /dev/null
+++ b/scripts/javascript/lib/widgetlibrary/widget_class.js
@@ -0,0 +1,137 @@
+// Widget Class for the Geo layer
+// buZz, Puik. started aug. 2009
+
+// ment to draw & maintain the widgets for the OSC controller interface
+// might also end up doing the OSC part
+
+function Widget(name,x,y,w,h,type) {
+
+	// name (for referencing?)
+
+	this.name = name;
+
+	// x,y = topleft
+	// w,h = size
+
+	this.x = x;
+	this.y = y;
+	this.w = w;
+	this.h = h;
+
+	// type 0 = do nothing, draw nothing
+	// type 1 = bang
+	// type 2 = toggle
+
+	this.type = type;
+
+	// state 0 = off (invisible)
+	// state 1 = on (default)
+	// state 2 = temporary disabled
+
+	this.state = 1;
+
+	this.data = 0;
+
+}
+
+Widget.prototype.draw = function(lay) {
+	// draw a widget, make sure to draw it's state!
+	// lay = target geolayer
+
+	switch(this.type) {
+		case 1:
+			// most overkill and ugly button ever
+			// also there is no animation of the pressing atm :S
+
+			// bang
+			lay.color(255,255,255,255);
+			lay.rectangle(this.x,this.y,this.x+this.w,this.y+this.h);
+
+			// topleft
+			lay.line(this.x,this.y,this.x+2,this.y+2);
+
+			// top and left lines
+			lay.line(this.x+2,this.y+2,this.x+2,this.y+this.h-2);
+			lay.line(this.x+2,this.y+2,this.x+this.w-2,this.y+2);
+			lay.line(this.x+1,this.y+1,this.x+1,this.y+this.h-1);
+			lay.line(this.x+1,this.y+1,this.x+this.w-1,this.y+1);
+
+			// switch color on state (E_DOESNOTWORK)
+			if (this.data>0) {
+				lay.color(192,192,192,255);
+			} else {
+				lay.color(255,255,255,255);
+			}
+
+			// bottomleft and topright corners
+			lay.line(this.x+this.w,this.y,this.x+this.w-2,this.y+2);
+			lay.line(this.x,this.y+this.h,this.x+2,this.y+this.h-2);
+
+			// right and bottom lines
+			lay.line(this.x+this.w-2,this.y+2,this.x+this.w-2,this.y+this.h-2);
+			lay.line(this.x+2,this.y+this.h-2,this.x+this.w-2,this.y+this.h-2);
+			lay.line(this.x+this.w-1,this.y+1,this.x+this.w-1,this.y+this.h-1);
+			lay.line(this.x+1,this.y+this.h-1,this.x+this.w-1,this.y+this.h-1);
+
+			// bottomright corner
+			lay.line(0,0,0,255);
+			lay.line(this.x+this.w,this.y+this.h,this.x+this.w-2,this.y+this.h-2);
+
+			// middle
+			lay.color(160,160,160,255);
+			lay.rectangle_fill(this.x+3,this.y+3,this.x+this.w-3,this.y+this.h-3);
+
+			// delivery! one ugly button!
+
+			break;
+		case 2:
+			// toggle
+			lay.color(255,255,255,255);
+			lay.rectangle(this.x,this.y,this.x+this.h,this.y+this.w);
+			if (this.data > 0) {
+				// draw cross
+				lay.color(255,255,255,255);
+			} else {
+				lay.color(0,0,0,255);
+			}
+			// commented lines are for a 'cross' style checkbox, i like the square one better ..
+
+//			lay.line(this.x+2,this.y+2,this.x+this.h-2,this.y+this.w-2);
+//			lay.line(this.x+this.h-2,this.y+2,this.x+2,this.y+this.w-2);
+			lay.rectangle_fill(this.x+2,this.y+2,this.x+this.h-2,this.y+this.w-2);
+
+			break;
+		case 0:
+		default:
+			// do nothing
+	}
+
+	return;
+}
+
+Widget.prototype.intersects = function(x,y) {
+	// is x,y within this widget?
+
+	if ((x>this.x) && (x<(this.x+this.h) && (y>this.y) && (y<(this.y+this.w) ) ) )
+		return true;
+	return false;
+
+}
+
+Widget.prototype.change = function(b,mousestate) {
+
+	switch(this.type) {
+		case 1:
+			this.data = 1;
+			echo ("BANG @ "+this.name);
+			break;
+		case 2:
+			if (this.data>0) { this.data = 0; } else { this.data = 1; }
+			echo ("TOGGLE newdata: "+this.data+" @ "+this.name);
+			break;
+		case 0:
+		default:
+			// do nothing
+	}
+
+}