$(function() {
		
			var $tabs = $(".carousel").tabs({ fx: { opacity: 'toggle', duration: 'slow' } }).tabs('rotate', 4000);
			
			$(".fragment a").hover(function() {
				$(this).prev().addClass("over");
			}, function() {
				$(this).prev().removeClass("over");
			});
		
		});
		function mycarousel_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);
			});
		
			jQuery('.jcarousel-control a').bind('click', function() {
				carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
				return false;
			});
		};
// it will append class="selected" into <a>
// <a href="#">1</a> to <a href="#" class="selected">1</a>
function highlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","selected");
};
// it will remove last selected slide from <a>
// <a href="#" class="selected">1</a> to <a href="#">1</a>
function removehighlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","selected");
};		
		jQuery(document).ready(function() {
			jQuery('.imageSlider').jcarousel({
				scroll: 1,
				buttonNextHTML: null,
				buttonPrevHTML: null,
				itemVisibleInCallback:  highlight,
				itemVisibleOutCallback: removehighlight, 
				initCallback: mycarousel_initCallback
			});
		});