var animating = 0;
$(function () {
    var active_index = 1;
    var $r = $('.rotator');

    var img_w = $('.small:eq(0)').width();

    var current = null;

    $('.rotator .image').each(function (i) {
        var x = img_w * i;
        $(this).css({
            position: 'absolute',
            left: x == 0 ? x : x + 7 * i
        });
        $(this).data('index', i);

    });

    $('.rotator .image').click(function () {
        if ($(this).data('index') == active_index) {
            location.href = $(this).data('href');
        }
    });

    $('.rotator .control.right').mouseenter(function (event) {
        rotateLeft();
        event.stopPropagation();
    });
    $('.rotator .control.left').mouseenter(function (event) {
        rotateRight();
        event.stopPropagation();
    });

    $('.rotator').mouseenter(function (event) {

        if (animating == 0 && current == null) {
            $('.rotator .image').each(function () {
                var index = $(this).data('index');
                if (index == active_index) {
                    current = $(this);
                    return false;
                }
            });

            grow(current);
        }

    }).mouseleave(function () {

        if (animating == 0 && current != null) {
            shrink(current);
            current = null;
        }
    });


    function grow(elem) {
        var s = elem.find('.small');
        var l = elem.find('.large');

        var lw = l.width();
        var lh = l.height();

        l.data('width', lw);
        l.data('height', lh);

        l.width(s.width() + 39);
        l.height(s.height() + 39);
        l.show();
        s.hide();

        elem.css('z-index', 20);

        animating++;
        l.animate({
            width: lw,
            height: lh,
            top: '-52px',
            left: '-46px'
        }, function () {
            animating--;
        });
    }

    function shrink(elem) {
        var s = elem.find('.small');
        var l = elem.find('.large');

        var sw = s.width();
        var sh = s.height();

        animating++;
        l.animate({
            width: sw + 39,
            height: sh + 39,
            top: '-23px',
            left: '-16px'
        }, function () {
            s.show();
            l.hide();

            l.css('width','');
            l.css('height','');
            elem.css('z-index', 1);
            animating--;
        });
    }

    function rotateLeft() {
        var ordered = {};
        var last = $('.rotator .image').length - 1;

        $('.rotator .image').each(function (i) {
            var index = $(this).data('index');
            if (index == active_index) {
                shrink($(this));
            }
            index--;
            if (index < 0) {
                index = last;
            }
            $(this).data('index', index);

            var x = index * img_w;
            animating++;
            $(this).animate({
                left: x == 0 ? x : x + 7 * index
            }, 700, 'swing', function () {
                animating--;
            });
            if (index == active_index) {
                grow($(this));
                current = $(this);
            }
        });

    }
    function rotateRight() {
        var ordered = {};
        var last = $('.rotator .image').length - 1;

        $('.rotator .image').each(function (i) {
            var index = $(this).data('index');
            if (index == active_index) {
                shrink($(this));
            }
            index++;
            if (index > last) {
                index = 0;
            }
            $(this).data('index', index);

            var x = index * img_w;
            animating++;
            $(this).animate({
                left: x == 0 ? x : x + 7 * index
            }, 700, 'swing', function () {
                animating--;
            });
            if (index == active_index) {
                grow($(this));
                current = $(this);
            }
        });

    }
});