//global variable declarations
var intervalID;  //Reference to the executing animation
var interval = 1;  //The number of times the animation has executed
var imageName = "";  //Holds the image name of the tab
var minHeight = 29;  //The starting height of the tab
var maxHeight = 39;  //The max growing height of the tab
var imageWidth = "105px";  //The base width of the tab image
var unhoverImgSrc = "/graphics/shared/tab.png";  //The base image name of the tab
var hoverImgSrc = "/graphics/shared/tabHover.png";  //The base hover image of the tab
var divStartHeight = 15;  //Starting height of the div containing overlay text
var divEndHeight = 0;  //Holds the height of the div containing overlay text as it grows/shrinks
var txtImgSrc = "/graphics/shared/applyTxt.png";  //tab7 only...the overlay image of the text
var hoverTxtImgSrc = "/graphics/shared/applyTxtHover.png";  //tab7 only...the overlay hover image of the text
var intervalTimeout = 10;  //The growth time in milliseconds
        
//stop currently executing animation and reset image
function resetAnimation(imgName)
{
    //stop animation
    clearInterval(intervalID);
    //find executing image by name
    oldImg = document.getElementsByName(imgName);
    if(imgName != "tab7"){
        //reset image to original height
        oldImg[0].style.height = minHeight + "px";
        //reset image to original width to preserve scale
        oldImg[0].style.width = imageWidth;
        //reset top position to zero
        oldImg[0].style.top = 0 + "px";
        //reset source of image
        oldImg[0].src = unhoverImgSrc;
        //reset interval of animation
        interval = 1;
        //reset corresponding div
        document.getElementById(imgName + "_div").style.height = divStartHeight + "px";
    }else{
        //reset text over state
        document.getElementsByName('applyTxt')[0].src = txtImgSrc;
        //reset top position of text
        document.getElementsByName('applyTxt')[0].top = "0px";
        //reset image to original height
        oldImg[0].style.height = minHeight + "px";
        //reset image to original width to preserve scale
        oldImg[0].style.width = "131px";
        //reset top position to zero
        oldImg[0].style.top = 0 + "px";
        //reset unhover image
        oldImg[0].src = "/graphics/shared/applyTab.png";
        //reset interval of animation
        interval = 1;
        //reset corresponding div
        document.getElementById(imgName + "_div").style.height = 29 + "px";
    }
}
        
//Trigger the hover animation
function startHover(imgName)
{
    //check to see if we are animating currently
    if(intervalID){
    //if currently animating, reset animation
        resetAnimation(imageName);
    }
    //make sure the calling image is in original state
    resetAnimation(imgName);
    //set the global image name to the calling image name
    imageName = imgName;
    //begin animation
    intervalID = window.setInterval("animateHover()", intervalTimeout);
}
        
//Animate hover state of tab
function animateHover()
{
    //find calling image by name
    oldImg = document.getElementsByName(imageName);
    //grab the current height of the calling image
    oldHeight = oldImg[0].height;
    //calculate the new height for the image
    newHeight = oldHeight + 1;
    if(imageName != "tab7"){
        //set the source to hover image
        oldImg[0].src = hoverImgSrc;
        //set the calling image to the new height
        oldImg[0].style.height = newHeight + "px";
        //set width to make sure scale is preserved
        oldImg[0].style.width = imageWidth;
        //make sure the calling image is positioned relativeley
        oldImg[0].style.position = "relative";
        //set the top position for image to the current minus the interval
        oldImg[0].style.top = "-" + interval + "px";
        //calculate new corresponding div height
        divEndHeight = divStartHeight + interval;
        //set the corresponding div height
        document.getElementById(imageName + "_div").style.height = divEndHeight + "px";
        //increase the interval by one
        interval += 1;
        //if the image has grown as much as we want, stop it
        if(interval == (maxHeight-minHeight) + 1)
        {
            //stop executing animation
            clearInterval(intervalID);
            //reset animation
            interval = 1;
        }
    }else{
        //switch text over state
        document.getElementsByName('applyTxt')[0].src = hoverTxtImgSrc;
        //set the source to hover image
        oldImg[0].src = "/graphics/shared/applyTabHover.png";
        //set the calling image to the new height
        oldImg[0].style.height = newHeight + "px";
        //set width to make sure scale is preserved
        oldImg[0].style.width = "131px";
        //make sure the calling image is positioned relativeley
        oldImg[0].style.position = "relative";
        //set the top position for image to the current minus the interval
        oldImg[0].style.top = "-" + interval + "px";
        //calculate new corresponding div height
        divEndHeight = 29 + interval;
        //set the corresponding div height
        document.getElementById(imageName + "_div").style.height = divEndHeight + "px";
        //increase the interval by one
        interval += 1;
        //if the image has grown as much as we want, stop it
        if(interval == (maxHeight-minHeight) + 1)
        {
            //stop executing animation
            clearInterval(intervalID);
            //reset animation
            interval = 1;
        }
    }
}
        
//Trigger the unhover animation
function startUnhover(imgName)
{
    //stop any currently executing animation
    clearInterval(intervalID);
    //set the global image name to calling image
    imageName = imgName;
    //start the animation
    intervalID = window.setInterval("animateUnhover()", intervalTimeout);
}
        
//Animate a tab loosing focus
function animateUnhover()
{
    //find the calling image by name
    oldImg = document.getElementsByName(imageName);
    //grab the current height of the image
    oldHeight = oldImg[0].height;
    if(imageName != "tab7"){
        //switch the image to an unhover image
        oldImg[0].src = hoverImgSrc;
        //get the height we want the image to assume
        newHeight = oldHeight - 1;
        //this is where we set the minimum height for the image
        if(newHeight < minHeight){
        //if the image has reached the mimum allowed size, stop animating it
            resetAnimation(imageName);
        } else {
            //set the height of the image to the new height
            oldImg[0].style.height = newHeight + "px";
            //preserve original width of the image
            oldImg[0].style.width = imageWidth;
            //make sure the image is relatively positioned
            oldImg[0].style.position = "relative";
            //get the current top position of the image
            oldTop = oldImg[0].style.top
            //turn the current top into an integer for calculation
            intOldTop = parseInt(oldTop.replace("px",""));
            //calculate the new top position of the image to keep it on the base of the toolbar
            newTop = intOldTop + 1;
            //calculate new height for corresponding div
            divHeight = divEndHeight - interval;
            //shrink the corresponding div
            document.getElementById(imageName + "_div").style.height = divHeight + "px";
            //increase the interval by one
            interval += 1;
            //if the calculated top position is greater than 0 we do not want to apply it
            if(newTop <= 0){
                //if the new top position is less than zero, apply it
                oldImg[0].style.top = newTop + "px";
            }
        }
    }else{
        //switch text to Unhover state
        document.getElementsByName('applyTxt')[0].src = txtImgSrc;
        //switch the image to an unhover image
        oldImg[0].src = "/graphics/shared/applyTab.png";
        //get the height we want the image to assume
        newHeight = oldHeight - 1;
        //this is where we set the minimum height for the image
        if(newHeight < minHeight){
            //if the image has reached the mimum allowed size, stop animating it
            resetAnimation(imageName);
        } else {
            //set the height of the image to the new height
            oldImg[0].style.height = newHeight + "px";
            //preserve original width of the image
            oldImg[0].style.width = "131px";
            //make sure the image is relatively positioned
            oldImg[0].style.position = "relative";
            //get the current top position of the image
            oldTop = oldImg[0].style.top
            //turn the current top into an integer for calculation
            intOldTop = parseInt(oldTop.replace("px",""));
            //calculate the new top position of the image to keep it on the base of the toolbar
            newTop = intOldTop + 1;
            //calculate new height for corresponding div
            divHeight = divEndHeight - interval;
            //shrink the corresponding div
            document.getElementById(imageName + "_div").style.height = divHeight + "px";
            //increase the interval by one
            interval += 1;
            //if the calculated top position is greater than 0 we do not want to apply it
            if(newTop <= 0){                       
                //if the new top position is less than zero, apply it
                oldImg[0].style.top = newTop + "px";
            }
        }
    }
}
        
function tab7Href()
{
    if(document.getElementsByName('applyTxt')[0].src.indexOf("applyTxt") > 0)
    {
        document.location.href="/Application.aspx";
    }
    else
    {
        document.location.href="/login/MyProfile.aspx";
    }
}