$(document).ready(function() {
   
	 	$("#carousel").hover( 
				
				function(){
							$(".arrow").css("display","block");		
							clearInterval(intval);
				},
				function() {
							$(".arrow").css("display","none");	
							intval=setInterval("moveImg()", 8000);
				
		});
		
		
		intval=setInterval("moveImg()", 8000);
		
		
		$(".next").click(function(){
						moveImg();
		});
		
		$(".prev").click(function(){
						moveImgPrev();
		});
		
	 
});

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-", "");
						
						
						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}); 
								});
								
						}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}); 
								});
						}
						
						var newText = $("li.active img").attr("title");
						$("#mask p").text(newText);

						
} 

function moveImgPrev() {
	
						var totalLi = $('#mycarousel li').size();
						var myHeight = $("#mycarousel li").height();
						var prevImg;
						
						var current = $("li.active");		
						var number = $(current).attr("id");
	  				number = number.replace("num-", "");
						
						
							if(number>1)
							{
								$(current).removeClass("active").prev().addClass("active");
								prevImg = myHeight * (number -1);
								
								prevImg = prevImg - myHeight;
								
								
								if (prevImg == 0){
									
										$("#mask-empty").css("display","block");
										$("#mycarousel").animate( {top:prevImg}, "fast" );
										$("#mask-empty").animate( {opacity:0}, "normal", function(){ 
														$("#mask-empty").css("display","none"); 
														$("#mask-empty").css({opacity:1}); 
										});
								}else{
										$("#mask-empty").css("display","block");
										$("#mycarousel").animate( {top:-prevImg}, "fast" );
										$("#mask-empty").animate( {opacity:0}, "normal", function(){ 
														$("#mask-empty").css("display","none"); 
														$("#mask-empty").css({opacity:1}); 
										});
								}
							}else{
									prevImg = myHeight * totalLi;
									prevImg -= myHeight;
									$(current).removeClass("active")
									$("#mask-empty").css("display","block");
									$("#mycarousel").animate( {top:-prevImg}, 200 );
									$("#mask-empty").animate( {opacity:0}, "normal", function(){ 
													$("#mask-empty").css("display","none"); 
													$("#mask-empty").css({opacity:1}); 
									});
									lastLi=totalLi-1
									$("#mycarousel li").eq(lastLi).addClass("active");
							}
						
						
						var newText = $("li.active img").attr("title");
						$("#mask p").text(newText);

						
}