function formStyleString(cssID,val)
{
    if(val == "" || typeof(val) == "undefined" || val == null)
    {
        return ""
    }
    return cssID + val + ";"
}
function DOMNode(htmlType,parentNode)
{
    var type = "DOMNode";
    this.type = "DOMNode"
    this.HTMLNode = htmlType;
    this.tagName = ""
    //animatable style values, will change with new animation system
    this.semaphore = copy(GLOBAL["SYSTEM"].animateableStyleProperties)  //style modifiable parameters for a DOMNode
                                   //used in the Animation.js file
                      
    this.style = copy(GLOBAL["SYSTEM"].supportedStyleProperties);// force == float, because float was a reserved word
    
    
    //function pointer setup
    this.setStyle = setStyle;
    this.setStyleByArray = setStylev;
    this.setStyleByObject = setStyleo;
    this.update = update;
    this.getHTMLNode = getHTMLNode;
    this.appendChild = appendChild;
    this.createAttribute = createAttribute;
    this.setAttribute = setAttribute
    this.setInnerText = setInnerText;
    this.removeChild = removeChild
    
    /*
     if htmlType is a string, then create the new node,
     else use the supplied node since it is a browser generated node
    */
    if(htmlType.split) 
    {
        this.HTMLNode = document.createElement(htmlType)
        this.tagName = htmlType.toLowerCase()
        this.parent = parentNode;
        if(this.parent != null)
        {
            this.parent.appendChild(this)
            this.style.zIndex = parseInt(this.parent.zIndex)+1
        }
        this.children = new Array(); //DOMNode children
        this.attributes = new AssociativeArray();
        
        this.HTMLStyle = document.createAttribute("style");
        this.HTMLNode.setAttributeNode(this.HTMLStyle)
        this.innerText = null;
    }
    else
    {
        this.HTMLNode = htmlType //a html node was given
        this.tagName = htmlType.tagName.toLowerCase()
        this.parent = parentNode;
        this.children = new Array(); //DOMNode children
        this.attributes = new AssociativeArray();
        this.innerText = null;
        if(this.parent != null)
        {
            this.parent.children.push(this);
            this.style.zIndex = parseInt(this.parent.zIndex)+1
        }
        this.HTMLStyle = (this.HTMLNode.style) ? this.HTMLNode.style : document.createAttribute("style");
        if(this.HTMLStyle != this.HTMLNode.style)
            this.HTMLNode.setAttributeNode(this.HTMLNode);
        
        
        //set the style, this is not good code but it was a quick fix, will reorganize
        //so that DOMNode does not depend on DOMDocument
        var child_style = new Object()
        if(this.style.cssText != "" )
        {
            //add this to the styling, this takes priority over the
            //computed information from the external style-sheet
            child_style = getStyleFromHTMLNode(this.HTMLNode)
            //alert(child_style.backgroundColor)
        }
        else
        {
            //get the computed style
            child_style = getStyleFromExternalCSS(this.HTMLNode);
        }
        if(isNaN(child_style.zIndex))
        {
            child_style.zIndex = "auto";
        }
        this.setStyleByObject(child_style);
        
        //copy over the attributes from the html node
        if(this.HTMLNode.attributes)
            for(var i = 0; i < this.HTMLNode.attributes.length; i++)
            {
                var attr = this.HTMLNode.attributes[i];
                this.attributes.registerObject(String(attr.name),String(attr.value));
                
            }
    }
    
   
    
    
    
    
    
    this.toString = function()
    {
        return "DOMNode"
    }
    function setStyle(idString,value)
    {
        this.style[idString] = value;
        this.update();
    }
    
    function setStylev(idArray,valueArray)
    {
        if(idArray.length != valueArray.length){alert("SetStyle array lengths do not match")}
        for(var i = 0; i < valueArray.length; i++)
        {
            this.style[idArray[i]] = valueArray[i];
        }
        this.update();
    }
    
    function setStyleo(obj)
    {
        //i == member name
        //obj[i] = value
        for(var i in obj)
        {
            this.style[i] = obj[String(i)];
        }
        this.update();
    }
    function update()
    {
        var valStr = "";
        valStr += formStyleString("position:",this.style.position)+
                  formStyleString("top:" , this.style.top)+
                  formStyleString("left:" , this.style.left)+
                  formStyleString("bottom:", this.style.bottom)+
                  formStyleString("right:", this.style.right)+
                  formStyleString("width:", this.style.width)+
                  formStyleString("height:", this.style.height)
        
                  if(this.style.backgroundColor == "transparent")
                     valStr += formStyleString("background-color:",this.style.backgroundColor)
                  else valStr +=  formStyleString("background-color:",this.style.backgroundColor)
        
        valStr += formStyleString("background-image:",this.style.backgroundImage)+
                  formStyleString("background-repeat:",this.style.backgroundRepeat)+
                  formStyleString("background-attachment:",this.style.backgroundAttachment)
        if(GLOBAL["BROWSER"].type == "IE")
            valStr += formStyleString("filter:alpha(opacity=",String(this.style.opacity*100)+")")
        else valStr += formStyleString("opacity:",this.style.opacity)
        
        if(this.style.border == "")
            valStr += formStyleString("border-top:",this.style.borderTop)+
                  formStyleString("border-right:",this.style.borderRight)+
                  formStyleString("border-bottom:",this.style.borderBottom)+
                  formStyleString("border-left:",this.style.borderLeft)
        else valStr += formStyleString("border:",this.style.border)
        valStr += formStyleString("margin:",this.style.margin)+
                  formStyleString("margin-top:",this.style.marginTop)+
                  formStyleString("margin-right:",this.style.marginRight)+
                  formStyleString("margin-bottom:",this.style.marginBottom)+
                  formStyleString("margin-left:",this.style.marginLeft)+
                  formStyleString("padding:",this.style.padding)+
                  formStyleString("padding-top:",this.style.paddingTop)+
                  formStyleString("padding-right:",this.style.paddingRight)+
                  formStyleString("padding-bottom:",this.style.paddingBottom)+
                  formStyleString("padding-left:",this.style.paddingLeft)+
                  formStyleString("text-align:",this.style.textAlign)
                  
        
        valStr += formStyleString("verticle-align:",this.style.verticalAlign)
        valStr += formStyleString("color:",this.style.textColor)+
                  formStyleString("text-decoration:",this.style.textDecoration)+
                  formStyleString("text-indent:",this.style.textIndent)+
                  formStyleString("font-family:",this.style.fontFamily)+
                  formStyleString("font-size:",this.style.fontSize)+
                  formStyleString("font-style:",this.style.fontStyle)+
                  formStyleString("font-weight:",this.style.fontWeight)+
                  formStyleString("direction:",this.style.direction)+
                  formStyleString("clip:",this.style.clip)+
                  formStyleString("display:",this.style.display)+
                  formStyleString("cursor:",this.style.cursor)+
                  formStyleString("visibility:",this.style.visibility)+
                  formStyleString("z-index:",this.style.zIndex)+
                  formStyleString("float:",this.style.force)+
                  formStyleString("overflow:",this.style.overflow)+
                  formStyleString("line-height:",this.style.lineHeight);
       if(typeof(this.HTMLNode.style.cssText) !== "undefined" )
       {
            this.HTMLNode.style.cssText = valStr;
       }
        else
            this.HTMLNode.setAttribute("style",valStr);
       if(this.innerText != null)
        this.HTMLNode.innerHTML = this.innerText;
    }
    
    function getHTMLNode()
    {
        this.update();
        return this.HTMLNode;
    }
    
    function createAttribute(attributeName, attributeValue)
    {
        if(attributeName == "style")
        {
            return;
        }
        else
        {
            if(typeof(attributeName) == "string" &&
               typeof(attributeValue) == "string")
            {
                //alert(attributeName)
                var newAttr = document.createAttribute(attributeName);
                if(attributeValue != "" || attributeValue != null)
                {
                    newAttr.value = attributeValue;
                }
                this.attributes.registerObject(attributeName,attributeValue);
                this.HTMLNode.setAttributeNode(newAttr);
            }
            else{alert("attribute names and values must be strings")}
        }
    }
    
    function appendChild(child)
    {
        if(!instanceOf(child,DOMNODE))
        { alert("Tried to append a non DOMNode object to a DOMNode"); return;}
        this.HTMLNode.appendChild(child.HTMLNode) //attach it to the html document, and never call this again...
        this.children.push(child);
    }
    
    function removeChild(child)
    {
        var nodeFound = false
        for(var i = 0; i < this.children.length; i++)
        {
            if(this.children[i] == child)
            {
                for(var j = i+1; j < this.children.length; j++)
                {
                    this.children[i] = this.children[j];
                    i++;
                }
                nodeFound = true
                break;
            }
        }
        if(nodeFound){this.HTMLNode.removeChild(child.HTMLNode);}
    }
    
    function setInnerText(newText)
    {
        //need to add code to include the html nodes
        //possibly in the newText var into the mapping
        //this way even generated code can be added
       
        this.innerText = newText;
        this.update();
        
    }
    function setAttribute(name,newValue)
    {
        this.attributes[name] = newValue
        this.HTMLNode.setAttribute(name,newValue)
    }
    
    
}