(function($) {
    $(document).ready(function() {
        var self = this,
        currentX = 0,
        padding = 10,
        $scroller = $('#scroller'),
        $scratch = $scroller.find('#scratch'),
        $cards = $scroller.find('.card'),
        cards = $cards.toArray(),
        width = $cards.outerWidth(),
        slideshow = null;
        
        $scratch.css('position', 'absolute');
        $cards.each(function() {
            $(this).css({
                position: 'absolute',
                top: 10,
                left: currentX
            });
            currentX += width + padding;
        });
        
        var moveTo = function(idx, animated) {
            var left = -(idx * (width + padding)) + zero;
            if(animated) {
                $scratch.animate({
                    left: left
                }, 'slow');
            } else {
                $scratch.css({
                    left: left
                });
            }
        }
        
        // Move the elements to their initial spot
        var zero = ($scroller.outerWidth() - width) / 2,
        currentIdx = Math.floor($cards.size() / 2),
        animating = false;
        
        this.moveLeft = function() {
            if(animating) {
                return;
            }
            
            var current = parseInt($scratch.css('left')),
            c = cards.pop(),
            $clone = $(c).clone().appendTo($scratch);
            $(c).css({
                left: -current - width -  padding - zero - padding
            });
            cards.unshift(c);
            $scratch.stop().animate({
                'left': current + width + padding
            }, function() {
                $clone.remove();
                animating = false;
            });
            animating = true;
        },
        window.moveRight = this.moveRight = function() {
            if(animating) {
                return;
            }
            
            var current = parseInt($scratch.css('left')),
            c = cards.shift(),
            $clone = $(c).clone().appendTo($scratch);
            cards.push(c);
            $(c).css({
                left: -current + ((width + padding) * cards.length) - zero
            });
            $scratch.stop().animate({
                'left': current - width - padding
            }, function() {
                $clone.remove();
                animating = false;
            });
            animating = true;
        };
        moveTo(currentIdx);
        
        $scroller.find('#leftArrow').click(function(e) {
            e.preventDefault();
            if(slideshow) {
                window.clearInterval(slideshow);
            }
            self.moveLeft();
        });
        $scroller.find('#rightArrow').click(function(e) {
            e.preventDefault();
            if(slideshow) {
                window.clearInterval(slideshow);
            }
            self.moveRight();
        });
        
        var slideshow = window.setInterval('moveRight();', 2000);
        
    });
})(jQuery);