From f885f2caca46af82ae49149e361a25e3419fedc0 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Wed, 15 Oct 2014 23:40:12 -0400
Subject: fix wallpaper tiling bug

---
 .../assets/javascripts/rectangles/models/wall.js   | 37 ++++++++++++++--------
 1 file changed, 23 insertions(+), 14 deletions(-)

(limited to 'public/assets/javascripts/rectangles/models')

diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 7ff9015..2ee88d9 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -260,24 +260,34 @@
 	  this.background.y = background.y || this.background.y
 	  this.background.scale = background.scale || this.background.scale || 1
 	  
-		var useX = this.side & FRONT_BACK
-		var shouldFlip = this.side & (LEFT | BACK)
-
 		var mx, dx, dy
 		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
 		var h = Math.round( this.backgroundImage.naturalHeight * this.background.scale )
 
 		this.surface.faces.forEach(function(face, i){
-      
-      if (shouldFlip) {
-        mx = this.mx[this.mx.length-1-i]
-        dx = Math.round( this.background.x + face.x.a )
-        dy = Math.round( this.background.y + face.y.b )
-      }
-      else {
-        mx = this.mx[i]
-        dx = Math.round( this.background.x - face.x.b )
-        dy = Math.round( this.background.y + face.y.b )
+      // this.mx[i].el.innerHTML = sidesToString(this.side)
+
+      switch (this.side) {
+      	case LEFT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.a )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case RIGHT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.b )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case FRONT:
+					mx = this.mx[this.mx.length-1-i]
+					dx = Math.round( this.background.x + face.x.b )
+					dy = Math.round( this.background.y + face.y.b )
+					break
+				case BACK:
+					mx = this.mx[i]
+					dx = Math.round( this.background.x - face.x.a )
+					dy = Math.round( this.background.y + face.y.b )
+					break
       }
       
       mx.el.style.backgroundPosition = dx + 'px ' + dy + 'px'
@@ -286,7 +296,6 @@
 	}
 	
 	Wall.prototype.outline = function(wallColor, outlineColor){
-		var useX = this.side & FRONT_BACK
 		var mx = this.mx
 
 		var len = this.mx.length
-- 
cgit v1.2.3-70-g09d2


From c13532ec95c2d410354f7d342df70fd68dd78272 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Thu, 16 Oct 2014 02:21:46 -0400
Subject: matrix mode

---
 .../javascripts/rectangles/engine/rooms/_walls.js  | 31 ++++++++++++++++-
 .../javascripts/rectangles/engine/rooms/mover.js   |  8 ++---
 .../assets/javascripts/rectangles/models/wall.js   |  4 +--
 .../assets/javascripts/ui/editor/ColorControl.js   | 21 ++++++++----
 public/assets/javascripts/ui/editor/Presets.js     | 39 ++++++++++++++++++++--
 public/assets/stylesheets/app.css                  | 22 +++++++-----
 views/controls/editor/presets.ejs                  | 12 -------
 7 files changed, 101 insertions(+), 36 deletions(-)

(limited to 'public/assets/javascripts/rectangles/models')

diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index f2348f0..5c16ce6 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -140,6 +140,36 @@
 			var rgb_min = Math.min.apply(255, rgb)
 			return (rgb_max + rgb_min ) / 2
 		}
+    
+    base.setBodyColor = function(){
+  		$("#header").toggleClass("black", Walls.luminance() < 100)
+			$("body").css("background-color", rgb_string( Walls.colors.wall ))
+		}
+		base.clearBodyColor = function(){
+			$("#header").removeClass("black")
+			$("body").css("background-color", "transparent")
+		}
+		
+		base.setWallpaper = {
+			wall: function(background){
+				var img = new Image ()
+				img.onload = function(){
+					Walls.list.forEach(function(wall){
+						wall.wallpaper(background, img)
+					})
+				}.bind(this)
+				img.src = background.src
+				img.complete && img.onload()
+			}
+		}
+		
+		base.clearWallpaper = {
+			wall: function(){
+				Walls.list.forEach(function(wall){
+					wall.wallpaper("none")
+				})
+			}
+		}
 		
     base.setColor = {
     
@@ -181,7 +211,6 @@
           room.setCeilingColor(rgbColor)
         })
       },
-  
     }
   }
 
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index dd63db2..fae2ce6 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -44,8 +44,7 @@ Rooms.mover = new function(){
 
 			// in this case, we appear to have left the room..
 			// $(".face.active").removeClass("active")
-			$("#header").removeClass("black")
-			$("body").css("background-color", "transparent")
+			Walls.clearBodyColor()
 			base.room = null
 		}
 
@@ -61,8 +60,9 @@ Rooms.mover = new function(){
 		// did we actually enter a room?
 		if (intersects.length) {
 			base.room = intersects[0]
-			$("#header").toggleClass("black", Walls.luminance() < 100)
-			$("body").css("background-color", rgb_string( Walls.colors.wall ))
+			if (! base.noclip) {
+				Walls.setBodyColor()
+			}
       app.tube("change-room", { room: base.room })
 		}
 
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 2ee88d9..542c99a 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -213,7 +213,7 @@
 		this.$walls.css("background-color", color)
 	}
 	
-	Wall.prototype.wallpaper = function(background){
+	Wall.prototype.wallpaper = function(background, img){
 	  if (! background) {
 	    background = { src: "none" }
 	  }
@@ -235,7 +235,7 @@
 		  return
 		}
 		
-		var img = new Image ()
+		img = img || new Image ()
 		img.onload = function(){
 		  this.backgroundImage = img
 		  this.wallpaperLoad(this.background.src)
diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
index 26358f1..61a7ef6 100644
--- a/public/assets/javascripts/ui/editor/ColorControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -4,9 +4,10 @@ var ColorControl = View.extend({
   
   events: {
     "mousedown": "stopPropagation",
-    "click .color-swatches span": "select",
     "mousedown #brightness-control": "beginBrightness",
     "input #brightness-control": "updateBrightness",
+    "click .color-swatches span": "setSurface",
+    "click .colors span": "setHue",
   },
 
 	colors: [
@@ -48,16 +49,15 @@ var ColorControl = View.extend({
     	$swatch.css("background-color","rgb(" + color + ")")
     	$swatch.data('color', color)
     	this.$colors.append($swatch)
-    }.bind(this))
-    
+    }.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]))
+			Walls.setColor[mode](data[mode])
+			this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
     }.bind(this))
     this.setMode("wall")
   },
@@ -134,11 +134,20 @@ var ColorControl = View.extend({
     this.$brightnessControl.val( this.labColor[0] )
   },
   
-  select: function(e){
+  setSurface: function(e){
     var mode = $('.swatch', e.currentTarget).data('mode')
     this.setMode(mode)
   },
   
+  setHue: function(e){
+  	var color = $(e.currentTarget).data('color')
+
+    this.labColor = this.colorPicker.load(color)
+    this.$brightnessControl.val( this.labColor[0] )
+
+    this.pick(color, this.labColor)
+  },
+  
   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
index a3dc610..c34c826 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -19,8 +19,9 @@ var Presets = View.extend({
       outline: [0,0,0],
       floor: [109,116,106],
       ceiling: [159,163,157],
+      background: [109,116,106],
     },
-    pfunk: {
+    "p.funk": {
       wall: [255,63,78],
       outline: [255,246,0],
       floor: [255,255,0],
@@ -32,10 +33,24 @@ var Presets = View.extend({
       floor: [0,0,0],
       ceiling: [0,0,0],
     },
+    matrix: {
+    	wall: { src: "http://bibleway.biz/images/Matrix1.gif", scale: 4.0, color: [0,0,0] },
+    	outline: [0,0,0],
+      floor: [10,15,10],
+      ceiling: [0,0,0],
+    },
   },
   
   initialize: function(opt){
     this.parent = opt.parent
+
+		this.$presets = this.$(".presets")
+  	_.keys(this.presets).forEach(function(name){
+			var $swatch = $("<span>")
+			$swatch.html(capitalize(name))
+			$swatch.data('preset', name)
+			this.$presets.append($swatch)
+  	}.bind(this))
   },
 
   toggle: function(state){
@@ -54,9 +69,9 @@ var Presets = View.extend({
   selectPreset: function(e){
     var preset = $(e.currentTarget).data('preset')
     if (! this.presets[preset]) return
-    this.parent.colorControl.load(this.presets[preset])
     this.$(".active").removeClass('active')
     $(e.currentTarget).addClass('active')
+    this.load(this.presets[preset])
   },
   
   selectColor: function(e){
@@ -64,4 +79,24 @@ var Presets = View.extend({
     console.log(preset)
   },
   
+  lastPreset: {wall:[1],outline:[1],floor:[1],ceiling:[1]},
+  load: function(preset){
+    this.parent.colorControl.modes.forEach(function(mode){
+    	if (! preset[mode].length) {
+    		Walls.setWallpaper[mode](preset[mode])
+				Walls.setColor[mode](preset[mode].color)
+			}
+			else {
+				if (! this.lastPreset[mode].length) {
+					Walls.clearWallpaper[mode]()
+				}
+				Walls.setColor[mode](preset[mode])
+				this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode]))
+    	}
+    }.bind(this))
+    this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor")
+    Walls.setBodyColor()
+    this.lastPreset = preset
+  },
+  
 })
\ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index d7999b9..bd2d42c 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1445,12 +1445,12 @@ border-left: 1px solid black;
 .wallpaper, #presets {
   right: 80px;
   margin-top: 77px;
-  width: 172px;
+  width: 202px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
   transition: transform 0.1s ease-in-out;
   transform: translateX(400px);
-	padding: 5px 5px 9px 5px;
+	padding: 10px 12px 12px 12px;
 }
 
 #presets {
@@ -1467,6 +1467,7 @@ border-left: 1px solid black;
   display: inline-block;
   border: 1px solid;
   background-size: contain;
+  margin: 0 2px 4px 2px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   line-height: 0;
   vertical-align: text-bottom;
@@ -1486,7 +1487,7 @@ border-left: 1px solid black;
 }
 
 .vvbox .colors {
-  max-width: 170px;
+  max-width: 155px;
 	margin-bottom: 5px;
 }
 .vvbox .colors span {
@@ -1585,7 +1586,7 @@ border-left: 1px solid black;
 .colorcontrol {
   margin-top: 8%;
   right: 80px;
-  padding: 13px 20px 20px 20px;
+  padding: 10px 12px 12px 12px;
   -webkit-transform: translateX(400px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateX(400px);
@@ -1607,8 +1608,8 @@ input[type=range] {
   -moz-appearance: none;
   cursor: pointer;
   background-color: black;
-  width: 180px;
-  height:3px;
+  width: 155px;
+  height: 3px;
 }
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
@@ -1702,8 +1703,7 @@ input[type="range"]::-webkit-slider-thumb {
 	margin-bottom:5px;
 }
 .color-swatches span.active, .color-swatches span.active:hover{
-	background:#000;
-	color:white;
+	background: #fff;
 }
 .color-swatches span:nth-child(3){
 	clear:left;
@@ -1711,10 +1711,14 @@ input[type="range"]::-webkit-slider-thumb {
 .color-swatches span:hover {
 	background:#eee;
 }
+.color-swatches span.active label,
+.color-swatches span:hover label {
+	border-bottom: 1px solid;
+}
 
 .color-swatches label {
 	position: relative;
-	padding-left: 5px;
+	margin-left: 5px;
 	display: inline-block;
 	cursor: pointer;
 }
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index 8dd1986..04b1cf1 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -1,17 +1,5 @@
 <div class="vvbox" id="presets">
   <h4>Preset Styles</h4>
   <div class="presets">
-    <span data-preset="inverse">
-      Inverse
-    </span>
-    <span data-preset="shaded">
-      Shaded
-    </span>
-    <span data-preset="wireframe">
-      Wireframe
-    </span>
-    <span data-preset="pfunk">
-      P.Funk
-    </span>
   </div>
 </div>
-- 
cgit v1.2.3-70-g09d2


From 37851cbd12dcb17be77265164876184019d34602 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Thu, 16 Oct 2014 03:09:22 -0400
Subject: .. and floor and ceiling

---
 .../javascripts/rectangles/engine/rooms/_walls.js  | 28 ++++++++++++++++++++--
 .../assets/javascripts/rectangles/models/floor.js  |  5 ++--
 public/assets/javascripts/ui/editor/Presets.js     | 25 ++++++++++++++++---
 public/assets/javascripts/util.js                  |  3 ++-
 public/assets/stylesheets/app.css                  |  7 ++++++
 views/controls/editor/presets.ejs                  |  1 +
 6 files changed, 60 insertions(+), 9 deletions(-)

(limited to 'public/assets/javascripts/rectangles/models')

diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 5c16ce6..fe5913d 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -160,7 +160,19 @@
 				}.bind(this)
 				img.src = background.src
 				img.complete && img.onload()
-			}
+			},
+			floor: function(background){
+				Walls.floors.forEach(function(floor){
+					if (floor.ceiling) return
+					floor.wallpaper(background)
+				})
+			},
+			ceiling: function(background){
+				Walls.floors.forEach(function(floor){
+					if (! floor.ceiling) return
+					floor.wallpaper(background)
+				})
+			},
 		}
 		
 		base.clearWallpaper = {
@@ -168,7 +180,19 @@
 				Walls.list.forEach(function(wall){
 					wall.wallpaper("none")
 				})
-			}
+			},
+			floor: function(){
+				Walls.floors.forEach(function(floor){
+					if (floor.ceiling) return
+					wall.wallpaper("none")
+				})
+			},
+			ceiling: function(){
+				Walls.floors.forEach(function(floor){
+					if (! floor.ceiling) return
+					wall.wallpaper("none")
+				})
+			},
 		}
 		
     base.setColor = {
diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js
index 7ed52a1..9838232 100644
--- a/public/assets/javascripts/rectangles/models/floor.js
+++ b/public/assets/javascripts/rectangles/models/floor.js
@@ -15,6 +15,7 @@
 	var Floor = function(opt){
 		this.id = opt.id
 		this.side = opt.side
+		this.ceiling = opt.side & CEILING
 		this.mx = opt.mx
 	}
 	
@@ -114,8 +115,6 @@
 	  this.background.x = background.x || this.background.x
 	  this.background.y = background.y || this.background.y
 	  this.background.scale = background.scale || this.background.scale || 1
-	  
-		var shouldFlip = this.side & (CEILING)
 
 		var mx, dx, dy
 		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
@@ -125,7 +124,7 @@
       
       var region = mx.rect
       
-      if (shouldFlip) {
+      if (this.ceiling) {
         dx = Math.round( this.background.x - region.x.a )
         dy = Math.round( this.background.y - region.y.a )
       }
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index c34c826..cde2fdf 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -5,6 +5,8 @@ var Presets = View.extend({
 		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
     "click .swatches span": "selectColor",
+    "change .url": "tileWalls",
+    "keydown .url": "enterSetUrl",
 	},
 	
   presets: {
@@ -21,7 +23,7 @@ var Presets = View.extend({
       ceiling: [159,163,157],
       background: [109,116,106],
     },
-    "p.funk": {
+    "p.Funk": {
       wall: [255,63,78],
       outline: [255,246,0],
       floor: [255,255,0],
@@ -34,7 +36,7 @@ var Presets = View.extend({
       ceiling: [0,0,0],
     },
     matrix: {
-    	wall: { src: "http://bibleway.biz/images/Matrix1.gif", scale: 4.0, color: [0,0,0] },
+    	wall: { src: "http://dump.fm/images/20130225/1361818675427-dumpfm-melipone-matrixremixtransfast.gif", scale: 4.0, color: [0,0,0] },
     	outline: [0,0,0],
       floor: [10,15,10],
       ceiling: [0,0,0],
@@ -43,7 +45,9 @@ var Presets = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
-
+    
+    this.$url = this.$(".url")
+    
 		this.$presets = this.$(".presets")
   	_.keys(this.presets).forEach(function(name){
 			var $swatch = $("<span>")
@@ -99,4 +103,19 @@ var Presets = View.extend({
     this.lastPreset = preset
   },
   
+  tileWalls: function(){
+  	var url = this.$url.sanitize()
+  	if (url.length && url.indexOf("http://") == 0) {
+			Walls.setWallpaper.wall({ src: url })
+			Walls.setWallpaper.floor({ src: url })
+			Walls.setWallpaper.ceiling({ src: url })
+  	}
+  },
+	enterSetUrl: function (e) {
+		e.stopPropagation()
+		if (e.keyCode == 13) {
+			setTimeout(this.tileWalls.bind(this), 100)
+		}
+	},
+
 })
\ No newline at end of file
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 76c5c7b..367e20e 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -4,10 +4,11 @@ if (window.$) {
   $.fn.string = function() { return trim($(this).val()) }
   $.fn.enable = function() { return $(this).attr("disabled",null) }
   $.fn.disable = function() { return $(this).attr("disabled","disabled") }
+  $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) }
   $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) }
 }
 
-function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
+function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
 function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") }
 function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") }
 function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) }
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index bd2d42c..a711baa 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1698,6 +1698,13 @@ input[type="range"]::-webkit-slider-thumb {
 	width: 100%;
 	color: #555;
 }
+#presets .url {
+	margin: 4px 0;
+	padding: 2px;
+	font-size: 12px;
+	border: 1px black solid;
+	width: 100%;
+}
 
 .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){
 	margin-bottom:5px;
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index 04b1cf1..02e9d42 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -2,4 +2,5 @@
   <h4>Preset Styles</h4>
   <div class="presets">
   </div>
+  <input type="text" class="url" placeholder="enter a url">
 </div>
-- 
cgit v1.2.3-70-g09d2


From f8a4bb4609511393c92c618962f990673328d2f0 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 16 Oct 2014 14:31:13 -0400
Subject: cursor stuff, hit esc to exit wallpaper mode

---
 .../assets/javascripts/rectangles/models/floor.js  |  2 +-
 .../assets/javascripts/rectangles/models/wall.js   |  2 +-
 .../assets/javascripts/ui/editor/ColorControl.js   |  4 +-
 public/assets/javascripts/ui/editor/HelpCursor.js  | 15 ++++++-
 .../javascripts/ui/editor/WallpaperPicker.js       | 46 ++++++++++------------
 5 files changed, 39 insertions(+), 30 deletions(-)

(limited to 'public/assets/javascripts/rectangles/models')

diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js
index 9838232..a144ecd 100644
--- a/public/assets/javascripts/rectangles/models/floor.js
+++ b/public/assets/javascripts/rectangles/models/floor.js
@@ -40,7 +40,7 @@
 					if (Scenery.nextWallpaper) {
 					  var oldState = base.serialize()
 						base.wallpaper(Scenery.nextWallpaper)
-						Scenery.nextWallpaper = null
+						// Scenery.nextWallpaper = null
 
   					UndoStack.push({
   					  type: 'update-wallpaper',
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 542c99a..eb445a7 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -104,7 +104,7 @@
 					else if (Scenery.nextWallpaper) {
 					  var oldState = base.serialize()
 						base.wallpaper(Scenery.nextWallpaper)
-						Scenery.nextWallpaper = null
+						// Scenery.nextWallpaper = null
 
   					UndoStack.push({
   					  type: 'update-wallpaper',
diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
index 4d8a7bb..459ac1e 100644
--- a/public/assets/javascripts/ui/editor/ColorControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -73,11 +73,13 @@ var ColorControl = View.extend({
   },
   
   toggle: function(state){
+    if (state) {
+      this.parent.cursor.message("colors")
+    }
     this.$el.toggleClass("active", state);
   },
   
   show: function(){
-    this.parent.cursor.message("colors")
     this.toggle(true)
   },
   
diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
index 9b6807e..06f6ab2 100644
--- a/public/assets/javascripts/ui/editor/HelpCursor.js
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -43,9 +43,12 @@ var HelpCursor = View.extend({
     document.removeEventListener("mousemove", this.moveFn)
   },
   
+  offset: 100,
+  lastPosition: { pageX: 0, pageY: 0 },
   move: function(e){
-    this.el.style.left = e.pageX + "px"
+    this.el.style.right = clamp(window.innerWidth - e.pageX, this.offset, window.innerWidth) + "px"
     this.el.style.top = e.pageY + "px"
+    this.lastPosition = e
   },
 
   show: function(name){
@@ -54,6 +57,16 @@ var HelpCursor = View.extend({
 
   message: function(name){
     if (! this.active) return
+    if (name == "start" || name == "media" || name == "settings") {
+      this.offset = 100
+    }
+    else if (name == "colors") {
+      this.offset = 270
+    }
+    else {
+      this.offset = 290
+    }
+    this.move(this.lastPosition)
     this.$el.html(this.messages[name])
   },
 
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 6bcd859..afdfca7 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -28,19 +28,28 @@ var WallpaperPicker = UploadView.extend({
 	
   loaded: false,
 	show: function(){
-		if (! this.loaded) {
-      this.parent.cursor.message("wallpaper")
-			this.load()
-		}
-		else {
-      this.toggle(true)
-		}
+    this.toggle(true)
 	},
-	
 	hide: function(){
-		this.__super__.hide.call(this)
+		this.toggle(false)
 	},
-
+// 	hide: function(){
+// 		this.__super__.hide.call(this)
+// 	},
+  
+	toggle: function (state) {
+    app.tube('cancel-wallpaper')
+    this.$el.toggleClass("active", state)
+	  if (state) {
+      this.parent.cursor.message("wallpaper")
+	    if (! this.loaded) {
+        this.load()
+      }
+	  }
+    // toggle the class that makes the cursor a paintbucket
+    // $("body").removeClass("pastePaper")
+	},
+		
 	load: function(){
 		$.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this))
 	},
@@ -86,21 +95,6 @@ var WallpaperPicker = UploadView.extend({
 		}.bind(this))
 	},
 
-	toggle: function (state) {
-	  if (state && ! this.loaded) {
-	    this.show()
-	  }
-	  else {
-      this.$el.toggleClass("active", state)
-	  }
-    // toggle the class that makes the cursor a paintbucket
-    // $("body").removeClass("pastePaper")
-	},
-	
-	hide: function(){
-		this.toggle(false)
-	},
-	
 	beforeUpload: function(){
 	},
 	
@@ -145,7 +139,7 @@ var WallpaperPicker = UploadView.extend({
 				$floatingSwatch.removeClass("scissors").hide()
 			}
 			$(window).on('mousemove', _followCursor)
-			$(window).one('click', _hideCursor);
+			// $(window).one('click', _hideCursor);
       app.on('cancel-wallpaper', _hideCursor)
 			$floatingSwatch.show()
 			_followCursor(e);
-- 
cgit v1.2.3-70-g09d2