enable timeline types

source/Ox.UI/js/Video/LargeVideoTimeline.js

@@ -35,6 +35,7 @@ Ox.LargeVideoTimeline = function(options, self) {
                 },
                 position: setPosition,
                 subtitles: setSubtitles,
+                type: setType,
                 width: setWidth
             })
             .addClass('OxLargeVideoTimeline')
@@ -46,56 +47,42 @@ Ox.LargeVideoTimeline = function(options, self) {
                 drag: drag
             });
 
-    Ox.extend(self, {
-        $cuts: [],
-        $pointMarker: {},
-        $tiles: {},
-        $tooltip: Ox.Tooltip({
-            animate: false
-        }),
-        center: Math.floor(self.options.width / 2),
-        element: that.$element[0],
-        fps: 25,
-        height: 64,
-        tileWidth: 1500
-    });
+    self.$cuts = [];
+    self.$pointMarker = {};
+    self.$tiles = {};
+    self.$tooltip = Ox.Tooltip({animate: false});
+    self.center = Math.floor(self.options.width / 2);
+    self.fps = 25;
+    self.height = 64;
+    self.tileWidth = 150;
     self.tiles = self.options.duration * self.fps / self.tileWidth;
 
     self.$timeline = $('<div>')
-        .css({
-            left: self.center + 'px'
-        })
-        .appendTo(that.$element)
+        .css({left: self.center + 'px'})
+        .appendTo(that)
 
     setSubtitles();
 
     self.options.cuts.forEach(function(v, i) {
         self.$cuts[i] = $('<img>')
             .addClass('OxCut')
-            .attr({
-                src: Ox.UI.getImageURL('markerCut')
-            })
-            .css({
-                left: (v * self.fps) + 'px'
-            })
+            .attr({src: Ox.UI.getImageURL('markerCut')})
+            .css({left: (v * self.fps) + 'px'})
             .appendTo(self.$timeline)
     });
 
     self.$markerPosition = $('<img>')
         .addClass('OxMarkerPosition')
-        .attr({
-            src: Ox.UI.getImageURL('markerPosition')
-        })
-        .appendTo(that.$element);
+        .attr({src: Ox.UI.getImageURL('markerPosition')})
+        .appendTo(that);
+
     setMarker();
 
     ['in', 'out'].forEach(function(point) {
         var titlecase = Ox.toTitleCase(point);
         self.$pointMarker[point] = $('<img>')
             .addClass('OxMarkerPoint' + titlecase)
-            .attr({
-                src: Ox.UI.getImageURL('marker' + titlecase)
-            })
+            .attr({src: Ox.UI.getImageURL('marker' + titlecase)})
             .appendTo(self.$timeline);
         setPointMarker(point);
     });
@@ -126,7 +113,9 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     function getPosition(e) {
-        return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
+        return self.options.position + (
+            e.clientX - that.offset().left - self.center - 1
+        ) / self.fps;
     }
 
     function mouseleave(e) {
@@ -142,9 +131,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     function setMarker() {
-        self.$markerPosition.css({
-            left: self.center + 'px'
-        });
+        self.$markerPosition.css({left: self.center + 'px'});
     }
 
     function setPointMarker(point) {
@@ -198,6 +185,12 @@ Ox.LargeVideoTimeline = function(options, self) {
         });
     }
 
+    function setType() {
+        Ox.forEach(self.$tiles, function($tile, i) {
+            $tile.attr({src: self.options.getImageURL(self.options.type, i)});
+        });
+    }
+
     function setWidth() {
         self.center = Math.floor(self.options.width / 2);
         that.css({
@@ -210,9 +203,7 @@ Ox.LargeVideoTimeline = function(options, self) {
     }
 
     function triggerPositionEvent() {
-        that.triggerEvent('position', {
-            position: self.options.position
-        });
+        that.triggerEvent('position', {position: self.options.position});
     }
 
     function updateTooltip() {