tool options area; Slightly Better™ draggability

app.js

@@ -76,8 +76,6 @@ app.open = function(){
 		var $tools = $("<div class='jspaint-tools'>");
 		var $tool_options = $("<div class='jspaint-tool-options'>");
 		
-		$tb.append($tools, $tool_options);
-		
 		var $buttons;
 		$.each(tools, function(i, tool){
 			var $b = $("<button class='jspaint-tool'>");
@@ -108,7 +106,7 @@ app.open = function(){
 		});
 		$buttons = $tools.find(".jspaint-tool");
 		
-		return $Component("Tools", "tall", $tb);
+		return $Component("Tools", "tall", $tools.add($tool_options));
 	}
 	function $ColorBox(){
 		var $cb = $("<div>").addClass("jspaint-tool-box");
@@ -120,6 +118,7 @@ app.open = function(){
 	function $Component(name, orientation, $el){
 		//a draggable widget that can be undocked into a window
 		var $c = $("<div>").addClass("jspaint-component");
+		$c.addClass("jspaint-"+name+"-component");
 		$c.append($el);
 		$c.appendTo({
 			tall: $left,
@@ -137,7 +136,7 @@ app.open = function(){
 			e.preventDefault();
 		});
 		$el.on("mousedown",function(e){
-			//return false;
+			return false;
 		});
 		$(window).on("mousemove",function(e){
 			if(!dragging)return;

classic.css

@@ -64,3 +64,7 @@
 	width: 257px;
 	height: 33px;
 }
+
+.jspaint-tool-options {
+	border: 1px inset;
+}

layout.css

@@ -24,13 +24,22 @@ html, body, .jspaint {
 	flex: 1;
 }
 
-.jspaint-vertical > div + c-area { /*hax*/
-	flex-basis: 47px;
+.jspaint-Colors-component { /*hax*/
+	height: 47px;
 	align-items: center;
 }
-.jspaint-tool-box {
+.jspaint-Tools-component { /*hax*/
+	height: 280px;
+	align-items: center;
 	padding-left: 4px;
 	padding-right: 2px;
+	flex-flow: column;
+}
+.jspaint-tool-options {
+	margin-top: 3px;
+	width: 41px;
+	height: 66px;
+	box-sizing: border-box;
 }
 
 .overlay-container {