var Presets = View.extend({
	el: "#presets",
	
	events: {
		"mousedown": "stopPropagation",
    "click .presets span": "selectPreset",
    "click .swatches span": "selectColor",
	},
	
	colors: [
		[255,94,58],
		[255,149,0],
		[255,219,76],
		[76,217,100],
		[52,170,220],
		[29,98,240],
		[198,68,252],
		[0,0,0],
		[74,74,74],
		[125,126,127],
		[209,211,212],
		[235,235,235],
		[255,255,255],
	],

  presets: {
    wireframe: {
      wall: [255,255,255],
      outline: [0,0,0],
      floor: [246,246,246],
      ceiling: [255,255,255],
    },
    shaded: {
      wall: [205,205,204],
      outline: [0,0,0],
      floor: [109,116,106],
      ceiling: [159,163,157],
    },
    pfunk: {
      wall: [255,63,78],
      outline: [255,246,0],
      floor: [255,255,0],
      ceiling: [225,118,252],
    },
    inverse: {
      wall: [0,0,0],
      outline: [255,255,255],
      floor: [0,0,0],
      ceiling: [0,0,0],
    },
  },
  
  initialize: function(opt){
    this.parent = opt.parent
    this.$colors = this.$(".colors")
    this.colors.forEach(function(color){
    	var $swatch = $("<span>")
    	$swatch.css("background-color","rgb(" + color + ")")
    	$swatch.data('color', color)
    	this.$colors.append($swatch)
    }.bind(this))
  },

  toggle: function(state){
    this.$el.toggleClass("active", state);
  },
  
  show: function(){
    this.toggle(true)
  },
  
  hide: function(){
    this.toggle(false)
  },

  selectPreset: function(e){
    var preset = $(e.currentTarget).data('preset')
    if (! this.presets[preset]) return
    this.parent.lightControl.load(this.presets[preset])
    this.$(".active").removeClass('active')
    $(e.currentTarget).addClass('active')
  },
  
  selectColor: function(e){
    var preset = $(e.currentTarget).data('color')
    console.log(preset)
  },
  
})