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