function displaySubMenu(subMenu)
{
	var div = document.getElementById(subMenu);
		changeOpac(0, subMenu);
		div.style.display = 'block';

		opacity(subMenu, 0, 100, 200);
}

function hideSubMenu(subMenu)
{
	
	opacity(subMenu, 100, 0, 200);
}

function closeMe(subMenu)
{
	div.style.display = 'none';	
}

function opacity(id, opacStart, opacEnd, millisec) 
{
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
    var div = document.getElementById(id);

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) 
    {
        for(i = opacStart; i >= opacEnd; i--) 
        {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
	    div.style.display = 'none';   
    } 	
    
    else if(opacStart < opacEnd) 
    {
	   div.style.display = 'block';   
        for(i = opacStart; i <= opacEnd; i++)
        {
	        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
	        timer++;
        }
    }
} 

//change the opacity for different browsers
function changeOpac(opacity, id) 
{
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}