merge

9 files changed, 254 insertions, 71 deletions

diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
index 34a5a51..61a7ef6 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -1,18 +1,33 @@
 
-var LightControl = View.extend({
-  el: ".lightcontrol",
+var ColorControl = View.extend({
+  el: ".colorcontrol",
   
   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",
+    "click .color-swatches span": "setSurface",
+    "click .colors span": "setHue",
   },
+
+	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,14 +42,22 @@ 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" ],
 
   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")
   },
@@ -54,6 +77,7 @@ var LightControl = View.extend({
   },
   
   show: function(){
+    this.parent.cursor.message("colors")
     this.toggle(true)
   },
   
@@ -110,11 +134,20 @@ var LightControl = 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/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index ac361a7..240f713 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) {
@@ -81,7 +81,9 @@ var EditorSettings = FormView.extend({
 	  this.parent.collaborators.show()
 	},
 	
-	clone: function(){
+	clone: function(e){
+		e.preventDefault()
+
 		var names = this.$name.val().split(" ")
 		if ( ! isNaN(Number( names[names.length-1] )) ) {
 			names[names.length-1] = Number( names[names.length-1] ) + 1
@@ -93,11 +95,14 @@ var EditorSettings = FormView.extend({
 		this.$id.val('new')
 		this.$name.val( names.join(" ") )
 		this.action = this.createAction
+		this.thumbnailState = null
 		
-		window.history.pushState(null, document.title, "/builder/new")
+		window.history.pushState(null, document.title, "/project/new")
 	},
 	
-	clear: function(){
+	clear: function(e){
+		e.preventDefault()
+
 		Scenery.removeAll()
 	},
 	
@@ -121,6 +126,9 @@ var EditorSettings = FormView.extend({
 		
  	  $(".inuse").removeClass("inuse")
 		$("[data-role='toggle-project-settings']").toggleClass("inuse", state)
+    if (state) {
+      this.parent.cursor.message("settings")
+    }
 	},
 
 	enterSubmit: function (e) {
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 4f07d1f..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',
 	},
 	
@@ -30,12 +30,13 @@ var EditorToolbar = View.extend({
 	},
 	
 	toggleMap: function(state){
-		if (typeof state != "boolean") {
-		  state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
-      this.resetControls()
-		}
-    $("[data-role='toggle-map-view']").toggleClass("inuse", state)
-		map.toggle(state)
+// 		if (typeof state != "boolean") {
+// 		  state = ! $("[data-role='toggle-map-view']").hasClass("inuse")
+//       this.resetControls()
+// 		}
+//     $("[data-role='toggle-map-view']").toggleClass("inuse", state)
+		var state = map.toggle(state)
+		if (state) { map.ui.blur() }
 		$("#minimap").toggleClass("hide", state)
 		this.parent.info.toggle(state)
 	},
@@ -45,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()
@@ -74,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()
 	},
 	
@@ -110,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()
@@ -118,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(){
@@ -137,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)
@@ -152,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 ccd6c63..9946feb 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -9,6 +9,7 @@ var EditorView = View.extend({
 	},
 	
 	initialize: function(){
+	  this.cursor = new HelpCursor ({ parent: this })
 		this.toolbar = new EditorToolbar ({ parent: this })
 		this.settings = new EditorSettings ({ parent: this })
 		this.info = new BuilderInfo ({ parent: this })
@@ -16,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/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
new file mode 100644
index 0000000..9b6807e
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -0,0 +1,60 @@
+
+var HelpCursor = View.extend({
+	el: "#helpCursor",
+	
+	active: false,
+	
+	messages: {
+	  start: "Welcome to Vvalls!  Click one of the tools at right to learn about it.",
+	  media: "This is where you pick media to go on the walls.  You can upload media and paste links.",
+	  addmedia: "Great, now click a wall to place this image.",
+	  resize: "Drag the image to position it, or use the dots to resize.",
+	  presets: "These are some basic presets to get you started. Click em! :-)",
+	  wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.",
+	  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.",
+	},
+
+  initialize: function(){
+		$('#help-button').click(this.toggle.bind(this));
+  },
+  
+  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)
+  },
+  
+  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)
+  },
+
+  message: function(name){
+    if (! this.active) return
+    this.$el.html(this.messages[name])
+  },
+
+})
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 9799f99..b3f4ac3 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -26,6 +26,7 @@ var MediaUpload = UploadView.extend({
 	},
 	
 	enterSubmit: function(e){
+		e.stopPropagation()
 		if (e.keyCode == 13) {
 			e.preventDefault()
 			this.parse()
@@ -35,7 +36,10 @@ var MediaUpload = UploadView.extend({
 	parse: function(){
 		var url = this.$url.val()
 		this.$url.val("")
-		
+		this.parseUrl(url)
+	},
+	
+	parseUrl: function(url){
 		Parser.parse(url, function(media){
 			if (! media) {
 				alert("Not a valid image/video link")
@@ -52,7 +56,7 @@ var MediaUpload = UploadView.extend({
 			request.done(this.add.bind(this))
 		}.bind(this))
 	},
-	
+
 	add: function(media){
 		console.log(media)
 		this.parent.mediaViewer.addUploadedMedia(media)
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 10819af..8cae4a4 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -20,29 +20,46 @@ var MediaViewer = ModalView.extend({
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
+
 		this.$myMedia = this.$(".myMedia")
 		this.$myMediaContainer = this.$(".myMedia > .container")
 		this.$userToggle = this.$(".userToggle")
+
 		this.$foundMedia = this.$(".foundMedia")
 		this.$foundMediaContainer = this.$(".foundMedia > .container")
 		this.$foundToggle = this.$(".foundToggle")
+
+		this.$wallpaperMedia = this.$(".wallpaperMedia")
+		this.$wallpaperMediaContainer = this.$(".wallpaperMedia > .container")
+		this.$wallpaperToggle = this.$(".wallpaperToggle")
+
 		this.$deleteMedia = this.$("#deleteMedia")
 		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
+	wallpaperToggle: function(){
+    this.$wallpaperMedia.addClass("active")
+    this.$foundMedia.addClass("inactive")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
+	},
+	
 	foundToggle: function(){
-    this.$foundMedia.addClass("active");
-    this.$myMedia.addClass("inactive");
-    this.$("a").removeClass("active");
-    this.$foundToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.addClass("active")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
 	},
 	
 	userToggle: function(){
-    this.$foundMedia.removeClass("active");
-    this.$myMedia.removeClass("inactive");
-    this.$("a").removeClass("active");
-    this.$userToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.removeClass("active")
+    this.$myMedia.removeClass("inactive")
+    this.$("a").removeClass("active")
+    this.$userToggle.addClass("active")
 	},
 
 	show: function(){
@@ -51,6 +68,7 @@ var MediaViewer = ModalView.extend({
 			this.loadTrending()
 		}
 		else {
+		  this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -59,6 +77,7 @@ var MediaViewer = ModalView.extend({
 		this.__super__.hide.call(this)
 		this.deleteArmed(false)
 		this.parent.mediaUpload.hide()
+		this.parent.cursor.message('start')
 	},
 
 	load: function(){
@@ -129,6 +148,7 @@ var MediaViewer = ModalView.extend({
 		}
 		else  {
 			this.loaded = true
+      this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -213,7 +233,8 @@ var MediaViewer = ModalView.extend({
 		}
 
 		this.hide()
-		
+		this.parent.cursor.message('addmedia')
+
 		var $ants = $('.ants');
 		var $floatingImg = $('.floatingImg');
 		
@@ -248,6 +269,7 @@ var MediaViewer = ModalView.extend({
 			$(window).off('mousedown', _hideCursor)
       app.off('cancel-scenery', _hideCursor)
 			$floatingImg.parent().removeClass('edit')
+			app.controller.cursor.message('resize')
 		}
 		$(window).on('mousemove', _followCursor)
 		$(window).on('mousedown', _hideCursor)
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index 1e70aa2..0a0e0fe 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -5,24 +5,10 @@ var Presets = View.extend({
 		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
     "click .swatches span": "selectColor",
+    "change .url": "tileWalls",
+    "keydown .url": "enterSetUrl",
 	},
 	
-	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],
@@ -35,8 +21,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],
@@ -48,21 +35,31 @@ var Presets = View.extend({
       floor: [0,0,0],
       ceiling: [0,0,0],
     },
+    matrix: {
+    	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],
+    },
   },
   
   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))
+    
+    this.$url = this.$(".url")
+    
+		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){
-    this.$el.toggleClass("active", state);
+    this.$el.toggleClass("active", state)
+    this.parent.cursor.message(state ? "presets" : "start")
   },
   
   show: function(){
@@ -76,9 +73,9 @@ 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.$(".active").removeClass('active')
     $(e.currentTarget).addClass('active')
+    this.load(this.presets[preset])
   },
   
   selectColor: function(e){
@@ -86,4 +83,40 @@ 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
+  },
+  
+  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 })
+  	}
+  	app.controller.wallpaperPicker.addUrl(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/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 6bf2542..6bcd859 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -3,6 +3,7 @@ var WallpaperPicker = UploadView.extend({
 	el: ".wallpaper",
 	
 	mediaTag: "wallpaper",
+	createAction: "/api/media/new",
 	uploadAction: "/api/media/upload",
 
 	events: {
@@ -10,10 +11,10 @@ var WallpaperPicker = UploadView.extend({
 		"click .swatch": 'pick',
 		"click .wallpaperRemove": 'remove',
     "input [data-role='wallpaper-scale']": 'updateScale',
-
   },
 	
-	initialize: function(){
+	initialize: function(opt){
+	  this.parent = opt.parent
 	  this.__super__.initialize.call(this)
 	  this.$swatches = this.$(".swatches")
 	  this.$remove = this.$(".wallpaperRemove")
@@ -28,6 +29,7 @@ var WallpaperPicker = UploadView.extend({
   loaded: false,
 	show: function(){
 		if (! this.loaded) {
+      this.parent.cursor.message("wallpaper")
 			this.load()
 		}
 		else {
@@ -55,14 +57,33 @@ var WallpaperPicker = UploadView.extend({
     this.toggle(true)
 	},
 	
+	seenWallpapers: {},
 	add: function (media) {
 	  if (media.type !== "image") { return }
+	  if (this.seenWallpapers[ media.url ]) { return }
 	  var swatch = document.createElement("div")
 	  swatch.className = "swatch"
 	  swatch.style.backgroundImage = "url(" + media.url + ")"
 	  this.$swatches.append(swatch)
     this.$swatches.show()
     this.$(".txt").hide()
+    this.seenWallpapers[ media.url ] = true
+	},
+	
+	addUrl: function (url){
+		Parser.loadImage(url, function(media){
+			if (! media) return
+			media._csrf = $("[name=_csrf]").val()
+			media.tag = this.mediaTag
+			
+			var request = $.ajax({
+				type: "post",
+				url: this.createAction,
+				data: media,
+			})
+			request.done(this.add.bind(this))
+			
+		}.bind(this))
 	},
 
 	toggle: function (state) {