function ANF_DropPanelMenu (options)
{   
    this.className          = "ANF_DropPanelMenu";
    this.currentPanel       = false;
    this.currentMenuItem    = false;
    this.menuItemPrefix     = "mainMenuItem_";
    this.panelPrefix        = "mainMenuPanel_";
    this.waitBeforeClose    = 200;
    this.useMenuItemWidth   = false; 
    this.panelXOffset       = 0; 
    this.panelYOffset       = 0;
    this.hidePanelTrigger   = "wrapper"; // the element that when moused over, will trigger the hidePanel method
    this.showPanelClasses   = new Array("panel", "panelsContainer", "active"); // elements with classnames defined in this array, will not cause the currently displayed panel to hide when they are moused over
    this.lastElementMousedOver = false;
    this.menuItems          = new Array();
    
    this.init = function(options){    
        var that                = this;
        this.panelPrefix        = options.panelPrefix?options.panelPrefix:this.panelPrefix;
        this.menuItemPrefix     = options.menuItemPrefix?options.menuItemPrefix:this.menuItemPrefix;
        this.onShowPanel        = options.onShowPanel?options.onShowPanel:this.onShowPanel;
        this.onHidePanel        = options.onHidePanel?options.onHidePanel:this.onHidePanel;
        this.panelXOffset       = options.panelXOffset?options.panelXOffset:this.panelXOffset;
        this.panelYOffset       = options.panelYOffset?options.panelYOffset:this.panelYOffset;
        this.hidePanelTrigger   = options.hidePanelTrigger?options.hidePanelTrigger:this.hidePanelTrigger;
        this.waitBeforeClose    = options.waitBeforeClose?options.waitBeforeClose:this.waitBeforeClose;
        this.useMenuItemWidth   = options.useMenuItemWidth?options.useMenuItemWidth:this.useMenuItemWidth;
        
        // check for a valid hidePanelTrigger
        if(!document.getElementById(this.hidePanelTrigger)){
            this.error("init", "Invalid hidePanelTrigger specified.");
            return;    
        }
        this.hidePanelTrigger = document.getElementById(this.hidePanelTrigger);
        
        // setupMenuItemMouseOvers
        this.setupMenuItemMouseOvers();
        
        document.getElementById('wrapper').onmouseover = function(e){
            var target = that.getEventTarget(e);
            //alert(e.target.className);
            that.lastElementMousedOver = target;
            if(that.currentPanel){  
                for(var i=0; i<that.showPanelClasses.length; i++){
                    var container = that.showPanelClasses[i];      
                    if(target.className.indexOf(container)!=-1){
                        return;
                    }
                }     
                if(target.className==""){ return; }
                that.hidePanel(false, this.waitBeforeClose);
            }
            
        };            
    } 
    this.showPanel = function(panelId){
                     
        // get the panel to be displayed
        var panel = this.getPanel(panelId);  
        
        
        // if a panel is already being shown, and the panelId given is not null, 
        // and the panel given is not the same as the current pannel, hide the current pannel
        if(this.currentPanel && panelId!=null && this.getPanelIdForIndex(panelId)!=this.currentPanel.id){
            this.hidePanel(false, false);                  
        }       
        
        // if hte panel given is not real, return
        if(!panel){ return; }
        // get the current menu item and it's xposition
        var menuItem        = this.getMenuItem(panelId);
        var menuItemHeight  = this.getElementHeight(menuItem); 
        var menuItemWidth   = this.getElementWidth(menuItem);
        var menuItemXPos    = this.findPosX(menuItem);
        var menuItemYPos    = this.findPosY(menuItem);
       
        
        if(!panel || panel==null){ return; }           
                                        
        // only show this panel if it is not already being displayed
        if(this.currentPanel!=panel){
            // set the panels xposition 
            panel.style.left = menuItemXPos+this.panelXOffset+"px";
            // set the panels yposition 
            panel.style.top = menuItemYPos+menuItemHeight+1+this.panelYOffset+"px";
            if(this.useMenuItemWidth){
                panel.style.width = menuItemWidth+"px";
            }                
            this.onShowPanel(panel);              
            this.currentPanel = panel;
        }     
    }
    this.onShowPanel = function(panel){
        panel.style.display = "block";     
    }
    this.hidePanel = function(panelId, waitBeforeClose){
        var that = this;
        var panel;
        panel = this.currentPanel;
        if(panelId){
            panel = this.getPanel(panelId);
        }    
        panelId = panel.id;
        if(panel){ 
            if(waitBeforeClose){
                setTimeout(function(){ 
                    // get the current menu item
                    var menuItem        = this.getMenuItem(panelId); 
                    // set the menuItem's class to active
                    //menuItem.className  = menuItem.className.replace("active", "");                                                                         
                    that.onHidePanel(panel); 
                    that.currentPanel = false;  
                },waitBeforeClose); 
            }else{              
                // get the current menu item
                var menuItem        = this.getMenuItem(panelId);
                // set the menuItem's class to active
                //menuItem.className = menuItem.className.replace("active", "");   
                that.onHidePanel(panel);
                that.currentPanel = false; 
            }       
        }    
    }
    this.onHidePanel = function(panel){
        panel.style.display = "block";     
    }    
    this.getPanel = function(panelId){
         return(document.getElementById(this.panelPrefix+panelId));    
    }
    this.getPanelIdForIndex = function(panelIndex){
        return(this.panelPrefix+panelIndex); 
    }
    this.getMenuItem = function(menuItemId){
        var menuItemId = new String(menuItemId);
        if(menuItemId.indexOf("_")!=-1){
            menuItemId = menuItemId.split("_");
            menuItemId = menuItemId[1];    
        }
        return(document.getElementById(this.menuItemPrefix+menuItemId));    
    }
    this.elementHasShowPanelClass = function(element){
        for(var x=0; x<this.showPanelClasses.length; x++){
            var className = this.showPanelClasses[x];      
            if(element.className.indexOf(className)!=-1){
                return(true);
            }
        }
        if(element.className==""){ return(true); }
        return(false);
    }
    this.setupMenuItemMouseOvers = function(){
        var that = this;
        var x=0;
        var menuItem;
        while(menuItem = document.getElementById(this.menuItemPrefix+""+x)){
            menuItem.onmouseover = function(e){  
                var target = that.getEventTarget(e);
                if(that.currentMenuItem && that.currentMenuItem!=this){
                    //that.currentMenuItem.className  = that.currentMenuItem.className.replace("active", "");    
                }  
                var menuItemId = target.id.split("_");
                    menuItemId = menuItemId[1];
                    that.currentMenuItem = target;
                    // set the menuItem's class to active
                    //target.className = "active";
                    that.showPanel(menuItemId);
                   
            } 
			menuItem.onmouseout = function(e){
				var target = that.getEventTarget(e);
                if(that.currentMenuItem && that.currentMenuItem!=this && this.className=="active"){
                    //this.className  = this.className.replace("active", "");   
                }  			
			}
            this.menuItems.push(menuItem);                               
            x++;
        }
		
    }
    this.getEventTarget = function(e){
        if(!e){ var e=window.event; } 
        var target = e.target;
        if(!target){target = e.srcElement;}
        return(target);    
    }
    // HELPER METHODS
    // CREDIT: http://blog.firetree.net/2005/07/04/javascript-find-position/
    this.findPosX=function(obj){var curleft=0;if(obj.offsetParent)while(1){curleft+=obj.offsetLeft;if(!obj.offsetParent)break;obj=obj.offsetParent}else if(obj.x)curleft+=obj.x;return curleft}
    // CREDIT: http://blog.firetree.net/2005/07/04/javascript-find-position/
    this.findPosY=function(obj){var curtop=0;if(obj.offsetParent)while(1){curtop+=obj.offsetTop;if(!obj.offsetParent)break;obj=obj.offsetParent}else if(obj.y)curtop+=obj.y;return curtop}

    // CREDIT: http://www.cjboco.com/blog.cfm/post/determining-an-elements-width-and-height-using-javascript/
    this.getElementWidth=function(obj){if(typeof obj.clip!=="undefined"){return obj.clip.width}else{if(obj.style.pixelWidth){return obj.style.pixelWidth}else{return obj.offsetWidth}}}
    // CREDIT: http://www.cjboco.com/blog.cfm/post/determining-an-elements-width-and-height-using-javascript/
    this.getElementHeight=function(obj){if(typeof obj.clip!=="undefined"){return obj.clip.height}else{if(obj.style.pixelHeight){return obj.style.pixelHeight}else{return obj.offsetHeight}}}
    this.error = function(method, message){
        alert("Error in "+this.className+". "+method+" | "+message);
    }
    this.init(options);        
}