CollectionVideoUI = new JS.Class('CollectionVideoUI', {
    include: Ojay.Observable,
    
    initialize: function(container, backdrop, options) {
        options = options || {};
        
        this._openTime    = options.openTime    || this.klass.OPEN_TIME;
        this._closeTime   = options.closeTime   || this.klass.CLOSE_TIME;
        this._openedColor = options.openedColor || this.klass.OPENED_COLOR;
        this._closedColor = options.closedColor || this.klass.CLOSED_COLOR;
        this._maxHeight   = options.maxHeight;
        
        this._container   = Ojay(container);
        this._parent      = this._container.parents();
        this._backdrop    = Ojay(backdrop);
        
        var self = this;
        this._outerWrapper = Ojay(Ojay.HTML.div({className: 'collection-video'}, function(H) {
            self._closeButton  = Ojay(H.div({className: 'close-button'}, 'Close')).hide();
            self._innerWrapper = Ojay(H.div());
        })).hide();
        this._closeButton.on('click', this.close, this);
        this._parent.insert(this._outerWrapper);
    },
    
    open: function(videos) {
        var containerHeight = this._parent.getHeight(),
            maxHeight       = this._maxHeight ? this._maxHeight : containerHeight,
            videoWidth, videoHeight, topOffset, leftOffset;
        
        this._video  = this.selectVideo(videos);
        
        videoWidth  = this._video.width;
        videoHeight = this._video.height;
        
        if (videoHeight > maxHeight) {
            this._video.width  = videoWidth  = (this._video.width / this._video.height * maxHeight).round();
            this._video.height = videoHeight = maxHeight;
        }
        
        topOffset  = ((containerHeight - videoHeight) / 2).floor();
        leftOffset = (videoWidth / 2).floor();
        
        this.notifyObservers('video', this._video);
        
        if (typeof this._video !== 'object') return;
        
        this.notifyObservers('opening');
        
        this._container.animate({
            opacity: {
                from: 1,
                to:   0
            }
        }, this._openTime).hide()
        ._(this._outerWrapper).show().setStyle({
            position:   'relative',
            height:     containerHeight + 'px'
        })
        ._(function() {
            this._closeButton.show().setStyle({
                top:        (topOffset  - this._closeButton.getHeight()) + 'px',
                left:       '50%',
                marginLeft: (leftOffset - this._closeButton.getWidth()) + 'px'
            });
        }.bind(this))
        ._(this._innerWrapper).setStyle({
            position:   'absolute',
            width:      videoWidth + 'px',
            height:     videoHeight + 'px',
            top:        topOffset + 'px',
            left:       '50%',
            marginLeft: -leftOffset + 'px'
        })
        ._(this).notifyObservers('open');
        
        this._backdrop.animate({
            backgroundColor: {
                from: this._closedColor,
                to:   this._openedColor
            }
        }, this._openTime);
    },
    
    close: function() {
        this.notifyObservers('closing');
        
        this._outerWrapper.hide()
        ._(this._closeButton).hide()
        ._(this._container).show()
            .animate({
                opacity: {
                    from: 0,
                    to:   1
                }
            }, this._closeTime)
            ._(this).notifyObservers('closed');
        
        this._backdrop.animate({
            backgroundColor: {
                from: this._openedColor,
                to:   this._closedColor
            }
        }, this._closeTime);
    },
    
    /**
     * Select video from hash based on MIME type
     */
    selectVideo: function(videos) {
        var video = null, type;
        for (type in videos) {
            if (type.match(/^video\/(mp4|(x-)?flv)/)) {
                video = videos[type];
                break;
            }
        }
        return video;
    },
    
    getHTML: function() {
        return this._innerWrapper;
    },
    
    extend: {
        OPEN_TIME:    1.0,
        CLOSE_TIME:   1.0,
        OPENED_COLOR: '#000',
        CLOSED_COLOR: '#fff'
    }
});

CollectionVideoPlayer = new JS.Class('CollectionVideoPlayer', {
    include: JS.State,
    
    initialize: function(videoUI) {
        this._ui = videoUI;
        this._ui.on('open', this.setup, this);
        this._ui.on('closing', function() {
            this.pause();
            this.setState('INACTIVE');
        }, this);
        this._ui.on('video', function(ui, video) {
            this.setVideo(video);
        }, this);
        
        this._html = Ojay(Ojay.HTML.div({className: 'video-container'}));
        
        this.setState('INACTIVE');
    },
    
    getHTML: function() {
        return this._html;
    },
    
    setVideo: function(video) {
        this._url    = video.uri;
        this._width  = video.width;
        this._height = video.height;
    },
    
    states: {
        INACTIVE: {
            setup: function() {
                this._ui.getHTML().setContent(this._html);
                
                this._html.setStyle({
                    width:  this._width  + 'px',
                    height: this._height + 'px'
                });
                
                var options = {
                    clip: {
                        url:           this._url,
                        autoPlay:      true,
                        autoBuffering: true
                    }
                };
                
                if (FLOWPLAYER_API_KEY) options.key = FLOWPLAYER_API_KEY;
                
                this._fp = flowplayer(this._html.node, '/wp-content/themes/paulsmith/flash/flowplayer.swf', options);
                
                this.setState('ACTIVE');
            }
        },
        
        ACTIVE: {
            pause: function() {
                this._fp.pause();
            },
            
            play: function() {
                this._fp.play();
            }
        }
    }
});