diff --git a/hmml_to_html/hmml_to_html.c b/hmml_to_html/hmml_to_html.c
index 2182972..7cf5f75 100644
--- a/hmml_to_html/hmml_to_html.c
+++ b/hmml_to_html/hmml_to_html.c
@@ -1,6 +1,6 @@
 #if 0
 ctime -begin ${0%.*}.ctm
-gcc -g -fsanitize=address $0 -o ${0%.*} hmml.a
+gcc -g -Wall -Wno-unused-variable -fsanitize=address $0 -o ${0%.*} hmml.a
 ctime -end ${0%.*}.ctm
 exit
 #endif
@@ -111,6 +111,7 @@ CopyStringToBuffer(char *Src, buffer *Dest)
     {
         *Dest->Ptr++ = *Src++;
     }
+    *Dest->Ptr = '\0';
 }
 
 int
@@ -178,6 +179,252 @@ main(int ArgC, char **Args)
     int ClaimedMemory = 0;
     
     // NOTE(matt): Setup buffers and ptrs
+#if 1
+    char *InPtr;
+
+    buffer Title;
+    buffer QuoteMenu;
+    buffer ReferenceMenu;
+
+    buffer Player;
+    buffer Annotation;
+    buffer AnnotationHeader;
+    buffer AnnotationClass;
+    buffer AnnotationData;
+    buffer Text;
+    buffer Category;
+
+    buffer Master;
+
+    for(int FileIndex = 1; FileIndex < ArgC; ++FileIndex)
+    {
+        FILE *InFile;
+        if(!(InFile = fopen(Args[FileIndex], "r")))
+        {
+            perror(Args[0]);
+            free(MemoryArena);
+            return 1;
+        }
+
+        HMML_Output HMML = hmml_parse_file(InFile);
+        fclose(InFile);
+
+        if(HMML.well_formed)
+        {
+            int PrintLength;
+
+            ClaimBuffer(MemoryArena, &ClaimedMemory, &Title, 1024 * 16);
+            ClaimBuffer(MemoryArena, &ClaimedMemory, &Player, 1024 * 256);
+
+            PrintLength = sprintf(Title.Ptr,
+"        <div class=\"title\">\n"
+"            <span class=\"episode_name\">%s</span>\n", HMML.metadata.title);
+            Title.Ptr += PrintLength;
+
+            PrintLength = sprintf(Player.Ptr,
+"        <div class=\"player_container\">\n"
+"            <div class=\"video_container\" data-videoId=\"%s\"></div>\n"
+"            <div class=\"markers_container\">\n", HMML.metadata.id);
+            Player.Ptr += PrintLength;
+
+            for(int AnnotationIndex = 0; AnnotationIndex < HMML.annotation_count; ++AnnotationIndex)
+            {
+                ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationHeader, 256);
+                ClaimBuffer(MemoryArena, &ClaimedMemory, &AnnotationClass, 128);
+                ClaimBuffer(MemoryArena, &ClaimedMemory, &Text, 1024 * 4);
+
+                PrintLength = sprintf(AnnotationHeader.Ptr,
+"                <div data-timestamp=\"%d\"",
+TimecodeToSeconds(HMML.annotations[AnnotationIndex].time));
+                AnnotationHeader.Ptr += PrintLength;
+
+                PrintLength = sprintf(AnnotationClass.Ptr,
+" class=\"marker");
+                AnnotationClass.Ptr += PrintLength;
+
+
+
+
+
+
+                //TODO(matt): Replace this CopyStringToBuffer() with real stuff!
+                CopyStringToBuffer(HMML.annotations[AnnotationIndex].text,
+                        &Text);
+
+
+
+
+                CopyStringToBuffer("\"", &AnnotationClass);
+                CopyBuffer(&AnnotationClass, &AnnotationHeader);
+                CopyStringToBuffer(">\n", &AnnotationHeader);
+
+                ClaimBuffer(MemoryArena, &ClaimedMemory, &Annotation, 1024 * 4);
+
+                CopyBuffer(&AnnotationHeader, &Annotation);
+                sprintf(AnnotationHeader.Location,
+"                    <div class=\"content\"><span class=\"timecode\">%s</span>",
+HMML.annotations[AnnotationIndex].time);
+                CopyBuffer(&AnnotationHeader, &Annotation);
+
+                CopyBuffer(&Text, &Annotation);
+
+                sprintf(AnnotationHeader.Location, "</div>\n"
+"                    <div class=\"progress faded\">\n"
+"                        <div class=\"content\"><span class=\"timecode\">%s</span>",
+HMML.annotations[AnnotationIndex].time);
+                CopyBuffer(&AnnotationHeader, &Annotation);
+
+                CopyBuffer(&Text, &Annotation);
+
+                sprintf(AnnotationHeader.Location, "</div>\n"
+"                    </div>\n"
+"                    <div class=\"progress main\">\n"
+"                        <div class=\"content\"><span class=\"timecode\">%s</span>",
+HMML.annotations[AnnotationIndex].time);
+                CopyBuffer(&AnnotationHeader, &Annotation);
+
+                CopyBuffer(&Text, &Annotation);
+
+                CopyStringToBuffer("</div>\n"
+"                    </div>\n"
+"                </div>\n", &Annotation);
+
+                CopyBuffer(&Annotation, &Player);
+
+                ClaimedMemory -= Text.Size;
+                ClaimedMemory -= AnnotationHeader.Size;
+                ClaimedMemory -= AnnotationClass.Size;
+                ClaimedMemory -= Annotation.Size;
+            }
+
+            sprintf(Title.Ptr,
+"            <span class=\"annotator_container\">Annotator: <span class=\"annotator\">%s</span></span>\n"
+"        </div>\n", HMML.metadata.annotator);
+
+            sprintf(Player.Ptr,
+"            </div>\n"
+"        </div>\n");
+
+            //NOTE(matt): Collate the buffers!
+
+            ClaimBuffer(MemoryArena, &ClaimedMemory, &Master, 1024 * 512);
+            PrintLength = sprintf(Master.Ptr,
+"<!DOCTYPE html>\n"
+"    <head>\n"
+"        <meta charset=\"UTF-8\">\n"
+"\n"
+"        <!-- Load the player -->\n"
+"        <script type=\"text/javascript\" src=\"player.js\"></script>\n"
+"        <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">\n"
+"    </head>\n"
+"    <body>\n");
+            Master.Ptr += PrintLength;
+
+            //NOTE(matt): Here is where we do all our CopyBuffer() calls
+            CopyBuffer(&Title, &Master);
+            CopyBuffer(&Player, &Master);
+            //
+
+            PrintLength = sprintf(Master.Ptr,
+"        <script>\n"
+"            var player = new Player(document.querySelector(\".player_container\"), onRefChanged);\n"
+"            window.addEventListener(\"resize\", function() { player.updateSize(); });\n"
+"                document.addEventListener(\"keypress\", function(ev) {\n"
+"                    switch (ev.key) {\n"
+"                        case 'n':\n"
+"                        case 'd':\n"
+"                        case 's': {\n"
+"                                player.jumpToNextMarker();\n"
+"                        } break;\n"
+"\n"
+"                        case 'p':\n"
+"                        case 'a':\n"
+"                        case 'w': {\n"
+"                                player.jumpToPrevMarker();\n"
+"                        } break;\n"
+"    }\n"
+"});\n"
+"\n"
+"var refTimecodes = document.querySelectorAll(\".refs .ref .timecode\");\n"
+"for (var i = 0; i < refTimecodes.length; ++i) {\n"
+"    refTimecodes[i].addEventListener(\"click\", function(ev) {\n"
+"        if (player) {\n"
+"            var time = ev.currentTarget.getAttribute(\"data-timestamp\");\n"
+"            player.setTime(parseInt(time, 10));\n"
+"            player.play();\n"
+"            ev.preventDefault();\n"
+"            ev.stopPropagation();\n"
+"            return false;\n"
+"        }\n"
+"    });\n"
+"}\n"
+"\n"
+"var refSources = document.querySelectorAll(\".refs .ref\");\n"
+"for (var i = 0; i < refSources.length; ++i) {\n"
+"    refSources[i].addEventListener(\"click\", function(ev) {\n"
+"        if (player) {\n"
+"            player.pause();\n"
+"        }\n"
+"    });\n"
+"}\n"
+"\n"
+"function onRefChanged(ref) {\n"
+"    var sourceMenus = document.querySelectorAll(\".refs_container\");\n"
+"    for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)\n"
+"        {\n"
+"        var SetMenu = 0;\n"
+"        if (ref !== undefined && ref !== null) {\n"
+"            var refElements = sourceMenus[MenuIndex].querySelectorAll(\".refs .ref\");\n"
+"            var refs = ref.split(\",\");\n"
+"\n"
+"            for (var i = 0; i < refElements.length; ++i) {\n"
+"                if (refs.includes(refElements[i].getAttribute(\"data-id\"))) {\n"
+"                    refElements[i].classList.add(\"current\");\n"
+"                    SetMenu = 1;\n"
+"                } else {\n"
+"                    refElements[i].classList.remove(\"current\");\n"
+"                }\n"
+"            }\n"
+"            if(SetMenu) {\n"
+"                sourceMenus[MenuIndex].classList.add(\"current\");\n"
+"            } else {\n"
+"                sourceMenus[MenuIndex].classList.remove(\"current\");\n"
+"            }\n"
+"\n"
+"        } else {\n"
+"            sourceMenus[MenuIndex].classList.remove(\"current\");\n"
+"            var refs = sourceMenus[MenuIndex].querySelectorAll(\".refs .ref\");\n"
+"            for (var i = 0; i < refs.length; ++i) {\n"
+"                refs[i].classList.remove(\"current\");\n"
+"            }\n"
+"        }\n"
+"    }\n"
+"}\n"
+"        </script>\n"
+"    </body>\n"
+"</html>\n");
+
+            Master.Ptr += PrintLength;
+
+            FILE *OutFile;
+            if(!(OutFile = fopen("out.html", "w")))
+            {
+                perror(Args[0]);
+                return 1;
+            }
+            fwrite(Master.Location, Master.Ptr - Master.Location, 1, OutFile);
+            fclose(OutFile);
+
+            ClaimedMemory -= Title.Size;
+            ClaimedMemory -= Master.Size;
+        }
+        else
+        {
+            fprintf(stderr, "%s:%d: %s\n", Args[FileIndex], HMML.error.line, HMML.error.message);
+        }
+        hmml_free(&HMML);
+    }
+#else
     char *InPtr;
     buffer Working;
     buffer Text;
@@ -436,27 +683,37 @@ HMML.annotations[AnnotationIndex].time);
 "}\n"
 "\n"
 "function onRefChanged(ref) {\n"
-"    if (ref !== undefined && ref !== null) {\n"
-"        document.querySelector(\".refs_container\").classList.add(\"current\");\n"
-"        var refElements = document.querySelectorAll(\".refs .ref\");\n"
-"        var refs = ref.split(\",\");\n"
+"    var sourceMenus = document.querySelectorAll(\".refs_container\");\n"
+"    for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)\n"
+"        {\n"
+"        var SetMenu = 0;\n"
+"        if (ref !== undefined && ref !== null) {\n"
+"            var refElements = sourceMenus[MenuIndex].querySelectorAll(\".refs .ref\");\n"
+"            var refs = ref.split(\",\");\n"
 "\n"
-"        for (var i = 0; i < refElements.length; ++i) {\n"
-"            if (refs.includes(refElements[i].getAttribute(\"data-id\"))) {\n"
-"                refElements[i].classList.add(\"current\");\n"
-"            } else {\n"
-"                refElements[i].classList.remove(\"current\");\n"
+"            for (var i = 0; i < refElements.length; ++i) {\n"
+"                if (refs.includes(refElements[i].getAttribute(\"data-id\"))) {\n"
+"                    refElements[i].classList.add(\"current\");\n"
+"                    SetMenu = 1;\n"
+"                } else {\n"
+"                    refElements[i].classList.remove(\"current\");\n"
+"                }\n"
+"            }\n"
+"            if(SetMenu) {\n"
+"                sourceMenus[MenuIndex].classList.add(\"current\");\n"
+"            } else {\n"
+"                sourceMenus[MenuIndex].classList.remove(\"current\");\n"
+"            }\n"
+"\n"
+"        } else {\n"
+"            sourceMenus[MenuIndex].classList.remove(\"current\");\n"
+"            var refs = sourceMenus[MenuIndex].querySelectorAll(\".refs .ref\");\n"
+"            for (var i = 0; i < refs.length; ++i) {\n"
+"                refs[i].classList.remove(\"current\");\n"
 "            }\n"
-"        }\n"
-"    } else {\n"
-"        document.querySelector(\".refs_container\").classList.remove(\"current\");\n"
-"        var refs = document.querySelectorAll(\".refs .ref\");\n"
-"        for (var i = 0; i < refs.length; ++i) {\n"
-"            refs[i].classList.remove(\"current\");\n"
 "        }\n"
 "    }\n"
 "}\n"
-"\n"
 "        </script>\n"
 "    </body>\n"
 "</html>\n");
@@ -480,5 +737,6 @@ HMML.annotations[AnnotationIndex].time);
         }
         hmml_free(&HMML);
     }
+#endif
     free(MemoryArena);
 }
diff --git a/hmml_to_html/reference.html b/hmml_to_html/reference.html
index f8b09de..f5f11b6 100644
--- a/hmml_to_html/reference.html
+++ b/hmml_to_html/reference.html
@@ -63,7 +63,7 @@
         <div class="player_container">
             <div class="video_container" data-videoId="ug5WkCROkOk"></div>
             <div class="markers_container">
-                <div class="marker authored" data-timestamp="60" data-ref="0,1">
+                <div class="marker authored cat_rendering cat_research" data-timestamp="60" data-ref="0,1">
                     <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category research"></div></span></div>
                     <div class="progress faded">
                         <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/Zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div><div class="category research"></div></span></div>
@@ -176,7 +176,6 @@ function onRefChanged(ref) {
             }
 
         } else {
-            console.log("%s should deselect, outer loop!", MenuIndex);
             sourceMenus[MenuIndex].classList.remove("current");
             var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
             for (var i = 0; i < refs.length; ++i) {