OSDN Git Service

Version 0.6.119, add ended event to X.Audio.Sprite & GPU layer off.
[pettanr/clientJs.git] / 0.6.x / js / 02_dom / 02_XNode.js
index 5cc5b5f..9c44e1d 100644 (file)
@@ -4,21 +4,21 @@ var
                CHILD_IS_DIRTY   :  1,\r
                ID               :  2, // width, height, x, y\r
                CONTENT          :  4, // width, height, x, y textNode の内容\r
-               CLASSNAME        :  8, // _getCharSize, width, height, x, y\r
-               ATTR             : 16, // _getCharSize, width, height, x, y\r
-               CSS              : 32, // _getCharSize, width, height, x, y\r
-               IE_FILTER        : X.UA.IE < 9 && !X.UA.MacIE ? 64 : 0,\r
+               CLASSNAME        :  8, // X_Node_CSS_getCharSize, width, height, x, y\r
+               ATTR             : 16, // X_Node_CSS_getCharSize, width, height, x, y\r
+               CSS              : 32, // X_Node_CSS_getCharSize, width, height, x, y\r
+               IE_FILTER        : X_UA.IE < 9 && !X_UA.MacIE ? 64 : 0,\r
                UNKNOWN_TAG_FIX  : 128,\r
                IE4_TEXTNODE_FIX : 256\r
        },\r
        \r
        X_Node_State = {\r
                DESTROYED          : 0,\r
-               EXIST              : 1,\r
-               BELONG_TREE        : 2,\r
-               DISPLAY_NONE       : 4,\r
-               DISPLAY_BLOCK      : 8,\r
-               DISPLAY_INLINE     : 16,\r
+               EXIST              : 1, // XNODE_EXIDT, ELEMENT_EXIST\r
+               BELONG_TREE        : 2, // HAS_PARENT, HAS_PARENT_ACTUAL, BELONG_TREE, BELONG_TREE_ACTUAL\r
+               DISPLAY_NONE       : 4, // VISIVILITY_HIDDEN(opacity0), DISPALY_NONE\r
+               DISPLAY_BLOCK      : 8, // remove\r
+               DISPLAY_INLINE     : 16,// remove\r
                POSITION_ABSOLUTE  : 32,\r
                OVERFLOW_HIDDEN    : 64,\r
                HAS_WIDTH_LENGTH   : 128,\r
@@ -26,7 +26,7 @@ var
                HAS_HEIGHT_LENGTH  : 512,\r
                HAS_HEIGHT_PERCENT : 1024,\r
                IE4_ONLY_TEXT      : 2048,\r
-               IE5_DISPLAY_NONE_FIX : !X.UA.MacIE && X.UA.IE5 ? 4096 : 0 // filterがかかっていると不可? MacIE5.2- は ?\r
+               IE5_DISPLAY_NONE_FIX : !X_UA.MacIE && X_UA.IE5 ? 4096 : 0 // filterがかかっていると不可? MacIE5.2- は ?\r
        },\r
        \r
        X_Node_TYPE = {\r
@@ -42,14 +42,21 @@ var
                IMAGE       : 10\r
        },\r
        \r
-       X_Node_strictElmCreation = !X.UA.MacIE && X.UA.IE5678,// && !X.UA.MacIE;\r
+       X_Node_strictElmCreation = !X_UA.MacIE && X_UA.IE5678,// && !X_UA.MacIE;\r
        \r
-       X_Node_useDocumentFragment = document.createDocumentFragment && ( !X.UA.IE || 5.5 <= X.UA.IE ) && document.createDocumentFragment(),\r
-\r
+       X_Node_useDocumentFragment = document.createDocumentFragment && ( !X_UA.IE || 5.5 <= X_UA.IE ) && document.createDocumentFragment(),\r
+       \r
+       X_Node_newByTag      = false,\r
+       \r
+       X_Node_newByText     = false,\r
+       \r
+       X_Node_outerXNode    = null,\r
+       \r
+       X_Node_updateTimerID = 0,\r
 /*\r
  * Node( rawElement | rawTextnode | htmlString | textString )\r
  */    \r
-       Node = X.Dom.Node = X.EventDispatcher.inherits(\r
+       Node = X.Node = X.EventDispatcher.inherits(\r
        'XDomNode',\r
        X.Class.POOL_OBJECT,\r
        {\r
@@ -62,7 +69,7 @@ var
                _rawObject : null,\r
                _rect      : null, // \r
                \r
-               _root      : null, // xnode が文書ツリーに属しているか?はこれを見る\r
+               _root      : null, // xnode が文書ツリーに属しているか?はこれを見る -> state\r
                parent     : null, // remove された枝も親子構造は維持している。\r
                _xnodes    : null,\r
        \r
@@ -72,11 +79,11 @@ var
                _id        : null,\r
                _className : '',\r
 \r
-               _attrs     : null, // X_Node_Attr\r
+               _attrs     : null, // see X_Node_Attr\r
                _newAttrs  : null,\r
-               _attrText  : '', // X_Node_Attr.objToAttrText が必要な場合は false が入っている\r
+               _attrText  : '', // X_Node_Attr_objToAttrText が必要な場合は false が入っている\r
                \r
-               _css       : null, // X.Dom.Style\r
+               _css       : null, // see X_Node_CSS\r
                _cssText   : null,\r
                \r
                _fontSize  : 0,\r
@@ -87,28 +94,26 @@ var
         * TODO Node の継承ができない!\r
         */\r
                Constructor : function( v ){\r
-                       var css, xnodes, xnode, parent, uid = Node._chashe.length;\r
+                       var css, xnodes, xnode, parent, uid = X_Node_CHASHE.length;\r
                        \r
-                       if( Node._newByTag ){\r
-                               Node._newByTag  = false;\r
+                       if( X_Node_newByTag ){\r
+                               X_Node_newByTag = false;\r
                                this._tag       = v.toUpperCase();\r
                                this._xnodeType = 1;\r
-                               this._state     = X_Node_State.DISPLAY_INLINE; // todo\r
+                               this._state     = X_Node_State.DISPLAY_INLINE; // TODO\r
                                arguments[ 1 ] && this.attr( arguments[ 1 ] );\r
                                css = arguments[ 2 ];\r
                                css && this[ X.Type.isString( css ) ? 'cssText' : 'css' ]( css );\r
                        } else\r
-                       if( Node._newByText ){\r
-                               Node._newByText = false;\r
-                               this._text      = v;\r
-                               this._xnodeType = 3;\r
-                               this._state     = X_Node_State.DISPLAY_INLINE;\r
+                       if( X_Node_newByText ){\r
+                               X_Node_newByText = false;\r
+                               this._text       = v;\r
+                               this._xnodeType  = 3;\r
+                               this._state      = X_Node_State.DISPLAY_INLINE;\r
                        } else {\r
-                               if( 1 < arguments.length ) return new X.Dom.NodeList( arguments );\r
-                               if( X.Type.isArray( v ) && v.length ) return new X.Dom.NodeList( v );\r
-                               //if( !this || this.append !== Node.prototype.append ){\r
-                               //       return new Node( v );\r
-                               //};\r
+                               if( 1 < arguments.length ) return new X_NodeList( arguments );\r
+                               if( X.Type.isArray( v ) && v.length ) return new X_NodeList( v );\r
+\r
                                switch( X_Node_getType( v ) ){\r
                                        case X_Node_TYPE.XNODE :\r
                                        case X_Node_TYPE.XNODE_LIST :\r
@@ -117,10 +122,10 @@ var
                                                if( xnode = X_Node_getXNode( v ) ) return xnode;\r
                                                // v.parentNode || v.parentElement : dom1 || dom0\r
                                                this.parent     = ( parent = v.parentNode || v.parentElement ) && parent.tagName /* ie7- */ && X_Node_getXNode( parent );\r
-                                               this._root      = this.parent ? this.parent._root : null;\r
+                                               if( this.parent && this.parent._root ) this._root = this.parent._root;\r
                                                this._rawObject = v;\r
                                                this._xnodeType = 1;\r
-                                               this._state     = X_Node_State.DISPLAY_BLOCK; // todo\r
+                                               this._state     = X_Node_State.DISPLAY_BLOCK; // TODO\r
                                                this._tag       = v.tagName.toUpperCase();\r
                                                this._id        = v.id;\r
                                                this._className = v.className;\r
@@ -138,7 +143,7 @@ var
                                        case X_Node_TYPE.RAW_TEXT :\r
                                                if( xnode = X_Node_getXNode( v ) ) return xnode;\r
                                                this.parent     = X_Node_getXNode( v.parentNode );\r
-                                               this._root      = this.parent ? this.parent._root : null;\r
+                                               if( this.parent && this.parent._root ) this._root = this.parent._root;\r
                                                this._rawObject = v;\r
                                                this._xnodeType = 3;\r
                                                this._state     = X_Node_State.DISPLAY_INLINE;\r
@@ -147,32 +152,85 @@ var
                                                break;\r
                                        case X_Node_TYPE.HTML_STRING :\r
                                        case X_Node_TYPE.STRING :\r
-                                               if( xnodes = X_HtmlParser_parse( v, true ) && 1 < xnodes.length ) return new X.Dom.NodeList( xnodes );\r
+                                               if( xnodes = X_HtmlParser_parse( v, true ) && 1 < xnodes.length ) return new X_NodeList( xnodes );\r
                                                if( xnodes.length ) return xnodes[ 0 ];\r
-                                               return Node.none;\r
+                                               return X_Node_none;\r
+                                       /*\r
                                        case X_Node_TYPE.IMAGE :\r
                                                if( xnode = X_Node_getXNode( v ) ) return xnode;\r
                                                this._rawObject = v;\r
                                                this._xnodeType = 4;\r
                                                v.UID           = uid;\r
                                                this._state     = X_Node_State.EXIST;\r
-                                               break;\r
-                                       /*\r
-                                       case X_Node_TYPE.WINDOW :\r
-                                       case X_Node_TYPE.DOCUMENT :\r
-                                               if( xnode = X_Node_getXNode( v ) ) return xnode;\r
-                                               this._rawObject = v;\r
-                                               this._xnodeType = 2;\r
-                                               this._state     = X_Node_State.DISPLAY_BLOCK;\r
                                                break; */\r
                                        default :\r
-                                               if( Node.none ) return Node.none;\r
+                                               if( X_Node_none ) return X_Node_none;\r
                                                return;\r
                                };\r
                        };\r
                        \r
-                       Node._chashe[ this._uid = uid ] = this;\r
-               }\r
+                       X_Node_CHASHE[ this._uid = uid ] = this;\r
+               },\r
+               \r
+               create         : X_Node_create,\r
+               \r
+               createAt       : X_Node_createAt,\r
+               \r
+               createText     : X_Node_createText,\r
+               \r
+               createTextAt   : X_Node_createTextAt,\r
+               \r
+               clone          : X_Node_clone,\r
+               \r
+               append         : X_Node_append,\r
+               \r
+               appendAt       : X_Node_appendAt,\r
+               \r
+               appendTo       : X_Node_appendTo,\r
+               \r
+               appendToRoot   : X_Node_appendToRoot,\r
+               \r
+               before         : X_Node_before, // remove\r
+               \r
+               prevNode       : X_Node_before, // -> prev\r
+               \r
+               after          : X_Node_after, // remove\r
+               \r
+               nextNode       : X_Node_after, // -> next\r
+               \r
+               replace        : X_Node_replace, // remove\r
+               \r
+               swap           : X_Node_replace,\r
+               \r
+               remove         : X_Node_remove,\r
+               \r
+               empty          : X_Node_empty,\r
+               \r
+               destroy        : X_Node_destroy, // -> kill && kill event\r
+               \r
+               contains       : X_Node_contains,\r
+               \r
+               getChildAt     : X_Node_getChildAt,\r
+               \r
+               numChildren    : X_Node_length,\r
+               \r
+               firstChild     : X_Node_firstChild,\r
+               \r
+               lastChild      : X_Node_lastChild,\r
+               \r
+               getOrder       : X_Node_getOrder,\r
+               \r
+               className      : X_Node_className,\r
+               addClass       : X_Node_addClass,\r
+               removeClass    : X_Node_removeClass,\r
+               toggleClass    : X_Node_toggleClass,\r
+               hasClass       : X_Node_hasClass,\r
+               \r
+               html           : X_Node_html,\r
+               text           : X_Node_text,\r
+               call           : X_Node_call,\r
+               each           : X_Node_each\r
+               \r
        }\r
 );\r
 \r
@@ -182,10 +240,10 @@ function X_Node_getType( v ){
        if( v === window ) return X_Node_TYPE.WINDOW;\r
        if( v === document ) return X_Node_TYPE.DOCUMENT;\r
        if( v.constructor === Node ) return X_Node_TYPE.XNODE;\r
-       if( v.constructor === X.Dom.NodeList ) return X_Node_TYPE.XNODE_LIST;\r
+       if( v.constructor === X_NodeList ) return X_Node_TYPE.XNODE_LIST;\r
        if( X.Type.isHTMLElement( v ) ) return X_Node_TYPE.RAW_HTML;\r
        if( v.nodeType === 3 ) return X_Node_TYPE.RAW_TEXT;\r
-       if( X.Type.isImage( v ) ) return X_Node_TYPE.IMAGE;\r
+       //if( X.Type.isImage( v ) ) return X_Node_TYPE.IMAGE;\r
        if( X.Type.isString( v ) ){\r
                return '<' === v.charAt( 0 ) && v.charAt( v.length - 1 ) === '>' ? X_Node_TYPE.HTML_STRING : X_Node_TYPE.STRING;\r
        };\r
@@ -199,95 +257,72 @@ function X_Node_getXNode( v ){
                case X_Node_TYPE.XNODE_LIST :\r
                        return v;\r
                case X_Node_TYPE.RAW_HTML :\r
-               case X_Node_TYPE.IMAGE :\r
+               //case X_Node_TYPE.IMAGE :\r
                        // fake TextNode too.\r
                        if( X_UA_DOM.IE4 ){\r
                                uid = v.getAttribute( 'UID' );\r
-                               return uid && Node._chashe[ uid ];\r
+                               return uid && X_Node_CHASHE[ uid ];\r
                        };\r
-                       return v.UID && Node._chashe[ v.UID ];\r
+                       return v.UID && X_Node_CHASHE[ v.UID ];\r
                case X_Node_TYPE.WINDOW :\r
-                       return X.ViewPort;\r
+                       return X_ViewPort;\r
                case X_Node_TYPE.DOCUMENT :\r
                        return X_ViewPort_document;\r
                case X_Node_TYPE.RAW_TEXT :\r
-                       if( v.UID ) return Node._chashe[ v.UID ];\r
-                       for( chashe = Node._chashe, i = chashe.length; i; ){\r
-                               if( ( xnode = Node._chashe[ --i ] ) && ( xnode._rawObject === v ) ) return xnode;\r
-                       };\r
-       };\r
-};\r
-\r
-\r
-Node.create = function( tag, opt_attrs, opt_css ){\r
-       var list, i;\r
-       switch( X_Node_getType( tag ) ){\r
-               case X_Node_TYPE.STRING :\r
-                       Node._newByTag = true;\r
-                       return new Node( tag, opt_attrs, opt_css );\r
-               case X_Node_TYPE.HTML_STRING :\r
-                       list = X_HtmlParser_parse( tag, true );\r
-                       for( i = list.length; 1 < i; ){\r
-                               list[ --i ].destroy();\r
+                       if( v.UID ) return X_Node_CHASHE[ v.UID ];\r
+                       for( chashe = X_Node_CHASHE, i = chashe.length; i; ){\r
+                               if( ( xnode = X_Node_CHASHE[ --i ] ) && ( xnode._rawObject === v ) ) return xnode;\r
                        };\r
-                       return list[ 0 ];\r
        };\r
 };\r
-Node.createText = function( text ){\r
-       Node._newByText = true;\r
-       return new Node( text );\r
-};\r
-\r
 \r
-Node.getRoot = function( xnode ){\r
+function X_Node_getRoot( xnode ){\r
        return X_ViewPort_document;\r
-       //return xNode._body._rawObject.documentElement ? node : node.ownerDocument || node.document;\r
+       //return X_Node_body._rawObject.documentElement ? node : node.ownerDocument || node.document;\r
 };\r
        // XMLかどうかを判別する\r
-Node.isXmlDocument =\r
-       X_UA_DOM.IE4 ?\r
-               X.emptyFunction :\r
-               (function( root ){\r
-                       if( X.Type.isBoolean( root.isXML ) ) return root.isXML;\r
-                       return root.isXML = root._rawObject.createElement( 'p' ).tagName !== root._rawObject.createElement( 'P' ).tagName;\r
-               });\r
-\r
-Node._chashe     = [];\r
-Node.none        = Node._chashe[ 0 ] = new Node();\r
-Node._html       = null; // = Node._chashe[ 1 ] <html>\r
-Node._head       = null; // = Node._chashe[ 2 ] <head>\r
-Node._body       = null; // = Node._chashe[ 3 ] <body>\r
-Node._systemNode = null; // = Node._chashe[ ? ]\r
-\r
-Node._reserveRemoval = [];\r
-\r
-if( X_UA_DOM.IE4 ){\r
-       Node.prototype._ie4getRawNode = function(){\r
-               var elm = this._rawObject;\r
+var X_Node_isXmlDocument =\r
+               X_UA_DOM.IE4 ?\r
+                       X.emptyFunction :\r
+                       (function( root ){\r
+                               if( X.Type.isBoolean( root.isXML ) ) return root.isXML;\r
+                               return root.isXML = root._rawObject.createElement( 'p' ).tagName !== root._rawObject.createElement( 'P' ).tagName;\r
+                       }),\r
+       X_Node_CHASHE     = [],\r
+       X_Node_none  = X_Node_CHASHE[ 0 ] = new Node(),\r
+       X_Node_html, // = X_Node_CHASHE[ 1 ] <html>\r
+       X_Node_head, // = X_Node_CHASHE[ 2 ] <head>\r
+       X_Node_body, // = X_Node_CHASHE[ 3 ] <body>\r
+       X_Node_systemNode, // = X_Node_CHASHE[ ? ]\r
+       X_Node_fontSizeNode,\r
+       X_Node_reserveRemoval = [];\r
+\r
+\r
+var X_Node__ie4getRawNode = X_UA_DOM.IE4 && function ( that ){\r
+               var elm = that._rawObject;\r
                return elm ||\r
-                       ( ( elm = document.all[ 'ie4uid' + this._uid ] ) && ( this._rawObject = elm ) ) ||\r
-                       ( this._id && ( elm = document.all[ this._id ] ) ) && ( this._rawObject = elm );\r
+                       ( ( elm = document.all[ 'ie4uid' + that._uid ] ) && ( that._rawObject = elm ) ) ||\r
+                       ( that._id && ( elm = document.all[ that._id ] ) ) && ( that._rawObject = elm );\r
        };\r
-};\r
 \r
 \r
 /* --------------------------------------\r
  *  Create\r
  */\r
-Node.prototype.create = function( tag, opt_attrs, opt_css ){\r
+function X_Node_create( tag, opt_attrs, opt_css ){\r
        var xnode;\r
        if( this._xnodeType !== 1 ) return;\r
        if( !this._xnodes ) this._xnodes = [];\r
        \r
-       xnode = Node.create( tag, opt_attrs, opt_css );\r
+       xnode = X_Doc_create( tag, opt_attrs, opt_css );\r
        \r
        xnode.parent = this;\r
        this._xnodes[ this._xnodes.length ] = xnode;\r
-       this._root && this._reserveUpdate();\r
+       this._root && X_Node_reserveUpdate();\r
        return xnode;\r
 };\r
-Node.prototype.createAt = function( index, tag, opt_attrs, opt_css ){\r
-       var xnode = Node.create( tag, opt_attrs, opt_css );\r
+function X_Node_createAt( index, tag, opt_attrs, opt_css ){\r
+       var xnode = X_Doc_create( tag, opt_attrs, opt_css );\r
        this.appendAt( index, xnode );\r
        return xnode;\r
 };\r
@@ -295,21 +330,21 @@ Node.prototype.createAt = function( index, tag, opt_attrs, opt_css ){
 /* --------------------------------------\r
  *  CreateText\r
  */\r
-Node.prototype.createText = function( text ){\r
+function X_Node_createText( text ){\r
        var xnode;\r
        if( this._xnodeType !== 1 ) return;\r
        if( !this._xnodes ) this._xnodes = [];\r
        \r
-       Node._newByText = true;\r
+       X_Node_newByText = true;\r
        xnode = new Node( text );\r
        xnode.parent = this;\r
        \r
-       this._root && this._reserveUpdate();\r
+       this._root && X_Node_reserveUpdate();\r
        this._xnodes[ this._xnodes.length ] = xnode;\r
        return xnode;\r
 };\r
-Node.prototype.createTextAt = function( index, text ){\r
-       var xtext = Node.createText( text );\r
+function X_Node_createTextAt( index, text ){\r
+       var xtext = X_Doc_createText( text );\r
        this.appendAt( index, xtext );\r
        return xtext;\r
 };\r
@@ -319,11 +354,11 @@ Node.prototype.createTextAt = function( index, text ){
  * http://d.hatena.ne.jp/think49/20110724/1311472811\r
  * http://d.hatena.ne.jp/uupaa/20100508/1273299874\r
  */\r
-Node.prototype.clone = function( opt_clone_children ){\r
+function X_Node_clone( opt_clone_children ){\r
        var xnode, xnodes, i, l;\r
        switch( this._xnodeType ){\r
                case 1 :\r
-                       Node._newByTag = true;\r
+                       X_Node_newByTag = true;\r
                        xnode = new Node( this._tag, X_Object_clone( this._attrs ), X_Object_clone( this._css ) )\r
                                .attr( { 'id' : this._id } )\r
                                .className( this._className );\r
@@ -334,7 +369,7 @@ Node.prototype.clone = function( opt_clone_children ){
                        };\r
                        return xnode;\r
                case 3 :\r
-                       Node._newByText = true;\r
+                       X_Node_newByText = true;\r
                        xnode = new Node( this._text );\r
                        return xnode;\r
                \r
@@ -349,7 +384,7 @@ Node.prototype.clone = function( opt_clone_children ){
  * Node\r
  * HtmlElement の場合は内部使用専用 そのため event の破棄等しない\r
  */\r
-Node.prototype.append = function( v ){\r
+function X_Node_append( v ){\r
        var i, l, xnodes, frg;\r
        if( this._xnodeType !== 1 ) return;\r
        \r
@@ -383,9 +418,9 @@ Node.prototype.append = function( v ){
                                        \r
                                //};\r
                        };// else\r
-                       //if( ( i = Node._reserveRemoval.indexOf( v ) ) !== -1 ){\r
+                       //if( ( i = X_Node_reserveRemoval.indexOf( v ) ) !== -1 ){\r
                        //      if( !this._state ) alert( 'xnode already destroyed!' );\r
-                       //      Node._reserveRemoval.splice( i, 1 );\r
+                       //      X_Node_reserveRemoval.splice( i, 1 );\r
                        //};\r
                        break;\r
                default :\r
@@ -394,12 +429,12 @@ Node.prototype.append = function( v ){
 \r
        v.parent = this;\r
        xnodes[ xnodes.length ] = v;\r
-       this._root && this._reserveUpdate();\r
+       this._root && X_Node_reserveUpdate();\r
        return this;\r
 };\r
 \r
 \r
-Node.prototype.appendAt = function( start, v ){\r
+function X_Node_appendAt( start, v ){\r
        var xnodes, l, i;\r
        \r
        if( this._xnodeType !== 1 ) return this;\r
@@ -447,9 +482,9 @@ Node.prototype.appendAt = function( start, v ){
                                        \r
                                //};\r
                        };// else\r
-                       //if( ( i = Node._reserveRemoval.indexOf( v ) ) !== -1 ){\r
+                       //if( ( i = X_Node_reserveRemoval.indexOf( v ) ) !== -1 ){\r
                        //      if( !this._state ) alert( 'xnode already destroyed!' );\r
-                       //      Node._reserveRemoval.splice( i, 1 );\r
+                       //      X_Node_reserveRemoval.splice( i, 1 );\r
                        //};\r
                        break;\r
                default :\r
@@ -458,11 +493,11 @@ Node.prototype.appendAt = function( start, v ){
 \r
        v.parent = this;\r
        this._xnodes.splice( start, 0, v );\r
-       this._root && this._reserveUpdate();\r
+       this._root && X_Node_reserveUpdate();\r
        return this;\r
 };\r
 \r
-Node.prototype.appendTo = function( parent, opt_index ){\r
+function X_Node_appendTo( parent, opt_index ){\r
        switch( X_Node_getType( parent ) ){\r
                case X_Node_TYPE.RAW_HTML :\r
                        parent = new Node( parent );\r
@@ -479,15 +514,15 @@ Node.prototype.appendTo = function( parent, opt_index ){
        return this;\r
 };\r
 \r
-Node.prototype.appendToRoot = function( opt_index ){\r
-       opt_index === undefined ? Node._body.append( this ) : Node._body.appendAt( opt_index, this );\r
+function X_Node_appendToRoot( opt_index ){\r
+       opt_index === undefined ? X_Node_body.append( this ) : X_Node_body.appendAt( opt_index, this );\r
        return this;\r
 };\r
 \r
 /* --------------------------------------\r
  *  Before , After, Replace\r
  */\r
-Node.prototype.before = Node.prototype.prevNode = function( v ){\r
+function X_Node_before( v ){\r
        var parent = this.parent, xnodes, i, l, start;\r
        \r
        // getter\r
@@ -512,7 +547,7 @@ Node.prototype.before = Node.prototype.prevNode = function( v ){
        return this;\r
 };\r
 \r
-Node.prototype.after = Node.prototype.nextNode = function( v ){\r
+function X_Node_after( v ){\r
        var parent = this.parent, xnodes, i, l, start;\r
        \r
        // getter\r
@@ -547,7 +582,7 @@ Node.prototype.after = Node.prototype.nextNode = function( v ){
        return this;\r
 };\r
 \r
-Node.prototype.replace = function( v ){\r
+function X_Node_replace( v ){\r
        if( !this.parent ) return this;\r
        return arguments.length === 1 ? this.before( v ).remove() : this.before.apply( this, arguments ).remove();\r
 };\r
@@ -555,22 +590,22 @@ Node.prototype.replace = function( v ){
 /* --------------------------------------\r
  *  Remove\r
  */\r
-Node.prototype.remove = function(){\r
+function X_Node_remove(){\r
        var parent = this.parent;\r
        \r
        if( !parent ) return this;\r
 \r
        parent._xnodes.splice( parent._xnodes.indexOf( this ), 1 );\r
        if( this._root ){\r
-               Node._reserveRemoval[ Node._reserveRemoval.length ] = this;\r
-               this._reserveUpdate();\r
+               X_Node_reserveRemoval[ X_Node_reserveRemoval.length ] = this;\r
+               X_Node_reserveUpdate();\r
        };\r
        delete this.parent;\r
        delete this._root;\r
        return this;\r
 };\r
 \r
-Node.prototype.empty = function(){\r
+function X_Node_empty(){\r
        var xnodes = this._xnodes, i;\r
        if( xnodes && ( i = xnodes.length ) ){\r
                for( ; i; ){\r
@@ -584,14 +619,14 @@ Node.prototype.empty = function(){
 /* --------------------------------------\r
  *  destory\r
  */\r
-Node._destroyChildFlag = false; // TODO\r
+// Node._destroyChildFlag = false; // TODO\r
 \r
-Node.prototype.destroy = function( isChild ){\r
+function X_Node_destroy( isChild ){\r
        var xnodes = this._xnodes, i, elm;\r
        \r
        if( !this._state ) return;\r
        \r
-       elm = this._rawObject || this._ie4getRawNode && this._ie4getRawNode();\r
+       elm = this._rawObject || X_UA_DOM.IE4 && X_Node__ie4getRawNode( this );\r
        \r
        if( xnodes && ( i = xnodes.length ) ){\r
                //for( ; i; ){\r
@@ -600,14 +635,14 @@ Node.prototype.destroy = function( isChild ){
        };\r
        elm && this._listeners && this.unlisten(); // イベントの退避\r
 \r
-       delete Node._chashe[ this._uid ];\r
+       delete X_Node_CHASHE[ this._uid ];\r
        delete this._state;\r
        \r
        if( this._root ){\r
                !isChild && this.remove();\r
        } else {\r
                this.parent && this.parent._xnodes.splice( this.parent._xnodes.indexOf( this ), 1 );\r
-               elm && !isChild && this._actualRemove();\r
+               elm && !isChild && X_Node__actualRemove( this );\r
                this.kill();\r
        };\r
 };\r
@@ -617,11 +652,11 @@ Node.prototype.destroy = function( isChild ){
 /* --------------------------------------\r
  *  contains\r
  */\r
-Node.prototype.contains = function( v ){\r
+function X_Node_contains( v ){\r
        var elm, type, xnodes, i;\r
        if( !v || this._xnodeType !== 1 ) return false;\r
        // contains ie4+\r
-       if( ( elm = this._rawObject || this._ie4getRawNode && this._ie4getRawNode() ) && document.contains && ( type = X_Node_getType( v ) ) && ( type === X_Node_TYPE.RAW_HTML || type === X_Node_TYPE.RAW_TEXT ) ){\r
+       if( ( elm = this._rawObject || X_UA_DOM.IE4 && X_Node__ie4getRawNode( this ) ) && document.contains && ( type = X_Node_getType( v ) ) && ( type === X_Node_TYPE.RAW_HTML || type === X_Node_TYPE.RAW_TEXT ) ){\r
                return elm.contains( v );       \r
        };\r
        //if( document.compareDocumentPosition ){\r
@@ -640,26 +675,30 @@ Node.prototype.contains = function( v ){
 /* --------------------------------------\r
  *  getChild\r
  */\r
-Node.prototype.getChildAt = function( i ){\r
+function X_Node_getChildAt( i ){\r
        var xnodes = this._xnodeType === 1 && this._xnodes;\r
        return xnodes && 0 <= i && i < xnodes.length && xnodes[ i ];\r
 };\r
 \r
+function X_Node_length(){\r
+       var xnodes = this._xnodes;\r
+       return xnodes ? xnodes.length : 0;\r
+};\r
 \r
 /* --------------------------------------\r
  *  firstChild, lastChild\r
  */\r
-Node.prototype.firstChild = function(){\r
+function X_Node_firstChild(){\r
        return this.getChildAt( 0 );\r
 };\r
-Node.prototype.lastChild = function(){\r
+function X_Node_lastChild(){\r
        return this.getChildAt( this._xnodes.length - 1 );\r
 };\r
 \r
 /* --------------------------------------\r
  *  getOrder\r
  */\r
-Node.prototype.getOrder = function(){\r
+function X_Node_getOrder(){\r
        var parent = this.parent;\r
        if( !parent ) return -1;\r
        return parent._xnodes.indexOf( this );\r
@@ -668,7 +707,7 @@ Node.prototype.getOrder = function(){
 /* --------------------------------------\r
  *  className, addClass, removeClass, hasClass\r
  */\r
-Node.prototype.className = function( v ){\r
+function X_Node_className( v ){\r
        var node, _, __;\r
        // getter\r
        if( v === undefined ) return this._className;\r
@@ -689,10 +728,10 @@ Node.prototype.className = function( v ){
                v ? ( this._className = v ) : delete this._className;\r
        };\r
        this._dirty |= X_Node_Dirty.CLASSNAME;\r
-       this._root && this._reserveUpdate();\r
+       this._root && X_Node_reserveUpdate();\r
        return this;\r
 };\r
-Node.prototype.addClass = function( v ){\r
+function X_Node_addClass( v ){\r
        var names = v.split( ' ' ),\r
                i     = names.length,\r
                name;\r
@@ -704,7 +743,7 @@ Node.prototype.addClass = function( v ){
        };\r
        return v ? this.className( this._className + ( this._className ? ' ' : '' ) + v ) : this;\r
 };\r
-Node.prototype.removeClass = function( v ){\r
+function X_Node_removeClass( v ){\r
        var _          = ' ',\r
                className  = this._className,\r
                names      = v.split( _ ),\r
@@ -723,7 +762,7 @@ Node.prototype.removeClass = function( v ){
        };\r
        return f ? this.className( classNames.join( _ ) ) : this;\r
 };\r
-Node.prototype.toggleClass = function( v, opt_toggle ){\r
+function X_Node_toggleClass( v, opt_toggle ){\r
        var names, i, name;\r
        if( opt_toggle !== undefined ){\r
                return !!opt_toggle ? this.addClass( v ) : this.removeClass( v );       \r
@@ -731,11 +770,11 @@ Node.prototype.toggleClass = function( v, opt_toggle ){
        names = v.split( ' ' );\r
        for( i = names.length; i; ){\r
                name = names[ --i ];\r
-               this.hassClass( name ) ? this.removeClass( name ) : this.addClass( name );\r
+               this.hasClass( name ) ? this.removeClass( name ) : this.addClass( name );\r
        };\r
        return this;\r
 };\r
-Node.prototype.hasClass = function( v ){\r
+function X_Node_hasClass( v ){\r
        var _ = ' ',\r
                className = this._className,\r
                i, name;\r
@@ -757,9 +796,7 @@ Node.prototype.hasClass = function( v ){
  *  html, text\r
  */\r
 \r
-Node._outerFlag = null;\r
-\r
-Node.prototype.html = function( html ){\r
+function X_Node_html( html ){\r
        var _ = '', q = '"', xnodes, n, i, l;\r
        // setter\r
        if( html !== undefined ){ // String 以外に Number や false null なども許可\r
@@ -772,38 +809,44 @@ Node.prototype.html = function( html ){
                return this._text;\r
        };\r
        \r
-       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){\r
+       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X_Node_CSS_objToCssText( this ) ) ){\r
                delete this._cssText;\r
        };\r
-       html = !Node._outerFlag ? [] : [\r
+       html = !X_Node_outerXNode ? [] : [\r
                '<', this._tag,\r
                this._id ? ' id="' + this._id + q : _,\r
                this._className ? ' class="' + this._className + q : _,\r
-               this._attrText === false ? ( this._attrText = X_Node_Attr.objToAttrText( this._attrs ) ) : this._attrText,\r
+               this._attrText === false ? ( this._attrText = X_Node_Attr_objToAttrText( this._attrs ) ) : this._attrText,\r
                this._cssText ? ' style="' + this._cssText + q : _,\r
        '>' ];\r
        \r
        n = html.length;\r
        if( ( xnodes = this._xnodes ) && ( l = xnodes.length ) ){\r
-               if( !Node._outerFlag ) Node._outerFlag = this;\r
+               if( !X_Node_outerXNode ) X_Node_outerXNode = this;\r
                for( i = 0; i < l; ++i ){\r
                        html[ n ] = xnodes[ i ].html();\r
                        ++n;\r
                };\r
-               if( Node._outerFlag === this )  Node._outerFlag = null;\r
+               if( X_Node_outerXNode === this )  X_Node_outerXNode = null;\r
        };\r
-       !Node._outerFlag || X_Dom_DTD_EMPTY[ this._tag ] || ( html[ n ] = '<\/' + this._tag + '>' );\r
+       !X_Node_outerXNode || X_Dom_DTD_EMPTY[ this._tag ] || ( html[ n ] = '<\/' + this._tag + '>' );\r
        return html.join( _ );\r
 };\r
 \r
-Node.prototype.text = function( text ){\r
+/*\r
+ * null が来たら '', 数値等が来たら文字烈化\r
+ */\r
+function X_Node_text( text ){\r
        var xnodes, texts, i, l;\r
        // setter\r
        if( text !== undefined ){\r
+               if( text === null ) text = '';\r
+               text += '';\r
+               \r
                if( this._xnodeType === 3 ){\r
                        if( this._text !== text ){\r
                                text ? ( this._text = text ) : delete this.text;\r
-                               this._root && this._reserveUpdate();\r
+                               this._root && X_Node_reserveUpdate();\r
                                this._dirty |= X_Node_Dirty.CONTENT;\r
                        };\r
                        return this;\r
@@ -832,11 +875,15 @@ Node.prototype.text = function( text ){
 /*\r
  * HTML要素に対して name の関数を実行しその戻り値を返す。関数に渡す引数も任意に設定できる。\r
  */\r
-Node.prototype.call = function( name /*, opt_args... */ ){\r
-       var raw  = this._rawObject || this._ie4getRawNode && this._ie4getRawNode(),\r
-               l    = arguments.length - 1,\r
-               func, args, params, i;\r
+function X_Node_call( name /*, opt_args... */ ){\r
+       var l = arguments.length - 1,\r
+               raw, func, args, params, i;\r
+               \r
+       X_Node_updateTimerID && X_Node_startUpdate();\r
+       \r
+       raw  = this._rawObject || X_UA_DOM.IE4 && X_Node__ie4getRawNode( this );\r
        if( !raw ) return;\r
+       \r
        func = raw[ name ];\r
        if( X.Type.isFunction( func ) ){\r
                if( l ){\r
@@ -871,7 +918,7 @@ Node.prototype.call = function( name /*, opt_args... */ ){
  * xnode を this として関数を実行する。 NodeList.each と動作を合わせてあるため関数の戻り値は破棄される。\r
  * 関数に渡す引数も任意に設定できる。\r
  */\r
-Node.prototype.each = function( func /*, opt_args */ ){\r
+function X_Node_each( func /*, opt_args */ ){\r
        var args;\r
        if( 1 < arguments.length ){\r
                args = X_Object_cloneArray( arguments );\r
@@ -900,28 +947,28 @@ Node.prototype.each = function( func /*, opt_args */ ){
  * root._reserveRemoval にいたら消す, new_parent._xnodes に挿入 steta は not_added にして commitUpdate を待つ\r
  */\r
        \r
-Node.prototype._reserveUpdate = function(){\r
-       var root = Node._body;\r
-       if( root && !root._updateTimerID ) root._updateTimerID = X.Timer.requestFrame( root, root._startUpdate );\r
+function X_Node_reserveUpdate(){\r
+       if( !X_Node_updateTimerID ) X_Node_updateTimerID = X.Timer.requestFrame( X_Node_startUpdate );\r
 };\r
 \r
-Node.prototype._startUpdate = function(){\r
+function X_Node_startUpdate( time ){\r
        var removal, i, xnode, tmp;\r
-       if( X_ViewPort_readyState < X_TEMP.SYSTEM_EVENT_INIT ){\r
+       \r
+       if( !X_Node_updateTimerID || X_ViewPort_readyState < X_TEMP.SYSTEM_EVENT_INIT ){\r
                return;\r
        };\r
-       if( this._updateTimerID ){\r
-               X.Timer.cancelFrame( this._updateTimerID );\r
-               this._updateTimerID = 0;\r
-       } else {\r
-               return;\r
+\r
+       X.Timer.cancelFrame( X_Node_updateTimerID );\r
+       X_Node_updateTimerID = 0;\r
+\r
+       if( time ){\r
+               // X.Timer 経由でないと発火しない このイベントでサイズを取ると無限ループに\r
+               X_System._listeners && X_System._listeners[ X.Event.BEFORE_UPDATE ] && X_System.dispatch( X.Event.BEFORE_UPDATE );\r
        };\r
-       // このイベントでサイズを取ると無限ループに\r
-       // X_ViewPort._listeners && X_ViewPort._listeners[ X.Event.BEFORE_UPDATE ] && X_ViewPort.dispatch( X.Dom.Event.BEFORE_UPDATE );\r
 \r
-       removal = Node._reserveRemoval;\r
+       removal = X_Node_reserveRemoval;\r
        \r
-       tmp = this._rawObject.style.visibility;\r
+       //tmp = X_Node_body._rawObject.style.visibility;\r
        //this._rawObject.style.visibility = 'hidden';\r
 \r
        //console.log( '_actualRemove().' );\r
@@ -929,166 +976,169 @@ Node.prototype._startUpdate = function(){
        if( i = removal.length ){\r
                for( ; i; ){\r
                        xnode = removal[ --i ];\r
-                       xnode._actualRemove();\r
-                       !this._state && xnode.kill();\r
+                       X_Node__actualRemove( xnode );\r
+                       !X_Node_body._state && xnode.kill();\r
                };\r
                removal.length = 0;\r
        };\r
 \r
        //console.log( 'start _startUpdate().' );\r
 \r
-       /* Node._html._dirty ? */ Node._html._commitUpdate() /* : this._commitUpdate() */;\r
+       /* X_Node_html._dirty ? */ X_Node__commitUpdate( X_Node_html ); /* : X_Node__commitUpdate( X_Node_body ); */;\r
        \r
        //console.log( 'end of _startUpdate().' );\r
        \r
+       if( time ){\r
+               // X.Timer 経由でないと発火しない このイベントでサイズを取ると無限ループに\r
+               X_System._listeners && X_System._listeners[ X.Event.UPDATED ] && X_System.dispatch( X.Event.UPDATED );  \r
+       };\r
+       \r
        X_ViewPort._listeners && X_ViewPort._listeners[ X.Event.AFTER_UPDATE ] && X_ViewPort.asyncDispatch( X.Event.AFTER_UPDATE );\r
        //this._rawObject.style.visibility = tmp;\r
 };\r
 \r
-Node.prototype._commitUpdate =\r
+var X_Node__commitUpdate =\r
        X_UA_DOM.W3C ?\r
-               ( function( parentElement, nextElement ){\r
-                       var elm = this._rawObject,\r
+               ( function( that, parentElement, nextElement ){\r
+                       var elm = that._rawObject,\r
                                xnodes, l, i, frg, next, k, v;\r
 \r
-                       if( this._state & X_Node_State.IE5_DISPLAY_NONE_FIX ){\r
-                               //alert( this._tag + ' ' + !!elm );\r
+                       if( that._state & X_Node_State.IE5_DISPLAY_NONE_FIX ){\r
+                               //alert( that._tag + ' ' + !!elm );\r
                                // filter の効いている要素だけdisplay:none が無視される模様。filter を切ればよい?\r
                                // 親が、display:none の場合は?\r
-                               elm && elm.parentNode && this._actualRemove();\r
+                               elm && elm.parentNode && X_Node__actualRemove( that );\r
                                return nextElement;\r
                        };\r
 \r
                        if( !elm || ( parentElement && elm.parentNode !== parentElement ) || ( nextElement && elm.nextSibling !== nextElement ) ){\r
                                nextElement ?\r
-                                       parentElement.insertBefore( this._actualCreate(), nextElement ) :\r
-                                       parentElement.appendChild( this._actualCreate() );\r
-                               this._afterActualCreate();\r
+                                       parentElement.insertBefore( X_Node__actualCreate( that ), nextElement ) :\r
+                                       parentElement.appendChild( X_Node__actualCreate( that ) );\r
+                               X_Node__afterActualCreate( that );\r
 \r
-                               return elm || this._rawObject;\r
+                               return elm || that._rawObject;\r
                        } else\r
-                       if( ( xnodes = this._xnodes ) && ( l = xnodes.length ) ) {\r
+                       if( ( xnodes = that._xnodes ) && ( l = xnodes.length ) ) {\r
                                \r
                                /*if( elm.childNodes.length !== l && ( frg = X_Node_useDocumentFragment ) ){\r
                                        for( i = 0; i < l; ++i ){\r
-                                               frg.appendChild( xnodes[ i ]._actualCreate( true ) );\r
+                                               frg.appendChild( X_Node__actualCreate( xnodes[ i ], true ) );\r
                                        };\r
                                        elm.appendChild( frg );\r
-                                       for( i = 0; i < l; ++i ){\r
-                                               xnodes[ i ]._afterActualCreate( true );\r
-                                       };\r
                                } else {*/\r
                                        for( ; l; ){\r
-                                               next = xnodes[ --l ]._commitUpdate( elm, next );\r
+                                               next = X_Node__commitUpdate( xnodes[ --l ], elm, next );\r
                                        };\r
                                //};\r
                        };\r
 \r
-                       delete this._fontSize;\r
-                       this._dirty && this._updateRawNode( elm );\r
-                       if( this._state & X_Node_State.IE5_DISPLAY_NONE_FIX ){\r
+                       delete that._fontSize;\r
+                       that._dirty && X_Node__updateRawNode( that, elm );\r
+                       if( that._state & X_Node_State.IE5_DISPLAY_NONE_FIX ){\r
                                return nextElement;\r
                        };\r
                        return elm;\r
                }) :\r
        X_UA_DOM.IE4 ? \r
-               ( function( parentElement, prevElement ){\r
-                       var elm    = this._rawObject || this._ie4getRawNode(),\r
+               ( function( that, parentElement, prevElement ){\r
+                       var elm    = that._rawObject || X_Node__ie4getRawNode( that ),\r
                                xnodes, l, i, html, text, prev;\r
 \r
                        if( !elm ){\r
                                prevElement ?\r
-                                       prevElement.insertAdjacentHTML( 'AfterEnd', this._actualCreate() ) :\r
-                                       parentElement.insertAdjacentHTML( 'AfterBegin', this._actualCreate() );\r
-                               this._afterActualCreate();\r
-                               return this._rawObject || this._ie4getRawNode();\r
+                                       prevElement.insertAdjacentHTML( 'AfterEnd', X_Node__actualCreate( that ) ) :\r
+                                       parentElement.insertAdjacentHTML( 'AfterBegin', X_Node__actualCreate( that ) );\r
+                               X_Node__afterActualCreate( that );\r
+                               return that._rawObject || X_Node__ie4getRawNode( that );\r
                        };\r
                        \r
-                       xnodes = this._xnodes;\r
+                       xnodes = that._xnodes;\r
                        l      = xnodes ? xnodes.length : 0;\r
                        \r
-                       if( this._dirty & X_Node_Dirty.IE4_TEXTNODE_FIX || ( this._state & X_Node_State.IE4_ONLY_TEXT && ( l !== 1 || xnodes[ 0 ]._xnodeType !== 3 ) ) ){ // 1 < l && elm.children.length === 0\r
+                       if( that._dirty & X_Node_Dirty.IE4_TEXTNODE_FIX || ( that._state & X_Node_State.IE4_ONLY_TEXT && ( l !== 1 || xnodes[ 0 ]._xnodeType !== 3 ) ) ){ // 1 < l && elm.children.length === 0\r
                                html = [];\r
                                for( i = 0; i < l; ++i ){\r
-                                       html[ i ] = xnodes[ i ]._actualCreate();\r
+                                       html[ i ] = X_Node__actualCreate( xnodes[ i ] );\r
                                };\r
                                elm.innerHTML = html.join( '' );\r
                                for( i = 0; i < l; ++i ){\r
-                                       xnodes[ i ]._afterActualCreate();\r
+                                       X_Node__afterActualCreate( xnodes[ i ] );\r
                                };\r
-                               this._state &= ~X_Node_State.IE4_ONLY_TEXT;\r
+                               that._state &= ~X_Node_State.IE4_ONLY_TEXT;\r
                        } else\r
-                       if( this._state & X_Node_State.IE4_ONLY_TEXT ){ // textNode が swap した場合の検出は、_root で行う\r
+                       if( that._state & X_Node_State.IE4_ONLY_TEXT ){ // textNode が swap した場合の検出は、_root で行う\r
                                text = xnodes[ 0 ];\r
                                if( text._dirty || !text._root ){\r
                                        elm.innerHTML = text._text;\r
                                        delete text._dirty;\r
-                                       text._root = this._root;                                        \r
+                                       text._root = that._root;                                        \r
                                };\r
                        } else\r
                        if( l ){\r
                                for( i = 0; i < l; ++i ){\r
-                                       prev = xnodes[ i ]._commitUpdate( elm, prev );\r
+                                       prev = X_Node__commitUpdate( xnodes[ i ], elm, prev );\r
                                };\r
                        };\r
                        \r
-                       delete this._fontSize;\r
-                       this._dirty && this._updateRawNode( elm );\r
+                       delete that._fontSize;\r
+                       that._dirty && X_Node__updateRawNode( that, elm );\r
                        return elm;\r
                }) :\r
                (function(){});\r
 \r
-Node.prototype._updateRawNode =\r
+var X_Node__updateRawNode =\r
        X_UA_DOM.W3C ?\r
-               ( function( elm ){\r
+               ( function( that, elm ){\r
                        var attrs, rename, k, v;\r
 \r
                        // textNode\r
-                       if( this._dirty & X_Node_Dirty.CONTENT ){\r
-                               elm.data = X_String_chrReferanceTo( this._text );\r
-                               delete this._dirty;\r
+                       if( that._dirty & X_Node_Dirty.CONTENT ){\r
+                               elm.data = X_String_chrReferanceTo( that._text );\r
+                               delete that._dirty;\r
                                return;\r
                        };\r
                        // id\r
-                       if( this._dirty & X_Node_Dirty.ID ){\r
-                               this._id ? ( elm.id = this._id ) : ( elm.id && elm.removeAttribute( 'id' ) );           \r
+                       if( that._dirty & X_Node_Dirty.ID ){\r
+                               that._id ? ( elm.id = that._id ) : ( elm.id && elm.removeAttribute( 'id' ) );           \r
                        };\r
                        // className\r
-                       if( this._dirty & X_Node_Dirty.CLASSNAME ){\r
-                               this._className ? ( elm.className = this._className ) : ( elm.className && elm.removeAttribute( X.UA.IE5678 ? 'className' : 'class' ) ); // className は ie7-?                         \r
+                       if( that._dirty & X_Node_Dirty.CLASSNAME ){\r
+                               that._className ? ( elm.className = that._className ) : ( elm.className && elm.removeAttribute( X_UA.IE5678 ? 'className' : 'class' ) ); // className は ie7-?                         \r
 \r
                                // ie5 only\r
                                if( X_Node_State.IE5_DISPLAY_NONE_FIX && elm.currentStyle.display === 'none' ){\r
-                                       this._actualRemove();\r
-                                       this._state |= X_Node_State.IE5_DISPLAY_NONE_FIX;\r
+                                       X_Node__actualRemove( that );\r
+                                       that._state |= X_Node_State.IE5_DISPLAY_NONE_FIX;\r
                                        return;\r
                                };\r
                        };\r
+                       \r
                        // style\r
                        // TODO display:none の場合、更新をスキップ\r
-                       if( this._dirty & X_Node_Dirty.CSS ){\r
-                               if( this._cssText !== null || ( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){\r
-                                       X.UA.Opera78 || X.UA.NN6 ?\r
-                                               elm.setAttribute( 'style', this._cssText ) : // opera8用\r
-                                               ( elm.style.cssText = this._cssText );\r
+                       if( that._dirty & X_Node_Dirty.CSS ){\r
+                               if( that._cssText !== null || ( that._cssText = X_Node_CSS_objToCssText( that ) ) ){\r
+                                       X_UA.Opera78 || X_UA.NN6 ?\r
+                                               elm.setAttribute( 'style', that._cssText ) : // opera8用\r
+                                               ( elm.style.cssText = that._cssText );\r
                                } else {\r
                                        elm.style.cssText = ''; // IE5.5以下 Safari3.2 で必要\r
                                        elm.removeAttribute( 'style' );\r
-                                       delete this._cssText;\r
+                                       delete that._cssText;\r
                                };\r
                        };\r
                        \r
-                       if( this._dirty & X_Node_Dirty.IE_FILTER ){\r
-                               elm.style.filter = X.Dom.Style.SPECIAL_FIX( this._css );\r
+                       if( that._dirty & X_Node_Dirty.IE_FILTER ){\r
+                               elm.style.filter = X_Node_CSS_objToIEFilterText( that );;\r
                        };\r
                        \r
                        // attr\r
                        // TODO display:none の場合、更新をスキップ\r
-                       if( this._dirty & X_Node_Dirty.ATTR && ( attrs = this._newAttrs || this._attrs ) ){\r
-                               rename = X_Node_Attr.renameForDOM;\r
+                       if( that._dirty & X_Node_Dirty.ATTR && ( attrs = that._newAttrs || that._attrs ) ){\r
+                               rename = X_Node_Attr_renameForDOM;\r
                                for( k in attrs ){\r
-                                       if( !X.UA.MacIE && ( X.UA.IE5 || X.UA.IE55 ) ){ // IETester 5.5 ではエラーが出なかった.MultipulIE5.5 ではエラーが出たので\r
-                                               if( this._tag === 'TEXTAREA' && k === 'value' ){\r
+                                       if( !X_UA.MacIE && ( X_UA.IE5 || X_UA.IE55 ) ){ // IETester 5.5 ではエラーが出なかった.MultipulIE5.5 ではエラーが出たので\r
+                                               if( that._tag === 'TEXTAREA' && k === 'value' ){\r
                                                        elm.firstChild ?\r
                                                                ( elm.firstChild.data = attrs[ k ] ) :\r
                                                                elm.appendChild( document.createTextNode( attrs[ k ] ) );\r
@@ -1098,22 +1148,22 @@ Node.prototype._updateRawNode =
                                        // TODO IE では input, なぜか buttonも、type の変更が出来ない、object も 同値で置き換えようとしても不可\r
                                        ( v = attrs[ k ] ) === undefined ?\r
                                                elm.removeAttribute( rename[ k ] || k ) :\r
-                                               ( elm[ rename[ k ] || k ] = X_Node_Attr.noValue[ k ] ? k : v );                         \r
+                                               ( elm[ rename[ k ] || k ] = X_Node_Attr_noValue[ k ] ? k : v );                         \r
 \r
                                };\r
-                               delete this._newAttrs;\r
+                               delete that._newAttrs;\r
                        };\r
                        \r
-                       delete this._dirty;\r
+                       delete that._dirty;\r
                }) :\r
        X_UA_DOM.IE4 ? \r
-               ( function( elm ){\r
+               ( function( that, elm ){\r
                        var attrs, rename, k, v;\r
 \r
                        // fake textNode\r
-                       if( this._dirty & X_Node_Dirty.CONTENT ){\r
-                               elm.innerText = this._text;\r
-                               delete this._dirty;\r
+                       if( that._dirty & X_Node_Dirty.CONTENT ){\r
+                               elm.innerText = that._text;\r
+                               delete that._dirty;\r
                                return;\r
                        };\r
                        \r
@@ -1122,41 +1172,41 @@ Node.prototype._updateRawNode =
                 * title、className、id、lang、language には setAttribute でなく、element.id で直接読み書きできる\r
                 */     \r
                        // id\r
-                       if( this._dirty & X_Node_Dirty.CONTENT ) elm.setAttribute( 'id', this._id || ( 'ie4uid' + xnode._uid ) );\r
+                       if( that._dirty & X_Node_Dirty.CONTENT ) elm.setAttribute( 'id', that._id || ( 'ie4uid' + xnode._uid ) );\r
 \r
                        // className\r
-                       if( this._dirty & X_Node_Dirty.CLASSNAME ){\r
-                               this._className ? ( elm.className = this._className ) : elm.removeAttribute( 'class' );\r
+                       if( that._dirty & X_Node_Dirty.CLASSNAME ){\r
+                               that._className ? ( elm.className = that._className ) : elm.removeAttribute( 'class' );\r
                        };\r
                        // style\r
-                       if( this._dirty & X_Node_Dirty.CSS ){\r
-                               if( this._cssText !== null || ( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){\r
-                                       elm.style.cssText = this._cssText;\r
+                       if( that._dirty & X_Node_Dirty.CSS ){\r
+                               if( that._cssText !== null || ( that._cssText = X_Node_CSS_objToCssText( that ) ) ){\r
+                                       elm.style.cssText = that._cssText;\r
                                } else {\r
                                        elm.style.cssText = '';\r
                                        elm.removeAttribute( 'style' );\r
-                                       delete this._cssText;\r
+                                       delete that._cssText;\r
                                };\r
                        };\r
                        \r
-                       if( this._dirty & X_Node_Dirty.IE_FILTER ){\r
-                               this._rawObject.style.filter = X.Dom.Style.SPECIAL_FIX( this._css );\r
+                       if( that._dirty & X_Node_Dirty.IE_FILTER ){\r
+                               that._rawObject.style.filter = X_Node_CSS_objToIEFilterText( that );;\r
                        };\r
                        \r
                        // attr\r
-                       if( this._dirty & X_Node_Dirty.ATTR && ( attrs = this._newAttrs || this._attrs ) ){\r
-                               rename = X_Node_Attr.renameForDOM;\r
+                       if( that._dirty & X_Node_Dirty.ATTR && ( attrs = that._newAttrs || that._attrs ) ){\r
+                               rename = X_Node_Attr_renameForDOM;\r
                                for( k in attrs ){\r
                                        ( v = attrs[ k ] ) === undefined ?\r
                                                elm.removeAttribute( rename[ k ] || k ) :\r
-                                       this._tag === 'TEXTAREA' && k === 'value' ?\r
-                                               ( elm.innerText = v ) :\r
-                                               elm.setAttribute( rename[ k ] || k, X_Node_Attr.noValue[ k ] ? k : v ); // TODO X_Node_Attr.noValue[ k ] ? k : v\r
+                                       //that._tag === 'TEXTAREA' && k === 'value' ?\r
+                                       //      ( elm.innerText = v ) :\r
+                                               elm.setAttribute( rename[ k ] || k, X_Node_Attr_noValue[ k ] ? k : v );\r
                                };\r
-                               delete this._newAttrs;\r
+                               delete that._newAttrs;\r
                        };\r
                        \r
-                       delete this._dirty;\r
+                       delete that._dirty;\r
                }) :\r
                (function(){});\r
 \r
@@ -1177,39 +1227,39 @@ Node.prototype._updateRawNode =
  * \r
  * document.createElement of ie4 is only for OPTION & IMAGE.\r
  */\r
-Node.prototype._actualCreate =\r
-       X_UA_DOM.W3C ? (function( isChild ){\r
-               var elm = this._rawObject,\r
+var X_Node__actualCreate =\r
+       X_UA_DOM.W3C ? (function( that, isChild ){\r
+               var elm = that._rawObject,\r
                        xnodes, frg, i, l;\r
                \r
-               if( this._xnodeType === 3 ){\r
+               if( that._xnodeType === 3 ){\r
                        if( elm ) return elm;\r
-                       delete this._dirty;\r
-                       return this._rawObject = document.createTextNode( X_String_chrReferanceTo( this._text ) );\r
+                       delete that._dirty;\r
+                       return that._rawObject = document.createTextNode( X_String_chrReferanceTo( that._text ) );\r
                };\r
                \r
                if( !elm ){\r
-                       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){\r
-                               delete this._cssText;\r
+                       if( that._dirty & X_Node_Dirty.CSS && !( that._cssText = X_Node_CSS_objToCssText( that ) ) ){\r
+                               delete that._cssText;\r
                        };\r
-                       this._isNew = true;\r
-                       this._rawObject = elm =\r
+                       that._isNew = true;\r
+                       that._rawObject = elm =\r
                                X_Node_strictElmCreation ?\r
                                        document.createElement( [\r
-                                               '<', this._tag,\r
-                                                       ' UID="', this._uid, '"',\r
-                                                       this._id ? ' id="' + this._id + '"' : '',\r
-                                                       this._className ? ' class="' + this._className + '"' : '',\r
-                                                       this._attrText === false ? ( this._attrText = X_Node_Attr.objToAttrText( this._attrs ) ) : this._attrText,\r
-                                                       this._cssText ? ' style="' + this._cssText + '"' : '',\r
+                                               '<', that._tag,\r
+                                                       ' UID="', that._uid, '"',\r
+                                                       that._id ? ' id="' + that._id + '"' : '',\r
+                                                       that._className ? ' class="' + that._className + '"' : '',\r
+                                                       that._attrText === false ? ( that._attrText = X_Node_Attr_objToAttrText( that._attrs ) ) : that._attrText,\r
+                                                       that._cssText ? ' style="' + that._cssText + '"' : '',\r
                                                '>' ].join( '' ) ) :\r
-                                       document.createElement( this._tag );\r
+                                       document.createElement( that._tag );\r
                };\r
                if( X_Node_useDocumentFragment ){\r
-                       if( ( xnodes = this._xnodes ) && ( l = xnodes.length ) ){\r
+                       if( ( xnodes = that._xnodes ) && ( l = xnodes.length ) ){\r
                                !isChild && ( frg = X_Node_useDocumentFragment ).appendChild( elm );\r
                                for( i = 0; i < l; ++i ){\r
-                                       elm.appendChild( xnodes[ i ]._actualCreate( true ) );\r
+                                       elm.appendChild( X_Node__actualCreate( xnodes[ i ], true ) );\r
                                };\r
                                return frg || elm;\r
                        };\r
@@ -1217,159 +1267,161 @@ Node.prototype._actualCreate =
                \r
                return elm;\r
        }) :\r
-       X_UA_DOM.IE4 ? (function( isChild ){\r
-               var uid = this._uid,\r
+       X_UA_DOM.IE4 ? (function( that, isChild ){\r
+               var uid = that._uid,\r
                        html, xnodes, n, i, l;\r
                \r
-               if( this._xnodeType === 3 ){\r
-                       html = [ '<FONT id=ie4uid', uid, ' UID="', uid, '">', this._text, '</FONT>' ];// fake textNode\r
-                       delete this._rawObject;\r
+               if( that._xnodeType === 3 ){\r
+                       html = [ '<FONT id=ie4uid', uid, ' UID="', uid, '">', that._text, '</FONT>' ];// fake textNode\r
+                       delete that._rawObject;\r
                } else {\r
-                       if( this._rawObject && !isChild ) this._actualRemove( true );\r
+                       if( that._rawObject && !isChild ) X_Node__actualRemove( that, true );\r
                        \r
-                       if( this._dirty & X_Node_Dirty.CSS && !( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){\r
-                               delete this._cssText;\r
+                       if( that._dirty & X_Node_Dirty.CSS && !( that._cssText = X_Node_CSS_objToCssText( that ) ) ){\r
+                               delete that._cssText;\r
                        };\r
                        \r
                        html = [\r
-                               '<', this._tag, ' id=', ( this._id || ( 'ie4uid' + uid ) ), ' UID="', uid, '"',\r
-                               this._className ? ' class="' + this._className + '"' : '',\r
-                               this._attrText === false ? ( this._attrText = X_Node_Attr.objToAttrText( this._attrs ) ) : this._attrText,\r
-                               this._cssText ? ' style="' + this._cssText + '"' : '',\r
+                               '<', that._tag, ' id=', ( that._id || ( 'ie4uid' + uid ) ), ' UID="', uid, '"',\r
+                               that._className ? ' class="' + that._className + '"' : '',\r
+                               that._attrText === false ? ( that._attrText = X_Node_Attr_objToAttrText( that._attrs ) ) : that._attrText,\r
+                               that._cssText ? ' style="' + that._cssText + '"' : '',\r
                        '>' ];\r
                        \r
                        n = html.length;\r
-                       if( ( xnodes = this._xnodes ) && ( l = xnodes.length ) ){\r
+                       if( ( xnodes = that._xnodes ) && ( l = xnodes.length ) ){\r
                                if( l === 1 && xnodes[ 0 ]._xnodeType === 3 ){\r
                                        // only textnode\r
                                        html[ n ] = xnodes[ 0 ]._text;\r
                                        ++n;\r
-                                       this._state |= X_Node_State.IE4_ONLY_TEXT;\r
+                                       that._state |= X_Node_State.IE4_ONLY_TEXT;\r
                                } else {\r
                                        for( i = 0; i < l; ++i ){\r
-                                               html[ n ] = xnodes[ i ]._actualCreate( true );\r
+                                               html[ n ] = X_Node__actualCreate( xnodes[ i ], true );\r
                                                ++n;\r
                                        };                                      \r
                                };\r
                        };\r
-                       X_Dom_DTD_EMPTY[ this._tag ] || ( html[ n ] = '<\/' + this._tag + '>' );\r
+                       X_Dom_DTD_EMPTY[ that._tag ] || ( html[ n ] = '<\/' + that._tag + '>' );\r
                        \r
-                       delete this._newAttrs;\r
+                       delete that._newAttrs;\r
                };\r
                \r
                return html.join( '' );\r
        }) :\r
        (function(){});\r
 \r
-Node.prototype._afterActualCreate =\r
-       X_UA_DOM.W3C ? (function(){\r
-               var elm = this._rawObject, xnodes, l, attrs, k, i;\r
+var X_Node__afterActualCreate =\r
+       X_UA_DOM.W3C ? (function( that ){\r
+               var elm = that._rawObject, xnodes, l, attrs, k, i;\r
 \r
-               this._root  = this.parent._root;\r
+               that._root  = that.parent._root;\r
                \r
-               if( this._xnodeType === 3 ){\r
-                       this._dirty && this._updateRawNode( elm );\r
-                       return this;\r
+               if( that._xnodeType === 3 ){\r
+                       that._dirty && X_Node__updateRawNode( that, elm );\r
+                       return that;\r
                };\r
                        \r
-               xnodes = this._xnodes;\r
+               xnodes = that._xnodes;\r
                l      = xnodes && xnodes.length;\r
                \r
-               if( this._isNew ){\r
+               if( that._isNew ){\r
                        if( !X_Node_useDocumentFragment && l ){// docFrg が使えない場合、doc 追加後に子を追加\r
                                for( i = 0; i < l; ++i ){\r
-                                       elm.appendChild( xnodes[ i ]._actualCreate( true ) );\r
+                                       elm.appendChild( X_Node__actualCreate( xnodes[ i ], true ) );\r
                                };\r
                        };\r
                        if( X_Node_strictElmCreation ){\r
-                               if( this._dirty & X_Node_Dirty.IE_FILTER ){\r
-                                       elm.style.filter = X.Dom.Style.SPECIAL_FIX( this._css );\r
+                               if( that._dirty & X_Node_Dirty.IE_FILTER ){\r
+                                       elm.style.filter = X_Node_CSS_objToIEFilterText( that );;\r
                                };\r
-                               delete this._dirty;\r
+                               delete that._dirty;\r
                        } else {\r
-                               elm.UID = this._uid;\r
-                               this._newAttrs = this._attrs;\r
-                               this._dirty = X_Node_Dirty.ID | X_Node_Dirty.CLASSNAME | X_Node_Dirty.CSS | X_Node_Dirty.ATTR | X_Node_Dirty.IE_FILTER;\r
-                               this._updateRawNode( elm );\r
+                               elm.UID = that._uid;\r
+                               that._newAttrs = that._attrs;\r
+                               that._dirty = X_Node_Dirty.ID | X_Node_Dirty.CLASSNAME | X_Node_Dirty.CSS | X_Node_Dirty.ATTR | X_Node_Dirty.IE_FILTER;\r
+                               X_Node__updateRawNode( that, elm );\r
                        };\r
                        \r
-                       delete this._isNew;\r
+                       delete that._isNew;\r
                } else {\r
-                       this._dirty && this._updateRawNode( elm );\r
+                       that._dirty && X_Node__updateRawNode( that, elm );\r
                };\r
                \r
                for( i = 0; i < l; ++i ){\r
-                       xnodes[ i ]._afterActualCreate();\r
+                       X_Node__afterActualCreate( xnodes[ i ] );\r
                };\r
                // src の onload があるので先ではないか?\r
-               // ie の str から要素を作る場合、srcだけ イベント設定後ではないか?\r
-               X_EventDispatcher_toggleAllEvents( this, true );// イベントの復帰\r
+               // TODO ie の str から要素を作る場合、srcだけ イベント設定後ではないか?\r
+               X_EventDispatcher_toggleAllEvents( that, true );// イベントの復帰\r
        }) :\r
-       X_UA_DOM.IE4 ? (function(){\r
+       X_UA_DOM.IE4 ? (function( that ){\r
                var xnodes, i;\r
-               this._root = this.parent._root;\r
+               that._root = that.parent._root;\r
                \r
-               if( this._xnodeType !== 1 ) return this;\r
+               if( that._xnodeType !== 1 ) return that;\r
                \r
-               if( ( xnodes = this._xnodes ) && ( i = xnodes.length ) ){\r
+               if( ( xnodes = that._xnodes ) && ( i = xnodes.length ) ){\r
                        for( ; i; ){\r
-                               xnodes[ --i ]._afterActualCreate();\r
+                               X_Node__afterActualCreate( xnodes[ --i ] );\r
                        };\r
                };\r
                // textarea への value の適用はここで\r
-               if( this._dirty & X_Node_Dirty.IE_FILTER ){\r
-                       this._ie4getRawNode().style.filter = X.Dom.Style.SPECIAL_FIX( this._css );\r
+               if( that._dirty & X_Node_Dirty.IE_FILTER ){\r
+                       X_Node__ie4getRawNode( that ).style.filter = X_Node_CSS_objToIEFilterText( that );;\r
                };\r
-               delete this._dirty;\r
-               X_EventDispatcher_toggleAllEvents( this, true );// イベントの復帰\r
+               delete that._dirty;\r
+               X_EventDispatcher_toggleAllEvents( that, true );// イベントの復帰\r
        }) :\r
        (function(){});\r
 \r
-Node.prototype._actualRemove =\r
+var X_Node__actualRemove =\r
        X_UA_DOM.W3C ?\r
-               ( function( isChild ){\r
-                       var xnodes = this._xnodes,\r
-                               elm    = this._rawObject,\r
+               // GPUレイヤーにいるうちは remove しない。-> GPU解除してから remove する\r
+               // Firefox34 では遭遇せず、Safari で何度かアニメーションしているうちに発生\r
+               ( function( that, isChild ){\r
+                       var xnodes = that._xnodes,\r
+                               elm    = that._rawObject,\r
                                child, i, l;\r
                        if( xnodes && ( l = xnodes.length ) ){\r
                                for( i = 0; i < l; ++i ){\r
                                        child = xnodes[ i ];\r
-                                       child._xnodeType === 1 && child._actualRemove( true );\r
+                                       child._xnodeType === 1 && X_Node__actualRemove( child, true );\r
                                };\r
                        };\r
 \r
                        if( !elm ) return;\r
-                       this._xnodeType === 1 && X_EventDispatcher_toggleAllEvents( this, false );// イベントの退避\r
-                       // elm.parentNode.tagName for ie7\r
-                       if( !X.UA.MacIE ){\r
+                       that._listeners && X_EventDispatcher_toggleAllEvents( that, false );// イベントの退避\r
+                       if( !X_UA.MacIE ){\r
+                               // elm.parentNode.tagName for ie7 -> that.state & BELONG_TREE_ACTUAL\r
                                !isChild && elm.parentNode && elm.parentNode.tagName && elm.parentNode.removeChild( elm );\r
                        } else {\r
-                               !isChild && elm.parentNode && elm.parentNode.tagName && X_TEMP._fixed_remove( elm, this );\r
+                               !isChild && elm.parentNode && elm.parentNode.tagName && X_TEMP._fixed_remove( elm, that );\r
                        };\r
                }) :\r
        X_UA_DOM.IE4 ?\r
-               ( function( isChild ){\r
-                       var xnodes = this._xnodes,\r
-                               elm    = this._rawObject || this._ie4getRawNode(),\r
+               ( function( that, isChild ){\r
+                       var xnodes = that._xnodes,\r
+                               elm    = that._rawObject || X_Node__ie4getRawNode( that ),\r
                                i, l, xnode;\r
                        if( xnodes && ( l = xnodes.length ) ){\r
                                for( i = 0; i < l; ++i ){\r
-                                       xnodes[ i ]._actualRemove( true );\r
+                                       X_Node__actualRemove( xnodes[ i ], true );\r
                                };\r
                        };\r
 \r
                        if( !elm ) return;\r
-                       this._xnodeType === 1 && X_EventDispatcher_toggleAllEvents( this, false );// イベントの退避\r
+                       that._listeners && X_EventDispatcher_toggleAllEvents( that, false );// イベントの退避\r
                        \r
-                       if( X_Node_Attr.HAS_VALUE[ this._tag ] && ( !this._newAttrs || !X_Object_inObject( 'value', this._newAttrs ) ) ){\r
-                               this._attrs.value = elm.value;\r
+                       if( X_Node_Attr_HAS_VALUE[ that._tag ] && ( !that._newAttrs || !X_Object_inObject( 'value', that._newAttrs ) ) ){\r
+                               that._attrs.value = elm.value;\r
                        };\r
                        elm.removeAttribute( 'id' ); // ?\r
-                       //document.all[ this._id || ( 'ie4uid' + this._uid ) ] = null; // MacIE5 でエラー\r
+                       //document.all[ that._id || ( 'ie4uid' + that._uid ) ] = null; // MacIE5 でエラー\r
                        if( !isChild ) elm.outerHTML = '';\r
-                       delete this._rawObject;\r
+                       delete that._rawObject;\r
                }) :\r
                (function(){});\r
 \r
-console.log( 'X.Dom.Node' );\r
+X_ViewPort.listenOnce( X.Event.UNLOAD, X_Node__actualRemove, [ X_Node_html, true ] );\r
 \r