var WallpaperPicker = View.extend({
	el: ".wallpaper",
	
	events: {
		"click .swatch": 'pick',
	},
	
	initialize: function(){
		var wm = new WallpaperManager()
		app.on('wallpaper-ready', function(){
			var black = [0,0,0,1.0]
			var white = [255,255,255,1.0]
			var swatches = wm.buildSwatches(black, white, 2)
			swatches.forEach(function(swatch){
				var dataUrl = swatch.toDataURL()
				var span = document.createElement('span')
				span.style.backgroundImage = "url(" + dataUrl + ")"
				span.className = "swatch"
				this.$el.append(span)
			}.bind(this))
		}.bind(this))
		wm.init()
	},

	toggle: function(){
    this.$el.toggleClass("active");
    // toggle the class that makes the cursor a paintbucket
    // $("body").removeClass("pastePaper");
	},
	
	pick: function(e){
    var $swatch = $(e.currentTarget)
		var $floatingSwatch = $(".floatingSwatch")

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

		Scenery.nextWallpaper = $swatch.css('background-image')

		setTimeout(function(){
			function _followCursor(e) {
				$floatingSwatch.css({
					top: (e.pageY + 10) + 'px',
					left: (e.pageX + 10) + 'px'
				});
			}
			$(window).on('mousemove', _followCursor);
			$(window).one('click', function () {
				$(window).off('mousemove', _followCursor);
				$floatingSwatch.hide();
			});
			$floatingSwatch.show()
			_followCursor(e);
		})
	}

})

// pattern
// scale
// foreground
// background

var WallpaperManager = function () {

	var image = new Image ()
	var imageData
	var w, h
	
	this.masks = []
	
	this.init = function(){
		this.load()
	}
	
	this.load = function(){
		image.onload = function(){
			this.loadImageData()
			this.buildMasks()
			app.tube('wallpaper-ready')
		}.bind(this)
		
		image.src = "/assets/img/palette.gif"
	}
	
	this.loadImageData = function(){
		var canvas = document.createElement('canvas')
		var ctx = canvas.getContext('2d')
		w = canvas.width = image.naturalWidth
		h = canvas.height = image.naturalHeight
		ctx.drawImage(image, 0,0)
		imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data
	}
	
	this.buildMasks = function(){
		var mask
		for (var y = 0; y < 6; y++) {
			for (var x = 0; x < 16; x++) {
				mask = this.buildMask(x,y)
				this.masks.push(mask)
			}
		}
	}
	
	this.buildMask = function(x,y){
		// add the offset of the top-left swatch
		x = (x * 18) + 15
		y = (y * 16) + 5

		var mask = new Array(64)
		var t = 0
		for (var i = 0; i < 8; i++) {
			for (var j = 0; j < 8; j++) {
				t = ( w*(y+j) + x+i ) * 4
				mask[j*8+i] = imageData[t] === 0
			}
		}
		return mask
	}
	
	this.buildSwatches = function(black, white, scale) {
		var swatches = this.masks.map(function(mask){
			return this.buildSwatch(mask,black,white,scale)
		}.bind(this))
		
		return swatches
	}
	
	this.buildSwatch = function(mask,black,white,scale){
		black = 'rgba(' + black.join(',') + ')'
		white = 'rgba(' + white.join(',') + ')'
		var canvas = document.createElement("canvas")
		canvas.width = 8*scale
		canvas.height = 8*scale
		var ctx = canvas.getContext('2d')
		for (var i = 0; i < 8; i++) {
			for (var j = 0; j < 8; j++) {
				ctx.fillStyle = mask[j*8+i] ? black : white
				ctx.fillRect(i*scale, j*scale, scale, scale)
			}
		}
		return canvas
	}
	
}