1 files changed, 81 insertions, 102 deletions
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 2449465..0222077 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -1,127 +1,106 @@
+var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
+	el: ".mediaDrawer.layouts",
 
-var LayoutsIndex = View.extend({
+	action: "/api/layout",
 
-	initialize: function(){
-		this.$templates = this.$(".templates")
-		this.$noTemplates = this.$(".no-templates")
-		this.$form = this.$("form")
+	events: {
+		"click [data-role='create-new-layout']": 'createNewLayout',
+		"click [data-role='create-new-blueprint']": 'createNewBlueprint',
+		"click .templates span": 'pick',
 	},
+	
+	pick: function(e){
+		e.preventDefault()
+ 		var layout = $(e.currentTarget).data("slug")
+ 		var isBlueprint = $(e.currentTarget).data("blueprint")
 
-	load: function(type){
-		this.$templates.children("span").remove()
+		if (! layout || ! layout.length) return
 		
-		$.get(this.action, this.populate.bind(this))
+		if (isBlueprint) {
+      window.location.pathname = "/blueprint/" + layout
+		}
+		else {
+      window.location.pathname = "/layout/" + layout
+		}
+  },
+
+	createNewLayout: function(e){
+	  e.preventDefault()
+	  window.location.pathname = "/layout/new"
+	},
+
+	createNewBlueprint: function(e){
+	  e.preventDefault()
+	  window.location.pathname = "/blueprint/new"
 	},
 
 	populate: function(data){
-		if (! data.length) {
+/*
+	  if (data.user.plan_level < 1 && data.projectCount == 1) {
+	    // show lockout message
+	  }
+*/
+		if (! data.layouts.length) {
 			this.$templates.hide()
 			this.$form.hide()
 			this.$noTemplates.show()
 		}
-		this.$templates.empty()
-		data.forEach(function(room){
+		this.$templatesList.empty()
+		data.layouts.forEach(function(room){
 			var $span = $("<span>")
-			// $span.html(JSON.stringify(room))
 			$span.data("slug", room.slug)
-			$span.css("background-image", "url(" + room.photo + ")")
-			$span.attr("data-name", room.name)
 			
-			this.$templates.append($span)
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
 		}.bind(this))
-		console.log(this.$templates.html())
-		this.show()
-	}
-
-})
-
-var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
-	el: ".mediaDrawer.projects",
-
-	action: "/api/project",
-
-	events: {
-		"click .templates span": 'toggleActive',
-		"submit form": 'newProject',
-	},
-	
-	populate: function(data){
-		if (! data.length) {
-			app.router.newProject()
-		}
-		else {
-			this.__super__.populate.call(this, data)
-		}
-	},
-	
-	toggleActive: function(e){
-		e.preventDefault()
-		this.$(".templates .active").removeClass("active")
-		var $layout = $(e.currentTarget)
-		$layout.addClass("active")
-				
-		// actually do
-		window.location.pathname = "/project/" + $layout.data("slug") + "/edit"
-	},
-	
-	newProject: function(e){
-		e && e.preventDefault()
-		window.location.pathname = "/project/new"
-	}
-
-})
-
-
-var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
-	el: ".mediaDrawer.layouts",
-
-	action: "/api/layout",
 
-	events: {
-		"click .templates span": 'toggleActive',
-		"submit form": 'newLayout',
-	},
-	
-	toggleActive: function(e){
-		e.preventDefault()
-		this.$(".templates .active").removeClass("active")
-		var $layout = $(e.currentTarget)
-		$layout.addClass("active")
+		data.user_layouts.forEach(function(room){
+			var $span = $("<span>")
+			$span.data("slug", room.slug)
+			
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
+		}.bind(this))
+		
+		data.blueprints.forEach(function(blueprint){
+			var $span = $("<span>")
+			$span.data("slug", blueprint.slug)
+			$span.data("blueprint", true)
+			
+			var $label = $("<label>")
+			$label.html( blueprint.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + blueprint.url + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
+		}.bind(this))
 		
-		// actually do
-		window.location.pathname = "/layout/" + $layout.data("slug")
+		this.show()
 	},
-	
+
 	newLayout: function(e){
 		e && e.preventDefault()
 		window.location.pathname = "/layout/new"
 	}
 
 })
-
-
-var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
-	el: ".mediaDrawer.newProject",
-
-	action: "/api/layout",
-
-	events: {
-		"click .templates span": 'choose',
-		"submit form": 'choose',
-	},
-	
-	toggleActive: function(e){
-		e.preventDefault()
-		this.$(".templates .active").removeClass("active")
-		$(e.currentTarget).addClass("active")
-	},
-	
-	choose: function(e){
-		e && e.preventDefault()
-// 		var layout = this.$(".templates .active").data("slug")
- 		var layout = $(e.currentTarget).data("slug")
-		if (! layout || ! layout.length) return
-		window.location.pathname = "/project/new/" + layout
-	}
-	
-})