diff --git a/pandora/app/views.py b/pandora/app/views.py
index 17b84887..a5a79914 100644
--- a/pandora/app/views.py
+++ b/pandora/app/views.py
@@ -16,6 +16,10 @@ def index(request):
     context = RequestContext(request, {'settings':settings})
     return render_to_response('index.html', context)
 
+def timeline(request):
+    context = RequestContext(request, {'settings':settings})
+    return render_to_response('timeline.html', context)
+
 def api_getPage(request):
     data = json.loads(request.POST['data'])
     name = data['page']
diff --git a/pandora/archive/extract.py b/pandora/archive/extract.py
index 695cb40c..e7d88ee0 100644
--- a/pandora/archive/extract.py
+++ b/pandora/archive/extract.py
@@ -194,34 +194,22 @@ def run_command(cmd, timeout=10):
         killedpid, stat = os.waitpid(p.pid, os.WNOHANG)
     return p.returncode
 
-def frame(videoFile, position, baseFolder, width=128, redo=False):
+def frame(videoFile, frame, position, width=128, redo=False):
     '''
         params:
-            videoFile
+            videoFile input
+            frame     output
             position as float in seconds
-            baseFolder to write frames to
             width of frame
             redo boolean to extract file even if it exists
     '''
-    def frame_path(size):
-        return os.path.join(baseFolder, "%s.%s.%s" % (ox.ms2time(position*1000), size, img_extension))
-
-    #not using input file, to slow to extract frame right now
-    base_size = 320
-    frame = frame_path(base_size)
-
     if exists(videoFile):
+        frameFolder = os.path.dirname(frame)
         if redo or not exists(frame):
-            if not exists(baseFolder):
-                os.makedirs(baseFolder)
-            cmd = ['oggThumb', '-t', str(position), '-n', frame, '-s', '%dx0'%base_size, videoFile]
+            if not exists(frameFolder):
+                os.makedirs(frameFolder)
+            cmd = ['oxframe', '-i', videoFile, '-o', frame, '-p', str(position), '-x', str(width)]
             run_command(cmd)
-    if width != base_size:
-        frame_base = frame
-        frame = frame_path(width)
-        if not exists(frame):
-            resize_image(frame_base, frame, width)
-    return frame
 
 def resize_image(image_source, image_output, width=None, size=None):
     if exists(image_source):
diff --git a/pandora/backend/models.py b/pandora/backend/models.py
index 414f0c7f..0c42603a 100644
--- a/pandora/backend/models.py
+++ b/pandora/backend/models.py
@@ -259,9 +259,11 @@ class Movie(models.Model):
                           self.get('season', ''), self.get('episode', ''))
 
     def frame(self, position, width=128):
-        #FIXME: compute offset and so on
-        f = self.files.all()[0]
-        return f.frame(position, width)
+        stream = self.streams.filter(profile=settings.VIDEO_PROFILE+'.webm')[0]
+        path = os.path.join(settings.MEDIA_ROOT, 'frame', self.movieId, "%d"%width, "%s.jpg"%position)
+        if not os.path.exists(path):
+            extract.frame(stream.video.path, path, position, width)
+        return path
 
     def updateFind(self):
         try:
@@ -411,6 +413,10 @@ class Movie(models.Model):
                 subprocess.Popen(cmd)
             part += 1
 
+    @property
+    def timeline_prefix(self):
+        return os.path.join('stream', movieid_path(self.movieId), 'timeline')
+
     def updateStreams(self):
         files = {}
         for f in self.files.filter(is_main=True, video_available=True):
@@ -428,11 +434,13 @@ class Movie(models.Model):
                 else:
                     cmd.append('+')
                     cmd.append(files[f])
+            if not os.path.exists(os.path.dirname(stream.video.path)):
+                os.makedirs(os.path.dirname(stream.video.path))
             cmd = [ 'mkvmerge', '-o', stream.video.path ] + cmd
             subprocess.Popen(cmd)
             stream.save()
 
-            extract.timeline(stream.video.path, os.path.join(stream.video.path[:-len(stream.profile)], 'timeline'))
+            extract.timeline(stream.video.path, os.path.join(settings.MEDIA_ROOT, self.timeline_prefix))
             stream.extract_derivatives()
             
             #something with poster
@@ -704,10 +712,13 @@ class Collection(models.Model):
 
     def editable(self, user):
         return self.users.filter(id=user.id).count() > 0
-        
+
+
+def movieid_path(h):
+    return os.path.join(h[:2], h[2:4], h[4:6], h[6:])
 def stream_path(f):
     h = f.movie.movieId
-    return os.path.join('stream', h[:2], h[2:4], h[4:6], h[6:], f.profile)
+    return os.path.join('stream', movieid_path(h), f.profile)
 
 class Stream(models.Model):
     class Meta:
diff --git a/pandora/backend/urls.py b/pandora/backend/urls.py
index ae98e8ae..9fdaf7fb 100644
--- a/pandora/backend/urls.py
+++ b/pandora/backend/urls.py
@@ -5,10 +5,13 @@ from django.conf.urls.defaults import *
 
 
 urlpatterns = patterns("backend.views",
-    (r'^frame/(?P<id>.*)/(?P<position>.*)\.(?P<size>\d+).jpg$', 'frame'),
-    (r'^stream/(?P<id>.*).(?P<quality>.*).ogv$', 'video'),
-    (r'^poster/(?P<id>.*)\.(?P<size>\d+)\.jpg$', 'poster'),
-    (r'^poster/(?P<id>.*)\.jpg$', 'poster'),
+    (r'^(?P<id>.*)/frame/(?P<size>\d+)/(?P<position>[0-9\.,]+).jpg$', 'frame'),
+    (r'^(?P<id>.*)/(?P<profile>.*.webm)$', 'video'),
+    (r'^(?P<id>.*)/(?P<profile>.*.mp4)$', 'video'),
+    (r'^(?P<id>.*)/poster\.(?P<size>\d+)\.jpg$', 'poster'),
+    (r'^(?P<id>.*)/poster\.jpg$', 'poster'),
+    (r'^(?P<id>.*)/timelines/timeline\.(?P<size>\d+)\.(?P<position>\d+)\.png$', 'timeline'),
+    (r'^(?P<id>.*)/data/(?P<data>.+)\.json$', 'data'),
     (r'^api/$', 'api'),
 )
 
diff --git a/pandora/backend/views.py b/pandora/backend/views.py
index c2a9956f..a8f84538 100644
--- a/pandora/backend/views.py
+++ b/pandora/backend/views.py
@@ -494,45 +494,6 @@ def api_getImdbId(request):
 		response = json_response(status=404, text='not found')
     return render_to_json_response(response)
 
-def poster(request, id, size=None):
-    print id, size
-    movie = get_object_or_404(models.Movie, movieId=id)
-    if movie.poster:
-        if size:
-            size = int(size)
-            poster_path = movie.poster.path.replace('.jpg', '.%d.jpg'%size)
-            if not os.path.exists(poster_path):
-                poster_size = max(movie.poster.width, movie.poster.height)
-                size = min(size, poster_size)
-                poster_path = movie.poster.path.replace('.jpg', '.%d.jpg'%size)
-                extract.resize_image(movie.poster.path, poster_path, size=size)
-            url = movie.poster.url.replace('.jpg', '.%d.jpg'%size)
-        elif movie.poster:
-                url = movie.poster.url
-    else:
-        url = movie.poster_url
-    if not url:
-        url = '/static/png/posterDark.48.png'
-    return redirect(url)
-
-def video(request, id, quality):
-    movie = get_object_or_404(models.Movie, movieId=id)
-    if quality not in settings.VIDEO_ENCODING:
-        raise Http404
-    stream = getattr(movie, 'stream_'+quality)
-    response = HttpFileResponse(stream.path, content_type='video/ogg')
-    #FIXME: movie needs duration field
-    #response['Content-Duration'] = movie.duration
-    return response
-
-def frame(request, id, position, size):
-    movie = get_object_or_404(models.Movie, movieId=id)
-    position = ox.time2ms(position)/1000
-    frame = movie.frame(position, int(size))
-    if not frame:
-        raise Http404
-    return HttpFileResponse(frame, content_type='image/jpeg')
-
 def apidoc(request):
     '''
         this is used for online documentation at http://127.0.0.1:8000/api/
@@ -573,3 +534,53 @@ def apidoc(request):
     context = RequestContext(request, {'api': api,
                                        'sitename': settings.SITENAME,})
     return render_to_response('api.html', context)
+
+def data(request, id, data):
+    movie = get_object_or_404(models.Movie, movieId=id)
+    response = {}
+    if data == 'video':
+        response = movie.get_stream()
+    return render_to_json_response(response)
+
+#media delivery
+def frame(request, id, position, size):
+    movie = get_object_or_404(models.Movie, movieId=id)
+    position = float(position.replace(',', '.'))
+    frame = movie.frame(position, int(size))
+    if not frame:
+        raise Http404
+    return HttpFileResponse(frame, content_type='image/jpeg')
+
+def poster(request, id, size=128):
+    movie = get_object_or_404(models.Movie, movieId=id)
+    if size == 'large':
+        size = None
+    if movie.poster:
+        if size:
+            size = int(size)
+            poster_path = movie.poster.path.replace('.jpg', '.%d.jpg'%size)
+            if not os.path.exists(poster_path):
+                poster_size = max(movie.poster.width, movie.poster.height)
+                if size > poster_size:
+                    return redirect('/%s/poster.large.jpg' % movie.movieId)
+                extract.resize_image(movie.poster.path, poster_path, size=size)
+        else:
+            poster_path = movie.poster.path
+    else:
+        poster_path = os.path.join(settings.STATIC_ROOT, 'png/posterDark.48.png')
+    return HttpFileResponse(poster_path, content_type='image/jpeg')
+
+def timeline(request, id, size, position):
+    movie = get_object_or_404(models.Movie, movieId=id)
+    timeline = os.path.join(settings.MEDIA_ROOT, '%s.%s.%04d.png' %(movie.timeline_prefix, size, int(position)))
+    return HttpFileResponse(timeline, content_type='image/png')
+
+def video(request, id, profile):
+    movie = get_object_or_404(models.Movie, movieId=id)
+    stream = get_object_or_404(movie.streams, profile=profile)
+    path = stream.video.path
+    content_type = path.endswith('.mp4') and 'video/mp4' or 'video/webm'
+    #url = 'http://127.0.0.1/pandora_media' + path[len(settings.MEDIA_ROOT):]
+    #return redirect(url)
+    return HttpFileResponse(path, content_type=content_type)
+
diff --git a/pandora/settings.py b/pandora/settings.py
index 47ddc2fd..7a3bb866 100644
--- a/pandora/settings.py
+++ b/pandora/settings.py
@@ -14,8 +14,21 @@ DEBUG = True
 TEMPLATE_DEBUG = DEBUG
 JSON_DEBUG = True
 
+#with apache x-sendfile or lighttpd set this to True
 XSENDFILE = False
 
+XACCELREDIRECT = False
+# with nginx:
+#XACCELREDIRECT=[/some/path/, /protected/]
+'''
+this assumes the following configuration:
+location /protected/ {
+  internal;
+  root   /some/path/;
+}
+'''
+
+
 ADMINS = (
      ('j', 'j@mailb.org'),
 )
diff --git a/pandora/static/css/timeline.css b/pandora/static/css/timeline.css
new file mode 100644
index 00000000..59c818e5
--- /dev/null
+++ b/pandora/static/css/timeline.css
@@ -0,0 +1,181 @@
+body {
+    margin: 0;
+}
+#editor {
+    margin: 4px;
+}
+#players {
+    //background: rgb(255, 192, 192);
+}
+#timelines {
+    background: rgb(192, 192, 255);
+}
+
+
+.OxEditor .OxVideoPlayer {
+    position: absolute;
+    margin: 4px;
+    //background: red;
+}
+
+
+
+.OxTimelineLarge {
+    position: absolute;
+    height: 72px;
+    margin: 0 4px 0 4px;
+    overflow: hidden;
+}
+.OxTimelineLarge > div {
+    position: absolute;
+    height: 72px;
+}
+.OxTimelineLarge > div > img {
+    position: absolute;
+    top: 4px;
+}
+.OxTimelineLarge .OxCut {
+    position: absolute;
+    top: 66px;
+    width: 2px;
+    height: 4px;
+    margin-left: -1px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxMarkerPointIn {
+    position: absolute;
+    top: 64px;
+    width: 6px;
+    height: 6px;
+    margin-left: -5px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxMarkerPointOut {
+    position: absolute;
+    top: 64px;
+    width: 6px;
+    height: 6px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxMarkerPosition {
+    position: absolute;
+    top: 2px;
+    width: 9px;
+    height: 5px;
+    z-index: 10;
+}
+.OxTimelineLarge .OxSubtitle {
+    position: absolute;
+    bottom: 9px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    padding: 1px;
+    background: rgba(0, 0, 0, 0.25);
+    font-size: 8px;
+    line-height: 10px;
+    text-align: center;
+    text-overflow: ellipsis;
+    text-shadow: rgba(0, 0, 0, 1) 1px 1px 1px;
+    color: rgb(255, 255, 255);
+    cursor: default;
+    overflow: hidden;
+    z-index: 10;
+    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+}
+.OxTimelineLarge .OxSubtitle.OxHighlight {
+    border-color: rgba(255, 255, 0, 1);
+}
+.OxTimelineSmall {
+    position: absolute;
+}
+.OxTimelineSmall > div {
+    position: absolute;
+    height: 18px;
+    margin: 3px 4px 3px 4px;
+    overflow: hidden;
+}
+.OxTimelineSmall > div > img {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+.OxTimelineSmall > div > .OxTimelineSmallImage {
+    margin-top: 1px;
+}
+.OxTimelineSmall .OxMarkerPointIn {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    margin-left: -1px;
+}
+.OxTimelineSmall .OxMarkerPointOut {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    margin-left: 4px;
+}
+
+.OxVideoPlayer > .OxBar .OxInputGroup {
+    //width: 98px;
+}
+.OxVideoPlayer > .OxBar .OxButton {
+    margin-right: -1px;
+}
+.OxVideoPlayer > .OxBar .OxButton,
+.OxVideoPlayer > .OxBar .OxInput,
+.OxVideoPlayer > .OxBar .OxLabel {
+    padding: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+.OxVideoPlayer > .OxBar .OxLabel {
+    //width: 22px;
+    //background: rgb(32, 32, 32);
+}
+.OxVideoPlayer .OxMarkerFrame {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 16px;
+}
+.OxVideoPlayer .OxMarkerFrame > div {
+    float: left;
+}
+.OxVideoPlayer .OxMarkerFrame > .OxFrame {
+    background: rgba(0, 0, 0, 0.5);
+}
+.OxVideoPlayer .OxMarkerFrame > .OxPoster {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.OxVideoPlayer .OxMarkerPoint {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+}
+.OxVideoPlayer .OxMarkerInTop {
+    left: 4px;
+    top: 4px;
+}
+.OxVideoPlayer .OxMarkerInBottom {
+    left: 4px;
+    bottom: 20px;
+}
+.OxVideoPlayer .OxMarkerOutTop {
+    right: 4px;
+    top: 4px;
+}
+.OxVideoPlayer .OxMarkerOutBottom {
+    right: 4px;
+    bottom: 20px;
+}
+.OxVideoPlayer .OxSubtitle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    text-align: center;
+    //text-shadow: rgba(0, 0, 0, 1) 2px 2px 0px;
+    text-shadow: rgba(0, 0, 0, 1) 0 0 4px;
+    color: rgb(255, 255, 255);
+    z-index: 10;
+}
\ No newline at end of file
diff --git a/pandora/static/js/timeline.js b/pandora/static/js/timeline.js
new file mode 100644
index 00000000..9ae16b37
--- /dev/null
+++ b/pandora/static/js/timeline.js
@@ -0,0 +1,1299 @@
+$(function() {
+
+    /*
+    h1 is 0.5-12 times as large as h0
+    w1 is 0.5-12*ratio as large as w0
+    h1 = (h0 - 24) / 2 
+    w1 = h1 * ratio
+    w0 = pageWidth - 8 - w1
+    */
+    var $body = $("body"),
+        $document = $(document),
+        $window = $(window),
+        $editor,
+        $panel,
+        $player = [],
+        $players,
+        $timelines,
+        $timelineLarge,
+        $timelineSmall,
+        find = "cinema",
+        matches = [3, 22, 24, 55, 57, 61, 70, 105, 118, 122, 150, 152, 155],
+        pageWidth = $document.width() - 384 - 2,
+        posterFrame = 1515,
+        points = [2059, 2748],
+        videoId = document.location.hash.substring(1);
+
+    $.getJSON("/" + videoId + "/data/video.json", function(video) {
+        var duration = video.duration,
+            videoRatio = video.aspectRatio,
+            videoHeight = 96,
+            videoWidth = parseInt(video.aspectRatio*videoHeight),
+            position = duration/2;
+
+    videoWidth += videoWidth%2;
+    //resizeVideoPlayers(pageWidth);
+
+    Ox.Editor = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element("div", self)
+                .defaults({
+                    cuts: [],
+                    duration: 0,
+                    find: "",
+                    largeTimeline: true,
+                    matches: [],
+                    points: [0, 0],
+                    position: 0,
+                    posterFrame: 0,
+                    subtitles: [],
+                    videoHeight: 0,
+                    videoId: "",
+                    videoWidth: 0,
+                    videoSize: "large",
+                    width: 0
+                })
+                .options(options || {})
+                .addClass("OxEditor");
+
+        $.extend(self, {
+            $player: [],
+            $timeline: [],
+            controlsHeight: 16,
+            margin: 8,
+            videoRatio: self.options.videoWidth / self.options.videoHeight
+        });
+        self.sizes = getSizes();
+
+        $.each(["play", "in", "out"], function(i, type) {
+            self.$player[i] = new Ox.VideoPlayer({
+                    duration: self.options.duration,
+                    find: self.options.find,
+                    height: self.sizes.player[i].height,
+                    id: "player" + Ox.toTitleCase(type),
+                    points: self.options.points,
+                    position: type == "play" ? self.options.position : self.options.points[type == "in" ? 0 : 1],
+                    posterFrame: self.options.posterFrame,
+                    subtitles: self.options.subtitles,
+                    type: type,
+                    url: "/" + videoId + "/96p." + ($.support.video.webm ? "webm": "mp4"),
+                    width: self.sizes.player[i].width
+                })
+                .css({
+                    left: self.sizes.player[i].left + "px",
+                    top: self.sizes.player[i].top + "px"
+                })
+                .appendTo(that);
+            if (type == "in" || type == "out") {
+                self.$player[i].bindEvent({
+                    change: function() {
+                        goToPoint(type);
+                    },
+                    set: function() {
+                        setPoint(type);
+                    }
+                })
+            }
+        });
+        self.$player[0].bindEvent("change", changePlayer);
+
+        self.$timeline[0] = new Ox.LargeTimeline({
+                cuts: self.options.cuts,
+                duration: self.options.duration,
+                find: self.options.find,
+                id: "timelineLarge",
+                matches: self.options.matches,
+                points: self.options.points,
+                position: self.options.position,
+                subtitles: self.options.subtitles,
+                videoId: self.options.videoId,
+                width: self.sizes.timeline[0].width
+            })
+            .css({
+                left: self.sizes.timeline[0].left + "px",
+                top: self.sizes.timeline[0].top + "px"
+            })
+            .bindEvent("change", changeTimelineLarge)
+            .bindEvent("changeEnd", changeTimelineLarge)
+            .appendTo(that);
+
+        self.$timeline[1] = new Ox.SmallTimeline({
+                cuts: self.options.cuts,
+                duration: self.options.duration,
+                find: self.options.find,
+                id: "timelineSmall",
+                matches: self.options.matches,
+                points: self.options.points,
+                position: self.options.position,
+                subtitles: self.options.subtitles,
+                videoId: self.options.videoId,
+                width: self.sizes.timeline[1].width
+            })
+            .css({
+                left: self.sizes.timeline[1].left + "px",
+                top: self.sizes.timeline[1].top + "px"
+            })
+            .bindEvent("change", changeTimelineSmall)
+            .appendTo(that);
+
+        that.addEvent({
+            key_alt_left: function() {
+                movePositionBy(-0.04);
+            },
+            key_alt_right: function() {
+                movePositionBy(0.04);
+            },
+            key_alt_shift_left: function() {
+                movePositionTo("cut", -1);
+            },
+            key_alt_shift_right: function() {
+                movePositionTo("cut", 1);
+            },
+            key_closebracket: function() {
+                goToPoint("out");
+            },
+            key_comma: function() {
+                movePositionTo("subtitle", -1);
+            },
+            key_dot: function() {
+                movePositionTo("subtitle", 1);
+            },
+            key_down: function() {
+                movePositionBy(self.options.width - 2 * self.margin);
+            },
+            key_i: function() {
+                setPoint("in");
+            },
+            key_left: function() {
+                movePositionBy(-1);
+            },
+            key_m: toggleMute,
+            key_o: function() {
+                setPoint("out");
+            },
+            key_openbracket: function() {
+                goToPoint("in");
+            },
+            key_p: playInToOut,
+            key_right: function() {
+                movePositionBy(1);
+            },
+            key_shift_comma: function() {
+                movePositionTo("match", -1)
+            },
+            key_shift_dot: function() {
+                movePositionTo("match", 1)
+            },
+            key_shift_down: function() {
+                movePositionBy(self.options.duration);
+            },
+            key_shift_left: function() {
+                movePositionBy(-60);
+            },
+            key_shift_right: function() {
+                movePositionBy(60);
+            },
+            key_shift_up: function() {
+                movePositionBy(-self.options.duration);
+            },
+            key_space: togglePlay,
+            key_up: function() {
+                movePositionBy(-(self.options.width - 2 * self.margin));
+            }
+        });
+
+        that.gainFocus();
+
+        function changePlayer(event, data) {
+            self.options.position = data.position;
+            self.$timeline[0].options({
+                position: data.position
+            });
+            self.$timeline[1].options({
+                position: data.position
+            });
+        }
+
+        function changeTimelineLarge(event, data) {
+            self.options.position = data.position;
+            self.$player[0].options({
+                position: data.position
+            });
+            self.$timeline[1].options({
+                position: data.position
+            });
+        }
+
+        function changeTimelineSmall(event, data) {
+            self.options.position = data.position;
+            self.$player[0].options({
+                position: data.position
+            });
+            self.$timeline[0].options({
+                position: data.position
+            });
+        }
+
+        function getNextPosition(type, direction) {
+            var found = false,
+                position = 0,
+                positions;
+            if (type == "cut") {
+                positions = self.options.cuts;
+            } else if (type == "match") {
+                positions = $.map(self.options.matches, function(v, i) {
+                    return self.options.subtitles[v]["in"];
+                });
+            } else if (type == "subtitle") {
+                positions = $.map(self.options.subtitles, function(v, i) {
+                    return v["in"];
+                });
+            }
+            direction == -1 && positions.reverse();
+            $.each(positions, function(i, v) {
+                if (direction == 1 ? v > self.options.position : v < self.options.position) {
+                    position = v;
+                    found = true;
+                    return false;
+                }
+            });
+            direction == -1 && positions.reverse();
+            if (!found) {
+                position = positions[direction == 1 ? 0 : positions.length - 1];
+            }
+            return position;
+        }
+
+        function getSizes() {
+            var size = {
+                player: [],
+                timeline: []
+            };
+            size.player[0] = {
+                left: self.margin / 2,
+                top: self.margin / 2,
+                width: Math.round((self.options.width - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
+            }
+            size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
+            size.player[1] = {
+                left: size.player[0].left + size.player[0].width + self.margin,
+                top: size.player[0].top,
+                width: self.options.width - 3 * self.margin - size.player[0].width
+            }
+            size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio)
+            size.player[2] = {
+                left: size.player[1].left,
+                top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,
+                width: size.player[1].width,
+                height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin
+            }
+            size.timeline[0] = {
+                left: self.margin / 2,
+                top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
+                width: self.options.width - 2 * self.margin,
+                height: 64
+            }
+            size.timeline[1] = {
+                left: size.timeline[0].left,
+                top: size.timeline[0].top + size.timeline[0].height + self.margin,
+                width: size.timeline[0].width
+            }
+            return size;
+        }
+
+        function goToPoint(point) {
+            self.options.position = self.options.points[point == "in" ? 0 : 1];
+            setPosition();
+            that.triggerEvent("change", {
+                position: self.options.position
+            });
+        }
+
+        function movePositionBy(sec) {
+            self.options.position = Ox.limit(self.options.position + sec, 0, self.options.duration);
+            setPosition();
+            that.triggerEvent("change", {
+                position: self.options.position
+            });
+        }
+
+        function movePositionTo(type, direction) {
+            self.options.position = getNextPosition(type, direction);
+            setPosition();
+            that.triggerEvent("change", {
+                position: self.options.position
+            });
+        }
+
+        function playInToOut() {
+            self.$player[0].playInToOut();
+        }
+
+        function resizeEditor(event, data) {
+            var width = data - 2 * margin + 100;
+            resizeVideoPlayers(width);
+            $timelineLarge.options({
+                width: width
+            });
+            $timelineSmall.options({
+                width: width
+            });
+        }
+
+        function resizePlayers() {
+            $.each(self.$player, function(i, v) {
+                v.options({
+                    width: size[i].width,
+                    height: size[i].height
+                })
+                .css({
+                    left: size[i].left + "px",
+                    top: size[i].top + "px",
+                });
+            });
+        }
+
+        function setPoint(point) {
+            self.options.points[point == "in" ? 0 : 1] = self.options.position;
+            self.$player[point == "in" ? 1 : 2].options({
+                position: self.options.position
+            });
+            if (self.options.points[1] < self.options.points[0]) {
+                self.options.points[point == "in" ? 1 : 0] = self.options.position;
+                self.$player[point == "in" ? 2 : 1].options({
+                    position: self.options.position
+                });
+            }
+            $.each(self.$player, function(i, v) {
+                v.options({
+                    points: self.options.points
+                });
+            });
+            $.each(self.$timeline, function(i, v) {
+                v.options({
+                    points: self.options.points
+                });
+            });
+        }
+
+        function setPosition() {
+            self.$player[0].options({
+                position: self.options.position
+            });
+            $.each(self.$timeline, function(i, v) {
+                v.options({
+                    position: self.options.position
+                });
+            });
+        }
+
+        function toggleMute() {
+            self.$player[0].toggleMute();
+        }
+
+        function togglePlay() {
+            self.$player[0].togglePlay();
+        }
+
+        self.onChange = function(key, value) {
+            if (key == "width") {
+                self.sizes = getSizes();
+                $.each(self.$player, function(i, v) {
+                    v.options({
+                        height: self.sizes.player[i].height,
+                        width: self.sizes.player[i].width
+                    })
+                    .css({
+                        left: self.sizes.player[i].left + "px",
+                        top: self.sizes.player[i].top + "px"
+                    });
+                });
+                $.each(self.$timeline, function(i, v) {
+                    v.options({
+                        width: self.sizes.timeline[i].width
+                    })
+                    .css({
+                        left: self.sizes.timeline[i].left + "px",
+                        top: self.sizes.timeline[i].top + "px"
+                    });
+                });
+            }
+        };
+
+        return that;
+
+    };
+
+    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,
+                    subtitles: [],
+                    videoId: "",
+                    width: 0
+                })
+                .options(options || {})
+                .addClass("OxTimelineLarge")
+                .mousedown(mousedown)
+                .mouseleave(mouseleave)
+                .mousemove(mousemove);
+
+        $.extend(self, {
+            $cuts: [],
+            $markerPoint: [],
+            $subtitles: [],
+            $tiles: {},
+            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(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 mousedown(e) {
+            var mousemove = false,
+                x = e.clientX;
+            $window.mousemove(function(e) {
+                mousemove = true;
+                self.options.position = Ox.limit(
+                    self.options.position + (x - e.clientX) / self.fps,
+                    0, self.options.duration
+                );
+                x = e.clientX;
+                setPosition();
+                that.triggerEvent("change", {
+                    position: self.options.position
+                });
+            });
+            $window.one("mouseup", function() {
+                $window.unbind("mousemove");
+                if (!mousemove) {
+                    self.options.position = Ox.limit(
+                        self.options.position + (e.clientX - that.$element.offset().left - self.center) / self.fps,
+                        0, self.options.duration
+                    );
+                    setPosition();
+                }
+                that.triggerEvent("change", {
+                    position: self.options.position
+                });
+            });
+            e.preventDefault();
+        }
+
+        function mouseleave(e) {
+            self.$tooltip.hide();
+        }
+
+        function mousemove(e) {
+            if (!self.$tooltip) {
+                self.$tooltip = Ox.Tooltip();
+            }
+            self.$tooltip
+                .options({
+                    title: Ox.formatDuration(self.options.position + (e.clientX - that.offset().left - self.center) / self.fps, 3)
+                })
+                .show(e.clientX, e.clientY);
+        }
+
+        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/" + (window.location.hash == "#strip" ? "strip" : "timeline") + ".64." + v + ".png"
+                        })
+                        .css({
+                            left: (v * self.tileWidth) + "px"
+                        })
+                        .appendTo(self.$timeline);
+                }
+            });
+        }
+
+        function setWidth() {
+            self.center = parseInt(self.options.width / 2);
+            that.css({
+                width: self.options.width + "px"
+            });
+            self.$timeline.css({
+                left: self.center + "px"
+            });
+            setMarker();
+        }
+
+        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({
+                    cuts: [],
+                    duration: 0,
+                    find: "",
+                    matches: [],
+                    points: [0, 0],
+                    position: 0,
+                    subtitles: [],
+                    videoId: "",
+                    width: 0
+                })
+                .options(options || {})
+                .addClass("OxTimelineSmall")
+                .mousedown(mousedown)
+                .mouseleave(mouseleave)
+                .mousemove(mousemove);
+
+        $.extend(self, {
+            $images: [],
+            $lines: [],
+            $markerPoint: [],
+            $subtitles: [],
+            height: 16,
+            lines: Math.ceil(self.options.duration / self.options.width),
+            margin: 8,
+            subtitlesImageURL: getSubtitlesImageURL()
+        });
+
+        $.each(Ox.range(0, self.lines), function(i) {
+            addLine(i);
+        });
+
+        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 addLine(i) {
+            self.$lines[i] = new Ox.Element("div")
+                .css({
+                    top: i * (self.height + self.margin) + "px",
+                    width: self.options.width + "px"
+                })
+                .appendTo(that);
+            self.$images[i] = $("<img>")
+                .addClass("OxTimelineSmallImage")
+                .attr({
+                    src: "/" + self.options.videoId + "/timelines/timeline.16." + 0 + ".png"
+                })
+                .css({
+                    marginLeft: (-i * self.options.width) + "px"
+                })
+                .appendTo(self.$lines[i].$element);
+            self.$subtitles[i] = $("<img>")
+                .attr({
+                    src: self.subtitlesImageURL
+                })
+                .css({
+                    marginLeft: (-i * self.options.width) + "px"
+                })
+                .appendTo(self.$lines[i].$element);
+        }
+
+        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 getSubtitlesImageURL() {
+            var height = 18,
+                width = Math.ceil(self.options.duration),
+                $canvas = $("<canvas>")
+                    .attr({
+                        height: height,
+                        width: width
+                    }),
+                canvas = $canvas[0],
+                context = canvas.getContext("2d"),
+                imageData = context.createImageData(width, height),
+                data = imageData.data;
+            $.each(self.options.subtitles, function(i, v) {
+                var color = matches.indexOf(i) > -1 ? [255, 255, 0] : [255, 255, 255]
+                $.each(Ox.range(
+                    Math.round(v["in"]),
+                    Math.round(v["out"]) + 1
+                ), function(i, x) {
+                    $.each(Ox.range(0, 18), function(i, y) {
+                        var index = x * 4 + y * 4 * width;
+                        data[index] = color[0];
+                        data[index + 1] = color[1];
+                        data[index + 2] = color[2];
+                        data[index + 3] = (y == 0 || y == 17) ? 255 : 128
+                    });
+                });
+            });
+            context.putImageData(imageData, 0, 0);
+            return canvas.toDataURL()
+        }
+
+        function mousedown(e) {
+            var offset = that.offset(),
+                x = e.clientX,
+                y = e.clientY
+            //FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
+            self.options.position = e.offsetX?e.offsetX:e.clientX-$(e.target).offset().left;
+            setPosition();
+            that.triggerEvent("change", {
+                position: self.options.position
+            });
+            $window.mousemove(function(e) {
+                if ($(e.target).is("img")) {
+                    self.options.position = e.offsetX?e.offsetX:e.clientX-$(e.target).offset().left;
+                    setPosition();
+                    that.triggerEvent("change", {
+                        position: self.options.position
+                    });
+                }
+            });
+            $window.one("mouseup", function() {
+                $window.unbind("mousemove");
+            })
+            e.preventDefault();
+        }
+
+        function mouseleave(e) {
+            self.$tooltip.hide();
+        }
+
+        function mousemove(e) {
+            //FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript
+            var position = e.offsetX?e.offsetX:e.clientX-$(e.target).offset().left,
+                subtitle = getSubtitle(position);
+            Ox.print("position", position, e)
+            self.$tooltip = new Ox.Tooltip({
+                    title: subtitle ?
+                        "<span class=\"OxBright\">" +
+                        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)
+                })
+                .css({
+                    textAlign: "center"
+                })
+                .show(e.clientX, e.clientY);
+        }
+
+        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);
+            $.each(Ox.range(self.lines), function(i, v) {
+                if (self.$lines[i]) {
+                    self.$lines[i].css({
+                        width: self.options.width + "px"
+                    });
+                    self.$images[i].css({
+                        marginLeft: (-i * self.options.width) + "px"
+                    });
+                    self.$subtitles[i].css({
+                        marginLeft: (-i * self.options.width) + "px"
+                    });
+                } else {
+                    addLine(i);
+                }
+            });
+            while (self.$lines.length > self.lines) {
+                self.$lines[self.$lines.length - 1].remove();
+                self.$lines.pop();
+            }
+            setMarker();
+            setMarkerPoint(0);
+            setMarkerPoint(1);
+        }
+
+        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.VideoPlayer = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element("div", self)
+                .defaults({
+                    find: "",
+                    height: 0,
+                    points: [0, 0],
+                    position: 0,
+                    posterFrame: 0,
+                    subtitles: [],
+                    type: "play",
+                    url: "",
+                    width: 0
+                })
+                .options(options || {})
+                .addClass("OxVideoPlayer")
+                .css({
+                    height: (self.options.height + 16) + "px",
+                    width: self.options.width + "px"
+                });
+
+        self.controlsHeight = 16;
+
+        self.$video = $("<video preload=auto>")
+            .css({
+                height: self.options.height + "px",
+                width: self.options.width + "px"
+            })
+            .appendTo(that.$element);
+
+        self.video = self.$video[0];
+        
+        var other = $('video[src='+self.options.url+']')[0];
+        if(self.video.mozLoadFrom && other)
+            self.video.mozLoadFrom(other);
+        else
+            self.video.src = self.options.url;
+
+        self.$subtitle = $("<div>")
+            .addClass("OxSubtitle")
+            .appendTo(that.$element);
+
+        setSubtitleSize();
+
+        self.$markerFrame = $("<div>")
+            .addClass("OxMarkerFrame")
+            .append(
+                $("<div>")
+                    .addClass("OxFrame")
+                    .css({
+                        width: Math.floor((self.options.width - self.options.height) / 2) + "px",
+                        height: self.options.height + "px"
+                    })
+            )
+            .append(
+                $("<div>")
+                    .addClass("OxPoster")
+                    .css({
+                        width: (self.options.height - 2) + "px",
+                        height: (self.options.height - 2) + "px"
+                    })
+            )
+            .append(
+                $("<div>")
+                    .addClass("OxFrame")
+                    .css({
+                        width: Math.ceil((self.options.width - self.options.height) / 2) + "px",
+                        height: self.options.height + "px"
+                    })
+            )
+            .hide()
+            .appendTo(that.$element);
+
+        self.$markerPoint = {}
+        $.each(["in", "out"], function(i, point) {
+            self.$markerPoint[point] = {};
+            $.each(["top", "bottom"], function(i, edge) {
+                var titleCase = Ox.toTitleCase(point) + Ox.toTitleCase(edge);
+                self.$markerPoint[point][edge] = $("<img>")
+                    .addClass("OxMarkerPoint OxMarker" + titleCase)
+                    .attr({
+                        src: "/static/oxjs/build/png/ox.ui/videoMarker" + titleCase + ".png"
+                    })
+                    .hide()
+                    .appendTo(that.$element);
+                if (self.options.points[point == "in" ? 0 : 1] == self.options.position) {
+                    self.$markerPoint[point][edge].show();
+                }
+            });
+        });
+
+        self.$controls = new Ox.Bar({
+                size: self.controlsHeight
+            })
+            .css({
+                marginTop: "-2px"
+            })
+            .appendTo(that);
+
+        if (self.options.type == "play") {
+            // fixme: $buttonPlay etc.
+            self.$playButton = new Ox.Button({
+                    id: self.options.id + "Play",
+                    title: [
+                        {id: "play", title: "play"},
+                        {id: "pause", title: "pause"}
+                    ],
+                    tooltip: ["Play", "Pause"],
+                    type: "image"
+                })
+                .bindEvent("click", togglePlay)
+                .appendTo(self.$controls);
+            self.$playInToOutButton = new Ox.Button({
+                    id: self.options.id + "PlayInToOut",
+                    title: "PlayInToOut",
+                    tooltip: "Play In to Out",
+                    type: "image"
+                })
+                .bindEvent("click", function() {
+                    that.playInToOut();
+                })
+                .appendTo(self.$controls);
+            self.$muteButton = new Ox.Button({
+                    id: self.options.id + "Mute",
+                    title: [
+                        {id: "mute", title: "mute"},
+                        {id: "unmute", title: "unmute"}
+                    ],
+                    tooltip: ["Mute", "Unmute"],
+                    type: "image"
+                })
+                .bindEvent("click", toggleMute)
+                .appendTo(self.$controls);
+        } else {
+            self.$goToPointButton = new Ox.Button({
+                    id: self.options.id + "GoTo" + Ox.toTitleCase(self.options.type),
+                    title: "GoTo" + Ox.toTitleCase(self.options.type),
+                    tooltip: "Go to " + Ox.toTitleCase(self.options.type) + " Point",
+                    type: "image"
+                })
+                .bindEvent("click", goToPoint)
+                .appendTo(self.$controls);
+            self.$setPointButton = new Ox.Button({
+                    id: self.options.id + "Set" + Ox.toTitleCase(self.options.type),
+                    title: "Set" + Ox.toTitleCase(self.options.type),
+                    tooltip: "Set " + Ox.toTitleCase(self.options.type) + " Point",
+                    type: "image"
+                })
+                .bindEvent("click", setPoint)
+                .appendTo(self.$controls);
+        }
+
+        self.$positionInput = new Ox.TimeInput({
+                milliseconds: true,
+                seconds: true,
+                value: Ox.formatDuration(self.options.position)
+            })
+            .css({
+                float: "right",
+            })
+            .appendTo(self.$controls)
+
+        self.$positionInput.css({
+            width: "98px"
+        });
+        // fixme: children doesnt work w/o $element
+        self.$positionInput.$element.children(".OxLabel").each(function(i, element) {
+            $(this).css({
+                width: "22px",
+                marginLeft: (i == 0 ? 8 : 0) + "px",
+                background: "rgb(32, 32, 32)"
+            });
+        });
+        self.$positionInput.$element.children("div.OxInput").each(function(i) {
+            var marginLeft = [-82, -58, -34, -10];
+            $(this).css({
+                marginLeft: marginLeft[i] + "px"
+            }).addClass("foo");
+        });
+
+        self.$loadingIcon = new Ox.LoadingIcon()
+            .css({
+                position: "absolute",
+                left: (parseInt(self.options.width / 2) - 8) + "px",
+                top: (parseInt(self.options.height / 2) - 8) + "px"
+            })
+            .appendTo(that)
+            .start();
+
+        self.loadInterval = setInterval(function() {
+            if (self.video.readyState) {
+                clearInterval(self.loadInterval);
+                self.$loadingIcon.stop();
+                setPosition();
+            }
+        }, 50);
+
+        function getSubtitle() {
+            var subtitle = "";
+            $.each(self.options.subtitles, function(i, v) {
+                if (v["in"] <= self.options.position && v["out"] > self.options.position) {
+                    subtitle = v.text;
+                    return false;
+                }
+            });
+            return subtitle;
+        }
+
+        function goToPoint() {
+            that.triggerEvent("change", {
+                position: self.options.points[self.options.type == "in" ? 0 : 1]
+            });
+        }
+
+        function playing() {
+            self.options.position = self.video.currentTime;
+            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];
+            }
+            setMarkers();
+            setSubtitle();
+            self.$positionInput.options({
+                value: Ox.formatDuration(self.options.position)
+            });
+            that.triggerEvent("change", {
+                position: self.options.position
+            });
+        }
+
+        function setHeight() {
+            that.css({
+                height: (self.options.height + 16) + "px"
+            });
+            self.$video.css({
+                height: self.options.height + "px"
+            });
+            setSubtitleSize();
+        }
+
+        function setMarkers() {
+            self.options.position == self.options.posterFrame ? self.$markerFrame.show() : self.$markerFrame.hide();
+            $.each(self.$markerPoint, function(point, markers) {
+                $.each(markers, function(edge, marker) {
+                    self.options.position == self.options.points[point == "in" ? 0 : 1] ?
+                            marker.show() : marker.hide();
+                });
+            })
+        }
+
+        function setPoint() {
+            var data = {};
+            self.options.points[self.options.type == "in" ? 0 : 1] = self.options.position;
+            setMarkers();
+            data[self.options.type] = self.options.position;
+            that.triggerEvent("set", data);
+        }
+
+        function setPosition() {
+            self.video.currentTime = self.options.position;
+            setMarkers();
+            setSubtitle();
+            self.$positionInput.options({
+                value: Ox.formatDuration(self.options.position)
+            });
+        }
+
+        function setSubtitle() {
+            var subtitle = getSubtitle();
+            if (subtitle != self.subtitle) {
+                self.subtitle = subtitle;
+                self.$subtitle.html(highlight(self.subtitle, self.options.find).replace(/\n/g, "<br/>"));
+            }
+        }
+
+        function setSubtitleSize() {
+            self.$subtitle.css({
+                bottom: parseInt(self.controlsHeight + self.options.height / 16) + "px",
+                width: self.options.width + "px",
+                fontSize: parseInt(self.options.height / 20) + "px",
+                WebkitTextStroke: (self.options.height / 1000) + "px rgb(0, 0, 0)"
+            });
+        }
+
+        function setWidth() {
+            that.css({
+                width: self.options.width + "px"
+            });
+            self.$video.css({
+                width: self.options.width + "px"
+            });
+            setSubtitleSize();
+        }
+
+        function toggleMute() {
+            self.video.muted = !self.video.muted;
+        }
+
+        function togglePlay() {
+            self.video.paused ? that.play() : that.pause();
+        }
+
+        self.onChange = function(key, value) {
+            if (key == "height") {
+                setHeight();
+            } else if (key == "points") {
+                setMarkers();
+            } else if (key == "position") {
+                setPosition();
+            } else if (key == "posterFrame") {
+                setMarkers();
+            } else if (key == "width") {
+                setWidth();
+            }
+        }
+
+        that.mute = function() {
+            self.video.muted = true;
+            return that;
+        };
+
+        that.pause = function() {
+            self.video.pause();
+            clearInterval(self.playInterval);
+            self.playingInToOut = false;
+            return that;
+        };
+
+        that.play = function() {
+            self.video.play();
+            self.playInterval = setInterval(playing, 40);
+            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");
+            return that;
+        };
+
+        that.toggleMute = function() {
+            self.$muteButton.trigger("click");
+            return that;
+        }
+
+        that.togglePlay = function() {
+            self.$playButton.trigger("click");
+            return that;
+        }
+
+        that.unmute = function() {
+            self.video.muted = false;
+            return that;
+        };
+
+        return that;
+
+    }
+
+    $.getJSON("/" + videoId + "/data/subtitles.json", function(data) {
+
+        subtitles = data;
+
+        $.getJSON("/" + videoId + "/data/cuts.json", function(data) {
+
+            cuts = data;
+
+            $main = new Ox.SplitPanel({
+                elements: [
+                    {
+                        element: $lists = new Ox.Container({
+                            id: "lists"
+                        }),
+                        resizable: true,
+                        resize: [128, 192, 256],
+                        size: 192
+                    },
+                    {
+                        element: $panel = new Ox.SplitPanel({
+                            elements: [
+                                {
+                                    element: $annotation = new Ox.Container({
+                                        id: "annotation"
+                                    }),
+                                    resizable: true,
+                                    resize: [128, 192, 256],
+                                    size: 192
+                                },
+                                {
+                                    element: $editor = new Ox.Editor({
+                                        cuts: cuts,
+                                        duration: duration,
+                                        find: find,
+                                        id: "editor",
+                                        largeTimeline: true,
+                                        matches: matches,
+                                        points: points,
+                                        position: position,
+                                        posterFrame: posterFrame,
+                                        subtitles: subtitles,
+                                        videoHeight: videoHeight,
+                                        videoId: videoId,
+                                        videoWidth: videoWidth,
+                                        videoSize: "large",
+                                        width: pageWidth
+                                    })
+                                },
+                            ],
+                            id: "panel",
+                            orientation: "horizontal",
+                        })
+                    }
+                ],
+                id: "main",
+                orientation: "horizontal"
+            }).appendTo($body);
+
+        });
+
+    });
+    });
+
+    function highlight(txt, str) {
+        return str ? txt.replace(
+            new RegExp("(" + str + ")", "ig"),
+            "<span class=\"OxHighlight\">$1</span>"
+        ) : txt;
+    }
+
+    $window.resize(function() {
+        $editor.options({
+            width: $document.width() - 384 -2
+        });
+        //resizeVideoPlayers($window.width() - 384 - 2);
+    })
+
+    Ox.theme("modern")
+});
diff --git a/pandora/templates/timeline.html b/pandora/templates/timeline.html
new file mode 100644
index 00000000..ba30d1bd
--- /dev/null
+++ b/pandora/templates/timeline.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>timeline demo</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <link rel="stylesheet" type="text/css" href="/static/oxjs/build/css/ox.ui.css"/>
+        <link rel="stylesheet" type="text/css" href="/static/css/timeline.css"/>
+        <script type="text/javascript" src="/static/oxjs/build/js/jquery-1.4.2.js"></script>
+        <script type="text/javascript" src="/static/js/jquery/jquery.videosupport.js"></script>
+        <script type="text/javascript" src="/static/oxjs/build/js/ox.js"></script>
+        <script type="text/javascript" src="/static/oxjs/build/js/ox.data.js"></script>
+        <script type="text/javascript" src="/static/oxjs/build/js/ox.ui.js"></script>
+        <script type="text/javascript" src="/static/js/timeline.js"></script>
+    </head>
+    <body></body>
+</html>
diff --git a/pandora/urls.py b/pandora/urls.py
index e7355157..a8e06ea2 100644
--- a/pandora/urls.py
+++ b/pandora/urls.py
@@ -15,6 +15,7 @@ urlpatterns = patterns('',
     (r'^pandora.json$', 'app.views.pandora_json'),
     (r'^$', 'app.views.intro'),
     (r'^ra$', 'app.views.index'),
+    (r'^timeline$', 'app.views.timeline'),
     (r'^r/(?P<key>.*)$', 'oxuser.views.recover'),
     (r'', include('backend.urls')),