merging changes

build/css/ox.ui.classic.css

@@ -58,60 +58,82 @@ Forms
 */
 
 .OxThemeClassic .OxButton,
-.OxThemeClassic .OxInput,
+.OxThemeClassic input.OxCheckbox,
+.OxThemeClassic input.OxInput,
 .OxThemeClassic .OxLabel,
-.OxThemeClassic .OxRange,
 .OxThemeClassic .OxTrack {
     border: 1px solid rgb(176, 176, 176);
     //border: 1px solid rgb(160, 160, 160);
     color: rgb(64, 64, 64);
 }
+.OxThemeClassic .OxSelect {
+    border: 1px solid rgb(176, 176, 176);
+}
+.OxThemeClassic .OxSelect > .OxTitle {
+    color: rgb(64, 64, 64);
+}
 .OxThemeClassic .OxInputLabel {
     color: rgb(64, 64, 64);
 }
 .OxThemeClassic .OxButton,
 .OxThemeClassic div.OxInput,
-.OxThemeClassic .OxRange {
+.OxThemeClassic .OxSelect {
     //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(top, rgb(224, 224, 224), rgb(192, 192, 192));
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
 }
-.OxThemeClassic .OxButton:focus {
+.OxThemeClassic .OxButton:active {
-    -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-    -webkit-box-shadow: 0 2 4px rgb(128, 128, 128);
-}
-.OxThemeClassic .OxButton:active,
-.OxThemeClassic .OxRange.OxActive {
     //background: rgb(160, 160, 160);
     background: rgb(192, 192, 192);
     color: rgb(48, 48, 48);
 }
-.OxThemeClassic .OxButton.OxDisabled {
+.OxThemeClassic .OxCheckbox:active {
-    background: rgb(192, 192, 192);
+    background: -moz-linear-gradient(top, rgb(192, 192, 192), rgb(240, 240, 240));
-    color: rgb(128, 128, 128);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 192, 192)), to(rgb(240, 240, 240)));
 }
-.OxThemeClassic .OxButton.OxSelected {
+.OxThemeClassic .OxButton:focus {
-    //background: -moz-linear-gradient(left top, left bottom, from(rgb(128, 128, 128)), to(rgb(160, 160, 160)));
+    -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
-    //background: -webkit-gradient(linear, left top, left bottom, from(rgb(128, 128, 128)), to(rgb(160, 160, 160)));
+    -webkit-box-shadow: 0 2 4px rgb(128, 128, 128);
-    background: -moz-linear-gradient(top, rgb(128, 128, 128), rgb(160, 160, 160) 10%, 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)));
+.OxThemeClassic .OxButton.OxSelected,
+.OxThemeClassic .OxSelect.OxSelected {
+    background: -moz-linear-gradient(top, rgb(128, 128, 128), rgb(160, 160, 160));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(160, 160, 160)), to(rgb(192, 192, 192)));
+    //background: -moz-linear-gradient(top, rgb(128, 128, 128), rgb(160, 160, 160) 10%, 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 .OxButton.OxDisabled,
+.OxThemeClassic .OxLabel.OxDisabled {
+    color: rgb(128, 128, 128);
+}
+.OxThemeClassic .OxButton.OxDisabled {
+    background: rgb(192, 192, 192);
+}
+
+.OxThemeClassic input.OxCheckbox,
 .OxThemeClassic input.OxInput,
 .OxThemeClassic .OxTrack {
-    background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(255, 255, 255));
+    //background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(255, 255, 255));
-    background: -webkit-gradient(linear, 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)));
+    background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(255, 255, 255));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgb(208, 208, 208)), to(rgb(255, 255, 255)));
 }
 .OxThemeClassic .OxInput:focus {
-    border: 1px solid rgb(160, 160, 160);
+    //border: 1px solid rgb(160, 160, 160);
+    //-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
+    //-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
+}
+.OxThemeClassic div.OxInput.OxFocus {
     -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
     -webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
 }
+
 .OxThemeClassic .OxInput.OxPlaceholder {
     color: rgb(160, 160, 160)
 }
@@ -120,6 +142,13 @@ Forms
     background: rgb(208, 208, 208);
 }
 
+.OxThemeClassic input.OxCheckbox.OxDisabled,
+.OxThemeClassic input.OxInput:disabled {
+    background: rgb(224, 224, 224);
+}
+
+
+
 /*
 ================================================================================
 Lists
@@ -266,5 +295,5 @@ Scrollbars
 }
 .OxThemeClassic ::-webkit-scrollbar:active,
 .OxThemeClassic ::-webkit-scrollbar-thumb:active {
-    background: rgb(64, 64, 64);
+    background: rgb(208, 208, 208);
 }

build/css/ox.ui.css

@@ -276,6 +276,14 @@ textarea {
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
+/*
+--------------------------------------------------------------------------------
+OxButton
+--------------------------------------------------------------------------------
+*/
+.OxButton {
+    text-align: center;
+}
 .OxButton.OxSymbol,
 .OxButton.OxSymbol:active,
 .OxButton.OxSymbol:focus {
@@ -317,16 +325,16 @@ OxButtonGroup
     -webkit-border-bottom-right-radius: 6px;
 }
 .OxButtonGroup > .OxButton.OxMedium:first-child {
-    -moz-border-radius-topleft: 4px;
+    -moz-border-radius-topleft: 8px;
-    -moz-border-radius-bottomleft: 4px;
+    -moz-border-radius-bottomleft: 8px;
-    -webkit-border-top-left-radius: 4px;
+    -webkit-border-top-left-radius: 8px;
-    -webkit-border-bottom-left-radius: 4px;
+    -webkit-border-bottom-left-radius: 8px;
 }
 .OxButtonGroup > .OxButton.OxMedium:last-child {
-    -moz-border-radius-topright: 4px;
+    -moz-border-radius-topright: 8px;
-    -moz-border-radius-bottomright: 4px;
+    -moz-border-radius-bottomright: 8px;
-    -webkit-border-top-right-radius: 4px;
+    -webkit-border-top-right-radius: 8px;
-    -webkit-border-bottom-right-radius: 4px;
+    -webkit-border-bottom-right-radius: 8px;
 }
 .OxButtonGroup > .OxButton.OxSmall:first-child {
     -moz-border-radius-topleft: 2px;
@@ -378,36 +386,62 @@ OxForm
 }
 /*
 --------------------------------------------------------------------------------
+OxCheckbox
+--------------------------------------------------------------------------------
+*/
+div.OxCheckbox {
+    height: 16px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+}
+input.OxCheckbox {
+    width: 14px;
+    height: 14px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+}
+.OxCheckboxGroup > div.OxCheckbox {
+    float: left;
+}
+.OxCheckboxGroup > div.OxCheckbox {
+    //padding-right: 16px;
+    margin-right: -16px;
+}
+.OxCheckboxGroup > div.OxCheckbox:last-child {
+    //padding-right: 0;
+    margin-right: 0;
+}
+/*
+--------------------------------------------------------------------------------
 OxInput
 --------------------------------------------------------------------------------
 */
 div.OxInput {
+    height: 16px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 div.OxInput.OxMedium {
-    height: 14px;
+    height: 16px;
 }
 div.OxInput > .OxInputLabel {
     float: left;
-    padding-left: 8px;
+    padding: 0 6px 0 6px;
-    text-overflow: ellipsis;
     cursor: default;
-    overflow: hidden;
-}
-div.OxInput > .OxButton {
-    float: left;
-    //margin-left: 1px;
-    margin-top: -1px;
-}
-div.OxInput > .OxButton:last-child {
-    float: left;
-    margin-left: -1px;
-    margin-top: -1px;
 }
 input.OxInput {
     float: left;
-    margin: -1px -1px 0 -1px;
+}
+/*
+--------------------------------------------------------------------------------
+OxInputGroup
+--------------------------------------------------------------------------------
+*/
+.OxInputGroup {
+    height: 16px;
+}
+.OxInputGroup > div {
+    float: left;
 }
 /*
 --------------------------------------------------------------------------------
@@ -417,50 +451,99 @@ OxLabel
 .OxLabel {
     height: 14px;
     border: 1px;
-    padding: 0 8px 0 8px;
+    padding: 0 6px 0 6px;
+    text-overflow: ellipsis;
+    cursor: default;
+    overflow: hidden;
+    white-space: nowrap;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
 /*
 --------------------------------------------------------------------------------
+OxPicker
+--------------------------------------------------------------------------------
+*/
+.OxPicker {
+    position: absolute;
+    z-index: 11;
+    -moz-border-radius: 0 8px 8px 8px;
+    -webkit-border-radius: 0 8px 8px 8px;
+    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
+}
+.OxPicker > div:first-child {
+    background: rgb(240, 240, 240);
+    -moz-border-radius: 0 8px 0 0;
+    -webkit-border-radius: 0 8px 0 0;
+}
+.OxPicker > .OxBar {
+    -moz-border-radius: 0 0 8px 8px;
+    -webkit-border-radius: 0 0 8px 8px;
+}
+.OxPicker > .OxBar > .OxLabel {
+    float: left;
+    margin: 4px 0 4px 4px;
+}
+.OxPicker > .OxBar > .OxButton {
+    float: right;
+    margin: 4px 4px 4px 0;
+}
+/*
+--------------------------------------------------------------------------------
 OxRange
 --------------------------------------------------------------------------------
 */
 .OxRange {
-    height: 14px;
+    height: 16px;
-    border: 1px;
+}
-    -moz-border-radius: 8px;
+.OxRange > .OxArrow {
-    -webkit-border-radius: 8px;
+    float: right;
 }
 .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;
+    float: right;
     height: 14px;
-    margin-left: -1px;
-    margin-top: -1px;
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
-.OxRange > .OxTrack > .OxImage {
+.OxRange > .OxTrack > div {
+    float: left;
+    height: 16px;
+    padding: 1px;
+    margin: -1px;
+}
+.OxRange > .OxTrack > div > img {
     float: left;
     height: 14px;
-    -moz-border-radius: 6px;
+    -webkit-user-select: none;
-    -webkit-border-radius: 6px;
+}
+.OxRange > .OxTrack > div > img.OxFirstChild {
+    -moz-border-radius: 7px;
+    -webkit-border-top-left-radius: 7px;
+    -webkit-border-bottom-left-radius: 7px;
+}
+.OxRange > .OxTrack > div > img.OxLastChild {
+    -moz-border-radius: 0 7px 7px 0;
+    -webkit-border-top-right-radius: 7px;
+    -webkit-border-bottom-right-radius: 7px;
+}
+.OxRange > .OxTrack > div > img.OxFirstChild.OxLastChild {
+    margin-left: 7px;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
 }
 .OxRange > .OxTrack > .OxThumb {
     float: left;
-    margin-top: -15px;
+    margin: -1px;
+    //margin-left: -1px;
+    //margin-top: -1px;
+    text-align: center;
 }
 .OxRange > .OxTrack > .OxThumb:first-child {
-    margin-top: -1px;
+    //margin-top: -1px;
 }
 /*
 --------------------------------------------------------------------------------
@@ -468,22 +551,83 @@ OxSelect
 --------------------------------------------------------------------------------
 */
 .OxSelect.OxMedium {
-    margin-left: 0;
+    height: 14px;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+}
+.OxSelect.OxSelected {
+    -moz-border-radius: 8px 8px 0 0;
+    -webkit-border-radius: 8px 8px 0 0;
+}
+.OxSelect > .OxTitle {
+    float: left;
+    height: 14px;
+    padding-left: 6px;
+    text-align: left;
+    text-overflow: ellipsis;
+    cursor: default;
+    overflow: hidden;
+    white-space: nowrap;
+    //margin-right: -16px;
+}
+.OxSelect.OxOverlapLeft > .OxTitle {
+    //padding-left: 20px;
+    //padding-right: 8px;
+    //margin-left: -32px;
+}
+.OxSelect.OxOverlapRight > .OxTitle {
+    //padding-left: 8px;
+    //padding-right: 20px;
+    //margin-right: -32px;
 }
 .OxSelect > .OxButton {
     float: right;
-    text-align: left;
+    margin: -1px;
 }
-.OxSelect > .OxSymbol {
+.OxSelect.OxOverlapLeft > .OxButton {
-    text-align: right;
+    //padding-left: 15px;
-    cursor: default;
+    //padding-right: 1px;
-    -moz-user-select: none;
+    //margin-left: -16px;
-    -webkit-user-select: none;
 }
-.OxSelect.OxMedium > .OxSymbol {
+.OxSelect.OxOverlapRight > .OxButton {
-    float: right;
+    //padding-left: 1px;
-    margin: -16px 0 0 -4px;
+    //padding-right: 15px;
-    z-index: 9;
+    //margin-right: -16px;
+}
+/*
+
+*/
+.OxButton.OxOverlapLeft,
+.OxLabel.OxOverlapLeft,
+.OxxxSelect.OxOverlapLeft {
+    padding-left: 20px;
+    padding-right: 8px;
+    margin-left: -16px;
+}
+.OxButton.OxOverlapRight,
+.OxLabel.OxOverlapRight,
+.OxxxSelect.OxOverlapRight {
+    padding-left: 8px;
+    padding-right: 20px;
+    margin-right: -16px;
+}
+.OxButton[type=image].OxOverlapLeft {
+    padding-left: 15px;
+    padding-right: 1px;
+}
+.OxButton[type=image].OxOverlapRight {
+    padding-left: 1px;
+    padding-right: 15px;
+}
+.OxSelect.OxOverlapLeft {
+    //padding-left: 8px;
+    padding-left: 16px;
+    margin-left: -18px;
+}
+.OxSelect.OxOverlapRight {
+    //padding-left: 8px;
+    padding-right: 16px;
+    margin-right: -18px;
 }
 
 /*
@@ -498,7 +642,6 @@ Layers
     top: 0;
     right: 0;
     bottom: 0;
-    background: rgb(0, 0, 0);
     opacity: 0;
     overflow: hidden;
     z-index: 10;
@@ -509,7 +652,7 @@ Layers
 .OxMainMenuLayer {
     position: absolute;
     width: 100%;
-    top: 24px;
+    top: 20px;
     bottom: 0px;
     overflow: hidden;
     z-index: 10;
@@ -976,9 +1119,10 @@ Miscellaneous
 
 .OxThemeModern .OxTooltip {
     position: absolute;
-    padding: 2px;
+    padding: 1px 2px 1px 2px;
+    font-size: 9px;
     opacity: 0;
     z-index: 10;
-    -moz-border-radius: 2px;
+    -moz-border-radius: 4px;
-    -webkit-border-radius: 2px;
+    -webkit-border-radius: 4px;
 }

build/css/ox.ui.modern.css

@@ -10,6 +10,9 @@ body.OxThemeModern {
     //color: rgb(0, 0, 0);
     color: rgb(255, 255, 0);
 }
+.OxThemeModern .OxBright {
+    color: rgb(255, 255, 255);
+}
 
 /*
 ================================================================================
@@ -54,9 +57,13 @@ Dialog
 Forms
 ================================================================================
 */
+.OxThemeModern .OxInput::-selection {
+    background: rgb(80, 80, 80);
+}
+
 
 .OxThemeModern .OxButton,
-.OxThemeModern .OxInput,
+.OxThemeModern input.OxInput,
 .OxThemeModern .OxRange,
 .OxThemeModern .OxTrack {
     //border: 1px solid rgb(80, 80, 80);
@@ -64,7 +71,6 @@ Forms
     color: rgb(192, 192, 192);
 }
 .OxThemeModern .OxButton,
-.OxThemeModern div.OxInput,
 .OxThemeModern .OxRange {
     background: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64));
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
@@ -93,20 +99,27 @@ Forms
 .OxThemeModern .OxFormMessage {
     color: rgb(255, 64, 64);
 }
-.OxThemeModern .OxInput,
+.OxThemeModern input.OxInput,
 .OxThemeModern .OxTrack {
     background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32));
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32)));
 }
-.OxThemeModern div.OxInput.OxFocus,
+.OxThemeModern div.OxInput.OxFocus {
-.OxThemeModern .OxInput:focus {
+    //border: 1px solid rgb(80, 80, 80);
-    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 div.OxInput.OxFocus > .OxInputLabel {
+    border-color: rgb(80, 80, 80);
+}
 .OxThemeModern .OxInput.OxPlaceholder {
     color: rgb(96, 96, 96)
 }
+.OxThemeModern .OxLabel {
+    border: 1px solid rgb(48, 48, 48);
+    background: rgb(80, 80, 80);
+    color: rgb(192, 192, 192);
+}
 
 /*
 ================================================================================
@@ -250,8 +263,9 @@ Miscellaneous
 */
 
 .OxThemeModern .OxTooltip {
-    border: 1px solid rgb(255, 255, 255);
+    border: 1px solid rgba(128, 128, 128, 0.75);
-    background: rgba(0, 0, 0, 0.9);
+    background: rgba(0, 0, 0, 0.75);
-    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+    color: rgba(128, 128, 128, 1);
-    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }

build/js/ox.js

@@ -5,6 +5,19 @@ Ox = {
     version: "0.1.2"
 };
 
+/*
+================================================================================
+Constants
+================================================================================
+*/
+
+Ox.AMPM = ["AM", "PM"];
+Ox.DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+Ox.MONTHS = ["January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"];
+Ox.WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday",
+        "Friday", "Saturday", "Sunday"];
+
 /*
 ================================================================================
 Core functions
@@ -60,10 +73,12 @@ Ox.print = function() {
 }
 
 Ox.uid = function() {
-    /*
+    /***
+    Ox.uid
+        returns a unique id
     >>> Ox.uid() == Ox.uid()
     false
-    */
+    ***/
     var uid = 0;
     return function() {
         return uid++;
@@ -105,12 +120,14 @@ Array and Object functions
 */
 
 Ox.avg = function(obj) {
-    /*
+    /***
+    Ox.avg(obj)
+        returns the average of an array's values, or an object's properties
     >>> Ox.avg([-1, 0, 1])
     0
     >>> Ox.avg({"a": 1, "b": 2, "c": 3})
     2
-    */
+    ***/
     return Ox.sum(obj) / Ox.length(obj);
 };
 
@@ -186,6 +203,40 @@ Ox.filter = function(arr, fn) {
     return ret;
 };
 
+Ox.flatten = function(arr) {
+    /*
+    >>> Ox.flatten([1, [2, [3], 4], 5])
+    [1, 2, 3, 4, 5]
+    */
+    var ret = [];
+    arr.forEach(function(v) {
+        if (Ox.isArray(v)) {
+            Ox.flatten(v).forEach(function(v) {
+                ret.push(v);
+            });
+        } else {
+            ret.push(v);
+        }
+    });
+    return ret;
+}
+
+Ox.find = function(arr, str) {
+    /*
+    >>> Ox.find(["foo", "bar", "foobar", "barfoo"], "foo")
+    [["foo", "foobar"], ["barfoo"]]
+    */
+    var arrLowerCase = arr.map(function(v) {
+            return v.toLowerCase();
+        }),
+        ret = [[], []];
+    str && arrLowerCase.forEach(function(v, i) {
+        var index = v.indexOf(str.toLowerCase());
+        index > -1 && ret[index == 0 ? 0 : 1].push(arr[i]);
+    });
+    return ret;
+}
+
 Ox.getObjectById = function(arr, id) {
     var ret = null;
     Ox.each(arr, function(i, v) {
@@ -244,6 +295,7 @@ Ox.makeArray = function(arr) {
     >>> (function() { return Ox.makeArray(arguments); })(["foo"])
     ["foo"]
     */
+    // fixme: this doesn't work for numbers
     var ret = [], i = 0, len = arr.length;
     if (Ox.isString(arr)) {
         ret = [arr];
@@ -335,6 +387,10 @@ Ox.range = function(start, stop, step) {
 };
 
 Ox.serialize = function(obj) {
+    /*
+    >>> Ox.serialize({a: 0, b: 1})
+    a=0&b=1
+    */
     var arr = [];
     Ox.each(obj, function(k, v) {
         arr.push(k + "=" + v);
@@ -342,6 +398,22 @@ Ox.serialize = function(obj) {
     return arr.join("&");
 };
 
+Ox.setPropertyOnce = function(arr, str) {
+    var pos = -1;
+    Ox.each(arr, function(i, v) {
+        if (pos == -1 && arr[i][str]) {
+            pos = i;
+        } else if (pos > -1 && arr[i][str]) {
+            delete arr[i][str];
+        }
+    });
+    if (pos == -1) {
+        arr[0][str] = true;
+        pos = 0;
+    }
+    return pos;
+}
+
 Ox.shuffle = function(arr) {
     /*
     >>> Ox.shuffle([1, 2, 3]).length
@@ -514,19 +586,27 @@ Date functions
 ================================================================================
 */
 
-Ox.getFirstDayOfTheYear = function(date) {
+Ox.getDateInWeek = function(date, weekday) {
     /*
-    Decimal weekday of January 1 (0-6, Sunday as first day)
+    >>> Ox.formatDate(Ox.getDateInWeek(new Date("January 1 2000"), "Sunday"), "%A, %B %e, %Y")
-    >>> Ox.getFirstDayOfTheYear(new Date("01/01/00"))
+    "Sunday, January  2, 2000"
-    6
+    >>> Ox.formatDate(Ox.getDateInWeek(new Date("Jan 1 2000"), "Fri"), "%A, %B %e, %Y")
+    "Friday, December 31, 1999"
+    >>> Ox.formatDate(Ox.getDateInWeek(new Date("1/1/2000"), 1), "%A, %B %e, %Y")
+    "Monday, December 27, 1999"
     */
-    var date_ = date ? new Date(date.valueOf()) : new Date();
+    Ox.print("getDateInWeek", date.toString(), weekday)
-    date_.setMonth(0);
+    var date = date || new Date(),
-    date_.setDate(1);
+        sourceWeekday = Ox.formatDate(date, "%u");
-    return date_.getDay();
+        targetWeekday = Ox.isNumber(weekday) ? weekday :
-};
+            Ox.map(Ox.WEEKDAYS, function(v, i) {
+                return v.substr(0, 3) == weekday.substr(0, 3) ? i + 1 : null;
+            })[0];
+    date.setDate(date.getDate() - sourceWeekday + targetWeekday);
+    return date;
+}
 
-Ox.getDayOfTheYear = function() {
+Ox.getDayOfTheYear = function(date) {
     /*
     >>> Ox.getDayOfTheYear(new Date("12/31/2004"))
     366
@@ -547,6 +627,36 @@ Ox.getDayOfTheYear = function() {
     };
 }();
 
+Ox.getDaysInMonth = function(year, month) {
+    /*
+    >>> Ox.getDaysInMonth(2000, 2)
+    28
+    >>> Ox.getDaysInMonth("2002", "Feb")
+    28
+    >>> Ox.getDaysInMonth("2004", "February")
+    29
+    */
+    Ox.print("getDaysInMonth", year, month)
+    var year = parseInt(year),
+        month = Ox.isNumber(month) ? month :
+            Ox.map(Ox.MONTHS, function(v, i) {
+                return v.substr(0, 3) == month.substr(0, 3) ? i + 1 : null;
+            })[0];
+    return Ox.DAYS[month - 1] + (month == 2 && Ox.isLeapYear(year));
+}
+
+Ox.getFirstDayOfTheYear = function(date) {
+    /*
+    Decimal weekday of January 1 (0-6, Sunday as first day)
+    >>> Ox.getFirstDayOfTheYear(new Date("01/01/00"))
+    6
+    */
+    var date_ = date ? new Date(date.valueOf()) : new Date();
+    date_.setMonth(0);
+    date_.setDate(1);
+    return date_.getDay();
+};
+
 Ox.getISODate = function(date) {
     /*
     >>> Ox.getISODate(new Date("01/01/2000"))
@@ -656,9 +766,7 @@ Ox.canvas = function() {
     c.context = (c.canvas = Ox.element("canvas").attr({
         width: image.width, height: image.height
     })[0]).getContext("2d");
-    if (isImage) {
+    isImage && c.context.drawImage(image, 0, 0);
-        c.context.drawImage(image, 0, 0);
-    }
     c.data = (c.imageData = c.context.getImageData(0, 0,
             image.width, image.height)).data;
     return c;
@@ -1321,6 +1429,23 @@ Ox.deg = function(rad) {
     return rad * 180 / Math.PI;
 };
 
+Ox.divideInt = function(num, by) {
+    /*
+    >>> Ox.divideInt(100, 3)
+    [33, 33, 34]
+    >>> Ox.divideInt(100, 6)
+    [16, 16, 17, 17, 17, 17]
+    */
+    var arr = [],
+        div = parseInt(num / by),
+        mod = num % by,
+        i;
+    for (i = 0; i < by; i++) {
+        arr[i] = div + (i > by - 1 - mod);
+    }
+    return arr;
+}
+
 Ox.limit = function(num, min, max) {
     /*
     >>> Ox.limit(1, 2, 3)
@@ -1328,7 +1453,6 @@ Ox.limit = function(num, min, max) {
     >>> Ox.limit(2, 1)
     1
     */
-    Ox.print(num, min, max)
     var len = arguments.length;
     max = arguments[len - 1];
     min = len == 3 ? min : 0;
@@ -1413,6 +1537,16 @@ Ox.clean = function(str) {
     return Ox.trim(str.replace(/\s+/g, " "));
 };
 
+Ox.contains = function(str, chr) {
+    /*
+    >>> Ox.contains("foo", "bar")
+    false
+    >>> Ox.contains("foobar", "bar")
+    true
+    */
+    return str.indexOf(chr) > -1;
+};
+
 Ox.endsWith = function(str, sub) {
     /*
     >>> Ox.endsWith("foobar", "bar")

demos/form2/color.html

@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>color</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="css/form.css"/>
+        <script type="text/javascript" src="../../build/js/jquery-1.4.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>
+            $(function() {
+                var $body = $("body"),
+                    $ranges = [],
+                    color = [255, 0, 0],
+                    rgb = ["red", "green", "blue"],
+                    $color = new Ox.Label({
+                            width: 256
+                        })
+                        .css({
+                            height: "46px",
+                            background: getColor()
+                        })
+                        .appendTo($body);
+                $.each(Ox.range(3), function(i) {
+                    var colors = getColors(i);
+                    $ranges[i] = new Ox.Range({
+                            arrows: true,
+                            id: rgb[i],
+                            max: 255,
+                            size: 256,
+                            thumbSize: 40,
+                            thumbValue: true,
+                            trackColors: colors,
+                            value: color[i]
+                        })
+                        .css({
+                            marginBottom: "-4px"
+                        })
+                        .bindEvent("change", function(event, data) {
+                            change(i, data.value);
+                        })
+                        .appendTo($body);
+                });
+                function change(index, value) {
+                    color[index] = value;
+                    $color.css({
+                        background: getColor()
+                    });
+                    $.each(Ox.range(3), function(i) {
+                        if (i != index) {
+                            $ranges[i].options({
+                                trackColors: getColors(i)
+                            });
+                        }
+                    });
+                }
+                function getColor() {
+                    return "rgb(" + color.join(", ") + ")";
+                }
+                function getColors(index) {
+                    return [
+                        "rgb(" + $.map(Ox.range(3), function(v) {
+                            return v == index ? 0 : color[v];
+                        }).join(", ") + ")",
+                        "rgb(" + $.map(Ox.range(3), function(v) {
+                            return v == index ? 255 : color[v];
+                        }).join(", ") + ")"
+                    ]
+                }
+            });
+        </script>
+    </head>
+    <body></body>
+</html>

demos/form2/css/form.css

@@ -0,0 +1,17 @@
+body {
+    overflow: hidden;
+}
+#panel {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding: 4px;
+    background: rgb(240, 240, 240);
+    overflow: auto;
+}
+.margin {
+    float: left;
+    margin: 4px;
+}

demos/form2/events.html

@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>test</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="css/form.css"/>
+        <script type="text/javascript" src="../../build/js/jquery-1.4.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>
+            $(function() {
+                var fn = function() {
+                        alert("OK");
+                    },
+                    $button = new Ox.Button({id: "button", title: "Button"})
+                        .appendTo($("body")),
+                    $bind = new Ox.Button({id: "bind", title: "Bind"})
+                        .bindEvent("click", function() {
+                            Ox.print("Click Bind")
+                            Ox.Event.bind($button.options("id"), "click", fn);
+                        })
+                        .appendTo($("body")),
+                    $unbind = new Ox.Button({id: "unbind", title: "Unbind"})
+                        .bindEvent("click", function() {
+                            Ox.print("Click Unbind")
+                            Ox.Event.unbind($button.options("id"), "click", fn);
+                        })
+                        .appendTo($("body")),
+                    $change = new Ox.Button({id: "change", title: "Change ID"})
+                        .bindEvent("click", function() {
+                            Ox.print("Click Change ID")
+                            $button.options({
+                                id: "button2",
+                                title: "Button 2"
+                            });
+                        })
+                        .appendTo($("body"));
+            });
+        </script>
+    </head>
+    <body></body>
+</html>

demos/form2/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>ox.js form demo</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="css/form.css"/>
+        <script type="text/javascript" src="../../build/js/jquery-1.4.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.data.js"></script>
+        <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
+        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+        <script type="text/javascript" src="js/form.js"></script>
+        <!--<script>
+            $(function() {
+                new Ox.Button({title: "close", type: "image"}).appendTo($("body"));
+                new Ox.Button({title: "remove", type: "image"}).appendTo($("body"));
+                new Ox.Button({title: "add", type: "image"}).appendTo($("body"));
+            });
+        </script>-->
+    </head>
+    <body></body>
+</html>