addEventListener("load", () => {
  let editor = CodeMirror.fromTextArea(document.querySelector("#editor"), {
    mode: "javascript",
    extraKeys: {
      "Ctrl-Enter": runCode,
      "Cmd-Enter": runCode
    },
    matchBrackets: true,
    lineNumbers: true
  })
  function guessType(code) {
    return /^[\s\w\n:]*</.test(code) ? "html" : "js"
  }
  let reGuess
  editor.on("change", () => {
    clearTimeout(reGuess)
    reGuess = setTimeout(() => {
      if (context.type == null) {
        let mode = guessType(editor.getValue()) == "html" ? "text/html" : "javascript"
        if (mode != editor.getOption("mode"))
          editor.setOption("mode", mode)
      }
    }, 500)
  })

  function hasIncludes(code, include) {
    if (!include) return code

    let re = /(?:\s|<!--.*?-->)*<script src="([^"]*)"><\/script>/g, m
    let found = []
    while (m = re.exec(code)) found.push(m[1])
    return include.every(s => found.indexOf(s) > -1)
  }

  function setEditorCode(code, type) {
    editor.setValue(code)
    editor.setOption("mode", (type || guessType(code)) == "html" ? "text/html" : "javascript")
  }

  function opt(value, label) {
    let node = document.createElement("option")
    node.value = value
    node.textContent = label || value
    return node
  }

  function getChapter(number) {
    for (let i = 0; i < chapterData.length; i++)
      if (chapterData[i].number == number)
        return chapterData[i]
  }

  let per = document.querySelector("#per_chapter")
  per.addEventListener("change", () => {
    selectContext(per.value)
    document.location.hash = "#" + (per.value == "box" ? chapters.value : per.value)
  })
  let fileList = document.querySelector("#files")
  let fileInfo = document.querySelector("#fileInfo")
  let runLocally = document.querySelector("#runLocally")
  let localFileList = document.querySelector("#local-files")

  function addItem(container, link) {
    let li = container.appendChild(document.createElement("li"))
    let a = li.appendChild(document.createElement("a"))
    a.href = link
    a.textContent = link.replace(/^code\//, "")
  }

  function selectChapter(number, context) {
    per.textContent = ""
    let chapter = getChapter(number)
    if (chapter.exercises.length) {
      per.appendChild(opt("box", "Select an exercise"))
      chapter.exercises.forEach(exercise => {
        let num = chapter.number + "." + exercise.number
        per.appendChild(opt(num, num + " " + exercise.name))
      })
    } else {
      per.appendChild(opt("box", "This chapter has no exercises"))
    }
    fileInfo.style.display = runLocally.style.display = "none"
    fileList.textContent = localFileList.textContent = ""
    if (chapter.links) chapter.links.forEach((file, i) => {
      if (!i) runLocally.style.display = ""
      addItem(localFileList, file)
    })
    if (chapter.include) chapter.include.forEach((file, i) => {
      if (!i) fileInfo.style.display = ""
      addItem(fileList, file)
    })
    selectContext(context || "box")
  }

  function findExercise(id, chapter) {
    let parts = id.split(".")
    if (!chapter) chapter = getChapter(parts[0])
    for (let i = 0; i < chapter.exercises.length; i++)
      if (chapter.exercises[i].number == +parts[1])
        return chapter.exercises[i]
  }

  let context = {include: []}

  function selectContext(value) {
    output.clear()
    clearSandbox()
    let chapter = getChapter(chapters.value), visible
    if (value == "box") {
      let code = (chapters.value < 20 || chapters.value > 21)
       ? "Run code here in the context of Chapter " + chapter.number
       : "Code from Node.js chapters can't be run in the browser"
      let guessed = guessType(chapter.start_code)
      if (guessed == "js")
        code = "// " + code
      else
        code = "<!-- " + code + "-->"
      if (chapter.start_code) code += "\n\n" + chapter.start_code
      context = {include: chapter.include}
      setEditorCode(code, guessed)
      visible = "box"
    } else {
      let exercise = findExercise(value, chapter)
      context = {include: chapter.include,
                 solution: exercise.solution,
                 type: exercise.type}
      setEditorCode(exercise.code, exercise.type)
      visible = "exercise"
      let link = document.querySelector("#download")
      link.setAttribute("download", "solution" + value + ".js")
      if (/\.zip$/.test(exercise.file))
        link.href = exercise.file
      else
        link.href = "data:text/plain;charset=UTF-8," + encodeURIComponent(exercise.solution)
    }
    ["box", "exercise"].forEach(id => {
      document.querySelector("#" + id + "_info").style.display =
        (id == visible ? "" : "none")
    })
  }

  let outnode = document.querySelector(".sandbox-output")
  let output = new SandBox.Output(outnode)

  document.querySelector("#run").addEventListener("click", runCode)

  let sandbox
  function clearSandbox() {
    if (sandbox) {
      sandbox.frame.parentNode.removeChild(sandbox.frame)
      sandbox = null
    }
  }

  function runCode() {
    clearSandbox()
    let val = editor.getValue(), type = context.type || guessType(val)
    SandBox.create({
      loadFiles: hasIncludes(val, context.include) ? [] : context.include,
      place: type == "html" &&
        function(node) {
          let out = document.querySelector(".sandbox-output")
          out.parentNode.insertBefore(node, out)
        }
    }).then(box => {
      sandbox = box
      output.clear()
      if (type == "html")
        box.setHTML(val, output)
      else
        box.run(val, output)
    })
  }

  document.querySelector("#solution").addEventListener("click", () => {
    setEditorCode(context.solution, context.type)
  })

  let chapters = document.querySelector("#chapters")
  chapterData.forEach(chapter => {
    chapters.appendChild(opt(chapter.number, chapter.number + ". " + chapter.title))
    chapter.exercises.forEach(exercise => {
      exercise.chapter = chapter
    })
  })
  chapters.addEventListener("change", () => {
    selectChapter(chapters.value)
    document.location.hash = "#" + chapters.value
  })

  function parseFragment() {
    let hash = document.location.hash.slice(1)
    let valid = /^(\d+)(?:\.(\d+))?$/.exec(hash)
    let chapter, exercise
    if (valid) {
      chapter = getChapter(Number(valid[1]))
      exercise = chapter && valid[2] && findExercise(hash, chapter)
      if (!chapter || valid[2] && !exercise) valid = null
    }
    if (valid) {
      let perValue = exercise ? hash : "box", setPer = false
      if (chapters.value != valid[1]) {
        chapters.value = valid[1]
        selectChapter(Number(valid[1]), perValue)
        setPer = true
      }
      if (per.value != perValue) {
        per.value = perValue
        if (!setPer) selectContext(perValue)
      }
      return true
    }
  }

  parseFragment() || selectChapter(0, "box")
  addEventListener("hashchange", parseFragment)
})