//this code is for the top slider with thumbnails
$(document).ready(function(){
	var carouselSelector = '#panel_item_wrapper';
	var prevButtonSelector = '#panel .panel-control-left';
	var nextButtonSelector = '#panel .panel-control-right';
	var thumbnailsSelector = '.gallery-thumbs li';
	var selectedClass = 'selected';
	var thumbsCarouselSelector = '.gallery-thumbs';
	var thumbsPrevButton = '.gallery-thumbs-buttons-left';
	var thumbsNextButton = '.gallery-thumbs-buttons-right';
	var textItemSelector = '#panel .panel-desc-wrapper';	//the textitem wrapper (element that contains paneldescs)
	
	$(carouselSelector).carousel({
		prev: $(prevButtonSelector), 
		next: $(nextButtonSelector), 
		selectors: $(thumbnailsSelector), 
		currentClass:selectedClass, 
		callback: function(i, t) {
			$(thumbnailsSelector+'.'+selectedClass).removeClass(selectedClass);
			$(thumbnailsSelector+':eq(' + i + ')').addClass(selectedClass);
			if($(textItemSelector).children(':visible').length>1) {
				$(textItemSelector).children(':visible').hide();
				$(textItemSelector).children(':first').show();
			} else {
				$(textItemSelector).children(':visible').fadeOut();
				$(textItemSelector).children(':eq(' + i + ')').fadeIn();				
			}
			
		}
	});
	$(thumbsCarouselSelector).carousel({
		prev: $(thumbsPrevButton), 
		next: $(thumbsNextButton), 
		behave: 'numeric'
	});
});