Merge pull request #1 from lastebil/overhaul

Significantly updated, but not working 100%. editor needs ... much work. the 'panel' mode needs a proper algorithm and I'm not... getting it.
2015-02-28 17:22:08 +02:00 · 2015-02-28 17:22:08 +02:00 · 61d667cad5
commit 61d667cad5
parent 43fc19c451 bc115a7dab
70 changed files with 7544 additions and 1959 deletions
--- a/.jshintrc
+++ b/.jshintrc
@ -0,0 +1 @@
+eqnull
--- a/47
+++ b/47
@ -0,0 +1,47 @@
+fs = require 'fs'
+option '-o', '--output [dir]', 'dir for compiled code'
+
+task 'watch', 'watch current dir', (options) ->
+    {spawn} = require 'child_process'
+    args = ['-w','-c']
+    if options.output
+        args = args.concat ['./']
+
+        process.chdir __originalDirname
+        coffee = spawn 'coffee', args
+        coffee.stderr.on 'data', (data) ->
+            process.stderr.write data.toString()
+        coffee.stdout.on 'data', (data) ->
+            console.log data.toString()
+
+source = [
+  '16col/imgtxtmode.coffee',
+  '16col/ansi.coffee',  
+  '16col/bin.coffee',
+  '16col/idf.coffee',
+  '16col/adf.coffee',
+  '16col/sauce.coffee',
+  '16col/tundra.coffee',
+  '16col/pcboard.coffee',
+  '16col/avatar.coffee',
+  '16col/xbin.coffee',
+  '16col/pallette.coffee',
+  '16col/fonts.coffee',
+]
+
+task 'build', 'Build merged file for production', (options) ->
+    {exec} = require 'child_process'
+    content = []
+    
+    for file, index in source then do (file, index) ->
+        fs.readFile file, 'utf8', (err, fileContents) ->
+            throw err if err
+            content[index] = fileContents
+            if index == source.length - 1
+                coffee = content.join('\n')
+                fs.writeFile 'textmode.coffee', coffee, 'utf8', (err) ->
+                    throw err if err
+                    command = 'coffee --compile textmode.coffee'
+                    exec command, (err, stdout, stderr) ->
+                        throw err if err
+                        console.log stdout + stderr
--- a/README.md
+++ b/README.md
@ -9,6 +9,8 @@
        Coded by Sir Garbagetruck / Accession 2013
          Uses fonts by DMG, http:trueschool.se
     Uses SixteenColors textmode js library for rendering
+            (well, my optimized version...)
+                      Version B
 --
 This ANSI / Ascii viewer was designed _SPECIFICALLY_ to
 address shortcomings with acidview and other viewers in
@ -31,8 +33,8 @@ so if we just would do something in a browser, it would
 all work out nicely.

 That was the impetus for this, and it's turned out...
-well, fairly well.  It has been used at Revision 2013
-and Evoke 2013, and the folks who saw their stuff in
+well, fairly well.  It has been used at Revision,
+Evoke, and Payback, and the folks who saw their stuff in
 it have basically said it is really good.  I think it
 needs a bit more feedback and some bugfixes, and the
 folks at sixteencolors have had some suggestions and
@ -68,25 +70,21 @@ for details, or just get the license:

 * tl;dr wtf omg how duz thz wrk omg wtf

-1. Place the important files (.js, .css, .html, .sahli) on a webserver or local directory.
-2. Put your ansi and ascii files on the webserver / local directory.
-3. Edit the 'list.sahli' file (it's json) to have
-  the proper filenames.
-  * yes an editor is coming for the standalone
-  * for the integrated-with-partymeister version,
-  partymeister will do the sorting/listgen and you
-  will take the generated 'pack' and ... do something.
-  I'll write that code at some point after we work out
-  the details.
-4. If you want edit other stuff too, like the descriptions
+1. Place the important files (.js, .css, .html, .sahli)
+ on a webserver or local directory.
+2. Put your ansi and ascii files on the webserver / local
+ directory. (Or unpack your colly, etc...)
+3. Fire up the editor and set up the .sahli file.
+ Alternately, edit it as JSON.  (Just be sure it's 100%
+ correct or your show won't go like you planned.)
 5. Open the index file in your browser. Something like
    http://localhost/somewhere/sahli/index.html
-or if it's on the web, then:
+  ** or if it's on the web, then:
    http://www.example.com/ansiasciicompo/sahli/index.html
 6. When it says things are loaded, hit 'space' - OR ? or h
   ? and h are "help"
 7. Everything is done by keys.
-8. Ok on a tablet tap corners and stuff, cuz no keys.
+8. On a tablet tap corners and stuff, cuz no keys.

 - Great so yeah why is it 'Sahli'

@ -97,3 +95,6 @@ than a Truck-can't-speak-Finnish-well accent.
 - Example files are from Breakpoint 2013's compo, credits:
 H7/Blocktronics/Accession, Urs/Mercury, Ted/Pöo-crüe^3ln,
 Azzarro/Madwizards.
+- More examples came from 16colors archive. When the final
+Sahli ver. B comes out, I'll select some test files and
+put those credits in here too.
--- a/ansilove.js/.tm_properties
+++ b/ansilove.js/.tm_properties
@ -0,0 +1,2 @@
+excludeInFileChooser = "{$excludeInFileChooser,reference}"
+TM_JSLINTMATE_JSLINT_OPTIONS_FILE = "$CWD/jslint.json"
--- a/ansilove.js/LICENSE
+++ b/ansilove.js/LICENSE
@ -0,0 +1,32 @@
+Copyright (C) 2013 Andrew Herbert and Frederic Cambus.
+
+AnsiLove.js™ is a trademark of Frederic Cambus, used with permission.
+https://github.com/andyherbert/ansilove.js
+All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction except as noted below, including without
+limitation the rights to use, copy, modify, merge, publish, distribute, and/or
+sublicense, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+- The Software and/or source code cannot be copied in whole and sold without
+  meaningful modification for a profit. 
+
+- The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+- Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+- Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/ansilove.js/README.md
+++ b/ansilove.js/README.md
@ -0,0 +1,213 @@
+## Description
+
+AnsiLove.js is a partial rewrite of [ansilove][1] and [AnsiLove-C][2] in the Javascript programming language. Unlike the original projects, AnsiLove.js enables artscene related file formats to be displayed directly on a webpage on the client-side, and supports ANSi (.ANS), PCBOARD (.PCB), BiNARY (.BIN), ADF (.ADF), iDF (.IDF), TUNDRA (.TND) and XBiN (.XB) formats.
+
+AnsiLove.js supports the majority of options found in the original set of tools.
+
+[ansilove™][1] is a trademark of Frederic Cambus.  
+[AnsiLove-C™][2] is a trademark of Stefan Vogt, Brian Cassidy and Frederic Cambus.
+
+AnsiLove.js has been tested on Safari, Firefox, and Chrome. Results may vary widely on Internet Explorer browsers.
+
+## Features
+
+- ANSi (.ANS) format support
+- PCBOARD (.PCB) format support
+- BiNARY (.BIN) format support
+- ADF (.ADF) format support (Artworx)
+- iDF (.IDF) format support (iCE Draw)
+- TUNDRA (.TND) format support
+- XBiN (.XB) format support
+- SAUCE (Standard Architecture for Universal Comment Extentions)
+- 80x25 font support
+- 80x50 font support
+- Amiga font support
+- iCE colors support
+
+## Supported charsets
+
+- IBM PC (Code page 437)
+- Baltic (Code page 775)
+- Cyrillic (Code page 855)
+- French Canadian (Code page 863)
+- Greek (Code pages 737 and 869)
+- Hebrew (Code page 862)
+- Icelandic (Code page 861)
+- Latin-1 (Code page 850)
+- Latin-2 (Code page 852)
+- Nordic (Code page 865)
+- Portuguese (Code page 860)
+- Russian (Code page 866)
+- Turkish (Code page 857)
+- Armenian
+- Persian (Iran System encoding standard)
+
+## Usage
+
+    AnsiLove.render("example.bin", function (canvas, sauce) {
+        document.body.appendChild(canvas);
+        console.log(sauce);
+    }, {"font": "80x25", "bits": "8", "icecolors": 0, "columns": 80, "thumbnail": 0});
+
+For extremely large files, which may silently fail on some browsers when producing a single canvas element, the `splitRender` function will produce an array of canvas elements, which can then be stacked vertically in the browser to simulate a single, contiguous display. The value of `27` in the following example is the maximum amount of text-rows in used in each element.
+
+When aligning these elements on a page there may be a small gap between each image. To correct this, simply apply the CSS style `vertical-align: bottom`, or apply it progmatically with a single line of Javascript.
+
+    AnsiLove.splitRender("long_ansi.ans", function (canvases, sauce) {
+        canvases.forEach(function (canvas) {
+            canvas.style.verticalAlign = "bottom"; // For perfect, gap-less viewing.
+            document.body.appendChild(canvas);
+        });
+        console.log(sauce);
+    }, 27, {"bits": "8"});
+   
+And for ANSImations, the animate function returns a controller object which when issued with the play() call, renders an ANSI at a pre-determined baud rate, and can be passed an additional function which is called upon completion.
+
+    var controller = AnsiLove.animate("ansimation.ans", function (canvas, sauce) {
+        document.getElementById("example").appendChild(canvas);
+        console.log(sauce);
+        controller.play(14400, function () {
+            console.log("Finished!");
+        });
+    }, {"bits": "9"});
+
+If a function is passed after the options object of any method, then it will be called in the event that the file cannot be fetched, or if an error occured whilst attempting to interpret the file.
+
+    AnsiLove.render("example.ans", function (canvas, sauce) {
+        ...
+    }, {}, function (message) {
+        alert("Error: " + message);
+    });
+
+### PC font options: 
+
+ - 80x25 (Default, code page 437)
+ - 80x25small (small, but legible code page 437)
+ - 80x50 (Code page 437, 80x50 mode)
+ - armenian
+ - baltic (Code page 775)
+ - cyrillic (Code page 855)
+ - french-canadian (Code page 863)
+ - greek (Code page 737)
+ - greek-869 (Code page 869)
+ - hebrew (Code page 862)
+ - icelandic (Code page 861)
+ - latin1 (Code page 850)
+ - latin2 (Code page 852)
+ - nordic (Code page 865)
+ - persian (Iran System encoding standard)
+ - portuguese (Code page 860)
+ - russian (Code page 866)
+ - terminus (Terminus font)
+ - turkish (Code page 857)
+
+### Amiga font options:
+ 
+ - amiga (alias to Topaz)
+ - b-strict (Original B-Strict font)
+ - b-struct (Original B-Struct font)
+ - microknight (Original MicroKnight version)
+ - microknight+ (Modified MicroKnight version)
+ - microknightplus (alias to MicroKnight + to be used in URLs)
+ - mosoul (Original mO’sOul font)
+ - pot-noodle (Original P0T-NOoDLE font)
+ - topaz (Original Topaz Kickstart 2.x version)
+ - topaz+ (Modified Topaz Kickstart 2.x+ version)
+ - topazplus (alias to Topaz+ to be used in URLs)
+ - topaz500 (Original Topaz Kickstart 1.x version)
+ - topaz500+ (Modified Topaz Kickstart 1.x version)
+ - topaz500plus (alias to Topaz500+ to be used in URLs)
+
+
+### Bits options
+ 
+ - "8" (8-bit): Default rendering mode.
+ - "9" (9-bit): Renders the 9th column of block characters, causing the output to look like it’s displayed in real textmode.
+ - "ced": Renders files in black on gray, and limit the output to 78 columns (only available in ANSi loader). Used together with an Amiga font, the output will look like it is displayed on Amiga.
+ - "workbench": Renders files using Amiga Workbench colors (only available in ANSi loader).
+
+### iCE colors options
+
+- 0 (default, turned OFF)
+- 1 (turned ON)
+
+### Columns options
+
+Used for .BIN files only. Skip this option when converting other formats. The default is set at 160.
+
+### Thumbnail options
+
+- 0 (default, turned OFF)
+- 1 (1/8 scale)
+- 2 (1/4 scale)
+- 3 (1/2 scale)
+
+A thumbnail image is rendered instead of a full-size image. Does not apply when playing ansimations.
+
+### Filetype options
+
+- ans
+- txt
+- nfo
+- asc
+- diz
+- ion
+- adf
+- bin
+- idf
+- pcb
+- tnd
+- xb
+
+Instead of guessing the filetype based on the name or extension of the url, the chosen rendering method can be chosen from this list by using the option `"filetype": "<type>"`. Using this method, it is possible to display the raw data contained within a file by over-riding this property with `"asc"`.
+
+### 2x options
+
+- 0 (default, turned OFF)
+- 1 (turned ON)
+
+Delivers a canvas element which has double the width and height in pixels, but styled in half these amounts in CSS-pixels. This makes it suitable for display on devices with high pixel densities.
+
+### SAUCE record
+
+As well as a canvas element, a [SAUCE][3] record is returned as a Javascript object if one is found, and follows this format:
+
+    {
+        "version": "00",
+        "title": "Example ANSI",
+        "author": "Joe Q. Public",
+        "group": "Generic Ansi Group",
+        "date": "20130922",
+        "fileSize": 1337,
+        "dataType": 1,
+        "fileType": 1,
+        "tInfo1": 80,
+        "tInfo2": 26,
+        "tInfo3": 0,
+        "tInfo4": 0,
+        "comments": ["Comment 1.", "Comment 2.", ... ],
+        "flags": 0
+    }
+
+It is also possible to retrieve a record for a file without generating an image by using the `sauce` function.
+
+    AnsiLove.sauce("example.ans", function (sauce) {
+        console.log(sauce);
+    });
+
+## License
+
+AnsiLove.js is released under a MIT-style license. See `LICENSE` file for details.
+
+## Author
+
+AnsiLove is developed by [Frederic Cambus](http://www.cambus.net)  
+AnsiLove.js is developed by [Andrew Herbert](http://andyh.org)
+
+## Resources
+
+Project Homepage : [https://github.com/andyherbert/ansilove.js](https://github.com/andyherbert/ansilove.js)
+
+[1]: https://github.com/fcambus/ansilove
+[2]: https://github.com/ByteProject/AnsiLove-C
+[3]: http://web.archive.org/web/20120204063648/http://www.acid.org/info/sauce/sauce.htm
--- a/ansilove.js/ansilove.js
+++ b/ansilove.js/ansilove.js
--- a/ansilove.js/example/cl!-al02.ans
+++ b/ansilove.js/example/cl!-al02.ans
@ -0,0 +1,18 @@
+[0m
+[60C[1;30mþ  ß ßßÛ[0m
+[16C[1;30mß[0m[22C[1;33;47m²[40mßß²²[0;30m [37m °°°°[4C[1;30mÜ[0m [1;30mß[31m ÜÜ[47m²²±°[36m°°[0m [1;30m²[0m
+[16C[1;30mÛ ß Ü[0m[18C[1;33;47m±[0m [1;31;41m²[33;47m²²[31;43m²²[47mß[41m±[0m°°[1;30m þß[0m [1;31mÜÜ[43m²²[47m²²ÛÛ²²±°[0m [1;30m²[0m
+[16C[1;30mÛ[0m [1;31;43m²[40mÜ[30m ßþÜ[0m[10C[1;30mÜ[0m[4C[1;33;47m°[0m [1;31;47m²[33m±±[31;43m²[47mÜ[33mß[31mÜ[0m [1;30mþ[0m [1;31mÜ[43m²²[47mß[33mÜ[31mßÛÛ[43m²²²[47mÛÛ²±[0m [1;30m±[0m
+[7C[1;30mÜ[0m[7C[1;30mÞÝ[31mÞ[43m²²[40mÛÛÜÜ [30mßÛ[0m[5C[1;30mþ[0m [1;30mÜ[0m[4C[1;30;47m°[0m [1;31;47m²[33m°°[31m²[43m²[41m±[0;33mß[37m [1;31mÜ[43m²Û[47m²²ÛÜ[43m²²[40mßß[43m±±²²[40mÛ[47m²[0m [1;30m°[0m
+[5C[1;31;47m±[0mÜ [1;30m Ü[0m[5C[1;30mß [31;41mÛÛ[47mß[33mÜ[31mß[40mÛ[43m²²[40m [30mÛ[0m [1;30mÜþ[0m [1;31mÜ[43m²[0m [1;30mÛ[0m[4C[1;30;47m±[0m [1;31;43m²[47m°°²[41m±[0;33mß[1;31m [43m²²Û[47mÛÛ[43m²²[40mß[0m [1;30mÜ[31m [30;43m°[31m°°±±[40mßß[0m   [1;30mþÜ[0m [1;30mß[0m [1;30mþ[0m
+[5C[1;31;47m°±²[40mÜ[0m [1;30mßÜ[0m [1;30mÜß[0m [1;31;43m²²[41mÛ[40mÛ[47mÜ[40mÛÛÛ[43m²[40m [30mß[31m ÜÜÛ[43m²²[40m [30mÞÝ[0m  [1;30m [47m²[0m [1;31mÛ[47m±±[43m²[0;33mÝ[37m [1;31mÛ[47mß[37mÜ[31mß[43m²²[40mß[0m [1;30mÜ Ü[0m [1;30;43m°[0;33mßß[37m [1;30mÜþ[33m Üß[47m²[40mÜ Ü[47m²²[40mÜ [30mþ[0m
+[5C[1;33;47m°[0m [1;31mß[47m²²[40mÜ[0m [1;30mß[0m [1;31mÜÛ[47mß[36mÜ[31mß[40mÛ[47m²²[40mÛÛÜÜ[43m²²[40mÛÛ[47mß[33mÜ[31mß[40mÝ[30m Ü[0m   [1;30mÜ[0m [1;31;43m²[47m²²[41m±[0m [1;31mÞ[43m²Û[47mÜ[43mÛ²[40mÝ [30mÛ  ²Ü þß [0m  [1;33mÞÝ[36mÞ[47m²[33m²[40mÛÛ[36;47m²[33m²²[40mÝ[0m [1;30mÜ[0m
+[5C[1;33;47m±[0m Ü [1;31mß[43m²[40mß[0;33mÜ[1;31;41m±[43m²²[40mÛ[47mÜ[40mÛ[43m²[40mÜÛÛÛ[47m²²[40mÛ[43m²²Û[40mÛ[47mÜ[40mÛ[43m²[0m [1;30mßÜ[0m  [1;30m²[0m [1;31;41m±[43m²[41mÛ[43m²[0;33mÝ[37m [1;31;43m²²[47m²²ß[40mÛÜ[0m [1;30mßÜ[0m[7C[31mþ[1;33m ß²²ßÛ[36;47m²[33m²²[40mß [0mÜ
+[5C[1;33;47m²[0m   [31mÜÜ[1;41m°°±±[43m²²[40mÛßÜÛ[43m²²[40mÛÛÛÛÛÛÛÜ[47m²²[40mÛ[47mß[40mÜ[0m [1;30mßÜ [0m [1;31;41m°±[43m²²[41m±[0;33mÜ[1;31m ß[43m²[47mÜ[33mß[31mÜ[40mÛ[43m²[40mÜÜ[0m [1;30mß[0mþ[5C[31mß[33mÜ[37m [1;33mßÛ[47m²²[40mß[0m  Ü
+[5C[31mÜ[37m [31mß[30;41m°°[33m°°[1;31m°°±±[40mß[30mÜ [31;43m²[40mÛÛ[47m²²[40mÛ²Û[47mß[36mÜ[31mß[40mÛÜß[47mÜ[37mß[31mÜ[43m²[40mÜ[0m [1;30mß[0;31m [1;30;41m°[31m°±±[43m²²Ü[0m [1;31m ßß[43m²²[40mÛ[47mß[36mÜ[31mß[43m²[40mÜ [0mß[5C[1;31;43m±[40mÜ [33mß[0m Ü[1;31;43m²[0m [1;36mÜ[0m
+  [1;30mßÜ[0m  [31mßÜ[37m [31mß[30;41m°°[31;40mßß[37m [31mÜ[1;41m°[0;31mÜ[1;30m [31;41m±[43m²[40mÛÛÛÛ±[43mÛ[40mÛ[47mÜ²²Û[40mÛ[0m [1;31mß[41mÛ[47mß[36mÜ[31mß[40mÜÜ[0;31mßß[1;41m°°±±±[0m [1;36;47m°[0mß[1;36mþÜ[31m ß[43m²[47mÜ[40mÛÛ[47m²²[0m ß ß[1;36mÛ[0m [1;31mÛ[47m²²[40mÜ[47mÜ[36mß[31mÜ[0m [1;36mß[0m
+[4C[1;30mßÜ[0m  [31mß[37m  Ü[1;36mþßÜ[0m [31mß[1;41m°°±±[43m²²[40mÛÛ°[43m²²²²²²²[0m [1;36mÜ[0m [1;31mß[47mÜ[41mÛÛ[43m²²[41m±[0;31mÜÜ[1;41m°°°[0m [30;47m°[37;40m   [1;47m±[31;40m ÞÛ[47mß[36mÜ[31mß[40mÛÝ[0m [1m²[0m [1;36;47m²[0m [1;31;43m²²²²²²²[0m ß[1;30m Cl![0;35m°°°°[37m [1;33mÜ[0m [35m²[37m ß [35mÜÛÜ[37m [1mßÜ[0m [31mß[1;41m°°±±[43m²²[30;40m [31;41m±±±±±±±[0m  [1mßþ[0m  [1;31mßß[41m±±°°[0;33;41m°°[30m [37;40m [30;47m°[37;40m Üß [1;31mÜ[43m²[40mÛÛ[47mÜ[43m²²[0m [1mÜ[0m  [1;36;47m±[0m [1;31;41m±±±±±±±[0m ²[35m °°°±±±±[37m [1;33mÛ[0m [35mÛÛÛÛÛÛÛÛÜ[37m [1mß[36mÜ[0m [31mß[1;41m°°±±[30;40m [31;41m°°°°°°°[0m [1;36mß[0m [35mÜ[37m [1;36mßß[0m ÜÜ [31mßßßß[37mÜß  [33mÜ[1;31;43m±±²²[47m²²[40mÛ [37mÜ[0m [35mÜ[37m [1;36;47m°[0m [1;31;41m°°°°°°°[0m ±[35m ±±±²²ß[1;33mÜ²ß[47m²[40mÜ[0;35mßÛÛÛÛÛÛÛÛÜ[37m [1;36mßþÜ[0mÜ Ü [31m²²²²²²²[37m ² [35mÛÛÛÛÜÜÜÜ[37m þß [31mÜÜ[1;41m°°±±[43m±±²²[40mß[0m [1;36mÜ[0m [35mÜÛ[37m Û [31m²²²²²²²[37m °[35m ²²²ÛÝ[1;33mÞ[47m²[0m [1;47m²[36m²[33m²[40mÝ[0;35mÞÛÛÛÛÛÛÛÛÛÛÜÜÜÜÜ[37m [31m±±±±±±±[37m [35mÜÜÛÛÛßßß[37m  [31mÜ[37m [31mß[30;41m°°[33m°°°[1;31m°°[0;33mßß[37m Ü[1;36mþß[0m [35mÜÛÛ[37m Ü [31m±±±±±±±[35m ÜÜÛÛÛÛÛÜ[1;33mß²[47m²²[40mß[0;35mÜÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛ[37m [31m°°°°°°°[37m [35mÛÛÛÛÛÜ[37m [1;30mßÜ[31m  [0;31mßÜ[1m [0;31mß[30;41m°[31;40mßß [37mÜ ß [35mÜÜÛÛÛÛÛÜÜ[37m [31m°°°°°°°[37m [35mÛÛÛÛÛÛÛÛÛÜÜÜÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÜÜÜÜÜÜÜÜÜÛÛÛÛÛÛÛÜ [1;30mßÜ[0m  [31mß[37m Ü [1;30mß[0m [35mÜÜÛÛÛÛÛÛÛÛÛÛÛÜÜÜÜÜÜÜÜÜÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÜÜ[37m ß [35mÜÜÜÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛ[1;32;45m          [31m   [32m  [0;35mÛ[1;32;45mA[0;35mÛÛÛÛÛ[1;32;45mN[0;35mÛÛÛÛÛ[1;32;45mS[0;35mÛÛÛÛÛ[1;32;45mi[0;35mÛÛÛÛÛ[1;31;45m[0;35mÛÛÛÛÛ[1;32;45mL[0;35mÛÛÛÛÛ[1;32;45mO[0;35mÛÛÛÛÛ[1;32;45mV[0;35mÛÛÛÛÛ[1;32;45mE[0;35mÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛÛ²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²²[37m
+  Just create your own world,[22CCleaner[1;30m([0m27"[1;30m) [0m   August 2004
+  for the sake of art...[27Chttp[1;30m://[0mcleaner[1;30m.[0mplanet-d[1;30m.[0mnet
+[34C[30m þ A N S i þ[37m
+[0m
--- a/ansilove.js/example/example_usage.ans
+++ b/ansilove.js/example/example_usage.ans
@ -0,0 +1,25 @@
+[0;1;40;37m[?33hAnsiLove.[35mrender[0m([32m"cl!-al02.ans"[37m, [1;33mfunction [37m([0mcanvas[1m, [0msauce[1m) {
+    document.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
+    [33mconsole[37m.log(sauce);
+}, {[0;32m"bits"[1;37m: [0;32m"9"[1;37m});
+
+[0m// And for producing extremely long files,
+// spanning multiple canvas elements by splitting every nth row...
+
+[0;1;40;37m[?33hAnsiLove.[35msplitRender[0m([32m"long_ansi.ans"[37m, [1;33mfunction [37m([0mcanvases[1m, [0msauce[1m) {
+    canvases.[35mforEach[37m([1;33mfunction [37m([0mcanvas[1m) {
+        canvas.[35mstyle[37m.[35mverticalAlign [37m= [0;32m"bottom"; [37m// For perfect, gap-less viewing
+        [1mdocument.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
+    });
+    [33mconsole[37m.log(sauce);
+}, [31m27[37m, {[0;32m"bits"[1;37m: [0;32m"8"[1;37m});
+
+[0m// And for [5mansimations[25m...
+
+[1;33mvar [1;37mcontroller = [0;1;40;37m[?33hAnsiLove.[35manimate[0m([32m"ansimation.ans"[37m, [1;33mfunction [37m([0mcanvas[1m, [0msauce[1m) {
+    document.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
+    [33mconsole[37m.log(sauce);
+    controller.play([31m2800[37m, [33mfunction [1;37m() {
+        [33mconsole[37m.log([0;32m"Finished Playing"[1;37m);
+    });
+}, {[0;32m"bits"[1;37m: [0;32m"9"[1;37m});
--- a/ansilove.js/example/index.html
+++ b/ansilove.js/example/index.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>ansilove.js</title>
+    <script src="../ansilove.js" type="text/javascript" charset="utf-8"></script>
+    <style type="text/css" media="screen">
+    body {
+        background: black;
+    }
+    .center {
+        margin: 0 auto;
+        background-color: black;
+        padding: 16px;
+    }
+    #header {
+        width: 720px;
+        height: 464px;
+    }
+    #example {
+        width: 720px;
+        height: 384px;
+        overflow: hidden;
+    }
+    </style>
+</head>
+    <body>
+        <div id="header" class="center"></div>
+        
+        <div id="example" class="center"></div>
+        
+<script type="text/javascript">
+var controller, retina;
+
+retina = window.devicePixelRatio > 1;
+
+AnsiLove.render("cl!-al02.ans", function (canvas, sauce) {
+    document.getElementById("header").appendChild(canvas);
+}, {"bits": "9", "2x": (retina ? 1 : 0)});
+
+controller = AnsiLove.animate("example_usage.ans", function (canvas, sauce) {
+    document.getElementById("example").appendChild(canvas);
+    controller.play(2800);
+}, {"bits": "9", "2x": (retina ? 1 : 0)});
+</script>
+        
+    </body>
+</html>
--- a/ansilove.js/jslint.json
+++ b/ansilove.js/jslint.json
@ -0,0 +1,16 @@
+{
+    "bitwise": true,
+    "browser": true,
+    "devel": true,
+    "plusplus": true,
+    "predef": [
+        "AnsiLove",
+        "Uint8Array",
+        "Uint32Array",
+        "FileReader",
+        "self",
+        "onmessage",
+        "postMessage",
+        "Worker"
+    ]
+}
--- a/done.txt
+++ b/done.txt
@ -0,0 +1,30 @@
+x 2015-02-16 cleanup (remove 16colorslib)
+x 2014-08-06 @EDITOR delete an entry CORRECTLY
+x 2014-08-06 @EDITOR button to reload filename list from directory
+x 2014-08-07 @EDITOR button to insert an entry - make it insert a blank
+x 2014-08-06 @EDITOR dump to screen or file, not to console when saving
+x 2014-08-06 @EDITOR save (print) routine
+x 2014-08-07 @EDITOR text/bg colors change 'SAHLI' thing
+x 2014-08-07 @EDITOR update the line item when saving - what the heck is 'line item?' (meant update the listing to show edits)
+x 2014-08-07 (A) fix color functions to use alpha (so they show up!)
+x 2014-08-06 (A) Add "type" of file(format) - plain, xbin, etc.(
+x 2014-08-06 (A) Create Editor - Standalone @EDITOR
+x (A) Error handler for file not found
+x 2014-03-24 (B) Get with dfox on the partymeister package version
+x 2014-04-05 (A) Split coffeescript into files, use cake.
+x 2014-04-05 (A) Study 16colors site - how does IT remove sauce info? It DOESN'T. FUCK.
+x 2014-04-16 (A)  - create interface   @EDITOR
+x 2014-04-16 (C) separate to individual renderers  @16colors
+x 2014-04-16 @EDITOR edit item saves data routine
+x 2014-04-17 @EDITOR BUGFIX - ansi/ascii toggle/saving
+x 2015-02-22 fix scrolling!
+x 2015-02-22 load SAUCE into 'info' lines (should be done at prep) @SAUCE @EDITRO
+x 2015-02-22 Add fonts - Amiga 1200 (replace or compare w/16colors version) @16colors
+x 2015-02-22 Add fonts - Amiga 500 @16colors
+x 2015-02-22 Add fonts - microknight @16colors
+x 2015-02-22 Add fonts - mOsOul @Fonts @16colors
+x 2015-02-22 Add p0t - fonts-nOodle @16colors
+x 2015-02-22 Fix Amiga mode rendering via sixteencolors lib @16colors
+x 2015-02-22 check below items for neccesity
+x 2015-02-22 load to array/picture, render from picture @16colors
+x 2015-02-22 speed up rendering more? @16colors
--- a/editor/jquery-2.1.0.min.js
+++ b/editor/jquery-2.1.0.min.js
--- a/editor/jquery-ui-dot-luv.css
+++ b/editor/jquery-ui-dot-luv.css
--- a/editor/jquery-ui.min.js
+++ b/editor/jquery-ui.min.js
--- a/editor/sahliedit.css
+++ b/editor/sahliedit.css
@ -0,0 +1,98 @@
+label, input, textarea{
+    display: block;
+}
+
+input, textarea {
+    width: 90%;
+}
+
+textarea {
+    height: 8em;
+}
+
+.colorbox {
+    border: 0;
+    padding: 0;
+    height: 2em;
+}
+
+pre {
+    font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace;
+    font-size: 16;
+    border: 2px inset #808080;
+}
+
+label {
+    font-size: 10;
+}
+
+div ul li{
+    list-style-type: none
+}
+
+#list {
+    border: 1px solid black;
+}
+
+#formica {
+    font-size: medium;
+}
+
+.entry {
+    margin: 0 3px 3px 3px;
+    padding: 0.4em;
+    padding-left: 1.5em;
+    width: 95%;
+    height: 18px;
+    border: 2px outset rgb(255,228,196);
+    background-color: rgb(245,245,220);
+}
+
+.righty {
+    float: right;
+}
+
+.entry span {
+    display: inline-block;
+}
+
+# this does not actually change anything because the design is set by
+# the jquery-ui bit. Altering in the script does work. Here for reference.
+.45box {
+    width: 45%;
+    display: inline-block;
+}
+
+div.groupbox p {
+    margin: .25 ex;
+}
+
+#dumparea {
+    position: absolute;
+    top: 1em;
+    padding: 1em;
+    margin: 1em;
+    width: 90%;
+    height: 90%;
+    background: floralwhite;
+    border: inset 2px royalblue;
+}
+
+#sahlioutput {
+    font-family: 'TopazPlus a500a1000a2000','mOsOul',Monaco,monospace;
+    font-size: 16;
+    background: aliceblue;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    width: 100%;
+    height: 95%;
+    padding: 1ex;
+    border: inset 2px royalblue;
+}
+
+#closespan {
+    float: right;
+    margin: 0px 0px 1ex;
+    padding: 0px;
+
+}
--- a/editor/sahliedit.js
+++ b/editor/sahliedit.js
@ -0,0 +1,481 @@
+// Generated by CoffeeScript 1.7.1
+(function() {
+  var Sahli, ansiorascii, arraytocolor, booltoint, colorindex, colortoarray, colortoname, dec2hex, dumpjson, emptyfiledef, getfilelist, hex2dec, inttobool, loadsahli, newsahli, resolvefiletype, sahlicolor, statustobool;
+
+  $(function() {
+    return $("h1").hide().slideDown(500);
+  });
+
+  $(function() {
+    return $("#newsahli").button({
+      disabled: false
+    }).click(function() {
+      return newsahli();
+    });
+  });
+
+  $(function() {
+    return $("#loadsahli").button({
+      disabled: false
+    }).click(function() {
+      return loadsahli();
+    });
+  });
+
+  $(function() {
+    $(".hidden").hide();
+    $("#entryamiga").button({
+      icons: {
+        primary: "ui-icon-gear"
+      }
+    }).click(function() {
+      var stuff;
+      stuff = $(this).children();
+      if (this.value === "1") {
+        stuff[1].textContent = 'Ansi';
+        return this.value = "0";
+      } else {
+        stuff[1].textContent = 'Ascii';
+        return this.value = "1";
+      }
+    });
+    $(".45box").css({
+      width: '45%',
+      display: 'inline-block'
+    });
+    $(".groupbox p").css({
+      margin: "0 0 .25em 0"
+    });
+    $(".colorbox").change((function(_this) {
+      return function() {
+        return sahlicolor();
+      };
+    })(this));
+    $("#entryfilepick").change(function() {
+      if (this.files[0] != null) {
+        return $("#entryfile").val(this.files[0].name);
+      }
+    });
+    return $("#entryfile").click(function() {
+      return $("#entryfilepick").click();
+    });
+  });
+
+  emptyfiledef = (function() {
+    function emptyfiledef() {
+      this.file = "";
+      this.name = "";
+      this.amiga = true;
+      this.filetype = 'plain';
+      this.width = "";
+      this.author = "";
+      this.font = "Propaz";
+      this.color = [255, 255, 255, 255];
+      this.bg = [0, 0, 0, 0];
+      this.line1 = "";
+      this.line2 = "";
+      this.text = "";
+    }
+
+    return emptyfiledef;
+
+  })();
+
+  Sahli = (function() {
+    function Sahli() {
+      this.emptyfiledef = new emptyfiledef;
+      this.emptyslidesdef = {
+        "background": "",
+        "template": "",
+        "css": ""
+      };
+      this.empty = {
+        "location": "",
+        "slides": this.emptyslidesdef,
+        "filedata": []
+      };
+    }
+
+    Sahli.prototype.loader = function() {
+      return $.ajax({
+        url: '../list.sahli',
+        dataType: "json",
+        success: (function(_this) {
+          return function(result) {
+            _this.data = result;
+            return _this.edit();
+          };
+        })(this)
+      });
+    };
+
+    Sahli.prototype.edit = function() {
+      $('#buttonbox').hide();
+      $('#dirlocation').change((function(_this) {
+        return function(event) {
+          return _this.data.location = event.target.value;
+        };
+      })(this));
+      $('#listsave').button({
+        icons: {
+          primary: "ui-icon-disk"
+        }
+      }).click((function(_this) {
+        return function() {
+          $('#sahlioutput').text(dumpjson(_this.data));
+          $('#dumparea').show(100);
+          return console.log(dumpjson(_this.data));
+        };
+      })(this));
+      $('#listlist').button({
+        icons: {
+          primary: "ui-icon-folder-open"
+        }
+      }).click(function() {
+        return getfilelist();
+      });
+      $('#listappend').button({
+        icons: {
+          primary: "ui-icon-1-n"
+        }
+      }).click((function(_this) {
+        return function(event) {
+          var newentry;
+          newentry = new emptyfiledef;
+          _this.data.filedata.push(newentry);
+          return _this.buildlist(_this.data);
+        };
+      })(this));
+      $('#listdisplay').button({
+        icons: {
+          primary: "ui-icon-refresh"
+        }
+      }).click((function(_this) {
+        return function() {
+          return _this.buildlist(_this.data);
+        };
+      })(this));
+      $('#closespan').click(function() {
+        $(this.parentElement.parentElement).hide();
+        return $('#sahlioutput').text('');
+      });
+      return this.buildlist(this.data);
+    };
+
+    Sahli.prototype.buildlist = function(data) {
+      var i, item, x, _i, _j, _len, _len1, _ref, _ref1;
+      $('#list').show(100);
+      $('#list ol li').remove();
+      _ref = this.data.filedata;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        i = _ref[_i];
+        console.log(i.author);
+      }
+      x = 0;
+      $('#dirlocation').val(this.data.location);
+      _ref1 = this.data.filedata;
+      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+        item = _ref1[_j];
+        $('#sortlist').append(this.additem(item, x++));
+      }
+      return $('#sortlist').sortable({
+        start: function(event, ui) {
+          return ui.item.data({
+            startpos: ui.item.index()
+          });
+        },
+        stop: (function(_this) {
+          return function(event, ui) {
+            var e, name, s, _k, _len2, _ref2;
+            s = ui.item.data().startpos;
+            e = ui.item.index();
+            _this.data.filedata = _this.rearrangearray(s, e, _this.data.filedata);
+            _ref2 = _this.data.filedata;
+            for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
+              name = _ref2[_k];
+              console.log(name.author, name.name, name.file);
+            }
+            console.log('---');
+            return _this.buildlist(_this.data);
+          };
+        })(this)
+      });
+    };
+
+    Sahli.prototype.rearrangearray = function(startpos, endpos, a) {
+      var alen, moving, tarr;
+      moving = a[startpos];
+      alen = a.length;
+      tarr = a.slice(0, startpos).concat(a.slice(startpos + 1));
+      return tarr.slice(0, endpos).concat([moving].concat(tarr.slice(endpos)));
+    };
+
+    Sahli.prototype.additem = function(item, pos) {
+      var entry;
+      entry = this.genentryline(item, pos);
+      return entry.dblclick((function(_this) {
+        return function() {
+          return _this.editline(item, pos);
+        };
+      })(this));
+    };
+
+    Sahli.prototype.genentryline = function(item, pos) {
+      var amigastatus, arrows, delbutton, entry;
+      arrows = "<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>";
+      amigastatus = ansiorascii(booltoint(item.amiga));
+      delbutton = $("<span class='righty' id=del-" + pos + ">delete</span>").click((function(_this) {
+        return function(event) {
+          pos = event.currentTarget.id.replace("del-", "");
+          _this.data.filedata.splice(pos, 1);
+          return _this.buildlist(_this.data);
+        };
+      })(this));
+      entry = $("<li class='entry' id='" + item.file + "'>" + arrows + amigastatus + " | " + item.author + " : " + item.name + " : " + item.file + "</li>");
+      return entry.append(delbutton);
+    };
+
+    Sahli.prototype.save = function() {
+      var entry, pos;
+      pos = $("#entryindex").val();
+      entry = this.data.filedata[pos];
+      entry.name = $("#entryname").val();
+      entry.author = $("#entryauthor").val();
+      entry.amiga = statustobool($("#entryamiga").children()[1].textContent);
+      console.log($("#entryamiga").children()[1].textContent, entry.amiga, entry.author);
+      entry.color = colortoarray($("#entrycolor").val());
+      entry.bg = colortoarray($("#entrybg").val());
+      entry.width = $("#entrywidth").val();
+      entry.line1 = $("#entryline1").val();
+      entry.line2 = $("#entryline2").val();
+      entry.text = $("#entrytext").val();
+      entry.file = $("#entryfile").val();
+      entry.filetype = $("#entryfiletype").val();
+      return this.buildlist(this.data);
+    };
+
+    Sahli.prototype.editline = function(data, pos) {
+      var bcol, fcol;
+      $("#formica").dialog({
+        width: '800',
+        modal: false,
+        title: "Entry " + data.file + " ",
+        buttons: [
+          {
+            text: "Cancel",
+            icons: {
+              primary: 'ui-icon-trash'
+            },
+            click: function() {
+              return $(this).dialog("close");
+            }
+          }, {
+            text: "Save",
+            icons: {
+              primary: 'ui-icon-disk'
+            },
+            click: (function(_this) {
+              return function(event) {
+                event.preventDefault();
+                _this.save();
+                return event.currentTarget.previousElementSibling.click();
+              };
+            })(this)
+          }
+        ]
+      });
+      data.amiga = booltoint(data.amiga);
+      fcol = colortoname(arraytocolor(data.color));
+      bcol = colortoname(arraytocolor(data.bg));
+      $("#entryindex").val(pos);
+      $("#entryname").val(data.name);
+      $("#entryauthor").val(data.author);
+      $("#entryfiletpye").val(data.filetype);
+      $("#entryfiletype").children()[resolvefiletype(data.filetype)].selected = true;
+      $("#entryamiga").val(data.amiga);
+      $("#entryamiga").children()[1].textContent = ansiorascii(data.amiga);
+      $("#entryfont").val(data.font);
+      $("#entrycolor").val(fcol);
+      $("#entrycolor").children()[colorindex(fcol)].selected = true;
+      $("#entrybg").val(bcol);
+      $("#entrybg").children()[colorindex(bcol)].selected = true;
+      $("#entrywidth").val(data.width);
+      $("#entryline1").val(data.line1);
+      $("#entryline2").val(data.line2);
+      $("#entrytext").val(data.text);
+      $("#entryfile").val(data.file);
+      return sahlicolor();
+    };
+
+    return Sahli;
+
+  })();
+
+  dumpjson = function(obj) {
+    return JSON.stringify(obj, null, "\t");
+  };
+
+  booltoint = function(bool) {
+    return bool + 1 - 1;
+  };
+
+  inttobool = function(intstr) {
+    return (intstr === 1).toString();
+  };
+
+  statustobool = function(status) {
+    if (status === 'Ascii') {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  resolvefiletype = function(filetype) {
+    var options;
+    options = {
+      "plain": 0,
+      "ansi": 1,
+      "xbin": 2,
+      "ice": 3,
+      "adf": 4,
+      "avatar": 5,
+      "bin": 6,
+      "idf": 7,
+      "pcboard": 8,
+      "tundra": 9
+    };
+    return options[filetype];
+  };
+
+  ansiorascii = function(status) {
+    if (status === 0) {
+      return "Ansi";
+    } else {
+      return "Ascii";
+    }
+  };
+
+  dec2hex = function(num) {
+    return "" + (('000' + num.toString(16)).slice(-2));
+  };
+
+  hex2dec = function(num) {
+    return parseInt(num, 16);
+  };
+
+  arraytocolor = function(array) {
+    var c, x;
+    c = ((function() {
+      var _i, _len, _results;
+      _results = [];
+      for (_i = 0, _len = array.length; _i < _len; _i++) {
+        x = array[_i];
+        _results.push(dec2hex(x));
+      }
+      return _results;
+    })()).slice(0, 3).join('');
+    return "#" + c;
+  };
+
+  colortoarray = function(color) {
+    var c1, i, x;
+    color = color.slice(1);
+    c1 = [color.slice(0, 2), color.slice(2, 4), color.slice(4, 6)];
+    x = (function() {
+      var _i, _len, _results;
+      _results = [];
+      for (_i = 0, _len = c1.length; _i < _len; _i++) {
+        i = c1[_i];
+        _results.push(hex2dec(i));
+      }
+      return _results;
+    })();
+    x.push(255);
+    return x;
+  };
+
+  colortoname = function(color) {
+    var bw, colorname, names, ret;
+    names = {
+      "#E0E0E0": "Light Grey",
+      "#A0A0E0": "Light Blue",
+      "#9AFE2E": "Light Green",
+      "#FF0000": "Red",
+      "#FF8000": "Orange",
+      "#FFFF00": "Yellow",
+      "#00F000": "Green",
+      "#2EFEF7": "Cyan",
+      "#002EF7": "Blue",
+      "#0B0B3B": "Navy",
+      "#FF00FF": "Magenta",
+      "#8000FF": "Purple",
+      "#0A2A0A": "Dark Green",
+      "#3B3B3B": "Dark Grey",
+      "#FFFFFF": "White",
+      "#000000": "Black"
+    };
+    color = color.toUpperCase();
+    colorname = names[color];
+    bw = hex2dec(color.slice(1)) > 8421504 ? 'White' : "Black";
+    return ret = colorname != null ? colorname : bw;
+  };
+
+  colorindex = function(colorname) {
+    var names;
+    names = {
+      "Light Grey": 0,
+      "Light Blue": 1,
+      "Light Green": 2,
+      "Red": 3,
+      "Orange": 4,
+      "Yellow": 5,
+      "Green": 6,
+      "Cyan": 7,
+      "Blue": 8,
+      "Navy": 9,
+      "Magenta": 10,
+      "Purple": 11,
+      "Dark Green": 12,
+      "Dark Grey": 13,
+      "White": 14,
+      "Black": 15
+    };
+    return names[colorname];
+  };
+
+  sahlicolor = function() {
+    var bg, fg;
+    fg = $('#entrycolor').val();
+    bg = $('#entrybg').val();
+    console.log('sahlicolor', fg, bg);
+    return $('#sahliascii').css({
+      'color': fg,
+      'background': bg
+    });
+  };
+
+  getfilelist = function() {
+    var location;
+    location = $("#dirlocation").val();
+    return $.get("../" + location, function(listing) {
+      return console.log(listing);
+    });
+  };
+
+  newsahli = function() {
+    var newentry, sahli;
+    sahli = new Sahli;
+    sahli.data = sahli.empty;
+    newentry = new emptyfiledef;
+    sahli.data.filedata.push(newentry);
+    return sahli.edit();
+  };
+
+  loadsahli = function() {
+    var sahli;
+    sahli = new Sahli;
+    return sahli.loader('list.sahli');
+  };
+
+}).call(this);
--- a/editor/sahliedit.litcoffee
+++ b/editor/sahliedit.litcoffee
@ -0,0 +1,415 @@
+Sahli Editor
+============
+
+Editor for Sahli files.
+
+- open existing file
+- create new item
+ * get filename from dir
+ * insert SAUCE data if available
+ * use SAUCE data to find font
+ * allow Amiga choices
+ * colorpicker
+- edit existing item
+- remove item
+- clear whole file
+- copy/clone
+- move items around
+- sort items
+- output to screen (copy into file)
+ * run from node - save filename dialog
+
+***
+It should be noted that this does not do bounds checking, and it would be very
+possible to overflow this by using a debugger and such.  As the purpose of this
+is limited, and this should NOT be put on a live website, I feel that is ok for
+now. Perhaps I will fix it after Revision.
+
+***
+
+== Create Initial crappage
+We need to make a screen that has a few things in it for starters
+Title, load existing, and new file options.
+
+Silliness for checking that this works.
+
+    $(-> $("h1").hide().slideDown(500))
+
+Create buttos to choose between the New and Load functionalities
+(As we aren't going to ever load a file _and_ do a new file.)
+(If someone wants to do that, they can restart with F5 or something.)
+Also hide the editor until needed, and initialize some elements.
+
+    $(->
+        $("#newsahli")
+        .button { disabled: false}
+        .click -> newsahli()
+        )
+
+    $(->
+        $("#loadsahli")
+        .button { disabled: false}
+        .click -> loadsahli()
+        )
+    $(->
+        $(".hidden").hide()
+        $("#entryamiga").button {icons: {primary:"ui-icon-gear"}}
+            .click ->
+                stuff = $(@).children()
+                if @.value == "1"
+                    stuff[1].textContent = 'Ansi'
+                    @.value = "0"
+                else
+                    stuff[1].textContent = 'Ascii'
+                    @.value = "1"
+        $(".45box").css {width:'45%',display:'inline-block'}
+        $(".groupbox p").css {margin:"0 0 .25em 0"}
+        $(".colorbox").change =>
+            sahlicolor()
+
+        $("#entryfilepick").change ->
+            if @.files[0]? then $("#entryfile").val @.files[0].name
+        $("#entryfile").click ->
+            $("#entryfilepick").click()
+
+    )
+
+The sahli file definition format is as follows:
+"file" - the actual filename on disk, "name" - the title of the piece,
+the boolean 'amiga' indicates if it is ansi or ascii (True = ascii),
+width is the width (widest point of the file), author the author of the piece,
+the color and bg items define the color for amiga ascii, and the font
+defines the font similarly.  For PC ansi, this should be 'ansifont.'
+The three remaining lines are informational and optional.
+
+The slide format is currently unused, but consists of a background picture,
+a html template, and a css file.
+
+    class emptyfiledef
+        constructor: ->
+                @file = ""
+                @name = ""
+                @amiga = true
+                @filetype = 'plain'
+                @width = ""
+                @author = ""
+                @font = "Propaz"
+                @color = [ 255,255,255,255 ]
+                @bg = [ 0,0,0,0 ]
+                @line1 = ""
+                @line2 = ""
+                @text = ""
+
+
+    class Sahli
+        constructor: ->
+            @emptyfiledef = new emptyfiledef
+            @emptyslidesdef = {
+                "background": "",
+                "template": "",
+                "css": ""
+            }
+            @empty = {
+                "location": "",
+                "slides": @emptyslidesdef,
+                "filedata": [ ]
+            }
+
+        loader: ->
+            $.ajax {
+                url: '../list.sahli',
+                dataType: "json",
+                success: (result) =>
+                    @data = result
+                    @.edit()
+            }
+
+Editor functionality:
+Close the new/load buttons - unneeded now.
+list, and allow dragon-droppings for sorting.  Doubleclick to edit, or use
+edit button.
+
+        edit: ->
+            $('#buttonbox').hide()
+            $('#dirlocation').change (event) =>
+                @data.location = event.target.value
+            $('#listsave').button {icons: {primary:"ui-icon-disk"}}
+                .click =>
+                    $('#sahlioutput').text dumpjson @data
+                    $('#dumparea').show 100
+                    console.log dumpjson @data
+            $('#listlist').button {icons: {primary:"ui-icon-folder-open"}}
+                .click ->
+                    getfilelist()
+            $('#listappend').button {icons: {primary:"ui-icon-1-n"}}
+                .click (event) =>
+                    newentry = new emptyfiledef
+                    @data.filedata.push newentry
+                    @buildlist @data
+            $('#listdisplay').button {icons: {primary:"ui-icon-refresh"}}
+                .click =>
+                    @buildlist @data
+
+            $('#closespan').click ->
+                $(@parentElement.parentElement).hide()
+                $('#sahlioutput').text ''
+
+
+You need to save the order, and extract these in that order; moving around
+does not alter the array. Alternately, _have_ it alter the array.
+
+            @buildlist @data
+
+        buildlist: (data) ->
+            $('#list').show 100
+            $('#list ol li').remove()
+            console.log i.author for i in @data.filedata
+            x = 0
+            $('#dirlocation').val @data.location
+            $('#sortlist').append @.additem item,x++ for item in @data.filedata
+            $('#sortlist').sortable
+                start: (event,ui) ->
+                    ui.item.data {startpos:ui.item.index()}
+                stop: (event,ui) =>
+                    s = ui.item.data().startpos
+                    e = ui.item.index()
+                    @data.filedata = @.rearrangearray s,e,@data.filedata
+                    console.log name.author,name.name,name.file for name in @data.filedata
+                    console.log '---'
+                    @buildlist @data
+
+Given a start and and end position, pop the array element at start off and
+insert it into the array at end position.  A la the draggon-dropping.
+
+        rearrangearray: (startpos,endpos,a) ->
+            moving = a[startpos]
+            alen = a.length
+            tarr = a[0...startpos].concat a[startpos+1..-1]
+            tarr[0...endpos].concat [moving].concat tarr[endpos..-1]
+
+
+        additem: (item,pos) ->
+            entry = @genentryline item,pos
+            entry.dblclick =>
+                @editline item,pos
+
+        genentryline: (item,pos) ->
+            arrows = "<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>"
+            amigastatus = ansiorascii booltoint item.amiga
+            delbutton = $("<span class='righty' id=del-#{pos}>delete</span>")
+                .click (event) =>
+                    pos = event.currentTarget.id.replace "del-",""
+                    @data.filedata.splice pos,1
+                    @buildlist @data
+            entry = $("<li class='entry' id='#{item.file}'>#{arrows}#{amigastatus} | #{item.author} : #{item.name} : #{item.file}</li>")
+            entry.append delbutton
+
+
+        save: ->
+            pos = $("#entryindex").val()
+            entry = @data.filedata[pos]
+            entry.name = $("#entryname").val()
+            entry.author = $("#entryauthor").val()
+            entry.amiga = statustobool $("#entryamiga").children()[1].textContent
+            console.log $("#entryamiga").children()[1].textContent,entry.amiga,entry.author
+            entry.color = colortoarray $("#entrycolor").val()
+            entry.bg = colortoarray $("#entrybg").val()
+            entry.width = $("#entrywidth").val()
+            entry.line1 = $("#entryline1").val()
+            entry.line2 = $("#entryline2").val()
+            entry.text = $("#entrytext").val()
+            entry.file = $("#entryfile").val()
+            entry.filetype = $("#entryfiletype").val()
+            @buildlist @data
+
+        editline: (data,pos) ->
+            $("#formica").dialog {
+                width:'800',
+                modal: false,
+                title:"Entry #{data.file} ",
+                buttons: [{
+                    text: "Cancel",
+                    icons: {primary: 'ui-icon-trash'},
+                    click: ->
+                        $(@).dialog "close"
+                },{
+                    text: "Save",
+                    icons: {primary: 'ui-icon-disk'},
+                    click: (event) =>
+                        event.preventDefault()
+                        @save()
+                        event.currentTarget.previousElementSibling.click()
+
+                }]
+            }
+
+            data.amiga = booltoint data.amiga
+
+            fcol = colortoname arraytocolor data.color
+            bcol = colortoname arraytocolor data.bg
+
+            $("#entryindex").val pos
+            $("#entryname").val data.name
+            $("#entryauthor").val data.author
+            $("#entryfiletpye").val data.filetype
+            $("#entryfiletype").children()[resolvefiletype data.filetype].selected = true
+            $("#entryamiga").val data.amiga
+            $("#entryamiga").children()[1].textContent = ansiorascii data.amiga
+            $("#entryfont").val data.font
+            $("#entrycolor").val fcol
+            $("#entrycolor").children()[colorindex fcol ].selected = true
+            $("#entrybg").val bcol
+            $("#entrybg").children()[colorindex bcol ].selected = true
+            $("#entrywidth").val data.width
+            $("#entryline1").val data.line1
+            $("#entryline2").val data.line2
+            $("#entrytext").val data.text
+            $("#entryfile").val data.file
+            sahlicolor()
+
+
+A Helper function to dump json out of an object as text:
+
+    dumpjson = (obj) ->
+        JSON.stringify obj,null,"\t"
+
+Boolean / integer Helpers
+
+    booltoint = (bool) ->
+        bool + 1 - 1
+
+    inttobool = (intstr) ->
+        (intstr == 1).toString()
+
+    statustobool = (status) ->
+        if status is 'Ascii' then true else false
+
+Resolve filetype offset in array:
+
+    resolvefiletype = (filetype) ->
+        options = {
+            "plain":0
+            "ansi":1
+            "xbin":2
+            "ice":3
+            "adf":4
+            "avatar":5
+            "bin":6
+            "idf":7
+            "pcboard":8
+            "tundra":9
+        }
+        options[filetype]
+
+Resolve ansi or ascii status
+
+    ansiorascii = (status) ->
+        if status is 0 then "Ansi" else "Ascii"
+
+
+Color conversion from array to color item:
+
+This decimal to hex conversion only handles 00-FF but it's fine for this purpose;
+we actually _want_ that limitation in the output.
+
+    dec2hex = (num) ->
+        "#{('000'+num.toString 16).slice -2}"
+
+    hex2dec = (num) ->
+        parseInt num,16
+
+    arraytocolor = (array) ->
+         c = (dec2hex x for x in array)[0..2].join ''
+         "##{c}"
+
+    colortoarray = (color) ->
+        color = color.slice(1)
+        c1 = [ color[0..1], color[2..3], color[4..5] ]
+        x = (hex2dec i for i in c1)
+        x.push 255
+        x
+
+Need a way to convert the array back to the color name.
+
+    colortoname = (color) ->
+        names = {
+            "#E0E0E0":"Light Grey"
+            "#A0A0E0":"Light Blue"
+            "#9AFE2E":"Light Green"
+            "#FF0000":"Red"
+            "#FF8000":"Orange"
+            "#FFFF00":"Yellow"
+            "#00F000":"Green"
+            "#2EFEF7":"Cyan"
+            "#002EF7":"Blue"
+            "#0B0B3B":"Navy"
+            "#FF00FF":"Magenta"
+            "#8000FF":"Purple"
+            "#0A2A0A":"Dark Green"
+            "#3B3B3B":"Dark Grey"
+            "#FFFFFF":"White"
+            "#000000":"Black"
+        }
+        color = color.toUpperCase()
+        colorname = names[color]
+        bw = if hex2dec(color.slice(1)) > 8421504 then 'White' else "Black"
+        ret = if colorname? then colorname else bw
+
+Similarly, need to be able to get the color index.
+
+    colorindex = (colorname) ->
+        names = {
+            "Light Grey":0
+            "Light Blue":1
+            "Light Green":2
+            "Red":3
+            "Orange":4
+            "Yellow":5
+            "Green":6
+            "Cyan":7
+            "Blue":8
+            "Navy":9
+            "Magenta":10
+            "Purple":11
+            "Dark Green":12
+            "Dark Grey":13
+            "White":14
+            "Black":15
+        }
+        names[colorname]
+
+
+A function for changing the fore and background colors of the sahli ascii example
+
+    sahlicolor = ->
+        fg = $('#entrycolor').val()
+        bg = $('#entrybg').val()
+        console.log 'sahlicolor',fg,bg
+        $('#sahliascii').css {'color':fg,'background':bg}
+
+Function for loading the filelist from the specified directory on the server/filesystem.
+
+    getfilelist = ->
+        location = $("#dirlocation").val()
+        $.get("../#{location}", (listing) ->
+                console.log listing
+            )
+
+
+
+
+When clicking 'New' we want to make a brand new Sahli, and then clear out
+the buttons and create the editor bit as blank.
+
+    newsahli = ->
+        sahli = new Sahli
+        sahli.data = sahli.empty
+        newentry = new emptyfiledef
+        sahli.data.filedata.push newentry
+        sahli.edit()
+
+And when clicking 'load' we want to load the existing sahli file.
+
+    loadsahli = ->
+        sahli = new Sahli
+        sahli.loader 'list.sahli'
--- a/editor/sahlieditor.html
+++ b/editor/sahlieditor.html
@ -0,0 +1,172 @@
+<html>
+<head>
+	<title>Sahli Editor</title>
+  <!-- changed to local copies to avoid party network "dropouts" preventing the code from running
+  as it can't be pulled from afar if the network is down. Use remote if you would like, just uncomment
+	<script src="//code.jquery.com/jquery-2.1.0.min.js" type="text/javascript" charset="utf-8"></script>
+	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript" charset="utf-8" ></script>
+  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/dot-luv/jquery-ui.css">
+-->
+  <script src="jquery-2.1.0.min.js" type="text/javascript"></script>
+  <script src="jquery-ui.min.js" type="text/javascript"></script>
+	<script src="sahliedit.js" type="text/javascript" charset="utf-8"></script>
+	<link rel="stylesheet" href="sahliedit.css">
+  <link rel="stylesheet" href="jquery-ui-dot-luv.css">
+</head>
+<body>
+	<h1>Sahli Editor</h1>
+	<div id='editbox'>
+		<div id='buttonbox'>
+			<button id='newsahli'>New</button>
+			<button id='loadsahli'>Load</button>
+		</div>
+	</div>
+
+    <div class='hidden' id='list'>
+        <label>Location of Files:<input type="text" id='dirlocation' name="location" value=""></label>
+        <ol id='sortlist'>
+        </ol>
+        <p id='listappend'>Add</p>
+        <p id='listlist'>List</p>
+        <p id='listdisplay'>Redisplay</p>
+        <p id='listsave'>Save</p>
+    </div>
+
+	<div class='hidden' id='formica'>
+		<form accept-charset="utf-8">
+			<ul>
+				<div class='groupbox' id='basics'>
+					<p>Basics:</p>
+					<div class='drop'>
+						<li>
+							<input type="text" id="entryindex" value="" class='hidden'>
+							<label for="file">File name:</label>
+                            <input id='entryfile' type="text" name="file" value="" placeholder="">
+                            <input id='entryfilepick' type="file" class='hidden' name="pickfile" value="" placeholder="">
+						</li>
+						<li>
+							<label for="file">Title:</label>
+							<input id='entryname' type="text" name="name" value="" placeholder="">
+						</li>
+						<li>
+							<label for="author">Author's name:</label>
+							<input id='entryauthor' type="text" name="author" value="" placeholder="">
+						</li>
+					</div>
+				</div>
+				<div class='groupbox' id='displaydata'>
+					<p>Display:</p>
+					<div class='drop' id='fl'>
+						<li>
+							<label for="file">Ascii or Ansi?</label>
+							<button id='entryamiga' name="amiga" id='amiga' type='button' value='1'>Ascii</button>
+						</li>
+            <li>
+              <label for='filetype'>File Type:</label>
+              <select name='filetype' id='entryfiletype'>
+                <option value="plain">plain</option>
+                <option value="ansi">ansi</option>
+                <option value="xbin">xbin</option>
+                <option value="ice">ice</option>
+                <option value="adf">adf</option>
+                <option value="avatar">avatar</option>
+                <option value="bin">bin</option>
+                <option value="idf">idf</option>
+                <option value="pcboard">pcboard</option>
+                <option value="tundra">tundra</option>
+              </select>
+            </li>
+						<li>
+							<label for="width">Width of file:</label>
+							<input id='entrywidth' type="number" name="width" value="80" placeholder="">
+						</li>
+						<li>
+							<label for="font">Font:</label>
+							<select id='entryfont' name="font">
+								<option value="Propaz">Propaz</option>
+<!--								<option value="Topaz13">Topaz13</option> -->
+<!--								<option value="mOsOli">mOsOli</option> -->
+<!--								<option value="MicroKnight">Microknight</option> -->
+								<option value="ansifont">Ansifont</option>
+							</select>
+						</li>
+						<div class='45box'>
+							<li>
+								<label for="color">Text Color:</label>
+                                <select name="color" id='entrycolor' class='colorbox'>
+                                    <option value="#E0E0E0">Light Grey</option>
+                                    <option value="#A0A0E0">Light Blue</option>
+                                    <option value="#9AFE2E">Light Green</option>
+                                    <option value="#FF0000">Red</option>
+                                    <option value="#FF8000">Orange</option>
+                                    <option value="#FFFF00">Yellow</option>
+                                    <option value="#00F000">Green</option>
+                                    <option value="#2EFEF7">Cyan</option>
+                                    <option value="#002EF7">Blue</option>
+                                    <option value="#0B0B3B">Navy</option>
+                                    <option value="#FF00FF">Magenta</option>
+                                    <option value="#8000FF">Purple</option>
+                                    <option value="#0A2A0A">Dark Green</option>
+                                    <option value="#3B3B3B">Dark Grey</option>
+                                    <option value="#FFFFFF">White</option>
+                                    <option value="#000000">Black</option>
+                                </select>
+							</li>
+							<li>
+								<label for="bg">Background color:</label>
+                                <select name="bg" id='entrybg' class='colorbox'>
+                                    <option value="#E0E0E0">Light Grey</option>
+                                    <option value="#A0A0E0">Light Blue</option>
+                                    <option value="#9AFE2E">Light Green</option>
+                                    <option value="#FF0000">Red</option>
+                                    <option value="#FF8000">Orange</option>
+                                    <option value="#FFFF00">Yellow</option>
+                                    <option value="#00F000">Green</option>
+                                    <option value="#2EFEF7">Cyan</option>
+                                    <option value="#002EF7">Blue</option>
+                                    <option value="#0B0B3B">Navy</option>
+                                    <option value="#FF00FF">Magenta</option>
+                                    <option value="#8000FF">Purple</option>
+                                    <option value="#0A2A0A">Dark Green</option>
+                                    <option value="#3B3B3B">Dark Grey</option>
+                                    <option value="#FFFFFF">White</option>
+                                    <option value="#000000">Black</option>
+                                </select>
+							</li>
+						</div>
+						<div class='45box'>
+							<pre id='sahliascii'>
+   ________________________,  ._____,
+  |  ___|___    |  |   |   |  |_____|
+  |_____  |  _  |      |   |__|   |
+    |_____|_____|___|__|______|___|
+							</pre>
+						</div>
+					</div>
+				</div>
+				<div class='groupbox' id='optionals'>
+				<p>Optional text:</p>
+				<div class='drop'>
+					<li>
+						<label for="line1">Optional Info line 1:</label>
+						<input id='entryline1' type="text" name="line1" value="" placeholder="">
+					</li>
+					<li>
+						<label for="line2">Optional Info line 2:</label>
+						<input id='entryline2' type="text" name="line2" value="" placeholder="">
+					</li>
+					<li>
+						<label for="text">Optional Text (notes, comments, etc):</label>
+						<textarea id='entrytext' name='text'></textarea>
+					</li>
+				</div>
+			</ul>
+		</form>
+	</div>
+
+  <div class='hidden' id='dumparea' >
+    <p>Copy and save all this textual data as list.sahli in your Sahli directory <span id='closespan'>[X]</span></p>
+    <textarea name="sahlioutput" id='sahlioutput'></textarea>
+  </div>
+</body>
+</html>
--- a/fonts/BlockZone.ttf
+++ b/fonts/BlockZone.ttf
--- a/fonts/BlockZone.woff
+++ b/fonts/BlockZone.woff
--- a/fonts/BlockZone.woff2
+++ b/fonts/BlockZone.woff2
--- a/fonts/MicroKnightPlus_v1.0.eot
+++ b/fonts/MicroKnightPlus_v1.0.eot
--- a/fonts/MicroKnightPlus_v1.0.woff
+++ b/fonts/MicroKnightPlus_v1.0.woff
--- a/fonts/MicroKnightPlus_v1.0.woff2
+++ b/fonts/MicroKnightPlus_v1.0.woff2
--- a/fonts/MicroKnight_v1.0.eot
+++ b/fonts/MicroKnight_v1.0.eot
--- a/fonts/MicroKnight_v1.0.woff
+++ b/fonts/MicroKnight_v1.0.woff
--- a/fonts/MicroKnight_v1.0.woff2
+++ b/fonts/MicroKnight_v1.0.woff2
--- a/fonts/P0T-NOoDLE_v1.0.eot
+++ b/fonts/P0T-NOoDLE_v1.0.eot
--- a/fonts/P0T-NOoDLE_v1.0.woff
+++ b/fonts/P0T-NOoDLE_v1.0.woff
--- a/fonts/P0T-NOoDLE_v1.0.woff2
+++ b/fonts/P0T-NOoDLE_v1.0.woff2
--- a/fonts/TopazPlusA1200.eot
+++ b/fonts/TopazPlusA1200.eot
--- a/fonts/TopazPlusA1200.woff
+++ b/fonts/TopazPlusA1200.woff
--- a/fonts/TopazPlusA1200.woff2
+++ b/fonts/TopazPlusA1200.woff2
--- a/fonts/TopazPlusA500.eot
+++ b/fonts/TopazPlusA500.eot
--- a/fonts/TopazPlusA500.woff
+++ b/fonts/TopazPlusA500.woff
--- a/fonts/TopazPlusA500.woff2
+++ b/fonts/TopazPlusA500.woff2
--- a/fonts/Topaz_a1200_v1.0.eot
+++ b/fonts/Topaz_a1200_v1.0.eot
--- a/fonts/Topaz_a1200_v1.0.woff
+++ b/fonts/Topaz_a1200_v1.0.woff
--- a/fonts/Topaz_a1200_v1.0.woff2
+++ b/fonts/Topaz_a1200_v1.0.woff2
--- a/fonts/Topaz_a500_v1.0.eot
+++ b/fonts/Topaz_a500_v1.0.eot
--- a/fonts/Topaz_a500_v1.0.woff
+++ b/fonts/Topaz_a500_v1.0.woff
--- a/fonts/Topaz_a500_v1.0.woff2
+++ b/fonts/Topaz_a500_v1.0.woff2
--- a/fonts/mOsOul_v1.0.eot
+++ b/fonts/mOsOul_v1.0.eot
--- a/fonts/mOsOul_v1.0.woff
+++ b/fonts/mOsOul_v1.0.woff
--- a/fonts/mOsOul_v1.0.woff2
+++ b/fonts/mOsOul_v1.0.woff2
--- a/1
+++ b/1
@ -0,0 +1 @@
+python -m SimpleHTTPServer
--- a/1
+++ b/1
@ -0,0 +1 @@
+python -m http.server 
--- a/index.html
+++ b/index.html
@ -1,38 +1,53 @@
 <html>
  <head>
    <title>Sahli - ascii/ansi viewer</title>
-    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-    <script type="text/javascript" src="textmode.js"></script>
+    <script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
+<!--  you could use this if you are sure you will have internet. Not all parties have internet.
+    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
+-->
+    <script type="text/javascript" src="ansilove.js/ansilove.js"></script>
    <script type="text/javascript" src="sahli.js"></script>
+    <script>
+    $(document).ready(function(){
+      sahli = new Sahli;
+      Sahli.requestsahlifile('list.sahli')
+    })
+    </script>
    <link rel="stylesheet" href="sahli.css" type="text/css" media="screen" />
    <meta charset='UTF-8' />
  </head>
-  <body onload='sahli = new Sahli()' >
-  <h1 id='top' class='hidden'>Sahli Debug</h1>
+  <body>
  <div id="outbox">
-    <div id='drawbox'></div>
+    <div id='sahliviewer'><hr></div>
  </div>

-  <div class="help hidden">
-    <h1>Sahli Key Help</h1>
-    <ul class="keylist">
-      <li><span class="key">F</span> Fullscreen</li>
-      <li><span class="key">Space</span> Next Picture</li>
-      <li><span class="key">S</span> Begin scroll | Reverse scroll direction</li>
-      <li><span class="key">T</span> Ascii text rendered as text/graphics toggle</li>
-      <li><span class="key">U</span> Show picture info</li>
-      <li><span class="key">1</span><span class="key">2</span><span class="key">3</span><span class="key">4</span><span class="key">5</span> Alter scrollspeed (slow -> fast)</li>
-      <li><span class="key">.</span><span class="key">,</span> Double / Halve scrollspeed</li>
-      <li class='nodot'><b>Scrollspeed doesn't change while scrolling.</b></li>
-      <li><span class="key">I</span><span class="key">K</span> Double / Halve image size </li>
-      <li><span class="key">O</span><span class="key">L</span> Full browser width / height</li>
-      <li><span class="key">P</span> Reset size to original</li>
-      <li><span class="key">Backspace</span><span class="key">D</span> Cancel scrolling</li>
-      <li><span class="key">Up</span><span class="key">Down</span><span class="key">Pageup</span><span class="key">Pagedown</span> Move about by line/page</li>
-      <li><span class="key">Home</span><span class="key">End</span> Move to top/bottom</li>
-      <li><span class="key">H</span> This help (:  <span class="key">Esc</span> Cancel fullscreen</li>
-      <li class='nodot'><b>Tab also works for "info" but browsers hate it, so use 'U'</b></li>
-    </ul>
+  <div align="center">
+    <div class="help hidden">
+      <h1 class="help">Sahli Key Help</h1>
+      <ul class="keylist">
+        <li><span class="key">F</span> Fullscreen</li>
+        <li><span class="key">Space</span> Next Picture</li>
+        <li><span class="key">S</span> Start or Reverse scrolling</li>
+        <li><span class="key">X</span> Begin scrolling downward</li>
+        <li><span class="key">W</span> Begin scrolling upward</li>
+        <li><span class="key">A</span> Stop scrolling</li>
+
+        <li><span class="key">T</span> Jump to Top of picture (resets zoom)</li>
+        <li><span class="key">B</span> Jump to Bottom</li>
+        <li><span class="key">1</span><span class="key">2</span><span class="key">3</span><span class="key">4</span><span class="key">5</span> Alter scrollspeed (fast -> slow)</li>
+        <li><span class="key">Z</span> Zoom full width</li>
+        <li><span class="key">E</span><span class="key">R</span> Zoom in steps larger/smaller</li>
+        <li><span class="key">C</span> "panel" view toggle</li>
+        <li><span class="key">Up</span><span class="key">Down</span><span class="key">Pageup</span><span class="key">Pagedown</span> Move about by line/page</li>
+        <li><span class="key">Home</span><span class="key">End</span> Move to top/bottom (no zoom reset)</li>
+        <li><span class="key">H</span> This help (:  <span class="key">Esc</span> Cancel fullscreen</li>
+        <li class='nodot'><b>Tab also works for "info" but browsers hate it, so use 'U'</b></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class='hidden' id='panel'>
+  hi mom
  </div>

  <div class="infobox hidden">
@ -43,7 +58,7 @@
    <p class="infobox, bigtext">OH MY GOD BECKY LOOK AT HER BUTT IT IS SO BIG!</p>
    <p class="infobox"><span id='filename'>filename</span>
      <span id='infowidth'>width</span>
-      <span id='fontname'>font</font>
+      <span id='fontname'>font</span>
    </p>
  </div>

--- a/jquery-1.11.2.min.js
+++ b/jquery-1.11.2.min.js
--- a/list.sahli
+++ b/list.sahli
@ -1,101 +1,202 @@
 {
-    "slides": {
-        "background": "screen.png",
-        "template": "template.html",
-        "css": "template.css"
-    },
-    "filedata": [
-        {
-            "file": "spaceflight.asc",
-            "name": "Spaceflight",
-            "amiga": true,
-            "width": "80",
-            "author": "Urs",
-            "font": "Propaz",
-            "color": [
-                200,
-                200,
-                200,
-                255
-            ],
-            "bg": [
-                0,
-                0,
-                0,
-                0
-            ],
-            "line1": "Revision 2013",
-            "line2": "Mercury",
-            "text": "No tools, just a text editor"
-        },
-        {
-            "file": "az0!-revi510n.txt",
-            "name": "Revi510n",
-            "amiga": true,
-            "width": "80",
-            "color": [
-                200,
-                200,
-                200,
-                255
-            ],
-            "bg": [
-                0,
-                0,
-                0,
-                0
-            ],
-            "author": "Azzaro",
-            "font": "Propaz",
-            "line1": "Revision 2013",
-            "line2": "Madwizards+Floppy",
-            "text": "Wow I'm back to ascii scene after 12 years break. Have fun people! Amiiiiiiga :)"
-        },
-        {
-            "file": "ted_-_spaceship_enterprise.ans",
-            "name": "SPACEshiP ENterprISe",
-            "amiga": false,
-            "width": "80",
-            "color": [
-                0,
-                30,
-                30,
-                255
-            ],
-            "bg": [
-                240,
-                240,
-                250,
-                255
-            ],
-            "author": "Ted",
-            "font": "ansifont",
-            "line1": "Revision 2013",
-            "line2": "Pöo-crüe^3ln",
-            "text": "Special greets to m0d - you're AWESOME! -\nThis displays more nicely in 80x50 mode\nTruck said it was OK to do that mode outside the rules\nProper resolution in Partymeister"
-        },
-        {
-            "file": "h7-supergroupies.ans",
-            "name": "Super Groupies",
-            "amiga": false,
-            "width": "80",
-            "color": [
-                0,
-                30,
-                30,
-                255
-            ],
-            "bg": [
-                240,
-                240,
-                250,
-                255
-            ],
-            "author": "H7",
-            "font": "ansifont",
-            "line1": "Revision 2013",
-            "line2": "Blocktronics & Accession",
-            "text": "Pablodraw osX"
-        }
-    ]
+	"location": "testshow",
+	"slides": {
+		"background": "",
+		"template": "",
+		"css": ""
+	},
+	"filedata": [
+		{
+			"file": "spaceflight.asc",
+			"name": "Spaceflight",
+			"amiga": true,
+			"filetype": "plain",
+			"width": "80",
+			"author": "Urs",
+			"font": "pot-noodle",
+			"color": [
+				255,
+				128,
+				0,
+				255
+			],
+			"bg": [
+				0,
+				0,
+				0,
+				255
+			],
+			"line1": "Orange on Dark Grey",
+			"line2": "Test for plain files",
+			"text": ""
+		},
+		{
+			"file": "h7-supergroupies.ans",
+			"name": "SuperGroupies",
+			"amiga": false,
+			"filetype": "ansi",
+			"width": "80",
+			"author": "H7",
+			"font": "Propaz",
+			"color": [
+				154,
+				254,
+				46,
+				255
+			],
+			"bg": [
+				11,
+				11,
+				59,
+				255
+			],
+			"line1": "H7",
+			"line2": "Ansi",
+			"text": "Test file #1"
+		},
+		{
+			"file": "Blocktronics-WTF4_Megajoint.ans",
+			"name": "WTF4",
+			"amiga": false,
+			"filetype": "ansi",
+			"width": "80",
+			"author": "Blocktronics",
+			"font": "Propaz",
+			"color": [
+				0,
+				46,
+				247,
+				255
+			],
+			"bg": [
+				160,
+				160,
+				224,
+				255
+			],
+			"line1": "",
+			"line2": "",
+			"text": ""
+		},
+		{
+			"file": "51_DRGN.XB",
+			"name": "Dragon",
+			"amiga": false,
+			"filetype": "xbin",
+			"width": "80",
+			"author": "Someone",
+			"font": "Propaz",
+			"color": [
+				255,
+				128,
+				0,
+				255
+			],
+			"bg": [
+				46,
+				254,
+				247,
+				255
+			],
+			"line1": "Test #2",
+			"line2": "Test #2",
+			"text": ""
+		},
+		{
+			"file": "ARTX-LGO.ADF",
+			"name": "ADF test",
+			"amiga": false,
+			"filetype": "adf",
+			"width": "80",
+			"author": "",
+			"font": "Propaz",
+			"color": [
+				255,
+				255,
+				255,
+				255
+			],
+			"bg": [
+				0,
+				0,
+				0,
+				255
+			],
+			"line1": "",
+			"line2": "",
+			"text": ""
+		},
+		{
+			"file": "MD-XMAS.IDF",
+			"name": "IDF test",
+			"amiga": false,
+			"filetype": "idf",
+			"width": "80",
+			"author": "",
+			"font": "Propaz",
+			"color": [
+				255,
+				255,
+				255,
+				255
+			],
+			"bg": [
+				0,
+				0,
+				0,
+				255
+			],
+			"line1": "",
+			"line2": "",
+			"text": ""
+		},
+		{
+			"file": "US-SADIS.BIN",
+			"name": "BIN test",
+			"amiga": false,
+			"filetype": "bin",
+			"width": "160",
+			"author": "",
+			"font": "Propaz",
+			"color": [
+				255,
+				255,
+				255,
+				255
+			],
+			"bg": [
+				0,
+				0,
+				0,
+				255
+			],
+			"line1": "",
+			"line2": "",
+			"text": ""
+		},
+		{
+			"file": "zv_iniq.tnd",
+			"name": "Tundra test",
+			"amiga": false,
+			"filetype": "tundra",
+			"width": "80",
+			"author": "",
+			"font": "Propaz",
+			"color": [
+				255,
+				255,
+				255,
+				255
+			],
+			"bg": [
+				0,
+				0,
+				0,
+				255
+			],
+			"line1": "",
+			"line2": "",
+			"text": ""
+		}
+	]
 }
--- a/report.txt
+++ b/report.txt
--- a/sahli.coffee
+++ b/sahli.coffee
@ -0,0 +1,344 @@
+###
+  .___________________________________,       ___
+  |            /      |   |      .     \    .(___):
+  |        _______    |          :      \   :     |
+: |___/      /        |          |       \__|     |
+|           /         |          |          |     |
+l__________/__________|___|______l__________j_____j
+
+     Ansi/Ansi Viewer in Ecmascript
+ Coded by Sir Garbagetruck / Accession 2013
+ Uses fonts by DMG, http://trueschool.se
+ Uses Andy Herbert's Ansilove.js for rendering.
+###
+
+class @Sahli
+  constructor: () ->
+    # I don't think we actually are going to have one, as we don't
+    # need instance variables (things used outside the function)
+
+  @loadpic = (picdata, inserthere) ->
+    switch picdata.filetype
+      when 'plain'
+        @loadplain picdata, inserthere
+      when 'ansi'
+        @loadhugeansi picdata, inserthere
+      when 'bin'
+        @loadhugeansi picdata, inserthere
+      when 'xbin'
+        @loadhugeansi picdata, inserthere
+      when 'ice'
+        @loadhugeansi picdata, inserthere
+      when 'avatar'
+        @loadavatar picdata, inserthere
+      when 'pcboard'
+        @loadhugeansi picdata, inserthere
+      when 'idf'
+        @loadhugeansi picdata, inserthere
+      when 'adf'
+        @loadhugeansi picdata, inserthere
+      when 'tundra'
+        @loadhugeansi picdata, inserthere
+      else
+        @loadplain picdata, inserthere
+
+  @loadplain = (picdata, inserthere) ->
+    pdiv = $('<div>')
+    req = new XMLHttpRequest
+    fname = @location + '/' + picdata.file
+    buf = $('<span>')
+    buf.css {'margin':'0 auto'}
+    ptxt = $('<pre>')
+    color = @calccolor(picdata.color)
+    bgcolor = @calccolor(picdata.bg)
+    pdiv.addClass 'scrolly'
+    ptxt.addClass picdata.font.toLowerCase()
+    ptxt.css
+      'color': color
+      'background-color': bgcolor
+      'margin': 'auto'
+      'display': 'inline-block'
+    ptxt.width picdata.width * 8
+    @origwidth = ptxt.width
+    pdiv.width ptxt.width
+    pdiv.prepend buf.clone()
+    pdiv.append ptxt
+    pdiv.append buf
+    # this is going to be interesting when dealing with ansi files in UTF-8
+    # or SHIFT-JIS etc  - is it needed now?
+    req.overrideMimeType 'text/plain; charset=ISO-8859-1'
+    req.onreadystatechange = ->
+      if req.readyState == req.DONE
+        if req.status == 200 or req.status == 0
+          ptxt.text @responseText
+          inserthere.after pdiv
+          $('body').scrollTop(0)
+        else
+          @loaderror inserthere, fname, req.statusText, req.status
+    req.open 'GET', fname, true
+    req.send null
+
+  @loadansi = (picdata, inserthere) ->
+    fname = @location + '/' + picdata.file
+    pdiv = $('<div>')
+    pdiv.addClass 'scrolly'
+    AnsiLove.render fname, ((canv, SAUCE) ->
+      pdiv.append canv
+      inserthere.after pdiv
+      @origwidth = canv.width
+      @origheight = canv.height
+      @SAUCE = SAUCE
+    ),
+      'font': '80x25'
+      'bits': '8'
+      'columns': 160
+      'thumbnail': 0
+
+  @loadhugeansi = (picdata, inserthere) ->
+    fname = @location + '/' + picdata.file
+    pdiv = $('<div>')
+    calcheight = 0
+    canvwidth = 0
+    pdiv.css 'display', 'inline-block'
+    pdiv.addClass 'scrolly'
+    AnsiLove.splitRender fname, ((chunks, SAUCE) =>
+      chunks.forEach (canv) ->
+        canv.style.verticalAlign = 'bottom'
+        pdiv.append canv
+        calcheight = calcheight + canv.height
+        canvwidth = canv.width
+      inserthere.after pdiv
+      @SAUCE = SAUCE
+      @origwidth = canvwidth
+      @origheight = calcheight
+      pdiv.width canvwidth
+    ), 30, 'bits': '8'
+
+  @loadavatar = (picdata, inserthere) ->
+    alert 'avatar', picdata, inserthere
+
+  @requestsahlifile = (url) ->
+    @loadkeys()
+    @DEBUG = false
+    @fullscreen = false
+    @scroll_speed= 5
+    @scroll_direction= 1
+    @asciiasgfx= false
+    @currentpic= 0
+    $.getJSON url, (json) =>
+      @filedata = json.filedata
+      @slides = json.slides
+      @location = json.location
+
+      alert "SAHLI READY TO GO\n#{@filedata.length} Entries"
+
+  @nextpic = =>
+    viewbox = $('div#sahliviewer')
+    viewbox.children().remove()
+    $('#panel').empty()
+    @scroll_direction = 1
+    @scroll_speed = 5
+    i = @currentpic
+    filedata = @filedata
+    filedata[i].pic = $('<h6>' + filedata[i].file + '</h6>')
+    viewbox.append filedata[i].pic
+    @loadpic filedata[i], filedata[i].pic
+    @currentpic += 1
+    if @currentpic > filedata.length - 1
+      @currentpic = 0
+    $('#panel').hide()
+    $('#outbox').show()
+    $('body').stop()
+    $('body').scrollTop(0)
+
+
+  @togglefullscreen = ->
+    docElm = document.documentElement
+    if @fullscreen
+      if document.exitFullscreen
+        document.exitFullscreen()
+      else if document.mozCancelFullScreen
+        document.mozCancelFullScreen()
+      else if document.webkitCancelFullScreen
+        document.webkitCancelFullScreen()
+      @fullscreen = false
+    else
+      if docElm.requestFullscreen
+        docElm.requestFullscreen Element.ALLOW_KEYBOARD_INPUT
+      else if docElm.mozRequestFullScreen
+        docElm.mozRequestFullScreen Element.ALLOW_KEYBOARD_INPUT
+      else if docElm.webkitRequestFullScreen
+        docElm.webkitRequestFullScreen Element.ALLOW_KEYBOARD_INPUT
+      @fullscreen = true
+
+  @toggledebug = ->
+    $('h1#top').fadeToggle()
+    @DEBUG = !@DEBUG
+
+  @keycode = (char) ->
+    char.toUpperCase().charCodeAt 0
+
+  @calccolor = (colorset) ->
+    "rgba(#{colorset.toString()})"
+
+  @loaderror = (inserthere, fname, errortext, errorcode) ->
+    if errorcode == 404
+      errstr = "Unable to find #{fname}"
+    else
+      errstr = "error! #{errortext} / code #{errorcode}"
+    inserthere.after $("<h1>").text("#{errstr}")
+
+  @setscroll = ->
+    scrollbox = $('body')
+    bottom = $('body').height()
+    scrollto = bottom
+    # kill animations from before
+    scrollbox.stop true
+    if @scroll_direction == 1
+      @scroll_direction = -1
+      steps = bottom - scrollbox.scrollTop()
+    else
+      @scroll_direction = 1
+      scrollto = 0
+      steps = scrollbox.scrollTop()
+    console.log "#{@scroll_speed} | #{steps}"
+    scrollbox.animate { scrollTop: scrollto }, @scroll_speed * steps, 'linear'
+
+  @changespeed = (speed) ->
+    @scroll_speed = speed
+    $('body').stop()
+    @scroll_direction = - @scroll_direction
+    @setscroll()
+
+  @changescrolldirection = (direction) ->
+    @scroll_direction = direction
+    $('body').stop()
+    @setscroll()
+
+#    - save width upon draw
+#    - toggle zoom out to full width / normal
+#    - with a number, change width by that much
+# if scrolling, where are we in the doc? zoom to THAT area.
+  @zoom = (amt) ->
+    zoomee = $('div.scrolly')
+    if amt?
+      if amt == 0
+        newwidth = @origwidth
+      else
+        newwidth = zoomee.width() + amt
+      console.log "#{zoomee.width()} #{newwidth}"
+      zoomee.width newwidth
+      $('canvas').width newwidth
+    else
+      if zoomee.width() != @origwidth
+        zoomee.width @origwidthg
+        $('canvas').width '100%'
+      else
+        zoomee.width '100%'
+        $('canvas').width '100%'
+
+# calculate # strips - how many times does window height go into full height
+# and then move the canvases into it. - done
+# outbox toggled last to avoid losing width. (prolly need to fix.)
+  @panelmode = ->
+    $('#panel').toggle()
+    canvs = $('canvas')
+    if $('.scrolly').width() == @origwidth
+      $('.scrolly').width '100%'
+      $('#panel').empty()
+      ww = window.innerWidth
+      wh = window.innerHeight
+      numpanels = canvs.length
+      fullpicheight = 0
+      fullpicheight = (fullpicheight + i.height) for i in canvs
+
+      stripe_width = ww/Math.ceil(fullpicheight/ww)
+      num_strips = Math.sqrt (ww/stripe_width)*(fullpicheight/wh)
+
+      numcols = Math.floor num_strips-1
+
+      scaling_factor = num_strips * (wh / fullpicheight)
+
+#      newheight = canvs[0].height * scaling_factor
+#      $(canvs[0]).height newheight
+      newwidth = scaling_factor * canvs.height()
+      canvs.width newwidth
+      newheight = $(canvs[0]).height()
+
+      colwidth = ww/numcols
+      outer = $('<div>')
+      outer.append @createpanel(i,colwidth - 6) for i in [1..numcols]
+      outer.addClass 'nosb'
+      $('#panel').append outer
+      $('#outbox').toggle()
+
+      level = 0
+      drawcol = 1
+      for pic in canvs
+        $("#column#{drawcol}").append pic
+        level = level + newheight
+        if level+(newheight/2) > wh
+          level = 0
+          drawcol = drawcol + 1
+
+    else
+      $('.scrolly').width @origwidth
+      $('#outbox').show()
+      $('.scrolly').append pic for pic in canvs
+      canvs.width @origwidth
+      $('body').scrollTop 0
+
+
+  @createpanel = (i,amt) ->
+    dcol = $("<div id='column#{i}'>#{i}</div>")
+    dcol.addClass 'panelcolumn'
+    dcol.width amt
+
+  @loadkeys = ->
+    $(document).on('keydown', (ev) =>
+      switch ev.which
+        when @keycode ' '
+          @nextpic()
+        when @keycode 'f'
+          @togglefullscreen()
+        when @keycode 's'
+          @setscroll()
+        when @keycode 't'
+          $('body').scrollTop 0
+          @zoom 0
+        when @keycode 'b'
+          $('body').scrollTop $('body').height()
+        when @keycode 'a'
+          $('body').stop()
+          @scroll_direction = - @scroll_direction
+        when @keycode 'z'
+          @zoom()
+        when @keycode 'e'
+          @zoom 100
+        when @keycode 'r'
+          @zoom -100
+        when @keycode 'w'
+          @changescrolldirection -1
+        when @keycode 'x'
+          @changescrolldirection 1
+        when @keycode 'c'
+          @panelmode()
+        when @keycode '1'
+          @changespeed 1
+        when @keycode '2'
+          @changespeed 2
+          @scroll_speed = 2
+        when @keycode '3'
+          @changespeed 3
+          @scroll_speed = 3
+        when @keycode '4'
+          @changespeed 4
+          @scroll_speed = 4
+        when @keycode '5'
+          @changespeed 5
+        when @keycode 'h'
+          $('.help').css {'left':'33%'}
+          $('.help').toggle 'fast'
+        else
+          console.log ev.which
+      )
--- a/sahli.css
+++ b/sahli.css
@ -1,23 +1,24 @@
 body {
    background-color: black;
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: none;
 }

-h1#top {
+#top {
    border: 1px solid green;
    color: green;
-    font-family: TopazPlus a600a1200a4000,monospace;
+    font-family: topaz500,monospace;
    position: absolute;
    top: .25ex;
    left: .25ex;
 }

-div#drawbox {
-    border: 1px inset grey;
+#sahliviewer {
    color: green;
-    padding: 0px;
-    margin: 0px;
+    padding: 0;
+    margin: 0;
    text-align: center;
    overflow: hidden;
 }
@ -34,23 +35,25 @@ h6 {
    padding: .125em 1em;
    color: black;
    background-color: green;
-    -webkit-border-radius: 8;
-    -moz-border-radius: 8;
-    border-radius: 8;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
    display: none;
 }

 .help {
    position: fixed;
    top: 1em;
-    left: 50em;
+    left: 33%;
+    text-align: left;
    background-color: lightgrey;
    border: outset darkgray;
-    -webkit-border-radius: 8;
-    -moz-border-radius: 8;
-    border-radius: 8;
-    font-family: "TopazPlus a600a1200a4000",mOsOul, Consolas, monospace;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+    font-family: topaz1200,mOsOul, Consolas, monospace;
    opacity: .85;
+    width: 33%;
 }

 .keylist {
@ -59,10 +62,9 @@ h6 {
    padding: 1em;
    margin: 0 1ex 1ex 1ex;
    list-style: square;
-    -webkit-border-radius: 4;
-    -moz-border-radius: 4;
-    border-radius: 4;
-    background-color: white;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
 }

 ul.keylist li {
@ -71,7 +73,7 @@ ul.keylist li {
    list-style: square;
 }

-.help h1 {
+h1.help {
    text-align: center;
    margin: .15ex;
    padding: .15ex;
@ -85,23 +87,23 @@ ul.keylist li.nodot {
 .key {
    background-color: yellow;
    border: 2px outset darkgoldenrod;
-    -webkit-border-radius: 9;
-    -moz-border-radius: 9;
-    border-radius: 9;
+    -webkit-border-radius: 9px;
+    -moz-border-radius: 9px;
+    border-radius: 9px;
    margin: .125em;
    padding: 0.25ex 1.5ex .25ex 1.5ex;
 }

 div.infobox {
-    font-family: "mOsOul,TopazPlus a600a1200a4000",MicroKnightPlus, Consolas, monospace;
+    font-family: mosoul,topaz1200,microknight, Consolas, monospace;
    position: absolute;
    top: 1ex;
    left: 1ex;
-    -webkit-border-radius: 42;
-    -moz-border-radius: 42;
-    border-radius: 42;
+    -webkit-border-radius: 42px;
+    -moz-border-radius: 42px;
+    border-radius: 42px;
    padding: 2ex;
-    pargin: 3em;
+    margin: 3em;
    background-color: aliceblue;
    opacity: .85;
 }
@ -109,7 +111,7 @@ div.infobox {

 h1.infobox {
    margin: 0 0 .125ex 0;
-    padding 0px;
+    padding: 0;
    border-bottom: 1px black solid;
 }

@ -129,35 +131,100 @@ p.infobox {
    background-color: lightsteelblue;
    border: 1px outset steelblue;
    margin: .25ex;
-    -webkit-border-radius: 3;
-    -moz-border-radius: 3;
-    border-radius: 3;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    border-radius: 15px;
    width: 30ex;
 }

+#panel {
+    width: 100%;
+    background: #0a0a0f;
+    height: 100%;
+    border: 0;
+    font-family: microknight;
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+}
+
+.panelcolumn {
+    height: 100%;
+    color: #00f080;
+    width: 2em;
+    background: #082020;
+    display: inline-table;
+}
+
+.nosb {
+    overflow: hidden;
+}
+
+@font-face {
+    font-family: 'P0t-nOodle';
+    src: url('fonts/P0T-NOoDLE_v1.0.woff2') format('woff2');
+    src: url('fonts/P0T-NOoDLE_v1.0.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'MicroKnight';
+    src: url('fonts/MicroKnightPlus_v1.0.woff2') format('woff2');
+    src: url('fonts/MicroKnightPlus_v1.0.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'mOsOul';
+    src: url('fonts/mOsOul_v1.0.woff2') format('woff2');
+    src: url('fonts/mOsOul_v1.0.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Topaz1200';
+    src: url('fonts/TopazPlusA1200.woff') format('woff2');
+    src: url('fonts/TopazPlusA1200.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Topaz500';
+    src: url('fonts/TopazPlusA500.woff2') format('woff2');
+    src: url('fonts/TopazPlusA500.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'blockzone';
+    src: url('fonts/BlockZone.woff2') format('woff2');
+    src: url('fonts/BlockZone.woff') format('woff');
+}
+
 .mosoul {
    font-family: mOsOul;
    text-align: left;
 }

-
 .pot-noodle , .p0t-noodle {
-    font-family: 'P0T\-NOoDLE';
+    font-family: 'P0t-nOodle';
    text-align: left;
 }

 .topaz, .topaz500 {
-    font-family: 'TopazPlus a500a1000a2000';
+    font-family: 'Topaz500';
    text-align: left;
 }

 .propaz, .topaz1200 {
-    font-family: 'TopazPlus a600a1200a4000';
+    font-family: 'Topaz1200';
    text-align: left;
 }

 .microknight, .microknightplus {
-    font-family: 'MicroKnightPlus','MicroKnight,MicroKnightPlus';
+    font-family: 'MicroKnight';
    text-align: left;
 }

+.blockzone, .pcansifont {
+    font-family: 'blockzone';
+    text-align: left;
+}
--- a/sahli.js
+++ b/sahli.js
@ -1,407 +1,222 @@
-//  .___________________________________,       ___
-//  |            /      |   |      .     \    .(___):
-//  |        _______    |          :      \   :     |
-//: |___/      /        |          |       \__|     |
-//|           /         |          |          |     |
-//l__________/__________|___|______l__________j_____j
-//
-//     Ansi/Ansi Viewer in Ecmascript
-// Coded by Sir Garbagetruck / Accession 2013
-// Uses fonts by DMG, http://trueschool.se
-// Uses SixteenColors textmode js library for rendering
+// Generated by CoffeeScript 1.4.0

-var Sahli = function() {
-    this.outbox = $('div#outbox');
-    this.dbox = $('div#drawbox');
-    this.image = 0;
+/*
+  .___________________________________,       ___
+  |            /      |   |      .     \    .(___):
+  |        _______    |          :      \   :     |
+: |___/      /        |          |       \__|     |
+|           /         |          |          |     |
+l__________/__________|___|______l__________j_____j

-    // scroll speed of 5 looks ... "ok" on macbook pro. 4 was original.
-    this.scroll_speed = 5;
-    this.scroll_direction = 1;
-    this.zoomspeed = 200;
-    this.asciiasgfx = true; // changed at Evoke as the 16colors amiga bits aren't the same as old lib.
-    // You need to submit your fixes/changes to them, truck...
-    this.DEBUG = false;
+     Ansi/Ansi Viewer in Ecmascript
+ Coded by Sir Garbagetruck / Accession 2013
+ Uses fonts by DMG, http://trueschool.se
+ Uses Andy Herbert's Ansilove.js for rendering.
+*/

-    this.dbox.height(document.height - 24);
-    this.dbox.width(document.width - 2);
-    this.sizemult = 16; // 32 is larger than screen, and somewhat silly
-    this.origheight = 0;
-    this.origwidth = 0;
-    this.filedata = '';
-    this.slides = 0;
-    this.currentpic = 0;
-    this.nonfsheight = document.height - 40;

-    this.loadpic = function(picdata, inserthere) {
-        var infob = $('div.infobox');
-        var pdiv = $('<div>');
-        var canv = document.createElement('canvas');
-        var req = new XMLHttpRequest();
-        pdiv.addClass('scrolly');
-        ref = this;
-        if (picdata.amiga && this.asciiasgfx) {
-            var ptxt = $('<pre></pre>');
-            var color = this.calccolor(picdata.color);
-            var bgcolor = this.calccolor(picdata.bg);
-            ptxt.addClass(picdata.font.toLowerCase());
-            ptxt.css({
-                'color': color,
-                'background-color': bgcolor,
-                'margin': 'auto'
-            });
-            ptxt.width(picdata.width * 8);
-            pdiv.width('100%');
-            pdiv.append(ptxt);
-            // x-user-defined
-            req.overrideMimeType('text/plain; charset=ISO-8859-1');
-            req.onreadystatechange = function() {
-                if (req.readyState === req.DONE) {
-                    if (req.status === 200 || req.status === 0) {
-                        ptxt.text(this.responseText);
-                        inserthere.after(pdiv);
-                    } else {
-                        // I really should make a real error handler.
-                        alert(req);
-                    }
-                }
-            };
-            req.open('GET', picdata.file, true);
-            req.send(null);
+(function() {

-        } else {
-            this.image = new ImageTextModeANSI();
-            this.image.parseUrl(picdata.file);
-            this.image.renderCanvas(canv);
-            pdiv.append(canv);
+  this.Sahli = (function() {
+    var _this = this;
+
+    function Sahli() {}
+
+    Sahli.loadpic = function(picdata, inserthere) {
+      switch (picdata.filetype) {
+        case 'plain':
+          this.loadplain(picdata, inserthere);
+          break;
+        case 'ansi':
+          this.loadhugeansi(picdata, inserthere);
+          break;
+        case 'bin':
+          this.loadansi(picdata, inserthere);
+          break;
+        case 'xbin':
+          this.loadansi(picdata, inserthere);
+          break;
+        case 'ice':
+          this.loadansi(picdata, inserthere);
+          break;
+        case 'avatar':
+          this.loadavatar(picdata, inserthere);
+          break;
+        case 'pcboard':
+          this.loadansi(picdata, inserthere);
+          break;
+        case 'idf':
+          this.loadansi(picdata, inserthere);
+          break;
+        case 'adf':
+          this.loadansi(picdata, inserthere);
+          break;
+        case 'tundra':
+          this.loadansi(picdata, inserthere);
+          break;
+        default:
+          this.loadplain(picdata, inserthere);
+      }
+    };
+
+    Sahli.loadplain = function(picdata, inserthere) {
+      var bgcolor, color, fname, pdiv, ptxt, req;
+      pdiv = $('<div>');
+      req = new XMLHttpRequest;
+      fname = this.location + '/' + picdata.file;
+      ptxt = $('<pre></pre>');
+      color = this.calccolor(picdata.color);
+      bgcolor = this.calccolor(picdata.bg);
+      pdiv.addClass('scrolly');
+      ptxt.addClass(picdata.font.toLowerCase());
+      ptxt.css({
+        'color': color,
+        'background-color': bgcolor,
+        'margin': 'auto'
+      });
+      ptxt.width(picdata.width * 8);
+      pdiv.width('100%');
+      pdiv.append(ptxt);
+      req.overrideMimeType('text/plain; charset=ISO-8859-1');
+      req.onreadystatechange = function() {
+        if (req.readyState === req.DONE) {
+          if (req.status === 200 || req.status === 0) {
+            ptxt.text(this.responseText);
            inserthere.after(pdiv);
-            this.origwidth = canv.width;
-            this.origheight = canv.height;
+          } else {
+            this.loaderror(inserthere, fname, req.statusText, req.status);
+          }
        }
-        infob.find('h1').text(picdata.name);
-        infob.find('h2').text(picdata.author);
-        infob.find('h3#text').text(picdata.line1);
-        infob.find('h3#text2').text(picdata.line2);
-        infob.find('.bigtext').text(picdata.text);
-        infob.find('span#filename').text(picdata.file);
-        infob.find('span#infowidth').text("| " + picdata.width + " cols |");
-        infob.find('span#fontname').text(picdata.font);
+      };
+      req.open('GET', fname, true);
+      req.send(null);
    };

-    this.calccolor = function(colorset) {
-        return 'rgba(' + colorset.toString() + ')';
+    Sahli.loadansi = function(picdata, inserthere) {
+      var fname, pdiv;
+      fname = this.location + '/' + picdata.file;
+      pdiv = $('<div>');
+      AnsiLove.render(fname, (function(canv, SAUCE) {
+        pdiv.append(canv);
+        inserthere.after(pdiv);
+        this.origwidth = canv.width;
+        this.origheight = canv.height;
+        this.SAUCE = SAUCE;
+      }), {
+        'font': '80x25',
+        'bits': '8',
+        'columns': 160,
+        'thumbnail': 0
+      });
    };

-    this.resize = function(amt) {
-        var canv = $('canvas');
-        var w = canv.width() * amt;
-        var h = canv.height() * amt;
-        canv.animate({
-            width: w,
-            height: h
-        }, this.zoomspeed);
-    };
-
-    this.fullwidth = function() {
-        this.stopscroll();
-        if ($('canvas').width() == this.dbox.width()) {
-            this.originalsize(this.zoomspeed);
-        } else {
-            var ratio = this.origwidth / this.dbox.width();
-            $('canvas').animate({
-                width: this.dbox.width(),
-                height: this.origheight / ratio
-            }, this.zoomspeed);
-
-        }
-    };
-
-    this.fullheight = function() {
-        var canv = $('canvas');
-        if (canv.height() == this.dbox.height()) {
-            this.originalsize(this.zoomspeed);
-        } else {
-            var ratio = this.origheight / this.dbox.height();
-            canv.animate({
-                height: this.dbox.height(),
-                width: this.origwidth / ratio
-            }, this.zoomspeed);
-        }
-    };
-
-    this.originalsize = function(zoomspeed) {
-        // why do we not have origwidth now? hmm.
-        var canv = $('canvas');
-        canv.animate({
-            width: this.origwidth,
-            height: this.origheight
-        }, this.zoomspeed);
-    };
-
-
-    this.toptext = function(text) {
-        if (this.DEBUG) {
-            $('h1#top').text(text);
-        }
-    };
-
-    this.setscroll = function() {
-        var bottom = $('.scrolly').height();
-        var scrollto = bottom;
-        var steps;
-        // kill animations from before
-        this.dbox.stop(true);
-        if (this.scroll_direction === 1) {
-            this.scroll_direction = -1;
-            steps = bottom - this.dbox.scrollTop();
-        } else {
-            this.scroll_direction = 1;
-            scrollto = 0;
-            steps = this.dbox.scrollTop();
-        }
-        this.toptext(this.scroll_speed + ' | ' + steps);
-
-        this.dbox.animate({
-            scrollTop: scrollto
-        }, this.scroll_speed * steps, 'linear');
-    };
-
-    this.resizedrawbox = function(height) {
-        var dbox1 = $('div#drawbox');
-        if ('undefined' === typeof height) {
-            dbox1.height(window.innerHeight - 2);
-        } else {
-            dbox1.height(height);
-        }
-        dbox1.width(window.innerWidth - 2);
-    };
-
-    this.stopscroll = function() {
-        this.dbox.stop(true);
-    };
-
-    this.moveabout = function(lines) {
-        var line = this.dbox.scrollTop();
-        this.dbox.stop(true);
-        switch (lines) {
-            case 0:
-                this.dbox.scrollTop(0);
-                break;
-            case Infinity:
-                this.dbox.scrollTop(this.origheight);
-                break;
-            default:
-                this.dbox.scrollTop(line - lines * 8);
-                break;
-        }
-    };
-
-    this.requestsahlifile = function(url) {
-        var ref = this;
-        $.getJSON(url, function(json) {
-            ref.filedata = json.filedata;
-            ref.slides = json.slides;
-            ref.buildcompo();
+    Sahli.loadhugeansi = function(picdata, inserthere) {
+      var calcheight, canvwidth, fname, pdiv;
+      fname = this.location + '/' + picdata.file;
+      pdiv = $('<div>');
+      calcheight = 0;
+      canvwidth = 0;
+      pdiv.css('display', 'inline-block');
+      AnsiLove.splitRender(fname, (function(chunks, SAUCE) {
+        chunks.forEach(function(canv) {
+          canv.style.verticalAlign = 'bottom';
+          pdiv.append(canv);
+          calcheight = calcheight + canv.height;
+          canvwidth = canv.width;
        });
+        inserthere.after(pdiv);
+        this.SAUCE = SAUCE;
+        this.origwidth = canvwidth;
+        this.origheight = calcheight;
+        pdiv.width(canvwidth);
+      }), 30, {
+        'bits': '8'
+      });
    };

-
-    this.buildcompo = function() {
-        this.resizedrawbox();
-        alert("SAHLI READY TO GO");
+    Sahli.loadavatar = function(picdata, inserthere) {
+      alert('avatar', picdata, inserthere);
    };

-    this.nextpic = function() {
-        this.dbox.children().remove();
-        // reset scrolling;
-        this.stopscroll();
-        this.scroll_direction = 1;
-        var i = this.currentpic;
-        var filedata = this.filedata;
-        filedata[i].pic = $("<h6>" + filedata[i].file + "</h6>");
-        this.dbox.append(filedata[i].pic);
-        this.loadpic(filedata[i], filedata[i].pic);
-        this.currentpic += 1;
-        if (this.currentpic > filedata.length - 1) {
-            this.currentpic = 0;
+    Sahli.requestsahlifile = function(url) {
+      var _this = this;
+      this.loadkeys();
+      this.DEBUG = false;
+      this.scroll_speed = 5;
+      this.scroll_direction = 1;
+      this.asciiasgfx = false;
+      this.currentpic = 0;
+      return $.getJSON(url, function(json) {
+        _this.filedata = json.filedata;
+        _this.slides = json.slides;
+        _this.location = json.location;
+        return alert("SAHLI READY TO GO\n" + _this.filedata.length + " Entries");
+      });
+    };
+
+    Sahli.nextpic = function() {
+      var filedata, i;
+      $('div#sahliviewer').children().remove();
+      i = Sahli.currentpic;
+      filedata = Sahli.filedata;
+      filedata[i].pic = $('<h6>' + filedata[i].file + '</h6>');
+      Sahli.viewbox.append(filedata[i].pic);
+      Sahli.loadpic(filedata[i], filedata[i].pic);
+      Sahli.currentpic += 1;
+      if (Sahli.currentpic > filedata.length - 1) {
+        Sahli.currentpic = 0;
+      }
+    };
+
+    Sahli.gofullscreen = function() {
+      var docElm;
+      docElm = document.documentElement;
+      window.setTimeout(this.resizedrawbox, 100);
+      if (docElm.requestFullscreen) {
+        docElm.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      } else if (docElm.mozRequestFullScreen) {
+        docElm.mozRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+      } else if (docElm.webkitRequestFullScreen) {
+        docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    };
+
+    Sahli.cancelfullscreen = function() {
+      window.setTimeout(this.resizedrawbox, 100, this.nonfsheight);
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen();
+      }
+    };
+
+    Sahli.toggledebug = function() {
+      $('h1#top').fadeToggle();
+      this.DEBUG = !this.DEBUG;
+    };
+
+    Sahli.keycode = function(char) {
+      return char.toUpperCase().charCodeAt(0);
+    };
+
+    Sahli.loadkeys = function() {
+      var _this = this;
+      return $(document).on('keydown', function(ev) {
+        switch (ev.which) {
+          case _this.keycode(' '):
+            return _this.nextpic();
+          case _this.keycode('s'):
+            return alert("not spaaaace");
+          default:
+            return console.log(ev.which);
        }
+      });
    };

+    return Sahli;

-    this.gofullscreen = function() {
-        var docElm = document.documentElement;
-        var toid = window.setTimeout(sahli.resizedrawbox, 100);
-        if (docElm.requestFullscreen) {
-            docElm.requestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
-        } else if (docElm.mozRequestFullScreen) {
-            docElm.mozRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
-        } else if (docElm.webkitRequestFullScreen) {
-            docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
-        }
+  }).call(this);

-    };
-
-    this.cancelfullscreen = function() {
-        var toid = window.setTimeout(sahli.resizedrawbox, 100, this.nonfsheight);
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        } else if (document.webkitCancelFullScreen) {
-            document.webkitCancelFullScreen();
-        }
-    };
-
-    this.fixhelpbox = function() {
-        var h = $('.help');
-        //        var xy = {'top': document.height/2 - h.height()/2, 'left': document.width/2 - h.width()/2};
-        var xy = {
-            'top': 0,
-            'left': document.width / 2 - h.width() / 2
-        };
-        h.css(xy);
-    };
-
-    this.toggledebug = function() {
-        $('h1#top').fadeToggle();
-        this.DEBUG = (!this.DEBUG);
-    };
-
-    this.loadkeys = function() {
-        var ref = this;
-        $(document).bind('click', function(ev) {
-            if (ev.clientY < 100) {
-                if (ev.clientX < 100) {
-                    ref.nextpic();
-                } else {
-                    ref.fullwidth();
-                }
-            } else {
-                ref.setscroll();
-            }
-        });
-
-        $(document).bind('keydown', function(ev) {
-            switch (ev.which) {
-                case 84: // t
-                    ref.asciiasgfx = (!ref.asciiasgfx);
-                    ref.toptext(ref.asciiasgfx);
-                    break;
-                case 85: // u
-                case 9: // u
-                    $('div.infobox').slideToggle('slow');
-                    break;
-                case 70: // f
-                    ref.gofullscreen();
-                    break;
-                case 27: // esc
-                case 71: // G, as escape seems to not get passed from fullscreen on chrome
-                    ref.cancelfullscreen();
-                    break;
-                case 73: // i
-                    ref.resize(2);
-                    break;
-                case 75: // k
-                    ref.resize(0.5);
-                    break;
-                case 79: // o
-                    ref.fullwidth();
-                    break;
-                case 76: // l
-                    ref.fullheight();
-                    break;
-                case 80: // p
-                    ref.originalsize(0);
-                    break;
-
-                case 83: // s
-                    ref.setscroll();
-                    break;
-                case 72: // h
-                case 191: // "?" (also / but no shift)
-                    $('.help').fadeToggle('fast');
-                    break;
-                case 107: // +
-                case 190: // .
-                    ref.scroll_speed = ref.scroll_speed * 2;
-                    ref.toptext("speed doubled:" + ref.scroll_speed);
-                    break;
-                case 109: // -
-                case 188: // ,
-                    ref.scroll_speed = ref.scroll_speed / 2;
-                    ref.toptext("speed halved:" + ref.scroll_speed);
-                    break;
-                case 49: // 1
-                    ref.scroll_speed = 1;
-                    break;
-                case 50: //2
-                    ref.scroll_speed = 2;
-                    break;
-                case 51: //3
-                    ref.scroll_speed = 3;
-                    break;
-                case 52: //4
-                    ref.scroll_speed = 4;
-                    break;
-                case 53: //5
-                    ref.scroll_speed = 5;
-                    break;
-                case 220: // "\"
-                    ref.toptext(ref.scroll_speed);
-                    break;
-                case 8: // backspace
-                case 68: // D
-                    ref.stopscroll();
-                    break;
-                    // move about keys
-                case 33: // pgup
-                    ref.moveabout(24);
-                    break;
-                case 34: // pgdwn
-                    ref.moveabout(-24);
-                    break;
-                case 36: // home
-                    ref.moveabout(0);
-                    break;
-                case 35: // end
-                    ref.moveabout(Infinity);
-                    break;
-                case 40: // down
-                    ref.moveabout(-1);
-                    break;
-                case 32: // space
-                    ref.nextpic();
-                    break;
-                case 38: // up
-                    ref.moveabout(1);
-                    break;
-                case 19: // pause/break
-                case 121: // F10
-                    ref.toggledebug();
-                    break;
-                    // debug alerts for these keys are annoying (:
-                case 116: // f5
-                case 123: // f12
-                    break;
-                default:
-                    if (ref.DEBUG) {
-                        alert(ev.which);
-                    }
-                    break;
-            }
-        });
-    };
-
-    this.loadkeys();
-    //    this.loadpic('h7-r2012.ans',this.dbox);
-    this.fixhelpbox();
-    var ref = this;
-    $(window).resize(function() {
-        ref.resizedrawbox();
-    });
-    this.requestsahlifile('list.sahli');
-
-};
-
-// I switched to Sublime text + sublemacs pro.
-// Yes, the author of Sublime Text's emacs hatred is annoying.
+}).call(this);
--- a/sahliformat.txt
+++ b/sahliformat.txt
@ -0,0 +1,114 @@
+== Sahli file format docuentation ==
+
+A Sahli file is JSON, so all JSON formatting and rule processing applies.
+
+Version A:
+There were 2 primary sections within the file: The slide section and the
+filedata section.
+Version B:
+3 primary sections, slide / filedata and now location.
+
+=== location ===
+  The directory in which the slide and filedata files sit.
+
+=== slides ===
+
+  This, if implemented (which it isn't) would allow you to generate slides-
+  such as if you weren't using partymeister for slides.
+
+EXAMPLE:
+    "slides": {
+        "background": "screen.png",
+        "template": "template.html",
+        "css": "template.css"
+    },
+
+    background: a file that would be put in the background when showing
+     the slides.
+    template: a html template, which would be used to display the 'info'
+    on the slide. (Author, line1, line2, text, etc.)  Not implemented, but
+    when it is, it probably will allow you to have blank spots for each of
+    the variables in 'filedata.'
+    css: This would let you define the css for the slide; thus allowing
+    font changes for each line, size changes, color changes, etc.
+
+=== filedata ===
+
+  This _is_ implemented and holds the data for each ansi or ascii "slide" in
+  the "slideshow" (if using a 'slideshow' paradigm.)
+
+EXAMPLE:
+    "filedata": [{
+        "file": "spaceflight.asc",
+        "name": "Spaceflight",
+        "filetype":"plain",
+        "amiga": true,
+        "width": "80",
+        "author": "Urs",
+        "font": "Propaz",
+        "color": [
+            200,
+            200,
+            200,
+            255
+        ],
+        "bg": [
+            0,
+            0,
+            0,
+            0
+        ],
+        "line1": "Revision 2013",
+        "line2": "Mercury",
+        "text": "No tools, just a text editor"
+    },
+
+    file: the name of the file on disk / in the directory.
+    name: the name of the piece - shown in the editor and in the info panel.
+    filetype: * NEW IN VERSION B*
+      The type of file - i.e. use the parsing method for file type X.
+      Possible legal types:
+      "plain" - for 'standard' ascii (Amiga or pc.) ISO-8859-1
+      "ansi" - 'normal' ansi, can have or not have SAUCE data.
+      "xbin" - saved as xbin
+      "ice" - saved in the ICE format
+      "adf" - saved as ADF (NOT amiga disk file, some ansi format that is not
+         an amiga format. sk!n, please don't save to an amiga disk file (adf)
+         and then put an adf formatted amiga ascii inside, I'll explode (:  )
+      "avatar" - avatar format
+      "bin" - bin format. Not "any binary" format, but the ansi 'bin' format.
+       * no I don't know the difference, but someone does and they wrote the
+         original code for it.
+      "idf" - idf format.
+      "pcboard" - pcboard ansi format.
+      "tundra" - tundra format. (from tundradraw, I assume.)
+
+    * NOTE: It is ENTIRELY possible to have an Amiga ascii in xbin format.
+    * So the file format does NOT dictate the font. It just says "parse this
+      way."
+
+    amiga: Ascii, or Ansi ? (the "original" either/or parsing used 'ansi' to
+      mean pc ansi, and all ascii would be 'amiga.' This wasn't nearly enough
+      to cover all the bases.)
+      Essentially, if it's a "plain" file, if you choose 'Amiga' the ASCII
+      rendering will be used - and you can flip 'text rendering' on and off
+      (which means 'use the standard webpage' and 'draw glyphs for each of
+      the characters.')
+    width: How wide is this piece? (80 is standard, I've tested 132 colomns,
+      Iks is doing a wide piece which is something like 10,000 so...)
+      Some formats will truncate a line to save space, so it's important for
+      some renderings to have this correct or the 'linefeed' will be off.
+    author: the author of the piece. (Sk!n, H7, Enzo, dmg, etc.)
+    font: the font used to render. Mostly for ascii and especially amiga
+      as Amiga fonts and PC fonts are VERY different in terms of / and \ slant
+      and several other noticable differences.
+      Possible legal types:
+      'Propaz' 'ansifont' 'mOsOul' 'Microknight' 'p0t-nOodle'
+       * Propaz and ansifont are in Version A, B will have the others.
+       * p0t-nOodle should be double checked for spelling, Truck.
+    color: when using ascii, display the rendered glyphs in this color.
+      If using the alternate display (faster) mode, this has no effect.
+      - unless I implement it via fiddling with the css.
+    bg: similarly, this is the background color for ascii. I believe this may
+      work whichever rendering mode you use.
+    line1 / line2 / text:  Stuff for the info panel.
--- a/testshow/51_DRGN.XB
+++ b/testshow/51_DRGN.XB
--- a/testshow/51_EMP.XB
+++ b/testshow/51_EMP.XB
--- a/testshow/ARTX-LGO.ADF
+++ b/testshow/ARTX-LGO.ADF
--- a/testshow/Blocktronics-WTF4_Megajoint.ans
+++ b/testshow/Blocktronics-WTF4_Megajoint.ans
--- a/testshow/MD-XMAS.IDF
+++ b/testshow/MD-XMAS.IDF
--- a/testshow/US-SADIS.BIN
+++ b/testshow/US-SADIS.BIN
--- a/testshow/az0!-revi510n.txt
+++ b/testshow/az0!-revi510n.txt
--- a/testshow/fb-rev13.ans
+++ b/testshow/fb-rev13.ans
--- a/testshow/h7-supergroupies.ans
+++ b/testshow/h7-supergroupies.ans
--- a/testshow/spaceflight.asc
+++ b/testshow/spaceflight.asc
--- a/testshow/ted_-_spaceship_enterprise.ans
+++ b/testshow/ted_-_spaceship_enterprise.ans
--- a/testshow/zv_iniq.tnd
+++ b/testshow/zv_iniq.tnd
--- a/textmode.js
+++ b/textmode.js
--- a/todo.txt
+++ b/todo.txt
@ -1,23 +1,14 @@
-Sahli todo (programmer's day 2013 - Churchy La Femme reminds us that Friday
-the 13th comes on Friday this month)
-
-(A) Fix Amiga mode rendering via sixteencolors lib
-(B) Add fonts - mOsOul
-(B) Add fonts - microknight
-(B) Add p0t - fonts-nOodle
-(B) Add fonts - Amiga 500
-(B) Add fonts - Amiga 1200 (replace or compare w/16colors version)
-
-SAUCE file parsing -
-(A) remove the SAUCE lines at bottom, return ANSI object for render
-(B) load SAUCE into 'info' lines (should be done at prep)
-
-OTHER file parsing -
-(A) remove their lines like SAUCE, return ANSI object for render
-(B) load other-info into 'info' (done at prep)
-
-(A) Create Editor - Standalone
-(A)  - create interface
-(A)  - parse files for 'info'
-
-(B) Get with dfox on the partymeister package version
+(B) 2015-02-22 ADF  @OTHER
+(B) @EDITOR add more Amiga fonts.
+(B) @EDITOR redo filenames to load from list of files in directory (specfied in 'location')
+(A) remove the SAUCE lines at bottom, return ANSI object for render @SAUCE
+(A) XBIN @OTHER
+(C) Amiga ANSI @OTHER
+(B) Avatar @OTHER
+(B) BIN @OTHER
+(B) IDF @OTHER
+(B) PCBOARD @OTHER
+(D) THUMBNAILS - for returning to partymeister @PARTYMEISTER
+(B) Tundra @OTHER
+(D) implement package import from partymeister  @PARTYMEISTER
+(D) hook for progress  @progress @PARTYMEISTER