/* declaring variables and init them */
var IE = document.all?true:false;
var boxHeight = 100;
var boxWidth = 100;
var maxBoxHeight = 80;
var maxBoxWidth = 250;
var speed = 50;
var mouseX = 0;
var mouseY = 0;

/* this function draws the box */
function openBox(myEvent)
{			
    /* captures the mouse cursor position 
            for the box initial position */
    /*if(IE){ 
        mouseX = event.clientX
        mouseY = event.clientY
    }
    else {
        mouseX = myEvent.clientX
        mouseY = myEvent.clientY
    }	*/
    
    /* init the box style and show it on the screen */
    with(document.getElementById("box1").style)
    {
        //visibility = "visible";
        display = "inline";
        width = 0;
        height = 0;
        /*position = "absolute";
        left = (mouseX-maxBoxWidth) + "px";
        top = mouseY + "px";*/
    }
    
    /* hide the control box*/
    document.getElementById("contentBox").style.display = "inline";
    document.getElementById("box1").style.display = "inline";
    animateBox();
}

/* this function animates the box on the screen */
function animateBox()
{
    /* stops expanding the box if the size has hit the max */
    if(boxWidth >= maxBoxWidth && boxHeight >= maxBoxHeight)
    {		
        /* resets all the variables before 
            ending the script */
        boxWidth = 0;
        boxHeight = 0;
        speed = 50;
        mouseX = 0;
        mouseY = 0;
        
        //document.getElementById("contentBox").style.visibility = "visible";
        return
    }
    
    /* expand the box size variables */
    if(boxWidth <= maxBoxWidth)
        boxWidth += speed;
    if(boxHeight <= maxBoxHeight)
        boxHeight += speed;
                
    /* use the box size vars to size up the box */
    with(document.getElementById("box1").style)
    {
        width = boxWidth;
        height = boxHeight;
    }
    
    /* call the animatebox function 
            in an interval of time */
    setTimeout("animateBox();", 20);
}
/* close the box */
function CloseHideBox()
{
    document.getElementById("box1").style.display = "none";
    document.getElementById("contentBox").style.display = "none";
}

/* close the box */
function CloseBox()
{
    document.getElementById("box1").style.display = "none";
    document.getElementById("contentBox").style.display = "none";
}