$(document).ready(function(){
	carousel.init();
});

var carousel = {
	self : this,
	points : [],
	init : function(that) {
		
		// set up the carousels
		carousel.newCarousel('#gallery',1,1);
		carousel.newCarousel('#bottomGallery',3,3);
	},
	
	bindNavEvents: function(a, root, scrollNum) {
		root = $(root + "Wrapper").parent().parent();
		//make the colored circle properly show which set we're showing
		$('.carouselBulletOn', root).removeClass('carouselBulletOn'); // remove the current highlighted circle
		
		var slideNum = (a[0].className.replace('galleryItem', '') / scrollNum); // figure out the index of the first slide.
		$('.carouselNav .carouselBullet', root).eq(slideNum).addClass('carouselBulletOn');
	},

	newCarousel: function(domElement, scrollNum, visibleNum){
		// this function sets up a new jCarouselLite Carousel.
		
		//create button array
		var buttonArray = [];
		var dotNavs = $('.carouselNav .carouselBullet',$(domElement + "Wrapper").parent().parent());
		dotNavs.each(function(a){
			buttonArray[a*visibleNum] = dotNavs[a];
		});
		
		// initialize the carousel
		$(domElement).jCarouselLite({
	    	btnNext: domElement + 'Wrapper .carouselNext',
	    	btnPrev: domElement + 'Wrapper .carouselPrev',
			btnGo: buttonArray,
			afterEnd: function(a) {
				carousel.bindNavEvents(a, domElement, scrollNum);
			},
	    	visible: visibleNum,
	    	scroll: scrollNum,
			start: 0
		});
	
	}
};