var currentPage = "none";

function handleMenuClick(nextPage) {
    //alert("user would like to go from " + currentPage + " to " + nextPage)
    if(currentPage != 'none') {
        if(currentPage == 'home' && nextPage == 'contact')
            transitionFromHomeToContact();
        else if(currentPage == 'home' && nextPage == 'products')
            transitionFromHomeToProducts();
        else if(currentPage == 'contact' && nextPage == 'home')
            transitionFromContactToHome();
        else if(currentPage == 'contact' && nextPage == 'products')
            transitionFromContactToProducts();
        else if(currentPage == 'products' && nextPage == 'home')
            transitionFromProductsToHome();
        else if(currentPage == 'products' && nextPage == 'contact')
            transitionFromProductsToContact();
        else if(nextPage == 'services')
            alert("This page is under constriction");
    }
}

function transitionFromContactToProducts() {

    currentPage = 'none'

    $('screen').removeClassName('screenBackground');

    resetProductsTitle()

    $('products1').setStyle({top:'-985px',left:'210px'});
    $('products1').setStyle({display:'block'});

    $('products2').setStyle({top:'47px',left:'-4805px'});
    $('products2').setStyle({display:'block'});

    $('products3').setStyle({top:'95px',left:'-3850px'});
    $('products3').setStyle({display:'block'});

    $('products4').setStyle({top:'176px',left:'-2907px'});
    $('products4').setStyle({display:'block'});

    $('downloadDaLink').setStyle({top:'240px',left:'-1845px'});
    $('downloadDaLink').setStyle({display:'block'});

    new Effect.Parallel(orangeArrowAppearEffect(), {
        duration:3,queue:'front',afterFinish: function() {
            $('screen').addClassName('screenBackground');
            currentPage = "products";
            $('contactTitle').setStyle({display:'none'});
            $('email').setStyle({display:'none'});
            $('address').setStyle({display:'none'});
            $('phone').setStyle({display:'none'});
        }}
    );

    new Effect.Parallel(
    [
        new Effect.MoveBy($('productsTitle'), 0, 1000, {sync:true}),
        new Effect.MoveBy($('products1'), 1000, 0, {sync:true}),
        new Effect.MoveBy($('products2'), 0, 5000, {sync:true}),
        new Effect.MoveBy($('products3'), 0, 4000, {sync:true}),
        new Effect.MoveBy($('products4'), 0, 3000, {sync:true}),
        new Effect.MoveBy($('downloadDaLink'), 0, 2000, {sync:true}),
        new Effect.MoveBy($('logo'), 0, -1000, {sync:true}),
        new Effect.MoveBy($('email'), -1000, 0, {sync:true}),
        new Effect.MoveBy($('address'), -1000, 0, {sync:true}),
        new Effect.MoveBy($('phone'), -1000, 0, {sync:true}),
        new Effect.Appear($('contact'), {sync:true})
    ],
    {duration:5,queue:'front'}
    );

    new Effect.Parallel(
    [
        new Effect.Fade($('grayArrow1'), {sync:true}),
        new Effect.Fade($('grayArrow2'), {sync:true}),
        new Effect.Fade($('grayArrow3'), {sync:true}),
        new Effect.Fade($('grayArrow4'), {sync:true}),
        new Effect.Fade($('grayArrow5'), {sync:true}),
        new Effect.Fade($('grayArrow6'), {sync:true}),
        new Effect.Fade($('grayArrow7'), {sync:true}),
        new Effect.Fade($('products'), {sync:true}),
        new Effect.MoveBy($('contactTitle'), 0, -1000, {sync:true})
    ],
    {duration:2,queue:'front'}
    );
}

function transitionFromProductsToContact() {

    currentPage = 'none'

    $('screen').removeClassName('screenBackground');

    $('contactTitle').setStyle({top:'5px',left:'-995px'});
    $('email').setStyle({top:'-900px',left:'370px'});
    $('address').setStyle({top:'-840px',left:'260px'});
    $('phone').setStyle({top:'-900px',left:'20px'});
    $('logo').setStyle({top:'320px',left:'-970px'});

    $('contactTitle').setStyle({display:'block'});
    $('email').setStyle({display:'block'});
    $('address').setStyle({display:'block'});
    $('phone').setStyle({display:'block'});
    $('logo').setStyle({display:'block'});

    var grayArrowAppear = grayArrowAppearEffect();
    grayArrowAppear[grayArrowAppear.length] = new Effect.MoveBy($('contactTitle'), 0, 1000, {sync:true});
    new Effect.Parallel(grayArrowAppear, {duration:6,queue:'front',afterFinish: function() {
            $('screen').addClassName('screenBackground');
            currentPage = 'contact';
            $('productsTitle').setStyle({display:'none'});
            $('products1').setStyle({display:'none'});
            $('products2').setStyle({display:'none'});
            $('products3').setStyle({display:'none'});
            $('products4').setStyle({display:'none'});
            $('downloadDaLink').setStyle({display:'none'});
        }}
    );

    new Effect.Parallel(
    [
        new Effect.MoveBy($('productsTitle'), 0, -1000, {sync:true}),
        new Effect.MoveBy($('products1'), -1000, 0, {sync:true}),
        new Effect.MoveBy($('products2'), 0, -5000, {sync:true}),
        new Effect.MoveBy($('products3'), 0, -4000, {sync:true}),
        new Effect.MoveBy($('products4'), 0, -3000, {sync:true}),
        new Effect.MoveBy($('downloadDaLink'), 0, -2000, {sync:true}),
        new Effect.MoveBy($('logo'), 0, 1000, {sync:true}),
        new Effect.MoveBy($('email'), 1000, 0, {sync:true}),
        new Effect.MoveBy($('address'), 1000, 0, {sync:true}),
        new Effect.MoveBy($('phone'), 1000, 0, {sync:true}),
        new Effect.Appear($('products'), {sync:true})
    ],
    {duration:5,queue:'front'}
    );

    doContactClickedOrangeArrowFade()
}

function transitionFromContactToHome() {

    currentPage = 'none'

    $('downloadDaLink').setStyle({top:'5px',left:'-2995px'});
    $('downloadDaLink').setStyle({display:'block'});

    $('screen').removeClassName('screenBackground');

    $('description').setStyle({top:'110px',left:'-860px'});
    $('description').setStyle({display:'block'});

    var arrowEffect = orangeArrowAppearEffect();
    arrowEffect[arrowEffect.length] = new Effect.Appear($('contact'), {sync:true});
    new Effect.Parallel(arrowEffect, {
        duration:3,
        queue:'front',
        afterFinish: function() {
            $('screen').addClassName('screenBackground');
            currentPage = "home";
            $('contactTitle').setStyle({display:'none'});
            $('email').setStyle({display:'none'});
            $('address').setStyle({display:'none'});
            $('phone').setStyle({display:'none'});
        }}
    );

    new Effect.Parallel(
    [
        new Effect.MoveBy($('logo'), -300, 0, {sync:true}),
        new Effect.MoveBy($('description'), 0, 1000, {sync:true}),
        new Effect.MoveBy($('email'), -1000, 0, {sync:true}),
        new Effect.MoveBy($('address'), -1000, 0, {sync:true}),
        new Effect.MoveBy($('phone'), -1000, 0, {sync:true}),
        new Effect.MoveBy($('downloadDaLink'), 0, 3000, {sync:true})
    ],
    {duration:5,queue:'front'}
    );

    new Effect.Parallel(
    [
        new Effect.Fade($('grayArrow1'), {sync:true}),
        new Effect.Fade($('grayArrow2'), {sync:true}),
        new Effect.Fade($('grayArrow3'), {sync:true}),
        new Effect.Fade($('grayArrow4'), {sync:true}),
        new Effect.Fade($('grayArrow5'), {sync:true}),
        new Effect.Fade($('grayArrow6'), {sync:true}),
        new Effect.Fade($('grayArrow7'), {sync:true}),
        new Effect.Fade($('home'), {sync:true}),
        new Effect.MoveBy($('logo'), 0, 320, {sync:true}),
        new Effect.MoveBy($('contactTitle'), 0, -1000, {sync:true})
    ],
    {duration:2,queue:'front'}
    );
}

function transitionFromProductsToHome() {

    currentPage = 'none'

    $('screen').removeClassName('screenBackground');

    $('logo').setStyle({top:'-1980px',left:'350px'});
    $('description').setStyle({top:'110px',left:'-2860px'});

    $('logo').setStyle({display:'block'});
    $('description').setStyle({display:'block'});

    var moveArrowUp = orangeArrowAndCopyrightMoveUp();
    moveArrowUp[moveArrowUp.length] = new Effect.MoveBy($('downloadDaLink'), 0, -150, {sync:true})
    new Effect.Parallel(moveArrowUp, {duration:2,queue:'front',afterFinish: function() {
            $('screen').addClassName('screenBackground');
            currentPage = 'home';
            $('productsTitle').setStyle({display:'none'});
            $('products1').setStyle({display:'none'});
            $('products2').setStyle({display:'none'});
            $('products3').setStyle({display:'none'});
            $('products4').setStyle({display:'none'});
        }}
    );

    new Effect.Parallel(
    [
        new Effect.MoveBy($('logo'), 2000, 0, {sync:true}),
        new Effect.MoveBy($('description'), 0, 3000, {sync:true}),
        new Effect.MoveBy($('productsTitle'), 0, -1000, {sync:true}),
        new Effect.MoveBy($('products1'), -1000, 0, {sync:true}),
        new Effect.MoveBy($('products2'), 0, -5000, {sync:true}),
        new Effect.MoveBy($('products3'), 0, -4000, {sync:true}),
        new Effect.MoveBy($('products4'), 0, -3000, {sync:true}),
        new Effect.MoveBy($('downloadDaLink'), -235, 0, {sync:true}),
        new Effect.Appear($('products'), {sync:true})
    ],
    {duration:5,queue:'front'}
    );

    var moveArrowDown = orangeArrowAndCopyrightMoveDown();
    moveArrowDown[moveArrowDown.length] = new Effect.Fade($('home'), {sync:true});
    new Effect.Parallel(moveArrowDown,{duration:2,queue:'front'});
}

function transitionFromHomeToProducts() {

    currentPage = 'none'

    $('screen').removeClassName('screenBackground');

    resetProductsTitle();

    $('products1').setStyle({top:'-985px',left:'210px'});
    $('products2').setStyle({top:'47px',left:'-4805px'});
    $('products3').setStyle({top:'95px',left:'-3850px'});
    $('products4').setStyle({top:'176px',left:'-2907px'});

    $('products1').setStyle({display:'block'});
    $('products2').setStyle({display:'block'});
    $('products3').setStyle({display:'block'});
    $('products4').setStyle({display:'block'});

    var moveArrowUp = orangeArrowAndCopyrightMoveUp();
    new Effect.Parallel(moveArrowUp, {duration:2,queue:'front',afterFinish: function() {
            $('screen').addClassName('screenBackground');
            currentPage = 'products';
            $('logo').setStyle({display:'none'});
            $('description').setStyle({display:'none'});
        }}
    );

    new Effect.Parallel(
    [
        new Effect.MoveBy($('logo'), -2000, 0, {sync:true}),
        new Effect.MoveBy($('description'), 0, -3000, {sync:true}),
        new Effect.MoveBy($('productsTitle'), 0, 1000, {sync:true}),
        new Effect.MoveBy($('products1'), 1000, 0, {sync:true}),
        new Effect.MoveBy($('products2'), 0, 5000, {sync:true}),
        new Effect.MoveBy($('products3'), 0, 4000, {sync:true}),
        new Effect.MoveBy($('products4'), 0, 3000, {sync:true}),
        new Effect.MoveBy($('downloadDaLink'), 235, 0, {sync:true}),
        new Effect.Appear($('home'), {sync:true})
    ],
    {duration:5,queue:'front'}
    );

    var moveArrowDown = orangeArrowAndCopyrightMoveDown();
    moveArrowDown[moveArrowDown.length] = new Effect.MoveBy($('downloadDaLink'), 0, 150, {sync:true});
    moveArrowDown[moveArrowDown.length] = new Effect.Fade($('products'), {sync:true});
    new Effect.Parallel(moveArrowDown,{duration:2,queue:'front'});
}

function transitionFromHomeToContact() {

    currentPage = 'none'

    $('screen').removeClassName('screenBackground');

    $('contactTitle').setStyle({top:'5px',left:'-995px'});
    $('email').setStyle({top:'-900px',left:'370px'});
    $('address').setStyle({top:'-840px',left:'260px'});
    $('phone').setStyle({top:'-900px',left:'20px'});

    $('contactTitle').setStyle({display:'block'});
    $('email').setStyle({display:'block'});
    $('address').setStyle({display:'block'});
    $('phone').setStyle({display:'block'});

    var grayArrowAppear = grayArrowAppearEffect();
    grayArrowAppear[grayArrowAppear.length] = new Effect.MoveBy($('logo'), 0, -320, {sync:true});
    grayArrowAppear[grayArrowAppear.length] = new Effect.MoveBy($('contactTitle'), 0, 1000, {sync:true});
    new Effect.Parallel(grayArrowAppear,{duration:6,queue:'front',afterFinish: function() {
            $('screen').addClassName('screenBackground');
            currentPage = 'contact';
            $('description').setStyle({display:'none'});
            $('downloadDaLink').setStyle({display:'none'});
        }}
    );

    new Effect.Parallel(
    [
        new Effect.MoveBy($('logo'), 300, 0, {sync:true}),
        new Effect.MoveBy($('description'), 0, -1000, {sync:true}),
        new Effect.MoveBy($('email'), 1000, 0, {sync:true}),
        new Effect.MoveBy($('address'), 1000, 0, {sync:true}),
        new Effect.MoveBy($('phone'), 1000, 0, {sync:true}),
        new Effect.MoveBy($('downloadDaLink'), 0, -3000, {sync:true})
    ],
    {duration:5,queue:'front'}
    );

    doContactClickedOrangeArrowFade()
}

function dispayHomeStart() { // display the home page when a user first arrives

    $('logo').setStyle({top:'-1980px',left:'350px'});
    $('logo').setStyle({display:'block'});

    $('description').setStyle({top:'110px',left:'-860px'});
    $('description').setStyle({display:'block'});

    $('links').setStyle({top:'-3725px',left:'100px'});
    $('links').setStyle({display:'block'});

    $('downloadDaLink').setStyle({top:'5px',left:'-2995px'});
    $('downloadDaLink').setStyle({display:'block'});

    $('copyright').setStyle({top:'417px',left:'-2760px'});
    $('copyright').setStyle({display:'block'});

    new Effect.Parallel(orangeArrowAppearEffect(), {
        duration:3,
        queue:'front',
        afterFinish: function() {
            $('screen').addClassName('screenBackground');
            currentPage = "home"
        }}
    );

    new Effect.Parallel(
    [
        new Effect.MoveBy($('logo'), 2000, 0, {sync:true}),
        new Effect.MoveBy($('description'), 0, 1000, {sync:true}),
        new Effect.MoveBy($('links'), 4000, 0, {sync:true}),
        new Effect.MoveBy($('downloadDaLink'), 0, 3000, {sync:true}),
        new Effect.MoveBy($('copyright'), 0, 3000, {sync:true})
    ],
    {duration:5,queue:'front'}
    );
}

function resetProductsTitle() { $('productsTitle').setStyle({top:'5px',left:'-995px'}); $('productsTitle').setStyle({display:'block'}); }

function doContactClickedOrangeArrowFade() {
    var fadeEffect = orangeArrowFadeEffect();
    fadeEffect[fadeEffect.length] = new Effect.Fade($('contact'), {sync:true})
    new Effect.Parallel(fadeEffect, {duration:2,queue:'front'});
}

function orangeArrowAndCopyrightMoveDown() {
    return orangeArrowAndCopyright(200, -200);
}

function orangeArrowAndCopyrightMoveUp() {
    return orangeArrowAndCopyright(-200, 200);
}

function orangeArrowAndCopyright(y, x) {
    return [
        new Effect.MoveBy($('arrow1'), y, x, {sync:true}),
        new Effect.MoveBy($('arrow2'), y, x, {sync:true}),
        new Effect.MoveBy($('arrow3'), y, x, {sync:true}),
        new Effect.MoveBy($('arrow4'), y, x, {sync:true}),
        new Effect.MoveBy($('arrow5'), y, x, {sync:true}),
        new Effect.MoveBy($('arrow6'), y, x, {sync:true}),
        new Effect.MoveBy($('arrow7'), y, x, {sync:true}),
        new Effect.MoveBy($('arrow8'), y, x, {sync:true}),
        new Effect.MoveBy($('copyright'), 0, (-2*x), {sync:true})
    ]
}

function grayArrowAppearEffect() {
    return [
        new Effect.Appear($('grayArrow1'), {sync:true}),
        new Effect.Appear($('grayArrow2'), {sync:true}),
        new Effect.Appear($('grayArrow3'), {sync:true}),
        new Effect.Appear($('grayArrow4'), {sync:true}),
        new Effect.Appear($('grayArrow5'), {sync:true}),
        new Effect.Appear($('grayArrow6'), {sync:true}),
        new Effect.Appear($('grayArrow7'), {sync:true}),
        new Effect.Appear($('home'), {sync:true})
    ]
}

function orangeArrowFadeEffect() {
    return [
        new Effect.Fade($('arrow1'), {sync:true}),
        new Effect.Fade($('arrow2'), {sync:true}),
        new Effect.Fade($('arrow3'), {sync:true}),
        new Effect.Fade($('arrow4'), {sync:true}),
        new Effect.Fade($('arrow5'), {sync:true}),
        new Effect.Fade($('arrow6'), {sync:true}),
        new Effect.Fade($('arrow7'), {sync:true}),
        new Effect.Fade($('arrow8'), {sync:true})
    ]
}

function orangeArrowAppearEffect() {
    return [
        new Effect.Appear($('arrow1'), {sync:true}),
        new Effect.Appear($('arrow2'), {sync:true}),
        new Effect.Appear($('arrow3'), {sync:true}),
        new Effect.Appear($('arrow4'), {sync:true}),
        new Effect.Appear($('arrow5'), {sync:true}),
        new Effect.Appear($('arrow6'), {sync:true}),
        new Effect.Appear($('arrow7'), {sync:true}),
        new Effect.Appear($('arrow8'), {sync:true})
    ]
} //477