(function ($) {
	$(function () {
		var $primaryContent	= $('#primaryContent');
		var $productLister	= $('div.product-lister', $primaryContent);
		// only do the sliding if there is something to slide
		if ($productLister.length) {
			$primaryContent.css('overflow', 'hidden');
			var $productListContainer	= $('div.product-list-container', $productLister);
			var $productList			= $('ul.product-list', $productListContainer);
			var $productThumbnail		= $('li', $productList);
			var $productThumbnailLink	= $('a', $productThumbnail);
			var $currentThumbnail		= $productThumbnailLink.filter('.current');
			var $productScrollPrevious	= $('<a class="arrow previous" href="#" title="See More Products">Previous</a>');
			var $productScrollNext		= $('<a class="arrow next" href="#" title="See More Products">Next</a>');
			var slideAmount				= 1 * $productThumbnail.outerWidth(true);		// Number of slides to move * width of individual slides
			var viewableArea			= $productListContainer.width() - slideAmount;	// How big is our viewable area?
			var enoughToSlide			= $productThumbnail.length * slideAmount > viewableArea + slideAmount;
			// Initialization function (add our new elements, attach handlers, update CSS)
			var productListerInit = function () {
				if (enoughToSlide) {
					$productLister
						.append($productScrollPrevious.bind('click', slideLister))
						.append($productScrollNext.bind('click', slideLister));
				}
				$productListContainer.css({
					 'height'	: ($productThumbnail.height() + 30) + 'px'
					,'margin'	: '0 15px'
					,'overflow'	: 'hidden'
					,'position'	: 'relative'
				});
				$productList.css({
					 'height'	: ($productThumbnail.height() + 30) + 'px'
					,'margin'	: enoughToSlide ? '0' : '0 auto'
					,'overflow'	: 'hidden'
					,'position'	: enoughToSlide ? 'absolute' : 'relative'
					,'width'	: ($productThumbnail.length * $productThumbnail.outerWidth(true)) + 'px'
				});
				if ($.browser.msie && $.browser.version == '6.0') {
					$primaryContent.css({
						 'padding'	: $productList.height() + 'px 0 0 20px'
						,'position'	: 'relative'
					});
					$productLister.css({
						 'left'		: 0
						,'position'	: 'absolute'
						,'top'		: 0
					});
					if ($primaryContent.height() < 200) {
						$primaryContent.height(0); // hasLayout
					}
				}
				$productScrollPrevious.data('slideProperties', {
					 'slideAmount'	: slideAmount
					,'slideLimit'	: 0
					,'shouldSlide'	: 'currentOffset'
				});
				$productScrollNext.data('slideProperties', {
					 'slideAmount'	: -slideAmount
					,'slideLimit'	: $productList.width() - slideAmount - viewableArea
					,'shouldSlide'	: 'Math.abs(currentOffset)'
				});
				$productThumbnailLink.append($('<img class="arrow" src="/elements/images/shop/grayDownwardArrow.gif" alt="" />'));
				// if there is a currently selected item and it is out of the viewable area, scroll it into view
				if ($currentThumbnail.length) {
					var index = $productThumbnailLink.index($currentThumbnail);
					if (index * slideAmount > viewableArea) {
						$productList.css({'margin-left' : -index * slideAmount});
					}
				}
			};
			// Handle the sliding of the list
			var slideLister = function (e) {
				var currentOffset	= parseInt($productList.css('margin-left'));
				var $arrow			= $(e.target);
				var arrowData		= $arrow.data('slideProperties');
				var slideStep		= arrowData.slideAmount;
				var slideLimit		= arrowData.slideLimit;
				var shouldSlide		= eval(arrowData.shouldSlide) < slideLimit;
				if (shouldSlide) {$productList.css({'margin-left' : (currentOffset + slideStep)});}
				e.preventDefault();
			};
			// Start 'er up!
			productListerInit();
		}
		// function that returns the outer margins of an element individually, as well as "axis combinations"
		// thisMargin is a specific property you want to get back. if undefined, it returns all of the margins in an object
		// (implemented as an IE6 fix, but not a horrible idea...)
		function _getListerOffset(element, thisMargin) {
			var $this	= $(element);
			var margins	= {};
			margins.left	= parseInt($this.css('margin-left'));
			margins.right	= parseInt($this.css('margin-right'));
			margins.top		= parseInt($this.css('margin-top'));
			margins.bottom	= parseInt($this.css('margin-bottom'));
			margins.xAxis	= margins.left + margins.right;
			margins.yAxis	= margins.top + margins.bottom;
			if (typeof thisMargin != 'undefined') {
				return margins[thisMargin];
			}
			else {
				return margins;
			}
		}
	});
})(jQuery);