$(document).ready(function () {
	var sublistWidths = new Array();
	var numSublists = 0;
	var titleListNav = '<h3>' + $('#item-lists').attr('name') + '</h3><ul>';

	var $toSlide;
	var $slider;
	var slideRatio = 0;
	var sliderWidth = 0;


	//Adds nav links for each sublist; shows the first sublist; hides the rest
	//######################################################################
	$('#item-lists').find('.item-sublist').each(function() {
		if ($(this).find('.item').length > 0) {
			var listName = $(this).attr('name');
			
			titleListNav += '<li><a href="#' + listName + '">' + listName + '</a></li>';
			numSublists ++;
		}
		else {
			$(this).remove();
		}
	});

	titleListNav += '</ul>';
	$('#item-lists > .title-list-nav').append(titleListNav);
	
	$('#item-lists').append('<div class="left"><a href="#left" style="display:none;"></a></div>');
	$('#item-lists').append('<div class="right"><a href="#right" style="display:none;"></a></div>');
	$('#item-lists').append('<div class="scroll"><a href="#scroll" style="display:none;"></a></div>');
	$('#item-lists').find('.item > .item-info').prepend('<div class="pointer"></div>');
	//######################################################################



	//Activates the sublist tabular nav
	//######################################################################
	$('#item-lists > .title-list-nav').each(function() {
		var $links = $(this).find('a');

		$links.click(function() {
			var $link = $(this);
			var linkName = this.hash.substring(1);

			if ($link.is('.selected')) {
				return false;
			}
			
			$links.removeClass('selected');
			$link.addClass('selected');


			$('#item-lists').find('.item-sublist').each(function(i) {
				$(this).css('visibility', 'hidden');
				$(this).css('top', '-1000px');

				if ($(this).attr('name') == linkName) {
					$(this).css('top', '0');
					$(this).css('visibility', 'visible');
					$toSlide = $(this);
					slideRatio = ($toSlide.width() - sliderWidth + 3) / sliderWidth;

					//If the items have loaded, move the slider to the destination position
					if ($slider != undefined) {
						var destPos = - $toSlide.position().left / slideRatio;

						if ($toSlide.width() - sliderWidth + 3 <= 0) {
							if ($slider.css('display') != 'none') {
								$slider.hide();
								$('#item-lists > .left > a').hide();
								$('#item-lists > .right > a').hide();
							}
						}
						else {
							if ($slider.css('display') == 'none') {
								$slider.show();
								$('#item-lists > .left > a').show();
								$('#item-lists > .right > a').show();
							}
							$slider.animate( { left: destPos + 'px' }, { queue:false, duration:100, easing:'swing' } );
						}
					}

					if ($(this).position().left == 0) {
						$('#item-lists > .left > a').css('background-position', '9px -52px');
						$('#item-lists > .right > a').css('background-position', '9px 0px');
					}
					else if ($(this).position().left <= - $toSlide.width() + sliderWidth - 3) {
						$('#item-lists > .left > a').css('background-position', '9px 0px');
						$('#item-lists > .right > a').css('background-position', '9px -52px');

					}
					else {
						$('#item-lists > .left > a').css('background-position', '9px 0px');
						$('#item-lists > .right > a').css('background-position', '9px 0px');
					}
				}
			});
		});

		$links.filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
	});
	//######################################################################
	


	//Enables information about each title to be shown on mouseover
	//######################################################################
	$('#item-lists').find('.item').each(function() {

		$(this).find('a:first').mouseover(function(e) {
			
			var y = 30;
			var x = 0;
			var relPos = $(this).parent().position()['left'] + $(this).parent().parent().position()['left'];
			relPos -=  $('#item-lists').width() / 2 - 28;
			relPos += ($(this).parent().width() - 5) / 2;
			

			if (relPos <= 0) {
				x  = $(this).parent().position()['left'] + $(this).width() - 15;
			}
			else {
				x  = $(this).parent().position()['left'];
			}

			$(this).parent().find('.item-info:first').each(function() {
				$(this).addClass('show-info').fadeTo(0, 0);

				if (relPos > 0) {
					x -= $(this).width() + 10;
				}

				$(this).css('left', x + 'px').css('top', y + 'px').delay(500).fadeTo(300, 1);
			});
		});

		$(this).find('a:first').mouseleave(function() {
			$(this).parent().find('.item-info').clearQueue().stop().removeClass('show-info');
		});
	});
	//######################################################################




	//Called from the $(window).load function, this preps the slider and arrows to work.
	//######################################################################
	function startSlider() {
		$('#item-lists').each(function () {						
			$('#item-lists > .left > a').click(function(e) { e.preventDefault(); });	
			$('#item-lists > .right > a').click(function(e) { e.preventDefault(); });

			$slider = $('#item-lists > .scroll > a').click(function(e) { e.preventDefault(); });
			sliderWidth = $('#item-lists > .scroll').width() - $slider.width();
			slideRatio = ($toSlide.width() - sliderWidth + 3) / sliderWidth;

			if ($toSlide.width() - sliderWidth + 3 > 0) {
				$('#item-lists > .left > a').fadeIn(500);
				$('#item-lists > .right > a').fadeIn(500);
				$slider = $('#item-lists > .scroll > a').fadeIn(500);
			}

			$slider.draggable({
				axis: 'x',
				containment: 'parent',
				drag: function(event, ui) {
					var p = ui.position.left * slideRatio;
					$toSlide.css({left: '-' + p + 'px'});
					
					if (p == 0) {
						$('#item-lists > .left > a').css('background-position', '9px -52px');
						$('#item-lists > .right > a').css('background-position', '9px 0px');
					}
					else if (p >= $toSlide.width() - sliderWidth + 0) {
						$('#item-lists > .left > a').css('background-position', '9px 0px');
						$('#item-lists > .right > a').css('background-position', '9px -52px');
					}
					else {
						$('#item-lists > .left > a').css('background-position', '9px 0px');
						$('#item-lists > .right > a').css('background-position', '9px 0px');
					}
				},
				stop: function(event, ui) {
					var p = ui.position.left * slideRatio;
					$toSlide.animate({ left: '-' + p + 'px'}, 100);
				}
			});

			
			$('#item-lists > .scroll').mousedown(function(e) {
				var p = e.clientX - $(this).offset()['left'] - ($slider.width() / 2);
				if (p < 0) {
					$slider.animate( { left: 0 + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$toSlide.animate({ left: 0 + 'px'}, { queue:false, duration:100, easing:'swing' } );
					$('#item-lists > .left > a').css('background-position', '9px -52px');
					$('#item-lists > .right > a').css('background-position', '9px 0px');
				}
				else if (p > sliderWidth) {
					$slider.animate( { left: sliderWidth + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$toSlide.animate({ left: '-' + (sliderWidth * slideRatio) + 'px'}, { queue:false, duration:100, easing:'swing' } );
					$('#item-lists > .left > a').css('background-position', '9px 0px');
					$('#item-lists > .right > a').css('background-position', '9px -52px');
				}
				else {
					$slider.animate( { left: e.clientX - $(this).offset()['left'] - ($slider.width() / 2) + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$toSlide.animate({ left: '-' + (e.clientX - $(this).offset()['left'] - ($slider.width() / 2)) * slideRatio + 'px'}, { queue:false, duration:100, easing:'swing' } );
					$('#item-lists > .left > a').css('background-position', '9px 0px');
					$('#item-lists > .right > a').css('background-position', '9px 0px');
				}
			});
			

			$('#item-lists > .left > a').mousedown(function(e) {
				var p = ($toSlide.position().left + (sliderWidth / 2));
				var sliderP = - p / slideRatio;

				if (p >= 0) {
					$toSlide.animate( { left: 0 + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$slider.animate( { left: 0 + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$('#item-lists > .left > a').css('background-position', '9px -52px');
					$('#item-lists > .right > a').css('background-position', '9px 0px');
				}
				else {
					$toSlide.animate( { left: p + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$slider.animate( { left: sliderP + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$('#item-lists > .left > a').css('background-position', '9px 0px');
					$('#item-lists > .right > a').css('background-position', '9px 0px');
				}
			});

			$('#item-lists > .right > a').mousedown(function(e) {
				var p = ($toSlide.position().left - (sliderWidth / 2));
				var sliderP = - p / slideRatio;

				if (sliderP >= sliderWidth) {
					$toSlide.animate( { left: '-' + (sliderWidth * slideRatio) }, { queue:false, duration:100, easing:'swing' } );
					$slider.animate( { left: sliderWidth + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$('#item-lists > .left > a').css('background-position', '9px 0px');
					$('#item-lists > .right > a').css('background-position', '9px -52px');
				}
				else {
					$toSlide.animate( { left: p + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$slider.animate( { left: sliderP + 'px' }, { queue:false, duration:100, easing:'swing' } );
					$('#item-lists > .left > a').css('background-position', '9px 0px');
					$('#item-lists > .right > a').css('background-position', '9px 0px');
				}
			});

		});
	}
	//######################################################################



	//Once the images are loaded determine, the width of each sublist
	//######################################################################
	$(window).load(function() {
		$('#item-lists').find('.item-sublist').each(function(i) {
			var sublistWidth = 0;
			$(this).find('.item').each(function(i) {
				sublistWidth += $(this).width() + 20;
				//Hack to hide alt tags in IE
				$(this).find('img:first').attr('title', '');
			});
	
			sublistWidths[i] = sublistWidth;
			$(this).css('width', sublistWidth);
		});
		startSlider();
	});
	//######################################################################
	

});