From f5ab61241bf9519325a36b86ee74ab2df13a4331 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 7 Oct 2014 14:43:45 -0400
Subject: colorpicker presets

---
 .../assets/javascripts/ui/editor/LightControl.js   | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 3eb2861..2b7cfaa 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -10,6 +10,7 @@ var LightControl = View.extend({
     "input #brightness-control": "updateBrightness",
     "input #outline-hue": "updateShadow",
     "input #wall-hue": "updateShadow",
+    "click .presets span": "selectPreset",
   },
   
   initialize: function(){
@@ -114,6 +115,38 @@ var LightControl = View.extend({
     this.setMode(mode)
   },
   
+  presets: {
+    wireframe: {
+      wall: [255,255,255],
+      outline: [0,0,0],
+      floor: [246,246,246],
+      ceiling: [255,255,255],
+    },
+    shaded: {
+      wall: [205,205,204],
+      outline: [0,0,0],
+      floor: [109,116,106],
+      ceiling: [159,163,157],
+    },
+    pfunk: {
+      wall: [255,63,78],
+      outline: [255,246,0],
+      floor: [255,255,0],
+      ceiling: [225,118,252],
+    },
+    seapunk: {
+      wall: [110,255,255],
+      outline: [146,133,255],
+      floor: [89,221,255],
+      ceiling: [139,255,173],
+    },
+  },
+  selectPreset: function(e){
+    var preset = $(e.currentTarget).data('preset')
+    if (! this.presets[preset]) return
+    this.load(this.presets[preset])
+  },
+  
   beginBrightness: function(){
     this.begin()
     $(window).one("mouseup", this.finalize.bind(this))
-- 
cgit v1.2.3-70-g09d2


From 4dede1ce3a31cfb17cbad80749863725a9957d19 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 7 Oct 2014 18:38:43 -0400
Subject: inverse colors

---
 public/assets/javascripts/ui/editor/LightControl.js | 11 ++++++-----
 public/assets/stylesheets/app.css                   |  6 +++++-
 views/controls/editor/light-control.ejs             |  6 +++---
 3 files changed, 14 insertions(+), 9 deletions(-)

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 2b7cfaa..51e6be7 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -134,17 +134,18 @@ var LightControl = View.extend({
       floor: [255,255,0],
       ceiling: [225,118,252],
     },
-    seapunk: {
-      wall: [110,255,255],
-      outline: [146,133,255],
-      floor: [89,221,255],
-      ceiling: [139,255,173],
+    inverse: {
+      wall: [0,0,0],
+      outline: [0,230,255],
+      floor: [0,0,0],
+      ceiling: [0,0,0],
     },
   },
   selectPreset: function(e){
     var preset = $(e.currentTarget).data('preset')
     if (! this.presets[preset]) return
     this.load(this.presets[preset])
+    $(e.currentTarget).addClass('active')
   },
   
   beginBrightness: function(){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b4d176f..f770637 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1529,6 +1529,10 @@ input[type="range"]::-webkit-slider-thumb {
 	width: 50%;
 	float:left;
 	cursor:pointer;
+  border-bottom: 1px transparent solid;
+}
+.presets span.active {
+  border-bottom: 1px dotted;
 }
 .color-swatches span {
 	display: inline-block;
@@ -1589,7 +1593,7 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 12px;
   -webkit-transform: translateY(500px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
-  transform: translateY(450px);
+  transform: translateY(500px);
   transition: -webkit-transform 0.2s ease-in-out;
 	width: 210px;
 }
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index 1fc4484..8f42d8d 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -30,11 +30,11 @@
     <span data-preset="shaded">
       Shaded
     </span>
+    <span data-preset="inverse">
+      Inverse
+    </span>
     <span data-preset="pfunk">
       P.Funk
     </span>
-    <span data-preset="seapunk">
-      SeaPunk
-    </span>
   </div>
 </div>
-- 
cgit v1.2.3-70-g09d2


From 68a2750a283b9ccddca6c4164944a9d4d65155a8 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 10 Oct 2014 18:54:54 -0400
Subject: white outlines on inverse preset

---
 public/assets/javascripts/ui/editor/LightControl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 51e6be7..6100762 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -136,7 +136,7 @@ var LightControl = View.extend({
     },
     inverse: {
       wall: [0,0,0],
-      outline: [0,230,255],
+      outline: [255,255,255],
       floor: [0,0,0],
       ceiling: [0,0,0],
     },
-- 
cgit v1.2.3-70-g09d2


From c777456e398fc0f7aed955596505720e0f13e1a8 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 10 Oct 2014 19:30:19 -0400
Subject: Presets

---
 .../assets/javascripts/ui/editor/EditorToolbar.js  | 42 +++++++--------
 public/assets/javascripts/ui/editor/EditorView.js  |  1 +
 .../assets/javascripts/ui/editor/LightControl.js   | 34 -------------
 public/assets/javascripts/ui/editor/Presets.js     | 59 ++++++++++++++++++++++
 public/assets/stylesheets/app.css                  |  6 +--
 views/controls/editor/presets.ejs                  |  2 +-
 views/partials/scripts.ejs                         |  1 +
 7 files changed, 83 insertions(+), 62 deletions(-)
 create mode 100644 public/assets/javascripts/ui/editor/Presets.js

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 49decc2..4f12a7b 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -7,8 +7,8 @@ var EditorToolbar = View.extend({
 		"click [data-role='toggle-map-view']": 'toggleMap',
 		"click [data-role='toggle-project-settings']": 'toggleSettings',
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
-// 		"click [data-role='resize-media']": 'resizeMedia',
-		"click [data-role='destroy-media']": 'destroyMedia',
+    "click [data-role='toggle-presets']": 'togglePresets',
+// 		"click [data-role='destroy-media']": 'destroyMedia',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
 		"click [data-role='toggle-light-control']": 'toggleLightControl',
 		"click [data-role='toggle-text-editor']": 'toggleTextEditor',
@@ -26,6 +26,7 @@ var EditorToolbar = View.extend({
 	toggleSettings: function(){
 // 	  this.resetMode()
     this.parent.textEditor.hide()
+		this.parent.presets.hide()
 		this.parent.lightControl.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.mediaEditor.hide()
@@ -52,6 +53,7 @@ var EditorToolbar = View.extend({
 	  $(".inuse").removeClass("inuse")
     this.parent.textEditor.hide()
 		this.parent.wallpaperPicker.hide()
+		this.parent.presets.hide()
 		this.parent.lightControl.hide()
 		this.parent.settings.hide()
 	},
@@ -62,28 +64,6 @@ var EditorToolbar = View.extend({
     editor.permissions.add("resize")
     editor.permissions.remove("destroy")
 	},
-
-// 	resizeMedia: function(e, state){
-// 		this.resetControls()
-// 		if (! state && typeof e == "boolean") {
-// 			state = e
-// 			editor.permissions.assign("resize", state)
-// 		}
-// 		else {
-// 			state = editor.permissions.toggle("resize")
-// 		}
-// 		! state && editor.permissions.assign("move", true)
-// 		$(".inuse").removeClass("inuse")
-// 		$("[data-role='resize-media']").toggleClass("inuse", state)
-// 		if (state) {
-// 			if (this.parent.mediaEditor.scenery) {
-//         Scenery.resize.show( this.parent.mediaEditor.scenery )
-//       }
-// 		}
-// 		else {
-// 			Scenery.resize.hide()
-// 		}
-// 	},
 	
 	destroyMedia: function(e, state){
 		this.resetControls()
@@ -113,6 +93,7 @@ var EditorToolbar = View.extend({
 		this.parent.lightControl.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
+		this.parent.presets.hide()
 		this.parent.wallpaperPicker.toggle(state)
 	},
 	
@@ -124,6 +105,7 @@ var EditorToolbar = View.extend({
 		this.parent.wallpaperPicker.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
+		this.parent.presets.hide()
 		this.parent.lightControl.toggle(state)
 	},
 	
@@ -135,9 +117,21 @@ var EditorToolbar = View.extend({
 		this.parent.wallpaperPicker.hide()
 		this.parent.lightControl.hide()
 		this.parent.settings.hide()
+		this.parent.presets.hide()
 		this.parent.textEditor.toggle(state)
   },
 
+	togglePresets: function(){
+		var state = ! $("[data-role='toggle-presets']").hasClass("inuse")
+		this.resetMode()
+		$("[data-role='toggle-presets']").toggleClass("inuse", state)
+		this.parent.mediaEditor.hide()
+		this.parent.wallpaperPicker.hide()
+    this.parent.textEditor.hide()
+		this.parent.settings.hide()
+		this.parent.lightControl.hide()
+		this.parent.presets.toggle(state)
+	},
 })
 
 var editor = new function(){
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index f60b149..b35c872 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -18,6 +18,7 @@ var EditorView = View.extend({
 		this.lightControl = new LightControl ({ parent: this })
 		this.textEditor = new TextEditor ({ parent: this })
 		this.collaborators = new Collaborators ({ parent: this })
+		this.presets = new Presets ({ parent: this })
 	},
 
 	load: function(name){
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 6100762..3eb2861 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -10,7 +10,6 @@ var LightControl = View.extend({
     "input #brightness-control": "updateBrightness",
     "input #outline-hue": "updateShadow",
     "input #wall-hue": "updateShadow",
-    "click .presets span": "selectPreset",
   },
   
   initialize: function(){
@@ -115,39 +114,6 @@ var LightControl = View.extend({
     this.setMode(mode)
   },
   
-  presets: {
-    wireframe: {
-      wall: [255,255,255],
-      outline: [0,0,0],
-      floor: [246,246,246],
-      ceiling: [255,255,255],
-    },
-    shaded: {
-      wall: [205,205,204],
-      outline: [0,0,0],
-      floor: [109,116,106],
-      ceiling: [159,163,157],
-    },
-    pfunk: {
-      wall: [255,63,78],
-      outline: [255,246,0],
-      floor: [255,255,0],
-      ceiling: [225,118,252],
-    },
-    inverse: {
-      wall: [0,0,0],
-      outline: [255,255,255],
-      floor: [0,0,0],
-      ceiling: [0,0,0],
-    },
-  },
-  selectPreset: function(e){
-    var preset = $(e.currentTarget).data('preset')
-    if (! this.presets[preset]) return
-    this.load(this.presets[preset])
-    $(e.currentTarget).addClass('active')
-  },
-  
   beginBrightness: function(){
     this.begin()
     $(window).one("mouseup", this.finalize.bind(this))
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
new file mode 100644
index 0000000..a7e92b6
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -0,0 +1,59 @@
+var Presets = View.extend({
+	el: "#presets",
+	
+	events: {
+    "click .presets span": "selectPreset",
+	},
+
+  presets: {
+    wireframe: {
+      wall: [255,255,255],
+      outline: [0,0,0],
+      floor: [246,246,246],
+      ceiling: [255,255,255],
+    },
+    shaded: {
+      wall: [205,205,204],
+      outline: [0,0,0],
+      floor: [109,116,106],
+      ceiling: [159,163,157],
+    },
+    pfunk: {
+      wall: [255,63,78],
+      outline: [255,246,0],
+      floor: [255,255,0],
+      ceiling: [225,118,252],
+    },
+    inverse: {
+      wall: [0,0,0],
+      outline: [255,255,255],
+      floor: [0,0,0],
+      ceiling: [0,0,0],
+    },
+  },
+  
+  initialize: function(opt){
+    this.parent = opt.parent
+  },
+
+  toggle: function(state){
+    this.$el.toggleClass("active", state);
+  },
+  
+  show: function(){
+    this.toggle(true)
+  },
+  
+  hide: function(){
+    this.toggle(false)
+  },
+
+  selectPreset: function(e){
+    var preset = $(e.currentTarget).data('preset')
+    if (! this.presets[preset]) return
+    this.parent.lightControl.load(this.presets[preset])
+    this.$(".active").removeClass('active')
+    $(e.currentTarget).addClass('active')
+  },
+  
+})
\ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index a40c131..4bae1de 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1430,7 +1430,7 @@ border-left: 1px solid black;
 
 /* WALLPAPER PICKER */
 
-.wallpaper, .presets {
+.wallpaper, #presets {
   right: 80px;
   margin-top: 77px;
   width: 172px;
@@ -1440,7 +1440,7 @@ border-left: 1px solid black;
   transform: translateX(400px);
 	padding: 5px 5px 9px 5px;
 }
-.wallpaper.active, .presets:active {
+.wallpaper.active, #presets.active {
   display:inline-block;
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
@@ -1629,10 +1629,10 @@ input[type="range"]::-webkit-slider-thumb {
 .color-swatches {
   margin-top: 10px;
 }
+
 .presets {
 	margin-top: 10px;
 }
-
 .presets span {
 	font-size:12px;
 	font-weight:500;
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index 2ea4995..a41c527 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -1,4 +1,4 @@
-<div class="vvbox presets">
+<div class="vvbox" id="presets">
   <h4>Preset Styles</h4>
   <div class="presets">
     <span data-preset="wireframe">
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 21bed03..07ee7a5 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -107,6 +107,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/Presets.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/TextEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script>
 
-- 
cgit v1.2.3-70-g09d2


From c31330242541305147a0f2c699d7cc215bd41cd2 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Tue, 14 Oct 2014 20:59:46 -0400
Subject: color swatches

---
 .../assets/javascripts/ui/editor/LightControl.js   |  1 +
 public/assets/javascripts/ui/editor/Presets.js     | 30 ++++++++++++++++++++++
 public/assets/stylesheets/app.css                  | 19 ++++++++++++++
 views/controls/editor/presets.ejs                  |  4 +++
 views/controls/editor/wallpaper.ejs                |  2 +-
 5 files changed, 55 insertions(+), 1 deletion(-)

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 3eb2861..166fc50 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -64,6 +64,7 @@ var LightControl = View.extend({
   pick: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(this.mode, rgb)
+    console.log(rgb)
     Walls.setColor[ this.mode ](rgb)
   },
   
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index a7e92b6..1e70aa2 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -2,8 +2,26 @@ var Presets = View.extend({
 	el: "#presets",
 	
 	events: {
+		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
+    "click .swatches span": "selectColor",
 	},
+	
+	colors: [
+		[255,94,58],
+		[255,149,0],
+		[255,219,76],
+		[76,217,100],
+		[52,170,220],
+		[29,98,240],
+		[198,68,252],
+		[0,0,0],
+		[74,74,74],
+		[125,126,127],
+		[209,211,212],
+		[235,235,235],
+		[255,255,255],
+	],
 
   presets: {
     wireframe: {
@@ -34,6 +52,13 @@ var Presets = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
+    this.$colors = this.$(".colors")
+    this.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
   },
 
   toggle: function(state){
@@ -56,4 +81,9 @@ var Presets = View.extend({
     $(e.currentTarget).addClass('active')
   },
   
+  selectColor: function(e){
+    var preset = $(e.currentTarget).data('color')
+    console.log(preset)
+  },
+  
 })
\ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 038b0c4..731a92b 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -138,10 +138,12 @@ a{
 	display: none;
 	z-index: 10;
 	pointer-events: none;
+	background-size: cover;
 }
 .floatingSwatch.scissors {
   background-image: url(/assets/img/scissors.png) !important;
   background-repeat: no-repeat;
+  background-size: auto;
   border: 0;
   box-shadow: 0 0 transparent;
 }
@@ -1484,6 +1486,23 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
+#presets .colors {
+	margin-bottom: 5px;
+}
+#presets .colors span {
+	display: inline-block;
+	font-size: 0;
+	width: 20px;
+	height: 20px;
+	border: 1px solid #ddd;
+	margin: 0px 2px 0 0;
+	cursor: pointer;
+	transition: transform 0.2s;
+}
+#presets .colors span:hover {
+	transform: translateX(3px) translateY(-3px);
+}
+
 .toolButton {
 	border: 1px solid;
 	display: inline-block;
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index a41c527..70e48e3 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -1,4 +1,8 @@
 <div class="vvbox" id="presets">
+  <h4>Preset Colors</h4>
+  <div class="colors">
+  </div>
+
   <h4>Preset Styles</h4>
   <div class="presets">
     <span data-preset="wireframe">
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index ac025b5..5ca0390 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -14,7 +14,7 @@
     <form>
 
       <span class="ion-ios7-upload-outline upload-icon"></span>
-      <label>Upload wallpaper</label>
+      <label>Upload Wallpaper</label>
       <input type="file" accept="image/*" class="file" multiple>
     </form>
 <!-- 
-- 
cgit v1.2.3-70-g09d2


From f0c06d7e9fb004e840821b502a6c46214f6757fd Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Wed, 15 Oct 2014 09:57:35 -0400
Subject: -log

---
 public/assets/javascripts/ui/editor/LightControl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 166fc50..34a5a51 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -64,7 +64,7 @@ var LightControl = View.extend({
   pick: function(rgb, Lab){
     this.labColor = Lab
     this.setSwatchColor(this.mode, rgb)
-    console.log(rgb)
+    // console.log(rgb)
     Walls.setColor[ this.mode ](rgb)
   },
   
-- 
cgit v1.2.3-70-g09d2


From 7089dded0589d45b00a6d4f2a3d1eb2adcf11d1b Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 15 Oct 2014 12:56:50 -0400
Subject: more help text

---
 .../assets/javascripts/ui/editor/EditorSettings.js |  3 ++
 public/assets/javascripts/ui/editor/HelpCursor.js  |  6 ++--
 .../assets/javascripts/ui/editor/LightControl.js   | 32 +++++++++++++++++++---
 public/assets/javascripts/ui/editor/MediaViewer.js |  2 ++
 public/assets/javascripts/ui/editor/Presets.js     | 24 +---------------
 .../javascripts/ui/editor/WallpaperPicker.js       |  1 +
 public/assets/stylesheets/app.css                  |  7 +++--
 views/controls/builder/info.ejs                    |  2 +-
 views/controls/editor/light-control.ejs            |  1 -
 9 files changed, 43 insertions(+), 35 deletions(-)

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index ac361a7..e47739b 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -121,6 +121,9 @@ var EditorSettings = FormView.extend({
 		
  	  $(".inuse").removeClass("inuse")
 		$("[data-role='toggle-project-settings']").toggleClass("inuse", state)
+    if (state) {
+      this.parent.cursor.show("settings")
+    }
 	},
 
 	enterSubmit: function (e) {
diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
index b2f411d..4a6e616 100644
--- a/public/assets/javascripts/ui/editor/HelpCursor.js
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -7,8 +7,8 @@ var HelpCursor = View.extend({
 	  media: "This is where you pick media to go on the walls.  You can upload media, paste links, or use some of the found media.",
 	  presets: "These presets will affect on all the walls.  Click some of them to see the walls change.",
 	  wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.",
-	  colors: "",
-	  settings: "This is where you publish your project.",
+	  colors: "Use these colors to change the color of the walls, floor, and ceiling.",
+	  settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.",
 	},
 	shown: {},
 
@@ -21,7 +21,7 @@ var HelpCursor = View.extend({
   },
 
   show: function(name){
-    if (name) this.showMessage(name)
+    this.showMessage(name)
     this.$el.show()
   },
 
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 34a5a51..bb4454a 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -5,14 +5,28 @@ var LightControl = View.extend({
   events: {
     "mousedown": "stopPropagation",
     "click .color-swatches span": "select",
-    "input #shadow-control": "updateShadow",
     "mousedown #brightness-control": "beginBrightness",
     "input #brightness-control": "updateBrightness",
-    "input #outline-hue": "updateShadow",
-    "input #wall-hue": "updateShadow",
   },
+
+	colors: [
+		[255,94,58],
+		[255,149,0],
+		[255,219,76],
+		[76,217,100],
+		[52,170,220],
+		[29,98,240],
+		[198,68,252],
+		[0,0,0],
+		[74,74,74],
+		[125,126,127],
+		[209,211,212],
+		[235,235,235],
+		[255,255,255],
+	],
   
-  initialize: function(){
+  initialize: function(opt){
+    this.parent = opt.parent
 
     this.colorPicker = new LabColorPicker(this, 180, 180)
     this.$("#color-picker").append( this.colorPicker.canvas )
@@ -27,6 +41,15 @@ var LightControl = View.extend({
       ceiling: this.$("#ceiling-color"),
     }
     this.$brightnessControl = this.$("#brightness-control")
+
+    this.$colors = this.$(".colors")
+    this.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
+    
   },
 
   modes: [ "wall", "outline", "floor", "ceiling" ],
@@ -54,6 +77,7 @@ var LightControl = View.extend({
   },
   
   show: function(){
+    this.parent.cursor.show("colors")
     this.toggle(true)
   },
   
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index b270be5..df77fb1 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -68,6 +68,7 @@ var MediaViewer = ModalView.extend({
 			this.loadTrending()
 		}
 		else {
+		  this.parent.cursor.show("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -146,6 +147,7 @@ var MediaViewer = ModalView.extend({
 		}
 		else  {
 			this.loaded = true
+      this.parent.cursor.show("media")
 			this.__super__.show.call(this)
 		}
 	},
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index 1e70aa2..6222e33 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -7,22 +7,6 @@ var Presets = View.extend({
     "click .swatches span": "selectColor",
 	},
 	
-	colors: [
-		[255,94,58],
-		[255,149,0],
-		[255,219,76],
-		[76,217,100],
-		[52,170,220],
-		[29,98,240],
-		[198,68,252],
-		[0,0,0],
-		[74,74,74],
-		[125,126,127],
-		[209,211,212],
-		[235,235,235],
-		[255,255,255],
-	],
-
   presets: {
     wireframe: {
       wall: [255,255,255],
@@ -52,13 +36,6 @@ var Presets = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
-    this.$colors = this.$(".colors")
-    this.colors.forEach(function(color){
-    	var $swatch = $("<span>")
-    	$swatch.css("background-color","rgb(" + color + ")")
-    	$swatch.data('color', color)
-    	this.$colors.append($swatch)
-    }.bind(this))
   },
 
   toggle: function(state){
@@ -66,6 +43,7 @@ var Presets = View.extend({
   },
   
   show: function(){
+    this.parent.cursor.show("presets")
     this.toggle(true)
   },
   
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 6bf2542..541ab31 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -28,6 +28,7 @@ var WallpaperPicker = UploadView.extend({
   loaded: false,
 	show: function(){
 		if (! this.loaded) {
+      this.parent.cursor.show("wallpaper")
 			this.load()
 		}
 		else {
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 0140dc6..250ae67 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1485,10 +1485,11 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
-#presets .colors {
+.vvbox .colors {
+  max-width: 170px;
 	margin-bottom: 5px;
 }
-#presets .colors span {
+.vvbox .colors span {
 	display: inline-block;
 	font-size: 0;
 	width: 20px;
@@ -1498,7 +1499,7 @@ border-left: 1px solid black;
 	cursor: pointer;
 	transition: transform 0.2s;
 }
-#presets .colors span:hover {
+.vvbox .colors span:hover {
 	transform: translateX(3px) translateY(-3px);
 }
 
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
index 54bb38e..2762207 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -3,7 +3,7 @@
 
   <div class="no-selection">
     Click and drag to make a new room.
-    Click a room to select it.
+    Click a room to select, move or resize it.
     <br><br>
     Press ESC to toggle the map.
   </div>
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index 4604a7a..99d68f5 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -1,7 +1,6 @@
 <div class="vvbox lightcontrol">
 	<h4>Edit Room Colors</h4>
 
-  <h4>Preset Colors</h4>
   <div class="colors">
   </div>
 
-- 
cgit v1.2.3-70-g09d2


From 6ad93b573ed6e9b4b339fa0d746bf21b8f827fdb Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 15 Oct 2014 17:09:45 -0400
Subject: help messages on button, starting drag stuff

---
 public/assets/javascripts/app.js                   |  4 --
 .../javascripts/mx/extensions/mx.movements.js      | 12 ++++-
 .../assets/javascripts/ui/editor/EditorSettings.js |  2 +-
 public/assets/javascripts/ui/editor/HelpCursor.js  | 54 ++++++++++++++--------
 .../assets/javascripts/ui/editor/LightControl.js   |  2 +-
 public/assets/javascripts/ui/editor/MediaViewer.js |  4 +-
 public/assets/javascripts/ui/editor/Presets.js     |  2 +-
 .../javascripts/ui/editor/WallpaperPicker.js       |  2 +-
 8 files changed, 52 insertions(+), 30 deletions(-)

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 98e1820..f8372cd 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -18,10 +18,6 @@ else {
 new WOW().init();
 
 
-$('#help-button').click( function(){
-   $('body').chardinJs('start')
-});
-
 var scene, cam, map;
 
 var app = new function(){}
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index b158625..40e786d 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -129,9 +129,19 @@ MX.Movements = function (cam) {
 					}
 					else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
 						app.controller.mediaViewer.hide()
+						$(".inuse").removeClass("inuse")
 					}
 					else if (app.controller.lightControl.$el.hasClass('active')) {
 						app.controller.lightControl.hide()
+						$(".inuse").removeClass("inuse")
+					}
+					else if (app.controller.wallpaperPicker.$el.hasClass('active')) {
+						app.controller.wallpaperPicker.hide()
+						$(".inuse").removeClass("inuse")
+					}
+					else if (app.controller.presets.$el.hasClass('active')) {
+						app.controller.presets.hide()
+						$(".inuse").removeClass("inuse")
 					}
 					else {
 						app.controller.toolbar.toggleMap()
@@ -242,7 +252,7 @@ MX.Movements = function (cam) {
 			
 			var ry = cam.rotationY
 			var s = creeping ? scale * creepFactor : scale
-			var vrrrr = creeping ? vr * creepFactor * 5 : vr
+			var vrrrr = creeping ? vr * creepFactor * 5 : vr * 0.5
 			var moving = moveForward || moveBackward || moveRight || moveLeft || moveUp || moveDown || turnLeft || turnRight || turnUp || turnDown
 			vx = vz = 0
 
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index e47739b..c0c140f 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -122,7 +122,7 @@ var EditorSettings = FormView.extend({
  	  $(".inuse").removeClass("inuse")
 		$("[data-role='toggle-project-settings']").toggleClass("inuse", state)
     if (state) {
-      this.parent.cursor.show("settings")
+      this.parent.cursor.message("settings")
     }
 	},
 
diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
index 4a6e616..8bfaef8 100644
--- a/public/assets/javascripts/ui/editor/HelpCursor.js
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -2,6 +2,8 @@
 var HelpCursor = View.extend({
 	el: "#helpCursor",
 	
+	active: false,
+	
 	messages: {
 	  start: "Welcome to Vvalls!  Click one of the tools at right to learn how it works.",
 	  media: "This is where you pick media to go on the walls.  You can upload media, paste links, or use some of the found media.",
@@ -10,33 +12,47 @@ var HelpCursor = View.extend({
 	  colors: "Use these colors to change the color of the walls, floor, and ceiling.",
 	  settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.",
 	},
-	shown: {},
 
   initialize: function(){
-    $(window).mousemove(function(e){
-      this.el.style.left = e.pageX + "px"
-      this.el.style.top = e.pageY + "px"
-    }.bind(this))
-    this.show("start")
+		$('#help-button').click(this.toggle.bind(this));
   },
-
-  show: function(name){
-    this.showMessage(name)
+  
+  toggle: function(){
+    this.active ? this.stop() : this.start()
+  },
+  
+  start: function(){
+    if (this.active) return
+    this.active = true
+    this.message('start')
     this.$el.show()
+//     $('body').chardinJs('start')
+//     $(window).one("click", function(){
+//       $('body').chardinJs('stop')
+//     })
+    this.move({ pageX: -1000, pageY: -10000 })
+    this.moveFn = this.move.bind(this)
+    document.addEventListener("mousemove", this.moveFn)
   },
-
-  hide: function(){
+  
+  stop: function(){
+    this.active = false
     this.$el.hide()
+    document.removeEventListener("mousemove", this.moveFn)
+  },
+  
+  move: function(e){
+    this.el.style.left = e.pageX + "px"
+    this.el.style.top = e.pageY + "px"
+  },
+
+  show: function(name){
+    this.showMessage(name)
   },
 
-  showMessage: function(name){
-    if (+(this.shown[name] || 0) < 2) {
-      this.$el.html(this.messages[name])
-      this.shown[name] = (+this.shown[name] || 0) + 1
-    }
-    else {
-      this.$el.html("")
-    }
+  message: function(name){
+    if (! this.active) return
+    this.$el.html(this.messages[name])
   },
 
 })
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index bb4454a..10f8d2c 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -77,7 +77,7 @@ var LightControl = View.extend({
   },
   
   show: function(){
-    this.parent.cursor.show("colors")
+    this.parent.cursor.message("colors")
     this.toggle(true)
   },
   
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index df77fb1..e196e41 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -68,7 +68,7 @@ var MediaViewer = ModalView.extend({
 			this.loadTrending()
 		}
 		else {
-		  this.parent.cursor.show("media")
+		  this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -147,7 +147,7 @@ var MediaViewer = ModalView.extend({
 		}
 		else  {
 			this.loaded = true
-      this.parent.cursor.show("media")
+      this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index 6222e33..35b5b58 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -43,7 +43,7 @@ var Presets = View.extend({
   },
   
   show: function(){
-    this.parent.cursor.show("presets")
+    this.parent.cursor.message("presets")
     this.toggle(true)
   },
   
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 9583376..ad30ad8 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -29,7 +29,7 @@ var WallpaperPicker = UploadView.extend({
   loaded: false,
 	show: function(){
 		if (! this.loaded) {
-      this.parent.cursor.show("wallpaper")
+      this.parent.cursor.message("wallpaper")
 			this.load()
 		}
 		else {
-- 
cgit v1.2.3-70-g09d2


From 513a272520222784d67dc22c1ac833aa47a9c844 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Thu, 16 Oct 2014 00:58:28 -0400
Subject: rename light control to color control

---
 .../javascripts/mx/extensions/mx.movements.js      |   4 +-
 .../javascripts/rectangles/engine/scenery/undo.js  |   2 +-
 .../javascripts/ui/builder/BuilderSettings.js      |   2 +-
 .../assets/javascripts/ui/builder/BuilderView.js   |   2 +-
 .../assets/javascripts/ui/editor/ColorControl.js   | 305 +++++++++++++++++++++
 .../assets/javascripts/ui/editor/EditorSettings.js |   4 +-
 .../assets/javascripts/ui/editor/EditorToolbar.js  |  20 +-
 public/assets/javascripts/ui/editor/EditorView.js  |   2 +-
 .../assets/javascripts/ui/editor/LightControl.js   | 305 ---------------------
 public/assets/javascripts/ui/editor/Presets.js     |   2 +-
 public/assets/stylesheets/app.css                  |   6 +-
 views/controls/editor/color-control.ejs            |  28 ++
 views/controls/editor/light-control.ejs            |  28 --
 views/controls/editor/toolbar.ejs                  |   2 +-
 views/editor.ejs                                   |   2 +-
 views/partials/scripts.ejs                         |   2 +-
 16 files changed, 358 insertions(+), 358 deletions(-)
 create mode 100644 public/assets/javascripts/ui/editor/ColorControl.js
 delete mode 100644 public/assets/javascripts/ui/editor/LightControl.js
 create mode 100644 views/controls/editor/color-control.ejs
 delete mode 100644 views/controls/editor/light-control.ejs

(limited to 'public/assets/javascripts/ui/editor/LightControl.js')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 40e786d..c2a2473 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -131,8 +131,8 @@ MX.Movements = function (cam) {
 						app.controller.mediaViewer.hide()
 						$(".inuse").removeClass("inuse")
 					}
-					else if (app.controller.lightControl.$el.hasClass('active')) {
-						app.controller.lightControl.hide()
+					else if (app.controller.colorControl.$el.hasClass('active')) {
+						app.controller.colorControl.hide()
 						$(".inuse").removeClass("inuse")
 					}
 					else if (app.controller.wallpaperPicker.$el.hasClass('active')) {
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js
index bee8c49..ff4f911 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/undo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js
@@ -122,7 +122,7 @@
       type: "update-colors",
       undo: function(state){
         Walls.setColor[ state.mode ]( state.rgb )
-        app.router.editorView.lightControl.setSwatchColor( state.mode, state.rgb )
+        app.router.editorView.colorControl.setSwatchColor( state.mode, state.rgb )
 
         Minotaur.watch( app.router.editorView.settings )
       },
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index fe67e9b..c8c8880 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -30,7 +30,7 @@ var BuilderSettings = FormView.extend({
 		this.$id.val(data._id)
 		this.$name.val(data.name)
 
-		this.parent.lightControl.loadDefaults()
+		this.parent.colorControl.loadDefaults()
 
 		data.rooms && Rooms.deserialize(data.rooms)
 		data.startPosition && scene.camera.move(data.startPosition)
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index a89111f..735274e 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -11,7 +11,7 @@ var BuilderView = View.extend({
 		this.info = new BuilderInfo ({ parent: this })
 		this.toolbar = new BuilderToolbar ({ parent: this })
 		this.settings = new BuilderSettings ({ parent: this })
-		this.lightControl = new LightControl ({ parent: this })
+		this.colorControl = new ColorControl ({ parent: this })
 	},
 
 	load: function(name){
diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
new file mode 100644
index 0000000..26358f1
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -0,0 +1,305 @@
+
+var ColorControl = View.extend({
+  el: ".colorcontrol",
+  
+  events: {
+    "mousedown": "stopPropagation",
+    "click .color-swatches span": "select",
+    "mousedown #brightness-control": "beginBrightness",
+    "input #brightness-control": "updateBrightness",
+  },
+
+	colors: [
+		[255,94,58],
+		[255,149,0],
+		[255,219,76],
+		[76,217,100],
+		[52,170,220],
+		[29,98,240],
+		[198,68,252],
+		[0,0,0],
+		[74,74,74],
+		[125,126,127],
+		[209,211,212],
+		[235,235,235],
+		[255,255,255],
+	],
+  
+  initialize: function(opt){
+    this.parent = opt.parent
+
+    this.colorPicker = new LabColorPicker(this, 180, 180)
+    this.$("#color-picker").append( this.colorPicker.canvas )
+    this.$("#color-picker").append( this.colorPicker.cursor )
+    
+    this.$swatches = this.$(".swatch")
+    this.$labels = this.$(".swatch + label")
+    this.$swatch = {
+      wall: this.$("#wall-color"),
+      outline: this.$("#outline-color"),
+      floor: this.$("#floor-color"),
+      ceiling: this.$("#ceiling-color"),
+    }
+    this.$brightnessControl = this.$("#brightness-control")
+
+    this.$colors = this.$(".colors")
+    this.colors.forEach(function(color){
+    	var $swatch = $("<span>")
+    	$swatch.css("background-color","rgb(" + color + ")")
+    	$swatch.data('color', color)
+    	this.$colors.append($swatch)
+    }.bind(this))
+    
+  },
+
+  modes: [ "wall", "outline", "floor", "ceiling" ],
+
+  load: function(data){
+    this.modes.forEach(function(mode){
+      Walls.setColor[mode](data[mode])
+      this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
+    }.bind(this))
+    this.setMode("wall")
+  },
+  
+  loadDefaults: function(){
+    var colors = {
+      wall: app.defaults.colors.wall.slice(),
+      outline: app.defaults.colors.outline.slice(),
+      floor: app.defaults.colors.floor.slice(),
+      ceiling: app.defaults.colors.ceiling.slice(),
+    }
+    this.load(colors)
+  },
+  
+  toggle: function(state){
+    this.$el.toggleClass("active", state);
+  },
+  
+  show: function(){
+    this.parent.cursor.message("colors")
+    this.toggle(true)
+  },
+  
+  hide: function(){
+    this.toggle(false)
+  },
+  
+  pick: function(rgb, Lab){
+    this.labColor = Lab
+    this.setSwatchColor(this.mode, rgb)
+    // console.log(rgb)
+    Walls.setColor[ this.mode ](rgb)
+  },
+  
+  setSwatchColor: function(mode, rgb) {
+    this.$swatch[ mode ].css("background-color", rgb_string(rgb))
+  },
+  
+  initialState: null,
+  
+  begin: function(){
+    this.initialState = this.serialize()
+  },
+  
+  serialize: function(){
+    return {
+      mode: this.mode,
+      rgb: Walls.colors[ this.mode ]
+    }
+  },
+  
+  finalize: function(){
+    if (! this.initialState) { return }
+    UndoStack.push({
+      type: 'update-colors',
+      undo: this.initialState,
+      redo: this.serialize(),
+    })
+
+    this.initialState = null
+
+    // TODO: watch individual wall object here
+    Minotaur.watch( app.router.editorView.settings )
+  },
+  
+  setMode: function (mode) {
+    var color, brightness
+    this.mode = mode
+    this.$(".active").removeClass("active")
+    this.$swatch[ mode ].parent().addClass("active")
+    color = Walls.colors[ mode ]
+    
+    this.labColor = this.colorPicker.load(color)
+    this.$brightnessControl.val( this.labColor[0] )
+  },
+  
+  select: function(e){
+    var mode = $('.swatch', e.currentTarget).data('mode')
+    this.setMode(mode)
+  },
+  
+  beginBrightness: function(){
+    this.begin()
+    $(window).one("mouseup", this.finalize.bind(this))
+  },
+  
+  updateBrightness: function(){
+    this.labColor[0] = parseFloat( this.$brightnessControl.val() )
+    var rgb = this.colorPicker.setLab( this.labColor )
+    this.pick(rgb, this.labColor)
+  },
+
+})
+
+var LabColorPicker = function (parent, w, h) {
+  var base = this
+  var canvas = this.canvas = document.createElement('canvas')
+  var ctx = this.ctx = canvas.getContext('2d')
+  var imageData = ctx.createImageData(w,h)
+  var data = imageData.data
+
+  var cursor = this.cursor = document.createElement("div")
+  cursor.className = "colorPickerCursor"
+
+  canvas.width = w
+  canvas.height = h
+  canvas.className = "colorPicker"
+
+  var ww = w-1
+  var hh = h-1
+  
+  var L_range = [0, 110]
+  var a_range = [-86.185, 98.254]
+  var b_range = [-107.863, 94.482]
+
+  var rgb = [0,0,0]
+  
+  var val = 80
+  
+  this.mouse = new mouse({
+    el: canvas,
+    down: function(e, cursor){
+      parent.begin()
+      cursor.x.a = -cursor.x.a
+      base.pick(cursor.x.a, cursor.y.a)
+    },
+    drag: function(e, cursor){
+      cursor.x.b = -cursor.x.b
+      base.pick(cursor.x.b, cursor.y.b)
+    },
+    up: function(){
+      parent.finalize()
+    }
+  })
+  
+  this.setLab = function(Lab) {
+    val = Lab[0]
+    this.paint()
+    var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round)
+    return rgb
+  }
+  this.pick = function(i, j){
+    i = clamp(i, 0, w)
+    j = clamp(j, 0, h)
+    var x = mix( i/ww, a_range[0], a_range[1] )
+    var y = mix( j/hh, b_range[0], b_range[1] )
+    var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round)
+    this.moveCursor(i, j)
+    parent.pick( rgb, [val,x,y] )
+  }
+  this.load = function(rgba){
+    var Lab = xyz2hunterlab(rgb2xyz(rgba))
+    var val = clamp( Lab[0], L_range[0], L_range[1] )
+    var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww )
+    var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh )
+    
+    this.moveCursor(x,y)
+    this.setLab(Lab)
+    return Lab
+  }
+  this.moveCursor = function(x,y){
+    cursor.style.left = x + "px"
+    cursor.style.top = y + "px"
+  }
+  this.paint = function() {
+    val = clamp(val, L_range[0], L_range[1])
+    var x, y, t
+    for (var i = 0; i < w; i++) {
+      for (var j = 0; j < h; j++) {
+        x = mix( i/ww, a_range[0], a_range[1] )
+        y = mix( j/hh, b_range[0], b_range[1] )
+        t = (j*w + i) * 4
+        rgb = xyz2rgb(hunterlab2xyz(val, x, y))
+        data[t] = Math.round( rgb[0] )
+        data[t+1] = Math.round( rgb[1] )
+        data[t+2] = Math.round( rgb[2] )
+        data[t+3] = 255
+      }
+    }
+    ctx.putImageData(imageData,0,0)
+  }
+  
+  function hunterlab2xyz (L,a,b) {
+    var_Y = L / 10
+    var_X = a / 17.5 * L / 10
+    var_Z = b / 7 * L / 10
+
+    Y = Math.pow(var_Y, 2)
+    X = ( var_X + Y ) / 1.02
+    Z = -( var_Z - Y ) / 0.847
+    xyz = [X,Y,Z]
+  }
+  function xyz2rgb(){
+    var var_X = xyz[0] / 100        //X from 0 to  95.047      (Observer = 2°, Illuminant = D65)
+    var var_Y = xyz[1] / 100        //Y from 0 to 100.000
+    var var_Z = xyz[2] / 100        //Z from 0 to 108.883
+
+    var_R = var_X *  3.2406 + var_Y * -1.5372 + var_Z * -0.4986
+    var_G = var_X * -0.9689 + var_Y *  1.8758 + var_Z *  0.0415
+    var_B = var_X *  0.0557 + var_Y * -0.2040 + var_Z *  1.0570
+
+    if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055
+    else                     var_R = 12.92 * var_R
+    if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055
+    else                     var_G = 12.92 * var_G
+    if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055
+    else                     var_B = 12.92 * var_B
+
+    rgb[0] = clamp(var_R * 255, 0, 255)
+    rgb[1] = clamp(var_G * 255, 0, 255)
+    rgb[2] = clamp(var_B * 255, 0, 255)
+    return rgb
+  }
+  function rgb2xyz(RGB){
+    var var_R = ( RGB[0] / 255 )        // R from 0 to 255
+    var var_G = ( RGB[1] / 255 )        // G from 0 to 255
+    var var_B = ( RGB[2] / 255 )        // B from 0 to 255
+
+    if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4)
+    else                   var_R = var_R / 12.92
+    if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4)
+    else                   var_G = var_G / 12.92
+    if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4)
+    else                   var_B = var_B / 12.92
+
+    var_R = var_R * 100
+    var_G = var_G * 100
+    var_B = var_B * 100
+
+    //Observer. = 2°, Illuminant = D65
+    var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805
+    var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722
+    var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505
+    return [x,y,z]
+  }
+  function xyz2hunterlab (XYZ) {
+    var X = XYZ[0]
+    var Y = XYZ[1] || 1e-6  // otherwise divide-by-zero error when converting rgb(0,0,0)
+    var Z = XYZ[2]
+    var L = 10 * sqrt( Y )
+    var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) )
+    var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) )
+    return [L,a,b]
+  }
+}
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index c0c140f..664b102 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -45,10 +45,10 @@ var EditorSettings = FormView.extend({
 		}
 
     if (data.colors && data.colors.wall) {
-      this.parent.lightControl.load(data.colors)
+      this.parent.colorControl.load(data.colors)
     }
     else {
-		  this.parent.lightControl.loadDefaults()
+		  this.parent.colorControl.loadDefaults()
     }
     
     if (data.walls) {
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index a460bbf..dceae3c 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -10,7 +10,7 @@ var EditorToolbar = View.extend({
 		"click [data-role='open-media-viewer']": 'openMediaViewer',
     "click [data-role='toggle-presets']": 'togglePresets',
 		"click [data-role='toggle-wallpaper-panel']": 'toggleWallpaper',
-		"click [data-role='toggle-light-control']": 'toggleLightControl',
+		"click [data-role='toggle-color-control']": 'toggleColorControl',
 		"click [data-role='toggle-text-editor']": 'toggleTextEditor',
 	},
 	
@@ -46,7 +46,7 @@ var EditorToolbar = View.extend({
     this.toggleMap(false)
     this.parent.textEditor.hide()
 		this.parent.presets.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.mediaEditor.hide()
 		this.parent.settings.toggle()
@@ -75,7 +75,7 @@ var EditorToolbar = View.extend({
     this.parent.textEditor.hide()
 		this.parent.wallpaperPicker.hide()
 		this.parent.presets.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.parent.settings.hide()
 	},
 	
@@ -111,7 +111,7 @@ var EditorToolbar = View.extend({
 		this.resetMode()
 		$("[data-role='toggle-wallpaper-panel']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
@@ -119,17 +119,17 @@ var EditorToolbar = View.extend({
 		this.parent.wallpaperPicker.toggle(state)
 	},
 	
-	toggleLightControl: function(){
-		var state = ! $("[data-role='toggle-light-control']").hasClass("inuse")
+	toggleColorControl: function(){
+		var state = ! $("[data-role='toggle-color-control']").hasClass("inuse")
 		this.resetMode()
-		$("[data-role='toggle-light-control']").toggleClass("inuse", state)
+		$("[data-role='toggle-color-control']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
 		this.parent.wallpaperPicker.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
 		this.toggleMap(false)
-		this.parent.lightControl.toggle(state)
+		this.parent.colorControl.toggle(state)
 	},
 	
 	toggleTextEditor: function(){
@@ -138,7 +138,7 @@ var EditorToolbar = View.extend({
 		$("[data-role='toggle-text-editor']").toggleClass("inuse", state)
 		this.parent.mediaEditor.hide()
 		this.parent.wallpaperPicker.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.parent.settings.hide()
 		this.parent.presets.hide()
 		this.toggleMap(false)
@@ -153,7 +153,7 @@ var EditorToolbar = View.extend({
 		this.parent.wallpaperPicker.hide()
     this.parent.textEditor.hide()
 		this.parent.settings.hide()
-		this.parent.lightControl.hide()
+		this.parent.colorControl.hide()
 		this.toggleMap(false)
 		this.parent.presets.toggle(state)
 	},
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 05d1bec..9946feb 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -17,7 +17,7 @@ var EditorView = View.extend({
 		this.mediaUpload = new MediaUpload ({ parent: this })
 		this.mediaEditor = new MediaEditor ({ parent: this })
 		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
-		this.lightControl = new LightControl ({ parent: this })
+		this.colorControl = new ColorControl ({ parent: this })
 		this.textEditor = new TextEditor ({ parent: this })
 		this.collaborators = new Collaborators ({ parent: this })
 		this.presets = new Presets ({ parent: this })
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
deleted file mode 100644
index 10f8d2c..0000000
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ /dev/null
@@ -1,305 +0,0 @@
-
-var LightControl = View.extend({
-  el: ".lightcontrol",
-  
-  events: {
-    "mousedown": "stopPropagation",
-    "click .color-swatches span": "select",
-    "mousedown #brightness-control": "beginBrightness",
-    "input #brightness-control": "updateBrightness",
-  },
-
-	colors: [
-		[255,94,58],
-		[255,149,0],
-		[255,219,76],
-		[76,217,100],
-		[52,170,220],
-		[29,98,240],
-		[198,68,252],
-		[0,0,0],
-		[74,74,74],
-		[125,126,127],
-		[209,211,212],
-		[235,235,235],
-		[255,255,255],
-	],
-  
-  initialize: function(opt){
-    this.parent = opt.parent
-
-    this.colorPicker = new LabColorPicker(this, 180, 180)
-    this.$("#color-picker").append( this.colorPicker.canvas )
-    this.$("#color-picker").append( this.colorPicker.cursor )
-    
-    this.$swatches = this.$(".swatch")
-    this.$labels = this.$(".swatch + label")
-    this.$swatch = {
-      wall: this.$("#wall-color"),
-      outline: this.$("#outline-color"),
-      floor: this.$("#floor-color"),
-      ceiling: this.$("#ceiling-color"),
-    }
-    this.$brightnessControl = this.$("#brightness-control")
-
-    this.$colors = this.$(".colors")
-    this.colors.forEach(function(color){
-    	var $swatch = $("<span>")
-    	$swatch.css("background-color","rgb(" + color + ")")
-    	$swatch.data('color', color)
-    	this.$colors.append($swatch)
-    }.bind(this))
-    
-  },
-
-  modes: [ "wall", "outline", "floor", "ceiling" ],
-
-  load: function(data){
-    this.modes.forEach(function(mode){
-      Walls.setColor[mode](data[mode])
-      this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
-    }.bind(this))
-    this.setMode("wall")
-  },
-  
-  loadDefaults: function(){
-    var colors = {
-      wall: app.defaults.colors.wall.slice(),
-      outline: app.defaults.colors.outline.slice(),
-      floor: app.defaults.colors.floor.slice(),
-      ceiling: app.defaults.colors.ceiling.slice(),
-    }
-    this.load(colors)
-  },
-  
-  toggle: function(state){
-    this.$el.toggleClass("active", state);
-  },
-  
-  show: function(){
-    this.parent.cursor.message("colors")
-    this.toggle(true)
-  },
-  
-  hide: function(){
-    this.toggle(false)
-  },
-  
-  pick: function(rgb, Lab){
-    this.labColor = Lab
-    this.setSwatchColor(this.mode, rgb)
-    // console.log(rgb)
-    Walls.setColor[ this.mode ](rgb)
-  },
-  
-  setSwatchColor: function(mode, rgb) {
-    this.$swatch[ mode ].css("background-color", rgb_string(rgb))
-  },
-  
-  initialState: null,
-  
-  begin: function(){
-    this.initialState = this.serialize()
-  },
-  
-  serialize: function(){
-    return {
-      mode: this.mode,
-      rgb: Walls.colors[ this.mode ]
-    }
-  },
-  
-  finalize: function(){
-    if (! this.initialState) { return }
-    UndoStack.push({
-      type: 'update-colors',
-      undo: this.initialState,
-      redo: this.serialize(),
-    })
-
-    this.initialState = null
-
-    // TODO: watch individual wall object here
-    Minotaur.watch( app.router.editorView.settings )
-  },
-  
-  setMode: function (mode) {
-    var color, brightness
-    this.mode = mode
-    this.$(".active").removeClass("active")
-    this.$swatch[ mode ].parent().addClass("active")
-    color = Walls.colors[ mode ]
-    
-    this.labColor = this.colorPicker.load(color)
-    this.$brightnessControl.val( this.labColor[0] )
-  },
-  
-  select: function(e){
-    var mode = $('.swatch', e.currentTarget).data('mode')
-    this.setMode(mode)
-  },
-  
-  beginBrightness: function(){
-    this.begin()
-    $(window).one("mouseup", this.finalize.bind(this))
-  },
-  
-  updateBrightness: function(){
-    this.labColor[0] = parseFloat( this.$brightnessControl.val() )
-    var rgb = this.colorPicker.setLab( this.labColor )
-    this.pick(rgb, this.labColor)
-  },
-
-})
-
-var LabColorPicker = function (parent, w, h) {
-  var base = this
-  var canvas = this.canvas = document.createElement('canvas')
-  var ctx = this.ctx = canvas.getContext('2d')
-  var imageData = ctx.createImageData(w,h)
-  var data = imageData.data
-
-  var cursor = this.cursor = document.createElement("div")
-  cursor.className = "colorPickerCursor"
-
-  canvas.width = w
-  canvas.height = h
-  canvas.className = "colorPicker"
-
-  var ww = w-1
-  var hh = h-1
-  
-  var L_range = [0, 110]
-  var a_range = [-86.185, 98.254]
-  var b_range = [-107.863, 94.482]
-
-  var rgb = [0,0,0]
-  
-  var val = 80
-  
-  this.mouse = new mouse({
-    el: canvas,
-    down: function(e, cursor){
-      parent.begin()
-      cursor.x.a = -cursor.x.a
-      base.pick(cursor.x.a, cursor.y.a)
-    },
-    drag: function(e, cursor){
-      cursor.x.b = -cursor.x.b
-      base.pick(cursor.x.b, cursor.y.b)
-    },
-    up: function(){
-      parent.finalize()
-    }
-  })
-  
-  this.setLab = function(Lab) {
-    val = Lab[0]
-    this.paint()
-    var rgb = xyz2rgb(hunterlab2xyz(Lab[0], Lab[1], Lab[2])).map(Math.round)
-    return rgb
-  }
-  this.pick = function(i, j){
-    i = clamp(i, 0, w)
-    j = clamp(j, 0, h)
-    var x = mix( i/ww, a_range[0], a_range[1] )
-    var y = mix( j/hh, b_range[0], b_range[1] )
-    var rgb = xyz2rgb(hunterlab2xyz(val, x, y)).map(Math.round)
-    this.moveCursor(i, j)
-    parent.pick( rgb, [val,x,y] )
-  }
-  this.load = function(rgba){
-    var Lab = xyz2hunterlab(rgb2xyz(rgba))
-    var val = clamp( Lab[0], L_range[0], L_range[1] )
-    var x = mix( norm(Lab[1], a_range[0], a_range[1]), 0, ww )
-    var y = mix( norm(Lab[2], b_range[0], b_range[1]), 0, hh )
-    
-    this.moveCursor(x,y)
-    this.setLab(Lab)
-    return Lab
-  }
-  this.moveCursor = function(x,y){
-    cursor.style.left = x + "px"
-    cursor.style.top = y + "px"
-  }
-  this.paint = function() {
-    val = clamp(val, L_range[0], L_range[1])
-    var x, y, t
-    for (var i = 0; i < w; i++) {
-      for (var j = 0; j < h; j++) {
-        x = mix( i/ww, a_range[0], a_range[1] )
-        y = mix( j/hh, b_range[0], b_range[1] )
-        t = (j*w + i) * 4
-        rgb = xyz2rgb(hunterlab2xyz(val, x, y))
-        data[t] = Math.round( rgb[0] )
-        data[t+1] = Math.round( rgb[1] )
-        data[t+2] = Math.round( rgb[2] )
-        data[t+3] = 255
-      }
-    }
-    ctx.putImageData(imageData,0,0)
-  }
-  
-  function hunterlab2xyz (L,a,b) {
-    var_Y = L / 10
-    var_X = a / 17.5 * L / 10
-    var_Z = b / 7 * L / 10
-
-    Y = Math.pow(var_Y, 2)
-    X = ( var_X + Y ) / 1.02
-    Z = -( var_Z - Y ) / 0.847
-    xyz = [X,Y,Z]
-  }
-  function xyz2rgb(){
-    var var_X = xyz[0] / 100        //X from 0 to  95.047      (Observer = 2°, Illuminant = D65)
-    var var_Y = xyz[1] / 100        //Y from 0 to 100.000
-    var var_Z = xyz[2] / 100        //Z from 0 to 108.883
-
-    var_R = var_X *  3.2406 + var_Y * -1.5372 + var_Z * -0.4986
-    var_G = var_X * -0.9689 + var_Y *  1.8758 + var_Z *  0.0415
-    var_B = var_X *  0.0557 + var_Y * -0.2040 + var_Z *  1.0570
-
-    if ( var_R > 0.0031308 ) var_R = 1.055 * Math.pow( var_R, 1 / 2.4 ) - 0.055
-    else                     var_R = 12.92 * var_R
-    if ( var_G > 0.0031308 ) var_G = 1.055 * Math.pow( var_G, 1 / 2.4 ) - 0.055
-    else                     var_G = 12.92 * var_G
-    if ( var_B > 0.0031308 ) var_B = 1.055 * Math.pow( var_B, 1 / 2.4 ) - 0.055
-    else                     var_B = 12.92 * var_B
-
-    rgb[0] = clamp(var_R * 255, 0, 255)
-    rgb[1] = clamp(var_G * 255, 0, 255)
-    rgb[2] = clamp(var_B * 255, 0, 255)
-    return rgb
-  }
-  function rgb2xyz(RGB){
-    var var_R = ( RGB[0] / 255 )        // R from 0 to 255
-    var var_G = ( RGB[1] / 255 )        // G from 0 to 255
-    var var_B = ( RGB[2] / 255 )        // B from 0 to 255
-
-    if ( var_R > 0.04045 ) var_R = Math.pow( ( var_R + 0.055 ) / 1.055, 2.4)
-    else                   var_R = var_R / 12.92
-    if ( var_G > 0.04045 ) var_G = Math.pow( ( var_G + 0.055 ) / 1.055, 2.4)
-    else                   var_G = var_G / 12.92
-    if ( var_B > 0.04045 ) var_B = Math.pow( ( var_B + 0.055 ) / 1.055, 2.4)
-    else                   var_B = var_B / 12.92
-
-    var_R = var_R * 100
-    var_G = var_G * 100
-    var_B = var_B * 100
-
-    //Observer. = 2°, Illuminant = D65
-    var x = var_R * 0.4124 + var_G * 0.3576 + var_B * 0.1805
-    var y = var_R * 0.2126 + var_G * 0.7152 + var_B * 0.0722
-    var z = var_R * 0.0193 + var_G * 0.1192 + var_B * 0.9505
-    return [x,y,z]
-  }
-  function xyz2hunterlab (XYZ) {
-    var X = XYZ[0]
-    var Y = XYZ[1] || 1e-6  // otherwise divide-by-zero error when converting rgb(0,0,0)
-    var Z = XYZ[2]
-    var L = 10 * sqrt( Y )
-    var a = 17.5 * ( ( ( 1.02 * X ) - Y ) / sqrt( Y ) )
-    var b = 7 * ( ( Y - ( 0.847 * Z ) ) / sqrt( Y ) )
-    return [L,a,b]
-  }
-}
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index 4edc957..a3dc610 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -54,7 +54,7 @@ var Presets = View.extend({
   selectPreset: function(e){
     var preset = $(e.currentTarget).data('preset')
     if (! this.presets[preset]) return
-    this.parent.lightControl.load(this.presets[preset])
+    this.parent.colorControl.load(this.presets[preset])
     this.$(".active").removeClass('active')
     $(e.currentTarget).addClass('active')
   },
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 1ab1198..d7999b9 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1582,7 +1582,7 @@ border-left: 1px solid black;
 
 /* COLOR PICKER */
 
-.lightcontrol {
+.colorcontrol {
   margin-top: 8%;
   right: 80px;
   padding: 13px 20px 20px 20px;
@@ -1592,11 +1592,11 @@ border-left: 1px solid black;
   transition: -webkit-transform 0.2s ease-in-out;
 }
 
-.lightcontrol.active {
+.colorcontrol.active {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
 }
-.lightcontrol .slider {  
+.colorcontrol .slider {  
 }
 h4 {
   font-weight:300;
diff --git a/views/controls/editor/color-control.ejs b/views/controls/editor/color-control.ejs
new file mode 100644
index 0000000..040808e
--- /dev/null
+++ b/views/controls/editor/color-control.ejs
@@ -0,0 +1,28 @@
+<div class="vvbox colorcontrol">
+	<h4>Edit Room Colors</h4>
+
+  <div class="colors">
+  </div>
+
+  <div id="color-picker" style="display: none">
+  </div>
+  
+	<div class="slider">
+		<input type="range" min="0" max="110" value="0" id="brightness-control" />
+	</div>
+
+  <div class="color-swatches">
+    <span>
+      <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label>
+    </span>
+    <span class="active">
+      <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label>
+    </span>
+    <span>
+      <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label>
+    </span>
+    <span>
+      <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label>
+    </span>
+  </div>
+</div>
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
deleted file mode 100644
index 99d68f5..0000000
--- a/views/controls/editor/light-control.ejs
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="vvbox lightcontrol">
-	<h4>Edit Room Colors</h4>
-
-  <div class="colors">
-  </div>
-
-  <div id="color-picker" style="display: none">
-  </div>
-  
-	<div class="slider">
-		<input type="range" min="0" max="110" value="0" id="brightness-control" />
-	</div>
-
-  <div class="color-swatches">
-    <span>
-      <div class="swatch" id="wall-color" data-mode="wall"></div><label>wall</label>
-    </span>
-    <span class="active">
-      <div class="swatch" id="floor-color" data-mode="floor"></div><label>floor</label>
-    </span>
-    <span>
-      <div class="swatch" id="ceiling-color" data-mode="ceiling"></div><label>ceiling</label>
-    </span>
-    <span>
-      <div class="swatch" id="outline-color" data-mode="outline"></div><label>outlines</label>
-    </span>
-  </div>
-</div>
diff --git a/views/controls/editor/toolbar.ejs b/views/controls/editor/toolbar.ejs
index 1bb31b8..7b08db6 100644
--- a/views/controls/editor/toolbar.ejs
+++ b/views/controls/editor/toolbar.ejs
@@ -29,7 +29,7 @@
 		data-info="add wallpaper"
 		class="ion-ios7-keypad-outline"></span>
 	<span
-		data-role='toggle-light-control'
+		data-role='toggle-color-control'
 		data-info="edit room colors"
 		class="ion-ios7-sunny-outline"></span>
 <!-- 
diff --git a/views/editor.ejs b/views/editor.ejs
index c0562e9..29db917 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -17,7 +17,7 @@
 			[[ include controls/editor/media-drawer ]]
 			[[ include controls/editor/media-editor ]]
 			[[ include controls/editor/wallpaper ]]
-			[[ include controls/editor/light-control ]]
+			[[ include controls/editor/color-control ]]
 			[[ include controls/editor/text-editor ]]
 			[[ include controls/editor/collaborators ]]
 			[[ include controls/editor/settings ]]
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 05f4b58..c9b4c95 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -103,7 +103,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/HelpCursor.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/editor/LightControl.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/ColorControl.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/Collaborators.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
-- 
cgit v1.2.3-70-g09d2