$(function () {

	var now = 1;
	var max = $('.top_caroucel>article').length;


	$('.top_caroucel>article').each(function (i, o) {
		$('.top_caroucel .pager')
			.append(
				$('<span>')
					.attr('data-n',  (i +1))
					.text('●')
			);
	});
	$('.top_caroucel .pager>span:first-child').addClass('on');


	$('.top_caroucel>article:first-child .mask').addClass('in');

	// Handler
	$('.top_caroucel .next').click(function () {
		clearInterval(id);
		go(now + 1);
	});
	$('.top_caroucel .prev').click(function () {
		clearInterval(id);
		go(now - 1);
	});
	$('.top_caroucel span').click(function () {
		clearInterval(id);
		go($(this).attr('data-n'));
	});


	var id = setInterval(function () {
		go(now + 1);
	}, 5000);



	function go(n) {
		n = Number(n);
		console.log(now + '>' + n );

		var c = '';

		if (n < now) {
			c = 'in_l';
		} else {
			c = 'in_r';
		}
		console.log(c);

		if (n === max + 1) {
			n = 1;
		}
		if (n === 0) {
			n = max;
		}


		//$('.top_caroucel>article').removeClass('in_l').removeClass('in_r');
		$('.top_caroucel>article').css('z-index', '0');
		$('.top_caroucel>article:nth-child(' + now + ')').css('z-index', '1');
		$('.top_caroucel>article:nth-child(' + n + ')').css('z-index', '2');
		$('.top_caroucel>article:nth-child(' + n + ') .mask').removeClass('in in_r in_l');
		setTimeout(function () {
			$('.top_caroucel>article:nth-child(' + n + ') .mask').removeClass('in in_r in_l');
			$('.top_caroucel>article:nth-child(' + n + ') .bg .mask').addClass(c);
			setTimeout(function () { 
				$('.top_caroucel>article:nth-child(' + n + ') .up .mask').addClass('in_r');
			}, 400);
		}, 1);


		$('.top_caroucel .pager>span').removeClass('on');
		$('.top_caroucel .pager>span:nth-child(' + n + ')').addClass('on');
		now = Number(n);
	}
});