function getRef(objectName)
{
	return document.getElementById(objectName);
}

// Create fade efect
function fadeStart(containerName, fadeValue, fadeIncrementValue)
{
   	var obj = getRef(containerName);
   	
	if(fadeValue < 99)
	{
		obj.style.filter = 'alpha(opacity=' + fadeValue + ');-moz-opacity:.' + fadeValue + ';opacity:.' + fadeValue + ';'

		setTimeout('fadeStart(\'' + containerName + '\', ' + (fadeValue + fadeIncrementValue) + ', ' + fadeIncrementValue + ')', 50);
	}
	else
	{
	    obj.style.filter = '';
	}
}

// Show and hide panels
// and change styles
function SwitchMenu(menuName, itemId, itemsCount, theme, fadeIncrementValue, autoHide, showFade)
{
	for(var i=0; i<itemsCount; i++ )
	{
    	var obj = getRef(menuName + 'container' + i);
    	
	    if(itemId == i)
	    {
	        if(obj.style.display == "block" || obj.style.display == "inline")
	        {
	    		obj.style.display = "none";

				getRef(menuName + 'master' + i + 'Left').className = theme + '_ctrlPanelBar_MouseOver_LeftParent';
				getRef(menuName + 'master' + i).className = theme + '_ctrlPanelBar_MouseOver_Parent';
				getRef(menuName + 'master' + i + 'Right').className = theme + '_ctrlPanelBar_MouseOver_RightParent';
	        }
	        else
	        {
	            if(showFade)
	            {
                    fadeStart( menuName + 'container' + i, 0, fadeIncrementValue);
                }
                obj.style.display = "block";
	    		
				getRef(menuName + 'master' + i + 'Left').className = theme + '_ctrlPanelBar_Select_MouseOver_LeftParent';
				getRef(menuName + 'master' + i).className = theme + '_ctrlPanelBar_Select_MouseOver_Parent';
				getRef(menuName + 'master' + i + 'Right').className = theme + '_ctrlPanelBar_Select_MouseOver_RightParent';
	        }
	    }
	    else
	    {
	        if(autoHide == true)
	        {
	    		obj.style.display = "none";

				getRef(menuName + 'master' + i + 'Left').className = theme + '_ctrlPanelBar_Normal_LeftParent';
				getRef(menuName + 'master' + i).className = theme + '_ctrlPanelBar_Normal_Parent';
				getRef(menuName + 'master' + i + 'Right').className = theme + '_ctrlPanelBar_Normal_RightParent';
	        }
	    }
	}
}

// Change parent styles elements in MouseOver
function parentMouseOver(containerName, itemId, theme, isEmpty)
{
	var obj = getRef(containerName + 'container' + itemId);
	
	var itemStyleName = '';
	if(isEmpty) itemStyleName = "_Empty";

	if(obj.style.display == 'none')
	{
		getRef(containerName + 'master' + itemId + 'Left').className = theme + '_ctrlPanelBar' + itemStyleName + '_MouseOver_LeftParent';
		getRef(containerName + 'master' + itemId).className = theme + '_ctrlPanelBar' + itemStyleName + '_MouseOver_Parent';
		getRef(containerName + 'master' + itemId + 'Right').className = theme + '_ctrlPanelBar' + itemStyleName + '_MouseOver_RightParent';
	}
	else
	{
		getRef(containerName + 'master' + itemId + 'Left').className = theme + '_ctrlPanelBar_Select_MouseOver_LeftParent';
		getRef(containerName + 'master' + itemId).className = theme + '_ctrlPanelBar_Select_MouseOver_Parent';
		getRef(containerName + 'master' + itemId + 'Right').className = theme + '_ctrlPanelBar_Select_MouseOver_RightParent';
	}
}

// Change parent styles elements in MouseOut
function parentMouseOut(containerName, itemId, theme, isEmpty)
{
	var obj = getRef(containerName + 'container' + itemId);

	var itemStyleName = '';
	if(isEmpty) itemStyleName = "_Empty";

	if(obj.style.display == 'none')
	{
		getRef(containerName + 'master' + itemId + 'Left').className = theme + '_ctrlPanelBar' + itemStyleName + '_Normal_LeftParent';
		getRef(containerName + 'master' + itemId).className = theme + '_ctrlPanelBar' + itemStyleName + '_Normal_Parent';
		getRef(containerName + 'master' + itemId + 'Right').className = theme + '_ctrlPanelBar' + itemStyleName + '_Normal_RightParent';
	}
	else
	{
		getRef(containerName + 'master' + itemId + 'Left').className = theme + '_ctrlPanelBar_Select_Normal_LeftParent';
		getRef(containerName + 'master' + itemId).className = theme + '_ctrlPanelBar_Select_Normal_Parent';
		getRef(containerName + 'master' + itemId + 'Right').className = theme + '_ctrlPanelBar_Select_Normal_RightParent';
	}
}

// Change subitems styles in MouseOver
function itemsMouseOver(itemName, theme, isCurrentItem)
{
    var itemStyleName = 'MouseOver';
    
    if(isCurrentItem)
    {
        itemStyleName = "MouseOver_Selected";
    }
    
	getRef(itemName + 'Row').className = theme + '_ctrlPanelBar_'+itemStyleName+'_ItemsRowsContainer';
	getRef(itemName + 'Left').className = theme + '_ctrlPanelBar_'+itemStyleName+'_LeftItem';
	getRef(itemName).className = theme + '_ctrlPanelBar_'+itemStyleName+'_Item';
	getRef(itemName + 'Right').className = theme + '_ctrlPanelBar_'+itemStyleName+'_RightItem';
}

// Change subitems styles in MouseOut
function itemsMouseOut(itemName, theme, isCurrentItem)
{
    var itemStyleName = 'Normal';
    
    if(isCurrentItem)
    {
        itemStyleName = "Selected";
    }
	getRef(itemName + 'Row').className = theme + '_ctrlPanelBar_'+itemStyleName+'_ItemsRowsContainer';
	getRef(itemName + 'Left').className = theme + '_ctrlPanelBar_'+itemStyleName+'_LeftItem';
	getRef(itemName).className = theme + '_ctrlPanelBar_'+itemStyleName+'_Item';
	getRef(itemName + 'Right').className = theme + '_ctrlPanelBar_'+itemStyleName+'_RightItem';
}

// Draw menu
// container ID, items array, default open item, theme name, fade increment value, auto hide, vetical panel bar, enable fade efect, use postback event, expand all items, current selected item
function drawMenu(containerName, items, defaultItem, theme, fadeIncrementValue, autoHide, isVertical, showFade, doPostBack, isStatic, currentItem)
{
	// Get container object
	var obj = getRef(containerName);

	var str = '';

	// loop all parent items
	for(var i=0; i<items.length; i++ )
	{
	    // create empty image for NULL icons
        var parentLeftIcon = emptyImage;
        var parentRightIcon = emptyImage;
        
		if(items[i][0][1] != null) parentLeftIcon = items[i][0][1];
		if(items[i][0][2] != null) parentRightIcon = items[i][0][2];


        var parentItemTitle = items[i][0][3];
        
        var onClickEvent = "";
        var panelStyleName = "";
        var isEmptyParent = false;
        
        if(isStatic)
        {
            if(items[i][0][4] != '' && items[i][0][4] != '#')
            {
                if(doPostBack)
                {
                    onClickEvent = 'onClick="' +items[i][0][4] + '"; ';
                }
                else
                {
                    onClickEvent = 'onClick="javascript:window.location.href=\'' +items[i][0][4] + '\'"; ';
                }
            }
        }
        else
        {
	        // create parent item that have't subitems.
            if(items[i].length < 2)
            {
                panelStyleName = '_Empty';
                isEmptyParent = true;
                if(items[i][0][4] != '' && items[i][0][4] != '#')
                {
                    if(doPostBack)
                    {
                        onClickEvent = 'onClick="' +items[i][0][4] + '"; ';
                    }
                    else
                    {
                        onClickEvent = 'onClick="javascript:window.location.href=\'' +items[i][0][4] + '\'"; ';
                    }
                }
            }
            else
            {
                onClickEvent = 'onClick="SwitchMenu(\'' + containerName + '\',' + i + ',' + items.length + ', \'' + theme + '\',' + fadeIncrementValue + ', ' + autoHide + ', ' + showFade + ')"';
            }
        }

        // Add separator element
        if(i > 0)
        {
            str += '<div class="' + theme + '_ctrlPanelBar' + '_Separator"><div style="width: 1px; height: 1px; overflow: hidden;">&nbsp;</div></div>';
        }

        // Add style for selected parent item
        if(currentItem == items[i][0][7])
        {
            str += '<div class="SelectedParent">';
        }
        
        str += '<table cellspacing="0" cellpadding="0" border="0" class="' + theme + '_ctrlPanelBar' + panelStyleName + '_ParentContainer" id="' + containerName + 'parenContainer' + i + '" ' + onClickEvent + ' onmouseout="parentMouseOut(\'' + containerName + '\', ' + i + ',\'' + theme + '\', ' + isEmptyParent + ')" onMouseOver="parentMouseOver(\'' + containerName + '\',' + i + ',\'' + theme + '\', ' + isEmptyParent + ')"><tr>';
		str += '<td class="' + theme + '_ctrlPanelBar' + panelStyleName + '_Normal_LeftParent" id="' + containerName + 'master' + i + 'Left">' + parentLeftIcon + '</td>';
		str += '<td class="' + theme + '_ctrlPanelBar' + panelStyleName + '_Normal_Parent" id="' + containerName + 'master' + i + '">' + parentItemTitle + '</td>';
		str += '<td class="' + theme + '_ctrlPanelBar' + panelStyleName + '_Normal_RightParent" id="' + containerName + 'master' + i + 'Right">' + parentRightIcon + '</td>';
		str += '</tr></table>';

		// End DIV tag with style for selected parent item
        if(currentItem == items[i][0][7])
        {
            str += '</div>';
        }

        if(items[i].length < 2)
        {
            str += '<div style="display:none;">';
        }
        
		// If tihis item is open by default open it.
		if( isStatic || (defaultItem != null && defaultItem == items[i][0][7]))
		{
			str += '<table cellspacing="0" cellpadding="0" border="0" class="' + theme + '_ctrlPanelBar_ItemsContainer" style="display:block;" id="' + containerName + 'container' + i + '" ><tr><td>';
		}
		else
		{
			str += '<table  cellspacing="0" cellpadding="0" border="0" class="' + theme + '_ctrlPanelBar_ItemsContainer" style="display:none;" id="' + containerName + 'container' + i + '" ><tr><td>';
		}

	
	    // create sub items, and container for sub items.
        for(var j=1; j<items[i].length; j++)
        {
            // create empty images for NULL icons
            var itemLeftIcon = emptyImage;
            var itemRightIcon = emptyImage;
            
            panelStyleName = "Normal";
            var isCurrentItem = false
            if(currentItem == items[i][j][7])
            {
                panelStyleName = "Selected"
                isCurrentItem = true;
            }
	        
		    if(items[i][j][1] != null) itemLeftIcon = items[i][j][1];
		    if(items[i][j][2] != null) itemRightIcon = items[i][j][2];

	        str += '<table cellspacing="0" cellpadding="0" border="0" class="' + theme + '_ctrlPanelBar_'+panelStyleName+'_ItemsRowsContainer" id="' + containerName + 'container' + i + 'item' + j + 'Row" onMouseOut="itemsMouseOut(\'' + containerName + 'container' + i + 'item' + j + '\',\'' + theme + '\', ' + isCurrentItem + ')" onMouseOver="itemsMouseOver(\'' + containerName + 'container' + i + 'item' + j + '\',\'' + theme + '\', ' + isCurrentItem + ')">';
		    if(isVertical)
		    {
		        str += '<tr><td class="' + theme + '_ctrlPanelBar_'+panelStyleName+'_LeftItem" id="' + containerName + 'container' + i + 'item' + j + 'Left">' + itemLeftIcon + '</td></tr>';
		        str += '<tr><td class="' + theme + '_ctrlPanelBar_'+panelStyleName+'_Item" id="' + containerName + 'container' + i + 'item' + j + '" ><a href="' + items[i][j][4] + '" target="' + items[i][j][5] + '">' + items[i][j][3] + '</a></td></tr>';
		        str += '<tr><td class="' + theme + '_ctrlPanelBar_'+panelStyleName+'_RightItem" id="' + containerName + 'container' + i + 'item' + j + 'Right">' + itemRightIcon + '</td></tr>';
		    }
		    else
		    {
		        str += '<tr>';
		        str += '<td class="' + theme + '_ctrlPanelBar_'+panelStyleName+'_LeftItem" id="' + containerName + 'container' + i + 'item' + j + 'Left">' + itemLeftIcon + '</td>';
		        str += '<td class="' + theme + '_ctrlPanelBar_'+panelStyleName+'_Item" id="' + containerName + 'container' + i + 'item' + j + '" ><a href="' + items[i][j][4] + '" target="' + items[i][j][5] + '">' + items[i][j][3] + '</a></td>';
		        str += '<td class="' + theme + '_ctrlPanelBar_'+panelStyleName+'_RightItem" id="' + containerName + 'container' + i + 'item' + j + 'Right">' + itemRightIcon + '</td>';
		        str += '</tr>';
		    }
	        str += '</table>';
        }
        
	    str += '</td></tr></table>';
        if(items[i].length < 2)
        {
            str += '</div>';
        }
	}
	
	// Set generated code in menu container.
	obj.innerHTML = str;
}

var emptyImage = '<div style="width:1px; height:1px; overflow:hidden;"></div>';
// Panel bar items declaration
//var menuItems = new Array();

// type, left icon, right icon, title, URL, target, description, menuItemID 
//menuItems[0] = new Array();
//menuItems[0][0] = [0, null, null, 'Test1', '#', '', '', 23];
//menuItems[0][1] = [1, null, null, 'SubTest11', '#', '', '', 24];
//menuItems[0][2] = [1, null, null, 'SubTest12', '#', '', '', 25];
//menuItems[0][3] = [1, null, null, 'SubTest13', '#', '', '', 26];
//menuItems[1] = new Array();
//menuItems[1][0] = [0, null, null, 'Test2', '#', '', '', 27];
//menuItems[1][1] = [1, null, null, 'SubTest21', '#', '', '', 28];
//menuItems[1][2] = [1, null, null, 'SubTest22', '#', '', '', 29];
//menuItems[2] = new Array();
//menuItems[2][0] = [0, null, null, 'Test3', '#', '', '', 30];
//menuItems[2][1] = [1, null, null, 'SubTest31', '#', '', '', 31];
//menuItems[2][2] = [1, null, null, 'SubTest32', '#', '', '', 32];