// This plugin must be used inside an event that will
	// only trigger after all the images are loaded.
	// window.load is the one that makes the most sense.
	// ===============================================
	/*
		// Example:
		$(document).ready(function() {
			$(window).load(function() {
				$("#tv_spot_thumbs").slidingList();
			})
		})
	*/
	

	jQuery.fn.slidingList = function(numToShow) {
		return this.each(function() {
		
			var root = $(this);
			var rootId = root.attr('id');
			$(root).addClass("slidingList");
			$(root).data('inuse', false);
			$(root).data(
				"config", {
					// endless_scroll: true,  /* Something to add later if I want to disable endless scrolling. */
					collection: $(root).find('li')
				}
			);
		
			// Get the total number of swappable items.
			var numItems = $(root).find('li').length;
		
			// Add auto Ids and classes
			$(root).find('li').each(function(itemIndex) {
				var i = itemIndex + 1;
			
				// If an item does not have an ID add an auto generted ID to it.
				var itemId = $(this).attr('id');
				if (itemId == '') {
					$(this).attr('id', String(rootId+'SwapImg'+i));
				}
			
				// Add the Ids used for quickjump ctrls.
				$(this).addClass('jb'+i);
				$(this).data('jbId', i);
			});
		
		
			// Automatic container resizing.
			$(root).find('li').each(function(intIndex) {
		
				// Size this thing relative to the largest image in the set.
				var pic = $(this).find('img');
		
				// Width
				// ===========================================================================
				pic.removeAttr("width");
				var picRealWidth = pic.width();
		
				// Check for smaller LIs
				var otherLiWidth = picRealWidth;
				var arrEls = $(this).parent().children().get();
				for (var i in arrEls) {
					otherLiWidth = $(arrEls[i]).width();
					if (otherLiWidth < picRealWidth) {
						break;
					}
				}
			
				// Set the widths if this LI is wider than at least 1 other.
				if (picRealWidth > otherLiWidth) {
				
					// Get the total margin on the element.
					var marginWidth = 0;
					// Add the elements left margin into the move distance.
					var marginLeft = Number($(this).css('margin-left').replace('px', ''));
					marginWidth = (!isNaN(marginLeft) ? marginLeft : 0);
					// Add the elements right margin into the move distance.
					var marginRight = Number($(this).css('margin-right').replace('px', ''));
					marginWidth += (!isNaN(marginRight) ? marginRight : 0);
				
				
					var arrEls = $(this).parent().children().get();
					for (var i in arrEls) {
						// Set El Width
						$(arrEls[i]).width(picRealWidth);
					
						// Set El Left Pos
						var widthStr = String(((picRealWidth + marginWidth) * i)) + 'px';
						$(arrEls[i]).css('left', widthStr);
						// alert(widthStr);	
					}
					// Set width of element container.
					var containerWidth = (picRealWidth * numToShow) + (marginWidth * numToShow);
					$(root).width(containerWidth);
				}
			
			
				// Height
				// ===========================================================================
				pic.removeAttr("height");
				var picRealHeight = pic.height();
			
				// Check for smaller LIs
				var otherLiHeight = picRealHeight;
				var arrEls = $(this).siblings().get();
				for (var i in arrEls) {
					otherLiHeight = $(arrEls[i]).height();
					if (otherLiHeight < picRealHeight) {
						break;
					}
				}
			
				// Set the heights if this LI is taller than at least 1 other.
				if (picRealHeight > otherLiHeight) {
					var arrEls = $(this).siblings().get();
					for (var i in arrEls) {
						// Set El Height
						$(arrEls[i]).height(picRealHeight);
					}
				
					// Set container height equall to the tallest image.
					$(root).height(picRealHeight);
				}
			});
			
			
			
			// Hide all but one element (randomly selected).
			// var rand = Math.ceil(Math.random() * numItems);
			// $(root).find('li:not(:nth-child('+rand+'))').hide();
			// $(root).find('li:nth-child('+rand+')').addClass('open');
		
			// Mark the starting images quick jump button.
			// jbShowClass = '.'+rootId+'-jb'+rand;
			// $(jbShowClass).addClass('open');
		
			var prevClass = '.'+rootId+'-prev';
			var nextClass = '.'+rootId+'-next';
		
			// Previous Button
			// ==================================================================
			$(prevClass).each(function() {
				var prevButton = $(this);
				var entrySelector = $(root);
			
				prevButton.bind('click', function(objEvent) {
					if (!$(entrySelector).data('inuse')) {
						// Make the navigation buttons unusable while processing the action.
						$(entrySelector).data('inuse', true);
					
						// Get the config data out of the button.
						var objConfig = $(entrySelector).data("config");
					
						// Get the first element.
						var firstItem = objConfig.collection.filter(":first-child");
					
						// Get the first elements position.
						var firstItemPos = firstItem.position();
					
						// Move the elements if the first element has not been fully moved into the viewing area yet.
						if (firstItemPos.left < 0) {
							// Move each item to the right.
							objConfig.collection.filter('li').each(function() {
								// Get the base move distance (the width of the element).
								var moveDist = Number($(this).css('width').replace('px', ''));
							
								// Add the elements left margin into the move distance.
								var marginLeft = Number($(this).css('margin-left').replace('px', ''));
								moveDist += (!isNaN(marginLeft) ? marginLeft : 0);
							
								// Add the elements right margin into the move distance.
								var marginRight = Number($(this).css('margin-right').replace('px', ''));
								moveDist += (!isNaN(marginRight) ? marginRight : 0);
							
								// Move the element.
								$(this).animate({"left": "+="+moveDist+"px"}, 170, function() {
									// Set the navigation buttons as usable again.
									$(entrySelector).data('inuse', false);
								
									// Mark that clicking the previous button would cause no movement.
									firstItemPos = firstItem.position();
									if (firstItemPos.left >= 0) {
										$(prevClass).addClass('cant_move');
									}
								});
							});
						
							// Mark that clicking the next button would now cause movement.
							$(nextClass).removeClass('cant_move');
						}
						else {
							$(entrySelector).data('inuse', false);
						}
					}
				
					// Prevent default event (form submit).
					objEvent.preventDefault();
					return false;
				});
			});
		
		
			// Next Button
			// ==================================================================
			$(nextClass).each(function() {
				var nextButton = $(this);
				var entrySelector = $(root);
			
				nextButton.bind('click', function(objEvent) {
					if (!$(entrySelector).data('inuse')) {
						// Make the navigation buttons unusable while processing the action.
						$(entrySelector).data('inuse', true);
					
						// Get the config data out of the button.
						var objConfig = $(entrySelector).data("config");
					
						// Get the first element.
						var lastItem = objConfig.collection.filter(":last-child");
					
						// Last item width
						var containerWidth = Number($(entrySelector).css('width').replace('px', ''));
					
						// Get the first elements position.
						var lastItemPos = lastItem.position();
					
						// Move the elements if the first element has not been fully moved into the viewing area yet.
						if (lastItemPos.left >= containerWidth) {
							// Move each item to the right.
							objConfig.collection.filter('li').each(function() {
								// Get the base move distance (the width of the element).
								var moveDist = Number($(this).css('width').replace('px', ''));
							
								// Add the elements left margin into the move distance.
								var marginLeft = Number($(this).css('margin-left').replace('px', ''));
								moveDist += (!isNaN(marginLeft) ? marginLeft : 0);
							
								// Add the elements right margin into the move distance.
								var marginRight = Number($(this).css('margin-right').replace('px', ''));
								moveDist += (!isNaN(marginRight) ? marginRight : 0);
							
								// Move the element.
								$(this).animate({"left": "-="+moveDist+"px"}, 170, function() {
									// Set the navigation buttons as usable again.
									$(entrySelector).data('inuse', false);
								
									// Mark that clicking the next button would cause no movement.
									lastItemPos = lastItem.position();
									if (lastItemPos.left >= 0) {
										$(nextClass).addClass('cant_move');
									}
								});
							});
						
							// Mark that clicking the previous button would now cause movement.
							$(prevClass).removeClass('cant_move');
						}
						else {
							$(entrySelector).data('inuse', false);
						}
					}
				
					// Prevent default event (form submit).
					objEvent.preventDefault();
					return false;
				});
			});
		
		});
	};