var LayoutsIndex = View.extend({

	initialize: function(){
		this.$templates = this.$(".templates")
	},

	load: function(type){
		this.$templates.children("span").remove()
		
		$.get("/api/layouts", $.proxy(function(data){

			data.forEach($.proxy(function(room){
				var $span = $("<span>")
				// $span.html(JSON.stringify(room))
				$span.data("slug", room.slug)
				$span.css("background-image", "url(" + room.photo + ")")
				
				this.$templates.append($span)
			}, this))

			this.show()
		}, this))

	}
})


var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
	el: ".mediaDrawer.layouts",

	events: {
		"click .templates span": 'toggleActive',
		"submit form": 'newBuilder',
	},
	
	toggleActive: function(e){
		e.preventDefault()
		this.$(".templates .active").removeClass("active")
		var $layout = $(e.currentTarget)
		$layout.addClass("active")
		
		// actually do
		window.location.pathname = "/builder/" + $layout.data("slug")
	},
	
	newBuilder: function(e){
		e && e.preventDefault()
		window.location.pathname = "/builder/new"
	}

})


var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
	el: ".mediaDrawer.newProject",

	events: {
		"click .templates span": 'toggleActive',
		"submit form": 'choose',
	},
	
	toggleActive: function(e){
		e.preventDefault()
		this.$(".templates .active").removeClass("active")
		$(e.currentTarget).addClass("active")
	},
	
	choose: function(e){
		e && e.preventDefault()
	}
	
})