diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index 30dae8b5..f01fef99 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -930,6 +930,9 @@ Lists
 .OxTextList .OxPage {
     position: absolute;
 }
+.OxTextList.OxDrop .OxItem .OxCell {
+    color: green;
+}
 
 /*
 ================================================================================
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index f985afea..69119344 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -1175,15 +1175,15 @@ requires
                 */
                 if (Ox.isObject(arguments[0])) {
                     $.each(arguments[0], function(event, data) {
-                        //if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend'].indexOf(event) == -1) {
+                        if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(event) == -1) {
                             Ox.print(that.id, self.options.id, 'trigger', event, data);
-                        //}
+                        }
                         self.$eventHandler.trigger('ox_' + event, data);
                     });
                 } else {
-                    //if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend'].indexOf(arguments[0]) == -1) {
+                    if (['mousedown', 'mouserepeat', 'anyclick', 'singleclick', 'doubleclick', 'dragstart', 'drag', 'dragend', 'playing'].indexOf(arguments[0]) == -1) {
                         Ox.print(that.id, self.options ? self.options.id : '', 'trigger', arguments[0], arguments[1] || {});
-                    //}
+                    }
                     self.$eventHandler.trigger('ox_' + arguments[0], arguments[1] || {});
                 }
                 return that;
@@ -1558,41 +1558,44 @@ requires
         }
 
         function drag(event, e) {
-            var d = e[self.clientXY] - self.drag.startPos
-                size = self.options.size;
-            self.options.size = Ox.limit(
-                self.drag.startSize + d * (self.leftOrTop ? 1 : -1),
-                self.options.resize[0],
-                self.options.resize[self.options.resize.length - 1]
-            );
-            $.each(self.options.resize, function(i, v) {
-                if (self.options.size >= v - 8 && self.options.size <= v + 8) {
-                    self.options.size = v;
-                    return false;
+            if (self.options.resizable && !self.options.collapsed) {
+                var d = e[self.clientXY] - self.drag.startPos,
+                    size = self.options.size;
+                self.options.size = Ox.limit(
+                    self.drag.startSize + d * (self.leftOrTop ? 1 : -1),
+                    self.options.resize[0],
+                    self.options.resize[self.options.resize.length - 1]
+                );
+                $.each(self.options.resize, function(i, v) {
+                    if (self.options.size >= v - 8 && self.options.size <= v + 8) {
+                        self.options.size = v;
+                        return false;
+                    }
+                });
+                if (self.options.size != size) {
+                    that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
+                    // fixme: send {size: x}, not x
+                    if (self.leftOrTop) {
+                        self.options.elements[0]
+                            .css(self.dimensions[1], self.options.size + 'px')
+                        self.options.elements[1]
+                            .css(self.edges[2], (self.options.size + 1) + 'px')
+                    } else {
+                        self.options.elements[0]
+                            .css(self.edges[3], (self.options.size + 1) + 'px')
+                        self.options.elements[1]
+                            .css(self.dimensions[1], self.options.size + 'px')
+                    }
+                    triggerEvents('resize');
+                    self.options.parent.updateSize(self.leftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
                 }
-            });
-            if (self.options.size != size) {
-                that.css(self.edges[self.leftOrTop ? 2 : 3], self.options.size + 'px');
-                // fixme: send {size: x}, not x
-                if (self.leftOrTop) {
-                    self.options.elements[0]
-                        .css(self.dimensions[1], self.options.size + 'px')
-                    self.options.elements[1]
-                        .css(self.edges[2], (self.options.size + 1) + 'px')
-                } else {
-                    self.options.elements[0]
-                        .css(self.edges[3], (self.options.size + 1) + 'px')
-                    self.options.elements[1]
-                        .css(self.dimensions[1], self.options.size + 'px')
-                }
-                triggerEvents('resize');
-                self.options.parent.updateSize(self.leftOrTop ? 0 : 1, self.options.size); // fixme: listen to event instead?
-                
             }
         }
 
         function dragend() {
-            self.options.size != self.drag.startSize && triggerEvents('resizeend');
+            if (self.options.resizable && !self.options.collapsed) {
+                self.options.size != self.drag.startSize && triggerEvents('resizeend');
+            }
         }
 
         function toggle() {
@@ -6358,7 +6361,8 @@ requires
         if (self.options.draggable) {
             that.bind({
                 dragstart: function(e) {
-                    //Ox.print('DRAGSTART', e);
+                    //alert('DRAGSTART')
+                    Ox.print('DRAGSTART', e);
                 }
             });
         }
@@ -7811,11 +7815,9 @@ requires
                         $(this).prev().trigger('click')
                     })
                     .appendTo(that.$head.$content.$element);
-                Ox.print('okok')
                 $resize = new Ox.Element()
                     .addClass('OxResize')
                     .appendTo(that.$head.$content.$element);
-                Ox.print('nono')
                 if (self.options.columnsResizable) {
                     $resize.addClass('OxResizable')
                         .bindEvent({
@@ -10212,216 +10214,7 @@ requires
     ============================================================================
     */
 
-    /**
-    */
-    Ox.LargeTimeline = function(options, self) {
-
-        var self = self || {},
-            that = new Ox.Element('div', self)
-                .defaults({
-                    cuts: [],
-                    duration: 0,
-                    find: '',
-                    matches: [],
-                    points: [0, 0],
-                    position: 0,
-                    style: 'default',
-                    subtitles: [],
-                    videoId: '',
-                    width: 0
-                })
-                .options(options || {})
-                .addClass('OxTimelineLarge')
-                .mouseleave(mouseleave)
-                .mousemove(mousemove)
-                .bindEvent({
-                    anyclick: click,
-                    dragstart: dragstart,
-                    drag: drag
-                });
-
-        $.extend(self, {
-            $cuts: [],
-            $markerPoint: [],
-            $subtitles: [],
-            $tiles: {},
-            $tooltip: new Ox.Tooltip(),
-            center: parseInt(self.options.width / 2),
-            element: that.$element[0],
-            fps: 25,
-            height: 64,
-            tileWidth: 1500
-        });
-        self.tiles = self.options.duration * self.fps / self.tileWidth;
-
-        self.$timeline = $('<div>')
-            .css({
-                left: self.center + 'px'
-            })
-            .appendTo(that.$element)
-
-        $.each(self.options.subtitles, function(i, v) {
-            self.$subtitles[i] = $('<div>')
-                .addClass('OxSubtitle' + (self.options.matches.indexOf(i) > -1 ? ' OxHighlight' : ''))
-                .css({
-                    left: (v['in'] * self.fps) + 'px',
-                    width: (((v['out'] - v['in']) * self.fps) - 4) + 'px'
-                })
-                .html(Ox.highlight(v.text, self.options.find))
-                .appendTo(self.$timeline)
-        });
-
-        $.each(self.options.cuts, function(i, v) {
-            self.$cuts[i] = $('<img>')
-                .addClass('OxCut')
-                .attr({
-                    src: '/static/oxjs/build/png/ox.ui/videoMarkerCut.png'
-                })
-                .css({
-                    left: (v * self.fps) + 'px'
-                })
-                .appendTo(self.$timeline)
-        });
-
-        self.$markerPosition = $('<img>')
-            .addClass('OxMarkerPosition')
-            .attr({
-                src: '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
-            })
-            .appendTo(that.$element);
-        setMarker();
-
-        $.each(['In', 'Out'], function(i, v) {
-            self.$markerPoint[i] = $('<img>')
-                .addClass('OxMarkerPoint' + v)
-                .attr({
-                    src: '/static/oxjs/build/png/ox.ui/videoMarker' + v + '.png'
-                })
-                .appendTo(self.$timeline);
-            setMarkerPoint(i);
-        });
-
-        setWidth();
-        setPosition();
-
-        function click(event, e) {
-            self.options.position = Ox.limit(
-                self.options.position + (e.clientX - that.$element.offset().left - self.center) / self.fps,
-                0, self.options.duration
-            );
-            setPosition();
-            triggerChangeEvent();
-        }
-
-        function dragstart(event, e) {
-            self.drag = {x: e.clientX};
-        }
-
-        function drag(event, e) {
-            self.options.position = Ox.limit(
-                self.options.position + (self.drag.x - e.clientX) / self.fps,
-                0, self.options.duration
-            );
-            self.drag.x = e.clientX;
-            setPosition();
-            triggerChangeEvent();
-        }
-
-        function mouseleave(e) {
-            self.clientX = 0;
-            self.clientY = 0;
-            self.$tooltip.hide();
-        }
-
-        function mousemove(e) {
-            self.clientX = e.clientX;
-            self.clientY = e.clientY;
-            updateTooltip();
-        }
-
-        function setMarkerPoint(i) {
-            self.$markerPoint[i].css({
-                left: (self.options.points[i] * self.fps) + 'px'
-            });
-        }
-
-        function setMarker() {
-            self.$markerPosition.css({
-                left: (self.center - 4) + 'px',
-            });
-        }
-
-        function setPosition() {
-            self.tile = parseInt(self.options.position * self.fps / self.tileWidth);
-            self.$timeline.css({
-                marginLeft: (-self.options.position * self.fps) + 'px'
-            });
-            $.each(Ox.range(Math.max(self.tile - 1, 0), Math.min(self.tile + 2, self.tiles)), function(i, v) {
-                if (!self.$tiles[v]) {
-                    self.$tiles[v] = $('<img>')
-                        .attr({
-                            src: '/' + self.options.videoId + '/timelines/' +
-                                (self.options.style == 'default' ? 'timeline' : self.options.style) + '.64.' + v + '.png'
-                        })
-                        .css({
-                            left: (v * self.tileWidth) + 'px'
-                        })
-                        .appendTo(self.$timeline);
-                }
-            });
-            if (self.clientX && self.clientY) {
-                updateTooltip();
-            }
-        }
-
-        function setWidth() {
-            self.center = parseInt(self.options.width / 2);
-            that.css({
-                width: self.options.width + 'px'
-            });
-            self.$timeline.css({
-                left: self.center + 'px'
-            });
-            setMarker();
-        }
-
-        function triggerChangeEvent() {
-            that.triggerEvent('change', {
-                position: self.options.position
-            });
-        }
-
-        function updateTooltip() {
-            var position = self.options.position + (self.clientX - that.offset().left - self.center) / self.fps;
-            if (position >= 0 && position <= self.options.duration) {
-                self.$tooltip
-                    .options({
-                        title: Ox.formatDuration(position, 3)
-                    })
-                    .show(self.clientX, self.clientY);
-            } else {
-                self.$tooltip.hide();
-            }
-        }
-
-        self.onChange = function(key, value) {
-            if (key == 'points') {
-                setMarkerPoint(0);
-                setMarkerPoint(1);
-            } else if (key == 'position') {
-                setPosition();
-            } else if (key == 'width') {
-                setWidth();
-            }
-        };
-
-        return that;
-
-    };
-
-    /**
-    */
-    Ox.SmallTimeline = function(options, self) {
+    Ox.BlockTimeline = function(options, self) {
 
         var self = self || {},
             that = new Ox.Element('div', self)
@@ -10721,6 +10514,401 @@ requires
 
     };
 
+    /**
+    */
+    Ox.LargeTimeline = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element('div', self)
+                .defaults({
+                    cuts: [],
+                    duration: 0,
+                    find: '',
+                    matches: [],
+                    points: [0, 0],
+                    position: 0,
+                    style: 'default',
+                    subtitles: [],
+                    videoId: '',
+                    width: 0
+                })
+                .options(options || {})
+                .addClass('OxTimelineLarge')
+                .mouseleave(mouseleave)
+                .mousemove(mousemove)
+                .bindEvent({
+                    anyclick: click,
+                    dragstart: dragstart,
+                    drag: drag
+                });
+
+        $.extend(self, {
+            $cuts: [],
+            $markerPoint: [],
+            $subtitles: [],
+            $tiles: {},
+            $tooltip: new Ox.Tooltip(),
+            center: parseInt(self.options.width / 2),
+            element: that.$element[0],
+            fps: 25,
+            height: 64,
+            tileWidth: 1500
+        });
+        self.tiles = self.options.duration * self.fps / self.tileWidth;
+
+        self.$timeline = $('<div>')
+            .css({
+                left: self.center + 'px'
+            })
+            .appendTo(that.$element)
+
+        $.each(self.options.subtitles, function(i, v) {
+            self.$subtitles[i] = $('<div>')
+                .addClass('OxSubtitle' + (self.options.matches.indexOf(i) > -1 ? ' OxHighlight' : ''))
+                .css({
+                    left: (v['in'] * self.fps) + 'px',
+                    width: (((v['out'] - v['in']) * self.fps) - 4) + 'px'
+                })
+                .html(Ox.highlight(v.text, self.options.find))
+                .appendTo(self.$timeline)
+        });
+
+        $.each(self.options.cuts, function(i, v) {
+            self.$cuts[i] = $('<img>')
+                .addClass('OxCut')
+                .attr({
+                    src: '/static/oxjs/build/png/ox.ui/videoMarkerCut.png'
+                })
+                .css({
+                    left: (v * self.fps) + 'px'
+                })
+                .appendTo(self.$timeline)
+        });
+
+        self.$markerPosition = $('<img>')
+            .addClass('OxMarkerPosition')
+            .attr({
+                src: '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
+            })
+            .appendTo(that.$element);
+        setMarker();
+
+        $.each(['In', 'Out'], function(i, v) {
+            self.$markerPoint[i] = $('<img>')
+                .addClass('OxMarkerPoint' + v)
+                .attr({
+                    src: '/static/oxjs/build/png/ox.ui/videoMarker' + v + '.png'
+                })
+                .appendTo(self.$timeline);
+            setMarkerPoint(i);
+        });
+
+        setWidth();
+        setPosition();
+
+        function click(event, e) {
+            self.options.position = Ox.limit(
+                self.options.position + (e.clientX - that.$element.offset().left - self.center) / self.fps,
+                0, self.options.duration
+            );
+            setPosition();
+            triggerChangeEvent();
+        }
+
+        function dragstart(event, e) {
+            self.drag = {x: e.clientX};
+        }
+
+        function drag(event, e) {
+            self.options.position = Ox.limit(
+                self.options.position + (self.drag.x - e.clientX) / self.fps,
+                0, self.options.duration
+            );
+            self.drag.x = e.clientX;
+            setPosition();
+            triggerChangeEvent();
+        }
+
+        function mouseleave(e) {
+            self.clientX = 0;
+            self.clientY = 0;
+            self.$tooltip.hide();
+        }
+
+        function mousemove(e) {
+            self.clientX = e.clientX;
+            self.clientY = e.clientY;
+            updateTooltip();
+        }
+
+        function setMarkerPoint(i) {
+            self.$markerPoint[i].css({
+                left: (self.options.points[i] * self.fps) + 'px'
+            });
+        }
+
+        function setMarker() {
+            self.$markerPosition.css({
+                left: (self.center - 4) + 'px',
+            });
+        }
+
+        function setPosition() {
+            self.tile = parseInt(self.options.position * self.fps / self.tileWidth);
+            self.$timeline.css({
+                marginLeft: (-self.options.position * self.fps) + 'px'
+            });
+            $.each(Ox.range(Math.max(self.tile - 1, 0), Math.min(self.tile + 2, self.tiles)), function(i, v) {
+                if (!self.$tiles[v]) {
+                    self.$tiles[v] = $('<img>')
+                        .attr({
+                            src: '/' + self.options.videoId + '/timelines/' +
+                                (self.options.style == 'default' ? 'timeline' : self.options.style) + '.64.' + v + '.png'
+                        })
+                        .css({
+                            left: (v * self.tileWidth) + 'px'
+                        })
+                        .appendTo(self.$timeline);
+                }
+            });
+            if (self.clientX && self.clientY) {
+                updateTooltip();
+            }
+        }
+
+        function setWidth() {
+            self.center = parseInt(self.options.width / 2);
+            that.css({
+                width: self.options.width + 'px'
+            });
+            self.$timeline.css({
+                left: self.center + 'px'
+            });
+            setMarker();
+        }
+
+        function triggerChangeEvent() {
+            that.triggerEvent('change', {
+                position: self.options.position
+            });
+        }
+
+        function updateTooltip() {
+            var position = self.options.position + (self.clientX - that.offset().left - self.center) / self.fps;
+            if (position >= 0 && position <= self.options.duration) {
+                self.$tooltip
+                    .options({
+                        title: Ox.formatDuration(position, 3)
+                    })
+                    .show(self.clientX, self.clientY);
+            } else {
+                self.$tooltip.hide();
+            }
+        }
+
+        self.onChange = function(key, value) {
+            if (key == 'points') {
+                setMarkerPoint(0);
+                setMarkerPoint(1);
+            } else if (key == 'position') {
+                setPosition();
+            } else if (key == 'width') {
+                setWidth();
+            }
+        };
+
+        return that;
+
+    };
+
+    Ox.SmallTimeline = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element('div', self)
+                .defaults({
+                    duration: 0,
+                    find: '',
+                    matches: [],
+                    points: [0, 0],
+                    position: 0,
+                    subtitles: [],
+                    videoId: '',
+                    width: 0
+                })
+                .options(options || {})
+                .addClass('OxTimelineSmall')
+                .mousedown(mousedown)
+                .mouseleave(mouseleave)
+                .mousemove(mousemove)
+                .bindEvent({
+                    drag: function(event, e) {
+                        mousedown(e);
+                    }
+                });
+
+        $.extend(self, {
+            $images: [],
+            $markerPoint: [],
+            $subtitles: [],
+            hasSubtitles: self.options.subtitles.length,
+            height: 16,
+            margin: 8
+        });
+
+		that.css({
+			width: (self.options.width + self.margin) + 'px',
+			height: (self.height + self.margin) + 'px'
+		});
+
+        self.$line = $('<img>')
+            .attr({
+                src: '/' + self.options.videoId + '/timelines/timeline.16.0.png'
+            })
+            .css({
+                position: 'absolute',
+                left: '4px',
+                width: self.options.width,
+                height: '16px'
+            })
+            .appendTo(that.$element);
+
+        self.$markerPosition = $('<img>')
+            .addClass('OxMarkerPosition')
+            .attr({
+                src: '/static/oxjs/build/png/ox.ui/videoMarkerPlay.png'
+            })
+            .css({
+                position: 'absolute',
+                width: '9px',
+                height: '5px',
+                zIndex: 10
+            })
+            .appendTo(that.$element);
+
+        setPosition();
+
+        $.each(['in', 'out'], function(i, v) {
+            var titleCase = Ox.toTitleCase(v);
+            self.$markerPoint[i] = $('<img>')
+                .addClass('OxMarkerPoint' + titleCase)
+                .attr({
+                    src: '/static/oxjs/build/png/ox.ui/videoMarker' + titleCase + '.png'
+                })
+                .appendTo(that.$element);
+            setMarkerPoint(i);
+        });
+
+        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 ? e.offsetX : e.clientX - $(e.target).offset().left);
+        }
+
+        function getSubtitle(position) {
+            var subtitle = null;
+            $.each(self.options.subtitles, function(i, v) {
+                if (v['in'] <= position && v['out'] >= position) {
+                    subtitle = v;
+                    return false;
+                }
+            });
+            return subtitle;
+        }
+
+        function mousedown(e) {
+            var $target = $(e.target);
+            if (
+                $target.hasClass('OxTimelineSmallImage') ||
+                $target.hasClass('OxTimelineSmallSubtitles')
+            ) {
+                self.options.position = getPosition(e);
+                setPosition();
+                that.triggerEvent('change', {
+                    position: self.options.position
+                });
+            }
+            e.preventDefault();
+        }
+
+        function mouseleave(e) {
+            self.$tooltip && self.$tooltip.hide();
+        }
+
+        function mousemove(e) {
+            var $target = $(e.target),
+                position,
+                subtitle;
+            if (
+                $target.hasClass('OxTimelineSmallImage') ||
+                $target.hasClass('OxTimelineSmallSubtitles')
+            ) {
+                position = getPosition(e),
+                subtitle = getSubtitle(position);
+                self.$tooltip = new Ox.Tooltip({
+                        title: subtitle ?
+                            '<span class=\'OxBright\'>' +
+                            Ox.highlight(subtitle.text, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
+                            Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
+                            Ox.formatDuration(position, 3)
+                    })
+                    .css({
+                        textAlign: 'center'
+                    })
+                    .show(e.clientX, e.clientY);
+            } else {
+                self.$tooltip && self.$tooltip.hide();
+            }
+
+        }
+
+        function setMarker() {
+            self.$markerPosition
+                .css({
+                    left: (self.options.position % self.options.width) + 'px',
+                    top: (parseInt(self.options.position / self.options.width) * (self.height + self.margin) + 2) + 'px',
+                });
+        }
+
+        function setMarkerPoint(i) {
+            var position = self.options.points[i];
+            self.$markerPoint[i]
+                .css({
+                    left: (position % self.options.width) + 'px',
+                    top: (parseInt(position / self.options.width) * (self.height + self.margin) + 16) + 'px',
+                });
+        }
+
+        function setPosition() {
+            self.options.position = Ox.limit(self.options.position, 0, self.options.duration);
+            setMarker();
+        }
+
+        function setWidth() {
+            self.lines = Math.ceil(self.options.duration / self.options.width);
+			that.css({
+				width: (self.options.width + self.margin) + 'px',
+				height: (self.height + self.margin) + 'px'
+			});
+            setMarker();
+            setMarkerPoint(0);
+            setMarkerPoint(1);
+        }
+
+        self.onChange = function(key, value) {
+            //Ox.print('onChange:', key, value)
+            if (key == 'points') {
+                //Ox.print('key', key, 'value', value)
+                setMarkerPoint(0);
+                setMarkerPoint(1);
+            } else if (key == 'position') {
+                setPosition();
+            } else if (key == 'width') {
+                setWidth();
+            }
+        };
+
+        return that;
+
+    };
     /**
     */
     Ox.VideoEditor = function(options, self) {
@@ -10766,7 +10954,7 @@ requires
         self.sizes = getSizes();
 
         $.each(['play', 'in', 'out'], function(i, type) {
-            self.$player[i] = new Ox.VideoPlayer({
+            self.$player[i] = new Ox.VideoEditorPlayer({
                     duration: self.options.duration,
                     find: self.options.find,
                     height: self.sizes.player[i].height,
@@ -10796,7 +10984,7 @@ requires
             }
         });
         self.$player[0].bindEvent({
-            change: changePlayer,
+            playing: changePlayer,
             togglesize: togglePlayerSize
         });
 
@@ -10820,7 +11008,7 @@ requires
             .bindEvent('changeEnd', changeTimelineLarge)
             .appendTo(that);
 
-        self.$timeline[1] = new Ox.SmallTimeline({
+        self.$timeline[1] = new Ox.BlockTimeline({
                 cuts: self.options.cuts,
                 duration: self.options.duration,
                 find: self.options.find,
@@ -11169,7 +11357,7 @@ requires
 
     /**
     */
-    Ox.VideoPlayer = function(options, self) {
+    Ox.VideoEditorPlayer = function(options, self) {
 
         var self = self || {},
             that = new Ox.Element('div', self)
@@ -11194,17 +11382,20 @@ requires
         self.controlsHeight = 16;
 
         if (self.options.type == 'play') {
-            self.$video = $('<video>')
-                .attr({
-                    preload: 'auto',
-                    src: self.options.url
+            self.$video = new Ox.VideoElement({
+                    height: self.options.height,
+                    paused: true,
+                    points: self.options.points,
+                    position: self.options.position,
+                    url: self.options.url,
+                    width: self.options.width
                 })
-                .css({
-                    height: self.options.height + 'px',
-                    width: self.options.width + 'px'
+                .bindEvent({
+                    paused: paused,
+                    playing: playing
                 })
-                .appendTo(that.$element);
-            self.video = self.$video[0];
+                .appendTo(that);
+            self.video = self.$video.$element[0];
         } else {
             self.$video = $('<img>')
                 .css({
@@ -11312,8 +11503,8 @@ requires
             self.$sizeButton = new Ox.Button({
                     id: self.options.id + 'Size',
                     title: [
-                        {id: 'large', title: 'add'},
-                        {id: 'small', title: 'remove'}
+                        {id: 'large', title: 'grow'},
+                        {id: 'small', title: 'shrink'}
                     ],
                     tooltip: ['Larger', 'Smaller'],
                     type: 'image'
@@ -11399,21 +11590,18 @@ requires
             });
         }
 
-        function playing() {
-            self.options.position = Math.round(self.video.currentTime * 25) / 25;
-            if (self.video.ended) {
-                self.$playButton.trigger('click');
-            }
-            if (self.playingInToOut && self.options.position >= self.options.points[1])  {
-                self.$playButton.trigger('click');
-                self.options.position = self.options.points[1];
-            }
+        function paused(event, data) {
+            self.$playButton.toggleTitle();
+        }
+
+        function playing(event, data) {
+            self.options.position = data.position;
             setMarkers();
             setSubtitle();
             self.$positionInput.options({
                 value: Ox.formatDuration(self.options.position, 3)
             });
-            that.triggerEvent('change', {
+            that.triggerEvent('playing', {
                 position: self.options.position
             });
         }
@@ -11422,10 +11610,11 @@ requires
             that.css({
                 height: (self.options.height + 16) + 'px'
             });
-            self.$video.css({
+            self.options.type == 'play' ? self.$video.options({
+                height: self.options.height
+            }) : self.$video.css({
                 height: self.options.height + 'px'
             });
-            setSubtitleSize();
         }
 
         function setMarkers() {
@@ -11448,7 +11637,7 @@ requires
 
         function setPosition() {
             if (self.options.type == 'play') {
-                self.video.currentTime = self.options.position;
+                self.$video.position(self.options.position);
             } else {
 				self.$loadingIcon && self.$loadingIcon.stop();
 				if (self.$video.attr('src') != self.options.url(self.options.position)) {
@@ -11489,14 +11678,16 @@ requires
             that.css({
                 width: self.options.width + 'px'
             });
-            self.$video.css({
+            self.options.type == 'play' ? self.$video.options({
+                width: self.options.width
+            }) : self.$video.css({
                 width: self.options.width + 'px'
             });
             setSubtitleSize();
         }
 
         function toggleMute() {
-            self.video.muted = !self.video.muted;
+            self.$video.toggleMute();
         }
 
         function togglePlay() {
@@ -11524,29 +11715,23 @@ requires
         }
 
         that.mute = function() {
-            self.video.muted = true;
+            self.$video.mute();
             return that;
         };
 
         that.pause = function() {
-            self.video.pause();
-            clearInterval(self.playInterval);
-            self.playingInToOut = false;
+            self.$video.pause();
             return that;
         };
 
         that.play = function() {
-            self.video.play();
-            self.playInterval = setInterval(playing, 40);
+            self.$video.play();
             return that;
         };
 
         that.playInToOut = function() {
-            self.options.position = self.options.points[0];
-            setPosition();
-            //Ox.print('sop', self.options.position, self.options.points);
-            self.playingInToOut = true;
-            self.video.paused && self.$playButton.trigger('click');
+            self.$video.paused() && self.$playButton.toggleTitle();
+            self.$video.playInToOut();
             return that;
         };
 
@@ -11560,6 +11745,162 @@ requires
             return that;
         }
 
+        that.unmute = function() {
+            self.$video.unmute();
+            return that;
+        };
+
+        return that;
+
+    };
+
+    Ox.VideoElement = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element('video', self)
+                .defaults({
+                    fps: 25,
+                    height: 0,
+                    loop: false,
+                    muted: false,
+                    paused: false,
+                    playInToOut: false,
+                    points: [0, 0],
+                    position: 0,
+                    poster: '',
+                    url: '',
+                    width: 0
+                })
+                .options(options || {})
+                .attr({
+                    poster: self.options.poster,
+                    preload: 'auto',
+                    src: self.options.url
+                })
+                .css({
+                    height: self.options.height + 'px',
+                    width: self.options.width + 'px'
+                })
+                .bind({
+                    ended: ended
+                });
+
+        $.extend(self, {
+            millisecondsPerFrame: 1000 / self.options.fps,
+            video: that.$element[0]
+        });
+
+        function ended() {
+            that.pause()
+                .triggerEvent('paused', {
+                    position: self.options.position
+                });
+        }
+
+        function playing() {
+            var event = 'playing';
+            self.options.position = Math.round(self.video.currentTime * self.options.fps) / self.options.fps;
+            if (self.options.playInToOut && self.options.position >= self.options.points[1])  {
+                event = 'paused';
+                that.position(self.options.points[1]).pause();
+            }
+            that.triggerEvent(event, {
+                position: self.options.position
+            });
+        }
+
+        self.onChange = function(key, value) {
+            if (key == 'height') {
+                that.size(self.options.width, value);
+            } else if (key == 'muted') {
+                that[value ? 'mute' : 'unmute']();
+            } else if (key == 'paused') {
+                that[value ? 'pause' : 'play']();
+            } else if (key == 'points') {
+                that.points(value);
+            } else if (key == 'width') {
+                that.size(value, self.options.height);
+            }
+        };
+
+        that.mute = function() {
+            self.options.muted = true;
+            self.video.muted = true;
+            return that;
+        };
+
+        that.muted = function() {
+            return self.options.muted;
+        }
+
+        that.pause = function() {
+            self.options.paused = true;
+            self.options.playInToOut = false;
+            self.video.pause();
+            clearInterval(self.playInterval);
+            return that;
+        };
+
+        that.paused = function() {
+            return self.options.paused;
+        }
+
+        that.play = function() {
+            self.options.paused = false;
+            self.video.play();
+            self.playInterval = setInterval(playing, self.millisecondsPerFrame);
+            return that;
+        };
+
+        that.playInToOut = function() {
+            self.options.playInToOut = true;
+            that.position(self.options.points[0]);
+            self.options.paused && that.play();
+            return that;
+        };
+
+        that.points = function(points) {
+            self.options.points = points;
+        }
+
+        that.position = function(pos) {
+            if (arguments.length == 0) {
+                return self.video.currentTime;
+            } else {
+                self.options.position = pos;
+                self.video.currentTime = self.options.position;
+                return that;
+            }
+        };
+
+        that.size = function(width, height) {
+            // fixme: why options? use css!
+            if (arguments.length == 0) {
+                return {
+                    width: self.options.width,
+                    height: self.options.height
+                };
+            } else {
+                self.options.width = width;
+                self.options.height = height;
+                that.css({
+                    width: width + 'px',
+                    height: height + 'px'
+                });
+                return that;
+            }
+        };
+
+        that.toggleMute = function() {
+            self.video.muted = !self.video.muted;
+            return that;
+        }
+
+        that.togglePlay = function() {
+            self.options.paused = !self.options.paused;
+            that[self.options.paused ? 'pause' : 'play']();
+        }
+
         that.unmute = function() {
             self.video.muted = false;
             return that;
@@ -11569,6 +11910,359 @@ requires
 
     };
 
+    Ox.VideoPanelPlayer = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element('div', self)
+                .defaults({
+                    annotationsSize: 256,
+                    duration: 0,
+                    height: 0,
+                    loop: false,
+                    muted: false,
+                    paused: false,
+                    playInToOut: false,
+                    points: [0, 0],
+                    position: 0,
+                    poster: '',
+                    showAnnotations: true,
+                    showControls: true,
+                    videoHeight: 0,
+                    videoSize: 'fit',
+                    videoWidth: 0,
+                    videoURL: '',
+                    width: 0
+                })
+                .options(options || {})
+                .css({
+                    height: self.options.height + 'px',
+                    width: self.options.width + 'px'
+                })
+                .bindEvent({
+                    resize: resizeElement
+                });
+
+        self.videoCSS = getVideoCSS();
+        //alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
+
+        self.$player = new Ox.Element()
+            .css({
+                overflowX: 'hidden',
+                overflowY: 'hidden'
+            })
+            .bindEvent({
+                resize: resizeVideo
+            });
+
+        self.$video = new Ox.VideoElement({
+                height: self.videoCSS.height,
+                paused: true,
+                points: self.options.points,
+                position: self.options.position,
+                url: self.options.videoURL,
+                width: self.videoCSS.width
+            })
+            .css(self.videoCSS)
+            .bindEvent({
+                paused: paused,
+                playing: playing
+            })
+            .appendTo(self.$player);
+
+        self.$controls = new Ox.Element()
+            .bindEvent({
+                toggle: toggleControls
+            });
+
+        self.$buttons = new Ox.Element()
+            .css({
+                float: 'left',
+                width: '16px',
+                margin: '4px'
+            })
+            .appendTo(self.$controls);
+
+        self.$button = {
+            play: new Ox.Button({
+                    id: 'play',
+                    title: [
+                        {id: 'play', title: 'play'},
+                        {id: 'pause', title: 'pause'}
+                    ],
+                    tooltip: ['Play', 'Pause'],
+                    type: 'image'                
+                })
+                .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: [
+                        {id: 'mute', title: 'mute'},
+                        {id: 'unmute', title: 'unmute'}
+                    ],
+                    tooltip: ['Mute', 'Unmute'],
+                    type: 'image'                
+                })
+                .bindEvent({
+                    click: toggleMute
+                }),
+            size: new Ox.Button({
+                    id: 'size',
+                    title: self.options.videoSize == 'fit' ? [
+                        {id: 'fill', title: 'fill'},
+                        {id: 'fit', title: 'fit'}
+                    ] : [
+                        {id: 'fit', title: 'fit'},
+                        {id: 'fill', title: 'fill'}
+                    ],
+                    tooltip: self.options.videoSize == 'fit' ? [
+                        'Fill Screen', 'Fit to Screen'
+                    ] : [
+                        'Fit to Screen', 'Fill Screen'
+                    ],
+                    type: 'image'
+                })
+                .bindEvent({
+                    click: toggleSize
+                })
+        }
+        var i = 0;
+        $.each(self.$button, function(k, $button) {
+            $button.css({
+                position: 'absolute',
+                left: '8px',
+                top: (8 + i++ * 24) + 'px'
+            })
+            .appendTo(self.$buttons);
+        });
+
+        self.$timelines = new Ox.Element()
+            .css({
+                float: 'left',
+                margin: '4px'
+            })
+            .appendTo(self.$controls);
+
+        self.$timeline = {
+            large: new Ox.LargeTimeline({
+                    duration: self.options.duration,
+                    videoId: self.options.videoId,
+                    width: self.options.width - 40
+                })
+                .css({
+                    top: '4px'
+                }),
+            small: new Ox.SmallTimeline({
+                    duration: self.options.duration,
+                    videoId: self.options.videoId,
+                    width: self.options.width - 40
+                })
+                .css({
+                    top: '80px'
+                })
+        };
+        $.each(self.$timeline, function(i, $timeline) {
+            $timeline.appendTo(self.$timelines);
+        });
+
+        self.$panel = new Ox.SplitPanel({
+                elements: [
+                    {
+                        element: self.$player
+                    },
+                    {
+                        collapsed: !self.options.showControls,
+                        collapsible: true,
+                        element: self.$controls,
+                        size: 104
+                    }
+                ],
+                orientation: 'vertical'
+            })
+            .bindEvent({
+                resize: resizeVideo
+            });
+
+        self.$annotations = new Ox.Element()
+            .bindEvent({
+                resize: resizeAnnotations,
+                resizeend: resizeendAnnotations,
+                toggle: toggleAnnotations
+            });
+
+        that.$element = new Ox.SplitPanel({
+                elements: [
+                    {
+                        element: self.$panel
+                    },
+                    {
+                        collapsed: !self.options.showAnnotations,
+                        collapsible: true,
+                        element: self.$annotations,
+                        resizable: true,
+                        resize: [192, 256, 320, 384],
+                        size: self.options.annotationsSize
+                    }
+                ],
+                orientation: 'horizontal'
+            });
+
+        function getPlayerHeight() {
+            return self.options.height - 1 -
+                self.options.showControls * 104;
+        }
+
+        function getPlayerWidth() {
+            return self.options.width - 1 -
+                self.options.showAnnotations * self.options.annotationsSize;
+        }
+
+        function getVideoCSS() {
+            var width = getPlayerWidth(),
+                height = getPlayerHeight(),
+                ratio = width / height,
+                videoRatio = self.options.videoWidth / self.options.videoHeight,
+                isWide = ratio < videoRatio;
+            self.$annotations && self.$annotations.html($('<div>').html(JSON.stringify(self.options.videoSize == 'fit' ? {
+                foo: width,
+                bar: height,
+                width: (isWide ? width : Math.round(height * videoRatio)) + 'px',
+                height: (isWide ? Math.round(width / videoRatio) : height) + 'px',
+                margin: 'auto'
+            } : {
+                foo: width,
+                bar: height,
+                width: (isWide ? Math.round(height * videoRatio) : width) + 'px',
+                height: (isWide ? height : Math.round(width / videoRatio)) + 'px',
+                margin: [
+                    isWide ? '0' : Math.floor((height - width / videoRatio) / 2) + 'px',
+                    isWide ? Math.ceil((width - height * videoRatio) / 2) + 'px' : '0',
+                    isWide ? '0' : Math.ceil((height - width / videoRatio) / 2) + 'px',
+                    isWide ? Math.floor((width - height * videoRatio) / 2) + 'px' : '0'
+                ].join(' ')
+            })).css({width: '150px'}));
+
+            return self.options.videoSize == 'fit' ? {
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                width: (isWide ? width : Math.round(height * videoRatio)) + 'px',
+                height: (isWide ? Math.round(width / videoRatio) : height) + 'px',
+                margin: 'auto'
+            } : {
+                width: (isWide ? Math.round(height * videoRatio) : width) + 'px',
+                height: (isWide ? height : Math.round(width / videoRatio)) + 'px',
+                margin: [
+                    isWide ? '0' : Math.floor((height - width / videoRatio) / 2) + 'px',
+                    isWide ? Math.ceil((width - height * videoRatio) / 2) + 'px' : '0',
+                    isWide ? '0' : Math.ceil((height - width / videoRatio) / 2) + 'px',
+                    isWide ? Math.floor((width - height * videoRatio) / 2) + 'px' : '0'
+                ].join(' ')
+            };
+        }
+
+        function paused() {
+            
+        }
+
+        function play() {
+            
+        }
+
+        function playing() {
+            
+        }
+
+        function playInToOut() {
+            
+        }
+
+        function resizeAnnotations(event, data) {
+            self.options.annotationsSize = data;
+            resizeVideo();
+        }
+
+        function resizeendAnnotations(event, data) {
+            self.options.annotationsSize = data;
+            resizeVideo();
+            that.triggerEvent('change', {
+                annotationsSize: self.options.annotationsSize
+            });
+        }
+
+        function resizeElement(event, data) {
+            // called on browser toggle
+            self.options.height = data;
+            resizeVideo();
+        }
+
+        function resizeVideo() {
+            self.videoCSS = getVideoCSS();
+            self.$video.css(self.videoCSS);
+        };
+
+        function toggleAnnotations(event, data) {
+            self.options.showAnnotations = !data.collapsed;
+            that.triggerEvent('change', {
+                showAnnotations: self.options.showAnnotations
+            });
+        }
+
+        function toggleControls(event, data) {
+            self.options.showControls = !data.collapsed;
+            that.triggerEvent('change', {
+                showControls: self.options.showControls
+            });
+        }
+
+        function toggleMute() {
+            
+        }
+
+        function togglePlay() {
+            
+        }
+
+        function toggleSize() {
+            self.options.videoSize = self.options.videoSize == 'fit' ? 'fill' : 'fit';
+            self.videoCSS = getVideoCSS()
+            self.$video.css(self.videoCSS);
+            that.triggerEvent('change', {
+                videoSize: self.options.videoSize
+            });
+        }
+
+        self.onChange = function(key, value) {
+            if (key == 'height') {
+                resizeVideo();
+            } else if (key == 'width') {
+                resizeVideo();
+            }
+        }
+
+        that.toggleAnnotations = function() {
+            
+        };
+
+        that.toggleControls = function() {
+            
+        };
+
+        return that;
+
+    }
 
     /*
     ============================================================================
diff --git a/build/json/ox.ui.images.json b/build/json/ox.ui.images.json
index 7d02ba48..55461ddc 100644
--- a/build/json/ox.ui.images.json
+++ b/build/json/ox.ui.images.json
@@ -4,6 +4,7 @@
     "png/ox.ui/browserInternetExplorer128.png", 
     "png/ox.ui/browserOpera128.png", 
     "png/ox.ui/browserSafari128.png", 
+    "png/ox.ui/icon16.png", 
     "png/ox.ui/markerBlue.png", 
     "png/ox.ui/markerGreen.png", 
     "png/ox.ui/markerRed.png", 
@@ -27,15 +28,20 @@
     "png/ox.ui.classic/symbolBelow.png", 
     "png/ox.ui.classic/symbolCheck.png", 
     "png/ox.ui.classic/symbolClear.png", 
+    "png/ox.ui.classic/symbolClick.png", 
     "png/ox.ui.classic/symbolClose.png", 
     "png/ox.ui.classic/symbolCollapse.png", 
     "png/ox.ui.classic/symbolDate.png", 
     "png/ox.ui.classic/symbolEdit.png", 
     "png/ox.ui.classic/symbolExpand.png", 
+    "png/ox.ui.classic/symbolFill.png", 
     "png/ox.ui.classic/symbolFind.png", 
+    "png/ox.ui.classic/symbolFit.png", 
     "png/ox.ui.classic/symbolGoToIn.png", 
     "png/ox.ui.classic/symbolGoToOut.png", 
+    "png/ox.ui.classic/symbolGrow.png", 
     "png/ox.ui.classic/symbolHelp.png", 
+    "png/ox.ui.classic/symbolIcon.png", 
     "png/ox.ui.classic/symbolInfo.png", 
     "png/ox.ui.classic/symbolList.png", 
     "png/ox.ui.classic/symbolLocation.png", 
@@ -53,6 +59,7 @@
     "png/ox.ui.classic/symbolSet.png", 
     "png/ox.ui.classic/symbolSetIn.png", 
     "png/ox.ui.classic/symbolSetOut.png", 
+    "png/ox.ui.classic/symbolShrink.png", 
     "png/ox.ui.classic/symbolSpin.png", 
     "png/ox.ui.classic/symbolStar.png", 
     "png/ox.ui.classic/symbolTime.png", 
@@ -79,14 +86,18 @@
     "png/ox.ui.modern/symbolBelow.png", 
     "png/ox.ui.modern/symbolCheck.png", 
     "png/ox.ui.modern/symbolClear.png", 
+    "png/ox.ui.modern/symbolClick.png", 
     "png/ox.ui.modern/symbolClose.png", 
     "png/ox.ui.modern/symbolCollapse.png", 
     "png/ox.ui.modern/symbolDate.png", 
     "png/ox.ui.modern/symbolEdit.png", 
     "png/ox.ui.modern/symbolExpand.png", 
+    "png/ox.ui.modern/symbolFill.png", 
     "png/ox.ui.modern/symbolFind.png", 
+    "png/ox.ui.modern/symbolFit.png", 
     "png/ox.ui.modern/symbolGoToIn.png", 
     "png/ox.ui.modern/symbolGoToOut.png", 
+    "png/ox.ui.modern/symbolGrow.png", 
     "png/ox.ui.modern/symbolHelp.png", 
     "png/ox.ui.modern/symbolInfo.png", 
     "png/ox.ui.modern/symbolList.png", 
@@ -105,6 +116,7 @@
     "png/ox.ui.modern/symbolSet.png", 
     "png/ox.ui.modern/symbolSetIn.png", 
     "png/ox.ui.modern/symbolSetOut.png", 
+    "png/ox.ui.modern/symbolShrink.png", 
     "png/ox.ui.modern/symbolStar.png", 
     "png/ox.ui.modern/symbolTime.png", 
     "png/ox.ui.modern/symbolUnlock.png",