1 files changed, 174 insertions, 16 deletions
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 87251af..a9c6ef0 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -6,6 +6,10 @@ var LayoutsIndex = View.extend({
 		this.$templatesList = this.$(".templates-list")
 		this.$noTemplates = this.$(".no-templates")
 		this.$form = this.$("form")
+		
+		this.$userTemplatesList = this.$(".userTemplatesList")
+		this.$blueprintsList = this.$(".blueprintsList")
+		this.$newBlueprintButton = this.$("[data-role='create-new-blueprint']")
 	},
 
 	load: function(type){
@@ -15,11 +19,6 @@ var LayoutsIndex = View.extend({
 	},
 
 	populate: function(data){
-/*
-	  if (data.user.plan_level < 1 && data.projectCount == 1) {
-	    // show lockout message
-	  }
-*/
 		if (! data.layouts.length) {
 			this.$templates.hide()
 			this.$form.hide()
@@ -89,20 +88,89 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	action: "/api/layout",
 
 	events: {
-		"click .templates span": 'toggleActive',
+		"click .templates span": 'pick',
+		"click .userTemplates span": 'pick',
+		"click .blueprints span": 'pickBlueprint',
 		"submit form": 'newLayout',
 	},
 	
-	toggleActive: function(e){
+	pick: function(e){
 		e.preventDefault()
-		this.$(".templates .active").removeClass("active")
 		var $layout = $(e.currentTarget)
-		$layout.addClass("active")
+		window.location.pathname = "/layout/" + $layout.data("slug")
+	},
+
+	pick: function(e){
+		e.preventDefault()
+		var $blueprint = $(e.currentTarget)
+		$blueprint.addClass("active")
 		
-		// actually do
 		window.location.pathname = "/layout/" + $layout.data("slug")
 	},
-	
+
+	populate: function(data){
+/*
+	  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.$templatesList.empty()
+		data.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.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.$userTemplatesList.append($span)
+		}.bind(this))
+		
+		data.blueprints.forEach(function(blueprint){
+			var $span = $("<span>")
+			$span.data("slug", blueprint.slug)
+			
+			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.$blueprintsList.append($span)
+		}.bind(this))
+		
+		this.show()
+	},
+
 	newLayout: function(e){
 		e && e.preventDefault()
 		window.location.pathname = "/layout/new"
@@ -118,8 +186,10 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 
 	events: {
 		"click [data-role='create-new-layout']": 'createNewLayout',
-		"click .templates span": 'choose',
-		"submit form": 'choose',
+		"click [data-role='create-new-blueprint']": 'createNewBlueprint',
+		"click .templates span": 'pick',
+		"click .userTemplates span": 'pick',
+		"click .blueprints span": 'pickBlueprint',
 	},
 	
 	toggleActive: function(e){
@@ -128,16 +198,104 @@ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 		$(e.currentTarget).addClass("active")
 	},
 	
-	choose: function(e){
+	pick: function(e){
 		e && e.preventDefault()
 // 		var layout = this.$(".templates .active").data("slug")
  		var layout = $(e.currentTarget).data("slug")
+ 		var isBlueprint = $(e.currentTarget).data("blueprint")
 		if (! layout || ! layout.length) return
-		window.location.pathname = "/project/new/" + layout
+		
+		if (isBlueprint) {
+      window.location.pathname = "/project/blueprint/" + layout
+		}
+		else {
+      window.location.pathname = "/project/new/" + layout
+		}
 	},
 
-	createNewLayout: function(){
+	createNewLayout: function(e){
+	  e.preventDefault()
 	  window.location.pathname = "/project/new/empty"
 	},
+
+	createNewBlueprint: function(s){
+	  e.preventDefault()
+	  window.location.pathname = "/blueprint/new"
+	},
+
+	populate: function(data){
+/*
+	  if (data.user.plan_level < 1 && data.projectCount == 1) {
+	    // show lockout message
+      this.$newBlueprintButton.hide()
+	  }
+*/
+		if (! data.layouts.length) {
+			this.$templates.hide()
+			this.$form.hide()
+			this.$noTemplates.show()
+		}
+		if (! data.blueprints.length) {
+		  this.$blueprintsList.parent().hide()
+    }
+		if (! data.user_layouts.length) {
+		  this.$userTemplatesList.parent().hide()
+    }
+
+		this.$templatesList.empty()
+		data.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.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){
+		  if (! blueprint.slug) { return }
+		  
+			var $span = $("<span>")
+			$span.data("blueprint", true)
+			$span.data("slug", blueprint.slug)
+			
+			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))
+		
+		this.show()
+	},
+
 	
 })