//
// YouTube JavaScript API Player With Playlist
// http://911-need-code-help.blogspot.com/2009/10/youtube-javascript-player-with-playlist.html
// Revision 1 [2009-10-12]
//
// Prerequisites
// 1) Create following elements in your HTML:
// -- a) youtubeplayer: placeholder div for YouTube JavaScript Player
// -- b) youtubemenu: container div for playlist
// 2) Include SWFObject library from http://code.google.com/p/swfobject/
//
// Variables
// -- ytplayer_playlist: an array containing YouTube Video IDs
// -- ytplayer_playitem: index of the video to be played at any given time
//
var ytplayer_playlist = [ ];
var ytplayer_playitem = 0;
swfobject.addLoadEvent( ytplayer_render_player );
swfobject.addLoadEvent( ytplayer_render_playlist );

function ytplayer_render_player( ) {
    swfobject.embedSWF (
        'http://www.youtube.com/v/' + ytplayer_playlist[ ytplayer_playitem ] + '&enablejsapi=1&rel=0&fs=1&hd=1',
        'youtubeplayer',
        '580',
        '350',
        '8',
        null,
        null,
        {
            allowScriptAccess: 'always',
            allowFullScreen: 'true'
        },
        {
            id: 'ytplayer_object'
        }
    );
}

//
// Thanks to some nice people who answered this question:
// http://stackoverflow.com/questions/1552941/variables-in-anonymous-functions-can-someone-explain-the-following
//
function ytplayer_render_playlist( ) {
    for ( var i = 0; i < ytplayer_playlist.length; i++ ) {
        var img = document.createElement( "img" );
        img.src = "http://img.youtube.com/vi/" + ytplayer_playlist[ i ] + "/default.jpg";
        img.className = "youtubeThumb"
        var a = document.createElement( "a" );
        a.onclick = (
            function( j ) {
                return function( ) {
                    $("#looper").remove();
                    $("#ytplayer_object").css("visibility", "visible");
                    ytplayer_playitem = j;
                    ytplayer_playlazy( 1000 );
                };
            }
        )( i );
        var playIcon = document.createElement("img");
        playIcon.src = "img/youtube-play.png";
        playIcon.className = "playIcon";
        var hoverIcon = document.createElement("img");
        hoverIcon.src = "img/youtube-play-hover.png";
        hoverIcon.className = "playIconHover";
        a.appendChild(hoverIcon)
        a.appendChild(playIcon);
        a.appendChild( img );
        document.getElementById( "youtubemenu" ).appendChild( a );
    }
}

//
// Thanks to the anonymous person posted this tip:
// http://www.tipstrs.com/tip/1084/Static-variables-in-Javascript
//
function ytplayer_playlazy( delay ) {
    if ( typeof ytplayer_playlazy.timeoutid != 'undefined' ) {
        window.clearTimeout( ytplayer_playlazy.timeoutid );
    }
    ytplayer_playlazy.timeoutid = window.setTimeout( ytplayer_play, delay );
}

function ytplayer_play( ) {
    var o = document.getElementById( 'ytplayer_object' );
    if ( o ) {
        o.loadVideoById( ytplayer_playlist[ ytplayer_playitem ] );
    }
}
  
//
// Ready Handler (this function is called automatically by YouTube JavaScript Player when it is ready)
// * Sets up handler for other events
//
function onYouTubePlayerReady( playerid ) {
    var o = document.getElementById( 'ytplayer_object' );
    if ( o ) {
        o.addEventListener( "onStateChange", "ytplayer_statechange" );
        o.addEventListener( "onError", "ytplayer_error" );
    }
}

//
// State Change Handler
// * Sets up the video index variable
// * Calls the lazy play function
//
function ytplayer_statechange( state ) {
    if ( state == 0 ) {
        ytplayer_playitem += 1;
        ytplayer_playitem %= ytplayer_playlist.length;
        ytplayer_playlazy( 2000 );
    }
}

//
// Error Handler
// * Sets up the video index variable
// * Calls the lazy play function
//
function ytplayer_error( error ) {
    if ( error ) {
        ytplayer_playitem += 1;
        ytplayer_playitem %= ytplayer_playlist.length;
        ytplayer_playlazy( 5000 );
    }
}
//
// Add items to the playlist one-by-one
//
ytplayer_playlist.push( 'CWrFoOEBlQU' );//http://www.youtube.com/watch?v=CWrFoOEBlQU
ytplayer_playlist.push( 'a3CdQEiiDNI' );//http://www.youtube.com/watch?v=a3CdQEiiDNI
ytplayer_playlist.push( 'aGGFciMFw1A' );//http://www.youtube.com/watch?v=aGGFciMFw1A
ytplayer_playlist.push( 'i4VCwv3HvMQ' );//http://www.youtube.com/watch?v=i4VCwv3HvMQ