$(function () {
	
	var timeout = 0;
	
	function nextitem() {
		var _t = 10000;
		if ($topspot.attr('data-info')) {
			if ($topspot.attr('data-info') > 999) {
				_t = $topspot.attr('data-info');
			}
		}
		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]);
			}
		}, _t);
	}
	
	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 = parseInt($topspot.attr('data-info'), 10) || 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');

});