some calendar updates

build/css/ox.ui.modern.css

@@ -47,12 +47,16 @@ Calendar
     background: -webkit-gradient(linear, left top, left bottom, from(rgb(48, 48, 48)), to(rgb(16, 16, 16)));
 }
 
-.OxThemeModern .OxCalendar .OxBackground > div.odd {
+.OxThemeModern .OxCalendar .OxBackground > div.even {
     background: rgb(16, 16, 16);
 }
-.OxThemeModern .OxCalendar .OxBackground > div.even {
+.OxThemeModern .OxCalendar .OxBackground > div.odd {
+    //background: rgb(20, 20, 20);
     background: rgb(24, 24, 24);
 }
+.OxThemeModern .OxCalendar .OxBackground > div.line {
+    background: rgb(32, 32, 32);
+}
 
 
 /*

build/js/ox.js

@@ -72,6 +72,8 @@ Ox.SYMBOLS = {
     CLOSE: '\u2715', BALLOT: '\u2717', WINDOWS: '\u2756',
     EDIT: '\uF802', CLICK: '\uF803', APPLE: '\uF8FF'
 };
+// local timezone offset in milliseconds
+Ox.TIMEZONE_OFFSET = +new Date().getTimezoneOffset() * 60000;
 Ox.TYPES = [
     'Arguments', 'Array', 'Boolean', 'Date', 'Element', 'Function', 'Infinity',
     'NaN', 'Null', 'Number', 'Object', 'RegExp', 'String', 'Undefined'
@@ -1082,6 +1084,11 @@ Ox.isLeapYear = function(year) {
     return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
 };
 
+Ox.makeDate = function(date) {
+    return Ox.isDate(date) ? date :
+        Ox.isUndefined(date) ? new Date() : new Date(date);
+};
+
 /*
 ================================================================================
 DOM functions
@@ -1611,6 +1618,22 @@ Ox.formatDate = function() {
     >>> Ox.formatDate(new Date("01/03/2000"), "%W")
     "01"
     */
+
+    /*
+    var date, fn, format, utc
+    Array.prototype.slice.call(arguments).forEach(function(arg) {
+        
+    });
+        
+    var fn = {}, format;
+    [
+        'getFullYear', 'getMonth', 'getDate',
+        'getHours', 'getMinutes', 'getSeconds', 'toString'
+    ].forEach(function(f) {
+        
+    });
+    */
+    
     var format = [
             ["%", function() {return "%{%}";}],
             ["c", function() {return "%x %X";}],

build/js/ox.ui.js

@@ -10895,7 +10895,7 @@ requires
                 height: 512,
                 range: [100, 5101],
                 width: 512,
-                zoom: 5
+                zoom: 8
             })
             .options(options || {})
             .addClass('OxCalendar')
@@ -10904,7 +10904,8 @@ requires
                 height: self.options.height + 'px'
             });
 
-        self.maxZoom = 28;
+        self.maxZoom = 32;
+        self.minLabelWidth = 80;
         self.overlayWidths = [Math.round(self.options.width / 16)];
         self.overlayWidths = [
             Math.floor((self.options.width - self.overlayWidths[0]) / 2),
@@ -10912,9 +10913,22 @@ requires
             Math.ceil((self.options.width - self.overlayWidths[0]) / 2),
         ];
         self.units = [
+            {
+                id: 'millennium',
+                seconds: 365242.5 * 86400,
+                date: function(i) {
+                    return new Date((i + 1) + '000');
+                },
+                name: function(i) {
+                    return Ox.formatOrdinal(i + 2) + ' millennium';
+                },
+                value: function(date) {
+                    return Math.floor(date.getFullYear() / 1000) - 1;
+                }
+            },
             {
                 id: 'century',
-                seconds: 36524 * 86400,
+                seconds: 36524.25 * 86400,
                 date: function(i) {
                     return new Date((i + 19) + '00');
                 },
@@ -10927,7 +10941,7 @@ requires
             },
             {
                 id: 'decade',
-                seconds: 3652 * 86400,
+                seconds: 3652.425 * 86400,
                 date: function(i) {
                     return (i + 197) + '0'
                 },
@@ -10940,7 +10954,7 @@ requires
             },
             {
                 id: 'year',
-                seconds: 365 * 86400,
+                seconds: 365.2425 * 86400,
                 date: function(i) {
                     return (i + 1970) + '';
                 },
@@ -10953,7 +10967,7 @@ requires
             },
             {
                 id: 'month',
-                seconds: 28 * 86000,
+                seconds: 365.2425 / 12 * 86400,
                 date: function(i) {
                     return (Math.floor(i / 12) + 1970) + '-' + (Ox.mod(i, 12) + 1);
                 },
@@ -10964,12 +10978,26 @@ requires
                     return (date.getFullYear() - 1970) * 12 + date.getMonth();
                 }
             },
+            {
+                id: 'week',
+                seconds: 7 * 86400,
+                date: function(i) {
+                    return (i * 7 - 3) * 86400000;
+                },
+                name: function(i) {
+                    return Ox.formatDate(new Date((i * 7 - 3) * 86400000), '%a, %b %e');
+                },
+                value: function(date) {
+                    return Math.floor((+date / 86400000 + 4) / 7);
+                }
+            },
             {
                 id: 'day',
                 seconds: 86400,
                 date: function(i) {
                     // adjust for timezone difference
-                    return i * 86400000 + +new Date().getTimezoneOffset() * 60000;
+                    // fixme: may still be off
+                    return i * 86400000 + Ox.TIMEZONE_OFFSET;
                 },
                 name: function(i) {
                     return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y');
@@ -10978,6 +11006,19 @@ requires
                     return Math.floor(date / 86400000);
                 }
             },
+            {
+                id: 'six_hours',
+                seconds: 21600,
+                date: function(i) {
+                    return i * 21600000 + Ox.TIMEZONE_OFFSET;
+                },
+                name: function(i) {
+                    return Ox.formatDate(new Date(i * 21600000 + Ox.TIMEZONE_OFFSET), '%b %e, %H:00');
+                },
+                value: function(date) {
+                    return Math.floor((date - Ox.TIMEZONE_OFFSET) / 21600000);
+                }
+            },
             {
                 id: 'hour',
                 seconds: 3600,
@@ -10991,6 +11032,19 @@ requires
                     return Math.floor(date / 3600000);
                 }
             },
+            {
+                id: 'five_minutes',
+                seconds: 300,
+                date: function(i) {
+                    return i * 300000;
+                },
+                name: function(i) {
+                    return Ox.formatDate(new Date(i * 300000), '%b %e, %H:%M');
+                },
+                value: function(date) {
+                    return Math.floor(date / 300000);
+                }
+            },
             {
                 id: 'minute',
                 seconds: 60,
@@ -11004,6 +11058,19 @@ requires
                     return Math.floor(date / 60000);
                 }
             },
+            {
+                id: 'five_seconds',
+                seconds: 5,
+                date: function(i) {
+                    return i * 5000;
+                },
+                name: function(i) {
+                    return Ox.formatDate(new Date(i * 5000), '%H:%M:%S');
+                },
+                value: function(date) {
+                    return Math.floor(date / 5000);
+                }
+            },
             {
                 id: 'second',
                 seconds: 1,
@@ -11026,16 +11093,17 @@ requires
                 bottom: '40px'
             })
             .bind({
-                dblclick: dblclick,
                 mouseleave: mouseleave,
                 mousemove: mousemove,
                 mousewheel: mousewheel
             })
             .bindEvent({
+                doubleclick: doubleclick,
                 dragstart: dragstart,
                 drag: drag,
                 dragpause: dragpause,
-                dragend: dragend
+                dragend: dragend,
+                singleclick: singleclick
             })
             .appendTo(that);
 
@@ -11141,7 +11209,7 @@ requires
             renderCalendar();
         }
 
-        function dblclick(e) {
+        function doubleclick(event, e) {
             if ($(e.target).is(':not(.OxLine > .OxDate)')) {
                 if (self.options.zoom < self.maxZoom) {
                     self.options.date = new Date(
@@ -11304,7 +11372,7 @@ requires
         }
 
         function getPixelsPerSecond(zoom) {
-            return Math.pow(2, (zoom || self.options.zoom) - 24);
+            return Math.pow(2, (zoom || self.options.zoom) - (self.maxZoom - 4));
         }
 
         function getPosition(date, zoom) {
@@ -11322,45 +11390,35 @@ requires
         function getBackgroundElements(zoom) {
             // fixme: duplicated
             var $elements = [],
-                pixelsPerSecond = getPixelsPerSecond(zoom),
+                units = getUnits(zoom),
-                n, unit, value, width;
+                n, value, width;
-            Ox.forEach(self.units, function(v, i) {
+            [1, 0].forEach(function(u) {
-                width = Math.round(v.seconds * pixelsPerSecond);
+                var unit = units[u],
-                if (width < 64) {
+                    value = unit.value(self.options.date),
-                    unit = v;
+                    width = unit.seconds * getPixelsPerSecond(zoom),
-                    return false;
-                }
-            });
                     n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
-            value = unit.value(self.options.date);
                     Ox.loop(-n, n + 1, function(i) {
                         $elements.push(
                             new Ox.Element()
-                        .addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd')
+                                .addClass(
+                                    u == 0 ? 'line' : Ox.mod(value + i, 2) == 0 ? 'even' : 'odd'
+                                )
                                 .css({
                                     left: getPosition(new Date(unit.date(value + i)), zoom) + 'px',
-                            width: width + 'px'
+                                    width: (u == 0 ? 1 : width) + 'px'
                                 })
                         );
                     });
+            });
             return $elements;
         }
 
         function getTimelineElements(zoom) {
             var $elements = [],
-                pixelsPerSecond = getPixelsPerSecond(zoom),
+                unit = getUnits(zoom)[0],
-                n, unit, value, width;
+                value = unit.value(self.options.date),
-            self.units = self.units.reverse();
+                width = unit.seconds * getPixelsPerSecond(zoom);
-            Ox.forEach(self.units, function(v) {
-                width = Math.round(v.seconds * pixelsPerSecond);
-                if (width >= 64) {
-                    unit = v;
-                    return false;
-                }
-            });
-            self.units = self.units.reverse();
                 n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
-            value = unit.value(self.options.date);
             Ox.loop(-n, n + 1, function(i) {
                 $elements.push(
                     getDateElement({
@@ -11374,6 +11432,24 @@ requires
             return $elements;
         }
 
+        function getUnits(zoom) {
+            // returns array of 2 units
+            // units[0] for timeline
+            // units[1] for background
+            var pixelsPerSecond = getPixelsPerSecond(zoom),
+                units;
+            self.units = self.units.reverse();
+            Ox.forEach(self.units, function(v, i) {
+                width = Math.round(v.seconds * pixelsPerSecond);
+                if (width >= self.minLabelWidth) {
+                    units = [self.units[i], self.units[i - 1]];
+                    return false;
+                }
+            });
+            self.units = self.units.reverse();
+            return units;
+        }
+
         function mouseleave() {
             self.$tooltip.hide();
         }
@@ -11432,6 +11508,9 @@ requires
             renderBackground();
             renderTimelines();
             renderDates();
+            self.$statusbar.html(
+                Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S %s')
+            );
         }
 
         function renderBackground() {
@@ -11499,6 +11578,13 @@ requires
             });
         }
 
+        function singleclick(event, e) {
+            if ($(e.target).is(':not(.OxLine > .OxDate)')) {
+                self.options.date = getMouseDate(e);
+                renderCalendar();
+            }
+        }
+
         self.onChange = function(key, val) {
             if (key == 'date') {
                 

demos/calendar/js/calendar.js

@@ -6,6 +6,7 @@ $(function() {
         date: new Date(0),
         dates: [
             {name: 'Genghis Khan', start: new Date('1162'), stop: new Date('1228'), type: 'Person'},
+            {name: 'Marco Polo', start: new Date('1254'), stop: new Date('1324-01-09'), type: 'Person'},
             {name: 'Columbus', start: new Date('1451-08-22'), stop: new Date('1506-05-21'), type: 'Person'},
             {name: 'Da Vinci', start: new Date('1452-04-15'), stop: new Date('1519-05-03'), type: 'Person'},
             {name: 'Michelangelo', start: new Date('1475-03-06'), stop: new Date('1564-02-19'), type: 'Person'},
@@ -25,13 +26,16 @@ $(function() {
             {name: 'Darwin', start: new Date('1809-02-12'), stop: new Date('1882-04-20'), type: 'Person'},
             {name: 'Marx', start: new Date('1818-05-05'), stop: new Date('1883-03-15'), type: 'Person'},
             /*
+            {name: 'Gandhi', start: new Date('1869-10-02'), stop: new Date('1948-01-31'), type: 'Person'},
             {name: 'Lenin', start: new Date('1870-04-22'), stop: new Date('1924-01-22'), type: 'Person'},
             {name: 'Stalin', start: new Date('1878-12-18'), stop: new Date('1953-03-06'), type: 'Person'},
             {name: 'Einstein', start: new Date('1879-03-14'), stop: new Date('1955-04-19'), type: 'Person'},
             {name: 'Picasso', start: new Date('1881-10-25'), stop: new Date('1973-04-09'), type: 'Person'},
+            {name: 'Roosevelt', start: new Date('1882-01-30'), stop: new Date('1945-04-13'), type: 'Person'},
             {name: 'Hitler', start: new Date('1889-04-20'), stop: new Date('1945-05-01'), type: 'Person'},
             {name: 'Hitchcock', start: new Date('1899-08-13'), stop: new Date('1980-04-30'), type: 'Person'},
             {name: 'Turing', start: new Date('1912-06-23'), stop: new Date('1954-06-08'), type: 'Person'},
+            {name: 'Kennedy', start: new Date('1917-05-29'), stop: new Date('1963-11-23'), type: 'Person'},
             {name: 'Deleuze', start: new Date('1925-01-18'), stop: new Date('1995-11-05'), type: 'Person'},
             {name: 'Warhol', start: new Date('1928-08-06'), stop: new Date('1987-02-23'), type: 'Person'},
             {name: 'Debord', start: new Date('1931-12-28'), stop: new Date('1994-12-01'), type: 'Person'},
@@ -39,19 +43,25 @@ $(function() {
             {name: 'Test', start: new Date('1970-01-01'), stop: new Date('1970-01-02')},
             {name: 'Battle of Hastings', start: new Date('1066-10-14'), stop: new Date('1066-10-15')},
             {name: 'Renaissance', start: new Date('1300'), stop: new Date('1700')},
+            {name: 'Spanish Inquisition', start: new Date('1480-09-27'), stop: new Date('1820-03-10')},
             {name: 'Discovery of America', start: new Date('1492'), stop: new Date('1493')},
+            {name: 'East India Company', start: new Date('1600'), stop: new Date('1874')},
             {name: 'Thirty Years\' War', start: new Date('1618'), stop: new Date('1649')},
             {name: 'Declaration of Independence', start: new Date('1776-07-04'), stop: new Date('1776-07-05')},
             {name: 'French Revolution', start: new Date('1789'), stop: new Date('1800')},
             {name: 'Storming of the Bastille', start: new Date('1789-07-14'), stop: new Date('1789-07-15')},
             {name: 'Napoleonic Era', start: new Date('1799-11-09'), stop: new Date('1815-06-29')},
             {name: 'The Year Without a Summer', start: new Date('1816'), stop: new Date('1817')},
+            {name: 'Queen Victoria', start: new Date('1837-06-20'), stop: new Date('1901-01-23')},
+            {name: 'Crimean War', start: new Date('1853-10'), stop: new Date('1856-03')},
             {name: 'American Civil War', start: new Date('1861-04-12'), stop: new Date('1865-04-10')},
             {name: 'Franco-Prussian War', start: new Date('1870-07-19'), stop: new Date('1871-05-11')},
             {name: 'Paris Commune', start: new Date('1871-03-18'), stop: new Date('1871-05-29')},
+            {name: 'Congo Free State', start: new Date('1885-07-11'), stop: new Date('1908-11-16')},
             {name: '20th century', start: new Date('1900'), stop: new Date('2000')},
             {name: 'Titanic', start: new Date('1912-04-15'), stop: new Date('1912-04-16')},
             {name: 'World War One', start: new Date('1914-07-28'), stop: new Date('1918-11-12')},
+            {name: 'Battle of Verdun', start: new Date('1916-02-21'), stop: new Date('1916-12-19')},
             {name: 'Russian Revolution', start: new Date('1917'), stop: new Date('1918')},
             {name: 'October Revolution', start: new Date('1917-11-07'), stop: new Date('1917-11-09')},
             {name: 'Spanish Flu', start: new Date('1918'), stop: new Date('1919')},
@@ -64,10 +74,15 @@ $(function() {
             {name: '1936 Summer Olympics', start: new Date('1936-08-01'), stop: new Date('1936-08-17')},
             {name: 'Hindenburg', start: new Date('1937-05-06'), stop: new Date('1937-05-07')},
             {name: 'World War Two', start: new Date('1939-09-01'), stop: new Date('1945-09-03')},
+            {name: 'Pearl Harbour', start: new Date('1941-12-07'), stop: new Date('1941-12-08')},
             {name: 'Wannsee Conference', start: new Date('1942-01-20'), stop: new Date('1942-01-21')},
+            {name: 'Battle of Stalingrad', start: new Date('1942-08-23'), stop: new Date('1943-02-03')},
+            {name: 'D-Day', start: new Date('1944-06-06'), stop: new Date('1944-06-07')},
+            {name: 'Liberation of Auschwitz', start: new Date('1945-01-27'), stop: new Date('1945-01-28')},
             {name: 'Hiroshima', start: new Date('1945-08-06'), stop: new Date('1945-08-07')},
             {name: 'Nagasaki', start: new Date('1945-08-09'), stop: new Date('1945-08-10')},
             {name: 'Nuremburg Trials', start: new Date('1945-11-20'), stop: new Date('1946-10-02')},
+            {name: 'Fourth Republic', start: new Date('1946-10-14'), stop: new Date('1958-10-05')},
             {name: 'West Germany', start: new Date('1949-05-23'), stop: new Date('1990-10-03')},
             {name: 'Korean War', start: new Date('1950-06-25'), stop: new Date('1953-07-28')},
             {name: 'Cuban Revolution', start: new Date('1953-07-26'), stop: new Date('1959-01-02')},
@@ -103,14 +118,16 @@ $(function() {
             {name: 'Tschernobyl', start: new Date('1986-04-26'), stop: new Date('1986-04-27')},
             {name: 'Fall of the Berlin Wall', start: new Date('1989-11-09'), stop: new Date('1989-11-10')},
             {name: 'Gulf War', start: new Date('1990-08-02'), stop: new Date('1991-03-01')},
+            {name: 'Clinton Presidency', start: new Date('1993-01-20'), stop: new Date('2001-01-20')},
             {name: 'German Reunification', start: new Date('1990-10-03'), stop: new Date('1990-10-04')},
             {name: 'The Battle of Seattle', start: new Date('1999-11-30'), stop: new Date('1999-12-01')},
             {name: 'George W. Bush', start: new Date('2001-01-20'), stop: new Date('2009-01-20')},
-            {name: '9-11', start: new Date('2001-09-11'), stop: new Date('2001-09-12')}
+            {name: 'Carlo Giuliani', start: new Date('2001-07-20'), stop: new Date('2001-07-21')},
+            {name: '9-11', start: new Date('2001-09-11'), stop: new Date('2001-09-12')},
+            {name: 'Fukushima', start: new Date('2011-03-11'), stop: new Date('2011-03-12')}
         ],
         height: window.innerHeight,
-        width: window.innerWidth,
+        width: window.innerWidth
-        zoom: 5
     }).appendTo(Ox.UI.$body);
 
 });