netopia.create("nxg").create("dropdown").add({
Style : $extends(netopia.core.Object,
{
    ctor : function(domEl)
    {//helps out with dom style/css manipulation
        this.strings = gDDStrings;
        this.setDomEl(domEl);
    },
    
    setDomEl : function(domEl)
    {
        this.domEl=domEl;
    },
    getListEl : function()
    {//get the UL that is a child of the domEl used in constructor.  
        return this.getFirstChildOfType(this.domEl,this.strings.listTag);
    },
    
    getParent : function(item,tagName)
    {//returns the parent 
        try
        {
            while (item != null && item.tagName != tagName)
                item = item.parentElement;

            return item;
        }
        catch (e)
        {
            return null;
        }
    },
    
    getFirstChildOfType : function(node,tagName)
    {//get the first child of passed in node of type specified
        
        for (var i=0;i<node.childNodes.length;i++)
        {
            var nodeChild = node.childNodes[i];
            if (this.isElementOfType(nodeChild,tagName))
            {
                return nodeChild;
            }
        }
        
        
        return null;
    },
    
    
    getOptionNumericValue : function(optionSet,optionName)
    {
        var val = parseInt(optionSet.getOptionValue(optionName));
        return this.getNumericValue(val);
    },
    
    getNumericValue : function(val)
    {
        var parsedVal = parseInt(val);
        if (isNaN(parsedVal) || parsedVal=="")
        {
            parsedVal=0;
        }
        return parsedVal;
    },
    
    createMenuElement : function(label, url)
    {
        //creates new menu item dom element (LI) and then adds to the menu items array
        
        var listToAppendTo=this.getListEl();
        
        var newLIDomEl = document.createElement(this.strings.listItemTag); //create LI for menu items
        var newADomEl = document.createElement(this.strings.anchorTag); //create A for menu items
        var newSPANDomEl = document.createElement(this.strings.spanTag); //create SPAN for menu items
        
        newSPANDomEl.innerHTML = label;
        //newADomEl.href = "";
        newLIDomEl.onmouseenter = MouseOverDropdown.bindEventHandler(window);
        newLIDomEl.onmouseleave = MouseOutDropdown.bindEventHandler(window);
        //set overflow to hidden
        this.setStyleToElement(newSPANDomEl,"overflow","hidden",this.strings.spanTag) 
        this.setStyleToElement(newSPANDomEl,"vertical-align","top",this.strings.spanTag) 
        this.setStyleToElement(newSPANDomEl,"display", "inline-block",this.strings.spanTag) 
        this.setStyleToElement(newSPANDomEl,this.strings.position,this.strings.relative,this.strings.spanTag) 
        this.setAnchor(newADomEl,url);
        
        //set relative position
        this.setStyleToElement(newLIDomEl,this.strings.position,this.strings.relative,this.strings.listTag);           
        //set margin
        this.setStyleToElement(newLIDomEl,this.strings.margin,"0px",this.strings.listTag);           
        newADomEl.insertAdjacentElement('beforeEnd', newSPANDomEl); //insert anchor for menu item
        newLIDomEl.insertAdjacentElement('beforeEnd', newADomEl); //insert span for menu item
        listToAppendTo.insertAdjacentElement('beforeEnd', newLIDomEl); //insert LI for menu item
        return newLIDomEl;
    },   
    
    setAnchor : function(anchorEl,url)
    {
        var cursor = this.strings.hand;
        var textDec = this.strings.none;
        if (!url || url=="")
        {
            cursor = "auto";
        }
        //set cursor
        
        this.setStyleToElement(anchorEl,this.strings.cursor,cursor,this.strings.anchorTag) 
        //set text decoration
        this.setStyleToElement(anchorEl,this.strings.textDecoration,this.strings.none,this.strings.anchorTag) 
        
    },
    
    createMenuTitle : function(label,url,dropdown)
    {
        if (this.getListEl()==null)
        {
            this.createMenuTitlesList(dropdown);
        }   
        var menuTitle = this.createMenuElement(label,url);
        
        //set flow once this one is added
        this.createMenuItemsList(menuTitle,dropdown);
        this.setMenuFlow(dropdown.getOptionValue(this.strings.flow),dropdown.getOptionValue(this.strings.spacing));
        this.setOffsetFromDropdown(dropdown);
        //todo, when creating new, the last one always wraps, fix this
        return menuTitle;
    },
    
    applyOptionsToNewDropdown : function(dropdownEl,dropdownMenu)
    {
        //This will be called after user has clicked the add new option
        for (var i = 0 ;i<this.strings.widgetAttributes.length;i++)
        {
            if (this.strings.widgetAttributes[i].isStyleOption)
            {
                var opt = this.strings.widgetAttributes[i];
                var val = (dropdownMenu.getOptionValue(opt.name) != null?dropdownMenu.getOptionValue(opt.name):opt.value);
                if (this.getPrefix(opt.name) == this.strings.DDPrefix && opt.name.indexOf(this.strings.defaultPrefix) >-1)
                {
                    //apply this option to the new menuItem if it is an option that applies to Menu titles and
                    //it is used in the default context (not hover or page active)
                    this.setStyleToElement(dropdownEl, opt.name,val);
                }
            }
        }       
    },
    createMenuTitlesList : function(dropdownMenu)
    {//todo, is this used anymore?
        //creates new menu items dom element (UL) and then adds to the menu items array
        menuList = document.createElement(this.strings.listTag); //create UL for menu titles
        this.domEl.insertAdjacentElement('beforeEnd', menuList); //insert UL for menu titles
        this.setStyleToElement(menuList,this.strings.margin,"0px",this.strings.listTag);                    
        this.setStyleToElement(menuList,this.strings.padding,"0px",this.strings.listTag);                    
        this.setStyleToElement(menuList,this.strings.borderWidth,"0px",this.strings.listTag);                    
        this.setStyleToElement(menuList,this.strings.borderStyle,this.strings.none,this.strings.listTag);
        this.setStyleToElement(menuList,this.strings.display,"block",this.strings.listTag);                    
        this.setStyleToElement(menuList,this.strings.floatName,this.strings.left,this.strings.listTag);                    
        this.setStyleToElement(menuList,this.strings.width,"100%",this.strings.listTag);        
        this.setStyleToElement(menuList,this.strings.whiteSpace,this.strings.normal,this.strings.listTag);
        this.setStyleToElement(menuList,this.strings.position,this.strings.relative,this.strings.listTag);
        this.setStyleToElement(menuList,this.strings.listStyle,this.strings.none,this.strings.listTag);        
        
        
        return menuList;
    },  
    createMenuItemsList : function(menuTitle, dropdownMenu)
    {
        //creates new menu items dom element (UL) and then adds to the menu items array
        menuTitle.id = this.strings.tempNewMTId;//set a temporaryId so we can set style to just this one
        menuList = document.createElement(this.strings.listTag); //create LI for menu titles
        menuTitle.insertAdjacentElement('beforeEnd', menuList); //insert LI for menu titles
        this.applyOptionsToNewDropdown(menuList,dropdownMenu);
        //var offsetX=dropdownMenu.getOptionValue(this.strings.offsetX);
        //var offsetY=dropdownMenu.getOptionValue(this.strings.offsetY);
        var flow=dropdownMenu.getOptionValue(this.strings.flow);
        var spacing=dropdownMenu.getOptionValue(this.strings.spacing);
        var widthType=dropdownMenu.getOptionValue(this.strings.ddBoxWidthType);
        //var borderWidth=dropdownMenu.getOptionValue(this.strings.DDPrefix + this.strings.seperator + this.strings.borderWidth);
        
        //if (widthType == this.strings.auto)
        //{
            //this.setDropdownValue(this.strings.ddBoxWidth,"",menuList);
        //}
       // else
        //{
            //this.setDropdownValue(this.strings.ddBoxWidth,"",menuList);
        //}
        //set overflow to hidden
        this.setDropdownValue(this.strings.overflow,this.strings.hidden,menuList) 
        //this.setDropdownValue(this.strings.marginLeft,offsetX,menuList);
        //this.setDropdownValue(this.strings.marginTop,offsetY,menuList);
        this.setDropdownValue(this.strings.marginRight,"0px",menuList);
        this.setDropdownValue(this.strings.marginBottom,"0px",menuList);           
        //set absolute position
        this.setDropdownValue(this.strings.position,this.strings.absolute,menuList);           
        //border-style
        
        //set list style
        this.setDropdownValue(this.strings.listStyle,this.strings.none,menuList);           
        
        //default to hidden
        this.setDropdownValue(this.strings.display,this.strings.none,menuList);           
        return menuList;
    },   
    
    getDomElToStyle : function(liNode,tagNameToStyle)
    {//returns the domEl that should be styled for this node.  usually the span directly around text, 
    //but if that can't be found use the anchor tag or LI
        var elToApplyStyleTo = liNode;
        
        if (elToApplyStyleTo == null || elToApplyStyleTo.tagName == tagNameToStyle)
        {
            return elToApplyStyleTo;
        }
        if (liNode.childNodes.length>0 && liNode.childNodes[0].tagName.toUpperCase()=="A")
        {
            var anchorTag = liNode.childNodes[0];
            elToApplyStyleTo = anchorTag;
            if (elToApplyStyleTo.tagName == tagNameToStyle)
            {
                return elToApplyStyleTo;
            }
            if (anchorTag.childNodes.length>0 && anchorTag.childNodes[0].tagName.toUpperCase()=="SPAN")
            {
                var spanTag = anchorTag.childNodes[0];
                elToApplyStyleTo = spanTag;
            }
        }
        return elToApplyStyleTo;
    },
    
    getPrefix : function(optionName)
    {//gets the prefix MT/MI/DD
        var ind= optionName.indexOf(this.strings.seperator)
        if (ind > 0)
        {
            return optionName.substr(0,ind);
        }
        
        return "";
    },
    
    applyToMenu : function(option,applyToTagName)
    {
        //should only be called passing options that contain valid style attributes
        //applies this option to appropriate dom els
    
        //find the type that corresponds to this option
        //types are MT, MI, or DD
            
        var pref = this.getPrefix(option.name);
        
        if (pref == this.strings.DDPrefix)
        {
            this.applyToDropdowns(option);
        }
        else if (pref == this.strings.MTPrefix)
        {
            
            //the applyToTagName is used with menu titles to determine if it should be applied to the LI
            //element instead of the normal span element
            this.applyToMenuTitles(option,applyToTagName);
        }
        else if (pref == this.strings.MIPrefix)
        {
            this.applyToMenuItems(option);
        }
    },  
    
    
    applyToMenuTitles : function(option,applyToTagName,bDontSetValueToLast)
    {//applies the style contained in option to all dom elements with tag name = LI and id beginning
    //with prefix.  In this way, style can be applied to all menu titles or menu items
        var items= this.domEl.getElementsByTagName(this.strings.listItemTag);
        
        var bFoundLast = false;
        for( var x = items.length - 1; (x >= 0); x-- )
        {
            try
            {
                var liNode=items[x];
                //this is so it will skip the last element when setting the margin which is used for            
                var val = option.value;
                var bIsMenuTitle = this.containsChildOfType(liNode,this.strings.listTag);
                if (bIsMenuTitle ==true)
                {
                    //setting spacing beween menu titles but not at end
                    if (!bFoundLast && bDontSetValueToLast)
                    {
                        //indicates that this is the last title, so set margin to 0, rest can be 
                        //set to the spacing value passed in
                        bFoundLast = true; 
                        val = "0px";
                    }
                    
                //only set if the node contains a sub list (UL tag) because that is how we know it is a menu title
                    this.setStyleToElement(liNode,option.name,val,applyToTagName);    
                    
                    
                }
            }
            catch (e)
            {   //debugging, 
                //window.alert("could not set style property on menu title.  Error: \n" + e.message);          
            }
       }
    },
    
    applyToMenuItems : function(option)
    {//applies the style contained in option to all dom elements with tag name = LI and are representing menu items
        var items= this.domEl.getElementsByTagName(this.strings.listItemTag);
        for( var x = 0; (x < items.length); x++ )
        {
            try
            {
                var liNode=items[x];               
                
                if (!this.containsChildOfType(liNode,this.strings.listTag))
                {
                //only set if the node does not contain a sub list (UL tag), because this is how we know that it is a menu item instead of a title
                    this.setStyleToElement(liNode,option.name,option.value,this.strings.spanTag);                    
                }
            }
            catch (e)
            {
                //debugging, 
                //window.alert("could not set style property on menu item.  Error: \n" + e.message);          
            }
       }
    },
    
    applyToDropdowns : function(option,onlyApplyToElId)
    {//applies the style contained in option to all dropdown box dom elements or to only the specified one
        
        var lists= this.domEl.getElementsByTagName(this.strings.listTag);
        for( var x = 0; (x < lists.length); x++ )
        {
            try
            {
                var liNode=lists[x];
                
                //only set if the UL doesn't contain another list, this means that it is the dropdown box UL not the Menu titles ul                
                
                if (!this.containsChildOfType(liNode,this.strings.listTag))
                {
                    if (onlyApplyToElId==null || onlyApplyToElId == liNode.id)
                    {
                        this.setStyleToElement(liNode,option.name,option.value,this.strings.listTag);                    
                    }
                }
            }
            catch (e)
            {//debugging, 
                //window.alert("could not set style property for dropdown box.  Error: \n" + e.message);          
            }
       }
    },
    
    isElementOfType : function(node,tagName)
    {
        if (node && node.tagName && node.tagName.toUpperCase() ==tagName)
        {
            return true;
        }
        return false;
    },
    
    containsChildOfType : function(node,elType)
    {
        for( var x= 0; (x < node.childNodes.length); x++ )
        {
            if (this.isElementOfType(node.childNodes[x],elType))
            {
                return true;
            }
            else
            {
                if (node.childNodes[x] && this.containsChildOfType(node.childNodes[x],elType)==true)
                {
                    return true;
                }
            }
        }   
        
        return false;
    },
    
    setStyleToElement : function(liNode,optionName,optionValue,applyToTagName,supressAdditionalChecks) 
    {//sets a specified style to a specified element
        
        //gets LI/UL/SPAN/A dom el to set style info to
        var elToApplyStyleTo = this.getDomElToStyle(liNode,applyToTagName);
        var progId = "progid:";
        var progIdReg = new RegExp(progId,"gi");
        var progIdEsc = "progidCOLON";
        var progIdEscReg = new RegExp(progIdEsc,"gi");
        
        if (elToApplyStyleTo != null)
        {
            //Removes prefixs from option name
            var styleName = this.getStyleAttribute(optionName);             
            
            var newCSSText ="";
            var bFound = false;
            var cssText = elToApplyStyleTo.style.cssText;
            
            cssText=cssText.replace(progIdReg,progIdEsc);
            
            if (!supressAdditionalChecks)
            {//presets border style = none, then later will set to solid if any border is set
                this.doPreSettingDefaults(elToApplyStyleTo);
            }
            
            var bef = cssText;
            if (cssText)
            {
                var styleRules = cssText.split(this.strings.styleRuleSeperator);
            
                for (var i = 0; i < styleRules.length; i++)
                {//loops through existing style rules, if it finds the one we are setting, we set it, if not we add it,
                //if any values are blank, we don't set
                
                    try
                    {
                        var currRuleString = trim(styleRules[i]);
                        if (currRuleString != "" && currRuleString.indexOf(this.strings.styleNameValueSeperator)>-1)
                        {
                            var currRule = currRuleString.split(this.strings.styleNameValueSeperator);
                            var currRuleName  = trim(currRule[0]);
                            var currRuleValue  = trim(currRule[1]);
                            if (currRuleName.toUpperCase() ==styleName.toUpperCase())
                            {
                                bFound=true;
                                currRuleValue = optionValue;
                            }
                            if (this.shouldAddStyle(currRuleValue))
                            {//if blank or null, don't write it out
                                newCSSText = this.appendStyle(newCSSText,currRuleName,currRuleValue);
                            }
                        }
                    }
                    catch(e)
                    {
                       //  If trouble splitting rule, ignore for now
                       //debugging
                       //window.alert("trouble splitting rule:" + e.message)
                    }
                    
                }
            }
            var old=elToApplyStyleTo.style.cssText;
            
            if (bFound==false && this.shouldAddStyle(optionValue))
            {//no match so add value
                newCSSText = this.appendStyle(newCSSText,styleName,optionValue);
            }
            
            elToApplyStyleTo.style.cssText = newCSSText.replace(progIdEscReg,progId);
            
            //couldn't use the below line because it had an issue when case didn't match
            //elToApplyStyleTo.style[styleName]=optionValue; 
            if (!supressAdditionalChecks)
            {
                this.doAdditionalStyleChecks(elToApplyStyleTo,styleName, optionValue);
            }
        }
        
        
        
        
    },
    
    setHoverClassNames : function(el, isHover)
    {
        
        if (el && el.className)
        {
            var containsHoverClasses = false;
            var classNamesList = el.className.split(" ");
            var cn=null;
            for (var i=0;i<classNamesList.length;i++)
            {//remove all class names with _hover at end
                cn = classNamesList[i];
                var hovLen = this.strings.hover.length;
                
                //position to check for existence of _hover
                var pos = cn.length - hovLen;
                
                //this is the last index of _hover in this class name
                var hoverPos = cn.lastIndexOf(this.strings.hover);
                
                //this indecates that this class already ends in _hover
                var isHoverClass = (pos==hoverPos && hoverPos != -1?true:false);
                
                if (isHoverClass==true)
                {
                    classNamesList[i] = null;
                }
            }    
            var newClassNames = new Array();
            
            //add a copy of each class name with _hover at end
            for (var i=0;i<classNamesList.length;i++)
            {
                cn = classNamesList[i];
            
                if (isHover == true && cn != null && cn != "")
                {
                    newClassNames[newClassNames.length] = cn + this.strings.hover;
                }
                
                newClassNames[newClassNames.length] = cn;
                
            }    
            
            var classNamesStr = newClassNames.join(" ");
            //window.alert(isHover + ":" + el.id + ":" + el.tagName + ":" + classNamesStr)
            el.className = classNamesStr;
            
        }
        
    },
    
    modifyClassNames : function(liNode,isHover) 
    {        
        //gets LI dom el to set style info to
        var spanNode = this.getDomElToStyle(liNode,this.strings.spanTag);
        var dropdownBox = this.getListEl();
        
        //changes the classes assigned to LI element
        this.setHoverClassNames(liNode,isHover);
        //changes the classes assigned to SPAN element
        this.setHoverClassNames(spanNode,isHover);
        if (dropdownBox )
        {//hovering on menu title

            if (isHover ==true)
            {
                if (hideAlwaysOnTop)
                {//if this function can't be found, just ignore as it is not critical, just might help UI
                    hideAlwaysOnTop();
                }
            }
            else
            {
                if (showAlwaysOnTop)
                {//if this function can't be found, just ignore as it is not critical, just might help UI
                    showAlwaysOnTop();
                }
            }
            //show (or hide) sub menu
            this.setHoverClassNames(dropdownBox,isHover);
            
            
        }
        else
        {//hovering on menu item, so just tell it to show (or hide) itself
            var list= this.getParent(liNode,this.strings.listTag);            
            this.setHoverClassNames(list,isHover);           
        }
        
             
    },
    
    doAdditionalStyleChecks : function(elToApplyStyleTo,styleName, styleValue)
    {
        this.doBorderWidth(elToApplyStyleTo, styleName, styleValue);
        this.doWidth(elToApplyStyleTo, styleName, styleValue);
        this.doHeight(elToApplyStyleTo, styleName, styleValue);
        this.doBGImage( elToApplyStyleTo,styleName, styleValue);
    },
    
    doPreSettingDefaults : function(elToApplyStyleTo)
    {
        this.doBorderStyle(elToApplyStyleTo);
    },
    
    
    doBorderStyle : function(elToApplyStyleTo)
    {//preset to no border, will get set to solid if any border is set
        this.setStyleToElement(elToApplyStyleTo,this.strings.borderStyle,this.strings.none,elToApplyStyleTo.tagName,true);  
    },
    
    doBGImage : function(elToApplyStyleTo,styleName, styleValue)
    {
        if (this.doesStyleMatch(styleName,this.strings.backgroundImage))
        {
            this.doBackgroundImage(elToApplyStyleTo,styleValue)
        }
    
    },
    doWidth : function(elToApplyStyleTo, styleName, styleValue)
    {
        if (this.doesStyleMatch(styleName,this.strings.width))
        {
            if (elToApplyStyleTo.tagName.toUpperCase() == this.strings.spanTag && styleValue=="")
            {
                this.setStyleToElement(elToApplyStyleTo,this.strings.whiteSpace,this.strings.noWrap,this.strings.spanTag,true);
            }
            else
            {//for span if not set to use auto and all others
                this.setStyleToElement(elToApplyStyleTo,this.strings.whiteSpace,this.strings.normal,this.strings.spanTag,true);
            }
        }
    },
    doHeight : function(elToApplyStyleTo, styleName, styleValue)
    {
        if (this.doesStyleMatch(styleName,this.strings.height) && styleValue =="" )
        {
            this.setStyleToElement(elToApplyStyleTo,this.strings.height,"100%",elToApplyStyleTo.tagName,true);        
        }
    },
    doBorderWidth : function(elToApplyStyleTo, styleName, styleValue)
    {
        if (this.doesBoundaryStyleMatch(styleName,this.strings.border,this.strings.width))
        {
            if (this.getNumericValue(styleValue)>0)
            {
                this.setStyleToElement(elToApplyStyleTo,this.strings.borderStyle,this.strings.solid,elToApplyStyleTo.tagName,true);                        
            }            
        }
    },
    
    doesStyleMatch : function(styleNameA, styleNameB)
    {
        styleNameA=trim(this.getStyleAttribute(styleNameA)).toUpperCase();     
        styleNameB=trim(this.getStyleAttribute(styleNameB)).toUpperCase();     
        return (styleNameA==styleNameB);
        
    },
    
    
    doesBoundaryStyleMatch : function(styleNameA, styleNameB_prefix,styleNameB_suffix)
    {
        //this method checks if the style name is the one we are looking for or if it is
        //one like "border-width" where it could include the top/left/bottom/right
        //like "border-top-width"
        //in the example of border, styleNameA could be "border-width" or "border-top-width" 
        //(or any other variety) and styleNameB_prefix would be "border" and styleNameB_suffix
        //would be width.  This function will check all combinations and find if there is a match
        
        var isMatch = false;
        
        styleNameA=trim(this.getStyleAttribute(styleNameA)).toUpperCase();     
        styleNameB_prefix=trim(this.getStyleAttribute(styleNameB_prefix)).toUpperCase();     
        styleNameB_suffix=trim(this.getStyleAttribute(styleNameB_suffix)).toUpperCase();     
        //sets all the flavors of this style rule, like "border-top-width", "border-left-width", etc.
        var top = this.getCSSNameFromParts(styleNameB_prefix, this.strings.top.toUpperCase(), styleNameB_suffix);
        var bottom = this.getCSSNameFromParts(styleNameB_prefix, this.strings.bottom.toUpperCase(), styleNameB_suffix);
        var left = this.getCSSNameFromParts(styleNameB_prefix, this.strings.left.toUpperCase(), styleNameB_suffix);
        var right = this.getCSSNameFromParts(styleNameB_prefix, this.strings.right.toUpperCase(), styleNameB_suffix);
        
        //checks if styleNameA equals styleNameB_prefix + styleNameB_suffix, like
        //border-width
        if (styleNameA==this.getCSSNameFromParts(styleNameB_prefix,"",styleNameB_suffix))
        {
            isMatch=true;
        }
        //checks if it matches any of the other flavors (like "border-top-width", "border-left-width", etc.)
        if (styleNameA == top || styleNameA == bottom || styleNameA == left || styleNameA == right)
        {
            isMatch=true;
        }
        return isMatch;
        
    },
    
    getCSSNameFromParts : function(beginning,middle,end)
    {
        var fullName = "";
        fullName = this.appendNamePart(fullName,beginning,this.strings.dash);
        fullName = this.appendNamePart(fullName,middle,this.strings.dash);
        fullName = this.appendNamePart(fullName,end,this.strings.dash);
        return fullName;
    },
    
    appendNamePart : function(currentName, partToAdd,seperator)
    {
        if (trim(partToAdd) !="")
        {
            if (trim(currentName) != "")
            {
                currentName += seperator;
            }
            currentName += partToAdd;
        }
        return currentName;
    },
    
    appendStyle : function(newCSSText,currRuleName,currRuleValue)
    {//adds the style name/value pair to the string
        newCSSText += currRuleName.toUpperCase() + this.strings.styleNameValueSeperator + currRuleValue + this.strings.styleRuleSeperator;
        return newCSSText;
    },
    
    shouldAddStyle : function(styleVal)
    {//checks if this value contains data, if not, don't set it
        return (styleVal != "" && styleVal != null);
    },
    
    doBackgroundImage : function(btnDomEl,imgSrc)
    {//sets png filter or background image property
        var imgPath = extractCSSImageURL(imgSrc);
        if (isPNGFilterNeeded(imgPath,gPNGFilterActive))
        {
            handlePNGBackground(btnDomEl,imgPath);
        }        
    },
    
    getStyleAttribute : function(optionName)
    {
        //removes MT_PA_ from beginning of settings string and returns string that can be used
        //as the style attribute name (if this is a style option)
        var styleName  = optionName.substr(optionName.lastIndexOf(this.strings.seperator)+ 1)

        return styleName;
    },
    
    setMenuFlow : function(flowDirection,spacing,applyToElementId)
    {//sets flow settings for one or all dropdown boxes
    
        var bIsHorizontal = (flowDirection == this.strings.horizontal);
        var leftOpt = new netopia.nxg.dropdown.Option(this.strings.left,(bIsHorizontal?"0px":""));
        var topOpt = new netopia.nxg.dropdown.Option(this.strings.top,(bIsHorizontal?"100%":""));
               
        //sets top and left position of dropdown box
        this.applyToDropdowns(topOpt,applyToElementId);
        this.applyToDropdowns(leftOpt,applyToElementId);
        
        if (applyToElementId == null)
        {//don't set menu titles if we are just setting a specific (new) dropdown box
        
            //sets float:left if horizontal
            var floatOpt = new netopia.nxg.dropdown.Option(this.strings.floatName,(bIsHorizontal?"left":""));     
            this.applyToMenuTitles(floatOpt,this.strings.listItemTag);            
            
            //sets spacing between elements
            this.setMenuSpacing(this.strings.horizontal,(bIsHorizontal?spacing:"0px"));
            this.setMenuSpacing(this.strings.vertical,(bIsHorizontal?"0px":spacing));
            
            
            this.setStyleToElement(this.getListEl(), this.strings.width,"",this.strings.listTag);
            
        }
        
        
    },
    
    setMenuSpacing : function(flowDirection,spacing)
    {//sets spacing attributes to menu title
        spacing = this.getNumericValue(spacing) + "px";
        var bIsHorizontal = (flowDirection == this.strings.horizontal?true:false);
        var margin;
        if (bIsHorizontal)
        {
            margin = new netopia.nxg.dropdown.Option(this.strings.marginRight,spacing);
        }
        else
        {
            margin = new netopia.nxg.dropdown.Option(this.strings.marginBottom,spacing);
        }
        this.applyToMenuTitles(margin,this.strings.listItemTag,true);        
    },
    
    setOffsetFromDropdown : function(dropdown)
    {
        this.setOffset(dropdown.getOptionValue(this.strings.flow),this.strings.offsetX,dropdown.getOptionValue(this.strings.offsetX));
        this.setOffset(dropdown.getOptionValue(this.strings.flow),this.strings.offsetY,dropdown.getOptionValue(this.strings.offsetY));
    },
    
    setOffset : function(flowDirection,offsetName,offsetValue,applyToElement)
    {//sets offsets to one or many dropdown boxes
        var bIsHorizontal = (flowDirection == this.strings.horizontal);
        var offset;
        
        if (offsetName == this.strings.offsetX)
        {
            if (bIsHorizontal)
            {
            offset= new netopia.nxg.dropdown.Option(this.strings.marginLeft,offsetValue);
        }
            else
            {//offset is not applicable for this flow
                offset= new netopia.nxg.dropdown.Option(this.strings.marginLeft,"0");
            }
        }
        else if (offsetName == this.strings.offsetY)
        {
            if (bIsHorizontal)
            {//offset is not applicable for this flow
                    offset= new netopia.nxg.dropdown.Option(this.strings.marginTop,"0");
            }
            else
            {
            offset= new netopia.nxg.dropdown.Option(this.strings.marginTop,offsetValue);
        }
            
        }
        
        this.applyToDropdowns(offset,(applyToElement?applyToElement.id:null));        
    },
    
    setDropdownValue : function(optionName,optionValue,applyToElement)
    {//sets generic option to one or many dropdown boxes
        
        var option= new netopia.nxg.dropdown.Option(optionName,optionValue);
        this.applyToDropdowns(option,applyToElement.id);        
    },
    
    applyOptionsToNewMenuItem : function(menuItem,widgetOptions)
    {
        //This will be called after user has clicked the add new option
        for (var i = 0 ;i<this.strings.widgetAttributes.length;i++)
        {
            if (this.strings.widgetAttributes[i].isStyleOption)
            {
                var opt = this.strings.widgetAttributes[i];
                var val = (widgetOptions.getOptionValue(opt.name) != null?widgetOptions.getOptionValue(opt.name):opt.value);
                if (this.getPrefix(opt.name) == menuItem.el && opt.name.indexOf(this.strings.defaultPrefix) >-1)
                {
                    //apply this option to the new menuItem if it is an option that applies to Menu titles and
                    //it is used in the default context (not hover or page active)
                    this.setStyleToElement(menuItem.domEl, opt.name,val);
                }
            }
        }       
    }
})
});