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

	events: {
		"click .swatch": 'pick',
		"click .wallpaperRemove": 'remove',
  },
	
	initialize: function(){
	  this.__super__.initialize.call(this)
	  this.$swatches = this.$(".swatches")
	  this.$remove = this.$(".wallpaperRemove")
	  this.$remove.hide()
	},
	
  loaded: false,
	show: function(){
		if (! this.loaded) {
			this.load()
		}
		else {
      this.toggle(true)
		}
	},
	
	hide: function(){
		this.__super__.hide.call(this)
	},

	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)
	},
	
	add: function (media) {
	  if (media.type !== "image") { 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()
	},

	toggle: function (state) {
	  if (state && ! this.loaded) {
	    this.show()
	  }
	  else {
      this.$el.toggleClass("active", state)
	  }
    // toggle the class that makes the cursor a paintbucket
    // $("body").removeClass("pastePaper")
	},
	
	hide: function(){
		this.toggle(false)
	},
	
	beforeUpload: function(){
	},
	
	pick: function(e){
	  app.tube('cancel-wallpaper')
    var $swatch = $(e.currentTarget)
    this.follow( e, $swatch.css('background-image') )
    this.$remove.show()
  },
  
	remove: function(e){
	  if (Scenery.nextWallpaper) {
      Scenery.nextWallpaper = null
      app.tube('cancel-wallpaper')
	  }
	  else {
      this.follow( e, "none" )
      $(".floatingSwatch").addClass("scissors")
	  }
	},

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

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

		Scenery.nextWallpaper = wallpaper

		setTimeout(function(){
			function _followCursor(e) {
				$floatingSwatch.css({
					top: (e.pageY + 10) + 'px',
					left: (e.pageX + 10) + 'px',
				});
			}
			function _hideCursor (e) {
				$(window).off('mousemove', _followCursor)
				$(window).off('click', _hideCursor)
				app.off('cancel-wallpaper', _hideCursor)
				$floatingSwatch.removeClass("scissors").hide()
			}
			$(window).on('mousemove', _followCursor)
			$(window).one('click', _hideCursor);
      app.on('cancel-wallpaper', _hideCursor)
			$floatingSwatch.show()
			_followCursor(e);
		})
	},

})