$(function () {
    //$('.pane').fadeTo(1, 0);

    var pane = 0;
    var frame = 0;
    var last_pane = false;

    function animate_pane(frame, pane) {
        $('#anim .frame').eq(frame).find('.pane').eq(pane).fadeTo(1000, '1.0');
        $('#anim .frame').eq(frame).find('.pane').eq(pane).delay(3000);
        //$('#anim .frame').eq(frame).find('.pane').eq(pane).fadeTo('slow', '0.8');
        $('#anim .frame').eq(frame).find('.pane').eq(pane).animate({
            opacity: 0.8
        }, 'slow', function () {
            if (pane == 2) {
                last_pane = true;
            }
        });
    }

    function animate_frame(frame) {
        var next = (frame + 1) % 2;

        $('#anim .frame').eq(next).css('z-index', '5');
        $('#anim .frame').eq(next).css('opacity', '0');
        $('#anim .frame').eq(next).fadeTo(2000, '1.0');

        $('#anim .frame').eq(frame).css('z-index', '1');
        setTimeout(function () {
            $('#anim .frame').eq(frame).hide();        
            $('#anim .frame').eq(frame).find('.pane').hide();
        }, 2000);
    }

    var tmid = setInterval(function () {
        if (pane != 3)
            animate_pane(frame, pane++);
        if (pane == 3) {
            if (last_pane) {
                animate_frame(frame++);
                pane = 0;
                last_pane = 0;
                if (frame == 2) {
                    frame = 0;
                }
            }
        }
    }, 3000);

});