window.addEventListener("load", () => {
  // If there's no ecmascript 5 support, don't try to initialize
  if (!Object.create || !window.JSON) return

  let sandboxHint = null
  if (window.chapNum && window.chapNum < 20 && window.localStorage && !localStorage.getItem("usedSandbox")) {
    let pres = document.getElementsByTagName("pre")
    for (let i = 0; i < pres.length; i++) {
      let pre = pres[i]
      if (!/^(text\/)?(javascript|html)$/.test(pre.getAttribute("data-language")) ||
          chapNum == 1 && !/console\.log/.test(pre.textContent)) continue
      sandboxHint = elt("div", {"class": "sandboxhint"},
                        "edit & run code by clicking it")
      pre.insertBefore(sandboxHint, pre.firstChild)
      break
    }
  }

  document.body.addEventListener("click", e => {
    for (let n = e.target; n; n = n.parentNode) {
      if (n.className == "c_ident") return
      let lang = n.nodeName == "PRE" && n.getAttribute("data-language")
      if (/^(text\/)?(javascript|html)$/.test(lang))
        return activateCode(n, e, lang)
      if (n.nodeName == "DIV" && n.className == "solution")
        n.className = "solution open"
    }
  })

  function elt(type, attrs) {
    let firstChild = 1
    let node = document.createElement(type)
    if (attrs && typeof attrs == "object" && attrs.nodeType == null) {
      for (let attr in attrs) if (attrs.hasOwnProperty(attr)) {
        if (attr == "css") node.style.cssText = attrs[attr]
        else node.setAttribute(attr, attrs[attr])
      }
      firstChild = 2
    }
    for (let i = firstChild; i < arguments.length; ++i) {
      let child = arguments[i]
      if (typeof child == "string") child = document.createTextNode(child)
      node.appendChild(child)
    }
    return node
  }

  CodeMirror.commands[CodeMirror.keyMap.default.Down = "lineDownEscape"] = cm => {
    let cur = cm.getCursor()
    if (cur.line == cm.lastLine()) {
      document.activeElement.blur()
      return CodeMirror.Pass
    } else {
      cm.moveV(1, "line")
    }
  }
  CodeMirror.commands[CodeMirror.keyMap.default.Up = "lineUpEscape"] = cm => {
    let cur = cm.getCursor()
    if (cur.line == cm.firstLine()) {
      document.activeElement.blur()
      return CodeMirror.Pass
    } else {
      cm.moveV(-1, "line")
    }
  }

  let keyMap = {
    Esc(cm) { cm.display.input.blur() },
    "Ctrl-Enter"(cm) { runCode(cm.state.context) },
    "Cmd-Enter"(cm) { runCode(cm.state.context) },
    "Ctrl-Down"(cm) { closeCode(cm.state.context) },
    "Ctrl-Esc"(cm) { resetSandbox(cm.state.context.sandbox) },
    "Cmd-Esc"(cm) { resetSandbox(cm.state.context.sandbox) }
  }

  let nextID = 0
  let article = document.getElementsByTagName("article")[0]

  function activateCode(node, e, lang) {
    if (sandboxHint) {
      sandboxHint.parentNode.removeChild(sandboxHint)
      sandboxHint = null
      localStorage.setItem("usedSandbox", "true")
    }

    const codeId = node.firstChild.id
    let code = (window.localStorage && localStorage.getItem(codeId)) || node.textContent
    let wrap = node.parentNode.insertBefore(elt("div", {"class": "editor-wrap"}), node)
    let editor = CodeMirror(div => wrap.insertBefore(div, wrap.firstChild), {
      value: code,
      mode: lang,
      extraKeys: keyMap,
      matchBrackets: true,
      lineNumbers: true
    })
    let pollingScroll = null
    function pollScroll() {
      if (document.activeElement != editor.getInputField()) return
      let rect = editor.getWrapperElement().getBoundingClientRect()
      if (rect.bottom < 0 || rect.top > innerHeight) editor.getInputField().blur()
      else pollingScroll = setTimeout(pollScroll, 500)
    }
    editor.on("focus", () => {
      clearTimeout(pollingScroll)
      pollingScroll = setTimeout(pollScroll, 500)
    })
    if (window.localStorage)
      editor.on("change", debounce(() => localStorage.setItem(codeId, editor.getValue()), 250))
    wrap.style.marginLeft = wrap.style.marginRight = -Math.min(article.offsetLeft, 100) + "px"
    setTimeout(() => editor.refresh(), 600)
    if (e) {
      editor.setCursor(editor.coordsChar({left: e.clientX, top: e.clientY}, "client"))
      editor.focus()
    }
    let out = wrap.appendChild(elt("div", {"class": "sandbox-output"}))
    let menu = wrap.appendChild(elt("div", {"class": "sandbox-menu", title: "Sandbox menu..."}))
    let sandbox = node.getAttribute("data-sandbox")
    if (lang == "text/html" && !sandbox) {
      sandbox = "html" + nextID++
      node.setAttribute("data-sandbox", sandbox)
      sandboxSnippets[sandbox] = node
    }
    node.style.display = "none"

    let data = editor.state.context = {editor: editor,
                                       wrap: wrap,
                                       orig: node,
                                       isHTML: lang == "text/html",
                                       sandbox: sandbox,
                                       meta: node.getAttribute("data-meta")}
    data.output = new SandBox.Output(out)
    menu.addEventListener("click", () => openMenu(data, menu))
  }

  function openMenu(data, node) {
    let menu = elt("div", {"class": "sandbox-open-menu"})
    let items = [["Run code (ctrl/cmd-enter)", () => runCode(data)],
                 ["Revert to original code", () => revertCode(data)],
                 ["Reset sandbox (ctrl/cmd-esc)", () => resetSandbox(data.sandbox)]]
    if (!data.isHTML || !data.sandbox)
      items.push(["Deactivate editor (ctrl-down)", () => { closeCode(data) }])
    items.forEach(choice => menu.appendChild(elt("div", choice[0])))
    function click(e) {
      let target = e.target
      if (e.target.parentNode == menu) {
        for (let i = 0; i < menu.childNodes.length; ++i)
          if (target == menu.childNodes[i])
            items[i][1]()
      }
      menu.parentNode.removeChild(menu)
      window.removeEventListener("click", click)
    }
    setTimeout(() => window.addEventListener("click", click), 20)
    node.offsetParent.appendChild(menu)
  }

  function runCode(data) {
    data.output.clear()
    let val = data.editor.getValue()
    getSandbox(data.sandbox, data.isHTML, box => {
      if (data.isHTML)
        box.setHTML(val, data.output, () => {
          if (data.orig.getAttribute("data-focus")) {
            box.win.focus()
            box.win.document.body.focus()
          }
        })
      else
        box.run(val, data.output, data.meta)
    })
  }

  function closeCode(data) {
    if (data.isHTML && data.sandbox) return
    data.wrap.parentNode.removeChild(data.wrap)
    data.orig.style.display = ""
  }

  function revertCode(data) {
    data.editor.setValue(data.orig.textContent)
  }

  let sandboxSnippets = {}
  {
    let snippets = document.getElementsByClassName("snippet")
    for (let i = 0; i < snippets.length; i++) {
      let snippet = snippets[i]
      if (snippet.getAttribute("data-language") == "text/html" &&
          snippet.getAttribute("data-sandbox"))
        sandboxSnippets[snippet.getAttribute("data-sandbox")] = snippet
    }
  }

  let sandboxes = {}
  function getSandbox(name, forHTML, callback) {
    name = name || "null"
    if (sandboxes.hasOwnProperty(name)) return callback(sandboxes[name])
    let options = {loadFiles: window.sandboxLoadFiles}, html
    if (sandboxSnippets.hasOwnProperty(name)) {
      let snippet = sandboxSnippets[name]
      options.place = node => placeFrame(node, snippet)
      if (!forHTML) html = snippet.textContent
    }
    SandBox.create(options).then(box => {
      if (html != null)
        box.win.document.documentElement.innerHTML = html
      sandboxes[name] = box
      callback(box)
    })
  }

  function resetSandbox(name) {
    if (!sandboxes.hasOwnProperty(name)) return
    let frame = sandboxes[name].frame
    frame.parentNode.removeChild(frame)
    delete sandboxes[name]
  }

  function placeFrame(frame, snippet) {
    let wrap = snippet.previousSibling, bot
    if (!wrap || wrap.className != "editor-wrap") {
      bot = snippet.getBoundingClientRect().bottom
      activateCode(snippet, null, "text/html")
      wrap = snippet.previousSibling
    } else {
      bot = wrap.getBoundingClientRect().bottom
    }
    wrap.insertBefore(frame, wrap.childNodes[1])
    if (bot < 50) {
      let newBot = wrap.getBoundingClientRect().bottom
      window.scrollBy(0, newBot - bot)
    }
  }

  function debounce(fn, delay = 50) {
    let timeout
    return () => {
      if (timeout) clearTimeout(timeout)
      timeout = setTimeout(() => fn.apply(null, arguments), delay)
    }
  }
})