
function loadAnimation() {
        removeCSS(); // Disable Basic CSS
            if ($('frame')) {
                origFrameW = parseInt($('frame').getWidth());// Save the width of frame:
                origFrameH = parseInt($('frame').getHeight());
            }
            if ($('playground')) $('playground').hide();// Prepare Animation
            if ($('logo')) $('logo').hide();
            if ($('frame')) $('frame').hide();
            if ($('navi')) $('navi').hide();
            if ($('metanavi')) $('metanavi').hide();
            if ($('ship')) $('ship').hide();
            initCSS(); // Enable Basic CSS
        var p = $('startPointer');// Start Pointer Animation
        p.show();
        Effect.Run(p,1);
}


Effect.Run = function(p, step) {
    if (step>85) {
        return false;
    } else {
        switch (step) {
            case 1: // Introduce Pointer to moftp, start chain
                // Find moftp:
                var moftp = $('body').getWidth()/2;
                new Effect.MoveBy(p, 0, moftp, {
                    duration: 0.5,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 2: // Goto Logo
                new Effect.MoveBy(p, 98, -80, {
                    duration: 0.3,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 3: // Turn around Logo
                new Effect.MoveBy(p, 0, 160, {
                    duration: 0.45,
                    beforeStart: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 4: // Print Logo
                $('logo').style.borderColor = '#889EA9';
                new Effect.Appear('logo', {
                    duration: 0.6,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 5: // Go To first horiz line
                new Effect.MoveBy(p, 44, -497, {
                    duration: 0.7,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 6: // Write horiz line
                new Effect.Morph('logo', {
                    style:"border-color:#fff",
                    duration: 1.7,
                    beforeStart: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 7: // Turn around horiz line
                new Effect.MoveBy(p, 0, 830, {
                    duration: 0.6,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;

            case 8: // Move Poitner to left top of Content
                new Effect.MoveBy(p, 26, -830, {
                    duration: 0.6,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;

            case 9: // Draw Content
                $('frame').style.height="0px";
                $('frame').style.width="0px";
                $('frame').appear();
                new Effect.Morph('frame', {
                    style:"width:"+(origFrameW-14)+"px;height:"+(origFrameH-14)+"px;",
                    duration: 0.7,
                    beforeStart : function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 10: // Move Poitner to lower rigtht of Content
                p.hide();
                new Effect.MoveBy(p, 450, 795, {
                    duration: 0.45,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;

            case 11: // Show Subnavi, Step 1
                $('navi').style.height="0px";
                $('navi').show();
                
                new Effect.Morph('navi', {
                    style:"height:30px;",
                    duration: 1.3,
                    afterFinish : function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                /*
                     $$('#naviul li a').each(function(item) {
                          var f = function() { new Effect.Highlight(item, {duration: 0.5, restorecolor:'#fff', highlightcolor:'990000'}) };
                          window.setTimeout(f, 1500);
                     });
                     */

                break;
            /*
                case 12: // Highlight one single Navigation Point
                     $$('#naviul li a').each(function(item) {
                          new Effect.Highlight(item, {duration: 0.5, restorecolor:'#fff', highlightcolor:'990000'});
                     });

                     break;
                break;
                */

            case 12: // Show Subnavi, Step 2
                new Effect.Morph('navi', {
                    style:"height:60px;",
                    duration: 1.7,
                    beforeStart : function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;

            case 13: // Move Pointer to Subnavi Slider Start
                p.show();
                $('follow').hide();
                new Effect.MoveBy(p, 58, -794, {
                    duration: 0.5,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;

            case 14: // Write 2. horiz line
                new Effect.Appear('follow', {
                    duration: 1.7,
                    beforeStart: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;

            case 15: // Show Metanvai
                new Effect.Appear('metanavi', {
                    duration: 0.2,
                    beforeStart: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;


            case 16: // Move Pointer to Slider End
                new Effect.MoveBy(p, 0, 824, {
                    duration: 0.5,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;

            case 17: // Move Pointer to Slider Start again
                new Effect.MoveBy(p, 0, -824, {
                    duration: 0.5,
                    afterFinish: function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
             break;
            
            case 18: // Move Pointer to Slider Start again
                $('ship').style.width="20px";
                $('ship').appear();
                p.hide();
                new Effect.Morph('ship', {
                    style:"width:103px;",
                    duration: 0.4,
                    beforeStart : function(effect) {
                        Effect.Run(p,step+1);
                    }
                    });
                break;
            case 19:
                $('playground').appear();
                if ($('glider')) {
                    setupGlider();
                }
                break;

            default:
                return false;
                break;

        }
    }

}