// JavaScript Document
var currentVideoID = 0;
	var videoCount = 0;
	var videoArray = [];
	var autoPlayOff = false;
		
	/*	
	function videoTransition () {
		var videoContainer = document.getElementById("videoContainer");
		var outgoingVideo = videoContainer.firstChild;
		var incomingVideo = videoContainer.lastChild;
		
		outgoingVideo.className = 'outgoing';
		incomingVideo.className = 'incoming';

		videoContainer.className = 'initial';
		
		window.setTimeout(function() {
			videoContainer.className = 'final';
		}, 0);
		
		incomingVideo.addEventListener('webkitTransitionEnd', transitionDone, false);
	}
	*/	
	/*	
	function transitionDone(event) {
		videoContainer.className = '';
		//remove old image
		videoContainer.
		//remove temporary class name
		incomingVideo.className = '';
	}
	*/
	
	function mouseOverVideoContainer () {
		//change the class of the video descriptors to visible and transform the opacity in css
		var vidDescriptors = document.getElementById('videoDescriptors');
		vidDescriptors.className = 'fadeIn';	
	}
	
	function mouseOutVideoContainer () {
		var vidDescriptors = document.getElementById('videoDescriptors');
		vidDescriptors.className = 'fadeOut';
	}
	
	function mouseTimeOutVideoContainer () {
		
	}
	
	// listener function changes src 
	function myNewSrc() {
		//alert('gothere');
		var e = document.getElementById('videoEntry-'+currentVideoID);
		e.className='videoEntry';
		currentVideoID += 1;
		var e = document.getElementById('videoEntry-'+currentVideoID);
		e.className='selectedVideoEntry';
		
		var newVideoHTML = "<video id='video' width='640' height='360' controls='controls' preload='none' poster='" + videoArray[currentVideoID].getPosterPath() + "'><source src='" + videoArray[currentVideoID].getMP4URL() + "' type='video/mp4'><source src='" + videoArray[currentVideoID].getOGGURL() + "' type='video/ogg'> Your browser must support HTML5.</video><div id='videoDescriptors'>" + videoArray[currentVideoID].getClient() + " - \"" + videoArray[currentVideoID].getTitle() + "\"</div>";
		
		document.getElementById('videoContainer').innerHTML = newVideoHTML;
		
		var myVideo = document.getElementById('video'); 
		myVideo.addEventListener('ended', myNewSrc, false);
		myVideo.load();
		if (!autoPlayOff) 
			myVideo.play();
	} 
	
	function changeVideoSource(id) {
		//HIGHLIGHT the new selection
		var e = document.getElementById('videoEntry-'+currentVideoID);
		e.className='videoEntry';
		currentVideoID = id;
		var e = document.getElementById('videoEntry-'+currentVideoID);
		e.className='selectedVideoEntry';
		
		var newVideoHTML = "<video id='video' width='640' height='360' controls='controls' preload='none' poster='" + videoArray[currentVideoID].getPosterPath() + "'><source src='" + videoArray[currentVideoID].getMP4URL() + "' type='video/mp4'><source src='" + videoArray[currentVideoID].getOGGURL() + "' type='video/ogg'> Your browser must support HTML5.</video><div id='videoDescriptors'>" + videoArray[currentVideoID].getClient() + " - \"" + videoArray[currentVideoID].getTitle() + "\"</div>";
		
		document.getElementById('videoContainer').innerHTML = newVideoHTML;
		//videoTransition();
		var myVideo = document.getElementById('video'); 
		myVideo.addEventListener('ended', myNewSrc, false);
		myVideo.load();
		if (!autoPlayOff) 
			myVideo.play();
	} 
	
	function constructPlaylist () {
		//BEGIN constructing the playlist
		var newHTML = document.getElementById('playlist').innerHTML;
		for (var k=0;k<videoCount;k++) {
			//write in the DOM section
			newHTML = newHTML + "<a onclick='changeVideoSource(" + k + ")'><div class='videoEntry' id='videoEntry-" + k + "'><img class='thumbnail' width='150px' height='84px' src='" + videoArray[k].getThumbPath() + "' /><div id='videoTitles'>";
			newHTML = newHTML + "<b>" + videoArray[k].getClient() + "</b><br />";
			newHTML = newHTML + "<span class='title'>\"" + videoArray[k].getTitle() + "\"</span>";
			newHTML = newHTML + "</div></div></a>";
		}
		document.getElementById('playlist').innerHTML = newHTML;
		
		var elem = document.getElementById('videoEntry-'+currentVideoID);
		elem.className='selectedVideoEntry';
		//END constructing the playlist	
	}

	// function adds listener function to ended event -->
	function myAddListener() { 
		constructPlaylist();
		
		var newVideoHTML = "<video id='video' width='640' height='360' controls='controls' poster='" + videoArray[currentVideoID].getPosterPath() + "'><source src='" + videoArray[currentVideoID].getMP4URL() + "' type='video/mp4'><source src='" + videoArray[currentVideoID].getOGGURL() + "' type='video/ogg'> Your browser must support HTML5.</video><div id='videoDescriptors'>" + videoArray[currentVideoID].getClient() + " - \"" + videoArray[currentVideoID].getTitle() + "\"</div>";
		document.getElementById('videoContainer').innerHTML = newVideoHTML;
		
		var myVideo = document.getElementById('video'); 
		myVideo.addEventListener('ended', myNewSrc, false);
	} 
	
	var GetXmlHttpObject, stateChange;;
	var xmlHttp;

	stateChange = function() {
		if (( xmlHttp.readyState === 4 ) || ( xmlHttp.readyState === "complete" )) { 
			xmlDoc = xmlHttp.responseXML;
			var objNodeList = xmlDoc.getElementsByTagName("video");
			videoCount = objNodeList.length;
	
			for (i = 0;i < videoCount;i++) {
				var id = i;
				var client = xmlDoc.getElementsByTagName("client")[i].childNodes[0].nodeValue;
				var title = xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue;
				var mp4url = xmlDoc.getElementsByTagName("mp4url")[i].childNodes[0].nodeValue;
				var oggurl = xmlDoc.getElementsByTagName("oggurl")[i].childNodes[0].nodeValue;
				var thumbPath = xmlDoc.getElementsByTagName("thumbnailPath")[i].childNodes[0].nodeValue;
				var posterPath = xmlDoc.getElementsByTagName("posterFramePath")[i].childNodes[0].nodeValue;
				var v = new Video(id, client, title, mp4url, oggurl,thumbPath, posterPath);
				videoArray[i] = v;
			}
			
			myAddListener();
		}
	};

 	GetXmlHttpObject = function() {
		xmlHttp = null;
		url = "W10PMediaPlaylist.xml";
		try {
			if ( window.XMLHttpRequest ) {
				xmlHttp = new XMLHttpRequest();
			}
			else if ( window.ActiveXObject ) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch( e ) {
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
			}
		} catch( er ) {
			try {
				if ( window.createRequest ) {
					xmlHttp = window.createRequest();
				}
			} catch( err ) {
				xmlHttp = null;
			}
		}
		if ( xmlHttp !== null ) {
			xmlHttp.onreadystatechange = stateChange;
			xmlHttp.open("GET", url, true);
			xmlHttp.send( null );
		} else {
			alert("\nYour browser does not support AJAX Request!");
		}
	};