$log = $('#log');

$('body').ready(function() {
    // spawn t1
    $('body').append('<span id="t1"></span>').ready(function() {
        $t1 = $('#t1');
        $t1.hide();
        // spawn t1 items
        $t1.append('<span id="t1i1"></span>').ready(function() {
            $t1i1 = $('#t1i1');
            $t1i1.html('<img src="img/fc.png" />');
        });
        $t1.append('<span id="t1i2"></span>').ready(function() {
            $t1i2 = $('#t1i2');
            $t1i2.html('<img src="img/p23.png" />');
        });
        $t1.children().hide().css({'position': 'absolute'});
    });

    // spawn t2
    $('body').append('<span id="t2"></span>').ready(function() {
        $t2 = $('#t2');
        $t2.hide();
        // span t2 items
        $t2.append('<span id="t2i1"></span>').ready(function() {
            $t2i1 = $('#t2i1');
            //$t2i1.hide();
            $t2i1.html('<img src="img/fc.png" />');
        });
        $t2.append('<span id="t2i2"></span>').ready(function() {
            $t2i2 = $('#t2i2');
            $t2i2.html('<img src="img/p55.png" />');
        });
        $t2.append('<span id="t2i3"></span>').ready(function() {
            $t2i3 = $('#t2i3');
            $t2i3.html('<img src="img/p.png" />');
        });
        $t2.children().hide().css({'position': 'absolute'});
    });
});

$(document).ready(function() {
    // show t1
    setTimeout(function(){
        $t1.show().ready(function() {
            $t1i1.show();
            setTimeout(function() {
              $t1i1.hide();
            }, 1500);
            setTimeout(function() {
              $t1i2.show();
            }, 1500);
        });
    }, 0);
    // hide t1
    setTimeout(function(){
        $t1.hide().ready(function() {
            //$('#log').html('..hidden');
        });
    }, 4000);

    // show t2
    setTimeout(function(){
        $t2.show().ready(function() {
            $t2i1.show();
            setTimeout(function() {
                $t2i1.hide();
            }, 1500);
            setTimeout(function() {
                $t2i2.show();
            }, 1500);
            setTimeout(function() {
                $t2i2.hide();
            }, 3000);
            setTimeout(function() {
                $t2i3.show();
            }, 3000);
        });
    }, 4000);
    // hide t2
    setTimeout(function(){
        $t2.hide().ready(function() {
            $('#log').html('..hidden');
        });
    }, 8000);
});