$(document).ready(function() {

		intval = setInterval("moveImg()", 4000);
		
		$(".carousel-link").click(function(){
						switchImg(this);
		});
		
});

function switchImg(imgNum) {
	
			imgNum = $(imgNum).attr('id');
	  	imgNum = imgNum.replace("num-link-", "")
			
			var current = $("li.active");		
			var currentLink = $("a.active-link");		
			var number = $(current).attr("id");
			number = number.replace("num-", "");
			
			var clickedNum = "#num-" + imgNum
			var clickedLink = "#num-link-" + imgNum
			
			if( imgNum != number)
			{
					clearInterval(intval);
					var myHeight = $("#mycarousel li").height();
					var currentTop = myHeight * number;
					var newTop = myHeight * (imgNum - 1);
					$("#mycarousel").animate( {top:-newTop}, "fast" );
					$(current).removeClass("active");
					$(clickedNum).addClass("active");
					$(currentLink).removeClass("active-link");
					$(clickedLink).addClass("active-link");
					
					var newText = $("li.active img").attr("title");
					$("#mask p").text(newText);
					intval=setInterval("moveImg()", 4000);
			}
	
}

function moveImg() {
	
						var totalLi = $('#mycarousel li').size();
						var myHeight = $("#mycarousel li").height();
						var nextImg;
						
						var current = $("li.active");		
						var number = $(current).attr("id");
	  				number = number.replace("num-", "");
						
						var currentLink = $("a.active-link");		
						newnum = parseInt(number) + 1
						var newLink = "#num-link-" + newnum
						
						if(number < totalLi){
								$(current).removeClass("active").next().addClass("active");
								nextImg = myHeight * number;
								
								$("#mask-empty").css("display","block");
								$("#mycarousel").animate( {top:-nextImg}, "fast" );
								$("#mask-empty").animate( {opacity:0}, "normal", function(){ 
												$("#mask-empty").css("display","none"); 
												$("#mask-empty").css({opacity:1}); 
								});
								
								
								$(currentLink).removeClass("active-link");
								$(newLink).addClass("active-link");
								
						}else{
								$(current).removeClass("active");
								$("#mycarousel li:first").addClass("active");
								
								$("#mask-empty").css("display","block");
								$("#mycarousel").animate( {top:"0"}, 200 );
								$("#mask-empty").animate( {opacity:0}, "normal", function(){ 
												$("#mask-empty").css("display","none"); 
												$("#mask-empty").css({opacity:1}); 
								});
								
								$(currentLink).removeClass("active-link");
								$("#num-link-1").addClass("active-link");
						}
						
						var newText = $("li.active img").attr("title");
						$("#mask p").text(newText);
						
						

						
}