function marquee_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

// set dots...
function setDotsForMarquee(carousel, item, idx, state) 
{
	setCarouselDots('marquee', idx, 5);
	
};

// sort out 7/15/23...
function setThreeDots(id, idx) 
{
	if (idx == 7) {
		idx = 1;
	}
	
	if (idx == 15) {
		idx = 2;
	}
	
	if (idx == 23) {
		idx = 3;
	}
	
	setCarouselDots(id, idx, 3);
	
}

function setDotsForCd(carousel, item, idx, state) 
{
	// count on 7 | 15 | 23...
	if (idx == 7 || idx == 15 || idx == 23) {
		setThreeDots('cd', idx);
	}
};

function setDotsForDvd(carousel, item, idx, state) 
{
	if (idx == 7 || idx == 15 || idx == 23) {
		setThreeDots('dvd', idx);
	}
};

function setDotsForBook(carousel, item, idx, state) 
{
	if (idx == 7 || idx == 15 || idx == 23) {
		setThreeDots('book', idx);
	}
};

/**
 * function: set the points...
 * 
 * @param str id    the id of carousel
 * @param int idx   the index of item
 * @param int total total dots...
 * 
 * @return void
 */ 
function setCarouselDots(id, idx, total)
{
//	console.log('we need to change the dots for #' + id + ' to highlight on item:' + idx);
	var dotsHtml= '<ul class="dots">';	
	for (var i = 1; i <= total; i++) {
		// construct it...
		dotsHtml += '<li';
		
		if (i == idx) {
			dotsHtml += ' class="active"';
		}
		
		dotsHtml += '></li>';
	}
	
	dotsHtml += '</ul>';
	$('#dots_' + id).html(dotsHtml);
	
};// end setCarouselDots


$(document).ready(function() {
	// load first marquee by ajax...
	$('#top_marquee_container').load(baseUrl + '/Ajax/get-marquees', {rnd:1}, function (responseText, textStatus, XMLHttpRequest) {
		$('#marquee').jcarousel({ scroll: 1, auto: 7, wrap: 'last', initCallback: marquee_initCallback,
			itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForMarquee
	        }
		});	
					    
	    // other marquees...
		$('#dvd').jcarousel({ scroll: 8, itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForDvd
	        } });
		$('#cd').jcarousel({ scroll: 8, itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForCd
	        } });
		$('#book').jcarousel({ scroll: 8, itemVisibleInCallback: {
	            onAfterAnimation:  setDotsForBook
	        } });
	});
});