Added gui-bare.css and split controllers into seperate files.

controller.boolean.js

@@ -0,0 +1,9 @@
+var BooleanController = function() {
+	this.type = "boolean";
+    Controller.apply(this, arguments);
+    var input = document.createElement('input');
+    input.setAttribute('type', 'checkbox');
+    this.domElement.appendChild(input);
+};
+BooleanController.prototype = new Controller();
+BooleanController.prototype.constructor = BooleanController;

controller.function.js

@@ -0,0 +1,9 @@
+var FunctionController = function() {
+	this.type = "function";
+    Controller.apply(this, arguments);
+    var input = document.createElement('input');
+    input.setAttribute('type', 'submit');
+    this.domElement.appendChild(input);
+};
+FunctionController.prototype = new Controller();
+FunctionController.prototype.constructor = FunctionController;

controller.js

@@ -1,6 +1,6 @@
 var Controller = function() {
 
-    this.setName = function(n) {
+    this.name = function(n) {
   	    this.propertyNameElement.innerHTML = n;
     }
     this.domElement = document.createElement('div');
@@ -11,99 +11,8 @@ var Controller = function() {
     
     this.propertyNameElement = document.createElement('span');
     this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
-    this.setName(this.propertyName);
+    this.name(this.propertyName);
     this.domElement.appendChild(this.propertyNameElement);
     
     
 };
-	
-// Only works on the last one
-var NumberController = function() {
-
-	this.type = "number";
-    
-    Controller.apply(this, arguments);
-    
-    var _this = this;
-    
-    this.isClicked = false;
-    this.py = this.y = 0;
-    this.inc = 0;   // TODO pass argument to inc
-    
-    // Get min and max
-    (arguments[2] != null) ? this.min = arguments[2] : this.min = null;
-    (arguments[3] != null) ? this.max = arguments[3] : this.max = null;
-    
-    this.button = document.createElement('input');
-    this.button.setAttribute('id', this.propertyName);
-    this.button.setAttribute('type', 'number');
-    this.button.setAttribute('value', this.inc);
-    this.domElement.appendChild(this.button);
-    
-    this.button.onmousedown = function(e) {
-        _this.isClicked = true;
-    };
-    document.onmouseup = function(e) {
-        _this.isClicked = false;
-    };
-    document.onmousemove = function(e) {
-        
-        if(_this.isClicked) {
-            
-            _this.py = _this.y;
-            _this.y = e.offsetY;
-            var dy = _this.y - _this.py;
-            
-            if(dy > 0) {
-                if(_this.max != null)
-                    (_this.inc >= _this.max) ? _this.inc = _this.max : _this.inc++;
-                else
-                    _this.inc++;
-            } else if(dy < 0) {
-                
-                if(_this.min != null)
-                    (_this.inc <= _this.min) ? _this.inc = _this.min : _this.inc--;
-                else
-                    _this.inc--;
-            }
-            
-            _this.button.setAttribute('value', _this.inc);
-        }
-    };
-    
-    this.__defineSetter__("position", function(val) {
-        _this.inc = val;
-        _this.button.setAttribute('value', _this.inc);
-    });
-};
-
-NumberController.prototype = new Controller();
-NumberController.prototype.constructor = NumberController;
-
-
-
-var StringController = function() {
-	this.type = "string";
-    Controller.apply(this, arguments);
-    // TODO
-};
-StringController.prototype = new Controller();
-StringController.prototype.constructor = StringController;
-
-
-var BooleanController = function() {
-	this.type = "boolean";
-    Controller.apply(this, arguments);
-    // TODO
-};
-BooleanController.prototype = new Controller();
-BooleanController.prototype.constructor = BooleanController;
-
-
-var FunctionController = function() {
-	this.type = "function";
-    Controller.apply(this, arguments);
-    // TODO
-};
-FunctionController.prototype = new Controller();
-FunctionController.prototype.constructor = FunctionController;

controller.number.js

@@ -0,0 +1,64 @@
+
+// Only works on the last one
+var NumberController = function() {
+
+	this.type = "number";
+    
+    Controller.apply(this, arguments);
+    
+    var _this = this;
+    
+    this.isClicked = false;
+    this.py = this.y = 0;
+    this.inc = 0;   // TODO pass argument to inc
+    
+    // Get min and max
+    (arguments[2] != null) ? this.min = arguments[2] : this.min = null;
+    (arguments[3] != null) ? this.max = arguments[3] : this.max = null;
+    
+    this.button = document.createElement('input');
+    this.button.setAttribute('id', this.propertyName);
+    this.button.setAttribute('type', 'number');
+    this.button.setAttribute('value', this.inc);
+    this.domElement.appendChild(this.button);
+    
+    this.button.onmousedown = function(e) {
+        _this.isClicked = true;
+    };
+    document.onmouseup = function(e) {
+        _this.isClicked = false;
+    };
+    document.onmousemove = function(e) {
+        
+        if(_this.isClicked) {
+            
+            _this.py = _this.y;
+            _this.y = e.offsetY;
+            var dy = _this.y - _this.py;
+            
+            if(dy > 0) {
+                if(_this.max != null)
+                    (_this.inc >= _this.max) ? _this.inc = _this.max : _this.inc++;
+                else
+                    _this.inc++;
+            } else if(dy < 0) {
+                
+                if(_this.min != null)
+                    (_this.inc <= _this.min) ? _this.inc = _this.min : _this.inc--;
+                else
+                    _this.inc--;
+            }
+            
+            _this.button.setAttribute('value', _this.inc);
+        }
+    };
+    
+    this.__defineSetter__("position", function(val) {
+        _this.inc = val;
+        _this.button.setAttribute('value', _this.inc);
+    });
+};
+
+NumberController.prototype = new Controller();
+NumberController.prototype.constructor = NumberController;
+

controller.string.js

@@ -0,0 +1,9 @@
+var StringController = function() {
+	this.type = "string";
+    Controller.apply(this, arguments);
+    var input = document.createElement('input');
+    input.setAttribute('value', this.object[this.propertyName]);
+    this.domElement.appendChild(input);
+};
+StringController.prototype = new Controller();
+StringController.prototype.constructor = StringController;

demo.html

@@ -1,6 +1,6 @@
 <html>
 <head>
-<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
+<link href="gui-bare.css" media="screen" rel="stylesheet" type="text/css" />
 <link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
 <script type="text/javascript" src="controller.js"></script>
@@ -19,7 +19,7 @@ var controllableObject =
 
 window.onload = function() {
 
-   //prettyPrint();
+   prettyPrint();
 
    GUI.start();
    
@@ -28,7 +28,7 @@ window.onload = function() {
    
    // Creates a slider (min, max)
    GUI.add(controllableObject, "constrainedNum", -100, 100)
-      .setName("customName");
+      .name("customName");
    
    // Creates a text field
    GUI.add(controllableObject, "textProperty");
@@ -64,7 +64,7 @@ window.onload = function() {
    
    // Creates a slider (min, max)
    GUI.add(controllableObject, "constrainedNum", -100, 100)
-      .setName("customName");
+      .name("customName");
    
    // Creates a text field
    GUI.add(controllableObject, "textProperty");

gui-bare.css

@@ -0,0 +1,26 @@
+#guidat { 
+	position: fixed;
+	width: 250px;
+	z-index: 200;
+	top: 0;
+	left: 100%;
+	margin-left: -270px;
+}
+
+#guidat-controllers { 
+	height: 300px;
+	overflow-y: auto;
+}
+
+#guidat-toggle { 
+	cursor: pointer;
+}
+
+.guidat-controller { 
+	clear: both;
+}
+
+.guidat-controller input { 
+	float: right;
+	clear: both;
+}