var EditorSettings = FormView.extend({
	el: "#editorSettings",
	
	createAction: "/api/project/new",
	updateAction: "/api/project/edit",
	destroyAction: "/api/project/destroy",
	
	useMinotaur: true,
  
	events: {
	  "mousedown": "stopPropagation",
		"keydown": 'stopPropagation',
		"keydown [name=name]": 'enterSubmit',
		"click [data-role='show-collaborators']": 'showCollaborators',
		"click [data-role='save-project']": 'clickSave',
		"click [data-role='clone-project']": 'clone',
		"click [data-role='clear-project']": 'clear',
		"click [data-role='destroy-project']": 'destroy',
		"click [data-role='toggle-map']": 'toggleMap',
		"click [data-role='view-project']": 'viewProject',
    "click #startText": "setStartPosition",
    "click #moveText": "confirmStartPosition",
    "click #confirmText": "setStartPosition",
    "click #goText": "goToStartPosition",
	},
	
	initialize: function(opt){
    this.parent = opt.parent
    this.__super__.initialize.call(this)
		
		this.$id = this.$("[name=_id]")
		this.$csrf = this.$("[name=_csrf]")
		this.$name = this.$("[name=name]")
		this.$description = this.$("[name=description]")
		this.$privacy = this.$("[name=privacy]")
		this.$startPoint = this.$("#startpoint")
	},
	
	load: function(data){
		this.action = data.isNew ? this.createAction : this.updateAction
    this.parent.data = data
    
		if (data.shapes && data.shapes.length) {
		  Rooms.deserializeFromShapes(data, data.walls)
		}
		else if (data.rooms) {
		  Rooms.deserialize(data.rooms, data.walls)
		}
		if (data.startPosition) {
		  scene.camera.move(data.startPosition)
		  this.startPosition = data.startPosition
		  this.$startPoint.addClass("confirmed")
		}

    if (data.colors && data.colors.wall) {
      this.parent.colorControl.load(data.colors)
    }
    else {
		  this.parent.colorControl.loadDefaults()
    }
    
    if (data.walls) {
      data.walls.some(function(wall){
        if (wall.background !== "none") {
          this.parent.wallpaperPicker.$remove.show()
          return true
        }
        return false
      }.bind(this))
    }

		if (data.isNew) {
		  this.$name.val( "Untitled" )
		}
		else {
			this.thumbnailIsStale()
			
			this.$id.val( data._id )
			this.$name.val( data.name )
			this.$description.val( data.description )
			data.privacy && this.$privacy.find("[value=" + data.privacy + "]").prop("checked", "checked")
			
			data.media && Scenery.deserialize(data.media)
			data.sculpture && Sculpture.deserialize(data.sculpture)
		}
	},
	
	showCollaborators: function(e){
	  e && e.preventDefault()
	  this.parent.collaborators.show()
	},
	
	toggleMap: function(e){
	  e.preventDefault()
	  app.controller.toolbar.toggleMap()
	},
	
	clone: function(e){
		e.preventDefault()

		var names = this.$name.val().split(" ")
		if ( ! isNaN(Number( names[names.length-1] )) ) {
			names[names.length-1] = Number( names[names.length-1] ) + 1
		}
		else {
			names.push("2")
		}

		this.$id.val('new')
		this.$name.val( names.join(" ") )
		this.action = this.createAction
		this.thumbnailState = null
		
		window.history.pushState(null, document.title, "/project/new")
	},
	
	clear: function(e){
		e.preventDefault()
		Scenery.removeAll()
		Sculpture.removeAll()
	},
	
	destroy: function(){
		var msg = "Are you sure you want to delete the project " + sanitize(this.$name.val()) + "?"
		ConfirmModal.confirm(msg, function(){
			$.ajax({
				url: this.destroyAction,
				type: "delete",
				data: { _id: this.$id.val(), _csrf: this.$csrf.val() },
				success: function(data){
					window.location.href = "/profile"
				}
			})
		}.bind(this))
	},

	toggle: function(state){
	  var state = typeof state == 'boolean' ? state : ! this.$el.hasClass("active")
		this.$el.toggleClass("active", state)
		
 	  $(".inuse").removeClass("inuse")
		$("[data-role='toggle-project-settings']").toggleClass("inuse", state)
    if (state) {
      this.parent.cursor.message("settings")
    }
	},

	enterSubmit: function (e) {
		e.stopPropagation()
		var base = this
		if (e.keyCode == 13) {
			setTimeout(function(){ base.save(e) }, 100)
		}
	},

	validate: function(){
		var errors = []
		var name = this.$name.val()
		if (! name || ! name.length) {
			errors.push("Please name your project.")
		}
		return errors
	},
	
	showErrors: function(errors){
		var $errors = $("<span>")
		errors.forEach(function(err){
			var $row = $("<div>")
			$row.html(err)
			$errors.append( $row )
		})
		ErrorModal.alert($errors)
	},
	
	startPosition: null,
	setStartPosition: function(){
	  this.$startPoint.addClass("active").removeClass("confirmed")
	},
	confirmStartPosition: function(){
	  this.$startPoint.removeClass("active").addClass("confirmed")
	  this.startPosition = app.position(scene.camera)
	},
	goToStartPosition: function(){
	  if (! this.startPosition) return
		scene.camera.move(this.startPosition)
	},
	
	serialize: function(){
		var fd = new FormData()
		fd.append( "_csrf", this.$csrf.val() )
		fd.append( "_id", this.$id.val() )
		fd.append( "name", this.$name.val() )
		fd.append( "description", this.$description.val() )
		fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" )
		fd.append( "viewHeight", window.viewHeight )
		if (Rooms.shapesMode) {
      fd.append( "shapes", JSON.stringify( shapes.serialize() ) )
		}
		else {
      fd.append( "rooms", JSON.stringify( Rooms.serialize() ) )
		}
 		fd.append( "walls", JSON.stringify( Walls.serialize() ) )
 		fd.append( "colors", JSON.stringify( Walls.colors ) )
		fd.append( "media", JSON.stringify( Scenery.serialize() ) )
		fd.append( "sculpture", JSON.stringify( Sculpture.serialize() ) )
		fd.append( "startPosition", JSON.stringify( this.startPosition || false ) )
		fd.append( "lastPosition", JSON.stringify( app.position(scene.camera) ) )
		
		if (this.thumbnailIsStale()) {
      var thumbnail = map.draw.render()
      fd.append( "thumbnail", dataUriToBlob(thumbnail.toDataURL()) )
    }
		return fd
	},
	
	thumbnailState: null,
	thumbnailIsStale: function(){
	  var newState = JSON.stringify( Rooms.serialize() )
	  
	  if (newState !== this.thumbnailState) {
	    this.thumbnailState = newState
	    return true
	  }
	  return false
	},
	
	clickSave: function(){
    this.toggle(false)
    this.save()
    this.isVisible = true
	},
	
	viewAfterSave: false,
	viewProject: function(e){
	  e.preventDefault()
		Minotaur.unwatch(this)
		Minotaur.hide()
	  this.viewAfterSave = true
	  this.save()
	},
	
	success: function(data){
		this.$id.val(data._id)
		this.$name.val(data.name)
		this.action = this.updateAction
		
		if (this.viewAfterSave) {
		  window.location.pathname = "/project/" + data.slug
		  return
		}
		
		Minotaur.unwatch(this)
		Minotaur.hide()
		
		window.history.pushState(null, document.title, "/project/" + data.slug + "/edit")
		
		this.parent.share.setLink( "http://vvalls.com/project/" + data.slug )
		if (this.isVisible) {
		  this.isVisible = false
      this.parent.share.show()
    }
    
		this.parent.data = data
	},

})