<!--
//

//make a quasi Enum
var State = { Collapsed:0, Expanded:1, Collapsing:2, Expanding:3 };

var shrinkId=0;
var growId=0;
var divID;
var panel2MaxWidth=210;
var panel3MaxWidth=380;
var currentDiv

var myLevel1Panel = new MenuPanel(); 
var myLevel2Panel = new MenuPanel(); 
var myLevel3Panel = new MenuPanel(); 

myLevel1Panel.state = State.Expanded;
myLevel2Panel.state = State.Collapsed;
myLevel3Panel.state = State.Collapsed;

var itemGrowing = false;

function MenuPanel()
{
    // initialize the member variables for this instance
    this.div;  
    this.state;
    this.level;
    //this.shrinkId;
    //this.growId;
    this.levelVariableName;
    this.parentMenuId;
    this.contentDiv;
    this.maxWidth;
    
    // initialize the member function references
    this.expand = expand;  
    this.collapse = collapse;
    this.collapseNoShrink = collapseNoShrink;
    this.growTo = growTo;
    this.shrinkTo = shrinkTo;
    this.growingStopped = growingStopped;
    this.shrinkingStopped = shrinkingStopped;
    
    // define the methods
    function expand()
    {
        
        if (this.div != null)
	    {   
			
	       // itemGrowing = true;
	        this.state = State.Expanding;
	        this.div.style.visibility = 'visible';
	        
	        growId = setInterval(this.levelVariableName+'.growTo("'+this.div.id+'", "'+this.contentDiv.id+'",'+this.maxWidth+',growingStopped)',10);
			this.div.style.left = '50px';
			this.div.style.top = '50px';
			//if ( this.div.style.visibility == 'visible' ) {
			//   this.div.focus();
           // }
     
        } else {
		
			itemGrowing = false;
		
		}
    }
    
    function collapse()
    {       
        
        if (this.div != null)
	    {   
	        this.state = State.Collapsing;
            shrinkId = setInterval(this.levelVariableName+'.shrinkTo("'+this.div.id+'", "'+this.contentDiv.Id+'",shrinkingStopped)',2);
	        this.div.style.left = '50px';
	        this.div.style.top = '50px';
			
			itemGrowing = false;
            //if ( this.div.style.visibility == 'visible' ) {
	        //    this.div.focus();
            //}
        }		  
    }
    
    function collapseNoShrink(name)
    {
        if (this.div != null)
	    {   
	        this.state = State.Collapsing;
	        this.div.style.left = '50px';
	        this.div.style.top = '50px';
            this.div.style.width = '0px';
            
            
            this.contentDiv.style.visibility = 'hidden';
            this.contentDiv.style.left = '50px';
	        this.contentDiv.style.top = '50px';
            this.contentDiv.style.width = '0px';            
            this.state = State.Collapsed;
			itemGrowing = false;
	    }
    
    }
    
    //helper functions
    function growTo(panelId, content, maxWidth, callbackfunc) {
        
        var myitem = document.getElementById(panelId);
        var mycontent = document.getElementById(content);
        if (myitem != null && mycontent != null)
        {
            myitem.style.zIndex = 1;
            mycontent.style.zIndex = 1;
            myitem.style.display = 'block';
            mycontent.style.display = 'block';
            mycontent.style.height = 'auto';
            var myWidth = parseInt(myitem.offsetWidth);           
            
            if (myWidth<=parseInt(maxWidth)) {            
                //myWidth = (myWidth*1.1)+2;
				
				
				
				myWidth = maxWidth;
				clearInterval(growId);
				mycontent.style.visibility = 'visible';
				callbackfunc(panelId);
				
				myitem.style.width = parseInt(myWidth) +'px';
                mycontent.style.width = myitem.style.width; 
                             
                
            } else {            
                clearInterval(growId);   
                growId = 0;  
                mycontent.style.visibility = 'visible';
                callbackfunc(panelId);		
            }    
        }
        else 
        {
            clearInterval(growId);    
            growId = 0;
            callbackfunc(panelId);		
        }    
    }

    function shrinkTo(panelId, content, callbackfunc) {

        
        var myitem = document.getElementById(panelId);
        var mycontent = document.getElementById(content);
        mycontent.style.visibility = 'hidden';
        if (myitem != null)
        {
            var myWidth = parseInt(myitem.offsetWidth);
            if (myWidth>=2) {
                myWidth = (myWidth*0.9)-1;
                myitem.style.width = parseInt(myWidth) +'px';
                mycontent.style.width = myitem.style.width;
            } 
            else 
            {
                clearInterval(shrinkId);  
                shrinkId = 0; 
                callbackfunc(panelId);                          
            }
        }
        else 
        {
            clearInterval(shrinkId); 
            shrinkId = 0;   
            callbackfunc(panelId);		
        }      
    	
     }
    
}

function growingStopped(panelId){
	switch (panelId){
    case "level2":
        myLevel2Panel.state = State.Expanded;
        break;
    case "level3":
       myLevel3Panel.state = State.Expanded;
        break; 
    }    
   	//alert('growingStopped');
	itemGrowing = false;
	
}

function shrinkingStopped(panelId){
    switch (panelId){
    case "level2":
        myLevel2Panel.state = State.Collapsed;
        break;
    case "level3":
       myLevel3Panel.state = State.Collapsed;
        break; 
    }    
    //alert('shrinkingStopped');
}


//main click event
function ItemClicked(LevelClicked, MenuId)
{
	//alert(itemGrowing);
    var panelVar;    
   if (itemGrowing == false)
   {
	   itemGrowing = true;
		switch (LevelClicked){
		case 1:
			//set up the variable
			
			myLevel1Panel.levelVariableName = 'myLevel1Panel';
			myLevel1Panel.menuId = MenuId;
			
			myLevel2Panel.level = 2;   
			myLevel2Panel.div = document.getElementById('level2');        
			myLevel2Panel.levelVariableName = 'myLevel2Panel';
			myLevel2Panel.maxWidth = panel2MaxWidth;
			
			panelVar = myLevel2Panel;
			
			//if panel2 and/or panel3 is expanded then collapse them first
			if (myLevel3Panel.state == State.Expanded)
			{  
				myLevel3Panel.collapseNoShrink();
			}  
			if (myLevel2Panel.state == State.Expanded)
			{  
				//hide the background
				var background = document.getElementById('content');
				if (background != null) {
					background.style.visibility = 'visible';
				}
				myLevel2Panel.collapseNoShrink();
				if (myLevel2Panel.contentDiv.id == 'childOf'+MenuId)
				//if (document.getElementById('childOf'+MenuId).style.visibility == 'visible')
				{    
					//this is the same sub menu, just leave it collapsed                
					return;
				}
				
			}  
			
			break;
		case 2:
			
			myLevel2Panel.levelVariableName = 'myLevel2Panel';
			myLevel2Panel.menuId = MenuId;
			
			myLevel3Panel.level = 3;   
			myLevel3Panel.div = document.getElementById('level3');        
			myLevel3Panel.levelVariableName = 'myLevel3Panel';
			myLevel3Panel.maxWidth = panel3MaxWidth;
			
			panelVar = myLevel3Panel;
			
			 //if panel3 is expanded then collapse them first
			
			if (myLevel3Panel.state == State.Expanded)
			{  
				myLevel3Panel.collapseNoShrink();
				if (myLevel3Panel.contentDiv.id == 'childOf'+MenuId)
				//if (document.getElementById('childOf'+MenuId).style.visibility == 'visible')
				{    
					//this is the same sub menu, just leave it collapsed                
					return;
				}
				
			}  
			break;
		}
		
		panelVar.parentMenuId = MenuId;	
		panelVar.contentDiv = document.getElementById('childOf'+MenuId);     
		if (parseInt(panelVar.div.style.width) <= panelVar.maxWidth) 
		{
			//hide the background
			var background = document.getElementById('content');
			if (background != null) {           
				background.style.visibility = 'hidden';
			}
			//alert ('calling expand');
			panelVar.expand();	    
		}
		else
		{   
			//show the background
			var background = document.getElementById('content');
			if (background != null) {
				background.style.visibility = 'visible';
			}
			//alert ('calling collapse');
			panelVar.collapse();
		}
   }
		
}
// -->