// BEGIN: Youtube api player -->

    var youTubePlayer = null;

    function togglePlayerVisibility()
    {
        if($('youtube_player_container').style.left == '0px'){
            hidePlayer();
        } else {
            showPlayer();
        }
    }

    function hidePlayer()
    {
        if($('youtube_player_container').style.left == '0px'){
            $('music_video_container').style.visibility = 'hidden';
            $('youtube_player_container').style.left = '-4000px';
        }
    }
    
    function showPlayer()
    {
        if($('youtube_player_container').style.left == '-4000px'){
            $('music_video_container').style.visibility = 'visible';
            $('youtube_player_container').style.left = '0px';
        }
    }
    
    function onYouTubePlayerReady(playerId) 
    {
        youTubePlayer = $(playerId);
        
        setInterval(updatePlayerHtml, 250);
        youTubePlayer.addEventListener("onStateChange", "onYouTubePlayerStateChange");
        
        // initialize volume slider to sync with youtube
        // player default                
        volumeSlider.setValue(getPlayerVolume());
    }
    
    // returns -1 when just initialized, 0 when done/not playing,
    // 3 when loading video, 2 when video paused, 1 when video playing
    function onYouTubePlayerStateChange(newState) 
    {
        switch(newState) {
            case(-1): //initialized, not playing anything
                break;
            case(0): //song finished
                // change the play button to play image (as opposed to )
                $('play_button').src = rootURL + '/webroot/images/player_play_btn.png';
            
                if (playlistIsPlaying == true){
                    playNextPlaylistVideo();
                } else {
                    $('currently_playing').innerHTML = "";
                    hidePlayer();
                }
                break;
            case(1): // video is playing
                // change play button to pause button
                $('play_button').src = rootURL + '/webroot/images/player_pause_btn.png';
                // hide the buffering image
                //$('video_loading_icon').style.display = 'none';
                showPlayer();
                break;
            case(2): //video is paused
                // change the play button to play image (as opposed to pause)
                $('play_button').src = rootURL + '/webroot/images/player_play_btn.png';
                break;
            case(3): // video is loading
                //$('video_loading_icon').style.display = 'block';
                break;
        }
    }
                
    // this function updates the player html
    // interface every few miliseconds (time, loading state, etc)
    function updatePlayerHtml()
    {
        if (youTubePlayer != null) {
            if(getCurrentVideoTime() > 0) {
                var seekValue = youTubePlayer.getCurrentTime()/youTubePlayer.getDuration()*100;
                seekSlider.setValue(seekValue);
                
                var currTime = Math.round(youTubePlayer.getCurrentTime());
                var duration = Math.round(youTubePlayer.getDuration());
                
                // update the two labels, round to 2 decimal places
                $('seek_curr_time').innerHTML = TimeHelper.secToTime(currTime, false);
                $('seek_duration').innerHTML =  TimeHelper.secToTime(duration, false);
            }
        }
    }
    
    function playerSeekTo(seconds) 
    {
        if (youTubePlayer != null) {
            youTubePlayer.seekTo(seconds, true);
        }
    }      
    
    function playNewVideo(videoId, title)
    {
        if(youTubePlayer != null) {
            youTubePlayer.loadVideoById(videoId);
            
            
            $('currently_playing').innerHTML = StringHelper.shorten(title, 70);
            $('play_button').value = "Pause";
        }
    }
    
    function setPlayerVolume(value)
    {
        if(youTubePlayer != null) {
            youTubePlayer.setVolume(value);
        }
    }
    
    // this function returns the saved
    // or default volume of the youtube
    // player
    function getPlayerVolume()
    {
        if(youTubePlayer != null) {
            return youTubePlayer.getVolume();
        }
    }
    
    function getCurrentVideoTime()
    {
        if(youTubePlayer != null) {
            return youTubePlayer.getCurrentTime();
        }
    }
    
    function getVideoDuration()
    {
        if(youTubePlayer != null) {
            return youTubePlayer.getDuration();
        }
    }
    
    function videoSeekTo(seconds) {
        if (youTubePlayer != null) {
            youTubePlayer.seekTo(seconds, true);
        }
    }
    
    // returns -1 when just initialized, 0 when done/not playing,
    // 3 when loading video, 2 when video paused, 1 when video playing
    function getPlayerState()
    {
        if(youTubePlayer != null) {
            return youTubePlayer.getPlayerState();
        }
    }
    
    function pauseVideo()
    {
        if (youTubePlayer != null) {
            youTubePlayer.pauseVideo();
        }
    }
    
    function playVideo() 
    {
        if (youTubePlayer != null) {
            youTubePlayer.playVideo();
        }
    }
    
    function stopVideo() 
    {
        if (youTubePlayer != null) {
            youTubePlayer.stopVideo();
        }
    }
           
// END: Youtube api player -->

// BEGIN: Slider control -->


    var seekSlider = null;
    var volumeSlider = null;
    
    function initSliders()
    {
        seekSlider = new Slider(
                document.getElementById("seek_slider_bg"), 
                document.getElementById("seek_slider_thumb")
            );
        seekSlider.setValue(0);
        seekSlider.onchange = function () {
                // use percentage of slider value and 
                // total duration to calculate seekTo time
                var seekToTime = (seekSlider.getValue()/100)*getVideoDuration();

                //seek time should only update if greater then 3 seconds
                if (Math.abs(getCurrentVideoTime()-seekToTime) > 3) {
                    videoSeekTo(seekToTime, true);
                }
            };
            
        // create the player volume slider
        volumeSlider = new Slider(
                document.getElementById("volume_slider_bg"), 
                document.getElementById("volume_slider_thumb")
            );
            
        // default volume for youtube is 11
        volumeSlider.setValue(11);
        
        volumeSlider.onchange = function () {
                setPlayerVolume(volumeSlider.getValue());
            };
    }
// END: Slider control  -->
        
// BEGIN: Playlist Management -->


    var playlist = new Playlist();
    var playlistIsPlaying = false;

    function addToPlaylist(vidId, title)
    {
        playlist.addVideo(vidId, title); 
        updatePlaylistHtml();
    }
    
    function removeFromPlaylist(songLineNumber)
    {
        playlist.removeVideo(songLineNumber);
        updatePlaylistHtml();
    }

    function playAllFromPlaylist(){
	playFromPlaylist(0);
    }

    function getAllFromPlaylist(){
	return playlist.getAllVideos();
    }

    function playFromPlaylist(songLineNumber)
    {
        var video = playlist.selectVideo(songLineNumber);
	if(video  != undefined ){
		playNewVideo(video['vidId'], video['title']);
		playlistIsPlaying = true;
	}
        updatePlaylistHtml();
    }
    
    function clearPlaylist()
    {
        playlist.clear();
        updatePlaylistHtml();
    }
    function isPlaylistEmpty(){
	return playlist.isEmpty();
    }

    function playNextPlaylistVideo()
    {
        if (playlist.isEmpty() == true) {
            //playlist is done
            playlistIsPlaying = false;
        } else {
            // select the next video
		var video = playlist.selectNextVideo();
            // play the video
            playNewVideo(video['vidId'], video['title']);
            playlistIsPlaying = true;

            
            updatePlaylistHtml();
        }
    }

    function playPreviousPlaylistVideo()
    {
        if (playlist.isEmpty() == true) {
            //playlist is done
            playlistIsPlaying = false;
        } else {
            // select the previous video
		var video = playlist.selectPreviousVideo();
            // play the video
            playNewVideo(video['vidId'], video['title']);
            playlistIsPlaying = true;

            
            updatePlaylistHtml();
        }
    }
    
    // updates the playlist div displayed
    // to the user
    function updatePlaylistHtml()
    {         
    
            // works by clearing the div and repopulating it
            // based on what is in 'playlistVidIds'
            $("playlist_items").empty();
                            
            var videos = playlist.getAllVideos();

            var html = '<table class="playlist" cellspacing="0" cellpadding="0">';
            for (var i=0; i<videos.length; i++) {                                           
                if (i%2 == 0) {
                    html += '<tr class="odd">';
                } else {
                    html += '<tr class="even">';
                }

                html += '<td>'+(i+1)+'. '+videos[i]['title']+'</td>';
                
				//play
                html += '<td>';
                html += '<a href="javascript:playFromPlaylist(\''+i+'\');" title="Play this song">';
                html += '<img src="'+rootURL+'/webroot/images/playlist_play_btn.png" style="border:0px;">';
                html += '</a>';
                html += '</td>';
				
				//delete
				html += '<td>';
                html += '<a href="javascript:removeFromPlaylist(\''+i+'\');" title="Remove song from playlist">';
                html += '<img src="'+rootURL+'/webroot/images/playlist_remove_btn.png" style="border:0px;">';
                html += '</a>';
                html += '</td>';
                
                html += '</tr>';   
            }
            html += '</table>';
            
            $("playlist_items").innerHTML = html;
    }           
// END: Playlist Management -->