/*************
Gets playlist object and information for currently playing video

Onload, grabs default video (plus info) and loads it into the main window.
Creates playlist HTML in playlistHandler().


HTML elements with these IDs are necessary:

#playlist : Holds list of thumbnails with links to videos; innerHTML is loaded dynamically
#video_description : In main video window, displays description of currently playing video
#video_duration : In main video window, displays duration of currently playing video
#video_title : In main video window, displays title of currently playing video

CSS class names used:

.playing : In #playlist, highlights current video

*************/

var player;
function playerReady(obj) {
	player = document.getElementById(obj.id);
	try {
		playlistHandler({playlist:player.getPlaylist()});
	} catch(err) {
		player.addControllerListener('PLAYLIST','playlistHandler');
	}
}

function playlistHandler(obj) {
	var load_default = 'none'; // initialize
	var arr = obj.playlist;
	var len = arr.length;
	var str = [];
	var playing = player.getConfig();
	for (i=0; i<len; i++) {
		// if this is the default video sent via URL, load it
		if(load_default == 'none' && DEFAULT_VIDEO != '' && arr[i]['tags'] != '' && arr[i]['tags'] == DEFAULT_VIDEO) {
			load_default = i;
		}
		var id = 'li_'+i;
		li = (load_default == i) ? '<li id="'+id+'" class="playing">' : '<li id="'+id+'">';
		li += '<a href="javascript:player.sendEvent(\'ITEM\','+i+');getItemAndUpdate('+i+');">';
		li += '<p>';
		li += arr[i]['title'];
		li += '&nbsp;&nbsp;';
		li += '<b>('+getDuration(arr[i]['duration'])+')</b>';
		li += '</p>';
		li += '<img width="88" height="44" src="'+arr[i]['image']+'" />';
		li += '</a></li>';
		str.push(li);
		if(playing.item == i) { updateInfo(arr[i]); }
	}
	$('playlist').innerHTML = str.join("\n");
	if(load_default != 'none') {
		player.sendEvent('ITEM',load_default);
		updateInfo(arr[load_default]);		
	} else {
		// highlight first item
		$$('#playlist li')[0].addClassName('playing');
	}
}

function getItemAndUpdate(i)
{
	var playing = player.getPlaylist()[i];
	updateInfo(playing);
	// remove "playing" class from all elements
	$$('#playlist li').each(function(li) {
		li.removeClassName('playing');
	});
	// add playing class to selected
	$('li_'+i).addClassName('playing');
}

function updateInfo(item)
{
	$('video_description').innerHTML = item['description'];
	var duration = getDuration(item['duration']);
	$('video_duration').innerHTML = "("+duration+")";
	$('video_title').innerHTML = item['title'];	
}

function getDuration(secs)
{
	var raw_seconds = secs % 60;
	var seconds = (raw_seconds < 10) ? "0" + raw_seconds : raw_seconds;
	return (secs / 60).floor() + ':' + (seconds);
}