var currentPage = null;
function displayComponent(target, currentPageKey) {
    currentPage = currentPageKey;
    if (typeof target == 'string') target = document.getElementById(target);
    if (target) {
        if (browser.isGecko) { document.getElementById('Left_Navigation').className = 'Left_Navigation_Gecko'; }
        
        document.getElementById('Left_Navigation').style.position = 'absolute'
        document.getElementById('Left_Navigation').style.display = 'inline';
        
        var parentWrapper = document.getElementById('Left_Navigation_Parent_Wrapper');
        if (parentWrapper) document.body.removeChild(parentWrapper);        
        
        parentWrapper = document.createElement('div');
        parentWrapper.id = 'Left_Navigation_Parent_Wrapper';
        parentWrapper.className = 'Left_Navigation_Parent_Wrapper';
        
        for (var i = 0; i < navigationArray.children.length; i++) {
            if (navigationArray.children[i].name.substring(0,1) != "_") {
                var parentItem = document.createElement('div');
                parentItem.id = 'Left_Navigation_Parent_' + i;
                parentItem.className = 'Left_Navigation_Parent';                     
                pngBackground(parentItem, imageNotLocalizedPath + '/shared_component/left-nav-inactive-arrow.png', 'image');
                parentItem.innerHTML = '<a href="javascript://">' + navigationArray.children[i].name + '</a>';
                parentItem.setAttribute('i', i);
                parentItem.onclick = parentClicked;
                parentWrapper.appendChild(parentItem);
                
                if (navigationArray.children[i].pagekey == currentPageKey) {
                    expandMenu(parentItem);
                } else {
                    if (navigationArray.children[i].children) {
                        for (var x = 0; x < navigationArray.children[i].children.length; x++) {
                            if (navigationArray.children[i].children[x].pagekey == currentPageKey) {
                                expandMenu(parentItem);
                            }
                        }
                    }
                }
            }
        }
        target.appendChild(parentWrapper); 
    }           
}

function deactivateParents() {
    for (var i = 0; i < navigationArray.children.length; i++) {
        var parentItem = document.getElementById('Left_Navigation_Parent_' + i);
        if (parentItem) {
			parentItem.className = 'Left_Navigation_Parent';
	        pngBackground(parentItem, imageNotLocalizedPath + '/shared_component/left-nav-inactive-arrow.png', 'image');
		}
    }
}

function parentClicked() {
    if (this.className == 'Left_Navigation_Parent_Active') {
        this.className = 'Left_Navigation_Parent';
        this.style.filter = null;
        pngBackground(this, imageNotLocalizedPath + '/shared_component/left-nav-inactive-arrow.png', 'image');       
        childWrapper = document.getElementById('Left_Navigation_Child_Wrapper');
        if (childWrapper) childWrapper.parentNode.removeChild(childWrapper);
    } else {        
       expandMenu(this);
    }
}

function expandMenu(menu) {
        child = expandChild(menu.getAttribute('i'));
        deactivateParents();
        menu.className = 'Left_Navigation_Parent_Active';
        pngBackground(menu, imageNotLocalizedPath + '/shared_component/left-nav-bg.png', 'image');
        if (child) menu.parentNode.insertBefore(child, menu.nextSibling);
}

function expandChild(parentId) {      
    childWrapper = document.getElementById('Left_Navigation_Child_Wrapper');
    if (childWrapper) childWrapper.parentNode.removeChild(childWrapper);
    
    childWrapper = document.createElement('div');
    childWrapper.id = 'Left_Navigation_Child_Wrapper';
    childWrapper.className = 'Left_Navigation_Child_Wrapper';
        
    var childItem = document.createElement('div');
    childItem.id = 'Left_Navigation_Child_Parent';
    if (navigationArray.children[parentId].pagekey == currentPage) {
        childItem.className = 'Left_Navigation_Child_Active';            
    } else {
        childItem.className = 'Left_Navigation_Child';            
    }           
    childItem.innerHTML = '<a href="' + navigationArray.children[parentId].url +'">' + navigationArray.children[parentId].name + "</a>"; 
    childItem.setAttribute('i', 'parent'); 
    childItem.setAttribute('parent', parentId);         
    childItem.onclick = childClicked;
    childWrapper.appendChild(childItem);
    
    if (navigationArray.children[parentId].children) {        
                          
        for (var i = 0; i < navigationArray.children[parentId].children.length; i++) {
            if (navigationArray.children[parentId].children[i].name.substring(0,1) != "_") {
                var childItem = document.createElement('div');
                childItem.id = 'Left_Navigation_Child_' + i;
                if (navigationArray.children[parentId].children[i].pagekey == currentPage) {
                    childItem.className = 'Left_Navigation_Child_Active';   
                } else {
                    childItem.className = 'Left_Navigation_Child';            
                }
                          
                childItem.innerHTML = '<a href="' + navigationArray.children[parentId].children[i].url + ' ">' + navigationArray.children[parentId].children[i].name + "</a>"; 
                childItem.setAttribute('i', i); 
                childItem.setAttribute('parent', parentId);             
                //childItem.onclick = childClicked;
                childWrapper.appendChild(childItem);
            }
        }                  
    }  
    return childWrapper;    
}

function childClicked() {
    if (this.getAttribute('i') == 'parent' ) {
        window.location = navigationArray.children[this.getAttribute('parent')].url;    
    } else {
        window.location = navigationArray.children[this.getAttribute('parent')].children[this.getAttribute('i')].url;    
    }
}