$(document).ready(function(){
	var $slideList = $('.quote');
	var slideTimeIn = 500;
	var slideTimeFloat = 3000;
	var slideTimeOut = 400;
	var extraSlide = 30; /* in px */

	var $mainContent = $('#mainContent').delay(500).animate({opacity: 1}, 500, startAnimation);
	var viewportWidth = $mainContent.width();
	var viewportHeight = $mainContent.height();
	var props = [ {}, {}, {opacity:0} ];

	function startAnimation(currentSlide){
		currentSlide = (!currentSlide) ? 0 : currentSlide % $slideList.length;
		var $slide = $slideList.eq(currentSlide);
		var slideDirection = $slide.attr('data-direction');
		var gutter = null;
		$slide.css(slideDirection,0).delay(200).animate({opacity: 1}, 2000);
		// movement
		switch(slideDirection) {
			case "top":
			case "bottom":
				gutter = viewportHeight - $slide.height();
			break;
			case "left":
			case "right":
				gutter = viewportWidth - $slide.width();
			break;
			default:
		}
		if(gutter != null){
			props[0][slideDirection] = (gutter/2) + 'px';
			props[1][slideDirection] = (gutter/2 + extraSlide) + 'px';
			props[2][slideDirection] = gutter + 'px';
			$slide.animate(props[0], slideTimeIn, 'easeInOutQuad').animate(props[1], slideTimeFloat, 'easeOutQuint').animate(props[2], slideTimeOut, function(){
				startAnimation(currentSlide+1);
			});
		}
	}
});