var WallpaperPicker = View.extend({
	el: ".wallpaper",
	
	events: {
		"click .paper1": 'pick',
	},
	
	initialize: function(){
	},

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

})

// 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
	}
	
}