window.addEvent('domready', function (){
    var overlay   = new Element('div', {'id': 'overlay'});
    var shadow    = new Element('div', {'id': 'overlayShadow'});
    var container = new Element('div', {'id': 'videoPlayer'});
    var closeButton = new Element('div', {'id': 'closeButton'});

    closeButton.grab( new Element('a', {"html": " ", "href": "#" }));

    $(document.body).adopt(
        overlay.adopt(
            shadow,
            closeButton,
            container
        ));

    if (!Browser.Engine.trident4){
        function resizeOverlay () {
            var dimensions = $(document.body).getScrollSize();
            overlay.setStyles({
                height: dimensions.y,
                width: Math.max(
                    $(document.body).getSize().x,
                    $('mainContainer').getSize().x)
            });
        };

        window.addEvent('resize', resizeOverlay);

        resizeOverlay();
    }
    
    var player = $f('videoPlayer', '/userfiles/flowplayer/flowplayer-3.1.5.swf', flowPlayerConfig).load();

    var hide = function(){
        overlay.setStyle('display', 'none');
        if (player.isLoaded()){
            player.stop();
            player.unload();
        }
    };

    var show = function(){
        overlay.setStyle('display','block');
    };

    hide();

    closeButton.addEvent('click', hide);
    shadow
        .addEvent('click', hide)
        .setStyles({ 'background': 'black' });

    shadow.get('tween', {property: 'opacity'}).set(0.4);
    
    (function (){
        /* This code makes the overlay position "correctly" in ie6
         * stolen from Slimbox as allowed under the MIT License */
        var ie6 = Browser.Engine.trident4;
        var compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed"));
        if (compatibleOverlay) overlay.style.position = "absolute";

        function position() {
            var scroll = window.getScroll(), size = window.getSize();
            container.setStyle("left", scroll.x + (size.x / 2));
            if (compatibleOverlay) overlay.setStyles({left: scroll.x, top: scroll.y, width: size.x, height: size.y});
        }

        if (ie6) {
            window.addEvents({
                'scroll': position,
                'resize': position
            });
            position();
        }
        /* end stolen code */
    }());

    function playVideo (url, dimensions) {
        show();
        $('videoPlayer').setStyles(dimensions);
        player.load().play(url);
    }

    $$('a[href$=.flv]').addEvent('click', function (event) {
        event.stop();
        var rel = /(\d+)x(\d+)/.exec(this.get('rel')),
            dimensions = rel && { 'width': parseInt(rel[1], 10), 'height': parseInt(rel[2], 10) + 30 };
        
        playVideo(this.get('href'), dimensions);
    });
});