/************************************************
*************** Set-up Variables ****************
************************************************/
var selectedCategory = 0;
var selectedVideo = 0;
var asset_root = 'assets/';


/**********************************************
********** Prepare Category Output ************
**********************************************/

function setupCategories() {

	var spanString = '';
	var currentCategoryId = '';
	var colorInt = 1;

	for (var i = 0; i < videoCategoryArray.length; i++) {
		spanString = '<span><a href="javascript:changeCategory('+ i + ')">' + videoCategoryArray[i] + '</a></span>';
		currentCategoryId = 'category_' + i;
		var newLi = document.createElement('li');
		newLi.id = currentCategoryId;
		newLi.innerHTML = spanString;
		if (i == selectedCategory) {
			$(newLi).addClassName('active');
		} else {
			if (colorInt == 0) {
				$(newLi).addClassName('d1');
			} else {
				$(newLi).addClassName('d2');
			}
		}
		if (colorInt == 0) {
			colorInt = 1;	
		} else {
			colorInt = 0;
		}
		new $('categoryMenu').insert(newLi, {  });
	}
}


/**********************************************
*********** Prepare Video Output **************
**********************************************/
function setVideos(categoryId) {
	
	var colorInt = 1;
	
	for (var i = 0; i < videoArray[categoryId].length; i++) {

		currentVideoId = 'video_' + i;

		// Create Image Element
		var vidImgElement = document.createElement('img');
		vidImgElement.src = asset_root + 'thumbs/' + videoArray[categoryId][i][5];
		vidImgElement.alt = videoArray[categoryId][i][0];

		// Create Link for Image
		var vidImgA = document.createElement('a');
		var innerString = categoryId + ',' + i;
		vidImgA.href = 'javascript:changeVideo(' + innerString + ')';
		// Add Image to Link Container
		$(vidImgA).insert(vidImgElement, {  });
		
		// Create Division for Image Link
		var vidImgDiv = document.createElement('div');
		$(vidImgDiv).addClassName('vidimg');
		// Add Image Link to Its Container
		$(vidImgDiv).insert(vidImgA, {  });

		// Create Video Text Link
		var linkText = videoArray[categoryId][i][0];
		var vidTitleA = document.createElement('a');
		var innerString = categoryId + ',' + i;
		vidTitleA.href = 'javascript:changeVideo(' + innerString + ')';
		// Add Link Text to Its Container
		$(vidTitleA).update(linkText);

		// Create Video Title Division
		var vidTitleDiv = document.createElement('div');
		$(vidTitleDiv).addClassName('vidtitle');
		// Give Birth to link
		$(vidTitleDiv).insert(vidTitleA, {  });

		// Create Left Select Division
		var vidLeftSelectDiv = document.createElement('div');
		$(vidLeftSelectDiv).addClassName('leftselect');
		// Add vidimg and vidtitle Divs
		$(vidLeftSelectDiv).insert(vidImgDiv, {  });
		$(vidLeftSelectDiv).insert(vidTitleDiv, {  });

		// Create Link for Viewing Video
		var linkText = videoArray[categoryId][i][0];
		var vidViewA = document.createElement('a');
		var innerString = categoryId + ',' + i;
		vidViewA.href = 'javascript:changeVideo(' + innerString + ')';
		// Give Birth to Link
		$(vidViewA).update('Click to Play');

		// Create LI for Link
		var vidViewLi = document.createElement('li');
		// Add in Link to LI
		$(vidViewLi).insert(vidViewA, {  });
		
		// Create UL for View Link LI
		var vidViewUl = document.createElement('ul');
		// Add in UL to LI
		$(vidViewUl).insert(vidViewLi, {  });
		
		// Create Right Select Division
		var vidRightSelectDiv = document.createElement('div');
		$(vidRightSelectDiv).addClassName('rightselect');
		// Give Birth to UL Child Division
		$(vidRightSelectDiv).insert(vidViewUl, {  });
			
		if (selectedVideo == i) {
			// Create Select BG Div
			var vidSelectBgActiveDiv = document.createElement('div');
			$(vidSelectBgActiveDiv).addClassName('selectbgactive');
			// Add Left Select Div
			$(vidSelectBgActiveDiv).insert(vidLeftSelectDiv, {  });
			// Add Right Select Div
			$(vidSelectBgActiveDiv).insert(vidRightSelectDiv, {  });
			
			// Assign Id
			vidSelectBgActiveDiv.id = currentVideoId;
			
			// Add Content to Page
			$('selectvideo').insert(vidSelectBgActiveDiv, {  });
			
			$('videoName').innerHTML = 'Now Playing: ' + videoArray[categoryId][i][0];
			
		} else {
			if (colorInt == 1) {
				// Create Select BG Div
				var vidSelectBgDiv = document.createElement('div');
				$(vidSelectBgDiv).addClassName('selectbg');
				// Add Left Select Div
				$(vidSelectBgDiv).insert(vidLeftSelectDiv, {  });
				// Add Right Select Div
				$(vidSelectBgDiv).insert(vidRightSelectDiv, {  });
				
				// Assign Id
				vidSelectBgDiv.id = currentVideoId;
				
				// Add Content to Page
				$('selectvideo').insert(vidSelectBgDiv, {  });	
				colorInt = 0;
			} else {
				// Create Select BG Div
				var vidSelectBgdDiv = document.createElement('div');
				$(vidSelectBgdDiv).addClassName('selectbgd');
				// Add Left Select Div
				$(vidSelectBgdDiv).insert(vidLeftSelectDiv, {  });
				// Add Right Select Div
				$(vidSelectBgdDiv).insert(vidRightSelectDiv, {  });
				
				// Assign Id
				vidSelectBgdDiv.id = currentVideoId;
				
				// Add Content to Page
				$('selectvideo').insert(vidSelectBgdDiv, {  });	
				colorInt = 1;
			}
		}
	}
}


function pageSetup() {
	setupCategories();
	setVideos(0);
}

window.onload = pageSetup;

function changeVideo(categoryId,videoId) {
	// Update Global Variable
	selectedVideo = videoId;

	// Remove Old Listings
	for (var i = 0; i < videoArray[categoryId].length; i++) {
		videoElementId = 'video_' + i;
		$(videoElementId).remove();
	}
	
	// Toss in the new videos
	setVideos(categoryId);
	
	// Get Player Set-up
	$('player').href = asset_root + 'flv/' + videoArray[categoryId][videoId][1];
	flowplayer("player", "swf/flowplayer-3.1.1.swf");
}

function changeVideoListing(categoryId,oldCategoryId) {
	// Update Global Variable
	selectedVideo = 'undefined';

	// Remove Old Listings
	for (var i = 0; i < videoArray[oldCategoryId].length; i++) {
		videoElementId = 'video_' + i;
		$(videoElementId).remove();
	}
	
	// Toss in the new videos
	setVideos(categoryId);
	
}

function changeCategory(categoryId) {
	// Set-up Global Variable
	var oldCategoryId = selectedCategory;
	selectedCategory = categoryId;

	// Remove Old Categories
	for (var i = 0; i < videoArray.length; i++) {
		videoCategoryElementId = 'category_' + i;
		$(videoCategoryElementId).remove();
	}
	
	// Update Category Listing
	setupCategories();
	
	// Set-up New Videos
	changeVideoListing(categoryId,oldCategoryId);
}