var timeOutID;
var interval = 10;

var menuAreaHeight = 0;
var menuHeight = 0;
var movableHeight = 0;

var topClip = 0;
var rightClip = 182;
var bottomClip = 0;
var leftClip = 0;
var shiftCounter = 0;
var pixelsToShift = 2;

function menuMove(gravity){
    menuAreaHeight = document.getElementById("menuPlaceHolder").style.height.split('p')[0];
    menuHeight = document.getElementById("menuItemsDiv").offsetHeight;
    movableHeight = menuHeight - menuAreaHeight;
    
    menuAreaHeight++;
    menuAreaHeight--;
    
    bottomClip = menuAreaHeight;
    
    if(gravity){
        timeOutID = setInterval("doWhileDown();", interval);
    }else{
        timeOutID = setInterval("doWhileUp();", interval);
    }
}
function menuStop(){
    if(timeOutID != null){
        clearInterval(timeOutID);
    }
}
function doWhileDown(){
    if(shiftCounter < movableHeight - pixelsToShift){
        shiftCounter += pixelsToShift;
        
        var marginTop = (-menuAreaHeight - 2) - shiftCounter;
        
        topClip = shiftCounter;
        bottomClip = menuAreaHeight + shiftCounter;
        document.getElementById("menuItemsDiv").style.clip = "rect(" + topClip + "px " + rightClip + "px " + bottomClip + "px " + leftClip + "px)";
        document.getElementById("menuItemsDiv").style.marginTop = marginTop + "px";
    }
}
function doWhileUp(){
    if(shiftCounter >= pixelsToShift){
        shiftCounter -= pixelsToShift;
        
        var marginTop = (-menuAreaHeight - 2) - shiftCounter;
        
        topClip = shiftCounter;
        bottomClip = menuAreaHeight + shiftCounter;
        document.getElementById("menuItemsDiv").style.clip = "rect(" + topClip + "px " + rightClip + "px " + bottomClip + "px " + leftClip + "px)";
        document.getElementById("menuItemsDiv").style.marginTop = marginTop + "px";
    }
}