var player = null;
var ready = false;
var seekReady = false;
var playheadInterval = 0;
var tooltip = null;

$(document).ready(function () {

    // embed chromless player
    var id = 'flash';
    var src = $('#FirstVideoId').val();
    var params = { allowScriptAccess: "always", wmode: "transparent" };
    var atts = { id: "my-player" };  

    swfobject.embedSWF("http://www.youtube.com/apiplayer?video_id=" + src + "&version=3&enablejsapi=1", id, "100%", "100%", "9.0.0", "data/flash/expressInstall.swf", null, params, atts);

    // player controls    

    // play/pause button
    $('#play-pause-btn').click(function () {
        if (!ready) return;
        else playPause();
    });

    // seekbar
    $('#seekbar').click(function (e) {
        if (!seekReady) return;
        else {
            var localX = (e.pageX - $(this).offset().left) - 17;
            if (localX > $(this).innerWidth()) localX = $(this).innerWidth();

            var percent = localX / $('#seekbar').innerWidth();
            seekToPercent(percent);
        }
    });

    // mute button
    $('#mute-btn').click(function () {
        if (!ready) return;
        else toggleSound();
    });

    //////////// Video Gallery (Optional) ///////////
    // tooltip
    //	tooltip = document.createElement('div');
    //	
    //	with(tooltip.style) {
    //		id = 'tt';
    //		position = 'absolute';
    //		top = '0px';
    //		left = '0px';
    //		width = '118px';
    //		height = '73px';
    //		padding = '5px';
    //		background = 'url(data/images/tooltip-bg.png) top left no-repeat';
    //		zindex = '45000';
    //		display = 'none';
    //	}
    //	
    //	document.body.appendChild(tooltip);
    //	
    //	$('#thumbnails li').mouseenter(function() {
    //		var o = $(this).offset();
    //		$(tooltip).html($(this).html()).css({'top':(o.top - 85) + 'px', 'left':((o.left - 64) + 22) + 'px'}).show();
    //	});
    //	
    //	$('#thumbnails li').mouseleave(function() {
    //		$(tooltip).hide();
    //	});
    /////////////////////////////////////////////////
});

/************************************************ 
 * onYouTubePlayerReady:void                    *
 *                                              *
 * Called from the YouTube player API.          *
 * This player is ready for action!             *
 ************************************************
/                                              */
onYouTubePlayerReady = function() {
    player = document.getElementById('my-player');
    
    player.addEventListener("onStateChange", "onPlayerStateChange");
    ready = true;
}

/************************************************ 
 * onPlayerStateChange:void                     *
 *                                              *
 * Handle player state change.                  *
 ************************************************
/                                              */
onPlayerStateChange = function(s) {
    switch(s) {
        case -1: // unstarted
            return;
        case 0: // ended
            resetPlayer();
            return;
        case 1: // playing
            seekReady = true;
            $('#play-pause-btn').css('background-position', '0px -40px');
            playheadInterval = setInterval(updatePlayhead, 10);
            return;
        case 2: // paused
            $('#play-pause-btn').css('background-position', '0px 0px');
            clearInterval(playheadInterval);
            return;
        case 3: // buffering
            $('#play-pause-btn').css('background-position', '0px 0px');
            return;
        case 5: // video cued
            resetPlayer();
            ready = true;
            return;
    }
}

/************************************************ 
 * resetPlayer:void                             *
 *                                              *
 * Reset the player.                            *
 ************************************************
/                                              */
resetPlayer = function() {
    clearInterval(playheadInterval);
    $('#play-pause-btn').css('background-position', '0px 0px');
    $('#seekbar').css('background-position', '0px 0px');	
}

/************************************************ 
 * updatePlayhead:void                          *
 *                                              *
 * Update the seekbar.                          *
 ************************************************
/                                              */
updatePlayhead = function() {
    if(typeof(player.getCurrentTime) == 'undefined') {
        clearInterval(playheadInterval);
        return;
    }

    var percentage = player.getCurrentTime() / player.getDuration();
    $('#seekbar').css('background-position', Math.round(percentage * $('#seekbar').innerWidth()) + 'px 0px');
}

/************************************************ 
 * playPause:void                               *
 *                                              *
 * Toggle play/pause.                           *
 ************************************************
/                                              */
playPause = function () {
    switch (player.getPlayerState()) {
        case -1: // unstarted
        case 0: // ended
        case 2: // paused
            player.playVideo();
            return;
        case 1: // playing
            player.pauseVideo();
            return;
        case 5: // video cued
            player.playVideo();
            return;
        default:
            return;
    }
}

/************************************************ 
 * seekToPercent:void                           *
 *                                              *
 * Seek to the passed percentage.               *
 *                                              *
 * percent:Number - percent to seek to.         *
 ************************************************
/                                              */
seekToPercent = function(percent) {
    var time = percent * player.getDuration();
    player.seekTo(time, true);
}

/************************************************ 
 * toggleSound:void                             *
 *                                              *
 * Toggle mute/unmute.                          *
 ************************************************
/                                              */
toggleSound = function() {
    if(player.isMuted()) {
        player.unMute();
        $('#mute-btn').css('background-position', '0px 0px');
    } else {
        player.mute();
        $('#mute-btn').css('background-position', '0px -40px');
    }
}

//////////// Video Gallery (Optional) ///////////

/************************************************ 
 * loadVideo:void                               *
 *                                              *
 * Load a new video into the player.            *
 *                                              *
 * id:String - video id to load.                *
 ************************************************
/                                              */
loadVideo = function (id) {
    if (!ready) return;

    ready = false;
    player.cueVideoById(id, 0, 'default');

    if (window.loadVideoInfo) {
        loadVideoInfo(id);
    }
}

/////////////////////////////////////////////////