function initCSS() {
    document.getElementById('body').style.visibility = 'visible';
}
function removeCSS() {
    document.getElementById('body').style.visibility = 'hidden';
}




/**
 * navigate out
 */
function prepareNavigation() {
    var p = $('ship');// Start Pointer Animation
    p.show();
    return Effect.RunOut(p,0);
    // return true;

}
Effect.RunOut = function(p, step) {
    if (step>85) {
        return false;
    } else {
        switch (step) {

            case 0: //start chain
                new Effect.Morph('ship', {
                    style:"width:7px;left:0;",
                    duration: 0.3,
                    afterFinish: function(effect) {
                        Effect.RunOut(p,step+1);
                    }
                });

                
                break;

            case 1: //start chain
                new Effect.MoveBy(p, 0, 820, {
                    duration: 0.5,
                    afterFinish: function(effect) {
                        Effect.RunOut(p,step+1);
                    }
                });
                break;
            case 2: // Goto Content Corner
                new Effect.MoveBy(p, -60, 0, {
                    duration: 0.3,
                    afterFinish: function(effect) {
                        Effect.RunOut(p,step+1);
                    }
                });
                break;
            case 3: // Turn around Logo
                new Effect.MoveBy(p, -400, -820, {
                    duration: 1,
                    afterFinish: function(effect) {
                        Effect.RunOut(p,step+1);
                    }
                });
                break;
            case 4: // Print Logo
                new Effect.Fade('playground', {
                    duration: 0.8,
                    afterFinish: function(effect) {
                        Effect.RunOut(p,step+1);
                    }
                });
                break;
            default:
                return false;
                break;

        }
    }

}

function setupReadMore(counter) {

    var pwrapper = $("section"+counter).down('.pwrapper');
    var clothes = $("maplike"+counter);

    pwrapper.setStyle({"position":"relative", "top" : (230 + "px")});
    var readMore = new Element('span', {'style' : 'float:right;color:#173642;cursor:pointer;position:relative;top:-26px;right:40px;'});
    pwrapper.down().insert({after: readMore});
    readMore.update(readMoreTxt);
    readMore.setStyle({"position":"relative","top" : (-26 + "px")});
    readMore.observe('click', function(r) {
    
        new Effect.Morph(pwrapper, {
            duration: 0.6,
            style:"top:0px;",
            afterFinish: function(effect) {
                if (clothes) {
                    clothes.hide();
                }
                new Effect.Fade(readMore, {
                    duration: 0.4
                });                
                setupReadLess(counter, readMore);
            }
        });
    });
}

function setupReadLess(counter, readMore) {
    var pwrapper = $("section"+counter).down('.pwrapper');
    var clothes = $("maplike"+counter);
    var go = $("section"+counter).down('.go_arrow_more');

    var readLess = new Element('span', {'style' : 'float:right;color:#173642;cursor:pointer;display:none;position:relative;top:-32px;right:40px;'});
    readLess.update(readLessTxt);
    pwrapper.down('.plain_body').insert({after: readLess });

    readLess.observe('click', function(r) {
    
        new Effect.Morph(pwrapper, {
            duration: 0.6,
            style:"top:230px;",
            
            afterFinish: function(effect) {
                if (clothes) {
                    clothes.show();
                }
                new Effect.Appear(readMore, {
                    duration: 0.4
                });
                new Effect.Fade(readLess, {
                    duration: 0.4
                });
            }
        });
    });

    new Effect.Appear(readLess, {
        duration: 0.4
    });
}

function placeStoerer(stoerer) {

    var offs = stoerer.cumulativeOffset();
    stoerer.setStyle({"margin":"0", "position":"absolute", 'left': (offs[0] + "px"), "top" : (offs[1] + "px"), "display" : 'none'});

    new Effect.Appear(stoerer,{duration: 0.3});
    new Effect.Move(stoerer,{x: 10, y: 10, mode: "relative", duration: 1, transition: Effect.Transitions.wobble});

}

function doStoerer() {
    $("stoerer").show();
    // place it...
    placeStoerer($("stoerer"));
}