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("belt").innerHTML = thumbnailHTML;

		    stepcarousel.setup({
		       galleryid: 'thumbnails', //id of carousel DIV
		       beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
		       panelclass: 'panel', //class of panel DIVs each holding content
		       autostep: {enable:false, moveby:1, pause:6000}, //auto scroll options
		       panelbehavior: {speed:500, wraparound:true, persist:false}, //speed, looping, cookies of scrolling
		       contenttype: ['inline'] //do not change
		     });
             
            //for first video load 
            var video = player.getCurrentItemEmbedCode();
            changeHighlight(player,video);
		break;
        
        case "currentItemEmbedCodeChanged":
			var stepToIndex=0;
			var videos = getInfoOfAllChannelItems(player);
			
            changeHighlight(player,eventParams.embedCode);

			//move carousel to highlighted video
			for (var i = 0; i < videos.length; i++)
			{
				if(videos[i].embedCode == eventParams.embedCode)
				{
					stepToIndex=i+1;
				}
			}
			if (stepToIndex == 1) //if switching to the first video, bounce back to front
			{
				stepcarousel.stepBy('thumbnails', videos.length);
			}
			else //slide to next video
			{
				stepcarousel.stepTo('thumbnails', stepToIndex);
			}
			
        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 + ";return false' class='panel'>";
	html += "<img border='0' width='120px' height='72px' alt='" + videos[i].title + "' 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="";
    }
    
    highlight(embedCode);
	
}
function changeEmbed(playerId,embedCode)
{
    var autoplay = true;
	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";
}