/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
var totalSlides;
function mycarousel_initCallback(carousel) {
	totalSlides = $("#mycarousel li").length;
    jQuery('.jcarousel-control a').bind('click', function() {
		var getIdvalue = jQuery(this).attr('id');
		var tmpthumbIdArr = getIdvalue.split("_");
		var currentlyShownthumbId = tmpthumbIdArr[1];
        carousel.scroll(jQuery.jcarousel.intval(currentlyShownthumbId));
       return false;	   
 	 });

    jQuery('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });

    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};

function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
	$('#pagination').html("Image "+idx+" of " +totalSlides);
	var thumbId = "#thumb_"+idx;
	$('.jcarousel-control a.thumbnail').removeClass('on');
	$(thumbId).addClass('on');
};

var startPosition = 1;
var urlStrg = window.location+ "";
var tmpSlideIdArr = urlStrg.split("&");
for(i=0;i<tmpSlideIdArr.length;i++){
	var keyValue = tmpSlideIdArr[i].split("=");
	if("slideId" == keyValue[0]){
		startPosition = keyValue[1];
	}
}


// Ride the carousel...
jQuery(document).ready(function() {
	
		//var currentlyShownthumbId = tmpthumbIdArr[1];

    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
		start: startPosition,
		itemVisibleInCallback: {
           onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
        },

        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
	$('.thumbnail').click(function(){
		$('.jcarousel-control a').removeClass('on');
 		$(this).addClass('on');	
	});	
});