(function () {
    jQuery.fn.bookSlide = function () {
        var container = this
        var slides = container.children();
        var numberOfSlides = slides.length;
        var slideHight = slides.height();

        var currentPosition = 1;
        var numberOfVisible = 4;
        var isAnimating = false;

        container.wrap('<div class="slideInner"></div>').parent().css({ 'height': +(slideHight * 2) + 'px', 'overflow': 'hidden' });

        $('.slideInner').parent().append('<span class="control" id="up" ></span>');
        $('.slideInner').parent().append('<span class="control" id="down" ></span>');

        for (i = 0; i < numberOfSlides; i++) {
            (i % 2) ? $(slides[i]).addClass('right') : $(slides[i]).addClass('left');
        }

        for (i = 0; i < numberOfVisible; i++) {
            container.append($(slides[i]).clone());
        }

        $('.control').click(function () {
            if (!isAnimating) {
                if ($(this).attr('id') == 'up') {
                    if (currentPosition == 1) {
                        container.css('margin-top', -(numberOfSlides / 2 * slideHight));
                        currentPosition = numberOfSlides / 2;
                    } else { currentPosition--; }
                    slides.parent().animate({
                        'margin-top': "+=" + slideHight,
                        queue: true
                    }, "swing", function () { isAnimating = false; });
                } else if ($(this).attr('id') == 'down') {
                    if (currentPosition > numberOfSlides / 2) {
                        currentPosition = 2;
                        container.css('margin-top', "0");
                    } else { currentPosition++; }
                    container.animate({
                        'margin-top': "-=" + slideHight,
                        queue: true
                    }, "swing", function () { isAnimating = false; });
                }
                isAnimating = true;
            }
        });
    };
})(jQuery);