(function(){
	var color_palettes = {
		alpha: [
			"rgba(0,0,0,0.1)",
		],
		alphaQuad: [
			"rgba(0,0,0,0.1)",
			"rgba(0,0,0,0.1)",
			"rgba(0,0,0,0.1)",
			"rgba(0,0,0,0.1)",
		],
		redblue: [
			"rgba(0,0,0,0.2)",
			"rgba(255,0,0,0.2)",
			"rgba(0,0,255,0.2)",
			"rgba(0,255,0,0.2)",
		],
		gray: [
			"rgba(0,0,0,0.1)",
			"rgba(0,0,0,0.2)",
			"rgba(0,0,0,0.3)",
			"rgba(0,0,0,0.4)",
		],
		bone: [
			"hsla(0,0%,91%,0.95)",
			"hsla(0,0%,88%,0.95)",
			"hsla(0,0%,85%,0.95)",
			"hsla(0,0%,82%,0.95)",
		],
		colors: [
			"rgba(255,0,0,0.5)",
			"rgba(255,128,0,0.5)",
			"rgba(128,255,0,0.5)",
			"rgba(0,255,0,0.5)",
			"rgba(0,255,128,0.5)",
			"rgba(0,128,255,0.5)",
			"rgba(0,0,255,0.5)",
			"rgba(128,0,255,0.5)",
			"rgba(255,0,255,0.5)",
			"rgba(255,0,128,0.5)",
		],
		white: [
			"rgba(255,255,255,0.9)",
		],
		black: [
			"rgba(0,0,0,0.9)",
		],
	}

	var select = document.querySelector("#palette")
	select && select.addEventListener("change", function(){
		colors = color_palettes[select.value]
		select.blur()
	})

	window.colors = color_palettes[select ? select.value : 'colors']
//	window.colors = color_palettes[select ? select.value : 'alphaQuad']
	window.grayColors = {}
	_.zip([FRONT, LEFT, BACK, RIGHT], color_palettes.alphaQuad).map(function(pair){
		window.grayColors[pair[0]] = pair[1]
	})
	window.palettes = color_palettes
})()