//ie6, 7 detection from: http://www.thefutureoftheweb.com/blog/detect-ie6-in-javascript
var isMSIE = /*@cc_on!@*/false;

var thumbs_id = 'video_thumbs_area';
var video_id = 'video_area';
var video_caption = 'video_caption';
var display_page = 5;
var nav_id = 'video_thumbs_nav';
var videos = new Array();

function addVideoItem(id, thumb, caption) {
	len = videos.length;
	videos[len] = new Array();
	videos[len]['id'] = id;
	videos[len]['thumb'] = thumb;
	videos[len]['name'] = caption;
	videos[len]['duration'] = '';
}

var ytplayer = null;
function onYouTubePlayerReady(playerId) {
	ytplayer = document.getElementById("myytplayer");
	//show first video
	openVideo(0);
}


function buildThumb(idx)
{
	if (idx >= videos.length)
		return null;

	var html = '<div class="play_video_thumb">';
	html += '<a href="javascript:void(0);" onclick="javascript:openVideo(\''+idx+'\');"  style="background-image: url('+videos[idx]['thumb']+')"></a>';
	html += '</div>';
	return html;
}

var html = '';
var handler = null;

function openVideo(idx)
{
	if (idx >= videos.length || handler)
		return null;

	var videoArea = document.getElementById('video_area');
	if (!videoArea)
		return false;

	videoArea.innerHTML = '';



	html =  '<object type="application/x-shockwave-flash" style="width: 425px; height: 350px; background-color: black;" data="http://www.youtube.com/v/' + videos[idx]['id'] + '&rel=0">';
	html += '<param name="movie" value="http://www.youtube.com/v/' + videos[idx]['id'] + '&rel=0" />';
	html += '</object>';
	capData = videos[idx]['name'];
	if (isMSIE)
		handler = setTimeout('setHtml();', 1000);
	else
		setHtml();
	return true;
}

function setHtml()
{
	var videoArea = document.getElementById('video_area');
	if (!videoArea)
		return false;
	videoArea.innerHTML = html;
	handler = null;
	//set caption
	var capArea = document.getElementById(video_caption);
	if (!capArea)
		return;
	capArea.innerHTML = capData;
}

function buildThumbs(page)
{

	var obj = document.getElementById(thumbs_id);
	if (!obj)
		return null;

	var start_from = page * display_page;
	var end_at = (start_from + display_page > videos.length) ? videos.length : start_from + display_page;
	var html = "";
	for (var i=start_from; i<end_at; i++) {
		html += buildThumb(i);
	}

	obj.innerHTML = html;

	//Page navigation?
	html = "";
	if (page > 0) {
		var ipage = parseInt(page) - 1;
		html = '<a class="video_prev" href="javascript:void(0);" onclick="buildThumbs(\''+(ipage)+'\')"></a>';
	}

	if (page < Math.ceil(videos.length/display_page)-1) {
		var ipage = parseInt(page) + 1;
		html += '<a class="video_next" href="javascript:void(0);" onclick="buildThumbs(\''+(ipage)+'\')"></a>';
	}
	var obj = document.getElementById(nav_id);
	if (!obj)
		return;

	obj.innerHTML = html;

}