move scalebar out of content div, animate scalebar and scrollbar during keyboard navigation

source/Ox.UI/css/Ox.UI.css

@@ -199,8 +199,13 @@ Calendar
     height: 16px;
     cursor: ew-resize;
 }
+.OxCalendar .OxOverlay div:nth-child(even) {
+    height: 14px;
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+}
 .OxCalendar .OxOverlay div:nth-child(odd) {
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 .OxCalendar .OxRange .OxArrow {

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -96,10 +96,12 @@ Ox.Calendar = function(options, self) {
     Just like the 0-th second is 1970-01-01 00:00:00, the 0th month
     is 1970-01, or the 0-th century is the 20th century.
     A month unit, for example, has the following properties:
-    - seconds: average number of seconds
+    - seconds: average number of seconds (used to compute width at zoom)
     - date: returns the start date of the index-th month
     - name: returns a string representation of the index-th month
     - value: returns the month index for a given date
+    Setting the date is verbose, but it's the only way to avoid years
+    like 50 to be coerced to 1950.
     */
     self.units = [
         {
@@ -339,10 +341,18 @@ Ox.Calendar = function(options, self) {
         })
         .appendTo(self.$toolbar);
 
+    self.$scalebar = new Ox.Element()
+        .addClass('OxTimeline')
+        .css({
+            posision: 'absolute',
+            top: '24px'
+        })
+        .appendTo(that);
+
     self.$container = new Ox.Element()
         .addClass('OxCalendarContainer')
         .css({
-            top: '24px',
+            top: '40px',
             bottom: '16px'
         })
         .bind({
@@ -368,13 +378,6 @@ Ox.Calendar = function(options, self) {
         .addClass('OxBackground')
         .appendTo(self.$content);
 
-    self.$scalebar = new Ox.Element()
-        .addClass('OxTimeline')
-        .css({
-            posision: 'absolute',
-        })
-        .appendTo(self.$content);
-
     self.$scrollbar = new Ox.Element()
         .addClass('OxTimeline')
         .css({
@@ -444,11 +447,16 @@ Ox.Calendar = function(options, self) {
     function drag(event, e) {
         if (self.drag) {
             ///*
+            var marginLeft = e.clientX - self.drag.x,
+                scrollbarFactor = getScrollbarFactor();
+            self.$scalebar.css({
+                marginLeft: marginLeft + 'px'
+            });
             self.$content.css({
-                marginLeft: (e.clientX - self.drag.x) + 'px'
+                marginLeft: marginLeft + 'px'
             });
             self.$scrollbar.css({
-                marginLeft: Math.round((e.clientX - self.drag.x) / getScrollbarFactor()) + 'px'
+                marginLeft: Math.round(marginLeft / scrollbarFactor) + 'px'
             });
             //*/
             /*
@@ -475,15 +483,12 @@ Ox.Calendar = function(options, self) {
     }
 
     function dragafter(e) {
+        self.$scalebar.css({marginLeft: 0});
+        self.$content.css({marginLeft: 0});
+        self.$scrollbar.css({marginLeft: 0});
         self.options.date = new Date(
             +self.options.date - (e.clientX - self.drag.x) * getSecondsPerPixel() * 1000
         );
-        self.$content.css({
-            marginLeft: 0
-        });
-        self.$scrollbar.css({
-            marginLeft: 0
-        });
         renderCalendar();
     }
 
@@ -492,11 +497,16 @@ Ox.Calendar = function(options, self) {
     }
 
     function dragScrollbar(event, e) {
+        var marginLeft = e.clientX - self.drag.x,
+            scrollbarFactor = getScrollbarFactor();
+        self.$scalebar.css({
+            marginLeft: (marginLeft * scrollbarFactor) + 'px'
+        });
         self.$content.css({
-            marginLeft: ((e.clientX - self.drag.x) * getScrollbarFactor()) + 'px'
+            marginLeft: (marginLeft * scrollbarFactor) + 'px'
         });
         self.$scrollbar.css({
-            marginLeft: (e.clientX - self.drag.x) + 'px'
+            marginLeft: marginLeft + 'px'
         });
     }
 
@@ -511,16 +521,13 @@ Ox.Calendar = function(options, self) {
     }
 
     function dragafterScrollbar(e) {
+        // fixme: duplicated
+        self.$scalebar.css({marginLeft: 0});
+        self.$content.css({marginLeft: 0});
+        self.$scrollbar.css({marginLeft: 0});
         self.options.date = new Date(
             +self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000 * getScrollbarFactor()
         );
-        // fixme: duplicated
-        self.$content.css({
-            marginLeft: 0
-        });
-        self.$scrollbar.css({
-            marginLeft: 0
-        });
         renderCalendar();
     }
 
@@ -753,16 +760,21 @@ Ox.Calendar = function(options, self) {
     function panTo(date) {
         var delta = (date - self.options.date) / 1000 * getPixelsPerSecond(),
             ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
+        self.$scalebar.animate({
+            marginLeft: -delta + 'px'
+        }, ms);
         self.$content.animate({
             marginLeft: -delta + 'px'
         }, ms, function() {
+            self.$scalebar.stop().css({marginLeft: 0});
+            self.$content.css({marginLeft: 0});
+            self.$scrollbar.stop().css({marginLeft: 0});
             self.options.date = date;
             renderCalendar();
-            self.$content.css({
-                marginLeft: 0
-            });
         });
-        
+        self.$scrollbar.animate({
+            marginLeft: -delta / getScrollbarFactor() + 'px'
+        }, ms);
     };
 
     function panToSelected() {
@@ -837,7 +849,7 @@ Ox.Calendar = function(options, self) {
             var $line = new Ox.Element()
                 .addClass('OxLine')
                 .css({
-                    top: ((line + 1) * 16) + 'px'
+                    top: (line * 16) + 'px'
                 })
                 .appendTo(self.$content);
             events.sort(function(a, b) {