var speakerList = "speakers/cheeseboard_xml.xml?rand="+Math.random();

$(document).ready(function () {
	var itemsToLoad = new Array();
	var priorityArray = new Array();
	var perSet = 4;
	var curSet = 0;
	var setShowing = 0;
	var sliding = false;
	
	//Load the speakers
	$.ajax({
		type: "GET",
		url: speakerList,
		dataType: "xml",
		success: loadSet
	});
	
	
	function loadSet(xml) {		
		$(xml).find('speaker').each(function(i) {
			itemsToLoad[i] = new Array();
			itemsToLoad[i][0] = $(this).attr('firstname');
			itemsToLoad[i][1] = $(this).attr('lastname');
			itemsToLoad[i][2] = $(this).attr('org');
			itemsToLoad[i][3] = $(this).attr('img');
			itemsToLoad[i][4] = $(this).attr('url');
			itemsToLoad[i][5] = $(this).attr('priority');
			itemsToLoad[i][6] = false; //Set to true when the image is loaded
		});
		
		//Put the priority speakers in a separate array
		for (var i = 0; i < itemsToLoad.length; i++) {
			if (itemsToLoad[i][5] == 'true') {
				priorityArray = priorityArray.concat(itemsToLoad.splice(i, 1));
			}
		}
		
		//Calculate the number of speaker sets
		var numSets = Math.ceil(itemsToLoad.length / perSet);
		
		//Create and display the container for the speaker sets
		if (numSets > 0) {
			var speakerRow = '<span class="left_btn"><a href=""></a></span>';
			speakerRow += '<div id="speaker_row"></div>';
			speakerRow += '<span class="right_btn"><a href=""></a></span>';
			
			$('#speaker_photos').append(speakerRow);
		}
	
		//Create and display the containers for each speaker
		for (var i = 0; i < itemsToLoad.length; i++) {
			if (i % perSet == 0) {
				curSet = Math.ceil(i / perSet);
				var speakerSet = $('<div class="speaker_set" id="speaker_set' + curSet + '"></div>');
				$(speakerSet).css('left', curSet * 410 - 5);
				$('#speaker_row').append(speakerSet);
			}
			var speaker = $('<div class="speaker" id="speaker' + i + '"></div>');
			$('#speaker_set' + curSet).append(speaker);
		}
		
		//Load the first set of speaker photos
		loadImage(0, perSet);
		
		$('#speaker_photos > .right_btn > a').css('opacity', 0.8).hover(function() {
			$(this).stop(true, false);
			$(this).fadeTo(150, 1);
		},
		function() {
			$(this).stop(true, false);
			$(this).fadeTo(150, .8);
		}).click(function(e) {
			e.preventDefault();
			if (!sliding) {
				slideRight(e);
			}
		});
			
		$('#speaker_photos > .left_btn > a').css('opacity', 0.8).hover(function() {
			$(this).stop(true, false);
			$(this).fadeTo(150, 1);
		},
		function() {
			$(this).stop(true, false);
			$(this).fadeTo(150, .8);
		}).click(function(e) {
			e.preventDefault();
			if (!sliding) {
				slideLeft(e);
			}
		});
	}
	
	
	function slideRight(btn) {
		if (!sliding) {
			sliding = true;
			$('#speaker_set' + setShowing).animate({left: -410}, 500, 'swing');
			
			if (setShowing < Math.ceil(itemsToLoad.length / perSet) - 1) {
				setShowing ++;
			}
			else {
				setShowing = 0;
			}
			
			$('#speaker_set' + setShowing).css('left', 410);
			$('#speaker_set' + setShowing).animate({left: -5}, 500, 'swing', function() {
				sliding = false;
			});
			
			loadImage(setShowing * perSet, setShowing * perSet + perSet);
		}
	}
	
	
	function slideLeft(btn) {
		if (!sliding) {
			sliding = true;
			$('#speaker_set' + setShowing).animate({left: 410}, 500, 'swing');
			
			if (setShowing == 0) {
				setShowing = Math.ceil(itemsToLoad.length / perSet) - 1;
			}
			else {
				setShowing --;
			}
			
			$('#speaker_set' + setShowing).css('left', -410);
			$('#speaker_set' + setShowing).animate({left: -5}, 500, 'swing', function() {
				sliding = false;
			});
			
			loadImage(setShowing * perSet, setShowing * perSet + perSet);
		}
	}
	
	
	function loadImage(curImage, lastImage) {
		if (curImage < lastImage) {
			if (itemsToLoad[curImage] != undefined) {
				if (itemsToLoad[curImage][6] == false) {
					var img = new Image();
					//image onload
					$(img).load(function() {
						$(this).css('display', 'none');
						
						var aBlock = $('<a></a>').attr('href', itemsToLoad[curImage][4]);
						var sBlock = $('<span></span>').attr('class', 'photo');
						
						$('#speaker' + curImage).append(aBlock);
						$('#speaker' + curImage + '> a').append(sBlock);
						$('#speaker' + curImage + '> a > .photo').append(this);						
						$('#speaker' + curImage + '> a').append(" " + itemsToLoad[curImage][0] + " " + itemsToLoad[curImage][1] + "<br /><span class='name'>" + itemsToLoad[curImage][2] + "</span>");
						
						$(this).show();
						itemsToLoad[curImage][6] = true;
						
						$('#speaker' + curImage + '> a').hover(function() {
							$(this).find('img').stop(true, false);
							$(this).find('img').fadeTo(200, .85);
						},
						function() {
							$(this).find('img').stop(true, false);
							$(this).find('img').fadeTo(200, 1);
						})
						
						// once the current loaded, trigger the next image
						loadImage(curImage + 1, lastImage);
						
					}).error(function () {
						// on error remove current
						$('#speaker' + curImage).remove();
						itemsToLoad[curImage][6] = true;
						
						// trigger the next image
						loadImage(curImage + 1, lastImage);
					}).attr({
						src: itemsToLoad[curImage][3],
						alt: itemsToLoad[curImage][0] + " " + itemsToLoad[curImage][1]
					});
				}
				else {
					loadImage(curImage + 1, lastImage);
				}
			}
		}
	}
});