(function($) {
    $.fn.showcase = function(options) {
        var defaults = {
            animateSpeed: 5,
            topOffset: 27,
            sideOffset: 200,
            btnNext: null,
            btnPrev: null,
            imgWidth: 300,
            imgHeight: 400
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            $(this).css({ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' });

            var positions = [
                { top: $(this).height() - options.imgHeight, left: ( $(this).width() - options.imgWidth ) / 2 },
                { top: $(this).height() - options.imgHeight + options.topOffset, left: ( $(this).width() - options.imgWidth) / 2 + options.sideOffset },
                { top: $(this).height() - options.imgHeight + ( options.topOffset * 2 ), left: ( $(this).width() - options.imgWidth ) / 2 },
                { top: $(this).height() - options.imgHeight + options.topOffset, left: ( $(this).width() - options.imgWidth) / 2 - options.sideOffset }
            ];

            // gather all of the showcase items
            var items = $(this).children();

            // which image is in the center right now?
            var centerImg = 0;

            // are we current rotating? (disables next/prev)
            var duringRotate = false;

            // some functions which we'll use
            function getNext(pos) { if (++pos > items.length - 1) return 0; else return pos; }
            function getPrev(pos) { if (--pos < 0) return items.length - 1; else return pos; }
            function rotateNext() {
                if (duringRotate) {
                    return;
                }

                duringRotate = true;

                var itemC = $(items[centerImg]);
                var itemL = $(items[getPrev(centerImg)]);
                var itemR = $(items[getNext(centerImg)]);
                var itemB = $(items[getNext(getNext(centerImg))]);

                itemB.css(positions[2]).css({ zIndex: 8 }).show();
                itemC.css({ zIndex: 10 });
                itemL.css({ zIndex: 9 });
                itemR.css({ zIndex: 9 }).oneTime(400, function() { $(this).css({ zIndex: 11 }); });

                move(itemC, positions[3], 5,   null, -10, null);
                move(itemL, positions[2], 0,   0.5,  0,   0.5, function() { $(this).hide(); });
                move(itemB, positions[1], 180, 0.5,  0,   0.5);
                move(itemR, positions[0], 180, 3,    0,   1, function() { $(this).addClass('project-center').siblings().removeClass('project-center'); duringRotate = false; });

                centerImg = getNext(centerImg);
            }

            function rotatePrev() {
                if (duringRotate) {
                    return;
                }

                duringRotate = true;

                var itemC = $(items[centerImg]);
                var itemL = $(items[getPrev(centerImg)]);
                var itemR = $(items[getNext(centerImg)]);
                var itemB = $(items[getPrev(getPrev(centerImg))]);

                itemB.css(positions[2]).css({ zIndex: 8 }).show();
                itemC.css({ zIndex: 10 });
                itemR.css({ zIndex: 9 });
                itemL.css({ zIndex: 9 }).oneTime(400, function() { $(this).css({ zIndex: 11 }); });

                move(itemC, positions[1], -5,   null, 10, null);
                move(itemR, positions[2], 0,   0.5,  0,   0.5, function() { $(this).hide(); });
                move(itemB, positions[3], 180, 0.5,  0,   0.5);
                move(itemL, positions[0], 180, 3,    0,   1, function() { $(this).addClass('project-center').siblings().removeClass('project-center'); duringRotate = false; });

                centerImg = getPrev(centerImg);
            }

            function move(item, dest, angleA, lengthA, angleB, lengthB, callback) {
                var bezierPath = {
                    start: {
                        x: item.position().left,
                        y: item.position().top,
                        angle: angleA
                    },
                    end: {
                        x: dest.left,
                        y: dest.top,
                        angle: angleB
                    }
                };

                if (lengthA != null) { bezierPath.start.length = lengthA; }
                if (lengthB != null) { bezierPath.end.length = lengthB; }

                item.stop().animate({ path: new $.path.bezier(bezierPath) }, { duration: 1000, complete: callback });
            }

            function setupLoading(item) {
//                $('img.project-image', item).hide().load(function() {
//                    $(this).fadeIn();
//                });
            }

            // hide all of them
            items.hide().css({ position: 'absolute' });

            // setup our buttons
            if (options.btnNext) {
                $(options.btnNext).click(rotateNext);
            }

            if (options.btnPrev) {
                $(options.btnPrev).click(rotatePrev);
            }

            // setup the center image
            var item = $(items[centerImg]);
            item.css(positions[0]).css({ zIndex: 11 }).show().addClass('project-center');
            setupLoading(item);

            // setup the left image
            var item = $(items[getPrev(centerImg)]);
            item.css(positions[3]).css({ zIndex: 10 }).show();
            setupLoading(item);

            // setup the right image
            var item = $(items[getNext(centerImg)]);
            item.css(positions[1]).css({ zIndex: 10 }).show();
            setupLoading(item);
        });
    }
})(jQuery);