$(function() {
	/* ---------------------------------------------------------------------- */
	/* Create a gallery of images
	/* ---------------------------------------------------------------------- */

	// show appropriate image if hash has content
	var url_hash = self.location.hash;
	if (url_hash.match(/[0-9]+/)) {
		$('img.screenshot_main.active').removeClass('active');
		$('img.screenshot_main.image_' + url_hash.match(/[0-9]+/)).addClass('active');
	}
	
	// switching between screenshots
	$('.thumbs a')
		.click(function() {
			// remove old active screenshot
			$('img.screenshot_thumb.active').removeClass('active');
			$('img.screenshot_main.active').removeClass('active');
			
			// show new screenshot
			var current = $(this).find('img:first').addClass('active').attr('class').match(/[0-9]+/);
			$('img.screenshot_main.image_' + current).addClass('active');
			
			// update the hash
			self.location.hash = '#image' + current;
			
			// don't refresh the page
			return false;
		});
	

	/* ---------------------------------------------------------------------- */
	/* Scroll to different solutions
	/* ---------------------------------------------------------------------- */

	// set only first solution in solution list to show
	$('.related_solutions .solutions').each(function() {
		var quantity = $(this).find('div.solution').length;
		var width_each = $('.related_info .more_apps').outerWidth();
		$(this).width(quantity * width_each + 200);
	});
	
	// 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 class="clear"></div> \
		</div> \
	').insertAfter('.related_info .more_apps h2:first');

	// go through each top list and add the scrollers
	var i = 0;
	$('.more_apps').find('.related_solutions').each(function() {
		$(this).parent().attr('i', i);
		
		var $prev = $('.more_apps[i=' + i + '] .select_solution img:eq(0)'),
			$next = $('.more_apps[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
	$('.more_apps').find('.select_solution img:eq(0)').each(function() {
		$(this).click(function() {
			$(this).parent().parent().parent().find('.related_solutions').trigger('prev');
		})
	})
	$('.more_apps').find('.select_solution img:eq(1)').each(function() {
		$(this).click(function() {
			$(this).parent().parent().parent().find('.related_solutions').trigger('next');
		})
	})
	
	
	
		
	// if the table is tall enough, add the toggle
	if ($('.compatibility table').height() > 250) {
		var compatibility_height = $('.compatibility table').height() + 35;
		$('.compatibility').css({
			height: 250,
			overflowY: 'hidden'
		});
		
		$('<div class="view_compatibility show">Show the full compatibility chart</div><div class="compatibility_transparency">&nbsp;</div>')
			.insertAfter('.compatibility')
			.click(function() {
				if ($('.compatibility').height() == compatibility_height) {
					// make sure the transparency shows in ie6
					$('.compatibility')
						.animate({ height: 250 }, 700, 'linear', function() {
							$('.compatibility_transparency').show().ifixpng();
							$(this).css({
								overflowY: 'hidden',
								display: 'block'
							});
							$('.view_compatibility')
								.text('Show the full compatibility chart')
								.removeClass('hide').addClass('show');
						} );
				} else {
					$('.compatibility_transparency').hide();
					$('.compatibility')
						.animate({ height: compatibility_height }, 700, 'linear', function() {
							$('.view_compatibility')
								.text('Hide the full compatibility chart')
								.removeClass('show').addClass('hide');
						}
					);
				}
			});
			
		// make sure the transparency shows in ie6
		$('.compatibility_transparency').ifixpng();
				
	};

})