function browserCheck()
{
    // check if browser is MSIE and do the necessary dirt if it is
    var browserName = navigator.appName;
    if (browserName == "Microsoft Internet Explorer")
    {
    } 

    // menus initially visible for browsers not supporting JS
    // collapse menus in JS supporting browsers
    hideMenu(1);
    hideMenu(2);
    hideMenu(3);
    hideMenu(4);

    // do not align divs until active screen estate usage is minimized
    // (ie menus collapsed)
    alignDivs();
}

function alignDivs()
{
    // make sidebars as big as the contentpane, if the contentpane is bigger

    var mbLeft = document.getElementById("menuLeft");
    var mbRight = document.getElementById("menuRight");
    var contentPane = document.getElementById("content");

    
    var height = parseInt(mbLeft.offsetHeight);
    if (parseInt(contentPane.offsetHeight) > height)
    {
        height = contentPane.offsetHeight;

        mbLeft.style.height = (height) + "px";
        mbRight.style.height = (height) + "px";
    }
}

function toggleNavLink(navLink)
{
    var old_i = findActive();
    var new_i = findIndex(navLink);

    // do nothing if its the same menu.
    if (old_i == new_i)
    {
        return;
    }
    
//    if (old_i == false)
//    {
//        // we have a problem
//        return;
//    }

    // 1. deactivate current listItem
    deactivateMenuItem(old_i);

    // 2. get heights, set height = 0 on new, display = true
    var oldMenu = document.getElementById(subMenuIDs[old_i]);
    var newMenu = document.getElementById(subMenuIDs[new_i]);
    var width = oldMenu.style.width;

    var oldH = parseInt(oldMenu.offsetHeight);
    newMenu.style.display = "";
    var newH = parseInt(newMenu.offsetHeight);
    
    //oldMenu.style.display = "block";
    //newMenu.style.clip = "rect(0,"+width+",0,0)");
    newMenu.style.top = newH;
    newMenu.style.display = "block";

    debug("oldH: " + oldH);
    debug("newH: " + newH);
    
    doSlide(old_i, new_i, oldH, newH, 1);    
    
    return false;
}

function doSlide(old_i, new_i, oldH, newH, i)
{
    // 3. slide
    var oldMenu = document.getElementById(subMenuIDs[old_i]);
    var newMenu = document.getElementById(subMenuIDs[new_i]);
    var width = oldMenu.style.width;

    var oldTH = Math.round(oldH * (slidingTransitions - i) / slidingTransitions);
    var newTH = Math.round(newH * i / slidingTransitions);
    
    //oldMenu.style.clip = "rect(0,"+oldTH+","+width+",0)"; //oldTH + "px";
    //newMenu.style.clip = "rect(0,"+newTH+","+width+",0)": //newTH + "px";
    oldMenu.style.top = oldTH;
    newMenu.style.top = newTH;

    debug("i: " + i);
    debug("oldTH: " + oldTH);
    debug("newTH: " + newTH);
        
    if (i != slidingTransitions)
    {
        // 3.1 keep sliding
        i++;
        timerID = setTimeout("doSlide("+old_i+","+new_i+","+oldH+","+newH+","+i+")", slidingDelay);
    }
    else
    {
        // 4. display = false on old, height = full height
        oldMenu.style.display = "none";
        oldMenu.style.top = 0;
        
        // 5. activate new listItem
        activateMenuItem(new_i);
        
        timerID="";
    }
}

function findActive()
{
    for (i = 0; i < navLinkIDs.length; i++)
    {
        var obj = document.getElementById(navLinkIDs[i]);
        var parentNode = obj.parentNode;
        
        if (parentNode.className == "active")
            return i;
    }
    return false;
}

function findIndex(navLink)
{
    for (i = 0; i < navLinkIDs.length; i++)
    {
        var obj = document.getElementById(navLinkIDs[i]);
        
        if (obj == navLink)
            return i;
    }
    return false;
}

function activateMenuItem(i)
{
    var navLink = document.getElementById(navLinkIDs[i]);
    var listItem = navLink.parentNode;
    listItem.className = "active";
}

function deactivateMenuItem(i)
{
    var navLink = document.getElementById(navLinkIDs[i]);
    var listItem = navLink.parentNode;
    listItem.className = "deactive";
}

function hideMenu(i)
{
    var subMenu = document.getElementById(subMenuIDs[i]);
    subMenu.style.display = "none";
}

// variables & arrays used to identify related DOM items

var navLinkIDs = new Array(5);
navLinkIDs[0] = "navlink1";
navLinkIDs[1] = "navlink2";
navLinkIDs[2] = "navlink3";
navLinkIDs[3] = "navlink4";
navLinkIDs[4] = "navlink5";

var subMenuIDs = new Array(5);
subMenuIDs[0] = "subMenu1";
subMenuIDs[1] = "subMenu2";
subMenuIDs[2] = "subMenu3";
subMenuIDs[3] = "subMenu4";
subMenuIDs[4] = "subMenu5";

var slidingTransitions = 10;
var slidingDelay = 50; // in milliseconds

function debug(text)
{
    var debug = document.getElementById("debug");
    
    debug.innerHTML = debug.innerHTML + text + "<br />";
}