var sourcePath = '/video-gallery/';  // The path to directory that contains the video gallery files.

// You don't need to change anything below this point. Experiment at your own risk.

$(document).ready(function(){
	$.ajax({
		type: 'GET',
		url: sourcePath + 'videoList.xml',
		dataType: 'xml',
		success: parseXml
	});
});

function parseXml(xml){
	$(xml).find('VIDEO').each(function(){
		var link = sourcePath + $(this).attr('URL');
		var title = '<span class="title"><a href="' + link + '" title="' + $(this).attr('TITLE') + '">' + $(this).attr('TITLE') + '</a></span>';
		var description = '<span class="description">' + $(this).attr('DESCRIPTION') + '</span>';
		var thumb = '<a href="' + link + '" title="' + $(this).attr('TITLE') + '"><img src="' + sourcePath + $(this).attr('THUMB') + '" alt="' + $(this).attr('TITLE') + '" /></a><br />';
		$('#galleryWrapper #videoClips ul').append('<li>' + thumb + title + '<br />' + description + '</li>');
	});

	$('#videoClips ul li a').click(function(event){
		event.preventDefault();
		
		var video = $(this).attr('href');
		
		function getFlashMovie(movieName) {
			var isIE = navigator.appName.indexOf("Microsoft") != -1;
			return (isIE) ? window[movieName] : document[movieName];
		}
		
		getFlashMovie(sourcePath + 'video-player').sendToFlash(video);
	});
	
	var items = $("#videoClips ul li");
	var item = items['0'];
	var itemCount = items.size();
	var itemWidth = parseInt($(item).css('width').replace('px',''));
	var itemMarginLeft = parseInt($(item).css('margin-left').replace('px',''));
	var itemMarginRight = parseInt($(item).css('margin-right').replace('px',''));
	var itemPaddingLeft = parseInt($(item).css('padding-left').replace('px',''));
	var itemPaddingRight = parseInt($(item).css('padding-right').replace('px',''));
	var itemBorderLeft = parseInt($(item).css('border-left-width').replace('px',''));
	var itemBorderRight = parseInt($(item).css('border-right-width').replace('px',''));
	var itemTotalWidth = itemWidth + itemMarginLeft + itemMarginRight + itemPaddingLeft + itemPaddingRight + itemBorderLeft + itemBorderRight;
	var listWidth = itemTotalWidth * itemCount;
	var listWidthPx = listWidth + 'px';
	$('#videoClips ul').css('width',listWidthPx);
;}