$(document).ready(function(){
	//$('.carouselBullet').focus(function(){this.blur()});
	carousel.init();
});

var carousel = {
	self : this,
	points : [],
	init : function(that) {
		// horizontally center the bottom navigation buttons

		// set up the carousels
		
		///1 : Set up top carousell
		
			//create button array
			var buttonArray = [];
			var dotNavs = $('.carouselNav .carouselBullet',"#topCarousel");
			dotNavs.each(function(a){
				buttonArray[a*1] = dotNavs[a];
			});
	
			$('#gallery').jCarouselLite({
			    btnNext: '.topCarouselNext',
			    btnPrev: '.topCarouselPrev',
				btnGo: buttonArray,
				afterEnd: function(a) {
					carousel.bindNavEvents(a, '#topCarousel', 1);
				},
			    visible: 1,
				start: 0
			});

		///2 : Set up bottom gallery carousel
			
			$("#bottomGallery").jCarouselLite({
			    btnNext: ".bottomCarouselNext",
			    btnPrev: ".bottomCarouselPrev",
			    visible:4,
				scroll:2,
				start:0
			});

	},
	
	bindNavEvents: function(a, root, scrollNum) {
		
		//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');
	}

};