diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
index 94d45782..a31dc336 100644
--- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
+++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
@@ -348,7 +348,7 @@ Ox.AnnotationPanel = function(options, self) {
                 ),
                 style: 'square',
                 title: 'set',
-                tooltip: 'Actions and Settings',
+                tooltip: 'Options',
                 type: 'image'
             })
             .css({float: 'left'})
diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
index c2822b88..c0cc3997 100644
--- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
@@ -17,6 +17,7 @@ Ox.BlockVideoTimeline = function(options, self) {
             showPointMarkers: false,
             state: 'default',
             subtitles: [],
+            type: '',
             width: 0
         })
         .options(options || {})
@@ -54,14 +55,15 @@ Ox.BlockVideoTimeline = function(options, self) {
     self.$image = Ox.SmallVideoTimelineImage({
         duration: self.options.duration,
         editing: self.options.editing,
+        imageURL: self.options.getImageURL,
         'in': self.options['in'],
+        mode: 'editor',
         out: self.options.out,
         results: self.options.results,
         state: self.options.state,
         subtitles: self.options.subtitles,
-        timeline: self.options.getImageURL,
-        width: Math.round(self.options.duration),
-        type: 'editor'
+        type: self.options.type,
+        width: Math.round(self.options.duration)
     });
 
     Ox.loop(self.lines, function(i) {
diff --git a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
index ee363261..fe7f5ed7 100644
--- a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js
@@ -24,9 +24,8 @@ Ox.LargeVideoTimeline = function(options, self) {
                 matches: [],
                 out: 0,
                 position: 0,
-                style: 'default', // fixme: there are no different styles yet
                 subtitles: [],
-                type: 'player',
+                type: '',
                 width: 0
             })
             .options(options || {})
@@ -158,7 +157,7 @@ Ox.LargeVideoTimeline = function(options, self) {
                 if (!self.$tiles[i]) {
                     self.$tiles[i] = $('<img>')
                         .attr({
-                            src: self.options.getImageURL(i)
+                            src: self.options.getImageURL(self.options.type, i)
                         })
                         .css({
                             left: (i * self.tileWidth) + 'px'
diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
index 31cbf698..d3ebaec5 100644
--- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
+++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
@@ -16,34 +16,34 @@ Ox.SmallVideoTimeline = function(options, self) {
             disabled: false,
             duration: 0,
             find: '',
+            imageURL: '',
             'in': 0,
+            mode: 'player',
             out: 0,
             paused: false,
             results: [],
             showMilliseconds: 0,
             state: 'default',
             subtitles: [],
-            timeline: '',
-            type: 'player',
             width: 256
         })
         .options(options || {})
         .addClass('OxSmallVideoTimeline')
         .css(Ox.extend({
             width: self.options.width + 'px'
-        }, self.options.type == 'player' ? {
+        }, self.options.mode == 'player' ? {
             background: 'rgb(0, 0, 0)',
             borderRadius: '8px'
         } : {}));
 
-    self.height = self.options.type == 'player' ? 16 : 24;
-    self.imageLeft = self.options.type == 'player' ? 8 : 4;
+    self.height = self.options.mode == 'player' ? 16 : 24;
+    self.imageLeft = self.options.mode == 'player' ? 8 : 4;
     self.imageWidth = self.options.width -
-        (self.options.type == 'player' ? 16 : 8)
-    self.imageHeight = self.options.type == 'player' ? 16 : 18;
-    self.interfaceLeft = self.options.type == 'player' ? 0 : 4;
-    self.interfaceTop = self.options.type == 'player' ? 0 : 2;
-    self.interfaceWidth = self.options.type == 'player' ? self.options.width : self.imageWidth;
+        (self.options.mode == 'player' ? 16 : 8)
+    self.imageHeight = self.options.mode == 'player' ? 16 : 18;
+    self.interfaceLeft = self.options.mode == 'player' ? 0 : 4;
+    self.interfaceTop = self.options.mode == 'player' ? 0 : 2;
+    self.interfaceWidth = self.options.mode == 'player' ? self.options.width : self.imageWidth;
 
     that.css({
         height: self.height + 'px'
@@ -77,7 +77,7 @@ Ox.SmallVideoTimeline = function(options, self) {
         textAlign: 'center'
     });
 
-    if (self.options.type == 'player') {
+    if (self.options.mode == 'player') {
         self.$positionMarker = $('<div>')
             .addClass('OxMarkerPlay' + (self.options.paused ? ' OxPaused' : ''))
             .append($('<div>').append($('<div>')))
@@ -92,7 +92,7 @@ Ox.SmallVideoTimeline = function(options, self) {
     }
     setPositionMarker();
 
-    if (self.options.type == 'editor') {
+    if (self.options.mode == 'editor') {
         self.$pointMarker = {};
         ['in', 'out'].forEach(function(point) {
             var titlecase = Ox.toTitleCase(point);
@@ -109,7 +109,7 @@ Ox.SmallVideoTimeline = function(options, self) {
     function getPosition(e) {
         var position = (
                 (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left)
-                - (self.options.type == 'player' ? 8 : 0)
+                - (self.options.mode == 'player' ? 8 : 0)
             ) * self.options.duration / self.imageWidth;
         return Ox.limit(position, 0, self.options.duration);
     }
@@ -128,14 +128,15 @@ Ox.SmallVideoTimeline = function(options, self) {
     function getTimelineImage() {
         return Ox.SmallVideoTimelineImage({
             duration: self.options.duration,
+            imageURL: self.options.imageURL,
             'in': self.options['in'],
+            mode: self.options.mode,
             out: self.options.out,
             results: self.options.results,
             subtitles: self.options.subtitles,
             state: self.options.state,
-            timeline: self.options.timeline,
-            width: self.imageWidth,
-            type: self.options.type
+            type: self.options.type,
+            width: self.imageWidth
         })
         .css({
             position: 'absolute',
@@ -187,14 +188,14 @@ Ox.SmallVideoTimeline = function(options, self) {
         self.$positionMarker.css({
             left: self.interfaceLeft + Math.round(
                 self.options.position * self.imageWidth / self.options.duration
-            ) - (self.options.type == 'editor' ? 5 : 0) + self.options._offset + 'px'
+            ) - (self.options.mode == 'editor' ? 5 : 0) + self.options._offset + 'px'
         });
     }
 
     function setWidth() {
         self.imageWidth = self.options.width -
-            (self.options.type == 'player' ? 16 : 8);
-        self.interfaceWidth = self.options.type == 'player' ?
+            (self.options.mode == 'player' ? 16 : 8);
+        self.interfaceWidth = self.options.mode == 'player' ?
             self.options.width : self.imageWidth;
         that.css({
             width: self.options.width + 'px'
@@ -208,7 +209,7 @@ Ox.SmallVideoTimeline = function(options, self) {
             width: self.interfaceWidth + 'px'
         });
         setPositionMarker();
-        if (self.options.type == 'editor') {
+        if (self.options.mode == 'editor') {
             setPointMarker('in');
             setPointMarker('out');
         }
@@ -219,10 +220,10 @@ Ox.SmallVideoTimeline = function(options, self) {
             self.$image.options({duration: value});
         } else if (key == 'in') {
             self.$image.options({'in': value});
-            self.options.type == 'editor' && setPointMarker('in');
+            self.options.mode == 'editor' && setPointMarker('in');
         } else if (key == 'out') {
             self.$image.options({out: value});
-            self.options.type == 'editor' && setPointMarker('out');
+            self.options.mode == 'editor' && setPointMarker('out');
         } else if (key == 'paused') {
             self.$positionMarker[
                 self.options.paused ? 'addClass' : 'removeClass'
diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
index 80f07d24..4f0e0baa 100644
--- a/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
+++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
@@ -6,14 +6,15 @@ Ox.SmallVideoTimelineImage = function(options, self) {
     var that = Ox.Element({}, self)
         .defaults({
             duration: 0,
+            imageURL: '',
             'in': 0,
+            mode: 'player',
             out: 0,
             results: [],
             state: 'default',
             subtitles: [],
-            timeline: '',
+            type: '',
             width: 256,
-            type: 'player'
         })
         .options(options || {})
         .css({
@@ -21,24 +22,24 @@ Ox.SmallVideoTimelineImage = function(options, self) {
             width: self.options.width + 'px'
         });
 
-    self.images = Ox.isString(self.options.timeline) ?
+    self.images = Ox.isString(self.options.imageURL) ?
         1 : Math.ceil(self.options.duration / 3600);
-    self.imageWidth = Ox.isString(self.options.timeline) ?
+    self.imageWidth = Ox.isString(self.options.imageURL) ?
         1920 : Math.round(self.options.duration);
-    self.height = self.options.type == 'player' ? 16 : 24;
-    self.imageHeight = self.options.type == 'player' ? 16 : 18;
-    self.imageTop = self.options.type == 'player' ? 0 : 3;
-    self.timelineTop = self.options.type == 'player' ? 0 : 4;
+    self.height = self.options.mode == 'player' ? 16 : 24;
+    self.imageHeight = self.options.mode == 'player' ? 16 : 18;
+    self.imageTop = self.options.mode == 'player' ? 0 : 3;
+    self.timelineTop = self.options.mode == 'player' ? 0 : 4;
     self.theme = Ox.Theme();
 
     that.css({
         height: self.height + 'px'
     });
 
-    if (Ox.isString(self.options.timeline)) {
+    if (Ox.isString(self.options.imageURL)) {
         self.$timeline = $('<img>')
             .attr({
-                src: self.options.timeline
+                src: self.options.imageURL
             })
             .css({
                 position: 'absolute',
@@ -51,7 +52,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
         Ox.loop(self.images, function(i) {
             $('<img>')
                 .attr({
-                    src: self.options.timeline(i)
+                    src: self.options.imageURL(self.options.type, i)
                 })
                 .css({
                     position: 'absolute',
@@ -124,7 +125,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     ) + 1;
                 Ox.loop(left, right, function(x) {
                     Ox.loop(top, bottom, function(y) {
-                        var alpha = self.options.type == 'editor'
+                        var alpha = self.options.mode == 'editor'
                                 && (y == top || y == bottom - 1) ? 255 : 128,
                             color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
                                 ? [0, 0, 0] : [255, 255, 0],
@@ -151,7 +152,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                     : [[32, 32, 32], [224, 224, 224]];
             Ox.loop(left, right, function(x) {
                 Ox.loop(top, bottom, function(y) {
-                    var alpha = self.options.type == 'editor'
+                    var alpha = self.options.mode == 'editor'
                             && (y == top || y == bottom - 1) ? 255 : 128,
                         color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
                         index = x * 4 + y * 4 * width;
@@ -162,7 +163,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
                 });
             });
         } else if (image == 'subtitles') {
-            var bottom = self.options.type == 'player' ? 14 : 15;
+            var bottom = self.options.mode == 'player' ? 14 : 15;
             self.options.subtitles.forEach(function(subtitle) {
                 var left = Math.round(
                         subtitle['in'] / self.options.duration * self.imageWidth
diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js
index 8e91dd2d..dce16fae 100644
--- a/source/Ox.UI/js/Video/Ox.VideoEditor.js
+++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js
@@ -34,8 +34,8 @@ Ox.VideoEditor = function(options, self) {
                 find: '',
                 fps: 25,
                 getFrameURL: null,
-                getLargeTimelineImageURL: null,
-                getSmallTimelineImageURL: null,
+                getLargeTimelineURL: null,
+                getSmallTimelineURL: null,
                 'in': 0,
 				height: 0,
                 layers: [],
@@ -53,6 +53,8 @@ Ox.VideoEditor = function(options, self) {
                 showLayers: {},
                 showUsers: false,
                 subtitles: [],
+                timeline: '',
+                timelines: [],
                 tooltips: false,
                 videoRatio: 16/9,
                 videoSize: 'small',
@@ -300,14 +302,14 @@ Ox.VideoEditor = function(options, self) {
             cuts: self.options.cuts,
             duration: self.options.duration,
             find: self.options.find,
-            getImageURL: self.options.getLargeTimelineImageURL,
+            getImageURL: self.options.getLargeTimelineURL,
             id: 'timelineLarge',
             'in': self.options['in'],
             //matches: self.options.matches,
             out: self.options.out,
             position: self.options.position,
             subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
-            type: 'editor',
+            type: self.options.timeline,
             width: self.sizes.timeline[0].width
         })
         .css({
@@ -325,7 +327,7 @@ Ox.VideoEditor = function(options, self) {
             cuts: self.options.cuts,
             duration: self.options.duration,
             find: self.options.find,
-            getImageURL: self.options.getSmallTimelineImageURL,
+            getImageURL: self.options.getSmallTimelineURL,
             id: 'timelineSmall',
             'in': self.options['in'],
             out: self.options.out,
@@ -334,6 +336,7 @@ Ox.VideoEditor = function(options, self) {
             showPointMarkers: true,
             state: self.options.selected ? 'selected' : 'default',
             subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
+            type: self.options.timeline,
             videoId: self.options.videoId,
             width: self.sizes.timeline[1].width
         })
@@ -432,10 +435,7 @@ Ox.VideoEditor = function(options, self) {
     self.$menuButton = Ox.MenuButton({
             items: Ox.merge(
                 [
-                    {group: 'size', min: 1, max: 1, items: [
-                        {id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'},
-                        {id: 'large', title: 'Large Player', checked: self.options.videoSize == 'large'}
-                    ]},
+                    {id: 'size', title: 'Large Player', checked: self.options.videoSize == 'large'},
                     {},
                     {group: 'resolution', min: 1, max: 1, items: self.resolutions}
                 ],
@@ -444,6 +444,17 @@ Ox.VideoEditor = function(options, self) {
                     {id: 'subtitles', title: 'Show Subtitles', checked: self.options.enableSubtitles}
                 ] : [],
                 [
+                    {},
+                    {id: 'timelines', title: 'Timeline', disabled: true},
+                    {group: 'timeline', min: 1, max: 1, items: Ox.map(
+                        self.options.timelines,
+                        function(timeline) {
+                            return Ox.extend({
+                                checked: timeline.id == self.options.timeline,
+                                disabled: true
+                            }, timeline);
+                        }
+                    )},
                     {},
                     {id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload },
                     {id: 'downloadSelection', title: 'Download Selection...', disabled: !self.options.enableDownload},
@@ -465,7 +476,7 @@ Ox.VideoEditor = function(options, self) {
             ),
             style: 'square',
             title: 'set',
-            tooltip: 'Actions and Settings',
+            tooltip: 'Options',
             type: 'image'
         })
         .css({float: 'left'})
@@ -509,6 +520,8 @@ Ox.VideoEditor = function(options, self) {
                     toggleSize();
                 } else if (id == 'subtitles') {
                     toggleSubtitles();
+                } else if (id == 'timeline') {
+                    // data.checked[0].id
                 }
             },
             hide: function() {
diff --git a/source/Ox.UI/js/Video/Ox.VideoPanel.js b/source/Ox.UI/js/Video/Ox.VideoPanel.js
index 2b75cd83..72d92a79 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPanel.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPanel.js
@@ -30,6 +30,7 @@ Ox.VideoPanel = function(options, self) {
                 enableSubtitles: false,
                 find: '',
                 fullscreen: false,
+                getLargeTimelineURL: null,
                 height: 0,
                 'in': 0,
                 layers: [],
@@ -49,7 +50,9 @@ Ox.VideoPanel = function(options, self) {
                 showLayers: {},
                 showTimeline: true,
                 showUsers: false,
+                smallTimelineURL: '',
                 subtitles: [],
+                timeline: '',
                 tooltips: false,
                 video: '',
                 volume: 1,
@@ -103,7 +106,7 @@ Ox.VideoPanel = function(options, self) {
             resolution: self.options.resolution,
             scaleToFill: self.options.scaleToFill,
             subtitles: self.options.subtitles,
-            timeline: self.options.timeline,
+            timeline: self.options.smallTimelineURL,
             video: self.options.video,
             volume: self.options.volume,
             width: getPlayerWidth()
@@ -159,10 +162,11 @@ Ox.VideoPanel = function(options, self) {
     self.$timeline = Ox.LargeVideoTimeline({
             duration: self.options.duration,
             find: self.options.find,
-            getImageURL: self.options.getTimelineImageURL,
+            getImageURL: self.options.getLargeTimelineURL,
             position: self.options.position,
             subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
             videoId: self.options.videoId,
+            type: self.options.timeline,
             width: getTimelineWidth()
         })
         .css({left: '4px', top: '4px'})
diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
index 4be4f698..d946b834 100644
--- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js
@@ -1397,15 +1397,15 @@ Ox.VideoPlayer = function(options, self) {
                 disabled: !self.options.enableTimeline,
                 duration: self.options.duration,
                 find: self.options.find,
+                imageURL: self.options.timeline,
                 'in': self.options['in'],
+                mode: 'player',
                 out: self.options.out,
                 paused: self.options.paused,
                 position: self.options.position,
                 results: self.results,
                 showMilliseconds: self.options.showMilliseconds,
                 subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
-                timeline: self.options.timeline,
-                type: 'player',
                 width: getTimelineWidth()
             })
             .css({float: 'left'})
diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
index ddc9426c..b4691a95 100644
--- a/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
+++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
@@ -23,7 +23,7 @@ Ox.VideoTimelinePanel = function(options, self) {
                 duration: 0,
                 followPlayer: false,
                 getFrameURL: null,
-                getTimelineImageURL: null,
+                getLargeTimelineURL: null,
                 height: 0,
                 layers: [],
                 loop: false, // fixme: used?
@@ -38,9 +38,9 @@ Ox.VideoTimelinePanel = function(options, self) {
                 showAnnotationsMap: false,
                 showLayers: {},
                 showUsers: false,
+                smallTimelineURL: '',
                 subtitles: [],
                 timeline: '',
-                timelineImageURL: '',
                 timelines: [],
                 video: '',
                 volume: 1,
@@ -69,15 +69,15 @@ Ox.VideoTimelinePanel = function(options, self) {
             duration: self.options.duration,
             followPlayer: self.options.followPlayer,
             getFrameURL: self.options.getFrameURL,
-            getTimelineImageURL: self.options.getTimelineImageURL,
+            getLargeTimelineURL: self.options.getLargeTimelineURL,
             height: self.options.height,
             muted: self.options.muted,
             paused: true,
             position: self.options.position,
             resolution: self.options.resolution,
+            smallTimelineURL: self.options.smallTimelineURL,
             subtitles: self.options.subtitles,
             timeline: self.options.timeline,
-            timelineImageURL: self.options.timelineImageURL,
             timelines: self.options.timelines,
             video: self.options.video,
             videoRatio: self.options.videoRatio,
@@ -100,6 +100,9 @@ Ox.VideoTimelinePanel = function(options, self) {
             position: function(data) {
                 setPosition(data.position);
             },
+            timeline: function(data) {
+                that.triggerEvent('timeline', data);
+            },
             volume: function(data) {
                 that.triggerEvent('volume', data);
             }
diff --git a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js
index eb12e3a2..c111cb67 100644
--- a/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js
+++ b/source/Ox.UI/js/Video/Ox.VideoTimelinePlayer.js
@@ -12,7 +12,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
             find: '',
             followPlayer: false,
             getFrameURL: null,
-            getTimelineImageURL: null,
+            getLargeTimelineURL: null,
             height: 0,
             'in': 0,
             matches: [],
@@ -21,9 +21,9 @@ Ox.VideoTimelinePlayer = function(options, self) {
             paused: false,
             position: 0,
             showMilliseconds: false,
+            smallTimelineURL: '',
             subtitles: [],
             timeline: '',
-            timelineImageURL: '',
             timelines: [],
             video: '',
             videoRatio: 1,
@@ -79,7 +79,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
             change: function(data) {
                 var id = data.id;
                 if (id == 'timeline') {
-                    // ...
+                    // data.checked[0].id
                 } else if (id == 'followPlayer') {
                     self.options.followPlayer = data.checked;
                     if (!self.options.paused && self.options.followPlayer) {
@@ -385,11 +385,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
     function getSmallTimeline() {
         var $timeline = Ox.SmallVideoTimeline({
                 duration: self.options.duration,
+                imageURL: self.options.smallTimelineURL,
+                mode: 'player',
                 paused: self.options.paused,
                 position: self.options.position,
                 showMilliseconds: self.options.showMilliseconds,
-                timeline: self.options.timelineImageURL,
-                type: 'player',
                 width: getSmallTimelineWidth()
             })
             .css({float: 'left'})
@@ -506,7 +506,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
             Ox.loop(self.tiles, function(i) {
                 $('<img>')
                     .attr({
-                        src: self.options.getTimelineImageURL(i)
+                        src: self.options.getLargeTimelineURL(self.options.type, i)
                     })
                     .css({
                         position: 'absolute',