local_shaders = new function(){}
local_shaders.init = function(){
  local_shaders.bind()
}
local_shaders.bind = function(){
  local_shaders.buttons = {}
  if ('EXAMPLE_SHADERS' in window) {
    local_shaders.bindButtons( window.SHADERS )
  }
  local_shaders.bindButtons( local_shaders.getShaders() )
  document.getElementById("add-shader").addEventListener("click", local_shaders.save, false)
  document.getElementById("remove-shader").addEventListener("click", local_shaders.remove, false)
}
local_shaders.bindButtons = function(shaders){
  for (var i = 0; i < shaders.length; i++){
    local_shaders.bindButton(shaders[i])
  }
}
local_shaders.bindButton = function(data){
//   console.log("button >> " + data.name)
  var button = document.createElement("button")
  button.innerHTML = data.name
  button.addEventListener("click", local_shaders.load.bind(this, data), false)
  document.getElementById("shaders").appendChild(button)
  local_shaders.buttons[data.name] = button
}
local_shaders.load = function(data){
  var shader = data.shader
  if (shader && shader.length > 0) {
    local_shaders.name = data.name
    $("#shader").val(shader)
    // pause here?
    shader_build()
    $(".active").removeClass("active")
    $(local_shaders.buttons[data.name]).addClass("active")
    local_shaders.setLastAccessed(data.name)
  }
}
local_shaders.loadLastAccessed = function(){
  var name = localStorage.getItem("im.lastShader") || "colorcycle"
  if (name in local_shaders.buttons) {
    $(local_shaders.buttons[name]).trigger("click")
  }
}
local_shaders.setLastAccessed = function(name){
  localStorage.setItem("im.lastShader", name)
}

local_shaders.getShaderByName = function(name){
  return { name: name, shader: local_shaders.getShaderBody(name) }
}
local_shaders.getShaderIndex = function(){
  return JSON.parse( localStorage.getItem("im.shaders") ) || []
}
local_shaders.getShaderBody = function(name){
  return localStorage.getItem("im.shaders."+name) || null
}
local_shaders.getShaders = function(){
  var shaders = local_shaders.getShaderIndex()
  return shaders.map(function(name){ return { name: name, shader: local_shaders.getShaderBody(name) } })
}
local_shaders.setShaderIndex = function(shaders){
  localStorage.setItem("im.shaders", JSON.stringify(shaders))
}
local_shaders.setShader = function(name, shader){
  if (! name.length || ! shader.length || !name.length || !shader.length) return
  localStorage.setItem("im.shaders." + name, shader)
}
local_shaders.removeShader = function(name){
  localStorage.removeItem("im.shaders." + name)
}

local_shaders.save = function(){
  var name = prompt("enter shader name")
  var shader = $("#shader").val()

  if (! name) return;
  if (shade !== shade_no_error_handling) return;

  local_shaders.setShader(name, shader)

  var shaders = local_shaders.getShaderIndex()
  shaders.push(name)
  local_shaders.setShaderIndex(shaders)

  local_shaders.name = name
  local_shaders.bindButton({ name: name, shader: shader })

  $(".active").removeClass("active")
  $(local_shaders.buttons[name]).addClass("active")
  local_shaders.setLastAccessed(name)
}

local_shaders.remove = function(){
  var name = local_shaders.name
  if (! name || ! name.length) return

  var shaders = local_shaders.getShaderIndex()
  if (shaders.splice( shaders.indexOf(name), 1 )) {
    local_shaders.setShaderIndex(shaders)
    local_shaders.removeShader(name)
    $(local_shaders.buttons[name]).remove()
    local_shaders.name = ""
  }
}