//functies voor de layers bij de 3-hoekjes
var popupMenuTimer = 1;
var hideMenuTimer = 2;
var popupSubTimer = 3;
var hideSubTimer = 4;
var mouseoverMenuLayer = - 1;
var mouseoverSubLayer = - 1;
var imageId = '';
var overMenuCnt = 0;
var changecolor = 'onmouseover="this.className = \'odd\';" onmouseout="this.className = \'\';"';

function GetElementSize(element) {
    var result = new Object();
    result.width = 0;
    result.height = 0;
    if (element.offsetWidth && element.offsetHeight) {
        result.width = element.offsetWidth;
        result.height = element.offsetHeight;
    }
    else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
        result.width = element.style.pixelWidth;
        result.height = element.style.pixelHeight;
    }
    return result;
}

function getLayer( name )
{
	return document.getElementById( name ).style;
}

function showLayer( name, left, top)
{
    
    var layer = getLayer( name )
    var pos = GetElementSize(document.getElementById(name));
    tab.className = "tab selected";
    layer.visibility= "hidden";
    layer.display = 'block';


    var offsetContentRechts = WebForm_GetElementPosition(document.getElementById("rightTabContainer")).x
    var widthContentRechts = WebForm_GetElementPosition(document.getElementById("rightTabContainer")).width 
    var rightOffsetContentRechts = offsetContentRechts + widthContentRechts
  
    var layerRightPos = left + (WebForm_GetElementPosition(document.getElementById(name)).width)
    if (layerRightPos > rightOffsetContentRechts)
    {
        left = rightOffsetContentRechts  - WebForm_GetElementPosition(document.getElementById(name)).width - 8
    }
    layer.top = top +"px";
    layer.left = left + "px";
    layer.visibility= "visible";
    
    
}

function hideLayer( name )
{
    var layer = getLayer( name );
    
    if (tab !=null)
    {
     
        tab.className = GetCssClass(tab);
        tab = null;
    }
    
    layer.display = "none";
}

function popupMenuLayer( LayerID, MenuItem, left, top, width)
{
    
    var menuopb = "<table border='0' cellpadding='0' cellspacing='0' style='width:" + width + "px;' ><Tr><td>";
    var cssClass="";
    var strLength = 0;

    layer = document.getElementById( LayerID );
	layer.style.zIndex = 1000;

    layer.innerHTML = menuopb + MenuItem.innerHTML + "</td></tr></table>"
 
    var popupTimer;
    clearTimeout ( hideMenuTimer );
    popupTimer = setTimeout( "clearTimeout( popupMenuTimer); showLayer('" + LayerID + "', " + left + ", " + top + ", " + width + ");", 10 );
    popupMenuTimer = popupTimer;
    overMenuCnt ++;
}

var tmpClass;
function MenuHover(obj, select)
{  
    var lastItem = false;

    if (obj.className.indexOf("last") >= 0)
        lastItem = true;
        
    if (select)
    {
        tmpClass = obj.className;
        if (!lastItem)
        {
            obj.className = " select";
        }
        else
        {
            obj.className = " lastselect";
         }
        
    }
    else
    {
        obj.className = tmpClass;
    }
}

function outMenuLayer( LayerID )
{
    var hideTimer;
    clearTimeout ( popupMenuTimer );
    hideTimer = setTimeout( "if((overMenuCnt == overMenuCnt)&&(mouseoverSubLayer== -1)) hideLayer('" + LayerID + "');",
                            250 );
    hideMenuTimer = hideTimer;
    mouseoverMenuLayer = - 1;
}

function onMenuLayer( LayerID )
{
    clearTimeout ( hideMenuTimer );
    mouseoverMenuLayer = LayerID;
}


function LayerOpbouw(obj, menuItem)
{
    
	popupMenuLayer('menuLayer', menuItem, WebForm_GetElementPosition(obj).x, WebForm_GetElementPosition(obj).y+29, WebForm_GetElementPosition(obj).width + 10);
}
        
function GetCssClass(obj)
{
    var css = "tab";
    if (obj.id == selectedTab)
        css += " selected";
       
    return css;
        
}

var tab = null;
function SetSelected(obj, active, menuItem)
{
   
    if (tab != null && active && tab != obj)
    {
        tab.className = GetCssClass(tab);
        tab = null;
    }
    
    tab = obj;
    menuItem = document.getElementById("subMenu"+ (obj.id).replace("tab",""));

    if (active)
    {
        tmpTabCss = tab.className;
        if ( menuItem != null)
        {
            LayerOpbouw(obj, menuItem); 
        }
        else
        {
            tab.className = "tab selected";
            tab=null;
         }
            
    }
    else
    {
        if ( menuItem != null)
            outMenuLayer('menuLayer');
        else
            obj.className = GetCssClass(obj);
    }
                               
}