var animTimer = null;
var hideTimer = null;
var frame = 0;
var startX = 0;
var changeX = 0;
var startY = 0;
var changeY = 0;
var startOpacity = 0;
var changeOpacity = 0;
var hideWhenDone = false;
var duration = 0;
var elem = null;


function getElementPos(obj) {
	var totalTop = 0, totalLeft = 0;
	while (obj != null) {
        totalTop += obj.offsetTop;
		totalLeft += obj.offsetLeft;
        obj = obj.offsetParent;
    }
	return { top:totalTop, left:totalLeft };
}

function setElementOpacity(obj, opacity) {
    obj.style.opacity = opacity / 100; 
    obj.style.filter = 'alpha(opacity=' + opacity + ')'; 
}

function cubicOut(t, b, c, d) {
	return c*((t=t/d-1)*t*t + 1) + b;
}

function hideMenuPopup() {
    if (hideTimer != null) {
        clearTimeout(hideTimer);
        hideTimer = null;
    }
    if (animTimer != null) {
        clearInterval(animTimer);
        animTimer = null;
    }
    if (elem != null) {
        elem.style.visibility = 'hidden';
        elem = null;
    }
}

function mouseoverMenuPopup(tabId, menuId) {

    var menuObj = document.getElementById(menuId);
    
    if (menuObj != elem) {
        // cursor was moved over a different tab, so cancel whatever we're doing now
        hideMenuPopup();
    }
    
    if (hideTimer != null) {
        // cursor was moved back overtop of the popup, so cancel the hide timer
        clearTimeout(hideTimer);
        hideTimer = null;
        return;
    }
    
    if (animTimer != null) {
        if (hideWhenDone == true) {
            // stop the fade out
            hideMenuPopup();
        } else {
            // continue animating
            return;
        }
    }
    
    var tabObj = document.getElementById(tabId);
    var tabPos = getElementPos(tabObj);
    menuObj.style.top = 150 + "px";
    menuObj.style.left = tabPos.left + 5 + "px";
    setElementOpacity(menuObj, 0);
    menuObj.style.visibility = 'visible';
    
    frame = 0;
    startX = parseInt(menuObj.style.left);
    changeX = 0;
    startY = parseInt(menuObj.style.top);
    changeY = 10;
    startOpacity = 0;
    changeOpacity = 100;
    hideWhenDone = false;
    duration = 15;
    elem = menuObj;

    animTimer = setInterval("animateMenuPopup()", 20);
}

function animateMenuPopup() {
    
    if (frame > duration) {
        if (hideWhenDone == true) {
            elem.style.visibility = 'hidden';
        }
        clearInterval(animTimer);
        animTimer = null;
    } else {
        var x = cubicOut(frame, startX, changeX, duration);
        var y = cubicOut(frame, startY, changeY, duration);
        var opacity = frame * (changeOpacity / duration) + startOpacity;
        elem.style.left = x + "px";
        elem.style.top = y + "px";
        setElementOpacity(elem, opacity);
        frame++;
    }
}

function fadeMenuPopup() {

    hideTimer = null;
    
    frame = 0;
    startX = parseInt(elem.style.left);
    changeX = 0;
    startY = parseInt(elem.style.top);
    changeY = 10;
    startOpacity = 100;
    changeOpacity = -100;
    hideWhenDone = true;
    duration = 15;
    
    animTimer = setInterval("animateMenuPopup()", 20);
}

function mouseoutMenuPopup() {
    hideTimer = setTimeout("fadeMenuPopup()", 200);
}