diff --git a/Marlin/configurator/css/configurator.css b/Marlin/configurator/css/configurator.css
new file mode 100644
index 0000000000..9c7b1be0a8
--- /dev/null
+++ b/Marlin/configurator/css/configurator.css
@@ -0,0 +1,27 @@
+/* configurator.css */
+/* Styles for Marlin Configurator */
+
+body { margin: 0; padding: 0; background: #458; color: #FFC; font-family: sans-serif; }
+#main { float: left; width: 100%; margin-right: -100%; }
+#main { padding: 0 4%; width: 92%; }
+#main { font-family: monospace; }
+.info { color: #AAF; }
+.info span { color: #FFF; }
+.info span span { color: #000; font-weight: bold; }
+p { width: 80%; color: #FF0; }
+#help strong { color: #0DD; }
+img { display: none; }
+label, input, select, textarea { display: block; float: left; margin: 1px 0; }
+label.newline, textarea { clear: both; }
+label { width: 130px; height: 1em; padding: 10px 480px 10px 1em; margin-right: -470px; text-align: right; }
+input[type="text"], select, .jstepper { margin: 0.75em 0 0; }
+input[type="checkbox"], input[type="radio"] { margin: 1em 0 0; }
+#config_form { display: block; background: #DDD; padding: 20px; color: #000; }
+/*#config_text, #config_adv_text { font-family: "Andale mono", monospace; clear: both; }*/
+#config_text, #config_adv_text { height: 25em; overflow: auto; background-color: #FFF; color: #888; padding: 10px; }
+input[type="checkbox"], input[type="radio"].enabler { margin-left: 1em; }
+input:disabled { color: #BBB; }
+.clear { clear: both; }
+h1, h2, h3, h4, h5, h6 { clear: both; }
+h2 { margin: 0; padding: 1em 0 0; }
+.jstepper { display: block; }
diff --git a/Marlin/configurator/index.html b/Marlin/configurator/index.html
new file mode 100644
index 0000000000..ea613d0177
--- /dev/null
+++ b/Marlin/configurator/index.html
@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <title>Marlin Configurator</title>
+    <meta charset="UTF-8">
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+    <script src="js/configurator.js"></script>
+    <script src="js/jcanvas.js"></script>
+    <script src="js/jstepper.js"></script>
+    <link rel="stylesheet" href="css/configurator.css" type="text/css" media="all" />
+  </head>
+  <body>
+    <div id="main">
+      <h1>Marlin Configurator 0.1a</h1>
+      <p>Enter values in the form, get a Marlin configuration.<br/>Will include a drop-down of known configurations.</p>
+      <ul id="help">
+        <li><strong>HELP</strong> - This is the help region</li>
+      </ul>
+
+      <form id="config_form">
+
+        <!-- label>Serial Port:</label><input name="SERIAL_PORT" type="text" size="4" maxlength="2" value="99" / -->
+
+        <label>Serial Port:</label><select name="SERIAL_PORT"></select><div id="serial_stepper"></div>
+
+        <label>Baud Rate:</label><select name="BAUDRATE"></select>
+
+        <label>AT90USB BT IF:</label>
+          <input name="BTENABLED" type="checkbox" value="1" checked />
+
+        <label class="newline">Motherboard:</label><select name="MOTHERBOARD"></select>
+
+        <label class="newline">Custom Name:</label><input name="CUSTOM_MENDEL_NAME" class="switchable" type="text" size="14" maxlength="12" value="" />
+
+        <label class="newline">Machine UUID:</label><input name="MACHINE_UUID" class="switchable" type="text" size="38" maxlength="36" value="" />
+
+        <label class="newline">Extruders:</label><select name="EXTRUDERS"></select>
+
+        <label class="newline">Power Supply:</label><select name="POWER_SUPPLY"></select>
+
+        <label>PS Default Off:</label>
+          <input name="PS_DEFAULT_OFF" type="checkbox" value="1" checked />
+
+        <h2>Marlin/Configuration.h</h2>
+        <pre id="config_text" class="prettyprint linenums"></pre>
+        <h2>Marlin/Configuration_adv.h</h2>
+        <pre id="config_adv_text" class="prettyprint linenums"></pre>
+
+        <br class="clear" />
+      </form>
+    </div>
+  </body>
+</html>
diff --git a/Marlin/configurator/js/configurator.js b/Marlin/configurator/js/configurator.js
new file mode 100644
index 0000000000..8189b24fa8
--- /dev/null
+++ b/Marlin/configurator/js/configurator.js
@@ -0,0 +1,293 @@
+/**
+ * configurator.js
+ *
+ * Marlin Configuration Utility
+ *    - Web form for entering configuration options
+ *    - A reprap calculator to calculate movement values
+ *    - Uses HTML5 to generate downloadables in Javascript
+ *    - Reads and parses standard configuration files from local folders
+ *
+ * Supporting functions
+ *    - Parser to read Marlin Configuration.h and Configuration_adv.h files
+ *    - Utilities to replace values in configuration files
+ */
+$(function(){
+
+var marlin_config = '..';
+
+// Extend String
+String.prototype.lpad = function(len, chr) {
+  if (chr === undefined) { chr = '&nbsp;'; }
+  var s = this+'', need = len - s.length;
+  if (need > 0) { s = new Array(need+1).join(chr) + s; }
+  return s;
+};
+
+String.prototype.prePad = function(len, chr) {
+  return len ? this.lpad(len, chr) : this;
+};
+
+String.prototype.zeroPad = function(len) {
+  return len ? this.prePad(len, '0') : this;
+};
+
+/**
+ * selectField.addOptions takes an array or keyed object
+ */
+$.fn.extend({
+  addOptions: function(arrObj) {
+    return this.each(function() {
+      var sel = $(this);
+      var isArr = Object.prototype.toString.call(arrObj) == "[object Array]";
+      $.each(arrObj, function(k, v) {
+        sel.append( $('<option>',{value:isArr?v:k}).text(v) );
+      });
+    });
+  }
+});
+
+// The app is a singleton
+var configuratorApp = (function(){
+
+  // private variables and functions go here
+  var self,
+      pi2 = Math.PI * 2,
+      $config = $('#config_text'),
+      $config_adv = $('#config_adv_text'),
+      boards_list = {},
+      therms_list = {};
+
+  // Return this anonymous object as configuratorApp
+  return {
+    my_public_var: 4,
+
+    init: function() {
+      self = this; // a 'this' for use when 'this' is something else
+
+      // Read boards.h
+      boards_list = {};
+      $.get(marlin_config + "/boards.h", function(txt) {
+        // Get all the boards and save them into an object
+        var r, findDef = new RegExp('[ \\t]*#define[ \\t]+(BOARD_[^ \\t]+)[ \\t]+(\\d+)[ \\t]*(//[ \\t]*)?(.+)?', 'mg');
+        while((r = findDef.exec(txt)) !== null) {
+          boards_list[r[1]] = r[2].prePad(r[2] < 100 ? (r[2] < 10 ? 5 : 4) : 0, ' ') + " — " + r[4].replace(/\).*/, ')');
+        }
+      });
+
+      // Read Configuration.h
+      $.get(marlin_config+"/Configuration.h", function(txt) {
+        $config.text(txt);
+      });
+
+      // Read Configuration.h
+      $.get(marlin_config+"/Configuration_adv.h", function(txt) {
+        $config_adv.text(txt);
+        self.setupConfigForm();
+      });
+
+    },
+
+    setupConfigForm: function() {
+      // Modify form fields and make the form responsive.
+      // As values change on the form, we could update the
+      // contents of text areas containing the configs, for
+      // example.
+
+      // while(!$config_adv.text() == null) {}
+      // while(!$config.text() == null) {}
+
+      // Go through all form items with names
+      $('#config_form').find('[name]').each(function() {
+        // Set its id to its name
+        var name = $(this).attr('name');
+        $(this).attr({id: name});
+        // Attach its label sibling
+        var $label = $(this).prev();
+        if ($label[0].tagName == 'LABEL') {
+          $label.attr('for',name);
+        }
+      });
+
+      // Get all 'switchable' class items and add a checkbox
+      $('#config_form .switchable').each(function(){
+        $(this).after(
+          $('<input>',{type:'checkbox',value:'1',class:'enabler'}).prop('checked',true)
+            .attr('id',this.id + '-switch')
+            .change(self.handleSwitch)
+        );
+      });
+
+      /**
+       * For now I'm manually creating these references
+       * but I should be able to parse Configuration.h
+       * and iterate the #defines.
+       *
+       * For any #ifdef blocks I can create field groups
+       * which can be dimmed together when the option
+       * is disabled.
+       *
+       * Then we only need to specify exceptions to
+       * standard behavior, (which is to add a text field)
+       */
+      $('#SERIAL_PORT').addOptions([0,1,2,3,4,5,6,7]);
+      this.initField('SERIAL_PORT');
+
+      $('#BAUDRATE').addOptions([2400,9600,19200,38400,57600,115200,250000]);
+      this.initField('BAUDRATE');
+
+      this.initField('BTENABLED');
+
+      $('#MOTHERBOARD').addOptions(boards_list);
+      this.initField('MOTHERBOARD');
+
+      this.initField('CUSTOM_MENDEL_NAME');
+
+      this.initField('MACHINE_UUID');
+
+      $('#EXTRUDERS').addOptions([1,2,3,4]);
+      this.initField('EXTRUDERS');
+
+      $('#POWER_SUPPLY').addOptions({'1':'ATX','2':'Xbox 360'});
+      this.initField('POWER_SUPPLY');
+
+      this.initField('PS_DEFAULT_OFF');
+
+/*
+      $('#serial_stepper').jstepper({
+        min: 0,
+        max: 3,
+        val: $('#SERIAL_PORT').val(),
+        arrowWidth: '18px',
+        arrowHeight: '15px',
+        color: '#FFF',
+        acolor: '#F70',
+        hcolor: '#FF0',
+        id: 'select-me',
+        stepperClass: 'inner',
+        textStyle: {width:'1.5em',fontSize:'120%',textAlign:'center'},
+        // onChange: function(v) { },
+      });
+*/
+
+      // prettyPrint();
+    },
+
+    initField: function(name) {
+      var $elm = $('#'+name), isText = $elm.attr('type') == 'text';
+      this.setFieldFromDefine(name);
+      isText ? $elm.bind('input', this.handleChange) : $elm.change(this.handleChange)
+    },
+
+    handleChange: function(e) {
+      self.updateDefineForField(e.target);
+    },
+
+    handleSwitch: function(e) {
+      var $elm = $(e.target), $prev = $elm.prev();
+      var on = $elm.prop('checked') || false;
+      $prev.attr('disabled', !on);
+      self.setDefineEnabled($prev[0], on);
+    },
+
+    setDefineEnabled: function(elm, val) {
+      var $elm = $(elm);
+
+      // console.log("Enable: " + elm.id + " = " + val);
+
+      var txt = $config.text();
+
+      var findDef = new RegExp('^[ \\t]*(//[ \\t]*)?(#define[ \\t]+' + elm.id + '([ \\t].*)?)$', 'm');
+      txt = txt.replace(findDef, val ? '$2': '//$2');
+
+      // Now set the text in the field
+      $config.text(txt);
+    },
+
+    updateDefineForField: function(elm) {
+      var $elm = $(elm),
+          isCheck = $elm.attr('type') == 'checkbox',
+          val = isCheck ? $elm.prop('checked') : $elm.val();
+
+      // console.log("Set: " + elm.id + " = " + val);
+
+      var txt = $config.text();
+
+      if (isCheck) {
+        var findDef = new RegExp('^([ \\t]*)(//[ \\t]*)?(#define[ \\t]+' + elm.id + '([ \\t].*)?)$', 'm');
+        txt = txt.replace(findDef, val ? '$1$3': '$1//$3');
+      }
+      else {
+        // Match the define name, 1 = "#define name ", 3=value, 4=comment
+        var findDef = new RegExp('^([ \\t]*(//)?[ \\t]*#define[ \\t]+' + elm.id + '[ \\t]+)(.*)([ \\t]*(//)?.*)$', 'm');
+        if ($elm.hasClass('quote')) val = '"' + val + '"'
+        txt = txt.replace(findDef, '$1!!REGEXP!!$4').replace('!!REGEXP!!', val);
+      }
+      // Now set the text in the field
+      $config.text(txt);
+
+      // $config.scrollTo(500);
+    },
+
+    setFieldFromDefine: function(name, adv) {
+      var $elm = $('#'+name), elm = $elm[0];
+      var isCheck = $elm.attr('type') == 'checkbox';
+      var val = this.defineValue(name, adv);
+
+      isCheck ? $elm.prop('checked', val) : $elm.val("" + val);
+
+      // If the item has a checkbox then set enabled state too
+      var $cb = $('#'+name+'-switch');
+      if ($cb.length) {
+        var on = self.defineIsEnabled(name,adv);
+        $elm.attr('disabled', !on);
+        $cb.prop('checked', on);
+      }
+    },
+
+    defineValue: function(name, adv) {
+      var $elm = $('#'+name), elm = $elm[0];
+      var $c = adv ? $config_adv : $config;
+      if ($elm.attr('type') == 'checkbox') {
+        // maybe spaces, maybe comment, #define, spaces, name, maybe a comment
+        var findDef = new RegExp('^[ \\t]*(//[ \\t]*)?(#define[ \\t]+' + elm.id + '([ \\t]*(//)?.*)?)$', 'm');
+        var result = findDef.exec($c.text());
+        return (result ? result[1] == undefined || result[1].trim() != '//' : false);
+      }
+      else {
+        // maybe spaces, maybe comment, #define, spaces, name, one or more spaces, value, maybe a comment
+        var findDef = new RegExp('^([ \\t]*(//[ \\t]*)?#define[ \\t]+' + elm.id + '[ \\t]+)(.*)([ \\t]*(//)?.*)$', 'm');
+        var result = findDef.exec($c.text());
+        if (result !== null) {
+          var val = result[3];
+          if (val.search(/^".*"$/) >= 0) $elm.addClass('quote');
+          if ($elm.hasClass('quote')) val = val.replace(/^"(.*)"$/, '$1');
+          return val;
+        }
+        return 'fail';
+      }
+    },
+
+    defineIsEnabled: function(name, adv) {
+      var $elm = $('#'+name);
+      var $c = adv ? $config_adv : $config;
+      var findDef = new RegExp('^[ \\t]*(//[ \\t]*)?(#define[ \\t]+' + name + '([ \\t]*(//)?.*)?)$', 'm');
+      var result = findDef.exec($c.text());
+      return (result ? result[1].trim() != '//' : false);
+    },
+
+    logOnce: function(o) {
+      if (typeof o.didLogThisObject === 'undefined') {
+        console.log(o);
+        o.didLogThisObject = true;
+      }
+    },
+
+    EOF: null
+  };
+
+})();
+
+// Typically the app would be in its own file, but this would be here
+configuratorApp.init();
+
+});
diff --git a/Marlin/configurator/js/jcanvas.js b/Marlin/configurator/js/jcanvas.js
new file mode 100644
index 0000000000..254d2acfbd
--- /dev/null
+++ b/Marlin/configurator/js/jcanvas.js
@@ -0,0 +1,524 @@
+/*!
+  jCanvas v2.2.1
+  Caleb Evans
+  2.2.1 revisions by Thinkyhead
+*/
+
+(function($, document, Math, Number, undefined) {
+
+// jC global object
+var jC = {};
+jC.originals = {
+	width: 20,
+	height: 20,
+	cornerRadius: 0,
+	fillStyle: 'transparent',
+	strokeStyle: 'transparent',
+	strokeWidth: 5,
+	strokeCap: 'butt',
+	strokeJoin: 'miter',
+	shadowX: 0,
+	shadowY: 0,
+	shadowBlur: 10,
+	shadowColor: 'transparent',
+	x: 0, y: 0,
+	x1: 0, y1: 0,
+	radius: 10,
+	start: 0,
+	end: 360,
+	ccw: false,
+	inDegrees: true,
+	fromCenter: true,
+	closed: false,
+	sides: 3,
+	angle: 0,
+	text: '',
+	font: 'normal 12pt sans-serif',
+	align: 'center',
+	baseline: 'middle',
+	source: '',
+	repeat: 'repeat'
+};
+// Duplicate original defaults
+jC.defaults = $.extend({}, jC.originals);
+
+// Set global properties
+function setGlobals(context, map) {
+	context.fillStyle = map.fillStyle;
+	context.strokeStyle = map.strokeStyle;
+	context.lineWidth = map.strokeWidth;
+	context.lineCap = map.strokeCap;
+	context.lineJoin = map.strokeJoin;
+	context.shadowOffsetX = map.shadowX;
+	context.shadowOffsetY = map.shadowY;
+	context.shadowBlur = map.shadowBlur;
+	context.shadowColor = map.shadowColor;
+}
+
+// Close path if chosen
+function closePath(context, map) {
+	if (map.closed === true) {
+		context.closePath();
+		context.fill();
+		context.stroke();
+	} else {
+		context.fill();
+		context.stroke();
+		context.closePath();
+	}
+}
+
+// Measure angles in degrees if chosen
+function checkUnits(map) {
+	if (map.inDegrees === true) {
+		return Math.PI / 180;
+	} else {
+		return 1;
+	}
+}
+
+// Set canvas defaults
+$.fn.canvas = function(args) {
+	// Reset defaults if no value is passed
+	if (typeof args === 'undefined') {
+		jC.defaults = jC.originals;
+	} else {
+		jC.defaults = $.extend({}, jC.defaults, args);
+	}
+	return this;
+};
+
+// Load canvas
+$.fn.loadCanvas = function(context) {
+	if (typeof context === 'undefined') {context = '2d';}
+	return this[0].getContext(context);
+};
+
+// Create gradient
+$.fn.gradient = function(args) {
+	var ctx = this.loadCanvas(),
+		// Specify custom defaults
+		gDefaults = {
+			x1: 0, y1: 0,
+			x2: 0, y2: 0,
+			r1: 10, r2: 100
+		},
+		params = $.extend({}, gDefaults, args),
+		gradient, stops = 0, percent, i;
+		
+	// Create radial gradient if chosen
+	if (typeof args.r1 === 'undefined' && typeof args.r2 === 'undefined') {
+		gradient = ctx.createLinearGradient(params.x1, params.y1, params.x2, params.y2);
+	} else {
+		gradient = ctx.createRadialGradient(params.x1, params.y1, params.r1, params.x2, params.y2, params.r2);
+	}
+	
+	// Count number of color stops
+	for (i=1; i<=Number.MAX_VALUE; i+=1) {
+		if (params['c' + i]) {
+			stops += 1;
+		} else {
+			break;
+		}
+	}
+	
+	// Calculate color stop percentages if absent
+	for (i=1; i<=stops; i+=1) {
+		percent = Math.round((100 / (stops-1)) * (i-1)) / 100;
+		if (typeof params['s' + i] === 'undefined') {
+			params['s' + i] = percent;
+		}
+		gradient.addColorStop(params['s' + i], params['c' + i]);
+	}
+	return gradient;
+};
+
+// Create pattern
+$.fn.pattern = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		pattern,
+		img = document.createElement('img');
+	img.src = params.source;
+	
+	// Create pattern
+	function create() {
+		if (img.complete === true) {
+			// Create pattern
+			pattern = ctx.createPattern(img, params.repeat);
+		} else {
+			throw "The pattern has not loaded yet";
+		}
+	}
+	try {
+		create();
+	} catch(error) {
+		img.onload = create;
+	}
+	return pattern;
+};
+
+// Clear canvas
+$.fn.clearCanvas = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args);
+
+	// Draw from center if chosen
+	if (params.fromCenter === true) {
+		params.x -= params.width / 2;
+		params.y -= params.height / 2;
+	}
+
+	// Clear entire canvas if chosen
+	ctx.beginPath();
+	if (typeof args === 'undefined') {
+		ctx.clearRect(0, 0, this.width(), this.height());
+	} else {
+		ctx.clearRect(params.x, params.y, params.width, params.height);
+	} 
+	ctx.closePath();
+	return this;
+};
+
+// Save canvas
+$.fn.saveCanvas = function() {
+	var ctx = this.loadCanvas();
+	ctx.save();
+	return this;
+};
+
+// Restore canvas
+$.fn.restoreCanvas = function() {
+	var ctx = this.loadCanvas();
+	ctx.restore();
+	return this;
+};
+
+// Scale canvas
+$.fn.scaleCanvas = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args);
+	ctx.save();
+	ctx.translate(params.x, params.y);
+	ctx.scale(params.width, params.height);
+	ctx.translate(-params.x, -params.y)
+	return this;
+};
+
+// Translate canvas
+$.fn.translateCanvas = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args);
+	ctx.save();
+	ctx.translate(params.x, params.y);		
+	return this;
+};
+
+// Rotate canvas
+$.fn.rotateCanvas = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		toRad = checkUnits(params);
+	
+	ctx.save();
+	ctx.translate(params.x, params.y);
+	ctx.rotate(params.angle * toRad);
+	ctx.translate(-params.x, -params.y);
+	return this;
+};
+
+// Draw rectangle
+$.fn.drawRect = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		toRad = checkUnits(params),
+		x1, y1, x2, y2, r;
+	setGlobals(ctx, params);
+	
+	// Draw from center if chosen
+	if (params.fromCenter === true) {
+		params.x -= params.width / 2;
+		params.y -= params.height / 2;
+	}
+		
+	// Draw rounded rectangle if chosen
+	if (params.cornerRadius > 0) {
+		x1 = params.x;
+		y1 = params.y;
+		x2 = params.x + params.width;
+		y2 = params.y + params.height;
+		r = params.cornerRadius;
+		if ((x2 - x1) - (2 * r) < 0) {
+			r = (x2 - x1) / 2;
+		}
+		if ((y2 - y1) - (2 * r) < 0) {
+			r = (y2 - y1) / 2;
+		}
+		ctx.beginPath();
+		ctx.moveTo(x1+r,y1);
+		ctx.lineTo(x2-r,y1);
+		ctx.arc(x2-r, y1+r, r, 270*toRad, 360*toRad, false);
+		ctx.lineTo(x2,y2-r);
+		ctx.arc(x2-r, y2-r, r, 0, 90*toRad, false);
+		ctx.lineTo(x1+r,y2);
+		ctx.arc(x1+r, y2-r, r, 90*toRad, 180*toRad, false);
+		ctx.lineTo(x1,y1+r);
+		ctx.arc(x1+r, y1+r, r, 180*toRad, 270*toRad, false);
+		ctx.fill();
+		ctx.stroke();
+		ctx.closePath();
+	} else {
+		ctx.fillRect(params.x, params.y, params.width, params.height);
+		ctx.strokeRect(params.x, params.y, params.width, params.height);
+	}
+	return this;
+};
+
+// Draw arc
+$.fn.drawArc = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		toRad = checkUnits(params);
+		setGlobals(ctx, params);
+	
+	// Draw from center if chosen
+	if (params.fromCenter === false) {
+		params.x += params.radius;
+		params.y += params.radius;
+	}
+	
+	ctx.beginPath();
+	ctx.arc(params.x, params.y, params.radius, (params.start*toRad)-(Math.PI/2), (params.end*toRad)-(Math.PI/2), params.ccw);
+	// Close path if chosen
+	closePath(ctx, params);
+	return this;
+};
+
+// Draw ellipse
+$.fn.drawEllipse = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		controlW = params.width * (4/3);
+		setGlobals(ctx, params);
+	
+	// Draw from center if chosen
+	if (params.fromCenter === false) {
+		params.x += params.width / 2;
+		params.y += params.height / 2;
+	}
+	
+	// Increment coordinates to prevent negative values
+	params.x += 1e-10;
+	params.y += 1e-10;
+	
+	// Create ellipse
+	ctx.beginPath();
+	ctx.moveTo(params.x, params.y-params.height/2);
+	ctx.bezierCurveTo(params.x-controlW/2,params.y-params.height/2,
+		params.x-controlW/2,params.y+params.height/2,
+		params.x,params.y+params.height/2);
+	ctx.bezierCurveTo(params.x+controlW/2,params.y+params.height/2,
+		params.x+controlW/2,params.y-params.height/2,
+		params.x,params.y-params.height/2);
+	ctx.closePath();
+	ctx.fill();
+	ctx.stroke();
+	return this;
+};
+
+// Draw line
+$.fn.drawLine = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		max = Number.MAX_VALUE, l,
+		lx, ly;
+	setGlobals(ctx, params);
+	
+	// Draw each point
+	ctx.beginPath();
+	ctx.moveTo(params.x1, params.y1);
+	for (l=2; l<max; l+=1) {
+		lx = params['x' + l];
+		ly = params['y' + l];
+		// Stop loop when all points are drawn
+		if (typeof lx === 'undefined' || typeof ly === 'undefined') {
+			break;
+		}
+		ctx.lineTo(lx, ly);
+	}
+	// Close path if chosen
+	closePath(ctx, params);
+	return this;
+};
+
+// Draw quadratic curve
+$.fn.drawQuad = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		max = Number.MAX_VALUE, l,
+		lx, ly, lcx, lcy;
+	setGlobals(ctx, params);
+	
+	// Draw each point
+	ctx.beginPath();
+	ctx.moveTo(params.x1, params.y1);
+	for (l=2; l<max; l+=1) {
+		lx = params['x' + l];
+    if (typeof lx === 'undefined') break;
+		ly = params['y' + l];
+    if (typeof ly === 'undefined') break;
+		lcx = params['cx' + (l-1)];
+    if (typeof lcx === 'undefined') break;
+		lcy = params['cy' + (l-1)];
+    if (typeof lcy === 'undefined') break;
+		ctx.quadraticCurveTo(lcx, lcy, lx, ly);
+	}
+	// Close path if chosen
+	closePath(ctx, params);
+	return this;
+};
+
+// Draw Bezier curve
+$.fn.drawBezier = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		max = Number.MAX_VALUE,
+		l=2, lc=1, lx, ly, lcx1, lcy1, lcx2, lcy2, i;
+	setGlobals(ctx, params);
+
+	// Draw each point
+	ctx.beginPath();
+	ctx.moveTo(params.x1, params.y1);
+	for (i=2; i<max; i+=1) {
+		lx = params['x' + l];
+    if (typeof lx === 'undefined') break;
+		ly = params['y' + l];
+    if (typeof ly === 'undefined') break;
+		lcx1 = params['cx' + lc];
+    if (typeof lcx1 === 'undefined') break;
+		lcy1 = params['cy' + lc];
+    if (typeof lcy1 === 'undefined') break;
+		lcx2 = params['cx' + (lc+1)];
+    if (typeof lcx2 === 'undefined') break;
+		lcy2 = params['cy' + (lc+1)];
+    if (typeof lcy2 === 'undefined') break;
+		ctx.bezierCurveTo(lcx1, lcy1, lcx2, lcy2, lx, ly);
+		l += 1;
+		lc += 2;
+	}
+	// Close path if chosen
+	closePath(ctx, params);
+	return this;
+};
+
+// Draw text
+$.fn.drawText = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args);
+	setGlobals(ctx, params);
+	
+	// Set text-specific properties
+	ctx.textBaseline = params.baseline;
+	ctx.textAlign = params.align;
+	ctx.font = params.font;
+	
+	ctx.strokeText(params.text, params.x, params.y);
+	ctx.fillText(params.text, params.x, params.y);
+	return this;
+};
+
+// Draw image
+$.fn.drawImage = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		// Define image source
+		img = document.createElement('img');
+  	img.src = params.source;
+	  setGlobals(ctx, params);
+
+	// Draw image function
+	function draw() {
+		if (img.complete) {
+
+  		var scaleFac = img.width / img.height;
+
+			// If width/height are specified
+			if (typeof args.width !== 'undefined' && typeof args.height !== 'undefined') {
+				img.width = args.width;
+				img.height = args.height;
+			// If width is specified
+			} else if (typeof args.width !== 'undefined' && typeof args.height === 'undefined') {
+				img.width = args.width;
+				img.height = img.width / scaleFac;
+			// If height is specified
+			} else if (typeof args.width === 'undefined' && typeof args.height !== 'undefined') {
+				img.height = args.height;
+				img.width = img.height * scaleFac;
+			}
+		
+			// Draw from center if chosen
+			if (params.fromCenter === true) {
+				params.x -= img.width / 2;
+				params.y -= img.height / 2;
+			}
+
+			// Draw image
+			ctx.drawImage(img, params.x, params.y, img.width, img.height);
+		} else {
+			throw "The image has not loaded yet.";
+		}
+	}
+
+  function dodraw() {
+    // console.log("dodraw...");
+    try {
+  	  // console.log("dodraw...try...");
+      draw();
+    }
+    catch(error) {
+      // console.log("dodraw...catch: " + error);
+    }
+  }
+
+	// Draw image if already loaded
+  // console.log("--------------------");
+  // console.log("drawImage " + img.src);
+	try {
+    // console.log("try...");
+		draw();
+	} catch(error) {
+    // console.log("catch: " + error);
+		img.onload = dodraw;
+	}
+	return this;
+};
+
+// Draw polygon
+$.fn.drawPolygon = function(args) {
+	var ctx = this.loadCanvas(),
+		params = $.extend({}, jC.defaults, args),
+		theta, dtheta, x, y,
+		toRad = checkUnits(params), i;
+	setGlobals(ctx, params);
+	
+	if (params.sides >= 3) {		
+		// Calculate points and draw
+		theta = (Math.PI/2) + (Math.PI/params.sides) + (params.angle*toRad);
+		dtheta = (Math.PI*2) / params.sides;
+		for (i=0; i<params.sides; i+=1) {
+			x = params.x + (params.radius * Math.cos(theta)) + 1e-10;
+			y = params.y + (params.radius * Math.sin(theta)) + 1e-10;
+			if (params.fromCenter === false) {
+				x += params.radius;
+				y += params.radius;
+			}
+			ctx.lineTo(x, y);
+			theta += dtheta;
+		}
+		closePath(ctx, params);
+	}
+	return this;
+};
+
+return window.jCanvas = jC;
+}(jQuery, document, Math, Number));
\ No newline at end of file
diff --git a/Marlin/configurator/js/jstepper.js b/Marlin/configurator/js/jstepper.js
new file mode 100644
index 0000000000..c26f5ff4b9
--- /dev/null
+++ b/Marlin/configurator/js/jstepper.js
@@ -0,0 +1,220 @@
+﻿/*!
+ * jQuery "stepper" Plugin
+ * version 0.0.1
+ * @requires jQuery v1.3.2 or later
+ * @requires jCanvas
+ *
+ * Authored 2011-06-11 Scott Lahteine (thinkyhead.com)
+ *
+ *  A very simple numerical stepper.
+ *  TODO: place arrows based on div size, make 50/50 width
+ *
+ *  Usage example:
+ *
+ *  $('#mydiv').jstepper({
+ *    min: 1,
+ *    max: 4,
+ *    val: 1,
+ *    arrowWidth: 15,
+ *    arrowHeight: '22px',
+ *    color: '#FFF',
+ *    acolor: '#F70',
+ *    hcolor: '#FF0',
+ *    id: 'select-me',
+ *    stepperClass: 'inner',
+ *    textStyle: {width:'1.5em',fontSize:'20px',textAlign:'center'},
+ *    onChange: function(v) { },
+ *  });
+ *
+ */
+;(function($) {
+  var un = 'undefined';
+
+  $.jstepperArrows = [
+    { name:'prev', poly:[[1.0,0],[0,0.5],[1.0,1.0]] },
+    { name:'next', poly:[[0,0],[1.0,0.5],[0,1.0]] }
+  ];
+
+ 	$.fn.jstepper = function(args) {
+
+		return this.each(function() {
+
+      var defaults = {
+        min: 1,
+        max: null,
+        val: null,
+        active: true,
+        placeholder: null,
+        arrowWidth: 0,
+        arrowHeight: 0,
+        color: '#FFF',
+        hcolor: '#FF0',
+        acolor: '#F80',
+        id: '',
+        stepperClass: '',
+        textStyle: '',
+        onChange: (function(v){ if (typeof console.log !== 'undefined') console.log("val="+v); })
+      };
+
+      args = $.extend(defaults, args || {});
+
+		  var min = args.min * 1,
+          max = (args.max !== null) ? args.max * 1 : min,
+          span = max - min + 1,
+          val = (args.val !== null) ? args.val * 1 : min,
+          active = !args.disabled,
+          placeholder = args.placeholder,
+          arrowWidth = 1 * args.arrowWidth.toString().replace(/px/,''),
+          arrowHeight = 1 * args.arrowHeight.toString().replace(/px/,''),
+          color = args.color,
+          hcolor = args.hcolor,
+          acolor = args.acolor,
+			    $prev = $('<a href="#prev" style="cursor:w-resize;"><canvas/></a>'),
+			    $marq = $('<div class="number"/>').css({float:'left',textAlign:'center'}),
+			    $next = $('<a href="#next" style="cursor:e-resize;"><canvas/></a>'),
+			    arrow = [ $prev.find('canvas')[0], $next.find('canvas')[0] ],
+			    $stepper = $('<span class="jstepper"/>').append($prev).append($marq).append($next).append('<div style="clear:both;"/>'),
+			    onChange = args.onChange;
+
+      if (args.id) $stepper[0].id = args.id;
+      if (args.stepperClass) $stepper.addClass(args.stepperClass);
+      if (args.textStyle) $marq.css(args.textStyle);
+
+      // replace a span, but embed elsewhere
+      if (this.tagName == 'SPAN') {
+        var previd = this.id;
+        $(this).replaceWith($stepper);
+        if (previd) $stepper.attr('id',previd);
+      }
+      else {
+        $(this).append($stepper);
+      }
+
+      // hook to call functions on this object
+      $stepper[0].ui = {
+
+        refresh: function() {
+          this.updateNumber();
+          this._drawArrow(0, 1);
+          this._drawArrow(1, 1);
+          return this;
+        },
+
+        _drawArrow: function(i,state) {
+          var $elm = $(arrow[i]),
+              desc = $.jstepperArrows[i],
+              fillStyle = (state == 2) ? hcolor : (state == 3) ? acolor : color,
+              draw = { fillStyle: fillStyle },
+              w = $elm.width(), h = $elm.height();
+
+          if (w <= 0) w = $elm.attr('width');
+          if (h <= 0) h = $elm.attr('height');
+
+          $.each(desc.poly,function(i,v){
+            ++i;
+            draw['x'+i] = v[0] * w;
+            draw['y'+i] = v[1] * h;
+          });
+          $elm.restoreCanvas().clearCanvas().drawLine(draw);
+        },
+
+        updateNumber: function() {
+          $marq.html((active || placeholder === null) ? val.toString() : placeholder);
+          return this;
+        },
+
+        _doclick: function(i) {
+          this.add(i ? 1 : -1);
+          this._drawArrow(i, 3);
+          var self = this;
+          setTimeout(function(){ self._drawArrow(i, 2); }, 50);
+        },
+
+        add: function(x) {
+          val = (((val - min) + x + span) % span) + min;
+          this.updateNumber();
+          this.didChange(val);
+          return this;
+        },
+
+        min: function(v) {
+          if (typeof v === un) return min;
+          this.setRange(v,max);
+          return this;
+        },
+
+        max: function(v) {
+          if (typeof v === un) return max;
+          this.setRange(min,v);
+          return this;
+        },
+
+        val: function(v) {
+          if (typeof v === un) return val;
+          val = (((v - min) + span) % span) + min;
+          this.updateNumber();
+          return this;
+        },
+
+        setRange: function(lo, hi, ini) {
+          if (lo > hi) hi = (lo += hi -= lo) - hi;
+          min = lo; max = hi; span = hi - lo + 1;
+          if (typeof ini !== un) val = ini;
+          if (val < min) val = min;
+          if (val > max) val = max;
+          this.updateNumber();
+          return this;
+        },
+
+        active: function(a) {
+          if (typeof a === un) return active;
+          (active = a) ? $marq.removeClass('inactive') : $marq.addClass('inactive');
+          this.updateNumber();
+          return this;
+        },
+
+        disable: function() { this.active(false); return this; },
+        enable: function() { this.active(true); return this; },
+
+        clearPlaceholder: function() {
+          this.setPlaceholder(null);
+          return this;
+        },
+        setPlaceholder: function(p) {
+          placeholder = p;
+          if (!active) this.updateNumber();
+          return this;
+        },
+
+        didChange: onChange
+
+      };
+
+      // set hover and click for each arrow
+      $.each($.jstepperArrows, function(i,desc) {
+        var $elm = $(arrow[i]),
+            w = arrowWidth ? arrowWidth : $elm.width() ? $elm.width() : 15,
+            h = arrowHeight ? arrowHeight : $elm.height() ? $elm.height() : 24;
+        $elm[0]._index = i;
+        $elm
+          .css({float:'left'})
+          .attr({width:w,height:h,'class':desc.name})
+          .hover(
+            function(e) { $stepper[0].ui._drawArrow(e.target._index, 2); },
+            function(e) { $stepper[0].ui._drawArrow(e.target._index, 1); }
+          )
+          .click(function(e){
+            $stepper[0].ui._doclick(e.target._index);
+            return false;
+          });
+      });
+
+      // init the visuals first time
+  		$stepper[0].ui.refresh();
+
+		}); // this.each
+
+  }; // $.fn.jstepper
+
+})( jQuery );
+
