$(document).ready(function(){
  
	$('.wrap').each(function(){
		
	  	var btn = $('.btn'),
	  			slideBox = $('.slide__box'),
	      	slide = slideBox.find('.slide__each'),
	      	slideWidth = slide.width(),
	      	slideCount = slide.length-1,
					paginationWrap = $('.pagination'),
					dot = paginationWrap.find('.pagination__dot'),
					dotCount = dot.length,
					index = $('.pagination .pagination__dot.on').index(); //initial value = 0


/*==================================================================*/


//stop slide on arrows
		btn.on({
		    mouseenter: stopCarousel,
		    mouseleave: autoCarousel
		}); 

		slideBoxInit(); // initialize of slide_box
		autoCarousel(); //auto slide function
		slideBtn(); // prev, next button function


/*==================================================================*/


// initialize of slide_box 
		function slideBoxInit(){

		//insert last slide(cloned) to very first slide (to look naturally when previous button is clicked)
			cloneSlide = slide.eq(slideCount).clone(); 
				
				//change the value of 'left', then the next slide of inserted one(originally, first one) seems like first one.
		    slideBox.css({'width':slideWidth*(slideCount+1),'left':-slideWidth});
			
			slide.eq(0).before(cloneSlide); 
		  slide.eq(slideCount).remove(); 

		} //clonedBefore END


/*==================================================================*/


//auto slide function
		function autoCarousel(){	
			autoSlide =  setInterval(function(){
					slide = slideBox.find('li'); //load new 'li' list everytime

					pagination(); //pagination will work with slide

					slideBox.animate({'left':-slideWidth*2},800,'easeOutQuart', function(){
						cloneSlide = slide.eq(0).clone(); //copy the first slide

						slide.eq(slideCount).after(cloneSlide); //insert the copied slide(cloned one) after last slide
						slide.eq(0).remove(); //remove first slide

						slideBox.css({'left':-slideWidth}); //change the distance of slideBox.animate to default
					});	
				},3500);
		} // autoCarousel END


/*==================================================================*/


//prev next buttons function
		function slideBtn(){

			btn.on('click',function(){
				if ($(this).hasClass('next')) {
					slideBox.animate({'left':-slideWidth*2},300,'easeInSine', function(){
						slide = slideBox.find('li'),
						cloneSlide = slide.eq(0).clone(); 

						slide.eq(slideCount).after(cloneSlide); 
						slide.eq(0).remove(); 

						slideBox.css({'left':-slideWidth}); 
					});	//same function with autoCarousel

			
			//the dot of pagination works when arrows are clicked
					index = $('.pagination .pagination__dot.on').index(); //index of dot.on (initial value = 0)
				  	index++;

					if (index > dotCount-1 ) {index = 0;} 
						dot.removeClass('on');
						dot.eq(index).addClass('on');
				} else {
					slideBox.animate({'left':0},300,'easeInSine', function(){
						var slide = slideBox.find('li'),
							cloneSlide = slide.eq(slideCount).clone(); 

						slide.eq(0).before(cloneSlide); 
						slide.eq(slideCount).remove(); 

						slideBox.css({'left':-slideWidth}); 
					});	

					index = $('.pagination .pagination__dot.on').index();
					index--;

					if (index < 0 ) {index = dotCount-1;}
						dot.removeClass('on');
						dot.eq(index).addClass('on');
				}
			});
		} // slideBtn END


/*==================================================================*/


//pagination
		function pagination(){
				index++;

			if (index > dotCount-1 ) {index = 0;}
				dot.removeClass('on');
				dot.eq(index).addClass('on');  
		} // pagination END


/*==================================================================*/


//오토슬라이드 멈춤
		function stopCarousel(){
		    clearInterval(autoSlide);
		 }


	});//wrap END
	
});//document END