diff --git a/demos/video/js/video.js b/demos/video/js/video.js
index 4bb70bed..6f04de02 100644
--- a/demos/video/js/video.js
+++ b/demos/video/js/video.js
@@ -208,13 +208,11 @@ Ox.load('UI', {
             $smallTimeline = Ox.SmallVideoTimeline({
                 duration: 6336.08,
                 find: 'brick',
-                getTimelineURL: function(i) {
-                    return 'png/timeline.16.' + i + '.png';
-                },
                 'in': 3128.725, 
                 out: 3130.725,
                 results: results,
                 subtitles: subtitles,
+                timeline: 'png/timeline.16.png',
                 type: 'editor',
                 width: 376
             })
@@ -228,13 +226,11 @@ Ox.load('UI', {
             $playerTimeline = Ox.SmallVideoTimeline({
                 duration: 6336.08,
                 find: 'brick',
-                getTimelineURL: function(i) {
-                    return 'png/timeline.16.' + i + '.png';
-                },
                 'in': 3128.725, 
                 out: 3130.725,
                 results: results,
                 subtitles: subtitles,
+                timeline: 'png/timeline.16.png',
                 type: 'player',
                 width: 376
             })
@@ -248,14 +244,14 @@ Ox.load('UI', {
             $blockTimeline = Ox.BlockVideoTimeline({
                 duration: 6336.08,
                 find: 'brick',
-                getTimelineURL: function(i) {
-                    return 'png/timeline.16.' + i + '.png';
-                },
                 'in': 3128.725, 
                 out: 3130.725,
                 results: results,
                 showMilliseconds: 2,
                 subtitles: subtitles,
+                timeline: function(i) {
+                    return 'png/timeline.16.' + i + '.png';
+                },
                 width: 376
             })
             .css({
diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
index 6d225c96..c5e487d6 100644
--- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
@@ -5,12 +5,12 @@ Ox.BlockVideoTimeline = function(options, self) {
         .defaults({
             duration: 0,
             find: '',
-            getTimelineURL: null,
             'in': 0,
             out: 0,
             position: 0,
             results: [],
             subtitles: [],
+            timeline: null,
             width: 0
         })
         .options(options || {})
@@ -46,11 +46,11 @@ Ox.BlockVideoTimeline = function(options, self) {
     self.$image = Ox.SmallVideoTimelineImage({
             duration: self.options.duration,
             editing: self.options.editing,
-            getTimelineURL: self.options.getTimelineURL,
             'in': self.options['in'],
             out: self.options.out,
             results: self.options.results,
             subtitles: self.options.subtitles,
+            timeline: self.options.timeline,
             width: Math.ceil(self.options.duration),
             type: self.options.type
         })
diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
index 6b09106a..63ce2ce4 100644
--- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
@@ -6,11 +6,11 @@ Ox.SmallVideoTimeline = function(options, self) {
             _offset: 0, // hack for cases where all these position: absolute elements have to go into a float: left
             duration: 0,
             editing: false,
-            getTimelineURL: null,
             'in': 0,
             out: 0,
             paused: false,
             showMilliseconds: 0,
+            timeline: '',
             type: 'player',
             width: 256
         })
@@ -156,11 +156,11 @@ Ox.SmallVideoTimeline = function(options, self) {
         return Ox.SmallVideoTimelineImage({
             duration: self.options.duration,
             editing: self.options.editing,
-            getTimelineURL: self.options.getTimelineURL,
             'in': self.options['in'],
             out: self.options.out,
             results: self.options.results,
             subtitles: self.options.subtitles,
+            timeline: self.options.timeline,
             width: self.imageWidth,
             type: self.options.type
         })
diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
index 65a6175b..e30d6f6f 100644
--- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
+++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
@@ -3,13 +3,13 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
-            duration: 1920,
+            duration: 0,
             editing: false,
-            getTimelineURL: null,
             'in': 0,
             out: 0,
             results: [],
             subtitles: [],
+            timeline: '',
             width: 256,
             type: 'player'
         })
@@ -21,8 +21,11 @@ Ox.SmallVideoTimelineImage = function(options, self) {
 
     // fixme: unless we do a block timeline,
     // we can always use a single 1920 png
+    // fixme: timeline doesn't have to go through canvas at all,
+    // just use one or more images
 
     self.height = self.options.type == 'player' ? 16 : 24;
+    self.imageWidth = Ox.isString(self.options.timeline) ? 1920 : Math.round(self.options.duration);
     self.imageHeight = self.options.type == 'player' ? 16 : 18;
     self.imageTop = self.options.type == 'player' ? 0 : 3;
 
@@ -86,10 +89,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         .appendTo(that.$element);
 
     function getImageURL(image, callback) {
-        Ox.print(image == 'results' || image == 'selection' ?
-                self.options.width : Math.ceil(self.options.duration))
         var width = image == 'results' || image == 'selection' ?
-                self.options.width : Math.ceil(self.options.duration),
+                self.options.width : self.imageWidth,
             height = self.imageHeight,
             canvas = $('<canvas>')
                 .attr({
@@ -104,10 +105,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 bottom = height;
             self.options.results.forEach(function(result) {
                 var left = Math.round(
-                        result['in'] * self.options.width / self.options.duration
+                        result['in'] / self.options.duration * width
                     ),
                     right = Math.round(
-                        result.out * self.options.width / self.options.duration
+                        result.out / self.options.duration * width
                     ) + 1;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
@@ -125,10 +126,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             });
         } else if (image == 'selection' && self.options.out > self.options['in']) {
             var left = Math.round(
-                    self.options['in'] * self.options.width / self.options.duration
+                    self.options['in'] / self.options.duration * width
                 ),
                 right = Math.round(
-                    self.options.out * self.options.width / self.options.duration
+                    self.options.out / self.options.duration * width
                 ) + 1,
                 top = 0,
                 bottom = height,
@@ -148,8 +149,12 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         } else if (image == 'subtitles') {
             var bottom = self.options.type == 'player' ? 14 : 15;
             self.options.subtitles.forEach(function(subtitle) {
-                var left = Math.round(subtitle['in']),
-                    right = Math.round(subtitle.out) + 1,
+                var left = Math.round(
+                        subtitle['in'] / self.options.duration * self.imageWidth
+                    ),
+                    right = Math.round(
+                        subtitle.out / self.options.duration * self.imageWidth
+                    ) + 1,
                     top = bottom - subtitle.text.split('\n').length - 2;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
@@ -169,10 +174,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             if (Ox.isString(self.options.timeline)) {
                 $image = $('<img>')
                     .attr({
-                        src: self.options.getTimelineURL(0)
+                        src: self.options.timeline
                     })
                     .load(function() {
-                        context.drawImage($image[0])
+                        context.drawImage($image[0], 0, top)
                         callback(canvas.toDataURL());
                     });
             } else {
@@ -181,7 +186,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 Ox.loop(images, function(i) {
                     var $image = $('<img>')
                         .attr({
-                            src: self.options.getTimelineURL(i)
+                            src: self.options.timeline(i)
                         })
                         .load(function() {
                             context.drawImage($image[0], i * 3600, top);
@@ -198,6 +203,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         }
     }
 
+    function getPosition() {
+        
+    }
+
     self.setOption = function(key, value) {
         if (key == 'in' || key == 'out') {
             self.$selection.attr({
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index daffad71..e65e07e2 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -1144,15 +1144,13 @@ Ox.VideoPlayer = function(options, self) {
         var $timeline = Ox.SmallVideoTimeline({
                 _offset: getTimelineLeft(),
                 duration: self.options.duration,
-                getTimelineURL: Ox.isString(self.options.timeline) ?
-                    function() { return self.options.timeline; } :
-                    self.options.timeline,
                 'in': self.options['in'],
                 out: self.options.out,
                 paused: self.options.paused,
                 results: self.results,
                 showMilliseconds: self.options.showMilliseconds,
                 subtitles: self.options.subtitles,
+                timeline: self.options.timeline,
                 type: 'player',
                 width: getTimelineWidth()
             })