From c19fbc87676404636a2f5df304ddd7875fc98e66 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 6 Oct 2014 16:01:13 -0400
Subject: new scenery type: text

---
 public/assets/stylesheets/app.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'public/assets/stylesheets/app.css')

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index e626d39..e746cad 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -667,9 +667,12 @@ iframe.embed {
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
-.destroyActive .mx-scene, .destroyActive .mx-object3d.image, .menu span.inuse[data-role="destroy-media"] {
+.destroyActive .mx-scene, .destroyActive .mx-object3d.image {
 	cursor:url(/assets/img/delete-cursor.png), auto;
 }
+.addText .mx-scene, .menu span.inuse[data-role="toggle-text-editor"] {
+	cursor:url(/assets/img/text-cursor.png), auto;
+}
 
 .mx-scenery:active {
   cursor: pointer;
-- 
cgit v1.2.3-70-g09d2


From 1dae6e5dfce901cdadeebd2e191927dbc5a326f6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 6 Oct 2014 16:07:21 -0400
Subject: bower: adding marked

---
 bower.json                                                   |  3 ++-
 public/assets/javascripts/defaults.js                        |  7 +++++++
 public/assets/javascripts/mx/primitives/mx.text.js           |  8 ++++----
 .../javascripts/rectangles/engine/scenery/types/text.js      |  2 +-
 public/assets/javascripts/ui/editor/MediaEditor.js           | 10 ++++++----
 public/assets/javascripts/ui/editor/TextEditor.js            |  6 ++++--
 public/assets/stylesheets/app.css                            | 12 +++++++++++-
 views/partials/scripts.ejs                                   |  1 +
 8 files changed, 36 insertions(+), 13 deletions(-)

(limited to 'public/assets/stylesheets/app.css')

diff --git a/bower.json b/bower.json
index faffbfb..5f35d6c 100644
--- a/bower.json
+++ b/bower.json
@@ -8,6 +8,7 @@
     "lodash": "",
     "fiber": "",
     "jquery-jsonview": "1.2.0",
-    "prefixfree": ""
+    "prefixfree": "",
+    "marked": "0.3.2"
   }
 }
diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
index 038a882..c779233 100644
--- a/public/assets/javascripts/defaults.js
+++ b/public/assets/javascripts/defaults.js
@@ -12,3 +12,10 @@ app.defaults = {
     ceiling: [255,255,255],
 	},
 }
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+  sanitize: true,
+  smartypants: true,
+})
diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js
index 7b8e595..b4089f3 100644
--- a/public/assets/javascripts/mx/primitives/mx.text.js
+++ b/public/assets/javascripts/mx/primitives/mx.text.js
@@ -26,11 +26,11 @@ MX.Text = MX.Object3D.extend({
 		
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")
-		this.el.classList.add("text")
+		this.el.classList.add("mx-text")
 		this.el.classList.add("mx-scenery")
 		
 		this.inner = document.createElement("div")
-		this.inner.style.width = "100%"
+		this.inner.classList.add("inner")
 		this.el.appendChild(this.inner)
 		
 		this.load(ops)
@@ -41,11 +41,11 @@ MX.Text = MX.Object3D.extend({
     if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif";
     if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px";
 
-    this.inner.innerHTML = ops.media.description || ""
+    this.inner.innerHTML = marked( ops.media.description || "" )
   },
   
   setText: function(text){
-    this.inner.innerHTML = text
+    this.inner.innerHTML = marked( text || "" )
   },
 
 })
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js
index 16c7a5c..20e9883 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js
@@ -47,7 +47,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){
 		
 		setText: function(text){
       this.media.description = text
-      this.mx.setText(text)
+      this.mx.setText( text )
 		},
 
 		serialize: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 0a4d894..9b81db1 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -160,10 +160,12 @@ var MediaEditor = FormView.extend({
 	},
 	
 	unbind: function(){
-	  if (this.scenery && this.tainted) {
-      this.scenery.media.title = this.$name.val()
-      this.scenery.media.description = this.$description.val()
-      Minotaur.watch( app.router.editorView.settings )
+	  if (this.scenery) {
+	    if (this.tainted) {
+        this.scenery.media.title = this.$name.val()
+        this.scenery.media.description = this.$description.val()
+        Minotaur.watch( app.router.editorView.settings )
+      }
 	    if (this.scenery.mx) {
         this.scenery.mx.bound = false
         this.scenery.mx.el.classList.remove("picked")
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index 0d082ca..3d3124b 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -55,8 +55,10 @@ var TextEditor = FormView.extend({
 	},
 	
 	unbind: function(){
-	  if (this.scenery && this.tainted) {
-      Minotaur.watch( app.router.editorView.settings )
+	  if (this.scenery) {
+      if (this.tainted) {
+        Minotaur.watch( app.router.editorView.settings )
+      }
 
 	    if (this.scenery.mx) {
         this.scenery.mx.bound = false
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index e746cad..02bbe6a 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -698,6 +698,16 @@ iframe.embed {
 .mx-object3d video {
 	pointer-events: none;
 }
+.mx-text {
+  overflow: hidden;
+}
+.mx-text .inner {
+  width: 100%;
+  pointer-events: none;
+}
+.mx-text p {
+  margin-bottom: 1em;
+}
 #keyhint {
 	position: fixed;
 	bottom:0;
@@ -2117,7 +2127,7 @@ a[data-role="forgot-password"] {
   background: white;
   padding: 10px;
   margin: 20px auto;
-position: relative;
+  position: relative;
 }
 
 .collaborators button {
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 35dd782..f768160 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -3,6 +3,7 @@
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/momentjs/min/moment.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/fiber/src/fiber.min.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/bower_components/prefixfree/prefixfree.min.js"></script>
+<script type="text/javascript" src="/assets/javascripts/vendor/bower_components/marked/lib/marked.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/tube.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/loader.js"></script>
 <script type="text/javascript" src="/assets/javascripts/vendor/polyfill.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 4d78b32ce840bb804221f0208ee7cb0c8ffa8e02 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 6 Oct 2014 18:13:58 -0400
Subject: setting font family & size

---
 public/assets/javascripts/defaults.js                 |  2 --
 public/assets/javascripts/mx/primitives/mx.text.js    | 19 +++++++++++++++----
 .../rectangles/engine/scenery/types/text.js           | 11 ++++++++++-
 public/assets/javascripts/ui/editor/TextEditor.js     | 13 ++++++++++++-
 public/assets/stylesheets/app.css                     |  9 +++++++--
 5 files changed, 44 insertions(+), 10 deletions(-)

(limited to 'public/assets/stylesheets/app.css')

diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
index c779233..9ba0b4d 100644
--- a/public/assets/javascripts/defaults.js
+++ b/public/assets/javascripts/defaults.js
@@ -14,8 +14,6 @@ app.defaults = {
 }
 
 marked.setOptions({
-  gfm: true,
-  breaks: true,
   sanitize: true,
   smartypants: true,
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js
index b4089f3..8db28d0 100644
--- a/public/assets/javascripts/mx/primitives/mx.text.js
+++ b/public/assets/javascripts/mx/primitives/mx.text.js
@@ -37,11 +37,22 @@ MX.Text = MX.Object3D.extend({
   },
   
   load: function(ops){
-    if (ops.color) this.el.style.color = ops.color;
-    if (ops.fontFamily) this.el.style.fontFamily = "'" + ops.fontFamily + "',sans-serif";
-    if (ops.fontSize) this.el.style.fontSize = ops.fontSize + "px";
+    var media = ops.media
+    if (media.color) this.el.style.color = media.color;
+    if (media.font) this.setFont(media.font)
+    if (media.align) this.setAlign(media.align)
 
-    this.inner.innerHTML = marked( ops.media.description || "" )
+    this.setText( media.description )
+  },
+  
+  setAlign: function(align) {
+    this.el.style.textAlign = "align"
+  },
+    
+  setFont: function(font){
+    console.log(font)
+    this.inner.style.fontFamily = "'" + font.family + "',sans-serif"
+    this.el.style.fontSize = (2 * font.size) + "pt"
   },
   
   setText: function(text){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/text.js b/public/assets/javascripts/rectangles/engine/scenery/types/text.js
index 20e9883..a10a332 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/text.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/text.js
@@ -7,7 +7,7 @@ Scenery.types.text = Scenery.types.base.extend(function(base){
 	
 		init: function(opt){
 
-			opt.scale = 1
+			opt.scale = 0.5
 
 			base.init.call(this, opt)
 
@@ -49,6 +49,15 @@ Scenery.types.text = Scenery.types.base.extend(function(base){
       this.media.description = text
       this.mx.setText( text )
 		},
+		
+		setFont: function(style){
+		  for (var i in style) {
+		    if (style.hasOwnProperty(i)) {
+          this.media.font[i] = style[i]
+		    }
+		  }
+		  this.mx.setFont(this.media.font)
+		},
 
 		serialize: function(){
 			var data = base.serialize.call(this)
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index 3d3124b..c867d94 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -30,7 +30,15 @@ var TextEditor = FormView.extend({
     
     this.$el.toggleClass("active", state)
     if (state) {
-      Scenery.nextMedia = { type: 'text', width: 300, height: 150 }
+      Scenery.nextMedia = {
+        type: 'text',
+        width: 600,
+        height: 450,
+        scale: 0.5,
+        font: { family: 'Lato', size: 12 },
+        align: 'left',
+      }
+      
       this.createMode(true)
     }
   },
@@ -101,9 +109,12 @@ var TextEditor = FormView.extend({
   },
   
   changeFontFamily: function(){
+    this.scenery.setFont({ family: this.$fontFamily.val() })
   },
   
   changeFontSize: function(){
+    var size = parseInt( this.$fontSize.val() )
+    size && this.scenery.setFont({ size: size })
   },
   
   changeText: function(e){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 02bbe6a..1c20493 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -4,9 +4,11 @@
 	margin:0;
 	padding:0;
 	outline:0;
-	font-family: 'Lato', sans-serif;
 	-webkit-font-smoothing: subpixel-antialiased;
 }
+body,textarea,input {
+	font-family: 'Lato', sans-serif;
+}
 
 *, *:before, *:after {
   moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
@@ -1597,7 +1599,10 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 12px;
   width: 100%;
   max-height: 200px;
-  max-width: 180px;
+}
+#textEditor.settings textarea {
+  max-height: none;
+  height: 290px;
 }
 
 .settings input[type="text"]:focus{
-- 
cgit v1.2.3-70-g09d2


From 06686ff48010e0957124979fc7fb8abae1d11732 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Tue, 7 Oct 2014 01:37:41 -0400
Subject: background scaling demo

---
 public/assets/stylesheets/app.css |  11 +++-
 public/assets/test/bg.html        | 114 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 123 insertions(+), 2 deletions(-)
 create mode 100644 public/assets/test/bg.html

(limited to 'public/assets/stylesheets/app.css')

diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 1c20493..eb3bd87 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -414,12 +414,16 @@ iframe.embed {
 .page h1 {
 	font-size: 80px;
 	font-weight: 100;
-	padding: 20px 0 25px 0;
+	padding: 60px 0 25px 0;
 	float: left;
 	width: 100%;
 	border-top: 1px solid;
 }
 
+.page p {
+	margin: 20px;
+}
+
 /* DOCUMENTATION / ABOUT SECTION / FAQ PAGES */
 
 .docs .content {
@@ -1425,6 +1429,7 @@ h4 {
 input[type=range] {
   -webkit-appearance: none;
   -moz-appearance: none;
+  cursor: pointer;
   background-color: black;
   width: 180px;
   height:3px;
@@ -1532,13 +1537,14 @@ input[type="range"]::-webkit-slider-thumb {
 
 .settings {
   padding: 10px 12px 12px 12px;
-  bottom: 20px;
+  bottom: 10px;
   right: 10px;
   font-size: 12px;
   -webkit-transform: translateY(450px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateY(450px);
   transition: -webkit-transform 0.2s ease-in-out;
+	width: 210px;
 }
 
 .settings.active {
@@ -1590,6 +1596,7 @@ input[type="range"]::-webkit-slider-thumb {
 .settings input[type="text"] {
   border: 1px solid #000;
   font-size: 15px;
+  max-width: 100%;
   padding: 5px;
 }
 
diff --git a/public/assets/test/bg.html b/public/assets/test/bg.html
new file mode 100644
index 0000000..cd7eaa8
--- /dev/null
+++ b/public/assets/test/bg.html
@@ -0,0 +1,114 @@
+<div id="scene"></div>
+<div style="position:fixed;top:419px;left:10px;">
+<input id="url" value="http://i.asdf.us/im/97/imgrid_1400887539_xx_abridged___dmgk.png">
+<input id="scale" type="range" min="0.01" max="10.0" step="0.1" value="1.0">
+<div id="cursor" style="width:30px;height:30px;background:blue;display:inline-block;"></div>
+</div>
+<script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/vendor/tube.js"></script>
+<script src="/assets/javascripts/vendor/loader.js"></script>
+<script src="/assets/javascripts/rectangles/util/constants.js"></script>
+<script src="/assets/javascripts/rectangles/util/mouse.js"></script>
+<script src="/assets/javascripts/rectangles/models/vec2.js"></script>
+<script src="/assets/javascripts/rectangles/models/rect.js"></script>
+<script src="/assets/javascripts/rectangles/models/surface.js"></script>
+<script>
+
+var w = scene.width = 600
+var h = scene.height = 400
+
+var surface = new Surface ()
+surface.add( new Rect( new vec2(10, 100), new vec2(0, 400) ) )
+surface.add( new Rect( new vec2(100, 300), new vec2(200, 400) ) )
+surface.add( new Rect( new vec2(300, 400), new vec2(0, 300) ) )
+surface.add( new Rect( new vec2(400, 500), new vec2(0, 400) ) )
+
+var colors = "#f00 #ff0 #0ff #00f #f0f".split(" ")
+surface.faces.forEach(function(face, i){
+	var el = document.createElement("div")
+	el.style.position = "absolute"
+	el.style.backgroundColor = colors[i%colors.length]
+	el.style.top = face.y.a + "px"
+	el.style.left = face.x.a + "px"
+	el.style.width = face.width() + "px"
+	el.style.height = face.height() + "px"
+	scene.appendChild(el)
+	face.el = el
+})
+
+url.addEventListener("input", updateBackgroundImage)
+scale.addEventListener("input", updateScale)
+
+var bg_w = 1, bg_h = 1, x = 0, y = 0, s = 1
+function updateBackgroundImage(){
+	var img = new Image ()
+	img.onload = function(){
+		x0 = 0
+		y0 = 0
+		bg_w = img.naturalWidth
+		bg_h = img.naturalHeight
+		surface.faces.forEach(function(face, i){
+			face.el.style.backgroundImage = 'url(' + url.value + ')'
+		})
+		update(x,y,bg_w,bg_h)
+	}
+	img.src = url.value
+	img.complete && img.onload()
+}
+function update(x,y,w,h){
+	dx = x
+	dy = y
+	surface.faces.forEach(function(face, i){
+		dx = x-face.x.a
+		dy = y-face.y.a
+		face.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
+		face.el.style.backgroundSize = w*s + 'px ' + h*s + 'px'
+// 		console.log(x,y,' ',dx,dy)
+	})
+}
+updateBackgroundImage()
+
+function updateScale(){
+	s = parseFloat(scale.value)
+	console.log(scale.value, s)
+	update(x,y,bg_w,bg_h)
+}
+
+var leftOffset = 0
+
+var position = new vec2( 40, 40 )
+var dimension = new vec2( 50, 80 )
+var bounds = surface.bounds_at_index_with_dimensions(0, dimension)
+
+var delta = new vec2( 0, 0 )
+
+var dragging = false
+
+var x0 = 0, y0 = 0
+var mymouse = new mouse({
+  el: cursor,
+  down: function(e, cursor){
+  console.log(cursor.x.a, cursor.y.a)
+		dragging = true
+  },
+  drag: function(e, cursor){
+    if (! dragging) return
+    delta = cursor.delta()
+    delta.a = - delta.a
+		x0 = delta.a*s
+		y0 = delta.b*s
+//  console.log(x0,y0)
+		update(x+x0,y+y0,bg_w,bg_h)
+  },
+  up: function(e, cursor, new_cursor){
+    x += delta.a*s
+    y += delta.b*s
+    delta.zero()
+    dragging = false
+  },
+})
+
+
+
+
+</script>
-- 
cgit v1.2.3-70-g09d2


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/rectangles/models/wall.js   |  2 --
 .../assets/javascripts/ui/editor/LightControl.js   | 33 ++++++++++++++++++++++
 public/assets/javascripts/ui/reader/MediaPlayer.js |  4 +--
 public/assets/stylesheets/app.css                  |  8 ++++--
 views/controls/editor/light-control.ejs            | 10 +++----
 5 files changed, 46 insertions(+), 11 deletions(-)

(limited to 'public/assets/stylesheets/app.css')

diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 93e1f42..820fb5f 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -230,8 +230,6 @@
 		this.background = background
 		this.background.src = this.background.src.replace("url(","").replace(")","")
 
-		console.log(background)
-
 		if (this.background.src == "none") {
 		  this.wallpaperLoad(this.background.src)
 		  return
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))
diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
index df2d075..6195ab6 100644
--- a/public/assets/javascripts/ui/reader/MediaPlayer.js
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -53,8 +53,8 @@ var MediaPlayer = FormView.extend({
 		this.bind(scenery)
 		this.$el.addClass("active")
 		
-		this.$name.html(media.title)
-		this.$description.html(media.description)
+		this.$name.html( sanitize(media.title) )
+		this.$description.html( marked(media.description) )
 		
 		switch (media.type) {
 			case "image":
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index eb3bd87..15f29c3 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1475,13 +1475,17 @@ input[type="range"]::-webkit-slider-thumb {
 .color-swatches {
   margin-top: 10px;
 }
-.color-swatches.defaults {
+.presets {
 	margin-top: 10px;
 }
 
-.color-swatches.defaults span{
+.presets span {
 	font-size:12px;
 	font-weight:500;
+	display: inline-block;
+	width: 50%;
+	float:left;
+	cursor:pointer;
 }
 .color-swatches span {
 	display: inline-block;
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index fdf95a7..1fc4484 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -23,17 +23,17 @@
   </div>
 
   <h4>Preset Styles</h4>
-  <div class="color-swatches defaults">
-    <span>
+  <div class="presets">
+    <span data-preset="wireframe">
       Wireframe
     </span>
-    <span>
+    <span data-preset="shaded">
       Shaded
     </span>
-    <span>
+    <span data-preset="pfunk">
       P.Funk
     </span>
-    <span>
+    <span data-preset="seapunk">
       SeaPunk
     </span>
   </div>
-- 
cgit v1.2.3-70-g09d2