var prevNextButtonsActive;

var imageConfig = {
	galleryid: 'imageCarousel',
	beltclass: 'belt',
	panelclass: 'carouselPanel',
	autostep: {enable:true, moveby:1, pause:8000},
	panelbehavior: {speed:300, wraparound:true, persist:false},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['', 0, 0], rightnav: ['', 0, 0]},		
	statusvars: ['firstPanel', 'lastPanel', 'numPanels'],
	contenttype: ['inline'],
	onslide: function(){
		updateControls(firstPanel - 1, lastPanel - 1, numPanels);
	}
}

stepcarousel.setup(imageConfig);

$(document).ready(function()
{
	setupCarousel();
});

function setupCarousel(numPanels)
{
	var numPanels = $( '#' + imageConfig.galleryid + ' .' + imageConfig.panelclass ).length;
	$("#imageControls .buttons").append('<div class="button" id="prevButton"><a href="#" title="Previous">Prev</a><span>Prev</span></div>');
	for (var i=1; i<=numPanels; i++) {
		$("#imageControls .buttons").append('<div class="button"><a href="#">' + i + '</a><span>' + i + '</span></div>');
	}
	$("#imageControls .buttons").append('<div class="button" id="nextButton"><a href="#" title="Next">Next</a><span>Next</span></div>');
	// $("#imageControls .buttons").append('<span id="currentImage"></span>&nbsp;of ' + numPanels);
	$("#imageControls .buttons .button").hide();

	if (numPanels > 1)
	{
		$("#imageControls .buttons .button a").each(function(i) {
			if( i > 0 && i <= numPanels ) {
				var title = $( '#' + imageConfig.galleryid + ' .' + imageConfig.panelclass ).eq(i-1).find('h3').eq(0).text();
				$(this)
					.attr('title', title)
					.click(function(){
						stepcarousel.stepTo(imageConfig.galleryid, i);
						return false;
					});
			}
		});
		$("#nextButton a").click(function(){
			stepcarousel.stepBy(imageConfig.galleryid, 1);
			return false;
		});
		$("#prevButton a").click(function(){
			stepcarousel.stepBy(imageConfig.galleryid, -1);
			return false;
		});
		prevNextButtonsActive = true;
	}
	else
	{
		prevNextButtonsActive = false;
	}
	
	updateControls(0,0,numPanels);
}

function updateControls(firstIndex, lastIndex, totalItems)
{
	// var caption = $(".imagePanel:eq(" + firstIndex + ") img").attr("alt");
	// $("#imageControls .caption").html(caption);
	// $("#currentImage").html(firstIndex + 1);
	// $(".thumb a").removeClass("current");
	// $(".thumb a").eq(firstIndex).addClass("current");

	if (prevNextButtonsActive)
	{
		// $("#imageControls .buttons .button").show();
		$("#imageControls .buttons .button").each(function(i) {
			if( i > 0 && i <= numPanels ) {
				$(this).show();
				if(i == firstIndex + 1) {
					$(this).find('a').hide();
					$(this).find('span').show();
				} else {
					$(this).find('a').show();
					$(this).find('span').hide();
				}
			}
		});
		if (imageConfig.panelbehavior.wraparound)
		{
			$("#prevButton a, #nextButton a").show();
			$("#prevButton span, #nextButton span").hide();
		}
		else 
		{
			if (firstIndex > 0)
			{
				$("#prevButton a").show();
				$("#prevButton span").hide();
			}
			else
			{
				$("#prevButton a").hide();
				$("#prevButton span").show();
			}
			
			if ( lastIndex < (totalItems - 1) )
			{
				$("#nextButton a").show();
				$("#nextButton span").hide();
			}
			else
			{
				$("#nextButton a").hide();
				$("#nextButton span").show();
			}
		}
	}
	else
	{
		$("#prevButton, #nextButton").hide();
	}
	
}

