make small timeline work in player view

build/js/ox.ui.js

@@ -121,7 +121,8 @@ requires
     /**
         Creates an App instance.
     */
-    Ox.App = function() {
+    Ox.App = (function() {
+
         return function(options) {
 
             options = options || {};
@@ -206,6 +207,10 @@ requires
                 }
             };
 
+            that.bindEvent = function() {
+                
+            };
+
             that.launch = function(callback) {
                 var time = +new Date(),
                     userAgent = getUserAgent(),
@@ -273,7 +278,7 @@ requires
 
         };
 
-    }();
+    }());
 
     Ox.Clipboard = function() {
         var clipboard = {};
@@ -1532,7 +1537,7 @@ requires
                 })
                 */
                 .bindEvent({
-                    doubleclick: toggle,
+                    anyclick: toggle,
                     dragstart: dragstart,
                     drag: drag,
                     dragend: dragend
@@ -1550,11 +1555,12 @@ requires
 
         function dragstart(event, e) {
             if (self.options.resizable && !self.options.collapsed) {
+                Ox.print('DRAGSTART')
 				self.drag = {
 				    startPos: e[self.clientXY],
 	                startSize: self.options.size
 	            }
-			}
+			} else { Ox.print('NO DRAGSTART r !c', self.options.resizable, !self.options.collapsed) }
         }
 
         function drag(event, e) {
@@ -7118,6 +7124,7 @@ requires
                     loadPages(self.page);
                 }
             }, 250);
+            that.gainFocus();
         }
 
         function scrollPageDown() {
@@ -10002,6 +10009,8 @@ requires
 
         function setSizes(init) {
             self.options.elements.forEach(function(v, i) {
+                // fixme: maybe we can add a conditional here, since init
+                // is about elements that are collapsed splitpanels
                 var edges = [
                     (init && parseInt(that.$elements[i].css(self.edges[0]))) || 0,
                     (init && parseInt(that.$elements[i].css(self.edges[1]))) || 0
@@ -10107,7 +10116,6 @@ requires
 
         that.toggle = function(id) {
             // one can pass pos instead of id
-            //Ox.print('toggle', id);
             var pos = Ox.isNumber(id) ? id : getPositionById(id),
 				element = self.options.elements[pos],
                 value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) +
@@ -10115,8 +10123,7 @@ requires
 					(element.collapsed ? 1 : -1),
                 animate = {};
             animate[self.edges[pos == 0 ? 0 : 1]] = value;
-            //Ox.print('animate', animate, self.resizebarElements)
+            that.animate(animate, 200, function() { // fixme: 250?
-            that.animate(animate, 200, function() {
                 element.collapsed = !element.collapsed;
                 element.element.triggerEvent('toggle', {
                     'collapsed': element.collapsed
@@ -10761,12 +10768,14 @@ requires
 		});
 
         self.$line = $('<img>')
+            .addClass('OxTimelineSmallImage')
             .attr({
                 src: '/' + self.options.videoId + '/timelines/timeline.16.0.png'
             })
             .css({
                 position: 'absolute',
                 left: '4px',
+                top: '4px',
                 width: self.options.width,
                 height: '16px'
             })
@@ -10799,8 +10808,7 @@ requires
         });
 
         function getPosition(e) {
-            //FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
+            return e.offsetX / self.options.width * self.options.duration;
-            return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left);
         }
 
         function getSubtitle(position) {
@@ -10863,8 +10871,10 @@ requires
         function setMarker() {
             self.$markerPosition
                 .css({
-                    left: (self.options.position % self.options.width) + 'px',
+                    left: parseInt(
-                    top: (parseInt(self.options.position / self.options.width) * (self.height + self.margin) + 2) + 'px',
+                        self.options.position / self.options.duration * self.options.width
+                    ) + 'px',
+                    top: '2px',
                 });
         }
 
@@ -10883,10 +10893,8 @@ requires
         }
 
         function setWidth() {
-            self.lines = Math.ceil(self.options.duration / self.options.width);
+			self.$line.css({
-			that.css({
+				width: self.options.width + 'px',
-				width: (self.options.width + self.margin) + 'px',
-				height: (self.height + self.margin) + 'px'
 			});
             setMarker();
             setMarkerPoint(0);
@@ -11927,6 +11935,7 @@ requires
                     poster: '',
                     showAnnotations: true,
                     showControls: true,
+                    subtitles: [],
                     videoHeight: 0,
                     videoSize: 'fit',
                     videoWidth: 0,
@@ -11942,7 +11951,10 @@ requires
                     resize: resizeElement
                 });
 
-        self.videoCSS = getVideoCSS();
+        $.extend(self, {
+            fullscreen: false,
+            videoCSS: getVideoCSS()
+        });
         //alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
 
         self.$player = new Ox.Element()
@@ -11995,15 +12007,6 @@ requires
                 .bindEvent({
                     click: self.$video.togglePlay
                 }),
-            playInToOut: new Ox.Button({
-                    id: 'playInToOut',
-                    title: 'PlayInToOut',
-                    tooltip: 'Play In to Out',
-                    type: 'image'                
-                })
-                .bindEvent({
-                    click: playInToOut
-                }),
             mute: new Ox.Button({
                     id: 'mute',
                     title: [
@@ -12034,6 +12037,20 @@ requires
                 })
                 .bindEvent({
                     click: toggleSize
+                }),
+            fullscreen: new Ox.Button({
+                    id: 'size',
+                    title: [
+                        {id: 'grow', title: 'grow'},
+                        {id: 'shrink', title: 'shrink'}
+                    ],
+                    tooltip: [
+                        'Enter Fullscreen', 'Exit Fullscreen'
+                    ],
+                    type: 'image'
+                })
+                .bindEvent({
+                    click: toggleFullscreen
                 })
         }
         var i = 0;
@@ -12056,6 +12073,7 @@ requires
         self.$timeline = {
             large: new Ox.LargeTimeline({
                     duration: self.options.duration,
+                    subtitles: self.options.subtitles,
                     videoId: self.options.videoId,
                     width: getTimelineWidth()
                 })
@@ -12063,17 +12081,19 @@ requires
                     top: '4px'
                 })
                 .bindEvent({
-                    change: function(event, data) {
+                    change: changeLargeTimeline
-                        self.$video.position(data.position);
-                    }
                 }),
             small: new Ox.SmallTimeline({
                     duration: self.options.duration,
+                    subtitles: self.options.subtitles,
                     videoId: self.options.videoId,
                     width: getTimelineWidth()
                 })
                 .css({
-                    top: '80px'
+                    top: '76px'
+                })
+                .bindEvent({
+                    change: changeSmallTimeline
                 })
         };
         $.each(self.$timeline, function(i, $timeline) {
@@ -12122,6 +12142,20 @@ requires
                 orientation: 'horizontal'
             });
 
+        function changeLargeTimeline(event, data) {
+            self.$video.position(data.position);
+            self.$timeline.small.options({
+                position: data.position
+            });            
+        }
+
+        function changeSmallTimeline(event, data) {
+            self.$video.position(data.position);
+            self.$timeline.large.options({
+                position: data.position
+            });            
+        }
+
         function getPlayerHeight() {
             return self.options.height -
                 self.options.showControls * 104 - 1;
@@ -12129,13 +12163,13 @@ requires
 
         function getPlayerWidth() {
             return self.options.width -
-                self.options.showAnnotations *
+                (self.options.showAnnotations && !self.fullscreen) *
                 self.options.annotationsSize - 1;
         }
 
         function getTimelineWidth() {
             return self.options.width -
-                self.options.showAnnotations *
+                (self.options.showAnnotations && !self.fullscreen) *
                 self.options.annotationsSize - 40
         }
 
@@ -12170,18 +12204,13 @@ requires
             
         }
 
-        function play() {
-            
-        }
-
         function playing(event, data) {
             self.$timeline.large.options({
                 position: data.position
             });
-        }
+            self.$timeline.small.options({
-
+                position: data.position
-        function playInToOut() {
+            });
-            
         }
 
         function resizeAnnotations(event, data) {
@@ -12240,6 +12269,13 @@ requires
             });
         }
 
+        function toggleFullscreen() {
+            self.fullscreen = !self.fullscreen;
+            self.options.showAnnotations && that.$element.toggle(1);
+            self.fullscreen && self.options.showControls && self.$panel.toggle(1);
+            that.triggerEvent((self.fullscreen ? 'enter' : 'exit') + 'fullscreen', {});
+        }
+
         function toggleSize() {
             self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
             resizeVideo();