var LayoutsIndex = View.extend({

	load: function(type){
		this.show()

		$.get("/api/layouts", $.proxy(function(data){
			console.log(data)
			data.forEach($.proxy(function(room){
				var $span = $("<span>")
				$span.html(JSON.stringify(room))
				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")
		$(e.currentTarget).addClass("active")
		
		// actually do
		// window.location.pathname = "/builder/" + $(this).data("name")
	},
	
	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()
	}
	
})