function loadVideoThumbnails(menuId)
{
		$('#videoContent').html('');
		$('#contentFrame').html('');
		loadMenuPage(menuId);
}

function loadFullVideo(menuId, index)
{
	$('#contentFrame').html('');
	loadContentFrame('/handlervideo/renderfull/menuid/' + menuId + '/index/' + index);
}

function resizeVideoContainerFull(parent, clipWidth, clipHeight)
{
	// max dimensions enforced
	var videoMaxWidth = 640;
	var videoMaxHeight = 480;
	
	// determine factor
	var factor = 1;
	if (videoMaxWidth < clipWidth)
	{
		factor = videoMaxWidth / clipWidth;
	}
	if (videoMaxHeight < clipHeight * factor)
	{
		factor = factor * videoMaxHeight / clipHeight;
	}

	parent.css({
		width: factor * clipWidth, 
		height: factor * clipHeight, 
		'margin-left': (videoMaxWidth - factor * clipWidth)/2
	});
}

function showFullVideo(videos, captions,  index)
{
	$('#videoContent').html('');
	$('#videoCaption').html(convertTextBreaks(captions[index].substring(0, 642)));
	$f(
	        'videoContent'
	        , 
	        {
	        	allowfullscreen: 'true', 
	        	src: '/public/res/flowplayer-3.2.7.swf' 
	        }
	        ,
	        {
	          clip: 
	          {
	            autoPlay: true,
	            autoBuffering : true,
	            buffering: true,
	            fadeInSpeed: 0,
            	fadeOutSpeed: 0,
            	scaling: 'scale',
	            url: videos[index],
	        	onStart: function(clip)
	        	{
	        		parent = $(this.getParent());
	        		resizeVideoContainerFull(parent, clip.metaData.width, clip.metaData.height);
	        	}
	          }
	          ,
	          play: 
	          {
	            opacity: 0
	          }
	          ,
	          plugins: 
	          {
	            controls: true
	          },
	          controls: 
	          {
	        	fullscreen: true
	          },
	          onBeforeUnload : function()
	          {
	        	 return false;
	          }
	        } 
	    ).ipad();
	showFullControls(videos, index);
}

function showVideo(menuId, containerIndex, videos, captions, index)
{
	$('#v_' + (containerIndex)).html('');
    $('#c_' + (containerIndex)).html(convertTextBreaks(captions[current]));

	$f(
	        'v_' + (containerIndex)
	        , 
	        {
	        	allowfullscreen: 'false', 
	        	src: '/public/res/flowplayer-3.2.7.swf' 
	        }
	        ,
	        {
	          clip: 
	          {
	            autoPlay: false,
	            autoBuffering : true,
	            fadeInSpeed: 0,
            	fadeOutSpeed: 0,
            	scaling: 'scale',
	            url: videos[index],
		        onBeforePause : function()
		        {
		          loadFullVideo(menuId, index);
		        }
	          }
	          ,
	          play: 
	          {
	            opacity: 0
	          }
	          ,
	          plugins: 
	          {
	        	  	controls: null,

	        	  	myContent: {

	        			url: '/public/res/flowplayer.content-3.2.0.swf',

	        			width: 1000,
	        			height: 1000,
	        			opacity: 0,

	        			html: '',

	        			onClick: function() {
	        				loadFullVideo(menuId, index );
	        			}
	        		}
	          },
	          controls: 
	          {
	        	fullscreen: false
	          },
	          onMouseOver: function() 
	          { 
	            if (this.getState() == 2)
	            {
	                return;
	            }   
	            this.play(); 
	          }, 
	          onMouseOut: function() 
	          { 
	            if (this.getState() == 2)
	            {
	                return;
	            }   
	            this.stop(); 
	          },
	          onBeforeUnload : function()
	          {
	        	 return false;
	          }
	        } 
	    ).ipad();    	

}


function showVideos(videos, captions, rows, columns, page, menuId)
{
	for (i = 0; i < rows; i++)
	{
		for (j = 0; j < columns; j++)
		{
			current = page*rows*columns + i*columns + j;
			
			$('#v_' + (i*columns + j)).empty();
			$('#c_' + (i*columns + j)).empty();
			
			if (current < videos.length )
			{
				showVideo(menuId, i*columns + j, videos, captions, current);
			}
		}
	}
	
	showControls(videos, rows, columns, page);
}

function showControls(videos, rows, columns, page)
{
	if (page == 0)
	{
		$('#videoThumbnailsPrevious').css('visibility', 'hidden');
	}
	else
	{
		$('#videoThumbnailsPrevious').css('visibility', 'visible');
	}
	
	if (page < Math.ceil(videos.length / (rows*columns)) - 1)
	{ 
		$('#videoThumbnailsNext').css('visibility', 'visible');
	}
	else 
	{
		$('#videoThumbnailsNext').css('visibility', 'hidden');
	}	
}

function showFullControls(videos, index)
{
	$('#videoThumbnails').css('visibility', 'visible');
	
	if (index == 0)
	{
		$('#videoPrevious').css('visibility', 'hidden');
	}
	else
	{
		$('#videoPrevious').css('visibility', 'visible');
	}
	
	if (index >= videos.length - 1)
	{
		$('#videoNext').css('visibility', 'hidden');
	}
	else 
	{
		$('#videoNext').css('visibility', 'visible');
	}	
}