var d;

function receiveOoyalaPlayerEvent(playerId, eventName, eventParams)
{
	// Ooyala player object, call API setters/getters upon this object
	var player = document.getElementById(playerId);
	
	
	switch(eventName){
		case "apiReady": // wait for this event to be dispatched before making any API calls. 
		
			// load thumbnails :)
		    var videos = getInfoOfAllChannelItems(player);
		    var thumbnailHTML = generateThumbnailHTML(videos,playerId);
		    document.getElementById("thumbs").innerHTML = thumbnailHTML;
            
            //for first video load 
            var video = player.getCurrentItemEmbedCode();
            changeHighlight(player,video);
			startInterval();
		break;
        
        case "currentItemEmbedCodeChanged":
			//var stepToIndex=0;
			var videos = getInfoOfAllChannelItems(player);
			
            changeHighlight(player,eventParams.embedCode);
			
        break;
		
		case "stateChanged":
			if(player.getState() == "buffering")
				stopInterval();
		break;
	}
}
// returns an array of video objects; video objects have two parameters: embedCode, and thumbnailURL
function getInfoOfAllChannelItems(player)
{
  var thumbnailWidth = 130; // Set thumbnail width here
  var thumbnailHeight = 72; // Set thumbnail height here
  var channelItems = player.getLineup();
  var urls = [];
  var embedCodes = [];
  var titles = []; 
  var videos = [];

  for (var i = 0; i < channelItems.length; i++)
  {
    urls.push(player.getPromoFor(channelItems[i].embedCode, thumbnailWidth, thumbnailHeight));
	embedCodes.push(channelItems[i].embedCode);
	titles.push(channelItems[i].title);
	var video = new Object();
	video.embedCode = embedCodes[i];
	video.thumbnailURL = urls[i];
	video.title = titles[i];
	videos.push(video);
  }
  
  return videos;
}

//creates html for thumnail images in form <div1><img1></div1>...<divN><imgN><divN>
function generateThumbnailHTML(videos,playerId)
{
  var html = "";
  var changeVideo = "";
  for (var i = 0; i < videos.length; i++)
  {
    changeembed = 'changeEmbed("' + playerId + '", "' + videos[i].embedCode + '")';
    html += "<a href='#' onclick='" + changeembed + "; stopInterval(); play(); return false' class='panel'>";
	html += "<img border='0' vspace='2' hspace='1' class='deselected' width='127px' height='84px' alt='" + videos[i].title + "' name='"+ i +"' title='" + videos[i].title + "' id='" + videos[i].embedCode + "' src='" + videos[i].thumbnailURL + "' /></a>";
  }
  return html;
}

//changes video and also selects/deselects from the thumbnail belt
function changeHighlight(playerId,embedCode)
{
	var player = document.getElementById('player');

	// Deselect all currently highlighted thumbnails
	var currentlySelected = jQuery(".highlighted");
    
	if (currentlySelected.length > 0) 
	{
		currentlySelected[0].className="deselected";
    }
    
    highlight(embedCode);
	
}
function changeEmbed(playerId,embedCode)
{
    var autoplay = false;
	var player = document.getElementById('player');
    
    //change video
    player.changeCurrentItem(embedCode);
    
    //if autoplay is on, then automatically play video after switch
	if (autoplay) player.playMovie();
}

//highlights currently playing video thumbnail
function highlight(embedCode){
	var element=document.getElementById(''+embedCode);
	element.className="highlighted";
}

function startInterval(){
	var player=document.getElementById('player');
	var i=0;
	var element;
	var items=player.getLineup()
	d=setInterval(function(){
						element=document.getElementsByName(i);
						changeEmbed(player, element[0].id);
						i++;
						if(i == items.length)
							i=0;
						 }, 3000);
	
}

function stopInterval(){
	if(d)
		clearInterval(d);
}

function play(){
	document.getElementById('player').playMovie();
}