jQuery(document).ready(function($) {
	
	// init
	var imgHeight = $('img:eq(0)').css('height');
	$('div.scrollable').animate({'height':imgHeight}, 0);
	
	var nImages = $('.items img').size();
	var naviHTML = "";
	for (i=0; i<nImages; i++) {
		naviHTML += "<a class=''><span>"+i+"</span></a>";
	}
	$('.navi').html(naviHTML);
	$('.navi a:eq(0)').addClass('active');
	
	$('.items img:eq(0)').addClass('active')
	$('div.scrollable').animate({'height':imgHeight}, 0);
	
	// loop
	function slideshow() {
		var activeImage = $('.navi a.active').text();
		activeImage = parseInt(activeImage);
		var nextImage = (activeImage < nImages-1) ?  activeImage+1 : 0;
		
		$('.navi a:eq('+nextImage+')').addClass('active');
		$('.navi a:eq('+activeImage+')').removeClass('active');
		
		$('.items img:eq('+activeImage+')').addClass('last-active');
		$('.items img:eq('+nextImage+')').css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, 500, function() {
				$('img:eq('+activeImage+')').removeClass('active last-active');
			});
	}
	
	// timer
    if (nImages > 1) {
		var timer = setInterval(slideshow, 5000);
		$('.play').addClass('mode');
	} else {
		$('.playback').html('');
	}
	
	// click
	$('.navi a').click(function() {
		clearInterval(timer);
		$('.pause').addClass('mode');
		$('.play').removeClass('mode');
		
		var clickImage = $(this).text();
		var activeImage = $('.navi a.active').text();
		clickImage = parseInt(clickImage);
		activeImage = parseInt(activeImage);
		
		if (clickImage != activeImage) {
			$('.navi a:eq('+clickImage+')').addClass('active');
			$('.navi a:eq('+activeImage+')').removeClass('active');
			
			$('.items img:eq('+activeImage+')').addClass('last-active');
			$('.items img:eq('+clickImage+')').css({opacity: 0.0})
				.addClass('active')
				.animate({opacity: 1.0}, 500, function() {
					$('img:eq('+activeImage+')').removeClass('active last-active');
				});
		} else {
			// On second click, resume slideshow
			timer = setInterval(slideshow, 5000);
			$('.play').addClass('mode');
			$('.pause').removeClass('mode');
		}
	});
	
	$('.playback .play').click(function() {
		$('.play').addClass('mode');
		$('.pause').removeClass('mode');
		timer = setInterval(slideshow, 5000);
	});
	
	$('.playback .pause').click(function() {
		$('.pause').addClass('mode');
		$('.play').removeClass('mode');
		clearInterval(timer);
	});
	
	
	
	$(function() {
		$(".post img").css("opacity","0.8");
		$(".post img").hover(function () {
			$(this).stop().animate({
				opacity: 1.0
			}, 250);
		},
		function () {
			$(this).stop().animate({
				opacity: 0.8
			}, 250);
		});
	});
	
});