pandora/static/js/timeline.js

$(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),
        videoUrl = "/" + videoId + "/96p." + ($.support.video.webm ? "webm": "mp4"),
        stripTimeline = false;
        
    $.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;
        videoUrl = video.baseUrl + "/" + video.profiles[0] + "p." + ($.support.video.webm ? "webm": "mp4");

        //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: videoUrl,
                        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/" + (stripTimeline ? "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")
});