$(function() {
	
	// initialize scrollable together with the navigator plugin
	$("#sample-nav").scrollable({
		size:12,
		prevPage: ".sample-nav-previous",
		nextPage: ".sample-nav-next",
		disabledClass: "inactive",
		clickable: false
		}).navigator({
			navi:".sample-page-bullets"
	});
	
	$(".thumbs li").click(function() {
		
		// see if same thumb is being clicked
		if ($(this).hasClass("active")) { return; }

		var segments = $(this).attr('id').split('_');
		var sample = $('#sample-view li#sample_' + segments[1]).html();
		
		$(this).parents("div").find('#sample-view li').fadeOut("fast");
		$(this).parent().parent().parent().find('#sample-view li#sample_' + segments[1]).fadeIn("medium");

		// activate item
		$(".thumbs li").removeClass("active");
		$(this).addClass("active");

	// when page loads simulate a "click" on the first image
	});
	
});