init

build/css/ox.ui.classic.css

@@ -0,0 +1,113 @@
+body.OxThemeClassic {
+    background: rgb(240, 240, 240);
+}
+.OxThemeClassic div {
+    color: rgb(16, 16, 16);
+}
+
+/*
+================================================================================
+Bars
+================================================================================
+*/
+
+.OxThemeClassic .OxBar.OxHorizontal {
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(192, 192, 192)), to(rgb(160, 160, 160)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 192, 192)), to(rgb(160, 160, 160)));
+    //background: -moz-linear-gradient(left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+    //background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+}
+
+/*
+================================================================================
+Forms
+================================================================================
+*/
+
+.OxThemeClassic .OxButton,
+.OxThemeClassic .OxInput,
+.OxThemeClassic .OxRange,
+.OxThemeClassic .OxTrack {
+    border: 1px solid rgb(176, 176, 176);
+    //border: 1px solid rgb(160, 160, 160);
+    color: rgb(64, 64, 64);
+}
+.OxThemeClassic .OxButton,
+.OxThemeClassic .OxRange {
+    //background: -moz-linear-gradient(left top, left bottom, from(rgb(192, 192, 192)), to(rgb(160, 160, 160)));
+    //background: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 192, 192)), to(rgb(160, 160, 160)));
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+}
+.OxThemeClassic .OxButton:active,
+.OxThemeClassic .OxRange.OxActive {
+    //background: rgb(160, 160, 160);
+    background: rgb(192, 192, 192);
+    color: rgb(48, 48, 48);
+}
+.OxThemeClassic .OxButton.OxDisabled {
+    background: rgb(192, 192, 192);
+    color: rgb(128, 128, 128);
+}
+.OxThemeClassic .OxButton.OxSelected {
+    //background: -moz-linear-gradient(left top, left bottom, from(rgb(128, 128, 128)), to(rgb(160, 160, 160)));
+    //background: -webkit-gradient(linear, left top, left bottom, from(rgb(128, 128, 128)), to(rgb(160, 160, 160)));
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(128, 128, 128)), color-stop(0.1, rgb(160, 160, 160)), to(rgb(192, 192, 192)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(128, 128, 128)), color-stop(0.1, rgb(160, 160, 160)), to(rgb(192, 192, 192)));
+    color: rgb(32, 32, 32);
+}
+.OxThemeClassic .OxButton.OxTab.OxSelected {
+    border-bottom: 1px solid rgb(192, 192, 192);
+}
+
+.OxThemeClassic .OxInput,
+.OxThemeClassic .OxTrack {
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
+}
+.OxThemeClassic .OxInput:focus {
+    border: 1px solid rgb(160, 160, 160);
+    -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
+    -webkit-box-shadow: 0 2 4px rgb(128, 128, 128);
+}
+.OxThemeClassic .OxInput.OxPlaceholder {
+    color: rgb(160, 160, 160)
+}
+
+/*
+================================================================================
+Scrollbars
+================================================================================
+*/
+
+.OxThemeClassic ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    border-left: 1px solid rgb(176, 176, 176);
+    border-right: 1px solid rgb(176, 176, 176);
+    background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+}
+.OxThemeClassic ::-webkit-scrollbar-button {
+    width: 12px;
+    height: 12px;
+}
+.OxThemeClassic ::-webkit-scrollbar-button:vertical:decrement {
+    background: url(../png/ox.ui.classic/scrollbarVerticalDecrement.png);
+}
+.OxThemeClassic ::-webkit-scrollbar-button:vertical:increment {
+    background: url(../png/ox.ui.classic/scrollbarVerticalIncrement.png);
+}
+.OxThemeClassic ::-webkit-scrollbar-thumb:vertical {
+    border: 1px solid rgb(176, 176, 176);
+    background: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+    -webkit-border-radius: 6px;
+}
+.OxThemeClassic ::-webkit-scrollbar-track:vertical {
+    border: 1px solid rgb(176, 176, 176);
+    background-image: -webkit-gradient(linear, left top, right top, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
+    -webkit-border-radius: 6px;
+}
+.OxThemeClassic ::-webkit-scrollbar:active,
+.OxThemeClassic ::-webkit-scrollbar-thumb:vertical:active {
+    background: rgb(192, 192, 192);
+}

build/css/ox.ui.css

@@ -0,0 +1,269 @@
+@import url("ox.ui.classic.css");
+@import url("ox.ui.modern.css");
+@import url("ox.ui.future.css");
+
+/*
+================================================================================
+Base
+================================================================================
+*/
+
+body {
+    margin: 0;
+    overflow: hidden;
+    //-webkit-user-select: none
+}
+div, input {
+    font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;
+    font-size: 11px;
+}
+/*
+================================================================================
+Core
+================================================================================
+*/
+
+.OxContainer {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+}
+.OxContent {
+    overflow: auto;
+}
+
+/*
+================================================================================
+Bars
+================================================================================
+*/
+
+.OxBar {
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.OxTabbar > .OxButtonGroup {
+    margin: 4px 0 0 4px;
+}
+
+/*
+================================================================================
+Forms
+================================================================================
+*/
+
+input {
+    padding: 0;
+    border: 1px;
+    margin: 0;
+}
+input[type=button],
+input[type=reset],
+input[type=submit] {
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+}
+input:focus {
+    outline: none;
+}
+input.OxXlarge {
+    height: 26px;
+    font-size: 19px;
+    padding: 0 12px 0 12px;
+    -moz-border-radius: 14px;
+    -webkit-border-radius: 14px;
+}
+input.OxLarge {
+    height: 22px;
+    font-size: 16px;
+    padding: 0 10px 0 10px;
+    -moz-border-radius: 12px;
+    -webkit-border-radius: 12px;
+}
+input.OxMedium {
+    height: 18px;
+    font-size: 13px;
+    padding: 0 8px 0 8px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+}
+input.OxSmall {
+    height: 14px;
+    padding: 0 6px 0 6px;
+    font-size: 11px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+}
+input.OxXsmall {
+    height: 10px;
+    padding: 0 4px 0 4px;
+    font-size: 8px;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+}
+input[type=image] {
+    padding: 0;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+input[type=image].OxLarge {
+    width: 22px;
+}
+input[type=image].OxMedium {
+    width: 18px;
+}
+input[type=image].OxSmall {
+    width: 14px;
+}
+input::-moz-focus-inner {
+    border: none;
+}
+.OxButton.OxSymbol,
+.OxButton.OxSymbol:active {
+    border: 1px solid rgba(0, 0, 0, 0);
+    background: rgba(0, 0, 0, 0);
+}
+/*
+--------------------------------------------------------------------------------
+OxButtonGroup
+--------------------------------------------------------------------------------
+*/
+.OxButtonGroup {
+    display: table-cell;
+    float: left;
+    //overflow: hidden;
+    //white-space: nowrap;
+}
+.OxButtonGroup > .OxButton {
+    border-right-width: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+.OxButtonGroup > .OxButton:last-child {
+    border-right-width: 1px;
+}
+.OxButtonGroup > .OxButton.OxSmall:first-child {
+    -moz-border-radius-topleft: 4px;
+    -moz-border-radius-bottomleft: 4px;
+    -webkit-border-top-left-radius: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+}
+.OxButtonGroup > .OxButton.OxSmall:last-child {
+    -moz-border-radius-topright: 4px;
+    -moz-border-radius-bottomright: 4px;
+    -webkit-border-top-right-radius: 4px;
+    -webkit-border-bottom-right-radius: 4px;
+}
+.OxButtonGroup > .OxButton.OxXsmall:first-child {
+    -moz-border-radius-topleft: 2px;
+    -moz-border-radius-bottomleft: 2px;
+    -webkit-border-top-left-radius: 2px;
+    -webkit-border-bottom-left-radius: 2px;
+}
+.OxButtonGroup > .OxButton.OxXsmall:last-child {
+    -moz-border-radius-topright: 2px;
+    -moz-border-radius-bottomright: 2px;
+    -webkit-border-top-right-radius: 2px;
+    -webkit-border-bottom-right-radius: 2px;
+}
+.OxButtonGroup > .OxButton.OxTab {
+    -moz-border-radius-topleft: 4px;
+    -moz-border-radius-topright: 4px;
+    -moz-border-radius-bottomleft: 0;
+    -moz-border-radius-bottomright: 0;
+    -webkit-border-top-left-radius: 4px;
+    -webkit-border-top-right-radius: 4px;
+    -webkit-border-bottom-left-radius: 0;
+    -webkit-border-bottom-right-radius: 0;
+}
+.OxButtonGroup > .OxButton.OxTab:first-child {
+    -moz-border-radius-bottomleft: 0;
+    -webkit-border-bottom-left-radius: 0;
+}
+.OxButtonGroup > .OxButton.OxTab:last-child {
+    -moz-border-radius-bottomright: 0;
+    -webkit-border-bottom-right-radius: 0;
+}
+/*
+--------------------------------------------------------------------------------
+OxRange
+--------------------------------------------------------------------------------
+*/
+.OxRange {
+    height: 14px;
+    border: 1px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+}
+.OxRange > .OxArrow:first-child {
+    float: left;
+    margin-top: -1px;
+}
+.OxRange > .OxArrow:last-child {
+    float: left;
+    margin-left: -1px;
+    margin-top: -1px;
+}
+.OxRange > .OxTrack {
+    float: left;
+    height: 14px;
+    margin-left: -1px;
+    margin-top: -1px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+}
+.OxRange > .OxTrack > .OxImage {
+    float: left;
+    height: 14px;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+}
+.OxRange > .OxTrack > .OxThumb {
+    float: left;
+    margin-top: -15px;
+}
+.OxRange > .OxTrack > .OxThumb:first-child {
+    margin-top: -1px;
+}
+
+/*
+================================================================================
+Panels
+================================================================================
+*/
+
+.OxCollapsePanel > .OxBar {
+    position: relative;
+    z-index: 1;
+}
+.OxCollapsePanel > .OxBar > .OxButton {
+    float: left;
+    margin: 2px 0 0 4px;
+}
+.OxCollapsePanel > .OxBar > .OxTitle {
+    float: left;
+    margin: 3px 0 0 4px;
+    font-weight: bold;
+}
+.OxCollapsePanel > .OxContent {
+    position: relative;
+    left: 0;
+    right: 0;
+}
+
+
+.OxPanel {
+    overflow: auto;
+}
+
+.OxSplitPanel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+}

build/css/ox.ui.future.css

@@ -0,0 +1,37 @@
+body.OxThemeFuture {
+    background: rgb(240, 240, 240);
+}
+
+/*
+--------------------------------------------------------------------------------
+input
+--------------------------------------------------------------------------------
+*/
+
+.OxThemeFuture .OxButton,
+.OxThemeFuture .OxInput {
+    border: 1px solid rgb(128, 128, 128);
+    color: rgb(64, 64, 64);
+}
+.OxThemeFuture .OxButton {
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
+}
+.OxThemeFuture .OxButton:active {
+    background: rgb(208, 208, 208);
+}
+.OxThemeFuture .OxInput {
+    //border-top-color: rgb(96, 96, 96);
+    //border-right-color: rgb(128, 128, 128);
+    //border-bottom-color: rgb(160, 160, 160);
+    //border-left-color: rgb(128, 128, 128);
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255)));
+}
+.OxThemeFuture .OxInput:focus {
+    -moz-box-shadow: 0 0 4px rgb(128, 128, 128);
+    -webkit-box-shadow: 0 0 4px rgb(128, 128, 128);
+}
+.OxThemeFuture .OxInput.OxPlaceholder {
+    color: rgb(160, 160, 160)
+}

build/css/ox.ui.modern.css

@@ -0,0 +1,111 @@
+body.OxThemeModern {
+    background: rgb(16, 16, 16);
+}
+.OxThemeModern div {
+    color: rgb(240, 240, 240);
+}
+
+/*
+================================================================================
+Bars
+================================================================================
+*/
+
+.OxThemeModern .OxBar.OxHorizontal {
+    //background: -moz-linear-gradient(left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+    //background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
+}
+
+/*
+================================================================================
+Forms
+================================================================================
+*/
+
+.OxThemeModern .OxButton,
+.OxThemeModern .OxInput,
+.OxThemeModern .OxRange,
+.OxThemeModern .OxTrack {
+    //border: 1px solid rgb(80, 80, 80);
+    border: 1px solid rgb(48, 48, 48);
+    color: rgb(192, 192, 192);
+}
+.OxThemeModern .OxButton,
+.OxThemeModern .OxRange {
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+    //background: -moz-linear-gradient(left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
+    //background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
+}
+.OxThemeModern .OxButton:active,
+.OxThemeModern .OxRange.OxActive {
+    background: rgb(80, 80, 80);
+    //background: rgb(64, 64, 64);
+}
+.OxThemeModern .OxButton.OxDisabled {
+    background: rgb(80, 80, 80);
+    color: rgb(128, 128, 128);
+}
+.OxThemeModern .OxButton.OxSelected {
+    //background: -moz-linear-gradient(left top, left bottom, from(rgb(80, 80, 80)), to(rgb(112, 112, 112)));
+    //background: -webkit-gradient(linear, left top, left bottom, from(rgb(80, 80, 80)), to(rgb(112, 112, 112)));
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(0, 0, 0)), color-stop(0.1, rgb(32, 32, 32)), to(rgb(64, 64, 64)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(0.1, rgb(32, 32, 32)), to(rgb(64, 64, 64)));
+    color: rgb(224, 224, 224);
+}
+.OxThemeModern .OxButton.OxTab.OxSelected {
+    border-bottom: 1px solid rgb(64, 64, 64);
+}
+.OxThemeModern .OxInput,
+.OxThemeModern .OxTrack {
+    background: -moz-linear-gradient(left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
+}
+.OxThemeModern .OxInput:focus {
+    border: 1px solid rgb(80, 80, 80);
+    -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
+    -webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
+}
+.OxThemeModern .OxInput.OxPlaceholder {
+    color: rgb(96, 96, 96)
+}
+
+/*
+================================================================================
+Scrollbars
+================================================================================
+*/
+
+.OxThemeModern ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    border-left: 1px solid rgb(48, 48, 48);
+    border-right: 1px solid rgb(48, 48, 48);
+    background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+}
+.OxThemeModern ::-webkit-scrollbar-button {
+    width: 12px;
+    height: 12px;
+}
+.OxThemeModern ::-webkit-scrollbar-button:vertical:decrement {
+    background: url(../png/ox.ui.modern/scrollbarVerticalDecrement.png);
+}
+.OxThemeModern ::-webkit-scrollbar-button:vertical:increment {
+    background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png);
+}
+.OxThemeModern ::-webkit-scrollbar-thumb:vertical {
+    border: 1px solid rgb(48, 48, 48);
+    background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
+    -webkit-border-radius: 6px;
+}
+.OxThemeModern ::-webkit-scrollbar-track:vertical {
+    border: 1px solid rgb(32, 32, 32);
+    background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
+    -webkit-border-radius: 6px;
+}
+.OxThemeModern ::-webkit-scrollbar:active,
+.OxThemeModern ::-webkit-scrollbar-thumb:vertical:active {
+    background: rgb(64, 64, 64);
+}

build/js/json2.js

@@ -0,0 +1,479 @@
+/*
+    http://www.JSON.org/json2.js
+    2009-09-29
+
+    Public Domain.
+
+    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+
+    See http://www.JSON.org/js.html
+
+    This file creates a global JSON object containing two methods: stringify
+    and parse.
+
+        JSON.stringify(value, replacer, space)
+            value       any JavaScript value, usually an object or array.
+
+            replacer    an optional parameter that determines how object
+                        values are stringified for objects. It can be a
+                        function or an array of strings.
+
+            space       an optional parameter that specifies the indentation
+                        of nested structures. If it is omitted, the text will
+                        be packed without extra whitespace. If it is a number,
+                        it will specify the number of spaces to indent at each
+                        level. If it is a string (such as '\t' or ' '),
+                        it contains the characters used to indent at each level.
+
+            This method produces a JSON text from a JavaScript value.
+
+            When an object value is found, if the object contains a toJSON
+            method, its toJSON method will be called and the result will be
+            stringified. A toJSON method does not serialize: it returns the
+            value represented by the name/value pair that should be serialized,
+            or undefined if nothing should be serialized. The toJSON method
+            will be passed the key associated with the value, and this will be
+            bound to the value
+
+            For example, this would serialize Dates as ISO strings.
+
+                Date.prototype.toJSON = function (key) {
+                    function f(n) {
+                        // Format integers to have at least two digits.
+                        return n < 10 ? '0' + n : n;
+                    }
+
+                    return this.getUTCFullYear()   + '-' +
+                         f(this.getUTCMonth() + 1) + '-' +
+                         f(this.getUTCDate())      + 'T' +
+                         f(this.getUTCHours())     + ':' +
+                         f(this.getUTCMinutes())   + ':' +
+                         f(this.getUTCSeconds())   + 'Z';
+                };
+
+            You can provide an optional replacer method. It will be passed the
+            key and value of each member, with this bound to the containing
+            object. The value that is returned from your method will be
+            serialized. If your method returns undefined, then the member will
+            be excluded from the serialization.
+
+            If the replacer parameter is an array of strings, then it will be
+            used to select the members to be serialized. It filters the results
+            such that only members with keys listed in the replacer array are
+            stringified.
+
+            Values that do not have JSON representations, such as undefined or
+            functions, will not be serialized. Such values in objects will be
+            dropped; in arrays they will be replaced with null. You can use
+            a replacer function to replace those with JSON values.
+            JSON.stringify(undefined) returns undefined.
+
+            The optional space parameter produces a stringification of the
+            value that is filled with line breaks and indentation to make it
+            easier to read.
+
+            If the space parameter is a non-empty string, then that string will
+            be used for indentation. If the space parameter is a number, then
+            the indentation will be that many spaces.
+
+            Example:
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}]);
+            // text is '["e",{"pluribus":"unum"}]'
+
+
+            text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t');
+            // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
+
+            text = JSON.stringify([new Date()], function (key, value) {
+                return this[key] instanceof Date ?
+                    'Date(' + this[key] + ')' : value;
+            });
+            // text is '["Date(---current time---)"]'
+
+
+        JSON.parse(text, reviver)
+            This method parses a JSON text to produce an object or array.
+            It can throw a SyntaxError exception.
+
+            The optional reviver parameter is a function that can filter and
+            transform the results. It receives each of the keys and values,
+            and its return value is used instead of the original value.
+            If it returns what it received, then the structure is not modified.
+            If it returns undefined then the member is deleted.
+
+            Example:
+
+            // Parse the text. Values that look like ISO date strings will
+            // be converted to Date objects.
+
+            myData = JSON.parse(text, function (key, value) {
+                var a;
+                if (typeof value === 'string') {
+                    a =
+/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
+                    if (a) {
+                        return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
+                            +a[5], +a[6]));
+                    }
+                }
+                return value;
+            });
+
+            myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
+                var d;
+                if (typeof value === 'string' &&
+                        value.slice(0, 5) === 'Date(' &&
+                        value.slice(-1) === ')') {
+                    d = new Date(value.slice(5, -1));
+                    if (d) {
+                        return d;
+                    }
+                }
+                return value;
+            });
+
+
+    This is a reference implementation. You are free to copy, modify, or
+    redistribute.
+
+    This code should be minified before deployment.
+    See http://javascript.crockford.com/jsmin.html
+
+    USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
+    NOT CONTROL.
+*/
+
+/*jslint evil: true, strict: false */
+
+/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply,
+    call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
+    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
+    lastIndex, length, parse, prototype, push, replace, slice, stringify,
+    test, toJSON, toString, valueOf
+*/
+
+
+// Create a JSON object only if one does not already exist. We create the
+// methods in a closure to avoid creating global variables.
+
+if (!this.JSON) {
+    this.JSON = {};
+}
+
+(function () {
+
+    function f(n) {
+        // Format integers to have at least two digits.
+        return n < 10 ? '0' + n : n;
+    }
+
+    if (typeof Date.prototype.toJSON !== 'function') {
+
+        Date.prototype.toJSON = function (key) {
+
+            return isFinite(this.valueOf()) ?
+                   this.getUTCFullYear()   + '-' +
+                 f(this.getUTCMonth() + 1) + '-' +
+                 f(this.getUTCDate())      + 'T' +
+                 f(this.getUTCHours())     + ':' +
+                 f(this.getUTCMinutes())   + ':' +
+                 f(this.getUTCSeconds())   + 'Z' : null;
+        };
+
+        String.prototype.toJSON =
+        Number.prototype.toJSON =
+        Boolean.prototype.toJSON = function (key) {
+            return this.valueOf();
+        };
+    }
+
+    var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
+        gap,
+        indent,
+        meta = {    // table of character substitutions
+            '\b': '\\b',
+            '\t': '\\t',
+            '\n': '\\n',
+            '\f': '\\f',
+            '\r': '\\r',
+            '"' : '\\"',
+            '\\': '\\\\'
+        },
+        rep;
+
+
+    function quote(string) {
+
+// If the string contains no control characters, no quote characters, and no
+// backslash characters, then we can safely slap some quotes around it.
+// Otherwise we must also replace the offending characters with safe escape
+// sequences.
+
+        escapable.lastIndex = 0;
+        return escapable.test(string) ?
+            '"' + string.replace(escapable, function (a) {
+                var c = meta[a];
+                return typeof c === 'string' ? c :
+                    '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+            }) + '"' :
+            '"' + string + '"';
+    }
+
+
+    function str(key, holder) {
+
+// Produce a string from holder[key].
+
+        var i,          // The loop counter.
+            k,          // The member key.
+            v,          // The member value.
+            length,
+            mind = gap,
+            partial,
+            value = holder[key];
+
+// If the value has a toJSON method, call it to obtain a replacement value.
+
+        if (value && typeof value === 'object' &&
+                typeof value.toJSON === 'function') {
+            value = value.toJSON(key);
+        }
+
+// If we were called with a replacer function, then call the replacer to
+// obtain a replacement value.
+
+        if (typeof rep === 'function') {
+            value = rep.call(holder, key, value);
+        }
+
+// What happens next depends on the value's type.
+
+        switch (typeof value) {
+        case 'string':
+            return quote(value);
+
+        case 'number':
+
+// JSON numbers must be finite. Encode non-finite numbers as null.
+
+            return isFinite(value) ? String(value) : 'null';
+
+        case 'boolean':
+        case 'null':
+
+// If the value is a boolean or null, convert it to a string. Note:
+// typeof null does not produce 'null'. The case is included here in
+// the remote chance that this gets fixed someday.
+
+            return String(value);
+
+// If the type is 'object', we might be dealing with an object or an array or
+// null.
+
+        case 'object':
+
+// Due to a specification blunder in ECMAScript, typeof null is 'object',
+// so watch out for that case.
+
+            if (!value) {
+                return 'null';
+            }
+
+// Make an array to hold the partial results of stringifying this object value.
+
+            gap += indent;
+            partial = [];
+
+// Is the value an array?
+
+            if (Object.prototype.toString.apply(value) === '[object Array]') {
+
+// The value is an array. Stringify every element. Use null as a placeholder
+// for non-JSON values.
+
+                length = value.length;
+                for (i = 0; i < length; i += 1) {
+                    partial[i] = str(i, value) || 'null';
+                }
+
+// Join all of the elements together, separated with commas, and wrap them in
+// brackets.
+
+                v = partial.length === 0 ? '[]' :
+                    gap ? '[\n' + gap +
+                            partial.join(',\n' + gap) + '\n' +
+                                mind + ']' :
+                          '[' + partial.join(',') + ']';
+                gap = mind;
+                return v;
+            }
+
+// If the replacer is an array, use it to select the members to be stringified.
+
+            if (rep && typeof rep === 'object') {
+                length = rep.length;
+                for (i = 0; i < length; i += 1) {
+                    k = rep[i];
+                    if (typeof k === 'string') {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            } else {
+
+// Otherwise, iterate through all of the keys in the object.
+
+                for (k in value) {
+                    if (Object.hasOwnProperty.call(value, k)) {
+                        v = str(k, value);
+                        if (v) {
+                            partial.push(quote(k) + (gap ? ': ' : ':') + v);
+                        }
+                    }
+                }
+            }
+
+// Join all of the member texts together, separated with commas,
+// and wrap them in braces.
+
+            v = partial.length === 0 ? '{}' :
+                gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' +
+                        mind + '}' : '{' + partial.join(',') + '}';
+            gap = mind;
+            return v;
+        }
+    }
+
+// If the JSON object does not yet have a stringify method, give it one.
+
+    if (typeof JSON.stringify !== 'function') {
+        JSON.stringify = function (value, replacer, space) {
+
+// The stringify method takes a value and an optional replacer, and an optional
+// space parameter, and returns a JSON text. The replacer can be a function
+// that can replace values, or an array of strings that will select the keys.
+// A default replacer method can be provided. Use of the space parameter can
+// produce text that is more easily readable.
+
+            var i;
+            gap = '';
+            indent = '';
+
+// If the space parameter is a number, make an indent string containing that
+// many spaces.
+
+            if (typeof space === 'number') {
+                for (i = 0; i < space; i += 1) {
+                    indent += ' ';
+                }
+
+// If the space parameter is a string, it will be used as the indent string.
+
+            } else if (typeof space === 'string') {
+                indent = space;
+            }
+
+// If there is a replacer, it must be a function or an array.
+// Otherwise, throw an error.
+
+            rep = replacer;
+            if (replacer && typeof replacer !== 'function' &&
+                    (typeof replacer !== 'object' ||
+                     typeof replacer.length !== 'number')) {
+                throw new Error('JSON.stringify');
+            }
+
+// Make a fake root object containing our value under the key of ''.
+// Return the result of stringifying the value.
+
+            return str('', {'': value});
+        };
+    }
+
+
+// If the JSON object does not yet have a parse method, give it one.
+
+    if (typeof JSON.parse !== 'function') {
+        JSON.parse = function (text, reviver) {
+
+// The parse method takes a text and an optional reviver function, and returns
+// a JavaScript value if the text is a valid JSON text.
+
+            var j;
+
+            function walk(holder, key) {
+
+// The walk method is used to recursively walk the resulting structure so
+// that modifications can be made.
+
+                var k, v, value = holder[key];
+                if (value && typeof value === 'object') {
+                    for (k in value) {
+                        if (Object.hasOwnProperty.call(value, k)) {
+                            v = walk(value, k);
+                            if (v !== undefined) {
+                                value[k] = v;
+                            } else {
+                                delete value[k];
+                            }
+                        }
+                    }
+                }
+                return reviver.call(holder, key, value);
+            }
+
+
+// Parsing happens in four stages. In the first stage, we replace certain
+// Unicode characters with escape sequences. JavaScript handles many characters
+// incorrectly, either silently deleting them, or treating them as line endings.
+
+            cx.lastIndex = 0;
+            if (cx.test(text)) {
+                text = text.replace(cx, function (a) {
+                    return '\\u' +
+                        ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
+                });
+            }
+
+// In the second stage, we run the text against regular expressions that look
+// for non-JSON patterns. We are especially concerned with '()' and 'new'
+// because they can cause invocation, and '=' because it can cause mutation.
+// But just to be safe, we want to reject all unexpected forms.
+
+// We split the second stage into 4 regexp operations in order to work around
+// crippling inefficiencies in IE's and Safari's regexp engines. First we
+// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we
+// replace all simple value tokens with ']' characters. Third, we delete all
+// open brackets that follow a colon or comma or that begin the text. Finally,
+// we look to see that the remaining characters are only whitespace or ']' or
+// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval.
+
+            if (/^[\],:{}\s]*$/.
+test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@').
+replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']').
+replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) {
+
+// In the third stage we use the eval function to compile the text into a
+// JavaScript structure. The '{' operator is subject to a syntactic ambiguity
+// in JavaScript: it can begin a block or an object literal. We wrap the text
+// in parens to eliminate the ambiguity.
+
+                j = eval('(' + text + ')');
+
+// In the optional fourth stage, we recursively walk the new structure, passing
+// each name/value pair to a reviver function for possible transformation.
+
+                return typeof reviver === 'function' ?
+                    walk({'': j}, '') : j;
+            }
+
+// If the text is not JSON parseable, then a SyntaxError is thrown.
+
+            throw new SyntaxError('JSON.parse');
+        };
+    }
+}());

build/js/ox.geo.js

@@ -0,0 +1,110 @@
+/*
+################################################################################
+ox.geo.js
+
+requires
+    jquery.js
+    ox.js
+################################################################################
+*/
+
+(function() {
+
+    var earthRadius = 6378137,
+        earthCircumference = 2 * Math.PI * earthRadius
+        latMax = Ox.deg(Math.atan(Ox.sinh(Math.PI))),
+        latMin = -latMax;
+        /*
+        map = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            margin: 16
+        };
+        */
+
+    Ox.getLatLng = (function() {
+        /*
+            returns {lat, lng} for a given (x, y)
+        */
+        function getLatLng(xy) {
+            return (xy - 0.5) * 2 * Math.PI;
+        }
+        return function(x, y) {
+            return {
+                lat: -Ox.deg(Math.atan(Ox.sinh(getLatLng(y)))),
+                lng: Ox.deg(getLatLng(x))
+            };
+        };
+    })();
+
+    Ox.getPlacemarks = (function() {
+        /*
+        Ox.getPlacemarks(name, callback)
+        Ox.getPlacemarks(lat, lng, callback)
+        */
+        var cache = {};
+        return function() {
+
+            // $.getScript("http://maps.google.com/maps/api/js?sensor=false", function() {
+                // getPlacemarks(args);
+            // });
+
+
+            // var args = arguments;
+            var reverse = typeof arguments[0] == "number",
+                query = $.extend({
+                    language: "en"
+                }, !reverse ? {
+                    address: arguments[0]
+                } : {
+                    latLng: new google.maps.LatLng(arguments[0], arguments[1])
+                }),
+                id = JSON.stringify(query),
+                callback = arguments[arguments.length - 1],
+                geocoder = new google.maps.Geocoder();
+            if (cache[id]) {
+                callback(cache[id]);
+            } else {
+                geocoder.geocode(query, function(results, status) {
+                    var data = {
+                        results: results,
+                        status: status
+                    };
+                    cache[id] = data;
+                    callback(data);
+                });
+            }
+            
+        };
+    })();
+
+    Ox.getXY = (function() {
+        /*
+            returns {x, y} for a given (lat, lng), between 0 and 1
+        */
+        function getXY(xy) {
+            return (xy / (2 * Math.PI) + 0.5);
+        }
+        return function(lat, lng) {
+            return {
+                x: getXY(Ox.rad(lng)),
+                y: getXY(Ox.asinh(Math.tan(Ox.rad(-lat))))
+            };
+        };
+    })();
+
+    /*
+    Ox.getZ = function(placemark, map) {
+        // returns zoom level at which placemark is fully included
+        map.width -= 2 * map.margin;
+        map.height -= 2 * map.margin;
+        var northEast = getXY(placemark.northEast),
+            southWest = getXY(placemark.southWest),
+            width = (northEast.x - southWest.x),
+            height = (northEast.y - southWest.y),
+        return parseInt(Ox.log(width / height > map.width / map.height ?
+                map.width / width : map.height / height, 2));
+    };
+    */
+
+})();

build/js/ox.png.js

@@ -0,0 +1,57 @@
+onmessage = function(e) {
+    if (e.data.message) {
+        
+    } else {
+        
+    }
+}
+
+function encode() {
+    str = Ox.encodeUTF8(str);
+    var c = Ox.canvas(img), len = str.length;
+    if (len > maxLength(img.width, img.height)) {
+        throw new RangeError("PNG codec can't encode " + len +
+                " bytes into " + (img.width * img.height) + " pixels");
+    }
+    len = Ox.pad(Ox.encodeBase256(len), 4, Ox.char(0));
+    Ox.each(Ox.map(len + str, function(byte) {
+        return Ox.map(new Array(8), function(v, i) {
+            return byte.charCodeAt(0) >> 7 - i & 1;
+        }).join("");
+    }).join(""), function(i, bit) {
+        var index, byte = c.data[index = parseInt(i * 4/3)];
+        c.data[index] = bit == xor(byte) ? byte :
+                byte & 254 | !(byte & 1);
+    });
+    c.context.putImageData(c.imageData, 0, 0);
+    postMessage(c.canvas.toDataURL());
+}
+
+function decode() {
+    var c = Ox.canvas(img), bits = "", str = "", i = 0; len = 4, flag = false;
+    do {
+        bits += xor(c.data[parseInt(i * 4/3)]);
+        if (++i % 8 == 0) {
+            str += Ox.char(parseInt(bits, 2));
+            bits = "";
+            len--;
+            if (len == 0 && !flag) {
+                if ((len = Ox.decodeBase256(str)) >
+                        maxLength(img.width, img.height)) {
+                    throwPNGError();
+                }
+                str = "";
+                flag = true;
+            }
+        }
+    } while (len);
+    try {
+        return Ox.decodeUTF8(str);
+    } catch(e) {
+        throwPNGError();
+    }
+}
+
+function throwError() {
+    throw new RangeError("PNG codec can't decode image");
+}

demos/geo/geo.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <style>
+            body {
+                margin: 0;
+                overflow: hidden;
+                -moz-user-select: none;
+                -webkit-user-select: none;
+            }
+            .map {
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                width: 1024px;
+                height: 640px;
+                margin: auto;
+            }
+            .flag {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                margin-left: -4px;
+                margin-top: -4px;
+                -moz-border-radius: 1px;
+                -webkit-border-radius: 1px;
+                -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
+            }
+            .flag.hover,
+            .flag:hover {
+                width: 16px;
+                height: 15px;
+                margin-left: -8px;
+                margin-top: -8px;
+                -moz-border-radius: 2px;
+                -webkit-border-radius: 2px;
+                -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
+                z-index: 1000;
+            }
+        </style>
+        <script src="../../build/js/jquery-1.3.2.js"></script>
+        <script src="../../build/js/ox.js"></script>
+        <script src="../../build/js/ox.data.js"></script>
+        <script src="../../build/js/ox.geo.js"></script>
+        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script>
+            $(function() {
+                var $body = $("body"),
+                    places = Ox.getCountries(true);
+                var $map = $("<img/>")
+                    .attr({
+                        src: "map.png"
+                    })
+                    .addClass("map")
+                    .appendTo("body")
+                    .click(function(e) {
+                        var offset = $(this).offset(),
+                            left = offset.left,
+                            top = offset.top,
+                            width = $(this).width(),
+                            height = $(this).height(),
+                            latLng = Ox.getLatLng((e.clientX - left) / width, (e.clientY - top) / height);
+                        Ox.getPlacemarks(latLng.lat, latLng.lng, function(data) {
+                            var length = data.results.length;
+                            console.log(data)
+                            if (length && data.results[length - 1].types[0] == "country") {
+                                var $img = $("#" + data.results[length - 1].address_components[0].short_name);
+                                if (!$img.length) {
+                                    Ox.getPlacemarks(data.results[length - 1].formatted_address, function(data) {
+                                        if (data.results.length) {
+                                            var location = data.results[0].geometry.location,
+                                                xy = Ox.getXY(location.lat(), location.lng());
+                                            //console.log(+new Date, place.name, location, xy);
+                                            var $img = $("<img/>")
+                                                .attr({
+                                                    id: data.results[0].address_components[0].short_name,
+                                                    src: "../../tools/flags/png/square/" + data.results[0].address_components[0].short_name + ".png",
+                                                    title: data.results[0].formatted_address
+                                                })
+                                                .addClass("flag hover")
+                                                .css({
+                                                    left: left + (xy.x * width) + "px",
+                                                    top: top + (xy.y * height) + "px"
+                                                })
+                                                .mouseenter(function() {
+                                                    $(this).css({
+                                                        zIndex: Ox.uid()
+                                                    });
+                                                })
+                                                .dblclick(function() {
+                                                    $(this).remove();
+                                                })
+                                                .appendTo($body);
+                                            setTimeout(function() {
+                                                $img.removeClass("hover");
+                                            }, 1000);
+                                        } else {
+                                            //console.log("no results", place, data)
+                                        }
+                                    });
+                                } else {
+                                    $img.addClass("hover");
+                                    setTimeout(function() {
+                                        $img.removeClass("hover");
+                                    }, 1000);
+                                }
+                            }
+                        });
+                    });
+                // /*
+                var aliases = {
+                    "Ascension Island": "Ascension Island, Saint Helena",
+                    "England": "England, United Kingdom",
+                    "Georgia": "Georgia, Europe",
+                    "Holy See": "Vatican City",
+                    "Palestine": "West Bank",
+                    "Saint Martin": "Sint Maarten",
+                    "Scotland": "Scotland, United Kingdom",
+                    "Svalbard and Jan Mayen": "Svalbard",
+                    "Wales": "Wales, United Kingdom",
+                    "Yugoslavia": "Serbia"
+                };
+                var json = [];
+                setTimeout(function() {
+                    getPlacemarks(places);
+                }, 1000);
+                function getPlacemarks(places) {
+                    var place = places.shift();
+                    Ox.getPlacemarks(aliases[place.name] || place.name, function(data) {
+                        if (data.results.length) {
+                            var location = data.results[0].geometry.location,
+                                xy = Ox.getXY(location.lat(), location.lng()),
+                                offset = $map.offset(),
+                                left = offset.left,
+                                top = offset.top,
+                                width = $map.width(),
+                                height = $map.height();
+                            $("<img/>")
+                                .attr({
+                                    src: "../../tools/flags/png/square/" + (place.flag.indexOf("-") == 2 ? place.flag.substr(0, 2) + "/" : "") + place.flag + ".png",
+                                    title: place.code + " " + place.name
+                                })
+                                .addClass("flag")
+                                .css({
+                                    left: left + (xy.x * width) + "px",
+                                    top: top + (xy.y * height) + "px"
+                                })
+                                .mouseenter(function() {
+                                    $(this).css({
+                                        zIndex: Ox.uid()
+                                    });
+                                })
+                                .appendTo($body);
+                            d = {
+                                name: data.results[0].formatted_address,
+                                center: {
+                                    lat: data.results[0].geometry.viewport.getCenter().lat().toFixed(10),
+                                    lng: data.results[0].geometry.viewport.getCenter().lng().toFixed(10)
+                                },
+                                southWest: {
+                                    lat: data.results[0].geometry.viewport.getSouthWest().lat().toFixed(10),
+                                    lng: data.results[0].geometry.viewport.getSouthWest().lng().toFixed(10)
+                                },
+                                northEast: {
+                                    lat: data.results[0].geometry.viewport.getNorthEast().lat().toFixed(10),
+                                    lng: data.results[0].geometry.viewport.getNorthEast().lng().toFixed(10)
+                                }
+                            };
+                            console.log(JSON.stringify(d))
+                            json.push(d);
+                        } else {
+                            console.log("no results", place, data)
+                        }
+                    });
+                    if (places.length) {
+                        setTimeout(function() {
+                            getPlacemarks(places);
+                        }, 1000);
+                    }
+                }
+                $("body").append($("<div/>").html(JSON.stringify(json)));
+                // */
+            });
+        </script>
+    </head>
+    <body>
+    </body>
+</html>

demos/png/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <style>
+        </style>
+        <script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.js"></script>
+        <script type="text/javascript" src="ox.png.js"></script>
+        <script>
+            $(function() {
+                var png = new Ox.PNG("http://khm0.google.com/kh/v=46&x=0&y=0&z=0");
+                png.load(function() {
+                    console.log(png.getChunks());
+                    console.log(png.getSize());
+                    png.appendTo("body")
+                })
+            });
+        </script>
+    </head>
+    <body></body>
+</html>

demos/png/ox.png.js

@@ -0,0 +1,125 @@
+Ox = Ox || {};
+
+(function() {
+
+    Ox.PNG = function(url) {
+        var that = this,
+            self = {};
+        self.getCanvas = function() {
+            var canvas = $("<canvas/>")
+                    .attr({
+                        width: that.width,
+                        height: that.height
+                    })[0],
+                context = canvas.getContext("2d");
+            context.drawImage(self.$png[0], 0, 0);
+            return {
+                canvas: canvas,
+                context: context
+            };
+        };
+        self.getChunks = function() {
+            var data = self.getData().substr(8),
+                length, chunks = [];
+            while (data) {
+                length = data.charCodeAt(1) << 16 |
+                    data.charCodeAt(2) << 8 |
+                    data.charCodeAt(3);
+                chunks.push({
+                    length: length,
+                    type: data.substr(4, 4),
+                    data: data.substr(8, length),
+                    crc: data.substr(length + 8, 4)
+                });
+                data = data.substr(length + 12);
+            }
+            return chunks;
+        }
+        self.getData = function() {
+            return atob(self.getURL().split(",")[1]);
+        }
+        self.getDimensions = function() {
+            var dimensions;
+            self.$png
+                .hide()
+                .appendTo($("body"));
+            dimensions = {
+                width: self.$png.width(),
+                height: self.$png.height()
+            }
+            self.$png.remove();
+            return dimensions;
+        }
+        self.getHeader = function() {
+            return self.getData().substr(0, 8);
+        }
+        self.getURL = function() {
+            return that.canvas.toDataURL();
+        }
+        self.onLoad = function($png, callback) {
+            self.$png = $png;
+            var dimensions = self.getDimensions();
+            that.width = dimensions.width;
+            that.height = dimensions.height;
+            var canvas = self.getCanvas();
+            that.context = canvas.context;
+            that.canvas = canvas.canvas;
+            console.log(self.getChunks())
+            callback();
+        };
+        that.addChunk = function(options) {
+            options = $.extend({
+                data: "",
+                type: "",
+                position: -1
+            }, options);
+            var len = options.data.length,
+                randomType = !options.type,
+                chunks = self.getChunks();
+                chunk = {
+                    length: 0,
+                    type: options.type || "",
+                    data: options.data,
+                    crc: ""
+                },
+                data = "";
+                i;
+            //     0    1    2    3    4     ... length: 6
+            // IHDR IDAT IDAT IDAT ifOo IEND
+            options.position = options.position < 0 ?
+                Math.max(chunks.length - 1 - options.position, 0) : 
+                Math.min(options.position, chunks.length - 2);
+            for (i = 0; i < 4; i++) {
+                if (randomType) {
+                    // format abCd (ancillary, private, (reserved), safe-to-copy)
+                    chunk.type += String.fromCharCode((i == 2 ? 65 : 97) + Math.random() * 26);
+                }
+                chunk.length += String.fromCharCode(len >> ((3 - i) * 8) & 255);
+                chunk.crc += String.fromCharCode(Math.random() * 256);
+            }
+            chunks.splice(position + 1, 0, chunk);
+            // data = ...
+        }
+        that.appendTo = function(selector) {
+            $("<img/>")
+                .attr({
+                    src: self.getURL()
+                })
+                .appendTo(selector);
+        }
+        that.getSize = function() {
+            return self.getData().length;
+        }
+        that.load = function(callback) {
+            $("<img/>")
+                .attr({
+                    src: url
+                })
+                .load(function() {
+                    self.onLoad($(this), callback);
+                });
+        }
+        return that;
+    };
+
+})();

demos/test/index.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
+        <style>
+            input {
+                //float: left;
+                //margin: 4px 0 4px 0;
+            }
+            .top {
+                margin: 4px;
+                font-family: Monaco, Consolas;
+                font-size: 16px;
+                line-height: 16px;
+            }
+            .bottom {
+                margin: 7px;
+                font-family: Monaco, Consolas;
+                font-size: 10px;
+                line-height: 10px;
+            }
+            .margin {
+                float: left;
+                margin: 4px 2px 4px 2px;
+            }
+            .padding {
+                float: left;
+                margin: 4px 0 4px 0;
+                padding: 0 4px 0 4px;
+            }
+        </style>
+        <script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
+        <script>
+            $(function() {
+                var size = window.location.hash.substr(1) || "small",
+                    $body = $("body"),
+                    $toolbars = [];
+
+                var sidePanel = new Ox.Panel();
+                var mainPanel = new Ox.Panel().css({
+                    //borderLeft: "1px solid rgb(160, 160, 160)"
+                });
+                var middleSplitPanel = Ox.SplitPanel({
+                    elements: [
+                        {
+                            element: sidePanel,
+                            size: 256
+                        },
+                        {
+                            element: mainPanel
+                        }
+                    ],
+                    orientation: "horizontal"
+                })/*.css({
+                    borderTop: "1px solid rgb(160, 160, 160)",
+                    borderBottom: "1px solid rgb(160, 160, 160)"
+                })*/;
+
+                var topPanel = Ox.Toolbar({size: "small"})
+                    .css({
+                        zIndex: 2,
+                        MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
+                        WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
+                    })
+                    .append(
+                        $("<div/>")
+                            .addClass("top")
+                            .html("Ox.js")
+                    );
+                var bottomPanel = Ox.Toolbar({size: "small"})
+                    .css({
+                        zIndex: 2,
+                        MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
+                        WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
+                    })
+                    .append(
+                        $("<div/>")
+                            .addClass("bottom")
+                            .html("Ox.js - A JavaScript Library for Web Applications")
+                    );
+                var mainSplitPanel = Ox.SplitPanel({
+                    elements: [
+                        {
+                            element: topPanel,
+                            size: 24
+                        },
+                        {
+                            element: middleSplitPanel
+                        },
+                        {
+                            element: bottomPanel,
+                            size: 24
+                        }
+                    ],
+                    orientation: "vertical"
+                }).appendTo($body);
+
+                var oxjsPanel = new Ox.CollapsePanel({
+                    title: "ox.js"
+                }).appendTo(sidePanel);
+                oxjsPanel.$content.html("Core<br/>Array/Object<br/>Color<br/>Date<br/>Format<br/>Math<br/>String<br/>Type").click(function() {$(this).append("<div>foo</div>")})
+                var oxdatajsPanel = new Ox.CollapsePanel({
+                    title: "ox.data.js"
+                }).appendTo(sidePanel);
+                oxdatajsPanel.$content.html("HTML<br/>ISO<br/>Unicode")
+                var oxuijsPanel = new Ox.CollapsePanel({
+                    title: "ox.ui.js"
+                }).appendTo(sidePanel);
+                oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")
+
+                $tabbar = Ox.Tabbar({
+                    values: ["Documentation", "Demo", "Source Code"]
+                }).appendTo(mainPanel);
+
+                for (var i = 0; i < 5; i++) {
+                    $toolbars[i] = Ox.Toolbar({size: i ? "small" : "medium"}).appendTo(mainPanel);
+                }
+                $toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
+
+                Ox.Button({
+                    size: "medium",
+                    type: "text",
+                    value: "Switch Theme"
+                }).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
+                Ox.Button({
+                    size: size,
+                    type: "text",
+                    value: "Button"
+                }).addClass("margin").appendTo($toolbars[1]);
+                ///*
+                Ox.Button({
+                    size: "xsmall",
+                    type: "text",
+                    value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
+                }).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
+                //*/
+                Ox.Button({
+                    selectable: true,
+                    size: size,
+                    type: "text",
+                    value: "Button, selectable=true"
+                }).addClass("margin").appendTo($toolbars[1]);
+                Ox.ButtonGroup({
+                    values: ["Button Group (0)", "Button Group (1)", "Button Group (2)"]
+                }).addClass("padding").appendTo($toolbars[1]);
+                $.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
+                    Ox.Button({
+                            size: size,
+                            type: "image",
+                            value: v
+                        })
+                        .addClass("margin")
+                        .mousedown(function() {
+                            clickButton($(this).val())
+                        })
+                        .appendTo($toolbars[2]);
+                });
+                ///*
+                Ox.Button({
+                    size: size,
+                    type: "text",
+                    value: "Enabled"
+                }).addClass("margin").appendTo($toolbars[2]);
+                Ox.Button({
+                    disabled: true,
+                    size: size,
+                    type: "text",
+                    value: "Disabled"
+                }).addClass("margin").appendTo($toolbars[2]);
+                //*/
+                Ox.ButtonGroup({
+                    selectable: true,
+                    selected: 0,
+                    size: "small",
+                    type: "image",
+                    values: ["close", "add", "remove"]
+                }).addClass("padding").appendTo($toolbars[2]);
+                ///*
+                Ox.Input({
+                    placeholder: "Placeholder",
+                    size: size
+                }).addClass("margin").appendTo($toolbars[3]);
+                var range = Ox.Range({
+                    max: 10,
+                    min: 0,
+                    size: 200,
+                    step: 0.1,
+                    value: 0
+                }).addClass("margin").appendTo($toolbars[4])
+                var input = Ox.Input({
+                        value: 0
+                    })
+                    .addClass("margin")
+                    .css({
+                        width: "32px"
+                    })
+                    .subscribe("change." + range.id, update)
+                    .appendTo($toolbars[4]);
+                function update() {
+                    //console.log("update", range.options("value"))
+                    /*
+                    // fixme: make this work
+                    input.options({
+                        value: range.options("value")
+                    });
+                    */
+                    input.val(range.options("value").toFixed(1))
+                }
+                //console.log("binding to OxRange" + range.id + "Change")
+                Ox.Range({
+                    animate: true,
+                    arrows: true,
+                    max: 300,
+                    min: 100,
+                    size: 202,
+                    step: 100,
+                    thumbValue: true,
+                    trackImages: ["png/r.png", "png/g.png", "png/b.png"],
+                    value: 100
+                }).addClass("margin").appendTo($toolbars[4])
+                Ox.Button({
+                    selectable: true,
+                    size: size,
+                    type: "text",
+                    value: "Foo"
+                }).addClass("margin").appendTo(mainPanel);
+                //*/
+                function switchTheme() {
+                    if (Ox.theme() == "classic") {
+                        Ox.theme("modern");
+                    } else {
+                        Ox.theme("classic");
+                    }
+                }
+                function clickButton(val) {
+                   // console.log(val);
+                }
+            });
+        </script>
+    </head>
+    <body></body>
+</html>

demos/test/test.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="test.js"></script>
+    </head>
+    <body>
+    </body>
+</html>

demos/test/test.js

@@ -0,0 +1,232 @@
+/*
+    ox.js
+*/
+Ox = {
+    version: "0.1.2"
+};
+(function() {
+    var _ = {
+        uid: 0
+    };
+    Ox.makeObject = function() {
+        /*
+        >>> Ox.makeObject("foo", "bar").foo
+        bar
+        >>> Ox.makeObject({foo: "bar"}).foo
+        bar
+        */
+        var obj = {};
+        if (arguments.length == 1) {
+            obj = arguments[0];
+        } else {
+            obj[arguments[0]] = arguments[1]
+        }
+        return obj;
+    }
+    Ox.uid = function() {
+        /*
+            returns a unique id
+        */
+        return _.uid++;
+    }
+})();
+/*
+    ox.ui.js
+*/
+(function() {
+    var _ = {
+        elements: [],
+        jQueryFunctions: function() {
+            var functions = [],
+                $element = $("<div/>");
+            delete $element.length;
+            $.each($element, function(k, v) {
+                if (typeof v == "function") {
+                    functions.push(k);
+                }
+            });
+            return functions.sort();
+        }()
+    };
+    Ox.Widget = function(options, self) {
+
+        // construct
+        var self = self || {},
+            that = this;
+
+        // init
+       (function() {
+            if (typeof options == "string") {
+                options = {
+                    element: options
+                };
+            }
+            that.ox = Ox.version;
+            that.id = Ox.uid();
+            that.$element = $("<" + (options.element || "div") + "/>")
+                .data("ox", that.id);
+            _.elements[that.id] = that;
+            wrapjQuery();
+        })();
+
+        // private
+        function wrapjQuery() {
+            $.each(_.jQueryFunctions, function(i, v) {
+                that[v] = function() {
+                    var args = arguments,
+                        length = args.length,
+                        id, ret;
+                    $.each(args, function(i, v) {
+                        // if an ox object was passed
+                        // then pass its $element instead
+                        // so we can do jqObj.jqFn(oxObj)
+                        if (v.ox) {
+                            args[i] = v.$element;
+                        }
+                    });
+                    // why does this not work?
+                    // ret = that.$element[v].apply(this, arguments);
+                    if (length == 0) {
+                        ret = that.$element[v]();
+                    } else if (length == 1) {
+                        ret = that.$element[v](args[0]);
+                    } else if (length == 2) {
+                        ret = that.$element[v](args[0], args[1]);
+                    } else if (length == 3) {
+                        ret = that.$element[v](args[0], args[1], args[2]);
+                    } else if (length == 4) {
+                        ret = that.$element[v](args[0], args[1], args[2], args[3]);
+                    }
+                    // if the $element of an ox object was returned
+                    // then return the ox object instead
+                    // so we can do oxObj.jqFn().oxFn()
+                    return ret.jquery && oxui.elements[id = ret.data("ox")] ?
+                        oxui.elements[id] : ret;
+                }
+            });
+        }
+
+        // shared
+        self.onChange = function() {
+            /*
+                self.onChange(option, value)
+                is called when an option changes
+                to be implemented by widget
+            */
+        };
+
+        // public
+        that.defaults = function(defaults) {
+            /*
+                that.defaults({foo: x})         sets self.defaults
+            */
+            self.defaults = defaults;
+            return that;
+        }
+        that.options = function() {
+            /*
+                that.options()                  returns self.options
+                that.options("foo")             returns self.options.foo
+                that.options("foo", x)          sets self.options.foo,
+                                                returns that
+                that.options({foo: x, bar: y})  sets self.options.foo
+                                                and self.options.bar,
+                                                returns that
+            */
+            var length = arguments.length,
+                args, ret;
+            if (length == 0) {
+                // options()
+                ret = self.options;
+            } else if (length == 1 && typeof arguments[0] == "string") {
+                // options(str)
+                ret = self.options[arguments[0]]
+            } else {
+                // options (str, val) or options({str: val, ...})
+                // translate (str, val) to ({str: val})
+                args = Ox.makeObject.apply(that, arguments);
+                // if options have not been set, extend defaults,
+                // otherwise, extend options
+                self.options = $.extend(
+                    self.options || self.defaults, args);
+                $.each(args, function(k, v) {
+                    self.onChange(k, v);
+                });
+                ret = that;                            
+            }
+            return ret;
+        }
+
+        // return
+        return that;
+
+    }
+    /*
+        Widget Design Pattern
+
+        Ox.MyWidget = function(options, self) {
+
+            // construct
+            var self = self || {},
+                that = new Ox.Widget({...}, self)
+                    .defaults({...})
+                    .options(options || {});
+
+            // init, wrapped in function so it can be collapsed
+            (function() {...})();
+
+            // private, can be called from init
+            function foo() {...}
+
+            // private, shared
+            self.onChange = function(option, value) {...}
+            self.foo = function() {...}
+
+            // public
+            that.foo = function() {...}
+
+            // return
+            return that;
+
+        }
+    */
+    Ox.Foo = function(options, self) {
+        var self = self || {},
+            that = new Ox.Widget({
+                    element: "div"
+                }, self)
+                .defaults({
+                    foo: "bar"
+                })
+                .options(options || {});
+        (function() {
+            self.time = Date.now();
+        })();
+        self.onChange = function(option, value) {
+            if (option == "foo") {
+                console.log("foo set to", value);
+            }
+        }
+        that.getTime = function() {
+            return self.time;
+        }
+        return that;
+    }
+    Ox.Bar = function(options, self) {
+        var self = self || {},
+            that = Ox.Foo({
+                    foo: "baz"
+                }, self)
+                .defaults({
+                    bar: "xyz"
+                })
+                .options(options || {}),
+        (function() {
+            self.time = 0;
+        })();
+        that.bar = function() {
+            console.log("Bar.bar()");
+        }
+        return that;
+    }
+})();

tests/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Ox.js Tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link rel="stylesheet" type="text/css" href="../build/css/ox.ui.css"/>
+        <link rel="stylesheet" type="text/css" href="tests.css"/>
+        <script type="text/javascript" src="../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../build/js/ox.js"></script>
+        <script type="text/javascript" src="../build/js/ox.data.js"></script>
+        <script type="text/javascript" src="../build/js/ox.ui.js"></script>
+        <script type="text/javascript" src="tests.js"></script>
+    </head>
+    <body>
+    </body>
+</html>

tests/png.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Ox.js PNG Test</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <style>
+            div {
+                font-family: Consolas;
+                font-size: 12px;
+            }
+        </style>
+        <script type="text/javascript" src="../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../build/js/ox.js"></script>
+        <script>
+            $(function() {
+                var $body = $("body"),
+                    src = "http://khm0.google.com/kh/v=46&x=0&y=0&z=0",
+                    //src = "http://www.google.com/intl/en_ALL/images/logo.gif",
+                    //src = "http://www.google.com/favicon.ico",
+                    //src = "http://images.apple.com/global/nav/images/globalnavbg.png",
+                    //src = "http://a1.twimg.com/a/1257210731/images/logo.png",
+                    //src = "http://l.yimg.com/g/images/logo_home.png",
+                    //src = "http://www.libpng.org/pub/png/img_png/png-9passes.png"
+                    //src = "http://www.libpng.org/pub/png/img_png/libpng-88x31.png"
+                    //str = "¥€$",
+                    str = "H€₤₤O ₩OR₤D"
+                    ;
+                $.get("http://google.com", function(data) {
+                    var str = data; //data.substr(0, 2048);
+                    $("<img/>")
+                        .attr({
+                            src: src
+                        })
+                        .load(function() {
+                            var that = this;
+                            Ox.print("encoding");
+                            $("<img/>")
+                                .attr({
+                                    src: Ox.encodePNG(that, str)
+                                })
+                                .load(function() {
+                                    Ox.print("decoding");
+                                    $("<div/>")
+                                        .html("[decoding original, should throw an error] " + (function() {
+                                            var ret;
+                                            try {
+                                                ret = Ox.decodePNG(that);
+                                                ret = "[" + ret.length + " bytes] " + Ox.encodeHTML(ret);
+                                            } catch (e) {
+                                                ret = e.toString()
+                                            }
+                                            return ret;
+                                        })() + "<br/>[decoding encoded, should return a string] " + Ox.encodeHTML(Ox.decodePNG(this)))
+                                        .prependTo($body);
+                                })
+                                .appendTo($body);
+                        });
+                });
+            });
+        </script>
+    </head>
+    <body></body>
+</html>

tests/tests.css

@@ -0,0 +1,12 @@
+div {
+    font-family: Consolas;
+    font-size: 12px;
+}
+
+.success {
+    color: rgb(0, 128, 0);
+}
+
+.failure {
+    color: rgb(192, 0, 0);
+}

tests/tests.js

@@ -0,0 +1,120 @@
+$(function() {
+
+    var $body = $("body")
+            .css({
+                overflowY: "auto"
+            }),
+        $tests = new Ox.Bar({
+                size: 20
+            })
+            .css({
+                padding: "6px 0 6px 8px",
+                fontSize: "16px",
+                fontWeight: "bold"
+            })
+            .appendTo($("body"));
+        colors = [
+            ["255, 64, 64", "224, 32, 32", "240, 16, 16"],
+            ["64, 192, 64", "32, 160, 32", "40, 176, 48"],
+            ["96, 96, 255", "64, 64, 224", "80, 80, 240"]
+        ],
+        gradients = [
+            "-moz-linear-gradient(", 
+            "-webkit-gradient(linear, "
+        ];
+    setBackground($tests, true);
+
+    tests("../build/js/ox.js", "../build/js/ox.data.js");
+
+    function tests() {
+        var succeeded = 0, failed = 0,
+            lines, spaces, command, expected, result, success,
+            replace = ["", ""], fns = [], $test
+        $.each($.isArray(arguments[0]) ? arguments[0] : arguments, function(i, script) {
+            $.get(script, function(data) {
+                Ox.Bar({size: 17})
+                    .css({padding: "3px 0 0 8px"})
+                    .html(Ox.basename(script))
+                    .appendTo($body);
+                lines = data.split("\n");
+                $.each(lines, function(l, line) {
+                    if (line.indexOf("/*") > -1 && lines[l + 1].indexOf("====") > -1) {
+                        Ox.Bar({size: 17})
+                            .css({padding: "3px 0 0 24px"})
+                            .html($.trim(lines[l + 2]))
+                            .appendTo($body);
+                        //setBackground(x, 2)
+                    }
+                    spaces = line.indexOf(">>> ");
+                    if (spaces > -1) {
+                        command = $.trim(line).substr(4).split(" // ")[0];
+                        fn = command.match(/Ox\.\w+/);
+                        expected = eval(lines[l + 1].substr(spaces, lines[l + 1].length));
+                        // fixme: if object, recursively check identity
+                        result = eval(command);
+                        if (fn) {
+                            fn = fn[0];
+                            success = typeof expected == "object" ?
+                                expected.toString() == result.toString() : expected === result;
+                            succeeded += success;
+                            failed += !success;
+                            $tests.html((succeeded + failed) + " tests, " +
+                                succeeded + " succeeded, " + failed + " failed");
+                            if (!success) {
+                                setBackground($tests, success);
+                            }
+                            if ($.inArray(fn, fns) == -1) {
+                                fns.push(fn);
+                                $test = Ox.CollapsePanel({
+                                        collapsed: true,
+                                        title: fn + "()"
+                                    })
+                                    .appendTo($body);
+                                setBackground($test.find(".OxBar"), true);
+                            }
+                            ///*
+                            Ox.Bar({size:17}) // fixme: Ox.Object() used to work
+                                .css({
+                                    //padding: "2px 0 2px 8px",
+                                    background: "rgb(" + colors[+success][2] + ")"
+                                })
+                                .html(
+                                    Ox.basename(script) + ", line " + l + ": <span style=\"font-weight: bold\">" +
+                                    Ox.encodeHTML(command).replace(replace[0], replace[1]) + " " +
+                                    (success ? "=" : "!") + "=&gt; " + Ox.encodeHTML(expected.toString()) +
+                                    (success ? "" : " ==&gt; " + Ox.encodeHTML(result.toString())) + "</span>"
+                                )
+                                .appendTo($test.$content);
+                            //*/
+                            // to be fixed in ui:
+                            // /*
+                            $test.$content
+                                .css({
+                                    marginTop: -$test.$content.height() + "px"
+                                });
+                            //*/
+                            // /*
+                            if (!success) {
+                                setBackground($test.find(".OxBar"), success);
+                            }
+                            //*/
+                        } else {
+                            replace = command.split(" = ")
+                        }
+                    }
+                });
+            });
+        });
+    }
+
+    function setBackground($element, success) {
+        $.each(gradients, function(i, v) {
+            $element.css({
+                background: v + "left top, left bottom, from(rgb(" +
+                    colors[+success][0] + ")), to(rgb(" +
+                    colors[+success][1] + ")))"
+            });
+        });
+    }
+
+});

tools/areas/areas.js

@@ -0,0 +1,32 @@
+/*
+    http://download.geonames.org/export/dump/admin1Codes.txt
+*/
+
+$(function() {
+    var $body = $("body")
+        .css({
+            fontFamily: "Consolas",
+            fontSize: "12px"
+        });
+    $.get("admin1Codes.txt", function(data) {
+        var lines = data.split("\n"),
+            countries = {};
+        lines.pop();
+        $.each(lines, function(i, v) {
+            var split = v.split("\t"),
+                code = split[0].split(".");
+            if (!countries[code[0]]) {
+                countries[code[0]] = [];
+            }
+            countries[code[0]].push([code[1], split[1]])
+        });
+        console.log(countries);
+        $body.html(
+            $.map(Ox.keys(countries), function(v) {
+                return v + ": [<br/>" + Ox.repeat("&nbsp;", 4) + "[" + $.map(countries[v], function(v) {
+                    return '"' + v.join('", "') + '"';
+                }).join("],<br/>" + Ox.repeat("&nbsp;", 4) + "[") + "]";
+            }).join("<br/>],<br/>") + "<br/>]"
+        );
+    });
+});

tools/areas/index.html

@@ -0,0 +1,9 @@
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+        <script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../../build/js/Ox.js"></script>
+        <script type="text/javascript" src="areas.js"></script>
+    </head>
+    <body></body>
+</html>

tools/geo/ISO 3166-2/GB.json

@@ -0,0 +1,6 @@
+{
+    ENG: "England",
+    NIR: "Northern Ireland",
+    SCT: "Scotland",
+    WLS: "Wales"
+}

tools/geo/index.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <style>
+            body {
+                margin: 0;
+                overflow: hidden;
+            }
+            #map {
+                width: 100%;
+                height: 100%;
+            }
+            #data {
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                height: 100px;
+                padding: 0;
+                border: 0;
+                background: rgba(0, 0, 0, 0.5);
+                font-family: Consolas;
+                font-size: 8px;
+                color: rgb(255, 255, 255);
+                overflow: auto;
+                z-index: 1000;
+            }
+            #data:focus {
+                outline: none;
+            }
+            .flag {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                margin-left: -4px;
+                margin-top: -4px;
+                -moz-border-radius: 1px;
+                -webkit-border-radius: 1px;
+                -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
+                -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
+            }
+            .flag:hover {
+                width: 16px;
+                height: 16px;
+                margin-left: -8px;
+                margin-top: -8px;
+                opacity: 0.5;
+                -moz-border-radius: 2px;
+                -webkit-border-radius: 2px;
+                -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
+                -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
+            }
+            .rect {
+                position: absolute;
+                border: 1px solid rgb(255, 255, 255);
+                z-index: 1;
+                -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
+                -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
+            }
+        </style>
+        <script src="../../build/js/jquery-1.3.2.js"></script>
+        <script src="../../build/js/ox.js"></script>
+        <script src="../../build/js/ox.data.js"></script>
+        <script src="../../build/js/ox.geo.js"></script>
+        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script>
+            $(function() {
+                var $body = $("body"),
+                    $map = $("<img/>")
+                        .attr({
+                            id: "map",
+                            src: "map.png"
+                        })
+                        .appendTo($body),
+                    $data = $("<textarea/>")
+                        .attr({
+                            id: "data"
+                        })
+                        .appendTo($body),
+                    aliases = {
+                        "Ascension Island": "Ascension Island, Saint Helena",
+                        "England": "England, United Kingdom",
+                        "Georgia": "Georgia, Europe",
+                        "Holy See": "Vatican City",
+                        // "Palestine": ["West Bank", "Gaza Strip"],
+                        "Palestine": "West Bank",
+                        "Saint Martin": "Sint Maarten",
+                        "Scotland": "Scotland, United Kingdom",
+                        "Svalbard and Jan Mayen": "Svalbard",
+                        "Wales": "Wales, United Kingdom",
+                        "Yugoslavia": "Serbia"
+                    },
+                    json = {};
+                ///*
+                $.getJSON("geo.json", function(data) {
+                    json = data;
+                    getPlacemarks($.map(Ox.getCountries(true), function(v) {
+                        return v.code.length == 2 ? v : null;
+                    }));
+                });
+                //*/
+                /*
+                getPlacemarks($.map(Ox.getCountries(true), function(v) {
+                    return v.code.length == 2 ? v : null;
+                }));
+                */
+                function getPlacemarks(countries) {
+                    var country = countries.shift();
+                    if (!(country.code in json)) {
+                        console.log(country);
+                        Ox.getPlacemarks(aliases[country.name] || country.name, function(geodata) {
+                            if (!geodata.results) {
+                                console.log(country.name, geodata.status);
+                            }
+                            geodata = geodata.results[0];
+                            data = {
+                                address: aliases[country.name] || country.name,
+                                geocode: {
+                                    address_components: geodata.address_components,
+                                    formatted_address: geodata.formatted_address,
+                                    geometry: {
+                                        location: {},
+                                        location_type: geodata.geometry.location_type
+                                    },
+                                    types: geodata.types
+                                },
+                                name: country.name,
+                                time: +new Date()
+                            };
+                            $.each(["lat", "lng"], function(i, crd) {
+                                data.geocode.geometry.location[crd] = parseFloat(
+                                    geodata.geometry.location[crd]().toFixed(8)
+                                );
+                            });
+                            $.each(["bounds", "viewport"], function(i, obj) {
+                                if (obj in geodata.geometry) {
+                                    data.geocode.geometry[obj] = {};
+                                    $.each(["center", "southWest", "northEast"], function(i, pnt) {
+                                        data.geocode.geometry[obj][pnt] = {};
+                                        $.each(["lat", "lng"], function(i, crd) {
+                                            data.geocode.geometry[obj][pnt][crd] = parseFloat(
+                                                geodata.geometry[obj][
+                                                    "get" + pnt[0].toUpperCase() + pnt.substr(1)
+                                                ]()[crd]().toFixed(8)
+                                            );
+                                        });
+                                    });
+                                }
+                            });
+                            json[country.code] = data;
+                            addFlag(country, json[country.code]);
+                            addData(json)
+                            if (country.name != geodata.formatted_address) {
+                                console.log(country.name, geodata.formatted_address, geodata);
+                            }
+                            if (countries.length) {
+                                setTimeout(function() {
+                                    getPlacemarks(countries);
+                                }, 1000);
+                            }
+                        });
+                    } else {
+                        addFlag(country, json[country.code]);
+                        addData(json);
+                        if (countries.length) {
+                            setTimeout(function() {
+                                getPlacemarks(countries);
+                            }, 100);
+                        }
+                    }
+                }
+                function addData(json) {
+                    //var scroll = $data[0].scrollTop == $data[0].scrollHeight;
+                    $data.html(
+                        JSON.stringify(json, null, 4)
+                    );
+                    /*
+                    if (scroll) {
+                        $data[0].scrollTop = $data[0].scrollHeight;
+                    }
+                    */
+                }
+                function addFlag(country, data) {
+                    var location = Ox.getXY(data.geocode.geometry.location.lat, data.geocode.geometry.location.lng),
+                        bounds = "bounds" in data.geocode.geometry ? data.geocode.geometry.bounds : data.geocode.geometry.viewport,
+                        southWest = Ox.getXY(bounds.southWest.lat, bounds.southWest.lng),
+                        northEast = Ox.getXY(bounds.northEast.lat, bounds.northEast.lng),
+                        crossesDateline = southWest.x > northEast.x,
+                        $div = [];
+                    if (crossesDateline) {
+                        $div = [
+                            $("<div/>")
+                                .addClass("rect")
+                                .css({
+                                    left: "-16px",
+                                    top: ($map.height() * northEast.y) + "px",
+                                    right: ($map.width() - $map.width() * northEast.x) + "px",
+                                    bottom: ($map.height() - $map.height() * southWest.y) + "px",
+                                })
+                                .hide()
+                                .appendTo($body),
+                            $("<div/>")
+                                .addClass("rect")
+                                .css({
+                                    left: ($map.width() * southWest.x) + "px",
+                                    top: ($map.height() * northEast.y) + "px",
+                                    right: "-16px",
+                                    bottom: ($map.height() - $map.height() * southWest.y) + "px",
+                                })
+                                .hide()
+                                .appendTo($body),
+
+                        ];
+                    } else {
+                        $div = [
+                            $("<div/>")
+                                .addClass("rect")
+                                .css({
+                                    left: ($map.width() * southWest.x) + "px",
+                                    top: ($map.height() * northEast.y) + "px",
+                                    right: ($map.width() - $map.width() * northEast.x) + "px",
+                                    bottom: ($map.height() - $map.height() * southWest.y) + "px",
+                                })
+                                .hide()
+                                .appendTo($body)
+                        ];
+                    }
+                    $("<img/>")
+                        .attr({
+                            src: "../../tools/flags/png/16/" + (country.flag.indexOf("-") == 2 ?
+                                    country.flag.substr(0, 2) + "/" : "") + country.flag + ".png",
+                            title: country.name + " ((" + bounds.southWest.lat + ", " + bounds.southWest.lng + "), (" + bounds.northEast.lat + ", " + bounds.northEast.lng + "))"
+                        })
+                        .addClass("flag")
+                        .css({
+                            left: (location.x * 100) + "%",
+                            top: (location.y * 100) + "%"
+                        })
+                        .mouseenter(function() {
+                            $(this).css({
+                                zIndex: Ox.uid()
+                            });
+                            $.each($div, function() {
+                                $(this).show();
+                            });
+                        })
+                        .mouseleave(function() {
+                            $.each($div, function() {
+                                $(this).hide();
+                            });
+                        })
+                        .appendTo($body);
+                    window.status = Ox.length(json) + " " + data.address;
+                }
+            });
+        </script>
+    </head>
+    <body></body>
+</html>

tools/unicode/charts.css

@@ -0,0 +1,58 @@
+table       { border-spacing: 0; border-collapse: collapse;
+                    border-style: solid; border-color: black; border-width: 1px;                    }
+th, td      { border-spacing: 0; 
+                border-style: solid; border-color: teal; border-width: 1px;
+                    color: black; vertical-align: top; }
+td          { font-size: 120%; text-align: Center; vertical-align: top; width: 48px }
+
+table.headerTable {
+  border-color: white;
+  border-width: 0px;
+  font-size: 120%;
+  width: 100%;
+}
+td.headerLeft {
+  border-color: white;
+  border-width: 0px;
+  text-align: left;
+  font-size: 120%;
+}
+td.headerCenter {
+  border-color: white;
+  border-width: 0px;
+  text-align: center;
+  font-size: 120%;
+}
+td.headerRight {
+  border-color: white;
+  border-width: 0px;
+  text-align: right;
+  font-size: 120%;
+}
+
+td.new, td.cellwnew, td.cellnew {
+    background-color: #FFFFCC;
+}
+
+chart {background-color: red;}
+
+td.p		{ color: #000000; background-color: #7777FF }
+td.s		{ color: #000000; background-color: #BBBBFF }
+td.t		{ color: #000000; background-color: #DDDDFF }
+td.q		{ color: #000000; background-color: #FFFFFF }
+td.ep		{ color: #000000; background-color: #FF5555 }
+td.es		{ color: #000000; background-color: #FF7777 }
+td.et		{ color: #000000; background-color: #FF9999 }
+td.eq		{ color: #000000; background-color: #FFBBBB }
+th			{ vertical-align: top; font-weight: bold }
+th.x		{ vertical-align: top; font-weight: regular; text-align: Left }
+tt			{ font-size: 50% }
+
+td.name	{ text-align: left; vertical-align: middle; width: 96% }
+body		{ background-color: #FFFFFF; }
+
+td.g		{ font-size: 120%; text-align: Center; width: 72px; color: #808080; }
+td.n		{ font-size: 120%; text-align: Center; width: 72px; color: #000000; background-color: #CCCCFF; } 
+td.z		{ font-size: 120%; text-align: Center; width: 72px; font-weight: bold; background-color: #EEEEEE; }
+td.h		{ font-size: 120%; text-align: Left; color: #000000; background-color: #EEEEEE; } 
+

tools/unicode/index.html

@@ -0,0 +1,9 @@
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+        <script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.js"></script>
+        <script type="text/javascript" src="unicode.js"></script>
+    </head>
+    <body></body>
+</html>

tools/unicode/unicode.js

@@ -0,0 +1,84 @@
+/*
+    http://unicode.org/charts/collation/chart_Latin.html
+*/
+
+$(function() {
+    var $body = $("body"),
+        latin = [];
+    $.each("ABCDEFGHIJKLMNOPQRSTUVWXYZ", function(i, v) {
+        latin.push(v);
+    });
+    $.each(["AE", "DZ", "NJ", "OE", "SZ"], function(i, v) {
+        latin.push(v);
+    });
+    var unicode = {};
+    $.each(latin, function(i, v) {
+        unicode[v] = [];
+    });
+    $.each(latin, function(i, v) {
+        unicode[v.toLowerCase()] = [];
+    });
+    $.get("chart_Latin.html", function(data) {
+        data = "<table>" + data.split("<table>")[1].split("</table>")[0] + "</table>";
+        $("body").append(data);
+        $("td").each(function() {
+            var $this = $(this);
+            var title = $this.attr('title').split(":")[0].replace("SHARP S", "SZ");
+            var words = title.split(" ");
+            if (title.substr(-2, 1) != " "
+                    && words[0] == "LATIN"
+                    && $.inArray(words[1], ["CAPITAL", "SMALL"]) > -1
+                    && $.inArray(words[2], ["LETTER", "LIGATURE"]) > -1
+                    && $.inArray(words[3], latin) > -1) {
+                var character = words[1] == "CAPITAL" ? words[3] : words[3].toLowerCase();
+                unicode[character].push({
+                    character: "\\u" + $(this).children().eq(1).html(),
+                    comment: title.replace("SZ", "SHARP S")
+                });
+            }
+        });
+        $body.empty();
+        $.each(unicode, function(k, v) {
+            unicode[k].sort(function(a, b) {
+                a = a.character.substr(2);
+                b = b.character.substr(2);
+                return (a < b) * -1 + (a > b);
+            });
+        });
+        $div = $("<div/>")
+            .css({
+                fontFamily: "Consolas",
+                fontSize: "12px"
+            })
+            .html(
+                $.map(Ox.keys(unicode), function(v) {
+                    return v + ": [<br/>" + Ox.repeat("&nbsp;", 4) + $.map(unicode[v], function(v_, i) {
+                        return '"' + v_.character + '"' + (i < unicode[v].length - 1 ? "," : "&nbsp;") + " // " + v_.comment;
+                    }).join("<br/>" + Ox.repeat("&nbsp;", 4));
+                }).join("<br/>],<br/>") + "<br/>]"
+            )
+            .appendTo($body);
+        /*
+        $.each(unicode, function(k, v) {
+            $div.append(k + ": [<br/>");
+            var length = v.length;
+            $.each(v, function(i, v_) {
+                $div.append("&nbsp; &nbsp; \"" + v_.character + "\"" + (i < v.length - 1 ? "," : "&nbsp;") + " // " + v_.comment + "<br/>")
+            });
+            $div.append("]" + (k != 'sz' ? "," : "") + "<br/>");
+        });
+        */
+        $div = $("<div/>").css({
+            fontFamily: "Lucida Grande",
+            fontSize: "24px"
+        }).appendTo($body);
+        $.each(unicode, function(k, v) {
+            $div.append(k + ": ");
+            $.each(v, function(i, v_) {
+                console.log(v_)
+                $div.append("<span title=\"" + v_.comment + "\">&#x" + v_.character.substr(2) + ";</span>");
+            });
+            $div.append("<br/>");
+        });
+    });
+});

tools/unicode2/index.html

@@ -0,0 +1,16 @@
+<html>
+    <head>
+        <title>Oxjs Tools - Unicode</title>
+        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
+        <style>
+            body {
+                font-family: Consolas;
+                font-size: 12px;
+            }
+        </style>
+        <script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.js"></script>
+        <script type="text/javascript" src="unicode.js"></script>
+    </head>
+    <body></body>
+</html>

tools/unicode2/unicode.js

@@ -0,0 +1,38 @@
+getNames();
+
+function getNames() {
+    var //url = "http://unicode.org/Public/UNIDATA/NamesList.txt",
+        url = "NamesList.txt";
+    $.get(url, function(data) {
+        data = data.replace(/<control>\n\t=/g, "<control>");
+        var names = {}, json = "", split = [];
+        $.each(data.replace(/\n/g, "\n\n").match(/\n[0-9A-F]{4}\t.+\n/g), function(i, v) {
+            names["0x" + v.substr(1, 4)] = v.substr(6, v.length - 7);
+        });
+        json = JSON.stringify(names, null, 4)
+        $.each(data.match(/\n@@\t[0-9A-F]{4}\t.+\n/g), function(i, v) {
+            split = v.split("\t");
+            split[1] = "0x" + split[1];
+            xx = 0
+            while (split[1] in names == false && xx < 10) {
+                console.log(split[2],split[1])
+                split[1] = inc(split[1]);
+                xx++;
+            }
+            json = json.replace("\"" + split[1], "// " + split[2] + "\n    \"" + split[1])
+        });
+        json = json
+            .replace(/    /g, "&nbsp;&nbsp;&nbsp;&nbsp;")
+            .replace(/\"0x/g, "0x")
+            .replace(/\":/g, ":")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/\n/g, "<br/>");
+        $("body").html(json);
+    });
+}
+
+function inc(str) {
+    str = (parseInt(str, 16) + 1).toString(16).toUpperCase();
+    return "0x" + new Array(5 - str.length).join("0") + str;
+}