$(function() {
	/* ---------------------------------------------------------------------- */
	/* Scroll to different solutions
	/* ---------------------------------------------------------------------- */

	// set only first solution in each top list to show
	$('.top_lists').find('.related_solutions .solutions').each(function() {
		var quantity = $(this).find('div.solution').length;
		var width_each = $('.top_list').innerWidth();
		$(this).width(quantity * width_each);
	});
	
	// set up arrows
	$(' \
		<div class="select_solution"> \
			<img src="/images/views/catalog_home/top_list_prev.jpg" alt="View Last Solution" /> \
			<img src="/images/views/catalog_home/top_list_next.jpg" alt="View Next Solution" /> \
		</div>')
		.insertAfter('.top_lists .top_list .heading .type');
	
	// go through each top list and add the scrollers
	var i = 0;
	$('.top_lists').find('.related_solutions').each(function() {		
		$(this).parent().attr('i', i);
		
		var $prev = $('.top_list[i=' + i + '] .select_solution img:eq(0)'),
			$next = $('.top_list[i=' + i + '] .select_solution img:last'),
			$items = $(this).find('.solution');
			
		// start out with left not clickable
		$prev.attr('src','/images/views/catalog_home/top_list_prev_hover.jpg');
		
		$(this).serialScroll({
			items: 		'.solution',
			start: 		0, 		//as we are centering it, start at the 2nd
			duration: 	900,
			force: 		true,
			stop: 		true,
			lock: 		false,
			cycle: 		false, 	//don't pull back once you reach the end
			jump: 		false, 	//click on the images to scroll to them
			onBefore:function( e, elem, $pane, $items, pos ) {
				$prev.add($next).show();
				if(pos == 0) {
					$prev.attr('src','/images/views/catalog_home/top_list_prev_hover.jpg');
				} else if (pos == $items.length - 1) {
					$next.attr('src','/images/views/catalog_home/top_list_next_hover.jpg');
				} else {
					$prev.attr('src','/images/views/catalog_home/top_list_prev.jpg');
					$next.attr('src','/images/views/catalog_home/top_list_next.jpg');
				}
			}
		 });
		i++;
	});


	// add trigger action to the arrow images
	$('.top_list').find('.select_solution img:eq(0)').each(function() {
		$(this).click(function() {
			$(this).parent().parent().parent().find('.related_solutions').trigger('prev');
			
		})
	})
	$('.top_list').find('.select_solution img:eq(1)').each(function() {
		$(this).click(function() {
			$(this).parent().parent().parent().find('.related_solutions').trigger('next');
		})
	})
})