$(document).ready(function() {
	function highlightNo(arg) {
		var caller = arg;
		var number = caller.getCurrentID();
		if(number==0) {
			$("#previous").attr("disabled", "disabled");
			$("#next").removeAttr("disabled");
		} else {
			$("#next, #previous").removeAttr("disabled");
		}
		
		$("#counter li").removeClass("active");
		$("#counter li:eq("+(number+1)+")").addClass("active");
	}							
   mcarousel = $("#mycarousel").msCarousel({boxClass:'div.box', height:340, width:1400, callback:highlightNo, autoSlide:3000}).data("msCarousel");
   //add event on number
   $("#counter li:not('.buttons')").click(function() {
   		if(mcarousel!=undefined) {
			var no = $(this).html();
			mcarousel.goto(parseInt(no)-1);
		}
   });
   $("#counter li, #next, #previous").mouseover(function() {
   		if(mcarousel!=undefined) {
			mcarousel.pause();
		}
   });
   $("#counter li, #next, #previous").mouseout(function() {
   		if(mcarousel!=undefined) {
			mcarousel.play();
		}
   });
	$("#next").click(function() {
		mcarousel.next();
	});
	$("#previous").click(function() {
		mcarousel.previous();
	});	   
	$("#next, #previous").attr("disabled","disabled");
   
})