path: root/js/ui/controls.js

var controls = (function(){

  var controls = {}

  controls.cross = new Tool (cross_el)
  controls.cross.use = function(){
		brush.mask = blit.cross
    brush.generate()
    drawing = true
    brush.modified = false
  }
  controls.cross.done = function(){
    drawing = false
  }

  controls.circle = new Tool (circle_el)
  controls.circle.use = function(){
		brush.mask = blit.circle
    brush.generate()
    drawing = true
    brush.modified = false
  }
  controls.circle.done = function(){
    drawing = false
  }
  
  controls.square = new Tool (square_el)
  controls.square.use = function(){
		brush.mask = blit.square
    brush.generate()
    brush.modified = false
    drawing = true
  }
  controls.square.done = function(){
    drawing = false
  }
  
  controls.text = new Tool (text_el)
  controls.text.use = function(){
    brush.generate = controls.text.generate
    brush.generate()
  }
  controls.text.generate = function(){
  }

  controls.select = new Tool (select_el)
  controls.select.use = function(){
    selection.show()
  }
  controls.select.done = function(){
    selection.hide()
  }

  controls.fill = new Tool (fill_el)
  controls.fill.use = function(){
    filling = true
    document.body.classList.add("bucket")
  }
  controls.fill.done = function(){
    filling = false
    document.body.classList.remove("bucket")
  }
  
  controls.clear = new BlurredTool (clear_el)
  controls.clear.use = function(){
    if (confirm("really delete this colorcode?")) {
      canvas.erase()
    }
  }

  controls.webcam = new BlurredTool (webcam_el)
  controls.webcam.load = function(){
    this.loaded = true
    webcam_close.addEventListener("click", function(){ controls.webcam.blur() })
    window.addEventListener("message", function(e){
      if (e.origin !== window.location.origin) return
      controls.webcam.blur()
      controls.circle.focus()
      import_textarea.value = e.data
      clipboard.import_colorcode()
    })
  }
  controls.webcam.use = function(){
    if (! this.loaded) {
      this.load()
    }
    webcam_iframe.src = "webcam.html"
    webcam_rapper.style.display = "block"
  }
  controls.webcam.done = function(){
    webcam_iframe.src = ""
    webcam_rapper.style.display = "none"
  }
  
  controls.grid = new BlurredCheckbox (grid_el)
  controls.grid.use = function(){
    document.body.classList.toggle('grid')
  	letters.grid = palette.grid = canvas.grid = document.body.classList.contains("grid")
  	canvas.resize_rapper()
  	palette.resize_rapper()
  	letters.resize_rapper()
    if (!selection.hidden) selection.reposition()
    this.update( document.body.classList.contains("grid") )
  }

  ClipboardTool = Tool.extend({
    blur: function(){
      this.__blur()
      clipboard.hide()
    }
  })
  controls.save = new ClipboardTool (save_el)
  controls.save.use = function(){
    clipboard.show()
    clipboard.export_mode()
  }
  controls.load = new ClipboardTool (load_el)
  controls.load.use = function(){
    clipboard.show()
    clipboard.import_mode()
  }
  
  //

  var ShaderTool = Tool.extend({
    active: false,
    use: function(state){
      this.active = typeof state == "boolean" ? state : ! this.active
      if (this.active) {
        shader_rapper.style.display = "block"
        shader_textarea.focus()
      } else {
        shader_rapper.style.display = "none"
      }
    },
    done: function(){
      this.use(false)
    }
  })
  controls.shader = new ShaderTool (shader_el)
  shader_textarea.value = demo_shader.innerHTML
  shader_textarea.addEventListener("input", function(){
    var fn = shader.build(shader_textarea.value)
    fn && shader.run(canvas)
  })
  controls.animate = new Checkbox (animate_checkbox)
  controls.animate.use = function(state){
    var state = shader.toggle()
    this.update(state)
    controls.shader.focus()
    controls.shader.use(true)
  }
 
  controls.experimental_palette = new HiddenCheckbox (experimental_palette_toggle)
  controls.experimental_palette.use = function(state){
    var state = palette.experimental()
    this.update(state)
  }

  //
  
  controls.fg = new BlurredCheckbox (fg_checkbox)
  controls.fg.use = function(state){
    brush.draw_fg = state || ! brush.draw_fg
    this.update(brush.draw_fg)
  }

  controls.bg = new BlurredCheckbox (bg_checkbox)
  controls.bg.use = function(state){
    brush.draw_bg = state || ! brush.draw_bg
    this.update(brush.draw_bg)
  }

  controls.char = new BlurredCheckbox (char_checkbox)
  controls.char.use = function(state){
    brush.draw_char = state || ! brush.draw_char
    this.update(brush.draw_char)
  }
  
  //

  controls.rotate = new BlurredCheckbox (rotate_checkbox)
  controls.rotate.use = function(state){
    canvas.rotated = typeof state == "boolean" ? state : ! canvas.rotated
    canvas.resize_rapper()
    this.update(canvas.rotated)
  }
  
  //
  
  controls.vertical = new BlurredCheckbox (vertical_checkbox)
  controls.vertical.use = function(state){
    canvas.vertical = typeof state == "boolean" ? state : ! canvas.vertical
    controls.vertical.refresh()
  }
  controls.vertical.refresh = function(){
    if (canvas.vertical) {
      document.body.classList.add("vertical")
    }
    else {
      document.body.classList.remove("vertical")
    }
    palette.repaint()
    letters.repaint()
    this.update(canvas.vertical)
  }

  //
  
  controls.width = new Lex (width_el)
  controls.height = new Lex (height_el)
  controls.canvas_width = new Lex (canvas_width_el)
  controls.canvas_height = new Lex (canvas_height_el)

  // bind  
  
  controls.bind = function(){
    [
      controls.width,
      controls.height,
      controls.canvas_width,
      controls.canvas_height
    ].forEach(function(lex){
      lex.span.addEventListener('mousedown', function(e){
        lex.focus()
      })
    });
    
    [
      controls.square,
      controls.circle,
      controls.cross,
      controls.text,
      controls.fill,
      controls.select,
      controls.clear,
      controls.grid,
      controls.webcam,
      controls.fg,
      controls.bg,
      controls.char,
      controls.rotate,
      controls.vertical,
      controls.shader,
      controls.animate,
      controls.save,
      controls.load,
      controls.experimental_palette
    ].forEach(function(tool){
      tool.span.addEventListener('mousedown', function(e){
        tool.focus()
      })
    })
  
    controls.width.key = keys.single_numeral_key(controls.width, brush, "w", 1, 10)
    controls.width.raw_key = keys.arrow_key(controls.width, brush, "w", "rebuild", 1, 100)

    controls.height.key = keys.single_numeral_key(controls.height, brush, "h", 1, 10)
    controls.height.raw_key = keys.arrow_key(controls.height, brush, "h", "rebuild", 1, 100)

    controls.canvas_width.raw_key = keys.arrow_key(controls.canvas_width, canvas, "w", "resize", 1, 999)
    controls.canvas_width.key = keys.multi_numeral_key(controls.canvas_width, 3)
    controls.canvas_width.onBlur = keys.multi_numeral_blur(controls.canvas_width, canvas, "w", 1, 999)

    controls.canvas_height.raw_key = keys.arrow_key(controls.canvas_height, canvas, "h", "resize", 1, 999)
    controls.canvas_height.key = keys.multi_numeral_key(controls.canvas_height, 3)
    controls.canvas_height.onBlur = keys.multi_numeral_blur(controls.canvas_height, canvas, "h", 1, 999)
        
    add_custom_el.addEventListener("click", function(){
      custom.clone()
    })

  }

  return controls
})()