$(function () {
	
	var timeout = 0;
	
	function nextitem() {
		timeout = setTimeout(function () {
			var $sel = $number.find('.selected');
			var $nex = $sel.next();
			if ($nex.is('span')) {
				$nex.trigger('click', [true]);
			}
			else {
				$numbers.eq(0).trigger('click', [true]);
			}
		}, $topspot.attr('data-info') || 5000);
	}
	
	var $topspot = $('.topspot-1');
	var $items = $topspot.find('.item');
	var $number = $topspot.find('.number');
	
	// creating numbers
	for (var i = 0, l = $items.size(); i < l; i++) {
		$('<span>')
			// .html(i+1)
			.appendTo($number);
	}
	$numbers = $number.find('span');
	$numbers.each(function (i) {
		$(this).bind('click', function (e, _auto) {
			// console.log('show item : ' + i);
			clearTimeout(timeout);
			$numbers.removeClass('selected');
			$(this).addClass('selected');
			$items.addClass('dnone');
			
			var $item = $items.eq(i);
			var $titledesc = $item.find('.titledesc');
			
			$titledesc.stop();
			$item.stop();
			
			$titledesc.css('visibility', 'hidden');
			$item.removeClass('dnone');
			$item.css('opacity', 0);
			$item.stop().animate(
				{opacity: 1},
				{
					complete: function () {
						var titledescheight = $titledesc.outerHeight();
						$titledesc.css('bottom', '-' + titledescheight + 'px');
						$titledesc.css('visibility', 'visible');
						$titledesc.stop().animate({'bottom': 0}, 500);
					}
				}
			);
			
			if (_auto) {
				nextitem();
			}
			
		});
	});
	
	$topspot
		.bind('mouseenter', function () {
			clearTimeout(timeout);
		})
		.bind('mouseleave', function () {
			nextitem();
		});
	
	$numbers.eq(0).trigger('click', [true]);
		
});

$(function () {
	
	var $topspot = $('.topspot-3');
	var $items = $topspot.find('.item');
	var icnt = $topspot.attr('data-info') || 4;
	var $number = $topspot.find('.number');
	var $next = $topspot.find('.next');
	var $prev = $topspot.find('.prev');
	
	for (var i = 0; i < icnt; i++) {
		$items.eq(i).removeClass('dnone');
	}
	
	$items.each(function (i) {
		var $item = $(this);
		var $photo = $item.find('.photo');
		var $titledesc = $item.find('.titledesc');
		var $more = $item.find('.more');
		
		$photo.bind('click', function (e) {
			$items.removeClass('selected');
			$item.addClass('selected');
			var $t = $titledesc.clone();
			var $m = $more.clone();
			$number.stop();
			$number.css('opacity', 0);
			$number.html('');
			$t.appendTo($number);
			$m.appendTo($number);
			$number.animate({opacity: 1});
		});
	});
	
	$items.eq(0).find('.photo').trigger('click');
	
	$next
		.bind('check', function () {
			$next.addClass('dnone');
			
			var q = $topspot.find('.item:not(.dnone):last').next();
			if(q.is('.item')) {
				$next.removeClass('dnone');
			}
		})
		.bind('click', function () {
			var start = $topspot.find('.item').index($topspot.find('.item:not(.dnone):first'));

			for (var i = 0; i < start + icnt; i++) {
				$topspot.find('.item').eq(i).addClass('dnone');
			}

			for (var i = start + icnt; i < start + icnt + icnt; i++) {
				$topspot.find('.item').eq(i)
					.stop()
					.css('opacity', 0)
					.removeClass('dnone')
					.animate(
						{ opacity: 1 },
						{ duration: 700 }
					);
			}
			
			$topspot.find('.item:not(.dnone):first .photo').trigger('click');
			
			$next.trigger('check');
			$prev.trigger('check');
		});
		
	$prev
		.bind('check', function () {
			$prev.addClass('dnone');
			
			var q = $topspot.find('.item:not(.dnone):first').prev();
			if(q.is('.item')) {
				$prev.removeClass('dnone');
			}
		})
		.bind('click', function () {
			var start = $topspot.find('.item').index($topspot.find('.item:not(.dnone):first'));
			
			for (var i = 0; i < start + icnt; i++) {
				$topspot.find('.item').eq(i)
					.addClass('dnone')
					.css('opacity', 0);
			}
			
			for (var i = start - icnt; i < start; i++) {
				$topspot.find('.item').eq(i)
					.removeClass('dnone')
					.stop()
					.animate(
						{ opacity: 1 },
						{ duration: 700 }
					);
			}
			
			$topspot.find('.item:not(.dnone):first .photo').trigger('click');
			
			$next.trigger('check');
			$prev.trigger('check');
		});
		
	$next.trigger('check');
	
});