$(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);
});
}
}
});