def left(e: Expr): String = {
    "<li>" +
      "<span class=\"junct\">" + e + "</span>" +
    "</li>"
  }

  def right(e: Expr): String = {
    "<li>" +
      "<span class=\"junct\">" + e + "</span>" +
    "</li>"
  }

  def symbol(): String = {
    "<span class=\"turnstile\">=></span>"
  }

  def renderSequent(e: Expr): String = {
    val s = "<div id=\"" + Gensym.gensym + "\">" +
        "<ul class=\"commaList\">" +
          left(e) +
        "</ul>" +
        symbol() +
        "<ul class=\"commaList\">" +
          right(e) +
        "</ul>" +
      "</div>"
      s
  }

  def buildNode(e: Expr): String = {
      "<table>" +
        "<tbody>" +
          "<tr>" +
            "<td class=\"inference\">" + renderSequent(e) +
            "</td>" +
            "<td class=\"tagBox\">" +
              "<div class=\"tag\">" +
                "<span class=\"explained\" id=\"iw-20\">" + "(->l)" + "</span>" +
              "</div>" +
            "</td>" +
          "</tr>" +
        "</tbody>" +
      "</table>"
  }

  def buildSibling(e: Expr): String = {
    "<div class=\"sibling\">" +
      "<span></span>" +
      buildNode(e) +
    "</div>"
  }

  def processChildren(children: List[Tree[Expr]]): String = children match {
    case Nil => ""
    case sibling :: rest => sibling match {
      case Tree(e, Nil) => buildSibling(e) + processChildren(rest)
        case _ => "<div class=\"sibling\">" + renderTree(sibling)  + "</div>" +
              processChildren(rest)
    }
  }

  def renderTree(t: Tree[Expr]): String = {
    t match {
    case Tree(e, Nil) => buildSibling(e)
    case Tree(e, children) => {
        "<div>" + processChildren(children) + "</div>" + buildNode(e)
    }
  }
  }