oxjs/source/Ox.UI/js/Video/Ox.VideoPlayer.js

// vim: et:ts=4:sw=4:sts=4:ft=js

/*@
Ox.VideoPlayer <f> Generic Video Player
    (options, self) -> <o> Video Player
    options <o> Options
        annotation <[o]> Array of annotation tracks
            name <s> Name of the annotation track
            data <[o]> Annotation data
                in <n> In point (sec)
                out <n> Out point (sec)
                text <s> Text            
        controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
            Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
            'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
            'position', 'resolution', 'settings'. The 'space' control is just
            empty space that separates left-aligned from right-aligned controls.
        duration <n|-1> Duration (sec)
        enableFind <b|false> If true, enable find
        enableFullscreen <b|false> If true, enable fullscreen
        enableKeyboard <b|false> If true, enable keyboard controls
        externalControls <b|false> If true, controls are outside the video
        find <s|''> Query string
        focus <s|'click'> focus on 'click', 'load' or 'mouseover'
        fps <n|25> Frames per second
        fullscreen <b|false> If true, video is in fullscreen
        height <n|144> Height in px (excluding external controls)
        in <n> In point (sec)
        keepIconVisible <b|false> If true, play icon stays visible after mouseleave
        keepLargeTimelineVisible <b|false> If true, large timeline stays visible after mouseleave
        keepLogoVisible <b|false> If true, logo stays visible after mouseleave
        logo <s|''> Logo image URL
        logoLink <s|''> Logo link URL
        logoTitle <s|''> Text for tooltip
        muted <b|false> If true, video is muted
        paused <b|false> If true, video is paused
        playInToOut <b|false> If true, video plays only from in to out
        position <n|0> Initial position (sec)
        poster <s|''> Poster URL
        posterFrame <n|-1> Position of poster frame (sec)
        preload <s|'auto'> 'auto', 'metadata' or 'none'
        out <n|-1> Out point (sec)
        resolution <n|0> resolution
        scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit)
        showFind <b|false> If true, show find input
        showHours <b|false> If true, don't show hours for videos shorter than one hour
        showIcon <b|false> If true, show play icon
        showIconOnLoad <b|false> If true, show icon on load
        showInterfaceOnLoad <b|false> If true, show controls and title on load
        showLargeTimeline <b|false> If true, show large timeline
        showMilliseconds <n|0> Number of decimals to show
        showPointMarkers <b|false> If true, show in/out markers
        showProgress <|false> If true, show buffering progress
        sizeIsLarge <b|false> If true, initial state of the size control is large
        subtitles <s|[o]|[]> URL or SRT or array of subtitles
            in <n> In point (sec)
            out <n> Out point (sec)
            text <s> Text
        timeline <s> Timeline image URL
        title <s|''> Video title
        type <s|'play'> 'play', 'in' or 'out'
        video <s|o|''> Video URL
            String or object ({resolution: url, resolution: url, ...})
        volume <n|1> Volume (0-1)
        width <n|256> Width in px
@*/

Ox.VideoPlayer = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            annotations: [],
            controlsBottom: [],
            controlsTop: [],
            duration: 0,
            enableFind: false,
            enableFullscreen: false,
            enableKeyboard: false,
            externalControls: false,
            find: '',
            focus: 'click',
            fps: 25,
            fullscreen: false,
            height: 144,
            'in': 0,
            keepIconVisible: false,
            keepLargeTimelineVisible: false,
            keepLogoVisible: false,
            largeTimeline: false,
            logo: '',
            logoLink: '',
            logoTitle: '',
            muted: false,
            paused: false,
            playInToOut: false,
            position: 0,
            poster: '',
            preload: 'auto',
            out: 0,
            resolution: 0,
            scaleToFill: false,
            showFind: false,
            showHours: false,
            showIcon: false,
            showIconOnLoad: false,
            showInterfaceOnLoad: false,
            showLargeTimeline: false,
            showMilliseconds: 0,
            showPointMarkers: false,
            showProgress: false,
            subtitles: [],
            timeline: '',
            title: '',
            type: 'play',
            video: '',
            volume: 1,
            width: 256
        })
        .options(options || {})
        .addClass('OxVideo')
        .css({
            position: 'absolute'
        });

    Ox.UI.$window.bind({
        resize: function() {
            self.options.fullscreen && setSizes();
        }
    });

    if (Ox.isString(self.options.video)) {
        self.video = self.options.video;
    } else {
        self.resolutions = Ox.sort(Object.keys(self.options.video));
        if (!(self.options.resolution in self.options.video)) {
            self.options.resolution = self.resolutions[0];
        }
        Ox.print('resolutions', self.resolutions)
        self.video = self.options.video[self.options.resolution];
    }

    self['in'] = self.options.playInToOut ? self.options['in'] : 0,
    self.out = self.options.playInToOut ? self.options.out : self.options.duration;
    self.options.duration = self.out - self['in'];
    self.options.position = Ox.limit(self.options.position, self['in'], self.out);

    self.millisecondsPerFrame = 1000 / self.options.fps;
    self.secondsPerFrame = 1 / self.options.fps;
    self.barHeight = 16;
    self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
    self.height = self.options.fullscreen ? window.innerHeight : self.options.height;

    if (self.options.enableKeyboard) {
        that.bindEvent({
            key_0: toggleMuted,
            key_1: toggleScale,
            key_equal: function() {
                changeVolumeBy(0.1);
            },
            key_f: function() {
                // need timeout so the "f" doesn't appear in the input field
                setTimeout(function() {
                    if (self.$find.is(':hidden')) {
                        toggleFind();
                    } else {
                        self.$findInput.focusInput();
                    }
                }, 0);
            },
            key_g: function() {
                goToNextResult(1);
            },
            key_left: function() {
                setPosition(self.options.position - self.secondsPerFrame);
            },
            key_minus: function() {
                changeVolumeBy(-0.1);
            },
            key_p: function() {
                playInToOut();
            },
            key_right: function() {
                setPosition(self.options.position + self.secondsPerFrame);
            },
            key_shift_f: function() {
                self.options.enableFullscreen && toggleFullscreen();
            },
            key_shift_g: function() {
                goToNextResult(-1);
            },
            key_shift_left: function() {
                setPosition(self.options.position - 1);
            },
            key_shift_right: function() {
                setPosition(self.options.position + 1);
            },
            key_space: togglePaused
        })
    }

    if (self.options.enableKeyboard) {
        if (self.options.focus == 'mouseenter') {
            that.bind({
                mouseenter: function() {
                    if (!self.inputHasFocus) {
                        that.gainFocus();
                    }
                },
                mouseleave: function() {
                    that.loseFocus();
                }
            });
        } else {
            that.bind({
                click: that.gainFocus
            });
        }
    }

    if (
        (!self.options.externalControls &&
        (self.options.controlsTop.length || self.options.controlsBottom.length)) ||
        self.options.showIcon
    ) {
        that.bind({
            mouseenter: function() {
                showInterface();
                self.mouseHasLeft = false;
                Ox.print('MOUSE HAS ENTERED')
            },
            mouseleave: function() {
                hideInterface();
                self.mouseHasLeft = true;
                Ox.print('MOUSE HAS LEFT')
            }
        });
    }

    if (Ox.isString(self.options.subtitles)) {
        if (self.options.subtitles.indexOf('\n') > -1) {
            self.options.subtitles = Ox.parseSRT(self.options.subtitles);
        } else {
            Ox.get(self.options.subtitles, function(data) {
                self.options.subtitles = Ox.parseSRT(data);
                self.results = find(self.options.find);
                Ox.print('--setting results--', self.$timeline)
                if (self.options.duration) {
                    // video has loaded
                    self.$timeline && self.$timeline.options({
                        results: self.results,
                        subtitles: self.options.subtitles
                    });
                    self.$largeTimeline && self.$largeTimeline.options({
                        subtitles: self.options.subtitles
                    });
                }
            });
            self.options.subtitles = [];
        }
    }
    self.results = find(self.options.find);

    self.buffered = [];
    self.controlsTimeout;

    self.$videoContainer = $('<div>')
        .css({
            position: 'absolute',
            top: self.options.externalControls && self.options.controlsTop ? '16px' : 0,
            background: 'rgb(0, 0, 0)',
            overflow: 'hidden'
        })
        .bind({
            click: function() {
                togglePaused();
            }
        })
        .appendTo(that.$element)

    self.$video = $('<video>')
        .attr(Ox.extend({
            preload: self.options.preload,
            src: self.video
        }, !self.options.paused ? {
            autoplay: 'autoplay'
        } : {}/*, self.options.poster ? {
            poster: self.options.poster
        } : {}*/))
        .css({
            position: 'absolute'
        })
        .bind(Ox.extend({
            ended: ended,
            loadedmetadata: loadedmetadata,
            seeked: seeked,
            seeking: seeking
        }, self.options.progress ? {
            progress: progress
        } : {}))
        .appendTo(self.$videoContainer);
    self.video = self.$video[0];

    if (self.options.poster) {
        self.$poster = $('<img>')
            .attr({
                src: self.options.poster
            })
            .css({
                position: 'absolute'
            })
            .appendTo(self.$videoContainer);
        self.posterIsVisible = true;
    }

    if (self.options.logo) {
        self.$logo = $('<img>')
            .attr({
                src: self.options.logo
            })
            .css({
                position: 'absolute',
                cursor: self.options.logoLink ? 'pointer' : 'default',
                opacity: 0.25,
            })
            .appendTo(self.$videoContainer);
        if (self.options.logoTitle) {
            self.$logoTooltip = Ox.Tooltip({
                title: self.options.logoTitle
            });
        }
    }

    self.$loadingIcon = $('<img>')
        .attr({
            src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
                .replace('/classic/', '/modern/')
        })
        .css({
            position: 'absolute'
        })
        .appendTo(self.$videoContainer);

    if (self.options.showIcon || self.options.showIconOnLoad) {
        self.$playIcon = $('<img>')
            .attr({
                src: Ox.UI.getImagePath(
                    'symbol' + (self.options.paused ? 'Play' : 'Pause') + '.svg'
                ).replace('/classic/', '/modern/')
            })
            .css({
                position: 'absolute',
                border: '2px solid rgb(255, 255, 255)',
                background: 'rgba(0, 0, 0, 0.5)',
                opacity: 0
            })
            .appendTo(self.$videoContainer);
        if (self.options.showIcon) {
            self.$playIcon.addClass('OxInterface');
        }
        if (self.options.showIconOnLoad) {
            self.iconIsVisible = true;
        }
    }

    if (self.options.subtitles.length || true) { // fixme
        self.$subtitle = $('<div>')
            //.addClass('OxSubtitle')
            .css({
                position: 'absolute',
                left: 0,
                right: 0,
                textAlign: 'center',
                textShadow: 'rgba(0, 0, 0, 1) 0 0 4px',
                color: 'rgb(255, 255, 255)'
            })
            .appendTo(self.$videoContainer);
    }

    if (self.options.enableFind) {

        self.$find = $('<div>')
            .addClass('OxControls')
            .css({
                position: 'absolute',
                right: 0,
                top: self.options.controlsTop.length ? '16px' : 0,
                borderBottomLeftRadius: '8px',
                borderBottomRightRadius: '8px'
            })
            .css({
                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
            })
            .css({
                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
            })
            .hide()
            .appendTo(that.$element);

        self.$results = $('<div>')
            .css({
                float: 'left',
                width: '24px',
                paddingTop: '2px',
                fontSize: '9px',
                textAlign: 'center'
            })
            .html('0')
            .appendTo(self.$find);

        self.$previousButton = Ox.Button({
                style: 'symbol',
                title: 'arrowLeft',
                tooltip: 'Previous [Shift+G]',
                type: 'image'
            })
            .css({float: 'left'})
            .bindEvent({
                click: function() {
                    goToNextResult(-1);
                }
            })
            .appendTo(self.$find);

        self.$nextButton = Ox.Button({
                style: 'symbol',
                title: 'arrowRight',
                tooltip: 'Next [G]',
                type: 'image'
            })
            .css({float: 'left'})
            .bindEvent({
                click: function() {
                    goToNextResult(1);
                }
            })
            .appendTo(self.$find);

        self.$findInput = Ox.Input({
                changeOnKeypress: true,
                value: self.options.find
            })
            .css({
                float: 'left',
                background: 'rgba(0, 0, 0, 0)',
                MozBoxShadow: '0 0 0',
                WebkitBoxShadow: '0 0 0'
            })
            .bindEvent({
                blur: function() {
                    self.inputHasFocus = false;
                },
                focus: function() {
                    self.inputHasFocus = true;
                },
                change: function(data) {
                    submitFindInput(data.value, false);
                },
                submit: function(data) {
                    self.inputHasFocus = false;
                    submitFindInput(data.value, true);
                }
            })
            .appendTo(self.$find);

        self.$findInput.children('input').css({
                width: (self.positionWidth - 6) + 'px',
                height: '16px',
                padding: '0 3px 0 3px',
                border: '0px',
                borderRadius: '8px',
                fontSize: '11px',
                color: 'rgb(255, 255, 255)'
            })
            .css({
                background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
            })
            .css({
                background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
            });

        ///*
        self.$clearButton = Ox.Button({
                style: 'symbol',
                title: 'delete',
                tooltip: 'Clear',
                type: 'image'
            })
            .css({float: 'left'})
            .bindEvent({
                click: function() {
                    self.$results.html('0');
                    self.$findInput.clearInput();
                    self.results = [];
                    self.$timeline && self.$timeline.options({
                        results: self.results
                    });
                    //setTimeout(self.$findInput.focusInput, 10);
                }
            })
            .appendTo(self.$find);
        //*/

        self.$hideFindButton = Ox.Button({
                style: 'symbol',
                title: 'close',
                tooltip: 'Hide',
                type: 'image'
            })
            .css({float: 'left'})
            .bindEvent({
                click: toggleFind
            })
            .appendTo(self.$find);
      
    }

    ['top', 'bottom'].forEach(function(edge) {

        var titlecase = Ox.toTitleCase(edge);

        if (self.options['controls' + titlecase].length) {

            self['$controls' + titlecase] = Ox.Bar({
                size: self.barHeight
            })
            .addClass('OxControls OxInterface')
            .css({
                position: 'absolute',
                opacity: self.options.externalControls ? 1 : 0
            })
            .css(edge, 0)
            .appendTo(that.$element);

            if (!self.options.externalControls) {
                self['$controls' + titlecase].css({
                    backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
                })
                .css({
                    backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
                });
            }

            self.options['controls' + titlecase].forEach(function(control) {

                if (control == 'find') {

                    self.$findButton = Ox.Button({
                        style: 'symbol',
                        title: 'find',
                        tooltip: 'Find',
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent('click', toggleFind)
                    .appendTo(self['$controls' + titlecase]);

                } else if (control == 'fullscreen') {

                    self.$fullscreenButton = Ox.Button({
                        style: 'symbol',
                        title: [
                            {id: 'grow', title: 'grow', selected: !self.options.fullscreen},
                            {id: 'shrink', title: 'shrink', selected: self.options.fullscreen}
                        ],
                        tooltip: ['Enter Fullscreen', 'Exit Fullscreen'],
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent('click', function() {
                        toggleFullscreen('button');
                    })
                    .appendTo(self['$controls' + titlecase]);

                } else if (control == 'mute') {

                    self.$muteButton = Ox.Button({
                        style: 'symbol',
                        title: [
                            {id: 'mute', title: 'mute', selected: !self.options.muted},
                            {id: 'unmute', title: 'unmute', selected: self.options.muted}
                        ],
                        tooltip: ['Mute', 'Unmute'],
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent('click', function() {
                        toggleMuted('button');
                    })
                    .appendTo(self['$controls' + titlecase]);

                } else if (control == 'play') {

                    self.$playButton = Ox.Button({
                        style: 'symbol',
                        // FIXME: this is retarded, fix Ox.Button
                        title: [
                            {id: 'play', title: 'play', selected: self.options.paused},
                            {id: 'pause', title: 'pause', selected: !self.options.paused}
                        ],
                        tooltip: ['Play', 'Pause'],
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent('click', function() {
                        togglePaused('button');
                    })
                    .appendTo(self['$controls' + titlecase]);

                } else if (control == 'playInToOut') {

                    self.$playInToOutButton = Ox.Button({
                        style: 'symbol',
                        title: 'playInToOut',
                        tooltip: 'Play In to Out',
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent('click', playInToOut)
                    .appendTo(self['$controls' + titlecase]);

                } else if (control == 'position') {

                    self.positionWidth = 48 +
                        !!self.options.showMilliseconds * 2
                        + self.options.showMilliseconds * 6;

                    self.$position = $('<div>')
                        .css({
                            float: 'left',
                            width: (self.positionWidth - 4) + 'px',
                            height: '12px',
                            padding: '2px',
                            fontSize: '9px',
                            textAlign: 'center',
                            color: 'rgb(255, 255, 255)'
                        })
                        .html(formatPosition)
                        .bind({
                            click: function() {
                                if (!self.options.paused) {
                                    self.playOnSubmit = true;
                                    togglePaused();
                                } else if (self.playOnLoad) {
                                    // if clicked during resolution switch,
                                    // don't play on load
                                    self.playOnLoad = false;
                                    self.playOnSubmit = true;
                                }
                                self.$position.hide();
                                self.$positionInput
                                    .options({
                                        value: formatPosition()
                                    })
                                    .show()
                                    .focusInput(false);
                            }
                        })
                        .appendTo(self['$controls' + titlecase].$element);

                    self.$positionInput = Ox.Input({
                            value: formatPosition(),
                            width: self.positionWidth
                        })
                        .css({
                            float: 'left',
                            background: 'rgba(0, 0, 0, 0)',
                            MozBoxShadow: '0 0 0',
                            WebkitBoxShadow: '0 0 0'
                        })
                        .bindEvent({
                            focus: function() {
                                self.inputHasFocus = true;
                            },
                            blur: function() {
                                self.inputHasFocus = false;
                                submitPositionInput();
                            }
                        })
                        .hide()
                        .appendTo(self['$controls' + titlecase].$element);

                    self.$positionInput.children('input').css({
                            width: (self.positionWidth - 6) + 'px',
                            height: '16px',
                            padding: '0 3px 0 3px',
                            border: '0px',
                            borderRadius: '8px',
                            fontSize: '9px',
                            color: 'rgb(255, 255, 255)'
                        })
                        .css({
                            background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
                        })
                        .css({
                            background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
                        });                

                } else if (control == 'resolution') {

                    self.$resolutionButton = Ox.Element({
                            tooltip: 'Resolution'
                        })
                        .css({
                            float: 'left',
                            width: '32px',
                            height: '12px',
                            padding: '2px',
                            fontSize: '9px',
                            textAlign: 'center',
                            color: 'rgb(255, 255, 255)',
                            cursor: 'default'
                        })
                        .html(self.options.resolution + 'p')
                        .bind({
                            click: function() {
                                self.$resolution.toggle();
                            }
                        })
                        .appendTo(self['$controls' + titlecase]);

                    self.$resolution = $('<div>')
                        .addClass('OxControls')
                        .css({
                            position: 'absolute',
                            right: 0,
                            bottom: '16px',
                            height: (self.resolutions.length * 16) + 'px',
                            background: 'transparent'
                        })
                        .bind({
                            click: function(e) {
                                var resolution = $(e.target).parent().data('resolution');
                                self.$resolution.hide();
                                if (resolution != self.options.resolution) {
                                    self.$resolution.children().each(function() {
                                        var $this = $(this);
                                        $this.children()[1].src =
                                            $this.data('resolution') == resolution ?
                                            Ox.UI.getImagePath('symbolCheck.svg') :
                                            Ox.UI.PATH + 'png/transparent.png'
                                    });
                                    self.$resolutionButton.html(resolution + 'p');
                                    self.options.resolution = resolution
                                    setResolution();
                                }
                            }
                        })
                        .hide()
                        .appendTo(that.$element);
                    self.resolutions.forEach(function(resolution, i) {
                        var $item = $('<div>')
                            .css({
                                width: '52px',
                                height: '16px',
                                background: 'rgba(32, 32, 32, 0.5)'
                            })
                            .data({
                                resolution: resolution
                            })
                            .bind({
                                mouseenter: function() {
                                    $(this)
                                        .css({
                                            backgroundImage: '-moz-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5))'
                                        })
                                        .css({
                                            backgroundImage: '-webkit-linear-gradient(top, rgba(48, 48, 48, 0.5), rgba(16, 16, 16, 0.5))'
                                        })
                                },
                                mouseleave: function() {
                                    $(this).css({
                                        background: 'rgba(32, 32, 32, 0.5)'
                                    });
                                }
                            })
                            .appendTo(self.$resolution);
                        if (i == 0) {
                            $item.css({
                                borderTopLeftRadius: '8px',
                                borderTopRightRadius: '8px'
                            })
                        }
                        $('<div>')
                            .css({
                                float: 'left',
                                width: '36px',
                                height: '14px',
                                paddingTop: '2px',
                                fontSize: '9px',
                                textAlign: 'right',
                                cursor: 'default'
                            })
                            .html(resolution + 'p')
                            .appendTo($item);
                        $('<img>')
                            .attr({
                                src: resolution == self.options.resolution ?
                                    Ox.UI.getImagePath('symbolCheck.svg') :
                                    Ox.UI.PATH + 'png/transparent.png'
                            })
                            .css({
                                float: 'left',
                                width: '9px',
                                height: '9px',
                                padding: '3px 3px 4px 4px'
                            })
                            .appendTo($item);
                        
                    })

                } else if (control == 'scale') {

                    self.$scaleButton = Ox.Button({
                        style: 'symbol',
                        title: [
                            {id: 'fill', title: 'fill', selected: !self.options.scaleToFill},
                            {id: 'fit', title: 'fit', selected: self.options.scaleToFill}
                        ],
                        tooltip: ['Scale to Fill', 'Scale to Fit'],
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent('click', function() {
                        toggleScale('button');
                    })
                    .appendTo(self['$controls' + titlecase]);

                } else if (control == 'size') {

                    self.$sizeButton = Ox.Button({
                        style: 'symbol',
                        title: [
                            {id: 'grow', title: 'grow', selected: !self.options.sizeIsLarge},
                            {id: 'shrink', title: 'shrink', selected: self.options.sizeIsLarge}
                        ],
                        tooltip: ['Larger', 'Smaller'],
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent('click', toggleSize)
                    .appendTo(self['$controls' + titlecase]);

                } else if (control == 'space') {

                    self['$space' + titlecase] = $('<div>')
                        .css({float: 'left'})
                        .html('&nbsp;') // fixme: ??
                        .appendTo(self['$controls' + titlecase].$element);

                } else if (control == 'timeline') {

                    /*
                    if (self.options.showProgress) {
                        self.$progress = $('<img>')
                            .attr({
                                src: getProgressImageURL()
                            })
                            .css({
                                float: 'left',
                                height: self.barHeight + 'px',
                            })
                            .appendTo(self.$timelineImages.$element);
                    }
                    */

                    if (self.options.duration) {
                        self.$timeline = getTimeline()
                    } else {
                        self.$timeline = Ox.Element()
                            .css({
                                float: 'left'
                            })
                            .html('&nbsp;');
                    }
                    self.$timeline.appendTo(self['$controls' + titlecase]);

                } else if (control == 'title') {

                    self.$title = $('<div>')
                        .addClass('OxInterface')
                        .css({
                            float: 'left',
                            paddingTop: '1px',
                            textAlign: 'center',
                            color: 'rgb(255, 255, 255)',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis'
                        })
                        .html(self.options.title)
                        .appendTo(self['$controls' + titlecase].$element);

                } else if (control == 'volume') {

                    self.$volumeButton = Ox.Button({
                        style: 'symbol',
                        title: 'mute',
                        tooltip: 'Volume',
                        type: 'image'
                    })
                    .css({float: 'left'})
                    .bindEvent({
                        click: toggleVolume
                    })
                    .appendTo(self['$controls' + titlecase]);

                }

            });

        }

    });

    if (self.options.enableVolume) {

        self.$volume = $('<div>')
            .addClass('OxControls')
            .css({
                position: 'absolute',
                left: 0,
                bottom: self.options.controlsBottom.length ? '16px' : 0,
                height: '16px',
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px'
            })
            .css({
                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
            })
            .css({
                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
            })
            .hide()
            .appendTo(that.$element);

        self.$hideVolumeButton = Ox.Button({
                style: 'symbol',
                title: 'close',
                tooltip: 'Hide',
                type: 'image'
            })
            .css({float: 'left'})
            .bindEvent({
                click: toggleVolume
            })
            .appendTo(self.$volume);

        self.$muteButton = Ox.Button({
                style: 'symbol',
                title: [
                    {id: 'mute', title: 'mute', selected: !self.options.muted},
                    {id: 'unmute', title: 'unmute', selected: self.options.muted}
                ],
                tooltip: ['Mute', 'Unmute'],
                type: 'image'
            })
            .css({float: 'left'})
            .bindEvent({
                click: function() {
                    toggleMuted();
                }
            })
            .appendTo(self.$volume);

        self.$volumeInput = Ox.Range({
                max: 1,
                min: 0,
                step: 0.001,
                value: self.options.muted ? 0 : self.options.volume
            })
            .css({
                float: 'left'
            })
            .bindEvent({
                change: function(data) {
                    setVolume(data.value);
                }
            })
            .appendTo(self.$volume);

        self.$volumeInput.find('.OxTrack')
            .css({
                //border: '1px solid rgba(64, 64, 64, 1)'
                padding: '1px',
                border: 0
            })
            .css({
                background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
            })
            .css({
                background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
            });                

        self.$volumeInput.find('.OxThumb')
            .css({
                //border: '1px solid rgba(64, 64, 64, 1)'
                padding: '1px 7px 1px 7px',
                border: 0
            })
            .css({
                backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
            })
            .css({
                backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
            });

        self.$volumeValue = $('<div>')
            .css({
                float: 'left',
                width: '24px',
                paddingTop: '2px',
                fontSize: '9px',
                textAlign: 'center'
            })
            .html(self.options.muted ? 0 : Math.round(self.options.volume * 100))
            .appendTo(self.$volume);

    }

    if (self.options.largeTimeline) {

        if (self.options.duration) {
            self.$largeTimeline = getLargeTimeline()
        } else {
            self.$largeTimeline = Ox.Element()
                .css({
                    float: 'left'
                })
                .html('&nbsp;');
        }
        self.$largeTimeline.appendTo(that);

    }

    setSizes();

    function clearInterfaceTimeout() {
        clearTimeout(self.interfaceTimeout);
        self.interfaceTimeout = 0;
    }

    function ended() {
        if (!self.options.paused) {
            togglePaused();
        }
        if (self.options.poster) {
            self.$poster.animate({
                opacity: 1
            }, 250);
            self.posterIsVisible = true;
        }
        if (self.options.showIconOnLoad) {
            self.$playIcon.animate({
                opacity: 1
            }, 250);
            self.iconIsVisible = true;
        }
    }

    function find(query, hasPressedEnter) {
        var results = [];
        Ox.print(query)
        if (query.length) {
            query = query.toLowerCase();
            results = Ox.map(self.options.subtitles, function(subtitle) {
                return subtitle.text.toLowerCase().indexOf(query) > -1 ? {
                    'in': subtitle['in'],
                    out: subtitle.out
                } : null;
            });
            if (results.length == 0 && hasPressedEnter) {
                self.$findInput.focusInput();
            }
        }
        return results;
    }

    function formatPosition(position) {
        position = Ox.isUndefined(position) ? self.options.position : position;
        return Ox.formatDuration(position, self.options.showMilliseconds);
    }

    function getCSS(element) {
        var css;
        if (element == 'controlsTop' || element == 'controlsBottom') {
            css = {
                width: self.width + 'px'
            };
        } else if (element == 'find') {
            css = {
                width: Math.min(208, self.width) + 'px'
            };
        } else if (element == 'loadingIcon') {
            css = {
                left: self.iconLeft + 'px',
                top: self.iconTop + 'px',
                width: self.iconSize + 'px',
                height: self.iconSize + 'px'
            };
        } else if (element == 'logo') {
            var logoHeight = Math.round(self.height / 10),
                logoMargin = Math.round(self.height / 20);
            css = {
                left: logoMargin + 'px',
                top: logoMargin + (self.controlsTopAreVisible ? 16 : 0) + 'px',
                height: logoHeight + 'px',
            };
        } else if (element == 'player') {
            var height = self.options.fullscreen ? window.innerHeight : self.height;
            if (self.options.externalControls) {
                height += (
                    !!self.options.controlsTop.length +
                    !!self.options.controlsBottom.length
                ) * self.barHeight;
            }
            if (self.options.largeTimeline) {
                height += 64;
            }
            css = Ox.extend({
                width: self.width + 'px',
                height: height + 'px'
            }, self.options.fullscreen ? {
                left: 0,
                top: 0
            } : {}, self.exitFullscreen ? {
                left: self.absoluteOffset.left,
                top: self.absoluteOffset.top
            } : {});
        } else if (element == 'playIcon') {
            var playIconPadding = Math.round(self.iconSize * 1/8),
                playIconSize = self.iconSize - 2 * playIconPadding - 4;
            css = {
                left: self.iconLeft + 'px',
                top: self.iconTop + 'px',
                width: playIconSize + 'px',
                height: playIconSize + 'px',
                padding: playIconPadding + 'px',
                borderRadius: Math.round(self.iconSize / 2) + 'px'
            };
        } else if (element == 'poster' || element == 'video') {
            var playerWidth = self.width,
                playerHeight = self.height,
                playerRatio = playerWidth / playerHeight,
                videoWidth = self.video.videoWidth,
                videoHeight = self.video.videoHeight,
                videoRatio = videoWidth / videoHeight,
                videoIsWider = videoRatio > playerRatio,
                width, height;
            if (self.options.scaleToFill) {
                width = videoIsWider ? playerHeight * videoRatio : playerWidth;
                height = videoIsWider ? playerHeight : playerWidth / videoRatio;
            } else {
                width = videoIsWider ? playerWidth : playerHeight * videoRatio;
                height = videoIsWider ? playerWidth / videoRatio : playerHeight;
            }
            width = Math.round(width);
            height = Math.round(height);
            css = {
                width: width + 'px',
                height: height + 'px',
                marginLeft: parseInt((playerWidth - width) / 2),
                marginTop: parseInt((playerHeight - height) / 2)
            };
        } else if (element == 'progress') {
            css = {
                width: self.timelineImageWidth + 'px',
                marginLeft: -self.timelineImageWidth + 'px'
            };
        } else if (element == 'subtitle') {
            css = {
                bottom: (parseInt(self.height / 16) + !!self.controlsBottomAreVisible * 16) + 'px',
                width: self.width + 'px',
                fontSize: parseInt(self.height / 20) + 'px',
                WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
            };
        } else if (element == 'spaceBottom' || element == 'timeline') {
            css = {
                width: self.timelineWidth + 'px'
            };
        } else if (element == 'spaceTop' || element == 'title') {
            css = {
                width: getTitleWidth() + 'px'
            };
        } else if (element == 'videoContainer') {
            css = {
                width: self.width + 'px',
                height: self.height + 'px'
            };
        } else if (element == 'volume') {
            css = {
                width: Math.min(184, self.width)
            };
        }
        return css;
    }

    function getPosition(e) {
        // fixme: no offsetX in firefox???
        if ($.browser.mozilla) {
            //Ox.print(e, e.layerX - 56)
            return Ox.limit(
                (e.layerX - 48 - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
                0, self.video.duration
            );
        } else {
            /*Ox.print(e.offsetX, Ox.limit(
                (e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
                0, self.video.duration
            ))*/
            return Ox.limit(
                (e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
                0, self.video.duration
            );
        }
    } 

    function getProgressImageURL() {
        Ox.print('---', self.timelineImageWidth)
        if (!self.timelineImageWidth) return;
        var width = self.timelineImageWidth,
            height = self.barHeight,
            canvas = $('<canvas>')
                .attr({
                    width: width,
                    height: height
                })[0],
            context = canvas.getContext('2d'),
            imageData, data;
        context.fillStyle = 'rgba(255, 0, 0, 0.5)';
        context.fillRect(0, 0, width, height);
        imageData = context.getImageData(0, 0, width, height),
        data = imageData.data;
        self.buffered.forEach(function(range) {
            var left = Math.round(range[0] * width / self.video.duration),
                right = Math.round(range[1] * width / self.video.duration);
            Ox.loop(left, right, function(x) {
                Ox.loop(height, function(y) {
                    index = x * 4 + y * 4 * width;
                    data[index + 3] = 0;
                });
            });
        });
        context.putImageData(imageData, 0, 0);
        return canvas.toDataURL();
    }

    function getSubtitle() {
        var subtitle = '';
        Ox.forEach(self.options.subtitles, function(v) {
            if (
                v['in'] <= self.options.position &&
                v.out > self.options.position
            ) {
                subtitle = v.text;
                return false;
            }
        });
        return subtitle;
    }

    function getLargeTimeline() {
        var $timeline = Ox.LargeVideoTimeline({
                duration: self.options.duration,
                find: self.options.find,
                getImageURL: self.options.largeTimeline,
                'in': self.options['in'],
                out: self.options.out,
                position: self.options.position,
                subtitles: self.options.subtitles,
                type: 'player',
                width: self.options.width
            })
            .css({
                position: 'absolute',
                bottom: '12px',
                marginLeft: 0,
            })
            .bindEvent({
                position: function(data) {
                    setPosition(data.position, 'largeTimeline');
                }
            });
        return $timeline;
    }

    function getTimeline() {
        var $timeline = Ox.SmallVideoTimeline({
                _offset: getTimelineLeft(),
                duration: self.options.duration,
                find: self.options.find,
                'in': self.options['in'],
                out: self.options.out,
                paused: self.options.paused,
                results: self.results,
                showMilliseconds: self.options.showMilliseconds,
                subtitles: self.options.subtitles,
                timeline: self.options.timeline,
                type: 'player',
                width: getTimelineWidth()
            })
            .css({
                float: 'left'
            })
            .css({
                background: '-moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
            })
            .css({
                background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
            })
            .bindEvent({
                position: function(data) {
                    setPosition(data.position, 'timeline');
                }
            });
        //Ox.print('??', $timeline.find('.OxInterface'))
        $timeline.children().css({
            marginLeft: getTimelineLeft() + 'px'
        });
        $timeline.find('.OxInterface').css({
            marginLeft: getTimelineLeft() + 'px'
        });
        return $timeline;
    }

    function getTimelineLeft() {
        var left = 0;
        Ox.forEach(self.options.controlsBottom, function(control) {
            if (control == 'timeline') {
                return false;
            }
            left += control == 'position' ? self.positionWidth : 16
        });
        return left;
    }

    function getTimelineWidth() {
        return (self.options.fullscreen ? window.innerWidth : self.options.width) -
            self.options.controlsBottom.reduce(function(prev, curr) {
                return prev + (
                    curr == 'timeline' || curr == 'space' ? 0 :
                    curr == 'position' ? self.positionWidth :
                    curr == 'resolution' ? 36 : 16
                );
            }, 0);
    }

    function getTitleWidth() {
        return (self.options.fullscreen ? window.innerWidth : self.options.width) -
            self.options.controlsTop.reduce(function(prev, curr) {
                return prev + (
                    curr == 'title' || curr == 'space' ? 0 : 16
                );
            }, 0);
    }

    function getVolumeImageURL() {
        var symbol;
        if (self.options.muted || self.options.volume == 0) {
            symbol = 'unmute';
        } else if (self.options.volume < 1/3) {
            symbol = 'VolumeUp';
        } else if (self.options.volume < 2/3) {
            symbol = 'VolumeDown';
        } else {
            symbol = 'mute';
        }
        return Ox.UI.getImagePath('symbol' + symbol + '.svg').replace('/classic/', '/modern/');
    }

    function hideInterface() {
        Ox.print('hideInterface');
        clearTimeout(self.interfaceTimeout);
        self.interfaceTimeout = setTimeout(function() {
            if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
                self.interfaceIsVisible = false;
                self.controlsTopAreVisible = false;
                self.controlsBottomAreVisible = false;
                self.$controlsTop && self.$controlsTop.animate({
                    opacity: 0
                }, 250);
                self.$controlsBottom && self.$controlsBottom.animate({
                    opacity: 0
                }, 250);
                self.$find && self.$find.is(':visible') && self.$find.animate({
                    opacity: 0
                }, 250);
                self.$volume && self.$volume.is(':visible') && self.$volume.animate({
                    opacity: 0
                }, 250);
                self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
                    opacity: 0
                }, 250);
                self.$logo && self.$logo.animate({
                    top: getCSS('logo').top,
                    opacity: 0.25
                }, 250, function() {
                    self.options.logoLink && self.$logo.unbind('click');
                    self.options.logoTitle &&
                        self.$logo.unbind('mouseenter').unbind('mouseleave');
                });
                self.$subtitle && self.$subtitle.animate({
                    bottom: getCSS('subtitle').bottom,
                }, 250);
            }
        }, self.options.fullscreen ? 2500 : 1000);
    }

    function hideLoadingIcon() {
        self.$loadingIcon.hide().attr({
            src: Ox.UI.getImagePath('symbolLoading.svg')
                .replace('/classic/', '/modern/')
        });
    }

    function loadedmetadata() {

        Ox.print('LOADEDMETADATA')

        var hadDuration = !!self.options.duration;

        self.loaded = true;
        self.out = self.options.playInToOut &&
            self.options.out < self.video.duration ?
            self.options.out : self.video.duration;
        self.options.duration = self.out - self['in'];
        self.$video.css(getCSS('video'));
        self.video.currentTime = self.options.position;
        self.playOnLoad && self.options.paused && togglePaused();
        //self.$poster && self.$poster.css(getCSS('poster'));

        hideLoadingIcon();
        if (self.options.showIcon || self.options.showIconOnLoad) {
            //!self.options.keepIconVisible && self.$playIcon.addClass('OxInterface');
            if (self.options.showIconOnLoad) {
                self.$playIcon.animate({
                    opacity: 1
                }, 250);
            }
        }

        if (!hadDuration) {
            self.$timeline && self.$timeline.replaceWith(
                self.$timeline = getTimeline()
            );
            self.$largeTimeline && self.$largeTimeline.replaceWith(
                self.$largeTimeline = getLargeTimeline()
            );
        }

        if (self.options.enableKeyboard && self.options.focus == 'load') {
            that.gainFocus();
        }

    }

    function parsePositionInput(str) {
        var split = str.split(':').reverse();
        while (split.length > 3) {
            split.pop();
        }
        return split.reduce(function(prev, curr, i) {
            return prev + (parseFloat(curr) || 0) * Math.pow(60, i);
        }, 0);
    }

    function playing() {
        self.options.position = self.video.currentTime;
        if (
            (self.options.playInToOut || self.playInToOut) &&
            self.options.position >= self.options.out
        )  {
            togglePaused();
            setPosition(self.options.out, 'video');
            //ended();
            self.playInToOut = false;
        } else {
            setPosition(self.options.position, 'video');
        }
        that.triggerEvent('position', {
            position: self.options.position
        });
    }

    function playInToOut() {
        if (self.options.out > self.options['in']) {
            self.playInToOut = true;
            setPosition(self.options['in']);
            if (self.options.paused) {
                togglePaused();
            }
        }
    }

    function progress() {
        var buffered = self.video.buffered;
        for (var i = 0; i < buffered.length; i++) {
            self.buffered[i] = [buffered.start(i), buffered.end(i)];
            // fixme: firefox weirdness
            if (self.buffered[i][0] > self.buffered[i][1]) {
                self.buffered[i][0] = 0;
            }
        }
        self.$progress.attr({
            src: getProgressImageURL()
        });
    }

    function seeked() {
        Ox.print('XX seeked')
        clearTimeout(self.seekTimeout);
        self.seekTimeout = 0;
        Ox.print('XX hide')
        hideLoadingIcon();
        self.$playIcon && self.$playIcon.show();
    }

    function seeking() {
        Ox.print('XX seeking')
        if (!self.seekTimeout) {
            self.seekTimeout = setTimeout(function() {
                self.$playIcon && self.$playIcon.hide();
                Ox.print('XX show')
                showLoadingIcon();
            }, 250);
        }
    }

    function setPosition(position, from) {
        position = Ox.limit(position, self['in'], self['out']);
        self.options.position = Math.round(
            position * self.options.fps
        ) / self.options.fps;
        if (self.loaded && from != 'video') {
            self.video.currentTime = self.options.position;
        }
        if (self.iconIsVisible) {
            self.$playIcon.animate({
                opacity: 0
            }, 250);
            self.iconIsVisible = false;
        }
        if (self.posterIsVisible) {
            self.$poster.animate({
                opacity: 0
            }, 250);
            self.posterIsVisible = false;
        }
        self.$subtitle && setSubtitle();
        self.$timeline /*&& from != 'timeline'*/ && self.$timeline.options({
            position: self.options.position
        });
        self.$largeTimeline && from != 'largeTimeline' && self.$largeTimeline.options({
            position: self.options.position
        });
        self.$position && self.$position.html(formatPosition());
    }

    function setResolution() {
        if (!self.options.paused) {
            self.playOnLoad = true;
            togglePaused();
        }
        self.loaded = false;
        showLoadingIcon();
        self.video.src = self.options.video[self.options.resolution];
    }

    function setSizes(callback) {
        var ms = callback ? 250 : 0;
        self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
        self.height = self.options.fullscreen ? window.innerHeight : self.options.height;
        self.iconSize = Math.max(Math.round(self.height / 10), 16),
        self.iconLeft = parseInt((self.width - self.iconSize) / 2),
        self.iconTop = parseInt((self.height - self.iconSize) / 2);
        if (self.$timeline || self.$spaceBottom) {
            self.timelineWidth = getTimelineWidth();
            if (self.$timeline) {
                self.timelineImageWidth = self.timelineWidth - self.barHeight;
            }
        }
        that.animate(getCSS('player'), ms, callback);
        self.$videoContainer.animate(getCSS('videoContainer'), ms);
        self.loaded && self.$video.animate(getCSS('video'), ms);
        self.$poster && self.$poster.animate(getCSS('poster'), ms);
        self.$logo && self.$logo.animate(getCSS('logo'), ms);
        self.$loadingIcon.animate(getCSS('loadingIcon'), ms);
        self.$playIcon && self.$playIcon.animate(getCSS('playIcon'), ms);
        self.$subtitle && self.$subtitle.animate(getCSS('subtitle'), ms);
        self.$controlsTop && self.$controlsTop.animate(getCSS('controlsTop'), ms);
        self.$title && self.$title.animate(getCSS('title'), ms);
        self.$spaceTop && self.$spaceTop.animate(getCSS('spaceTop'), ms);
        self.$controlsBottom && self.$controlsBottom.animate(getCSS('controlsBottom'), ms);
        if (self.$timeline) {
            self.$timeline.animate(getCSS('timeline'), ms, function() {
                self.$timeline.options({
                    width: self.timelineWidth
                })
            });
        }
        self.$spaceBottom && self.$spaceBottom.animate(getCSS('spaceBottom'), ms);
        if (self.$find) {
            self.$find.animate(getCSS('find'), ms);
            self.$findInput.options({
                width: Math.min(128, self.width - 80)
            });
        }
        if (self.$volume) {
            self.$volume.animate(getCSS('volume'), ms);
            self.$volumeInput.options({
                size: Math.min(128, self.width - 56) // fixme: should be width in Ox.Range
            });
        }
        self.$largeTimeline && self.$largeTimeline.options({
            width: self.width
        });
    }

    function setSubtitle() {
        var subtitle = getSubtitle();
        if (subtitle != self.subtitle) {
            self.subtitle = subtitle;
            setSubtitleText();
        }
    }

    function setSubtitleText() {
        Ox.print('setSubTx', self.subtitle, self.options.find)
        self.$subtitle.html(
            Ox.highlight(self.subtitle, self.options.find, 'OxHighlight')
            .replace(/\n/g, '<br/>')
        );
    }

    function changeVolumeBy(num) {
        self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
        setVolume(self.options.volume);
        self.$volumeInput && self.$volumeInput.options({
            value: self.options.volume
        });
    }

    function setVolume(volume) {
        self.options.volume = volume;
        if (!!self.options.volume == self.options.muted) {
            self.options.muted = !self.options.muted;
            self.video.muted = self.options.muted;
            self.$muteButton.toggleTitle();
        }
        self.video.volume = self.options.volume;
        self.$volumeButton.attr({
            src: getVolumeImageURL()
        });
        self.$volumeValue.html(self.options.muted ? 0 : Math.round(self.options.volume * 100));
    }

    function showInterface() {
        Ox.print('showInterface');
        clearTimeout(self.interfaceTimeout);
        if (!self.interfaceIsVisible) {
            self.interfaceIsVisible = true;
            if (self.$controlsTop) {
                self.controlsTopAreVisible = true;
            }
            if (self.$controlsBottom) {
                self.controlsBottomAreVisible = true;
            }
            self.$controlsTop && self.$controlsTop.animate({
                opacity: 1
            }, 250);
            self.$controlsBottom && self.$controlsBottom.animate({
                opacity: 1
            }, 250);
            self.$find && self.$find.is(':visible') && self.$find.animate({
                opacity: 1
            }, 250);
            self.$volume && self.$volume.is(':visible') && self.$volume.animate({
                opacity: 1
            }, 250);
            self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
                opacity: 1
            }, 250);
            self.$logo && self.$logo.animate({
                top: getCSS('logo').top,
                opacity: 0.5
            }, 250, function() {
                self.options.logoLink && self.$logo
                    .bind({
                        click: function() {
                            document.location.href = self.options.logoLink;
                        }
                    });
                self.options.logoTitle && self.$logo
                    .bind({
                        mouseenter: function(e) {
                            self.$logoTooltip.show(e);
                        },
                        mouseleave: self.$logoTooltip.hide
                    });
            });
            self.$subtitle && self.$subtitle.animate({
                bottom: getCSS('subtitle').bottom,
            }, 250);
        }
    }

    function showLoadingIcon() {
        self.$loadingIcon.attr({
            src: Ox.UI.getImagePath('symbolLoadingAnimated.svg')
                .replace('/classic/', '/modern/')
        }).show();
    }

    function submitFindInput(value, hasPressedEnter) {
        self.options.find = value;
        self.results = find(self.options.find, hasPressedEnter);
        self.$results.html(self.results.length);
        self.subtitle && setSubtitleText();
        self.$timeline && self.$timeline.options({
            find: self.options.find,
            results: self.results
        });
        if (hasPressedEnter && self.results.length) {
            goToNextResult(1);
        }
    }

    function goToNextResult(direction) {
        var found = false,
            position = 0;
        direction == -1 && self.results.reverse();
        Ox.forEach(self.results, function(v) {
            if (direction == 1 ? v['in'] > self.options.position : v['out'] < self.options.position) {
                position = v['in'];
                found = true;
                return false;
            }
        });
        direction == -1 && self.results.reverse();
        if (!found) {
            position = self.results[direction == 1 ? 0 : self.results.length - 1]['in'];
        }
        setPosition(position + self.secondsPerFrame);
    }

    function submitPositionInput() {
        self.$positionInput.hide();
        self.$position.html('').show();
        setPosition(parsePositionInput(self.$positionInput.options('value')));
        if (self.playOnSubmit) {
            togglePaused();
            self.video.play();
            self.playOnSubmit = false;
        }
        if (self.focus == 'mouseenter' && !self.mouseHasLeft) {
            that.gainFocus();
        }
        self.mouseHasLeft && hideInterface();
    }

    function toggleFind() {
        var show = self.$find.is(':hidden');
        !show && self.$findInput.blurInput();
        self.$find.toggle();
        show && self.$findInput.focusInput(false);
    }

    function toggleFullscreen(from) {
        var parentOffset, playOnFullscreen;
        self.options.fullscreen = !self.options.fullscreen;
        if (!self.options.paused) {
            // video won't keep playing accross detach/append
            self.video.pause();
            playOnFullscreen = true;
        }
        if (self.options.fullscreen) {
            self.$parent = that.parent();
            parentOffset = self.$parent.offset();
            self.absoluteOffset = that.offset();
            self.relativeOffset = {
                left: self.absoluteOffset.left - parentOffset.left,
                top: self.absoluteOffset.top - parentOffset.top
            };
            that.detach()
                .css({
                    left: self.absoluteOffset.left + 'px',
                    top: self.absoluteOffset.top + 'px',
                    zIndex: 1000
                })
                .appendTo(Ox.UI.$body);
            setSizes(function() {
                playOnFullscreen && self.video.play();
                that.bind({
                    mousemove: function() {
                        showInterface();
                        //if (!self.mouseIsInControls) {
                            hideInterface();                            
                        //}
                    }
                });
                that.find('.OxControls').bind({
                    mouseenter: function() {
                        self.mouseIsInControls = true;
                    },
                    mouseleave: function() {
                        self.mouseIsInControls = false;
                    }
                });
                showInterface();
                hideInterface();
            });
        } else {
            // flag makes the animation end on absolute position
            self.exitFullscreen = true;
            that.unbind('mousemove');
            that.find('.OxControls')
                .trigger('mouseleave')
                .unbind('mouseenter')
                .unbind('mouseleave');
            clearTimeout(self.interfaceTimeout);
            setSizes(function() {
                self.exitFullscreen = false;
                that.detach()
                    .css({
                        left: self.relativeOffset.left + 'px',
                        top: self.relativeOffset.top + 'px',
                        zIndex: 1
                    })
                    .appendTo(self.$parent);
                playOnFullscreen && self.video.play();
                self.options.enableKeyboard && that.gainFocus();
                //showInterface();
            });
        }
        if (self.$fullscreenButton && from != 'button') {
            self.$fullscreenButton.toggleTitle();
        }
    }

    function toggleMuted(from) {
        self.options.muted = !self.options.muted;
        self.video.muted = self.options.muted;
        if (!self.options.muted && !self.options.volume) {
            self.options.volume = 1;
            self.video.volume = 1;
        }
        if (self.$muteButton && from != 'button') {
            self.$muteButton.toggleTitle();
        }
        self.$volumeButton && self.$volumeButton.attr({
            src: getVolumeImageURL()
        });
        self.$volumeInput && self.$volumeInput.options({
            value: self.options.muted ? 0 : self.options.volume
        });
        self.$volumeValue && self.$volumeValue.html(
            self.options.muted ? 0 : Math.round(self.options.volume * 100)
        );
    }

    function togglePaused(from) {
        self.options.paused = !self.options.paused;
        self.$timeline && self.$timeline.options({
            paused: self.options.paused
        });
        if (self.options.paused) {
            self.video.pause();
            clearInterval(self.playInterval);
            if (self.options.showIcon) {
                togglePlayIcon();
                self.options.showIcon && self.$playIcon.animate({
                    opacity: 1
                }, 250);
            }
        } else {
            if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
                setPosition(self.options['in']);
            }
            self.video.play();
            self.playInterval = setInterval(playing, self.millisecondsPerFrame);
            if (self.options.showIcon) {            
                self.options.showIcon && self.$playIcon.animate({
                    opacity: 0
                }, 250, togglePlayIcon);
            }
        }
        if (self.$playButton && from != 'button') {
            self.$playButton.toggleTitle();
        }
    }

    function togglePlayIcon() {
        self.$playIcon.attr({
            src: Ox.UI.getImagePath(
                'symbol' + (self.options.paused ? 'Play' : 'Pause'
            )+ '.svg').replace('/classic/', '/modern/')
        });
    }

    function toggleScale(from) {
        self.options.scaleToFill = !self.options.scaleToFill;
        self.$video.animate(getCSS('video'), 250);
        self.$poster && self.$poster.animate(getCSS('poster'), 250);
        if (self.$scaleButton && from != 'button') {
            self.$scaleButton.toggleTitle();
        }
    }

    function toggleSize() {
        self.options.sizeIsLarge = !self.options.sizeIsLarge;
        that.triggerEvent('size', {
            size: self.options.sizeIsLarge ? 'large' : 'small'
        });
    }

    function toggleVolume() {
        self.$volume.toggle();
    }

    self.setOption = function(key, value) {
        if (key == 'fullscreen') {
            toggleFullscreen();
        } else if (key == 'height' || key == 'width') {
            setSizes();
        } else if (key == 'muted') {
            toggleMuted();
        } else if (key == 'paused') {
            togglePaused();
        } else if (key == 'position') {
            setPosition(value);
        } else if (key == 'scaleToFill') {
            toggleScale();
        }
    };

    that.playInToOut = function() {
        playInToOut();
        return that;
    };

    return that;

};