jQuery.fn.animationWrapper = function (options) {
    var defaults = {
        numberOfMovers: 7
    };
    var options = $.extend(defaults, options);
    var i = 0;
    for (i = 0; i <= (options.numberOfMovers - 1); i++) {
        var bgCol;
        if (i % 3) { bgCol = 'white' } else { bgCol = '#330000' } 
        this.append('<div class="oCss" style="background-color:' + bgCol + '">');
        if (i == 6) {
            $('.oCss').each(function (index) {
                $(this).movingBlocks(index);
            });
        }
    };
};


jQuery.fn.movingBlocks = function (index) {
    var t = this
    var startMargin = Math.floor(Math.random() * 780);
    var animWrapper = $('#animationWrapper');

    t.width((Math.floor(Math.random() * 80) + 10));
    t.css({ 'opacity': Math.floor(Math.random() * 0.9) + 0.3 });
    t.position({
        "of": animWrapper,
        "at": "left top",
        "my": "left top",
        "offset": startMargin + " 0"
    });

    function repeatLoopLeft() {
        t.animate({ left: '+=' + ((animWrapper.width() - t.width()) - startMargin) + 'px' }, Math.floor(Math.random() * 6700) + 3500, function () {
            startMargin = 0;
            $(t).animate({ left: '-=' + (animWrapper.width() - t.width()) + 'px' }, Math.floor(Math.random() * 6000) + 3400, function () {
                repeatLoopLeft();
            });
        });
    };

    function repeatLoopRight() {
        t.animate({ left: '-=' + (startMargin) + 'px' }, Math.floor(Math.random() * 6700) + 3500, function () {
            startMargin = (animWrapper.width() - t.width());
            $(t).animate({ left: '+=' + (startMargin) + 'px' }, Math.floor(Math.random() * 6000) + 3400, function () {
                repeatLoopRight();
            });
        });
    };

    if (index % 2) { repeatLoopRight() } else { repeatLoopLeft() };
};



    var bgArray = ["images/homepage/arrow.jpg", "images/homepage/running.jpg", "images/homepage/direct2.jpg", "images/homepage/pathfinding.jpg"];
    var textArray = ["images/homepage/theHeartOfTheMatter_s1.png", "images/homepage/faster_s1.png", "images/homepage/direct_s1.png", "images/homepage/pathfinding_s1.png"];
    
       for (i = 0; i <= (bgArray.length); i++) {
                $('body').append('<img src="' + bgArray[i] + '" style="display:none" />');
            };



$(window).load(function () {
    $('#animationWrapper').animationWrapper({ numberOfMovers: 7 });

    var loopProcess = 0;
    var $backgroundWrap = $('<div>');

    function StartBgRollover() {
        if (loopProcess == bgArray.length) { loopProcess = 0 }

        $backgroundWrap.css({
            'background-image': 'url(' + bgArray[loopProcess] + ')',
            'background-repeat': 'no-repeat',
            'position': 'relative',
            'width': $('#animationWrapper').width() + 'px',
            'height': $('#animationWrapper').height() + 'px',
            'display': 'none'
        });

        var $textWrap = $('<div>');

        $textWrap.position({
            "of": $('#animationWrapper'),
            "at": "left center",
            "my": "left center",
            "offset": "-10 -40"
        });

        $textWrap.css({ 'position': 'absolute', 'left': '0px', 'top': '80px' });

        var imgMargin = ""
        if (loopProcess == 1) { imgMargin = 'style="margin-left:40px"' };
        if (loopProcess == 2) { imgMargin = 'style="margin-left:130px"' };
        if (loopProcess == 3) { imgMargin = 'style="margin-left:220px"' };

        $backgroundWrap.append($textWrap.html('<img ' + imgMargin + ' src="' + textArray[loopProcess] + '" /></div>'));

        $('#animationWrapper').append($backgroundWrap);

        var $directExtra = $('<img src="images/homepage/direct_change.jpg" style="position:absolute; top:0px; right:0px; z-index:888888"  />')

        if (loopProcess == 2) {
            $backgroundWrap.append($directExtra);
            $backgroundWrap.fadeIn(1500, function () {
                $directExtra.fadeOut(2000);
            });
        } else {
            $backgroundWrap.fadeIn(3500);
        };

        $textWrap.animate({ left: '60px' }, 7500, function () {
            $backgroundWrap.fadeOut(1500, function () {
                $directExtra.remove();
                $textWrap.remove();
                loopProcess++
                StartBgRollover();
            });
        });
    };

    StartBgRollover();
});