/* jsquery scrollable wrapper functions */

function makeScrollable(wrapper, scrollable){

	// Get jQuery elements
	var wrapper = $(wrapper), scrollable = $(scrollable);
	
	// Hide images until they are not loaded
    scrollable.hide();
	var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
	
	// Set function that will check if all images are loaded
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;

		// Counts number of images that are succesfully loaded
		images.each(function(){
			if (this.complete) completed++;	
		});
			
		if (completed == images.length){
			clearInterval(interval);
			// Timeout added to fix problem with Chrome
			setTimeout(function(){
					
				loading.hide();
				// Remove scrollbars	
				wrapper.css({overflow: 'hidden'});						
				
				scrollable.slideDown('slow', function(){
					enable();	
				});					
			}, 1000);	
		}
	}, 100);
	
	function enable(){			
		// height of area at the top at bottom, that don't respond to mousemove
		var inactiveMargin = 100;
		// Cache for performance
		var wrapperWidth = wrapper.width();
		var wrapperHeight = wrapper.height();

		// Using outer height to include padding too
		var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
		// Do not cache wrapperOffset, because it can change when user resizes window
		// We could use onresize event, but it's just not worth doing that
		// var wrapperOffset = wrapper.offset();
	
		//When user move mouse over menu
		wrapper.mousemove(function(e){
		var wrapperOffset = wrapper.offset();
		// Scroll menu
		var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
	
		if (top < 0){
		top = 0;
		}

		scrollable.show();
		wrapper.scrollTop(top);
		});
	}
}
	
/* curtain scrollfunctions */

$(document).ready(function() {	

	$.get("xml_files/episodes.txt",function(data){
		parseVideoXml(data);
		
		counter = 0;

		// Build an HTML string

		myHTMLOutput = '';
		// Run the function for each student tag in the XML file

		for (counter in videoShortName) {

			// Build row HTML data and store in string
			
			if (videoType[counter].toUpperCase() == 'EPISODE') {
				mydata = BuildVideosHTML(counter);

				myHTMLOutput = myHTMLOutput + mydata;
			}
		};
		
		if (myHTMLOutput == '') {
			makeVisibility(document.getElementById("coming_soon_episode"));
		} else {

			myHTMLOutput = '<ul class="episode_images_list">' + myHTMLOutput
			myHTMLOutput += '</ul>'
		}
		// Update the DIV called Content Area with the HTML string

		$(".episode_images").append(myHTMLOutput); 


		//Get our elements for faster access and set overlay width
		var div = $('div.episode_images'),
			ul = $('ul.episode_images_list'),
			ulPadding = 15;
		
		//Get menu width
		var divWidth = div.width();
		
		//Remove scrollbars	
		div.css({overflow: 'hidden'});
		
		//Find last image container
		var lastLi = ul.find('li:last-child');

		//When user move mouse over menu
		div.mousemove(function(e){
			//As images are loaded ul width increases,
			//so we recalculate it each time
			var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
			var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
			div.scrollLeft(left);
		});
	});

	$(".leftcurtain").stop().animate({width:'60px'}, 0 );
	$(".rightcurtain").stop().animate({width:'60px'},0 );
});	

/* Build Videos List */
 
function BuildVideosHTML(arrayPosition){	
	// Build HTML string and return
	
	output = '';
	
	if (videoThumbNail[arrayPosition] != '') {
		output = '<li><a onclick="BuildSelectedEpisodeHTML(';
		output += arrayPosition+")"+'"';
		output += ' onmouseover="BuildEpisodesTitle('+"'"+videoShortName[arrayPosition]+' - '+videoLongName[arrayPosition]+"'"+');"';
		output += ' onmouseout="BuildEpisodesTitle('+"''"+');"';
		output += '><img src="';
		output += videoThumbNail[arrayPosition];
		output += '" alt="';
		output += '" /></a></li>';
	}
	
	return output;
}

/* Build Episode Title */
 
function BuildEpisodesTitle(videoTitle){	

	$("#episode_image_title").empty();

	myHTMLOutput = '<p>' + videoTitle + '</p>';

	$("#episode_image_title").append(myHTMLOutput);

/*	makeVisibility($("#episode_image_title"));*/
}

/* Build Episode Videos String */
 
function BuildEpisodesVideosHTML(arrayPosition){	

	myHTMLOutput = '';

	myHTMLOutput += BuildSelectedVideoListHTML(arrayPosition,videoShortName[arrayPosition]+' - '+videoLongName[arrayPosition]);

	videoArraySize = videoShortName.length - 1;

	if (arrayPosition < videoArraySize) {		
		videoStartCounter = arrayPosition + 1;

		for (videoCounter=videoStartCounter;videoCounter<=videoArraySize;videoCounter++) {
			if (videoType[videoCounter].toUpperCase() == 'EPISODE') {
				videoCounter = videoArraySize + 1;
			} else {
				myHTMLOutput += BuildSelectedVideoListHTML(videoCounter,videoShortName[videoCounter]+' - '+videoLongName[videoCounter]);
			}
		}
	}
	
//	$("#videos_list").empty();
	$("#videos_list_container").empty();

	if (myHTMLOutput == '') {
		return;
	}
	
	myHTMLOutput = '<ul id="videos_list">' + myHTMLOutput
	myHTMLOutput += '</ul>'
	
//	$("#videos_list").append(myHTMLOutput);
	$("#videos_list_container").append(myHTMLOutput);

	makeScrollable("#videos_list_container", "#videos_list");

	BuildSelectedVideoHTML(videoEmbedData[arrayPosition]);
}

/* Build Episode Videos String */
 
function BuildSelectedEpisodeHTML(arrayPosition){	
	if (arrayPosition < 0) {
		return;
	}
	// Build HTML string and insert

	myHTMLOutput = '<img src="';
	myHTMLOutput += videoThumbNail[arrayPosition];
	myHTMLOutput += '" alt=""';
	myHTMLOutput += '" />';

	$("#video_chosen").empty();
	$("#video_chosen").append(myHTMLOutput);
	$("#video_flash").empty();
	// Build HTML string and insert

	myHTMLOutput = '<p>';
	myHTMLOutput += videoShortName[arrayPosition]+' - '+videoLongName[arrayPosition];
	myHTMLOutput += '</p>';

	$("#video_chosen_episode").empty();
	$("#video_chosen_episode").append(myHTMLOutput);
	$("#video_chosen_title").empty();
	
	BuildEpisodesVideosHTML(arrayPosition);
}