$(document).ready(function() {
    var currentSpan     = 0,
        // Zeit-Abstand zwischen den einzelnen Animationen
        duration        = 900,
        // Zeit bis zum Restart der Animation
        restartTimeout  = 10000,
        // Zeit zwischen Logo und Buttons
        buttonsDuration = 3000,
        $m              = $("#home"),
        $spans          = null,
        startHtml       = $m.html(),
        images          = [
            "theme/images/home/werbend.jpg",
            "theme/images/home/weiterentwickelt.jpg",
            "theme/images/home/wirksam.jpg",
            "theme/images/home/wortgewandt.jpg",
            "theme/images/home/wiedererkannt.jpg",
            "theme/images/home/buttons/werbend.png",
            "theme/images/home/buttons/weiterentwickelt.png",
            "theme/images/home/buttons/wirksam.png",
            "theme/images/home/buttons/wortgewandt.png",
            "theme/images/home/buttons/wiedererkannt.png"
        ];
    // Vorladen der Bilder
    for (var i = 0, len = images.length; i < len; i++) {
        var image = new Image();
        image.src = images[i];
    }
    
    function start()
    {
        currentSpan = 0;
        $spans = $m.find("blockquote p span"),
        
        $spans.each(function (i, span) {
            var $s = $(span);
            $s.css("opacity", 0);
            $s.css("display", "inline-block");
        });

        setTimeout(function () {
            $($spans[0]).animate({
                opacity : 1
            }, {
                duration : duration,
                complete : nextSpan
            });
        }, duration);
    }
    
    function end()
    {
        $m.fadeOut(duration, function () {
            var html = '<ul class="images">\n' +
                '<li><img src="theme/images/home/werbend.jpg" alt="werbend." /></li>' +
                '<li><img src="theme/images/home/weiterentwickelt.jpg" alt="weiterentwickelt." /></li>' +
                '<li><img src="theme/images/home/wirksam.jpg" alt="wirksam." /></li>' +
                '<li><img src="theme/images/home/wortgewandt.jpg" alt="wortgewandt." /></li>' +
                '<li><img src="theme/images/home/wiedererkannt.jpg" alt="wiedererkannt." /></li>' +
            "</ul>";

            html += '<ul class="buttons">\n' + 
                '<li><img src="theme/images/home/buttons/werbend.png" alt="werbend." /></li>' +
                '<li><img src="theme/images/home/buttons/weiterentwickelt.png" alt="weiterentwickelt." /></li>' +
                '<li><img src="theme/images/home/buttons/wirksam.png" alt="wirksam." /></li>' +
                '<li><img src="theme/images/home/buttons/wortgewandt.png" alt="wortgewandt." /></li>' +
                '<li><img src="theme/images/home/buttons/wiedererkannt.png" alt="wiedererkannt." /></li>' +
            "</ul>";

            $m.html(html);
            $m.fadeIn(duration, function () {
                setTimeout(function () {
                    $m.fadeOut(duration, function () {
                        $m.html(startHtml);
                        $m.fadeIn(duration, function () { start(); });
                    });
                }, restartTimeout);
            }); 
        });
    }
    
    function nextSpan()
    {
        if ($spans.length == currentSpan) {
            setTimeout(end, buttonsDuration);
            return;
        }
        
        $($spans[currentSpan++]).animate({
            opacity : 1
        }, {
            duration : duration,
            complete : nextSpan
        });
    }
    
    start();
});