var mandy = {
    current: 0,
    container: $("container"),
    offsetTop: 70,
    slide: function (event)
    {
        var element = event.element();
        if (!element.match("a")) return;
        event.stop();
        var id = element.id;
        if (!id) return;
        id = id.match(/\d/) * 1;
        element.blur();
        if (!id || id == mandy.current) return;
        
        var originalElement = $("s"+mandy.current);
        var newElement = $("s"+id);
        var offset = originalElement.positionedOffset();
        
        // container height
            var containerDimensions = mandy.container.getDimensions();
            var currentHeight = $("s"+mandy.current).getHeight();
            var nextHeight = newElement.getHeight();
            var deltaHeight = nextHeight - currentHeight;
            var newHeight = containerDimensions.height + deltaHeight + 10;
        
            mandy.container.setStyle({height: containerDimensions.height + "px"});
            
        // container height
        
        originalElement.setStyle({
            position: "absolute",
            top: mandy.offsetTop + "px",
            left: offset.left + "px"
        });
        if (mandy.current < id) {
            newElement.setStyle({
                position: "absolute",
                top: mandy.offsetTop + "px",
                left: containerDimensions.width + "px"
            });
        } else {
            newElement.setStyle({
                position: "absolute",
                top: mandy.offsetTop + "px",
                left: (newElement.getWidth() *-1) + "px"
            });
        }
        $("footer").setStyle({marginTop: (currentHeight + 120) + "px"});
        originalEffect = {
            x: originalElement.getWidth() + offset.left + 30,
            y: 0,
            sync: true
        };
        newEffect = {
            x: originalElement.getWidth() + offset.left,
            y: 0,
            sync: true
        };
        if (mandy.current < id) {
            originalEffect.x = originalEffect.x * -1;
            newEffect.x = newEffect.x * -1;
        } else {
            originalEffect.x = originalEffect.x - 10;
            newEffect.x = newEffect.x - 10;
        }
        newElement.show();
        new Effect.Parallel(
            [
                new Effect.Move(originalElement, originalEffect),
                new Effect.Move(newElement, newEffect),
                new Effect.Morph(mandy.container, {
                    style: {
                        height: newHeight + "px"
                    },
                    sync: true
                }),
                new Effect.Morph("footer", {
                    style: {
                        marginTop: (nextHeight + 130) + "px"
                    },
                    sync: true
                })
            ],
            {
                duration: 0.6,
                afterFinish: function (object) {
                    originalElement.hide();
                    newElement.setStyle({
                        position: "static",
                        left: "auto",
                        right: "auto"
                    });
                    originalElement.setStyle({
                        position: "static",
                        left: "auto",
                        right: "auto"
                    });
                    if (!ie6) mandy.container.setStyle({height: "auto"});
                    if (ie6) mandy.container.setStyle({height: "1%"});
                    $("footer").setStyle({marginTop: "0"});
                    mandy.current = id;
                }
            }
        );
    }
}

$("nav").observe("click", mandy.slide);
/*
$("s0").hide();
$("s3").show();
mandy.current = 3;
*/