var LayoutsIndex = View.extend({

	initialize: function(){
		this.$templates = this.$(".templates")
		this.$templatesList = this.$(".templates-list")
		this.$noTemplates = this.$(".no-templates")
		this.$form = this.$("form")
	},

	load: function(type){
		this.$templates.children("span").remove()
		
		$.get(this.action, this.populate.bind(this))
	},

	populate: function(data){
/*
	  if (data.layoutCounts.basic > data.plan.basic_layout_limit) {
	  }
	  if (data.layoutCounts.pro > data.plan.pro_layout_limit) {
	  }
	  if (data.projectCounts.stock > data.plan.stock_project_limit) {
	  }
	  if (data.projectCounts.basic > data.plan.basic_project_limit) {
	  }
	  if (data.projectCounts.pro > data.plan.pro_project_limit) {
	  }
*/
		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))
		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")
		
		// actually do
		window.location.pathname = "/layout/" + $layout.data("slug")
	},
	
	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 [data-role='create-new-layout']": 'createNewLayout',
		"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
	},

	createNewLayout: function(){
	  window.location.pathname = "/project/new/empty"
	},
	
})