var elapsed = 0;
var elapsedB = 16;

var PageOnePosition = 0;  //default
var PageTwoPosition = 20; //default
var PageThreePosition = 40;  //default
var movingVariable = false;
var currentPage="One"; //default is that page One is selected
var amountToMove = 568; //the amount a page will move up or down
var pageOnePositionUp = 24; //amount of pixels when the page is rolled up
var pageTwoPositionUp = 36;
var pageThreePositionUp = 48;
var invert =-1;  //used to invert

function move(page){
    if (movingVariable==true)
    return;  // an animation is already going, must wait till it finishes
    
    
    else if(page=='One' && currentPage=='Two'){
        movingVariable=true;
        moveToPageOneFromPageTwo();
    }
    
    else if(page=='One' && currentPage=='Three'){
        movingVariable=true;
        moveToPageOneFromPageThree();
    }
    
    else if(page=='Two' && currentPage=='One'){
        movingVariable=true;
        moveToPageTwoFromPageOne();
    }
    
    else if(page=='Two' && currentPage=='Three'){
        movingVariable=true;
        moveToPageTwoFromPageThree();   
    }
    
    else if(page=='Three' && currentPage=='One'){
        movingVariable=true;
        moveToPageThreeFromPageOne();   
    }
    
    else if(page=='Three' && currentPage=='Two'){
        movingVariable=true;
        moveToPageThreeFromPageTwo();   
    }
    
    else  //else do nothing, for example if we are on page One and wanna go to page One
    return;

}




function moveToPageOneFromPageTwo(){     //Page 2 and 3 is on place, page 1 needs to move DOWN!!    
    PageOnePosition = amountToMove * elapsed/16 + pageOnePositionUp;
    document.getElementById('One').style.top=Math.round(PageOnePosition)+"px"; //updates position on page
    
    if (elapsed==16){    // 100 = 100 repeats before it's on place!
        movingVariable=false; //allows an new animation to start
        elapsed=0; //resets elapsed to 0
        currentPage="One";
        return;
    }
    elapsed++;
    setTimeout ( "moveToPageOneFromPageTwo()", 15 );
}



function moveToPageOneFromPageThree(){     //Page 3 is on place, page 1 and 2 needs to move DOWN!!    
    PageTwoPosition = amountToMove * elapsed/16 + pageTwoPositionUp;
    document.getElementById('Two').style.top=Math.round(PageTwoPosition)+"px"; //updates position on page
    
    if (elapsed==16){    // 100 = 100 repeats before it's on place!
        //movingVariable=false; //allows an new animation to start
        elapsed=0; //resets elapsed to 0
        moveToPageOneFromPageTwo();  //page 2 is on place.. now put page 1 on place also!
        return;
    }
    elapsed++;
    setTimeout ( "moveToPageOneFromPageThree()", 15 );
}


function moveToPageTwoFromPageOne(){     //Page 2 and 3 is on place, page 1 needs to move UP!!    
    PageOnePosition = amountToMove * elapsedB/16 + pageOnePositionUp;
    document.getElementById('One').style.top=Math.round(PageOnePosition)+"px"; //updates position on page
    
    if (elapsedB==0){    // 100 = 100 repeats before it's on place!
        movingVariable=false; //allows an new animation to start
        elapsedB=16; //resets elapsedB to 100
        currentPage="Two";
        return;
    }
    elapsedB--;
    setTimeout ( "moveToPageTwoFromPageOne()", 15 );
}


function moveToPageTwoFromPageThree(){     //Page 1 and 3 is on place, page 2 needs to move DOWN!!    
    PageTwoPosition = amountToMove * elapsed/16 + pageTwoPositionUp;
    document.getElementById('Two').style.top=Math.round(PageTwoPosition)+"px"; //updates position on page
    
    if (elapsed==16){    // 100 = 100 repeats before it's on place!
        movingVariable=false; //allows an new animation to start
        elapsed=0; //resets elapsed to 0
        currentPage="Two";
        return;
    }
    elapsed++;
    setTimeout ( "moveToPageTwoFromPageThree()", 15 );
}  //inte testat än måste fixa 3an :D


function moveToPageThreeFromPageTwo(){     //Page 3 and 1 is on place, page 2 needs to move UP!!    
    PageTwoPosition = amountToMove * elapsedB/16 + pageTwoPositionUp;
    document.getElementById('Two').style.top=Math.round(PageTwoPosition)+"px"; //updates position on page
    
    if (elapsedB==0){    // 100 = 100 repeats before it's on place!
        movingVariable=false; //allows an new animation to start
        elapsedB=16; //resets elapsedB to 100
        currentPage="Three";
        return;
    }
    elapsedB--;
    setTimeout ( "moveToPageThreeFromPageTwo()", 15 );
}

function moveToPageThreeFromPageOne(){     //Page 3 is on place, page 2 and 1 needs to move UP!!    
    PageOnePosition = amountToMove * elapsedB/16 + pageOnePositionUp;
    document.getElementById('One').style.top=Math.round(PageOnePosition)+"px"; //updates position on page
    
    if (elapsedB==0){    // 100 = 100 repeats before it's on place!
        elapsedB=16; //resets elapsedB to 100
        moveToPageThreeFromPageTwo();
        return;
    }
    elapsedB--;
    setTimeout ( "moveToPageThreeFromPageOne()", 15 );
}