From 78321d2f9a1af108fa9c8850d7a3c3c0a7f909c2 Mon Sep 17 00:00:00 2001
From: j <0x006A@0x2620.org>
Date: Sat, 4 Jun 2011 17:42:28 +0200
Subject: [PATCH] remove unused files

---
 static/js/timeline.js | 1303 -----------------------------------------
 static/js/ui.js       | 1155 ------------------------------------
 2 files changed, 2458 deletions(-)
 delete mode 100644 static/js/timeline.js
 delete mode 100644 static/js/ui.js

diff --git a/static/js/timeline.js b/static/js/timeline.js
deleted file mode 100644
index a4e0a1c..0000000
--- a/static/js/timeline.js
+++ /dev/null
@@ -1,1303 +0,0 @@
-$(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")
-});
diff --git a/static/js/ui.js b/static/js/ui.js
deleted file mode 100644
index 4ea651d..0000000
--- a/static/js/ui.js
+++ /dev/null
@@ -1,1155 +0,0 @@
-$(function() {
-    Ox.initLoading();
-    var pandora = new Ox.App({
-            requestURL: "/api/"
-        }),
-        $dialog = new Ox.Dialog({
-            title: "Application Error",
-            buttons: [
-                {
-                    value: "Change Title",
-                    click: function() {
-                        Ox.print("click to change title")
-                        $dialog.options({
-                            title: "New Title"
-                        });
-                        $dialog.$buttons[0].toggleDisabled();
-                    }
-                },
-                {
-                    value: "Close",
-                    click: function() {
-                        $dialog.close();
-                    }
-                }
-            ]
-        });
-
-    var user = {
-        username: "",
-        group: "guest", // guest / user / vip / admin
-        prefs: {
-            find: "all",
-            groupMovies: "country",
-            orderMovies: "ascending",
-            orderGroups: "descending",
-            showGroups: true,
-            showInfo: true,
-            showMovies: true,
-            showSidebar: true,
-            sortMovies: "director",
-            sortGroups: "items",
-            useOxdbPosters: false,
-            useGroups: true,
-            viewMovies: "list",
-            viewIcons: "poster",
-        }
-    }
-
-    Ox.Location.set("find", {
-        s: user.prefs.sortMovies,
-        o: user.prefs.orderMovies
-    })
-
-    var $body = $("body");
-    var aspectRatio = 4 / 3;
-
-    var foo = {
-        id: "foo",
-        title: ["Show Window", "Hide Window"],
-        disabled: true,
-        checked: false,
-        group: "foo",
-        shortcut: "ALT ESCAPE", // $(this).bind("OxKeyboardAltEscape", function() { $(this).trigger("click"); })
-        click: function() {
-            
-        },
-        bind: [
-            ["OxUserLogin", function(e) {
-                $(this).setTitle("User:" + e.user)
-            }],
-            ["OxResizeWindow", function() {
-                $(this).toggleChecked();
-                $(this).toggleDisabled();
-                $(this).toggleTitle();
-            }]
-        ],
-        trigger: true // $("*").trigger("OxMenuUserLogin") // or trigger({ "type: OxMenuGroupname", item: Item })
-    }
-
-    var m = [
-        ["pandora", "Pandora", [
-            ["about", "About Pandora", {
-                click: loadPage
-            }],
-            [],
-            ["faq", "Frequently Asked Questions", {
-                click: loadPage
-            }],
-            ["tos", "Terms of Service", {
-                click: loadPage
-            }],
-            ["sas", "Security Advisory System", {
-                click: loadPage
-            }],
-            [],
-            ["contact", "Contact", {
-                click: loadPage
-            }],
-            [],
-            ["technology", "Technology", {
-                click: loadPage
-            }],
-            ["source", "Source Code", {
-                click: loadPage
-            }],
-            ["report", "Report a Bug...", {
-                click: loadPage
-            }]
-        ]],
-        ["user", "User", [
-            ["user", "User: not logged in", {
-                disabled: true,
-                bind: [
-                    ["OxLogin", function() {
-                        $(this).setTitle("User: " + e.username)
-                    }],
-                    ["OxLogout", function() {
-                        $(this).toggleTitle();
-                    }]
-                ]
-            }],
-            [],
-            ["account", "Account", {
-                disabled: true,
-                click: loadPage
-            }],
-            ["preferences", "Preferences", {
-                disabled: true,
-                shortcut: "CONTROL ,",
-                click: loadPage
-            }],
-            [],
-            ["login", ["Login", "Logout"], {
-                click: loadDialog,
-                bind: [
-                    ["OxLogin", function() {
-                        $(this).toggleTitle();
-                    }],
-                    ["OxLogout", function() {
-                        $(this).toggleTitle();
-                    }]
-                ]
-            }]
-        ]],
-        ["list", "List", [
-            ["history", "History", [
-                ["All Movies", "All Movies", {}]
-            ]],
-            ["viewFilter", "View Filter", [
-                ["Most Viewed", "Most Viewed", {}],
-                ["Recently Viewed", "Recently Viewed", {}]
-            ]],
-            ["viewList", "View List", [
-                ["Favorites", "Favorites", {}]
-            ]],
-            ["viewFeature", "View Feature", [
-                ["Situationist Film", "Situationist Film", {}],
-                ["Timelines", "Timelines", {}],
-            ]],
-            [],
-            ["newList", "New List...", {
-                disabled: true,
-                shortcut: "CONTROL N",
-                click: loadDialog
-            }],
-            ["newListFromSelection", "New List from Selection...", {
-                disabled: true,
-                shortcut: "SHIFT CONTROL N",
-                click: loadDialog
-            }],
-            ["newFilter", "New Filter...", {
-                disabled: true,
-                shortcut: "ALT CONTROL N",
-                click: loadDialog
-            }],
-            [],
-            ["add", "Add Selected Movie to List...", {
-                disabled: true
-            }],
-            [],
-            ["set", "Set Poster Frame", {
-                disabled: true
-            }]
-        ]],
-        ["edit", "Edit", [
-            ["undo", "Undo", {
-                disabled: true,
-                shortcut: "CONTROL Z"
-            }],
-            ["redo", "Redo", {
-                disabled: true,
-                shortcut: "SHIFT CONTROL Z"
-            }],
-            [],
-            ["cut", "Cut", {
-                disabled: true,
-                shortcut: "CONTROL X"
-            }],
-            ["copy", "Copy", {
-                disabled: true,
-                shortcut: "CONTROL C"
-            }],
-            ["paste", "Paste", {
-                disabled: true,
-                shortcut: "CONTROL V"
-            }],
-            ["delete", "Delete", {
-                disabled: true,
-                shortcut: "DELETE"
-            }],
-            [],
-            ["all", "Select All", {
-                disabled: true,
-                shortcut: "CONTROL A"
-            }],
-            ["none", "Select None", {
-                disabled: true,
-                shortcut: "SHIFT CONTROL A"
-            }],
-            ["invert", "Invert Selection", {
-                disabled: true,
-                shortcut: "ALT CONTROL A"
-            }],
-        ]],
-        ["view", "View", [
-            ["movies", "View Movies", getMenuGroupItems("viewMovies", [
-                "as List",
-                "as Icons",
-                "with Clips",
-                "with Timelines",
-                "with Maps",
-                "",
-                "as Scenes",
-                "on Map",
-                "on Calendar"
-            ])],
-            ["icons", "Icons", getMenuGroupItems("viewIcons", [
-                "Poster",
-                "Still",
-                "Timeline"
-            ])],
-            ["info", "Info", getMenuGroupItems("viewInfo", [
-                "Poster",
-                "Video"
-            ])],
-            [],
-            ["open", "Open Movie", [
-                ["info", "Info", {
-                    shortcut: "CONTROL RETURN"
-                }],
-                ["poster", "Statistics", {}],
-                ["scenes", "Clips", {}],
-                ["editor", "Timeline", {}],
-                ["map", "Map", {}],
-                ["calendar", "Calendar", {}],
-                [],
-                ["files", "Files", {}]
-            ]],
-            ["preview", "Preview", { shortcut: "CONTROL SPACE" }],
-            [],
-            ["toggleSidebar", ["Hide Sidebar", "Show Sidebar"], {
-                shortcut: "SHIFT S"
-            }],
-            ["toggleInfo", ["Hide Info", "Show Info"], {
-                shortcut: "SHIFT I"
-            }],
-            ["toggleGroups", ["Hide Groups", "Show Groups"], {
-                shortcut: "SHIFT G"
-            }],
-            ["toggleMovies", ["Hide Movies", "show Movies"], {
-                disabled: true,
-                shortcut: "SHIFT M"
-            }],
-        ]],
-        ["sort", "Sort", [
-            ["sortMovies", "Sort Movies by", getMenuGroupItems("sortMovies", [
-                "Title",
-                "Director",
-                "Country",
-                "Year",
-                "Runtime",
-                "Language",
-                "Writer",
-                "Producer",
-                "Cinematographer",
-                "Editor",
-                "Cast",
-                "Genre",
-                "Keywords",
-                "Release Date",
-                "Budget",
-                "Gross",
-                "Profit",
-                "Rating",
-                "Votes",
-                "Connections",
-                "Locations",
-                "ID",
-                "",
-                "Aspect Ratio",
-                "Duration",
-                "Color",
-                "Saturation",
-                "Brightness",
-                "Volume",
-                "Clips",
-                "Cuts",
-                "Cuts per Minute",
-                "Words",
-                "Words per Minute",
-                "",
-                "Resolution",
-                "Pixels",
-                "Size",
-                "Bitrate",
-                "Files",
-                "Filename",
-                "Date Published",
-                "Date Modified"
-            ])],
-            ["orderMovies", "Order Movies", getMenuGroupItems("orderMovies", [
-                "Ascending",
-                "Descending"
-            ])],
-            [],
-            ["groups", "Use Groups", {
-                checked: true
-            }],
-            ["groupMovies", "Group Movies by", getMenuGroupItems("groupMovies", [
-                "Director",
-                "Country",
-                "Year",
-                "Language",
-                "Genre"
-            ])],
-            ["sortGroups", "Sort Groups by", getMenuGroupItems("sortGroups", [
-                "Name",
-                "Number of Movies"
-            ])],
-            ["orderGroups", "Order Groups", getMenuGroupItems("orderGroups", [
-                "Ascending",
-                "Descending"
-            ])]
-        ]],
-        ["find", "Find", [
-            ["find", "Find", getMenuGroupItems("find", [
-                "All",
-                "Title",
-                "Director",
-                "Country",
-                "Year",
-                "Language",
-                "Writer",
-                "Producer",
-                "Cinematographer",
-                "Editor",
-                "Cast",
-                "Name",
-                "Genre",
-                "Keyword",
-                "Summary",
-                "Trivia",
-                "Dialog"
-            ])],
-            [],
-            ["advanced", "Advanced Find...", {}]
-        ]],
-        ["help", "Help", [
-            ["help", "Pandora Help", {
-                shortcut: "SHIFT ?"
-            }]
-        ]]
-    ];
-
-    function getMenuGroupItems(group, titles) {
-        var items = [];
-        $.each(titles, function(i, v) {
-            if (v) {
-                //v.replace(/(^[as|on] )/, "");
-                var id = v.replace("as ", "").replace("with ", "").replace(" of Movies", "").replace(" ", "").toLowerCase();
-                items.push([id, v, {
-                    group: group,
-                    checked: user.prefs[group] == id,
-                    bind: [group, function(e) {
-                        if (e.sort == id) {
-                            Ox.topMenu.toggleChecked("sort/" + group + "/" + id);
-                        }
-                    }]
-                }]);
-            } else {
-                items.push([]);
-            }
-        });
-        if (group == "viewMovies") {
-            items.push([]),
-            items.push(["rss", "RSS", {}]);
-            items.push(["json", "JSON", {}]);
-        }
-        if (group == "viewIcons") {
-            items.push([]);
-            items.push(["pandora", "Always Use 0xdb Posters", {
-                group: "pandoraPosters",
-                checked: false
-            }]);
-        }
-        return items;
-    }
-
-    var menus = [
-        ["list", "List", [
-            ["foo", "Foo", { checked: true, shortcut: "ALT ESCAPE" }, function() {}],
-            ["view", "View List", getMenuItemsC()],
-            ["more", "View More", getMenuItemsL()],
-            [],
-            ["createList", "New List...", { disabled: true, shortcut: "CONTROL N" }, function() { loadDialog("createList"); }],
-            ["createListFromSelection", "New List from Selection...", { disabled: true, shortcut: "SHIFT CONTROL N" }, function() { loadDialog("createListFromSelection"); }],
-            ["createSmartList", "New Filter...", { disabled: true, shortcut: "ALT CONTROL N"}, function() { loadDialog("createList"); }],
-            [],
-            ["add", "Add Movie to List", { disabled: false }, function() {}],
-            ["remove", "Remove Movie from List", { disabled: true }, function() {}]
-        ]],
-        ["edit", "Edit", [
-            ["undo", "Undo", { shortcut: "CONTROL Z" }, function() {}],
-            ["redo", "Redo", { shortcut: "SHIFT CONTROL Z" }, function() {}],
-            [],
-            ["cut", "Cut", { shortcut: "CONTROL X" }, function() {}],
-            ["copy", "Copy", { shortcut: "CONTROL C" }, function() {}],
-            ["paste", "Paste", { shortcut: "CONTROL V" }, function() {}],
-            ["delete", "Delete", { shortcut: "DELETE" }, function() {}],
-            [],
-            ["all", "Select All", { shortcut: "CONTROL A" }, function() {}],
-            ["none", "Select None", { shortcut: "SHIFT CONTROL A" }, function() {}],
-            ["invert", "Invert Selection", { shortcut: "ALT CONTROL A" }, function() {}],
-        ]],
-        ["view", "View", [
-            ["view", "View Movies", [
-                ["viewList", "as List", function() { setPref("view", "list"); }],
-                ["viewGrid", "as Grid", { checked: true }, function() { setPref("view", "grid"); }],
-                ["viewScenes", "as Scenes", function() { setPref("view", "scenes"); }],
-                ["viewTimelines", "as Timelines", function() { setPref("view", "timelines"); }],
-                ["viewMaps", "as Maps", function() { setPref("view", "maps"); }],
-                [],
-                ["map", "on Map", function() {}],
-                ["calendar", "on Calendar", function() {}],
-                [],
-                ["viewRSS", "RSS", function() { setPref("view", "maps"); }],
-                ["viewJSON", "JSON", function() { setPref("view", "maps"); }],
-                [],
-                ["foobar", "foobar", [
-                    ["foo", "foo", function() { setPref("view", "maps"); }],
-                    ["bar", "bar", function() { setPref("view", "maps"); }]
-                ]]
-            ]],
-            ["icons", "Icons", [
-                ["posters", "Posters", { checked: true }, function() {}],
-                ["stills", "Stills", function() {}],
-                ["timelines", "Timelines", function() {}],
-                [],
-                ["pandora", "Always Use 0xdb Posters", function() {}],
-            ]],
-            [],
-            ["open", "Open Movie", [
-                ["info", "Info", { shortcut: "CONTROL RETURN" }, function() {}],
-                ["poster", "Poster", function() {}],
-                ["scenes", "Scenes", function() {}],
-                ["editor", "Editor", function() {}],
-                ["map", "Map", function() {}],
-                ["calendar", "Calendar", function() {}]
-            ]],
-            ["preview", "Preview Movie", { shortcut: "CONTROL SPACE" }, function() {}],
-            [],
-            ["lists", "Hide Lists", { shortcut: "SHIFT L" }, function() { $("#sideView").parent().next().trigger("dblclick"); $topMenu.toggleTitle("view/lists", ["Hide Lists", "Show Lists"]) }],
-            ["stills", "Hide Scenes", { shortcut: "SHIFT S" }, function() {} ],
-            ["groups", "Hide Groups", { shortcut: "SHIFT G" }, function() {}],
-            ["movies", "Hide Movies", { disabled: true, shortcut: "SHIFT M" }, function() {}],
-        ]],
-        ["sort", "Sort", [
-            ["sort", "Sort Movies by", [
-                ["id", "ID", { group: "sort", checked: true }, function() { setPref("sort", "id"); }],
-                ["title", "Title", { group: "sort" }, function() { setPref("sort", "title"); }],
-                ["director", "Director", { group: "sort" }, function() { setPref("sort", "director"); }],
-                ["country", "Country", { group: "sort" }, function() { setPref("sort", "country"); }],
-                ["year", "Year", { group: "sort" }, function() { setPref("sort", "year"); }],
-                ["language", "Language", { group: "sort" }, function() { setPref("sort", "language"); }],
-                ["runtime", "Runtime", { group: "sort" }, function() { setPref("sort", "runtime"); }],
-                ["producer", "Producer", { group: "sort" }, function() { setPref("sort", "producer"); }],
-                ["writer", "Writer", { group: "sort" }, function() { setPref("sort", "writer"); }],
-                ["cinematographer", "Cinematographer", { group: "sort" }, function() { setPref("sort", "cinematographer"); }],
-                ["editor", "Editor", { group: "sort" }, function() { setPref("sort", "editor"); }],
-                ["genre", "Genre", { group: "sort" }, function() { setPref("sort", "genre"); }],
-                ["releasedate", "Release Date", { group: "sort" }, function() { setPref("sort", "releasedate"); }],
-                ["rating", "Rating", { group: "sort" }, function() { setPref("sort", "rating"); }],
-                ["votes", "Votes", { group: "sort" }, function() { setPref("sort", "votes"); }]
-            ]],
-            ["order", "Order Movies", [
-                ["ascending", "Ascending", { group: "order", checked: true }, function() { setPref("order", "ascending"); }],
-                ["descending", "Descending", { group: "order" }, function() { setPref("order", "descending"); }]
-            ]],
-            [],
-            ["groups", "Use Groups", { checked: true }, function() {}],
-            ["group", "Group Movies by", [
-                ["title", "Title", function() { setPref("group", "title"); }],
-                ["director", "Director", { checked: true }, function() { setPref("group", "director"); }],
-                ["country", "Country", function() { setPref("group", "country"); }],
-                ["year", "Year", function() { setPref("group", "year"); }]
-            ]],
-            ["sortGroups", "Sort Groups by", [
-                ["name", "Name", { checked: true }, function() { setPref("sortGroups", "name"); }],
-                ["movies", "Number of Movies", function() { setPref("sortGroups", "movies"); }]
-            ]],
-            ["orderGroups", "Order Groups", [
-                ["ascending", "Ascending", { checked: true }, function() { setPref("orderGroups", "ascending"); }],
-                ["descending", "Descending", function() { setPref("orderGroups", "descending"); }]
-            ]]
-        ]],
-        ["find", "Find", [
-            ["find", "Find", [
-                ["all", "All", { checked: true }, function() {}],
-                ["title", "Title", function() { setPref("find", "title"); }],
-                ["director", "Director", function() { setPref("find", "director"); }],
-                ["country", "Country", function() { setPref("find", "country"); }],
-                ["year", "Year", function() { setPref("find", "year"); }],
-                ["language", "Language", function() { setPref("find", "language"); }],
-                ["producer", "Producer", function() { setPref("find", "producer"); }],
-                ["writer", "Writer", function() { setPref("find", "writer"); }],
-                ["cinematographer", "Cinematographer", function() { setPref("find", "cinematographer"); }],
-                ["editor", "Editor", function() { setPref("find", "editor"); }],
-                ["cast", "Cast", function() { setPref("find", "cast"); }],
-                ["name", "Name", function() { setPref("find", "name"); }],
-                ["genre", "Name", function() { setPref("find", "genre"); }],
-                ["keywords", "Keywords", function() { setPref("find", "keywords"); }],
-            ]],
-            [],
-            ["advanced", "Advanced Find", function() {}]
-        ]],
-        ["help", "Help", [
-            ["help", "Pandora Help", { shortcut: "SHIFT ?" }, function() {}]
-        ]],
-        ["test", "Test", [
-            ["me", "Check Me", function() { $topMenu.toggleChecked("test/me"); }],
-            ["disable", "Disable It", function() { $topMenu.toggleDisabled("test/me"); $topMenu.toggleTitle("test/disable", ["Disable It", "Enable It"]); }],
-            ["them", "Check Them", [
-                ["me", "Check Me", { checked: true, group: "them" }, function() { $topMenu.checkItem("test/them/me"); }],
-                ["her", "Check Her", { group: "them" }, function() { $topMenu.checkItem("test/them/her"); }],
-                ["him", "Check Him", { group: "them" }, function() { $topMenu.checkItem("test/them/him"); }],
-                [],
-                ["disable", "Disable Them", function() { $topMenu.toggleDisabled("test/them/me"); $topMenu.toggleDisabled("test/them/her"); $topMenu.toggleDisabled("test/them/him"); $topMenu.toggleTitle("test/them/disable", ["Disable Them", "Enable Them"]); }]
-            ]],
-            ["1", "1"],
-            ["2", "2"],
-            ["3", "3"],
-            ["4", "4"],
-            ["5", "5"],
-            ["6", "6"],
-            ["7", "7"],
-            ["8", "8"],
-            ["9", "9"],
-            ["10", "10"],
-            ["11", "11"],
-            ["12", "12"],
-            [],
-            ["add", "Add Item", function() { $topMenu.insertItemAfter("test/12", ["13", "13"]); $topMenu.toggleDisabled("test/add"); $topMenu.toggleDisabled("test/remove"); }],
-            ["remove", "Remove Item", { disabled: true }, function() { $topMenu.removeItem("test/13"); $topMenu.toggleDisabled("test/add"); $topMenu.toggleDisabled("test/remove"); }],
-        ]]
-    ];
-
-    function getMenuItemsC() {
-        var items = [];
-        var countries = Ox.getCountries();
-        $.each(countries, function(i, v) {
-            items.push([v.code, v.name, { icon: Ox.baseUrl + "png/flags/" + v.flag + ".png" }, function() {}]);            
-        });
-        return items;
-    }
-    function getMenuItemsL() {
-        var items = [];
-        var languages = Ox.getLanguages();
-        $.each(languages, function(i, v) {
-            items.push([v.code, v.name, { icon: Ox.baseUrl + "png/flags/" + v.flag + ".png" }, function() {}]);            
-        });
-        return items;
-    }
-
-    function getBrowserItems() {
-        var items = [];
-        var groups = [{"items": 3093, "title": "United States"}, {"items": 1142, "title": "France"}, {"items": 688, "title": "Germany"}, {"items": 548, "title": "United Kingdom"}, {"items": 296, "title": "Italy"}, {"items": 285, "title": "Japan"}, {"items": 253, "title": "Canada"}, {"items": 94, "title": "Austria"}, {"items": 88, "title": "Spain"}, {"items": 88, "title": "Switzerland"}, {"items": 79, "title": "Soviet Union"}, {"items": 75, "title": "Belgium"}, {"items": 72, "title": "Netherlands"}, {"items": 72, "title": "Sweden"}, {"items": 69, "title": "Unknown"}, {"items": 61, "title": "Poland"}, {"items": 52, "title": "Hong Kong"}, {"items": 50, "title": "Denmark"}, {"items": 46, "title": "Australia"}, {"items": 42, "title": "China"}, {"items": 42, "title": "India"}, {"items": 39, "title": "Finland"}, {"items": 38, "title": "South Korea"}, {"items": 36, "title": "Iran"}, {"items": 36, "title": "Russia"}, {"items": 34, "title": "Mexico"}, {"items": 34, "title": "Taiwan"}, {"items": 30, "title": "Ireland"}, {"items": 28, "title": "Portugal"}, {"items": 27, "title": "Cuba"}, {"items": 27, "title": "Yugoslavia"}, {"items": 26, "title": "Norway"}, {"items": 24, "title": "Argentina"}, {"items": 24, "title": "Brazil"}, {"items": 16, "title": "Czechoslovakia"}, {"items": 16, "title": "Luxembourg"}, {"items": 15, "title": "Thailand"}, {"items": 12, "title": "Chile"}, {"items": 12, "title": "Czech Republic"}, {"items": 11, "title": "Hungary"}, {"items": 10, "title": "Senegal"}, {"items": 9, "title": "Israel"}, {"items": 8, "title": "Greece"}, {"items": 7, "title": "Tunisia"}, {"items": 7, "title": "Turkey"}, {"items": 6, "title": "East Germany"}, {"items": 6, "title": "Egypt"}, {"items": 5, "title": "Algeria"}, {"items": 5, "title": "Burkina Faso"}, {"items": 4, "title": "Cameroon"}, {"items": 4, "title": "South Africa"}, {"items": 3, "title": "Bolivia"}, {"items": 3, "title": "Morocco"}, {"items": 3, "title": "Peru"}, {"items": 3, "title": "Philippines"}, {"items": 3, "title": "Romania"}, {"items": 3, "title": "Slovenia"}, {"items": 3, "title": "Ukraine"}, {"items": 3, "title": "Venezuela"}, {"items": 2, "title": "Armenia"}, {"items": 2, "title": "Bosnia and Herzegovina"}, {"items": 2, "title": "Croatia"}, {"items": 2, "title": "Estonia"}, {"items": 2, "title": "Iceland"}, {"items": 2, "title": "Jamaica"}, {"items": 2, "title": "Kazakhstan"}, {"items": 2, "title": "Lebanon"}, {"items": 2, "title": "Liechtenstein"}, {"items": 2, "title": "Lithuania"}, {"items": 2, "title": "Malaysia"}, {"items": 2, "title": "New Zealand"}, {"items": 2, "title": "Serbia"}, {"items": 2, "title": "Singapore"}, {"items": 2, "title": "Sri Lanka"}, {"items": 2, "title": "Vietnam"}, {"items": 1, "title": "Afghanistan"}, {"items": 1, "title": "Bangladesh"}, {"items": 1, "title": "Belarus"}, {"items": 1, "title": "Botswana"}, {"items": 1, "title": "Bulgaria"}, {"items": 1, "title": "Chad"}, {"items": 1, "title": "Colombia"}, {"items": 1, "title": "Congo"}, {"items": 1, "title": "Ecuador"}, {"items": 1, "title": "Indonesia"}, {"items": 1, "title": "Iraq"}, {"items": 1, "title": "Kenya"}, {"items": 1, "title": "Macau"}, {"items": 1, "title": "Madagascar"}, {"items": 1, "title": "Mali"}, {"items": 1, "title": "Niger"}, {"items": 1, "title": "Palestine"}, {"items": 1, "title": "Puerto Rico"}, {"items": 1, "title": "Serbia and Montenegro"}, {"items": 1, "title": "Slovakia"}, {"items": 1, "title": "Syria"}, {"items": 1, "title": "Tajikistan"}, {"items": 1, "title": "Uruguay"}, {"items": 1, "title": "Yemen"}];
-        $.each(groups, function(i, v) {
-            var code = Ox.getCountryCode(v.title.replace("Unknown", "Neutral Zone"));
-            var flag = Ox.getFlag(v.title.replace("Unknown", "Neutral Zone"));
-            var strings = v.title.split(" ");
-            items.push({
-                size: 64,
-                id: code,
-                icon: "http://localhost/pandorastatic/flags/" + flag + ".png",
-                title: strings[0] + (strings.length > 1 ? "<br/>" + strings[1] : ""),
-                info: Ox.formatNumber(v.items) + " Movie" + (v.items > 1 ? "s" : "")
-            });
-        });
-        return items;
-    }
-
-    /*
-
-    $element = new Ox.Container().css({
-        width: "256px",
-        height: "256px",
-        background: "red"
-    }).click(function() {
-        Ox.print("click");
-    }).html("foo").appendTo($body);
-
-    $bar = new Ox.Bar({
-        orientation: "horizontal",
-        height: 16
-    }).appendTo($body);
-
-    */
-
-    var $sideBrowserPlayer = $("<div/>")
-        .attr({
-            id: "sideBrowserPlayer"
-        }).css({
-            width: "100%",
-            height: "100%"
-        }).append(
-            $("<img/>").attr({
-                src: '/static/png/frame.png'
-            }).css({
-                width: "100%",
-                height: "100%"
-            }).click(function() {
-                var maxWidth = $(document).width(),
-                    maxHeight = $(document).height() - 96,
-                    width = Math.min($(this).data("width"), maxWidth),
-                    height = width * $(this).data("height") / $(this).data("width");
-                if (height > maxHeight) {
-                    width *= maxHeight / height;
-                    height = maxHeight;
-                }
-                pandora.$dialog = new Ox.Dialog({
-                    title: "Foo",
-                    buttons: [
-                        new Ox.Button()
-                            .val("Close")
-                            .click(function() {
-                                pandora.$dialog.close();
-                            })
-                    ],
-                    width: width,
-                    height: height
-                }).append(
-                    $("<img/>")
-                        .attr({
-                            src: $(this).attr("src")
-                        })
-                        .css({
-                            display: "block",
-                            width: width + "px",
-                            height: height + "px"
-                        })
-                ).open();
-            })
-        );
-
-    var $sideBrowser = new Ox.Element().css({
-        width: "100%",
-        height: "100%"
-    }).attr({
-        id: "sideBrowser" // remove this later
-    }).append($sideBrowserPlayer);
-
-    var $sideBar = new Ox.Container();
-
-    var $historyPanel = new Ox.Panel({
-        title: "History"
-    }).appendTo($sideBar.$content);
-    for (var i = 0; i < 10; i++) {
-        $historyPanel.append("Item #" + (i + 1) + "<br/>")
-    }
-    //$("<br/>").appendTo($sideBar.$content);
-    var $filtersPanel = new Ox.Panel({
-        title: "Filters"
-    }).appendTo($sideBar.$content);
-    for (var i = 0; i < 10; i++) {
-        $filtersPanel.append("Item #" + (i + 1) + "<br/>")
-    }
-    var $listsPanel = new Ox.Panel({
-        title: "Lists"
-    }).appendTo($sideBar.$content);
-    for (var i = 0; i < 10; i++) {
-        $listsPanel.append("Item #" + (i + 1) + "<br/>")
-    }
-    var $featuresPanel = new Ox.Panel({
-        title: "Features"
-    }).appendTo($sideBar.$content);
-    for (var i = 0; i < 10; i++) {
-        $featuresPanel.append("Item #" + (i + 1) + "<br/>")
-    }
-
-    pandora.$sideView = new Ox.SplitView({
-        orientation: "vertical",
-        elements: [
-            {
-                element: $sideBar
-            },
-            {
-                element: $sideBrowser,
-                size: 145,
-                resizable: true
-            }
-        ]
-    }).attr({
-        id: "sideView"
-    });
-
-
-    /*
-    var $main = new Ox.Container();
-    var $mainBar = new Ox.Bar({
-        orientation: "horizontal",
-        size: 16
-    });
-    var $mainBrowser = new Ox.IconList({
-        size: 64,
-        items: getBrowserItems()
-    });
-
-
-    var $mainView = new Ox.SplitView({
-        orientation: "vertical",
-        elements: [
-            {
-                element: $mainBrowser,
-                size: 132,
-                resizable: true
-            },
-            {
-                element: $mainBar,
-                size: 16
-            },
-            {
-                element: $main
-            }
-        ]
-    });
-    */
-
-    var $mainBrowser = new Ox.IconList({
-        size: 64,
-        sort: user.prefs.sortGroups,
-        order: user.prefs.orderGroups,
-        url: "/json/find",
-        params: {g:"country"}
-    }).attr({
-        id: "groups"
-    });
-    var $main = new Ox.Table({
-        list: "movies",
-        columns: [
-            {
-                id: "id",
-                title: "ID",
-                order: "ascending",
-                width: 60,
-                align: "left",
-                checked: true
-            },
-            {
-                id: "title",
-                title: "Title",
-                order: "ascending",
-                width: 240,
-                align: "left",
-                checked: true
-            },
-            {
-                id: "director",
-                title: "Director",
-                order: "ascending",
-                width: 180,
-                align: "left",
-                checked: true
-            },
-            {
-                id: "country",
-                title: "Country",
-                order: "ascending",
-                width: 120,
-                align: "left",
-                checked: true
-            },
-            {
-                id: "year",
-                title: "Year",
-                order: "descending",
-                width: 40,
-                align: "right",
-                checked: true
-            },
-            {
-                id: "runtime",
-                title: "Runtime",
-                order: "descending",
-                width: 60,
-                align: "right",
-                checked: true
-            },
-            {
-                id: "language",
-                title: "Language",
-                order: "ascending",
-                width: 120,
-                align: "left",
-                checked: true
-            },
-            {
-                id: "genre",
-                title: "Genre",
-                order: "ascending",
-                width: 120,
-                align: "left",
-                checked: true
-            },
-            {
-                id: "rating",
-                title: "Rating",
-                order: "descending",
-                width: 60,
-                align: "right",
-                checked: true
-            },
-            {
-                id: "votes",
-                title: "Votes",
-                order: "descending",
-                width: 60,
-                align: "right",
-                checked: true
-            }
-        ],
-        sort: user.prefs.sortMovies,
-        order: user.prefs.orderMovies,
-        url: "/json/find",
-        select: selectItem
-    });
-
-    // these should go with their respective Ox Objects
-    Ox.Event.bind("menu", function(data) {
-        if (data.menu == "topmenu" && Ox.startsWith(data.item, "sort/sortMovies/")) {
-            var sort = data.item.split("/").pop();
-            Ox.Location.set({
-                s: sort
-            });
-            $main.$body.sort(sort);
-        }
-        if (data.menu == "topmenu" && Ox.startsWith(data.item, "sort/orderMovies/")) {
-            var order = data.item.split("/").pop();
-            Ox.Location.set({
-                o: order
-            });
-            $main.$body.order(order);
-        }
-        if (data.menu == "topmenu" && data.item == "view/toggleSidebar") {
-            pandora.$sideView.toggle();
-            $topMenu.toggleDisabled("view/toggleInfo");
-        }
-        if (data.menu == "topmenu" && data.item == "view/toggleInfo") {
-            $sideBrowser.toggle();
-        }
-        if (data.menu == "topmenu" && data.item == "view/toggleGroups") {
-            $mainBrowser.toggle();
-        }
-        if (data.menu == "topmenu" && Ox.startsWith(data.item, "find/find/")) {
-            var find = data.item.split("/").pop();
-            $find.setPlaceholder("Find: " + Ox.toTitleCase(find));
-        }
-        if (data.menu == "topmenu" && data.item == "help/help") {
-            pandora.$dialog = new Ox.Dialog({
-                title: "Pandora Help",
-                buttons: [
-                    new Ox.Button()
-                        .val("Close")
-                        .click(function() {
-                            pandora.$dialog.close();
-                        })
-                ],
-                width: $(document).width() / 2,
-                height: ($(document).height() / 2) - 48
-            }).append(
-                new Ox.Element().html(Ox.repeat("Foo<br/>", 100))
-            ).open();
-        }
-    });
-
-    var $mainView = new Ox.SplitView({
-        orientation: "vertical",
-        elements: [
-            {
-                element: $mainBrowser,
-                size: 132,
-                resizable: true
-            },
-            {
-                element: $main
-            }
-        ]
-    });
-
-    var $middleView = new Ox.SplitView({
-        orientation: "horizontal",
-        elements: [
-            {
-                element: pandora.$sideView,
-                size: 192,
-                resizable: [128, 192, 256],
-                resize: resizePlayer
-            },
-            {
-                element: $mainView
-            }
-        ]
-    });
-
-    function resizePlayer(width) {
-        var height = Math.round((width - 4) / aspectRatio + 4);
-        //Ox.print(width, height);
-        $sideBar.css({
-            bottom: height + "px"
-        });
-        $sideBrowser.$element.parent().parent().css({
-            height: height + "px"
-        });
-        if (pandora.$sideView.$element.css("bottom") != "0px") {
-            pandora.$sideView.css({
-                bottom: (4 - height) + "px"
-            })
-        }
-    }
-
-    function selectItem(item) {
-        var url = "http://0xdb.org/" + item.id + "/still.jpg";
-        var img = $("<img/>").attr({
-            src: url
-        }).load(function() {
-            var img = new Image();
-            img.src = url;
-            aspectRatio = img.width / img.height;
-            var width = $sideBrowser.$element.width() + 4;
-            resizePlayer(width);
-            $sideBrowserPlayer.children().eq(0).attr({
-                src: url
-            }).data("width", img.width).data("height", img.height);
-        })
-    }
-
-    var $topMenu = new Ox.MenuBar({
-        id: "topmenu",
-        size: "large",
-        menus: m
-    });
-
-    var b = [
-        ["login", function(data) {
-            Ox.print("username:", data.username, "this:", this);
-            $topMenu.toggleChecked("user/login");
-        }],
-        ["sort", function(data) {
-            if (data.list == "movies") {
-                $topMenu.checkItem("sort/sortMovies/" + data.sort);
-                $topMenu.checkItem("sort/orderMovies/" + data.order);
-            }
-        }],
-        ["order", function(data) {
-            if (data.list == "movies") {
-                $topMenu.checkItem("sort/orderMovies/" + data.order);
-            }
-        }],
-        ["toggle", function(data) {
-            if (data.id == "sideView") {
-                $topMenu.toggleTitle("view/toggleSidebar");
-                $topMenu.toggleDisabled("view/toggleInfo");
-            } else if (data.id == "sideBrowser") {
-                $topMenu.toggleTitle("view/toggleInfo");
-            } else if (data.id == "groups") {
-                $topMenu.toggleTitle("view/toggleGroups");
-            }
-        }],
-        ["space", function(data) {
-            var height = $(document).height() - 96,
-                width = height * 5/8;
-            pandora.$dialog = new Ox.Dialog({
-                title: data.items[0].title,
-                buttons: [
-                    new Ox.Button()
-                        .val("Close")
-                        .click(function() {
-                            pandora.$dialog.close();
-                        })
-                ],
-                width: width,
-                height: height
-            }).append(
-                $("<img/>").attr({
-                    src: "http://0xdb.org/" + data.items[0].id + "/poster.large.jpg"
-                }).css({
-                    display: "block",
-                    width: width + "px",
-                    height: height + "px"
-                })
-            ).open();
-        }]
-    ];
-
-    $.each(b, function(i, v) {
-        Ox.Event.bind(v[0], function(data) {
-            v[1](data);
-        });
-    });
-
-    var $statusBar = new Ox.Bar({
-        orientation: "horizontal",
-        size: 24
-    }).attr({
-        id: "statusBar"
-    });
-
-    var loadingInterval;
-    $loading = $("<img/>").attr({
-        id: "loading",
-        src: Ox.baseUrl + "png/themes/ox/loading0.png"
-    }).ajaxStart(function() {
-        Ox.print("start")
-        $(this).attr({
-            src: Ox.baseUrl + "png/themes/ox/loading0.png"
-        });
-        $(this).show();
-        var loadingStep = 1;
-        loadingInterval = setInterval(function() {
-            $loading.attr({
-                src: Ox.baseUrl + "png/themes/ox/loading" + (loadingStep % 12) + ".png"
-            });
-            loadingStep++;
-        }, 83);
-        /*
-        $("body").css({
-            cursor: "wait"
-        });
-        */
-    }).ajaxStop(function() {
-        Ox.print("stop")
-        clearInterval(loadingInterval);
-        $(this).hide();
-        /*
-        $("body").css({
-            cursor: "default"
-        });
-        */
-    }).appendTo($topMenu.$element).trigger("ajaxStart");
-
-    var $view = new Ox.SplitView({
-        orientation: "vertical",
-        elements: [
-            {
-                element: $topMenu,
-                size: 24
-            },
-            {
-                element: $middleView
-            },
-            {
-                element: $statusBar,
-                size: 24
-            }
-        ]
-    }).appendTo($body);
-
-    /*
-    for (var i = 0; i < 100; i++) {
-        $main.$container.append("Item #" + (i + 1) + "<br/>");
-    }
-    */
-
-    $find = new Ox.Input({
-        placeholder: "Find: All"
-    }).attr({
-        id: "find"
-    }).appendTo($topMenu.$element).trigger("blur");
-    $find.change(function(that) {
-        var q = $(this).val();
-        $main.setUrl("/json/find", {q:q});
-        $mainBrowser.setUrl("/json/find", {g:"country", q:q});
-    });
-
-    /*
-    $find = $("<input/>")
-        .attr({
-            id: "find",
-            type: "text",
-            placeholder: "Find: All"
-        })
-        .focus(function() {
-            if ($(this).hasClass("OxPlaceholder")) {
-                $(this)
-                    .val("")
-                    .removeClass("OxPlaceholder");
-            }
-        })
-        .blur(function() {
-            if ($(this).val() === "") {
-                $(this)
-                    .addClass("OxPlaceholder")
-                    .val($(this).attr("placeholder"));
-            }
-        })
-        .appendTo($topMenu.$element)
-        .trigger("blur");
-
-    function focusFind() {
-        Ox.print("!!!")
-        $find.focus();
-        $find.select();
-    }
-
-    var keyboard = Ox.KeyboardController.setup({
-        "CONTROL F": focusFind
-    }, true);
-    Ox.KeyboardController.enable(keyboard);
-    */
-
-    //Ox.print($topMenu);
-
-
-
-    function loadDialog() {}
-    function loadPage() {}
-    function setPref(key, value) {
-        if (key == "sort") {
-            $topMenu.checkItem("sort/sort/" + value);
-        }
-    }
-
-    $("<select/>").css({
-        position: "absolute",
-        right: "4px",
-        bottom: "4px",
-    }).append(
-        $("<option/>").val("foo").html("Foo")
-    ).append(
-        $("<option/>").val("bar").html("Bar")
-    ).append(
-        $("<option/>").val("bar").html($main.$body.width())
-    ).appendTo($statusBar.$element);
-
-
-});