var OPACITY_FULL  = 1;
var OPACITY_FADED = 0.48;

$(document).ready(function()
{
	// Set opacities.
	$('.scroller.fade ul a').css('opacity', OPACITY_FULL);
	$('.scroller.fade ul .tooltip .overlay').css('opacity', 0);
	$('.scroller.fade ul .tooltip .background').css('opacity', 0);
	$('.scroller.fade ul .tooltip').css('display', 'block');
	
	// Set pagers.
	$('.scroller .button.prev').attr('href', function()
	{
		var $this     = $(this);
		var $scroller = $this.parents('.scroller');
		var size      = $scroller.find('input[name=size]').val();
		return '#' + (size * -1);
	}).addClass('disabled').css('opacity', 0.5);
	
	$('.scroller .button.next').attr('href', function()
	{
		var $this     = $(this);
		var $scroller = $this.parents('.scroller');
		var size      = $scroller.find('input[name=size]').val();
		var count     = $scroller.find('input[name=count]').val();
		
		// Disable button.
		if(0 >= count - size)
			$this.addClass('disabled').css('opacity', 0.5);
			
		return '#' + (size);
	});
	
	$('.scroller.fade ul li').live('mouseover', function(e)
	{
		$this = $(this);
		$thumb = $this.find('a');
		
		$thumb.stop();
		$tooltip = $thumb.siblings('.tooltip');
		
		// Thumb.
		var startingOpacity  = $thumb.css('opacity');
		var finishingOpacity = OPACITY_FADED;
		var duration = 500 * (finishingOpacity - startingOpacity);
		duration = (duration < 0) ? duration * -1 : duration;
		$thumb.animate({opacity: finishingOpacity}, duration);
		
		if($tooltip.size() > 0)
		{
			$overlay    = $tooltip.find('.overlay');
			$background = $tooltip.find('.background');
			$overlay.stop();
			$background.stop();
			
			// Overlay.
			startingOpacity  = $overlay.css('opacity');
			finishingOpacity = 1;
			$overlay.animate({opacity: finishingOpacity}, duration);
			
			// Background.
			startingOpacity  = $background.css('opacity');
			finishingOpacity = 0.86;
			$background.animate({opacity: finishingOpacity}, duration);
		}
	});
	
	$('.scroller.fade ul li').live('mouseout', function(e)
	{
		$this = $(this);
		$thumb = $this.find('a');
		
		$thumb.stop();
		$tooltip = $thumb.siblings('.tooltip');
		
		// Thumb.
		var startingOpacity  = $thumb.css('opacity');
		var finishingOpacity = OPACITY_FULL;
		var duration = 500 * (finishingOpacity - startingOpacity);
		duration = (duration < 0) ? duration * -1 : duration;
		$thumb.animate({opacity: finishingOpacity}, duration);
		
		if($tooltip.size() > 0)
		{
			$overlay    = $tooltip.find('.overlay');
			$background = $tooltip.find('.background');
			$overlay.stop();
			$background.stop();
			
			// Overlay.
			startingOpacity  = $overlay.css('opacity');
			finishingOpacity = 0.0;
			$overlay.animate({opacity: finishingOpacity}, duration);
			
			// Background.
			startingOpacity  = $background.css('opacity');
			finishingOpacity = 0.0;
			$background.animate({opacity: finishingOpacity}, duration);
		}
	});
	
	$('.scroller .button').click(function(e)
	{
		e.preventDefault();
	});
	
	$('.scroller .button:not(.disabled)').live('click', function()
	{
		// Get scroller type, we will use this for determining what handler to call.
		$this        = $(this);
		$scroller    = $this.parents('.scroller');
		//var scrollerType = $('input[name=type]', $scroller).val();
		
		// Get direction.
		var direction = $this.hasClass('prev') ? -1 : 1;
		
		// Get offset.
		var loadOffset = $this.attr('href').substr($this.attr('href').indexOf('#') + 1);
		if(isNaN(loadOffset))
			loadOffset = 0;
		else
			loadOffset = parseInt(loadOffset);
		//var totalCount;
		//var limit = parseInt($('input[name=size]', $scroller).val());
		
		// Inject offset key value pair.
		if($('input[name=data_offset]', $scroller).size() > 0)
			$('input[name=data_offset]', $scroller).val(loadOffset);
		else
			$('input[type=hidden]:last', $scroller).after('<input type="hidden" name="data_offset" value="' + loadOffset + '" />');
			
		// Inject direction key value pair.
		if($('input[name=direction]', $scroller).size() > 0)
			$('input[name=direction]', $scroller).val(direction);
		else
			$('input[type=hidden]:last', $scroller).after('<input type="hidden" name="direction" value="' + direction + '" />');
		
		// Trigger load.
		$scroller.trigger('updatescroll');
	});
	
	$('.scroller').live('updatescroll', function()
	{
		$scroller = $(this);
		
		var totalCount;
		var scrollerType = $('input[name=type]', $scroller).val();
		var limit        = parseInt($('input[name=size]', $scroller).val());
		var direction    = parseInt($('input[name=direction]', $scroller).val());
		
		// Generate data.
		$data = $scroller.find('input[name^=data_]');
		var ajaxData = new Object();
		$data.each(function()
		{
			var key   = $(this).attr('name').substr($(this).attr('name').indexOf('data_') + ('data_').length);
			var value = $(this).val();
			ajaxData[key] = value;
		});
		
		// AJAX request dependencies.
		ajaxDependencies = ['count', 'items'];
		
		// Fade pagers out and disable them.
		$pagers = $scroller.find('.button');
		$pagers.animate({opacity: 0.5}, 500).addClass('disabled');
		
		// Get total count.
		$.ajax(
		{
			url: 'ajax/scroller_count_' + scrollerType + '.asp', 
			type: 'POST', 
			
			data: ajaxData, 
			
			dataType: 'html', 
			success: function(html)
			{
				totalCount = parseInt(html);
				
				// Update pagers - wait for both ajax functions to finish executing.
				ajaxDependencies = $(ajaxDependencies).filter(function()
				{
					return this != 'count';
				});
				if($(ajaxDependencies).size() == 0)
					togglePagers($scroller, totalCount, limit);
			}
		});
		
		// Get items.
		$.ajax(
		{
			url: 'ajax/scroller_items_' + scrollerType + '.asp', 
			type: 'POST', 
			
			data: ajaxData, 
			
			dataType: 'html', 
			success: function(html)
			{
				// Update pagers.
				
				// Update offset values.
				$pagers.attr('href', function()
				{
					var offset = this.href.substr(this.href.indexOf('#') + 1);
					if(isNaN(offset))
						offset = 0;
					else
						offset = parseInt(offset);
					return '#' + (offset + limit * direction);
				});
				
				// Update pagers - wait for both ajax functions to finish executing.
				ajaxDependencies = $(ajaxDependencies).filter(function()
				{
					return this != 'items';
				});
				if($(ajaxDependencies).size() == 0)
					togglePagers($scroller, totalCount, limit);
				
				// Inject items.
				$itemCollection     = $scroller.find('.itemCollection');
				$itemCollectionList = $scroller.find('.itemCollection ul');
				
				// Ensure width of container.
				var listWidth  = $itemCollectionList.width();
				$itemCollection.css(
				{
					width: listWidth * 2, 
					left: 0
				});
				
				// Insert at location based on direction of scrolling.
				if(direction == -1)
				{
					// Insert before needs left adjustment based on list width before it's inserted before.
					$itemCollection.css('left', listWidth * -1);
					$newList = $(html).insertBefore($itemCollectionList);
					
					// Fade items as necessary.
					if($scroller.hasClass('fade'))
					{
						$newList.find('a').css('opacity', OPACITY_FULL);
						$newList.find('.tooltip .overlay').css('opacity', 0);
						$newList.find('.tooltip .background').css('opacity', 0);
						$newList.find('.tooltip').css('display', 'block');
					}
					
					// Run animation.
					$itemCollection.animate({left: 0}, 500, 'easeInOutSine', function()
					{
						// Remove old list.
						$scroller.find('.itemCollection ul').filter(function()
						{
							return this !== $newList.get(0);
						}).remove();
						
						// Set left offset to 0.
						$itemCollection.css('left', 0);
					});
				}
				else
				{
					$newList = $(html).insertAfter($itemCollectionList);
					
					// Fade items as necessary.
					if($scroller.hasClass('fade'))
					{
						$newList.find('a').css('opacity', OPACITY_FULL);
						$newList.find('.tooltip .overlay').css('opacity', 0);
						$newList.find('.tooltip .background').css('opacity', 0);
						$newList.find('.tooltip').css('display', 'block');
					}
					
					// Run animation.
					$itemCollection.animate({left: listWidth * -1}, 500, 'easeInOutSine', function()
					{
						// Remove old list.
						$scroller.find('.itemCollection ul').filter(function()
						{
							return this !== $newList.get(0);
						}).remove();
						
						// Set left offset to 0.
						$itemCollection.css('left', 0);
					});
				}
			}
		});
	});
	
	$('.scroller').live('updatefade', function()
	{
		$scroller = $(this);
		
		var totalCount;
		var scrollerType = $('input[name=type]', $scroller).val();
		var limit = parseInt($('input[name=size]', $scroller).val());
		
		// Generate data.
		$data = $scroller.find('input[name^=data_]');
		var ajaxData = new Object();
		$data.each(function()
		{
			var key   = $(this).attr('name').substr($(this).attr('name').indexOf('data_') + ('data_').length);
			var value = $(this).val();
			ajaxData[key] = value;
		});
		
		// AJAX request dependencies.
		ajaxDependencies = ['count', 'items'];
		
		// Fade pagers out and disable them.
		$pagers = $scroller.find('.button');
		$pagers.animate({opacity: 0.5}, 500).addClass('disabled');
		
		// Get total count.
		$.ajax(
		{
			url: 'ajax/scroller_count_' + scrollerType + '.asp', 
			type: 'POST', 
			
			data: ajaxData, 
			
			dataType: 'html', 
			success: function(html)
			{
				totalCount = parseInt(html);
				
				// Update pagers - wait for both ajax functions to finish executing.
				ajaxDependencies = $(ajaxDependencies).filter(function()
				{
					return this != 'count';
				});
				if($(ajaxDependencies).size() == 0)
					togglePagers($scroller, totalCount, limit);
			}
		});
		
		// Get items.
		$.ajax(
		{
			url: 'ajax/scroller_items_' + scrollerType + '.asp', 
			type: 'POST', 
			
			data: ajaxData, 
			
			dataType: 'html', 
			success: function(html)
			{
				// Update pagers.
				
				// Update offset values.
				$pagers.filter('.prev').attr('href', '#' + (limit * -1));
				$pagers.filter('.next').attr('href', '#' + limit);
				
				// Update pagers - wait for both ajax functions to finish executing.
				ajaxDependencies = $(ajaxDependencies).filter(function()
				{
					return this != 'items';
				});
				if($(ajaxDependencies).size() == 0)
					togglePagers($scroller, totalCount, limit);
				
				// Fade out current set of items.
				$itemCollectionList = $scroller.find('.itemCollection ul');
				
				$itemCollectionList.animate({opacity: 0}, 250, 'easeInOutSine', function()
				{
					$itemCollectionList.remove();
					
					// Inject items.
					$itemCollection = $scroller.find('.itemCollection');
					$itemCollection.html($(html).css('opacity', '0'));
					
					// Fade items as necessary.
					$newList = $itemCollection.find('ul:first');
					if($scroller.hasClass('fade'))
					{
						$newList.find('a').css('opacity', OPACITY_FULL);
						$newList.find('.tooltip .overlay').css('opacity', 0);
						$newList.find('.tooltip .background').css('opacity', 0);
						$newList.find('.tooltip').css('display', 'block');
					}
					
					// Fade in new items.
					$newList.animate({opacity: OPACITY_FADED}, 250, 'easeInOutSine');
				});
				
				// Ensure width of container.
				var listWidth  = $itemCollectionList.width();
				$itemCollection.css(
				{
					width: listWidth * 2, 
					left: 0
				});
			}
		});
	});
});

function togglePagers($scroller, count, limit)
{
	$pagers = $scroller.find('.button');
	
	// Re-enable pagers.
	$enablePagers = $pagers.filter(function()
	{
		var offset = this.href.substr(this.href.indexOf('#') + 1);
		if(isNaN(offset))
			offset = 0;
		else
			offset = parseInt(offset);
		return offset >= 0 && offset < Math.max(count - limit, count);
	});
	$enablePagers.removeClass('disabled').animate({opacity: 1.0}, 400);
}