var WallpaperPicker = UploadView.extend({
	el: ".wallpaper",
	
	mediaTag: "wallpaper",
	createAction: "/api/media/new",
	uploadAction: "/api/media/upload",

	events: {
	  "contextmenu": 'contextmenu',
		"mousedown": 'stopPropagation',
		"click .swatch": 'pick',
		"click .wallpaperRemove": 'remove',
    "input [data-role='wallpaper-scale']": 'updateScale',
    "change .url": "enterUrl",
    "keydown .url": "enterSetUrl",
  },
	
	initialize: function(opt){
	  this.parent = opt.parent
	  this.__super__.initialize.call(this)
	  this.$swatches = this.$(".swatches")
	  this.$remove = this.$(".wallpaperRemove")

    this.$url = this.$(".url")
    
	  this.$position = this.$("[data-role='wallpaper-position']")
	  this.$scale = this.$("[data-role='wallpaper-scale']")
	  
	  this.$wallpaperResizeControls = this.$(".wallpaperResizeControls")
	  this.$wallpaperResizeControls.addClass('disabled')
	  
	  this.initializePositionCursor()
	},
	
  loaded: false,
	show: function(){
    this.toggle(true)
	},
	hide: function(){
		this.toggle(false)
	},
  
	toggle: function (state) {
	  Scenery.nextWallpaper = null
    app.tube('cancel-wallpaper')
    this.$el.toggleClass("active", state)
	  if (state) {
      this.parent.cursor.message("wallpaper")
	    if (! this.loaded) {
        this.load()
      }
	  }
    // toggle the class that makes the cursor a paintbucket
    // $("body").removeClass("pastePaper")
	},
	
	load: function(){
		$.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this))
	},

	populate: function(data){
		this.loaded = true
		if (data && data.length) {
		  data.forEach(this.add.bind(this))
		  this.$(".txt").hide()
		}
		else {
		  this.$(".txt").show()
		}
    this.toggle(true)
	},
	
	seenWallpapers: {},
	add: function (media) {
	  if (media.type !== "image") { return }
	  if (this.seenWallpapers[ media.url ]) { return }
	  var swatch = document.createElement("div")
	  swatch.className = "swatch"
	  swatch.style.backgroundImage = "url(" + media.url + ")"
	  this.$swatches.append(swatch)
    this.$swatches.show()
    this.$(".txt").hide()
    this.seenWallpapers[ media.url ] = true
	},
	
	addUrl: function (url){
		Parser.loadImage(url, function(media){
			if (! media) return
			media._csrf = $("[name=_csrf]").val()
			media.tag = this.mediaTag
			
			var request = $.ajax({
				type: "post",
				url: this.createAction,
				data: media,
			})
			request.done(this.add.bind(this))
			
		}.bind(this))
	},

	beforeUpload: function(){
	},
	
	pick: function(e){
	  app.tube('cancel-wallpaper')
    var $swatch = $(e.currentTarget)
    this.follow( e, $swatch.css('background-image') )
    this.parent.presets.modified = true
  },
  
	remove: function(e){
	  if (Scenery.nextWallpaper) {
      Scenery.nextWallpaper = null
      app.tube('cancel-wallpaper')
	  }
	  else {
      this.follow( e, "none" )
      $(".floatingSwatch").addClass("scissors")
	  }
	},
	
	contextmenu: function(e){
    if (Scenery.nextWallpaper) {
      e.preventDefault()
      this.cancel()
    }
	},
	cancel: function(){
    if (Scenery.nextWallpaper) {
      Scenery.nextWallpaper = null
      app.tube('cancel-wallpaper')
    }
	},

  follow: function(e, wallpaper, icon){
    var base = this
    icon = icon || wallpaper
    
		var $floatingSwatch = $(".floatingSwatch")

    $floatingSwatch.css('background-image', wallpaper)

		Scenery.nextWallpaper = wallpaper

    $(".floodMessage").show()

		setTimeout(function(){
			function _followCursor(e) {
				$floatingSwatch.css({
					top: (e.pageY + 10) + 'px',
					left: (e.pageX + 10) + 'px',
				});
			}
			function _hideCursor (e) {
        $(window).off('keydown', _floodRoom)
				$(window).off('mousemove', _followCursor)
				app.off('cancel-wallpaper', _hideCursor)
				$floatingSwatch.removeClass("scissors").hide()
				$(".floodMessage").hide()
			}
			function _floodRoom (e) {
			  if (e.keyCode == 13) {
          base.flood()
        }
			}
			$(window).on('keydown', _floodRoom)
			$(window).on('mousemove', _followCursor)
			// $(window).one('click', _hideCursor);
      app.on('cancel-wallpaper', _hideCursor)
			$floatingSwatch.show()
			_followCursor(e);
		})
	},

	wall: null,
	pickWall: function(wall){
    if (! wall.background || wall.background.src == "none") {
      this.$wallpaperResizeControls.addClass('disabled')
      this.$scale.val( 0.0 )
      return;
    }
    this.$wallpaperResizeControls.removeClass('disabled')
    this.wall = wall
    this.$scale.val( Math.log( this.wall.background.scale ) )
  },
  
  scaleTimeout: null,
  updateScale: function(){
    if (! this.wall) return;
    var scale = Math.exp( parseFloat(this.$scale.val()) )
    this.wall.wallpaperPosition({ scale: scale })
    
    clearTimeout(this.scaleTimeout)
    this.scaleTimeout = setTimeout(function(){

      // TODO: watch individual scenery object here
      Minotaur.watch( app.router.editorView.settings )

    }.bind(this), 500)
  },

  enterUrl: function(){
  	var url = this.$url.sanitize()
  	this.addUrl(url)
  	this.$url.val("")
  },
	enterSetUrl: function (e) {
		e.stopPropagation()
		if (e.keyCode == 13) {
			setTimeout(this.enterUrl.bind(this), 100)
		}
	},
	
	flood: function(url){
	  url = url || Scenery.nextWallpaper
	  if (! url) return
    Walls.setWallpaper.wall({ src: url })
    Walls.setWallpaper.floor({ src: url })
    Walls.setWallpaper.ceiling({ src: url })
    this.cancel()
	},

	initializePositionCursor: function(){
	  var base = this
	  var dx = 0, dy = 0, dragging = false, delta
	  var x = 0, y = 0, s = 1
    var mymouse = new mouse({
      el: this.$position[0],
      down: function(e, cursor){
        if (! base.wall) return
        dragging = true
        // s = parseFloat( base.$scale.val() )
        x = base.wall.background.x
        y = base.wall.background.y
      },
      drag: function(e, cursor){
        if (! dragging) return
        delta = cursor.delta()
        delta.a = - delta.a
        dx = delta.a*s
        dy = delta.b*s
        base.wall.wallpaperPosition({
          // scale: s,
          x: x+dx,
          y: y+dy,
        })
      },
      up: function(e, cursor, new_cursor){
        dragging = false
      },
    })
	},
	
})