<!-- We'll need mootools, since it's a player for mootools! -->
<script src="mootools.js" type="text/javascript"> </script>

<!-- The magic YtMooPlayer.js class from http://dracoblue.net/ :) -->
<script src="YtMooPlayer.js" type="text/javascript"></script>

<style type="text/css">

    #showcase_player {
        margin-right  : 20px;
    }
    .sc {
        padding-left  : 20px;
    }

    .sc input.input {
        width         : 300px;
    }
    
    .sc input {
        font-size     : 1.2em;
        display       : block;
        margin-bottom : 0.5em;
        padding       : 0.4em 0.8em;
        width         : 326px;
        text-align    : left;
     }

</style>

<script type="text/javascript">

    /*
     * Magic
     */
    window.addEvent('domready', function () {
        /**
         * Small helper function, which posts a log
         * message right into the showcase console.
         */        
        var addToShowcaseLog = function(text) {
            var now = new Date();
            new Element('p', {
                'text' : "["
                            + (now.getHours() < 10 ? "0" : "") + now.getHours() 
                            + ":" + (now.getMinutes() < 10 ? "0" : "") + now.getMinutes()
                            + ":" + (now.getSeconds() < 10 ? "0" : "") + now.getSeconds()
                            + "] " + text
            //    'text' : text
            }).inject($('sc_console'));
        }

        /*
         * This is when we load the YtMooPlayer the first time.
         * Like with many other mootools classes, which implement
         * Events and Options, you can configure the class completely
         * at construction time! Adding events later is no problem, too :).
         */
        var player = new YtMooPlayer('showcase_player', {
            'width': '520px',
            'height': '390px',
            'onReady': function() {
                addToShowcaseLog('Player is ready!');
            },
            'onPlay': function() {
                addToShowcaseLog('Player started playing!');
            },
            'onEnded': function() {
                addToShowcaseLog('Player stopped playing!');
            },
            'onPaused': function() {
                addToShowcaseLog('Player paused!');
            },
            'onNotAllowed': function() {
                addToShowcaseLog('The video is not allowed to be played!');
            },
            'onNotFound': function() {
                addToShowcaseLog('The video was not found!');
            },
            'onError': function(error) {
                addToShowcaseLog('An error occured: ' + error);
            }
        });
        
        new Element('label', {
            'text': 'VideoId'
        }).inject($('showcase_player_area'));
        
        var video_id_field = new Element('input', {
            /*
             * A video I made a while back ;).
             */
            'value': '_j54Lrp9T6M',
            'class': 'input',
            'type': 'text'
        });
        
        video_id_field.inject($('showcase_player_area'));
        
        new Element('input', {
            'value': 'Load & Play',
            'type': 'button',
            'events': {
                'click': function(event) {
                    player.playVideo(video_id_field.get('value'));
                }
            }
        }).inject($('showcase_player_area'));
        
        new Element('label', {
            'text': 'Playback Control'
        }).inject($('showcase_player_area'));
        
        new Element('input', {
            'value': 'Play/Resume',
            'type': 'button',
            'events': {
                'click': function(event) {
                    player.play();
                }
            }
        }).inject($('showcase_player_area'));
        
        new Element('input', {
            'value': 'Pause',
            'type': 'button',
            'events': {
                'click': function(event) {
                    player.pause();
                }
            }
        }).inject($('showcase_player_area'));
        
        new Element('label', {
            'text': 'Error-Handling'
        }).inject($('showcase_player_area'));
        
        new Element('input', {
            'value': 'Play Video, which does not exist',
            'type': 'button',
            'events': {
                'click': function(event) {
                    /*
                     * I know that this id is not taken!
                     */
                    player.playVideo("G0za04bdS0k");
                }
            }
        }).inject($('showcase_player_area'));
        
    });

</script>
<h3>Player</h3>
<div class="sc" id="showcase_player_area">
    <div style="float:left; width:520px; height:390px; margin-left:10px;" id="showcase_player">

    </div>
</div>
<div style="clear:both"> </div>
<h3>Log</h3>
<div id="sc_console">
</div>