OSDN Git Service

Version 0.6.58, X.UI.HBox is working.
[pettanr/clientJs.git] / 0.5.x / javascripts / system.js
index adb6ac0..364938c 100644 (file)
@@ -1,16 +1,7 @@
 /*\r
  * pettanR system.js\r
- *   version 0.5.16\r
- * \r
- * \r
- * Type\r
- * \r
- * UA\r
- * \r
- * Util\r
- * \r
- * CSS\r
- * \r
+ *   version 0.5.48\r
+ *\r
  * gadgetOS\r
  *   author:\r
  *     itozyun\r
  *     3-clause BSD\r
  */\r
 \r
-\r
-/*\r
- * http://pettanr.sourceforge.jp/test/type.html\r
- */\r
-       var Type = {\r
-               isObject : function(v) {\r
-                       return v !== null && typeof v === 'object';\r
-               },\r
-               isFunction : function(v) {\r
-                       return typeof v === 'function';\r
-               },\r
-               isArray : function(v) {\r
-                       return Object.prototype.toString.call(v) === "[object Array]";\r
-               },\r
-               isBoolean : function(v) {\r
-                       return typeof v === 'boolean';\r
-               },\r
-               isString : function(v) {\r
-                       return typeof v === 'string';\r
-               },\r
-               isNumber : function(v) {\r
-                       return typeof v === 'number';\r
-               },\r
-               isFinite : function(v){\r
-                       return Type.isNumber(v) === true && isFinite(v);\r
-               },\r
-               isHTMLElement : function(v){\r
-                       if( 'HTMLElement' in window ){\r
-                               Type.isHTMLElement = function(v){\r
-                                       return v instanceof HTMLElement;\r
-                               }\r
-                       } else {\r
-                               Type.isHTMLElement = function(v) {\r
-                                       if( Type.isObject(v) === false ){\r
-                                               return false;\r
-                                       }\r
-                                       var r;\r
-                                       if(v && v.nodeType === 1){\r
-                                               try{\r
-                                                       r = v.cloneNode(false);\r
-                                               } catch(n) {\r
-                                                       return false;\r
-                                               }\r
-                                               if(r === v) return false;\r
-                                               try{\r
-                                                       r.nodeType = 9;\r
-                                                       return r.nodeType === 1;\r
-                                               } catch(n) {}\r
-                                               return true;\r
-                                       }\r
-                                       return false;\r
-                               }\r
-                       }\r
-                       return Type.isHTMLElement(v);\r
-               },\r
-               /*\r
-               isElementCollection : function(v) {\r
-                       return (Object.prototype.toString.call(v) === "[object HTMLCollection]");\r
-               },\r
-               */\r
-               isNull : function(v) {\r
-                       return v === null;\r
-               },\r
-               isUndefined : function(v) {\r
-                       return typeof v === 'undefined';\r
-               }\r
-       };\r
-\r
-/*\r
- * UA\r
- * \r
- *   detect userAgent\r
- *   detect plug in\r
- */\r
-       var UA = ( function(){\r
-               var ua = (function(){\r
-                               var acme = {};\r
-                               \r
-                               var n    = navigator;\r
-                               var dua  = n.userAgent;\r
-                               var dav  = n.appVersion;\r
-                               var tv   = parseFloat(dav);\r
-                               acme.isOpera  = (dua.indexOf("Opera") >= 0) ? tv: undefined;\r
-                               acme.isKhtml  = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;\r
-                               acme.isWebKit = parseFloat(dua.split("WebKit\/")[1]) || undefined;\r
-                               acme.isChrome = parseFloat(dua.split("Chrome\/")[1]) || undefined;\r
-                               acme.isGecko  = (dua.indexOf("Gecko\/") >= 0) ? parseFloat(dua.split("rv:")[1].replace( /^(\d*\.\d*)\.(\d*)/, '$1$2' )) : undefined;\r
-                               var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);\r
-                               if(index && !acme.isChrome){\r
-                                       acme.isSafari = parseFloat(dav.split("Version/")[1]);\r
-                                       if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){\r
-                                               acme.isSafari = 2;\r
-                                       }\r
-                               }\r
-                               if(document.all && !acme.isOpera){\r
-                                       acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;\r
-                               }\r
-                               \r
-                               return acme;\r
-                       })(),\r
-                       isIE = navigator.userAgent.toLowerCase().indexOf( 'msie') !== -1,\r
-                       ieVersion = isIE === true ? parseInt( navigator.appVersion.toLowerCase().replace( /.*msie[ ]/, '').match( /^[0-9]+/)) : 0,\r
-                       ieRenderingVersion = ieVersion === 8 ? document.documentMode : ieVersion,\r
-                       isStanderdMode = document.compatMode === 'CSS1Compat',\r
-                       ActiveX = ( function(){\r
-                               if( isIE === false || ieVersion > 8 ) return false;\r
-                               var     b = document.body,\r
-                                       c = b.className || '',\r
-                                       x,\r
-                                       ret = undefined, //pettanr.URL_PARAMS.ActiveX,\r
-                                       ns = 'pettanr-ActiveX-',\r
-                                       enabled = 'enabled',\r
-                                       disabled = 'disabled';\r
-                               if( ret !== true && ret !== false){\r
-                                       if( b.className.indexOf( ns + enabled ) !== -1 )  return true;\r
-                                       if( b.className.indexOf( ns + disabled ) !== -1 ) return false;\r
-                                       x = document.createElement( 'div' );\r
-                                       b.appendChild(x);\r
-                                       x.style.cssText = 'width:1px;height:1px;line-height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
-                                       ret = x.offsetHeight > 1;\r
-                                       b.removeChild(x);\r
-                               }\r
-                               b.className += [ c !== '' ? ' ' : c, ns, ret === true ? enabled : disabled ].join( '');\r
-                               return ret;\r
-                       })(),\r
-                       VML = ( function(){\r
-                               if( ActiveX === false || isIE === false || ieVersion > 8) return false;\r
-                               var globalObjectName = 'detect_activex',//Util.createGlobalUniqueName(),\r
-                                       script,\r
-                                       id = 'detectVML';\r
-                               document.write( [ '<!--[if gte vml 1]><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));\r
-                               if( window[ globalObjectName ] === 1 ){\r
-                                       script = document.getElementById( id );\r
-                                       script.parentNode.removeChild( script );\r
-                                       window[ globalObjectName ] = null;\r
-                                       return true;\r
-                               }\r
-                               return false;\r
-                       })(),\r
-                       isStandAloneMode = ( function(){\r
-                               if( isIE === false) return false;\r
-                               if( VML === true) return false;\r
-                               var globalObjectName = 'detect_standalone', //Util.createGlobalUniqueName(),\r
-                                       script,\r
-                                       id = 'detectStandAlone';\r
-                               document.write( [ '<!--[if IE ', Math.floor( ieVersion ), ']><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));\r
-                               if( window[globalObjectName] === 1){\r
-                                       script = document.getElementById( id);\r
-                                       script.parentNode.removeChild( script);\r
-                                       window[globalObjectName] = null;\r
-                                       return false;\r
-                               }\r
-                               return true;\r
-                       })();\r
-               return {\r
-                       IE:                                     ua.isIE,\r
-                       GECKO:                          ua.isGecko,\r
-                       OPERA:                          ua.isOpera,\r
-                       KHTML:                          ua.isKhtml,\r
-                       WEBKIT:                         ua.isWebKit,\r
-                       CHROME:                         ua.isChrome,\r
-                       isIE:                           isIE,\r
-                       ieVersion:                      ieVersion,\r
-                       ieRenderingVersion:     ieRenderingVersion,\r
-                       isStanderdMode:         isStanderdMode,\r
-                       ACTIVEX:            ActiveX,\r
-                       VML:                VML,\r
-                       STANDALONE:         isStandAloneMode,\r
-                       VENDER_PREFIX: ( function() {\r
-                               var ua = navigator.userAgent.toLowerCase();\r
-                               if ( ua.indexOf('opera') !== -1 ){\r
-                                       return 'O';\r
-                               } else if ( ua.indexOf('msie') !== -1 ){\r
-                                       return 'ms';\r
-                               } else if ( ua.indexOf('webkit') !== -1 ){\r
-                                       return 'webkit';\r
-                               } else if ( navigator.product === 'Gecko' ){\r
-                                       return 'Moz';\r
-                               }\r
-                               return '';\r
-                       })(),\r
-                       startVML: function(){\r
-                               delete UA.startVML;\r
-                               if( UA.VML !== true) return false;\r
-                               if (!document.namespaces["v"]) {\r
-                               document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");\r
-                           }\r
-                           document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";\r
-                       }\r
-               }\r
-       })();\r
-\r
-\r
-/* ----------------------------------------------------\r
- * Util\r
- * \r
- *   extend( baseInstance, extend)\r
- *   cleanCommnetNode()\r
- *   cleanElement()\r
- *   getElementSize( _elm)\r
- *   getImageSize()\r
- *   getAbsolutePath()\r
- *   getGrobalObjectName()\r
- * \r
- */\r
-       var Util = ( function( window, document, undefined ){\r
-               var body = document.getElementsByTagName( 'body' )[ 0 ];\r
-                       \r
-               var ELM_SIZE_GETTER = ( function(){\r
-                               var ret = document.createElement( 'div' );\r
-                               body.appendChild( ret );\r
-                               \r
-                               ret.id            = 'elmSizeGetter';\r
-                               ret.style.cssText = 'position:absolute;left:0;top:-9999px;visibility:hidden';\r
-                               \r
-                               body.removeChild( ret );\r
-                               return ret;\r
-                       })(),\r
-                       CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ',' );\r
-               \r
-               var UNIT_RATIO = ( function( elm ){\r
-                               var ret = {},\r
-                                       unit,\r
-                                       units = 'cm,mm,in,pt,pc'.split( ',' );\r
-                               \r
-                               body.appendChild( elm );\r
-                               \r
-                               for( var i=units.length; i; ){\r
-                                       unit = units[ --i ];\r
-                                       elm.style.width = 1000 + unit;\r
-                                       ret[ unit ] = elm.offsetWidth / 1000;\r
-                               };\r
-                               elm.style.cssText = '';\r
-                               \r
-                               body.removeChild( elm );\r
-                               return ret;\r
-                       })( ELM_SIZE_GETTER );\r
-                       \r
-               var FONT_SIZE_RATIO = ( function( elm ){\r
-                               var ret = {},\r
-                                       size,\r
-                                       list = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );\r
-                               \r
-                               body.appendChild( elm );\r
-                               elm.style.cssText = 'font-size:100px;line-height:1em;';\r
-                               elm.appendChild( document.createTextNode( 'X' ) );\r
-                               \r
-                               base = elm.offsetHeight;\r
-                               \r
-                               for( var i = list.length; i; ){\r
-                                       size = list[ --i ];\r
-                                       elm.style.fontSize = size;\r
-                                       ret[ size ] = elm.offsetHeight;// / base;\r
-                               };\r
-                               \r
-                               elm.style.cssText = '';\r
-                               elm.removeChild( elm.firstChild );\r
-                               body.removeChild( elm );\r
-                               return ret;\r
-                       })( ELM_SIZE_GETTER );\r
-               \r
-               var REG_LARGE = /[A-Z]/g;\r
-               \r
-               /* clean comment node */\r
-               window.setTimeout( function(){\r
-                       Util.cleanCommnetNode();\r
-                       \r
-                       /* clean noscript */\r
-\r
-                       var noscripts = Util.copyArray( document.getElementsByTagName( 'noscript' ) ),\r
-                               ns;\r
-                       for( var i = noscripts.length; i; ){\r
-                               ns = noscripts[ --i ];\r
-                               ns.parentNode && ns.parentNode.removeChild( ns );\r
-                       };\r
-               }, 0 );\r
-               \r
-               return {\r
-                       parse: function( v ){\r
-                               if( Type.isString( v ) === true ){\r
-                                       if( v === 'true' )      return true;\r
-                                       if( v === 'false' )     return false;\r
-                                       if( v === 'null' )      return null;\r
-                                       if( v === 'undefined' ) return undefined;\r
-                                       if( v === 'NaN' )       return NaN;\r
-                                       if( v === '' )          return v;\r
-                                       var _v = v.split( ' ' ).join( '' ),\r
-                                               n = _v - 0;\r
-                                       if( '' + n === _v || '' + n === '0' + _v  ) return n - 0;\r
-                               };\r
-                               return v;\r
-                       },\r
-                       extend: function( baseInstance, extend ){\r
-                               for( var key in extend ){\r
-                                       if( Type.isUndefined( baseInstance[ key ] ) === true ){\r
-                                               baseInstance[ key ] = extend[ key ];\r
-                                       } else\r
-                                       if( typeof baseInstance[ key ] === typeof extend[ key ] ){\r
-                                               baseInstance[ key ] = extend[ key ];\r
-                                       } else {\r
-                                               alert( 'extend error' );\r
-                                       };\r
-                               };\r
-                               return baseInstance;\r
-                       },      \r
-                       cleanCommnetNode: function ( _targetElm ){\r
-                               search( _targetElm || body );\r
-                               \r
-                               function search( _elm ){\r
-                                       if( !_elm ) return;\r
-                                       if( _elm.nodeType === 8 ){\r
-                                               _elm.parentNode.removeChild( _elm );\r
-                                               return;\r
-                                       };\r
-                                       if( _elm.nodeType === 1 ){\r
-                                               var _array = Util.copyArray( _elm.childNodes ); // liveNode > array\r
-                                               while( _array.length > 0 ) search( _array.shift() );\r
-                                       };\r
-                               };\r
-                       },\r
-                       cleanElement: function( _targetElm ){\r
-                               var _array, _elm, j, _css;\r
-                               for( var i = CLEAN_TARGET_ELEMENT.length; i; ){\r
-                                       _array = Util.copyArray( _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ --i ] ) );\r
-                                       for( j = _array.length; j; ){\r
-                                               _elm = _nodes[ --j ];\r
-                                               _elm.parentNode && _elm.parentNode.removeChild( _elm );\r
-                                       };\r
-                               };\r
-                               Util.cleanCommnetNode( _targetElm );\r
-                               \r
-                               if( UA.isIE === false ) return;\r
-                               _nodes = _targetElm.all || _targetElm.getElementsByTagName( '*' );\r
-                               for( i = _nodes.length; i; ){\r
-                                       _elm = _nodes[ --i ];\r
-                                       _css = Util.getInlineStyle( _elm );\r
-                                       _css.filter   = null;\r
-                                       _css.behavior = null;\r
-                                       _elm.style.cssText = Util.toCssText( _css );\r
-                               };\r
-                       },\r
-                       camelize: function( cssProp ){\r
-                           var parts = cssProp.split( ' ' ).join( '' ).split( '-' ),\r
-                               l     = parts.length;\r
-                           if( l === 1 ) return parts[ 0 ];\r
-                       \r
-                           var camelized = cssProp.charAt(0) === '-'\r
-                             ? parts[ 0 ].charAt( 0 ).toUpperCase() + parts[ 0 ].substring( 1 )\r
-                             : parts[ 0 ];\r
-                       \r
-                           for( var i = 1; i < l; ++i ){\r
-                               camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );\r
-                           };\r
-                           return camelized;\r
-                       },\r
-                       uncamelize: function( str ){\r
-                               return str.split( ' ' ).join( '' ).replace( REG_LARGE, '-$&' ).toLowerCase();\r
-                       },\r
-                       pxTo: function( _px, _unit ){\r
-                               return _px / ( UNIT_RATIO[ _unit ] || 1 );\r
-                       },\r
-                       toPx: function( x, _unit ){\r
-                               return x * ( UNIT_RATIO[ _unit ] || 1 );\r
-                       },\r
-                       absoluteFontSizeToPx: function( fontsize ){\r
-                               return FONT_SIZE_RATIO[ fontsize ] || 0;\r
-                       },\r
-                       getElementSize: function( _elm ){\r
-                               if( Type.isHTMLElement( _elm ) === false ){\r
-                                       return {\r
-                                               width:  0,\r
-                                               height: 0\r
-                                       };\r
-                               };\r
-                               var     parentElm   = _elm.parentNode,\r
-                                       prevElm     = _elm.previousSibling,\r
-                                       nextElm     = _elm.nextSibling,\r
-                                       displayNone = _elm.style.display === 'none';\r
-                               if( displayNone === true ) _elm.style.display = 'block';\r
-                               \r
-                               body.appendChild( ELM_SIZE_GETTER );\r
-                               ELM_SIZE_GETTER.appendChild( _elm );\r
-                               \r
-                               var ret = {\r
-                                       width:          _elm.offsetWidth,\r
-                                       height:         _elm.offsetHeight\r
-                               };\r
-                               if( displayNone === true ) _elm.style.display = 'none';\r
-                               if( nextElm ){\r
-                                       parentElm.insertBefore( _elm, nextElm );\r
-                               } else          \r
-                               if( prevElm && prevElm.nextSibling ){\r
-                                       parentElm.insertBefore( _elm, prevElm.nextSibling );\r
-                               } else {\r
-                                       parentElm && parentElm.appendChild( _elm );\r
-                               };\r
-                               body.removeChild( ELM_SIZE_GETTER );\r
-                               \r
-                               return ret;\r
-                       },\r
-                       getImageSize: function( img ){\r
-                               var     parentElm   = img.parentNode,\r
-                                       prevElm     = img.previousSibling,\r
-                                       nextElm     = img.nextSibling,\r
-                                       displayNone = img.style.display === 'none';\r
-                               if( displayNone === true ) img.style.display = '';\r
-                               \r
-                               body.appendChild( ELM_SIZE_GETTER );\r
-                               ELM_SIZE_GETTER.appendChild( img );\r
-                               \r
-                               var size = getActualDimension( img );\r
-                               \r
-                               if( displayNone === true ) img.style.display = 'none';\r
-                               if( nextElm ){\r
-                                       parentElm.insertBefore( img, nextElm );\r
-                               } else          \r
-                               if( prevElm && prevElm.nextSibling ){\r
-                                       parentElm.insertBefore( img, prevElm.nextSibling );\r
-                               } else {\r
-                                       parentElm && parentElm.appendChild( img );\r
-                               }\r
-                               body.removeChild( ELM_SIZE_GETTER );\r
-                               \r
-                       /* LICENSE: MIT\r
-                        * AUTHOR: uupaa.js@gmail.com\r
-                        */\r
-                               function getActualDimension(image) {\r
-                                       var run, mem, w, h, key = "actual";\r
-                               \r
-                               // for Firefox, Safari, Google Chrome\r
-                                       if( "naturalWidth" in image ){\r
-                                               return {\r
-                                                       width:  image.naturalWidth,\r
-                                                       height: image.naturalHeight\r
-                                               };\r
-                                       };\r
-                               \r
-                                       if( "src" in image ){ // HTMLImageElement\r
-                                               if (image[key] && image[key].src === image.src) {\r
-                                                       return image[key];\r
-                                               };\r
-                                               if( document.uniqueID ){ // for IE\r
-                                                       run = image.runtimeStyle;\r
-                                                       mem = { w: run.width, h: run.height }; // keep runtimeStyle\r
-                                                       run.width  = "auto"; // override\r
-                                                       run.height = "auto";\r
-                                                       w = image.width;\r
-                                                       h = image.height;\r
-                                                       run.width  = mem.w; // restore\r
-                                                       run.height = mem.h;\r
-                                               } else { // for Opera and Other\r
-                                                       mem = { w: image.width, h: image.height }; // keep current style\r
-                                                       image.removeAttribute("width");\r
-                                                       image.removeAttribute("height");\r
-                                                       w = image.width;\r
-                                                       h = image.height;\r
-                                                       image.width  = mem.w; // restore\r
-                                                       image.height = mem.h;\r
-                                               };\r
-                                               return image[key] = { width: w, height: h, src: image.src }; // bond\r
-                                       };\r
-                                       // HTMLCanvasElement\r
-                                       return { width: image.width, height: image.height };\r
-                               };\r
-                               \r
-                               return size;\r
-                       },\r
-                       getAbsolutePath: function( path ){\r
-                               var elm = document.createElement('div');\r
-                               body.appendChild( elm );\r
-                               elm.innerHTML = '<a href=\"' + path + '\" />';\r
-                               body.removeChild( elm );\r
-                               return elm.firstChild.href;\r
-                       },\r
-                       getAbsolutePosition: function( _elm ){\r
-                               // Find the destination's position\r
-                               // need html, body { fontfamily: "MS PGothic", "MS Gothic" } for ie6.\r
-                               var     destx    = _elm.offsetLeft,\r
-                                       desty    = _elm.offsetTop,\r
-                                       thisNode = _elm,\r
-                                       body     = document.body;\r
-                               while( thisNode.offsetParent && thisNode !== body ){\r
-                                       thisNode = thisNode.offsetParent;\r
-                                       destx += thisNode.offsetLeft;\r
-                                       desty += thisNode.offsetTop;\r
-                               };\r
-                               return {\r
-                                       x:      destx,\r
-                                       y:      desty\r
-                               };\r
-                       },\r
-                       pullHtmlAsTemplete: function( html ){\r
-                               var elm = document.createElement( 'div' );\r
-                               body.appendChild( elm );\r
-                               elm.innerHTML = html;\r
-                               body.removeChild( elm );\r
-                               return elm.firstChild;\r
-                       },\r
-                       getElementsByClassName: function( _elm, _className, opt_tagName ){\r
-                               var _all       = !opt_tagName || opt_tagName === '*',\r
-                                       _livenodes = _all === true ? ( _elm.all || _elm.getElementsByTagName( '*' )) : _elm.getElementsByTagName( opt_tagName ),\r
-                                       _nodes     = Util.copyArray( _livenodes );\r
-                               for( var j = 0; j < _nodes.length; ){\r
-                                       _node = _nodes[ j ];\r
-                                       if( _node.nodeType !== 1 || Util.hasClassName( _node, _className ) === false ){\r
-                                               _nodes.splice( j, 1 );\r
-                                       } else {\r
-                                               ++j;\r
-                                       };\r
-                               };\r
-                               return _nodes;\r
-                       },\r
-                       getChildIndex: function( _parent, _child ){\r
-                               var _children = _parent.getElementsByTagName( _child.tagName );\r
-                               for( var i = _children.length; i; ){\r
-                                       if( _children[ --i ] === _child ) return i;\r
-                               };\r
-                               return -1;\r
-                       },\r
-                       hasClassName: function( _elm, _className ){\r
-                               var cnames  = ( _elm.className || '' ).split( ' ' ),\r
-                                       _cnames = _className.split( ' ' ),\r
-                                       cname;\r
-                               for( var i = _cnames.length; i; ){\r
-                                       cname = _cnames[ --i ];\r
-                                       if( cname === '' ) continue;\r
-                                       if( Util.getIndex( cnames, cname ) === -1 ) return false;\r
-                               };\r
-                               return true;\r
-                       },\r
-                       addClass: function( _elm, _className ){\r
-                               if( Util.hasClassName( _elm, _className ) === false ){\r
-                                       var sp = ' ';\r
-                                       var _array = ( _elm.className || '' ).replace( /\s+/g, sp ).split( sp );\r
-                                       _array.push( _className );\r
-                                       _elm.className = _array.join( sp );\r
-                               };\r
-                       },\r
-                       removeClass: function( _elm, _className ){\r
-                               var sp     = ' ',\r
-                                       _array = _elm.className.replace( /\s+/g, sp ).split( sp ),\r
-                                       i      = Util.getIndex( _array, _className );\r
-                               if( i !== -1 ){\r
-                                       _array.splice( i, 1 );\r
-                                       _elm.className = _array.join( sp );\r
-                               };\r
-                       },\r
-                       toggleClass: function( _elm, _className ){\r
-                               Util.hasClassName( _elm, _className ) === false ? Util.addClass( _elm, _className ) : Util.removeClass( _elm, _className );\r
-                       },\r
-                       removeAllChildren: function ( _elm){\r
-                               while( _elm.firstChild){\r
-                                       remove( _elm.firstChild);\r
-                               }\r
-                               function remove( _node){\r
-                                       while( _node.firstChild){\r
-                                               remove( _node.firstChild);\r
-                                       }\r
-                                       _node.parentNode && _node.parentNode.removeChild( _node);\r
-                               }\r
-                       },\r
-                       getIndex: function( _array, _element ){\r
-                               if( Array.prototype.indexof ){\r
-                                       Util.getIndex = function( _array, _element ){\r
-                                               return _array.indexof( _element );\r
-                                       };\r
-                               } else {\r
-                                       Util.getIndex = function( _array, _element ){\r
-                                               for( var i = _array.length; i; ){\r
-                                                       if( _array[ --i ] === _element ) return i;\r
-                                               };\r
-                                               return -1;\r
-                                       };\r
-                               };\r
-                               return Util.getIndex( _array, _element );\r
-                       },\r
-                       copyArray: function( _array ){\r
-                               var l = _array.length,\r
-                                       ret = new Array( l );\r
-                               for( var i=0; i<l; ++i ){\r
-                                       ret[ i ] = _array[ i ];\r
-                               }\r
-                               return ret;\r
-                       },\r
-                       /*\r
-                        * \r
-                        */\r
-                       createGlobalUniqueName: function(){\r
-                               var randomKey = null;\r
-                               while( true ){\r
-                                       randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');\r
-                                       if( typeof window[randomKey] === 'undefined'){\r
-                                               break;\r
-                                       }\r
-                               }\r
-                               return randomKey;\r
-                       },\r
-                       createIframe: function( id, callback){\r
-                               var ua = UA;\r
-                   var el = document.createElement( ua.isIE ? '<iframe name="' + id + '" frameborder="0" scrolling="no">' : 'iframe');\r
-       \r
-                   if( ua.isIE){\r
-                                       el.onreadystatechange = detect;\r
-                   } else {\r
-                       // iron(chrome) の場合、append の前に onload を指定しないと onload が呼ばれない\r
-                       el.onload = onLoad;\r
-                       //setTimeout( asynkCallback, 0 );\r
-                               }\r
-       \r
-                               document.body.appendChild( el);\r
-                   el.id = el.name = id;\r
-                   el.setAttribute( 'name', id);\r
-                   el.style.cssText = 'width:1px;height:1px;visibility:hidden;position:absolute;top:1px;left:1px;';\r
-                               // http://d.hatena.ne.jp/onozaty/20070830/p1\r
-                               // [JavaScript]IE6ではJavaScriptで動的に作成したiframeに対してsubmitできない(IE7は未確認) ->解決\r
-                               el.contentWindow.name = id;                                     \r
-                   \r
-                   window[id] = el;\r
-       \r
-                   function detect(){\r
-                       if ( this.readyState === "complete" ){\r
-                           this.onreadystatechange = new Function();\r
-                           this.onreadystatechange = null;\r
-                           setTimeout( asynkCallback, 0 );\r
-                       };\r
-                   };\r
-                               function onLoad(){\r
-                                       el.onload = null;\r
-                                       setTimeout( asynkCallback, 0 );\r
-                               };\r
-                               function asynkCallback(){\r
-                                       callback( el );\r
-                               };\r
-                       }\r
-               };\r
-       })( window, document );\r
-\r
-\r
-var CSS = ( function( window, documwnt, undefined ){\r
-       var     CORON                  = ':',\r
-               EMPTY                  = '',\r
-               SEMICORON              = ';';\r
-               UNITS                  = 'px,cm,mm,in,pt,pc,em,%'.split( ',' ),\r
-               CLIP_SEPARATOR         = UA.isIE === true && UA.ieVersion < 8 ? ' ' : ',';\r
-\r
-       var SPECIAL = ( function(){\r
-               var _special = {};\r
-               if( UA.isIE === true && UA.ieVersion < 9 ){\r
-                       if( UA.ACTIVEX === true ){\r
-                               // _special.opacity    = 'ActiveXOpacity';\r
-                               _special.setFilters = function( style ){\r
-                                       var filters = ( style.filter || '' ).split( ') ' ),\r
-                                               data    = {},\r
-                                               i       = filters.length,\r
-                                               filter, names, props, prop, j, l, key, v;\r
-                                       for( ; i; ){\r
-                                               filter   = filters[ --i ].split( ' ' ).join( '' ).split( '(' );\r
-                                               if( filter.length !== 2 ) continue;\r
-                                               names    = filter[ 0 ].split( '.' ); // progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9)\r
-                                               props    = filter[ 1 ].split( ',' ); // \r
-                                               filter   = {};\r
-                                               for( j = 0, l = props.length; j < l; ++j ){\r
-                                                       prop = props[ j ].split( '=' );\r
-                                                       key  = prop[ 0 ].toLowerCase();\r
-                                                       v    = prop[ 1 ];\r
-                                                       filter[ key ] = v; //v.charAt( 0 ) === '#' ? v : parseInt( v );\r
-                                               };\r
-                                               data[ names[ names.length - 1 ] ] = filter;\r
-                                       };\r
-                                       \r
-                                       style.filter  = data;\r
-                                       style.opacity = data.alpha && data.alpha.opacity ? data.alpha.opacity / 100 : 1;\r
-                               };\r
-                               _special.hasLayout = function( elm ){\r
-                                       return elm.currentStyle.hasLayout;\r
-                               };\r
-                       } else {\r
-                               _special.opacity = null;\r
-                       };\r
-               } else {\r
-                       var style = document.documentElement.style;\r
-                       _special.opacity = style.opacity          !== undefined ? 'opacity' : \r
-                                                       style.MozOpacity          !== undefined ? 'MozOpacity' :\r
-                                                       style.KhtmlOpacity        !== undefined ? 'KhtmlOpacity' :\r
-                                                       style[ '-khtml-opacity' ] !== undefined ? 'KhtmlOpacity' : null;\r
-\r
-                       // if( style.backgroundPositionX === undefined ){\r
-                               _special.setBackgroundPositionXY = function( style ){\r
-                                       var bgp = ( style.backgroundPosition || '' ).split( ' ' );\r
-                                       style.backgroundPositionX = bgp[ 0 ] || 0;\r
-                                       style.backgroundPositionY = bgp[ 1 ] || 0;\r
-                               };\r
-                       // };\r
-                       if( style.clipTop === undefined && style[ 'clip-top' ] === undefined ){\r
-                               _special.setClipTopRightBottomLeft = function( style ){\r
-                                       var clip = style.clip || '';\r
-                                       if( clip.indexOf( 'rect(' ) === -1 ){\r
-                                               style.clipTop    = 0;\r
-                                               style.clipRight  = 0;\r
-                                               style.clipBottom = 0;\r
-                                               style.clipLeft   = 0;\r
-                                               return;\r
-                                       };\r
-                                       clip = clip.split( '(' )[ 1 ].split( ')' )[ 0 ].split( clip.indexOf( ',' ) !== -1 ? ',' : ' ' );\r
-                                       ret.clipTop    = clip[ 0 ];\r
-                                       ret.clipRight  = clip[ 1 ];\r
-                                       ret.clipBottom = clip[ 2 ];\r
-                                       ret.clipLeft   = clip[ 3 ];\r
-                               };\r
-                       };\r
-               };\r
-                               \r
-               return _special;\r
-       })();\r
-       \r
-       function cssToObject( css ){\r
-               var ret = {}, i, nv, n, v, parse = Util.parse, isNumber = Type.isNumber;\r
-               if( Type.isString( css ) === true ){\r
-                       css = css.split( ';' );\r
-                       for( i = css.length; i; ){\r
-                               nv    = css[ --i ].split( ':' ); // filter の場合, progid: がくる\r
-                               n     = nv.shift();\r
-                               if( isNumber( parse( n ) ) === true ) continue;\r
-                               v     = nv.join( '' );\r
-                               while( v.charAt( 0 ) === ' ' ) v = v.substr( 1 );\r
-                               ret[ Util.camelize( n ) ] = parse( v );\r
-                       };\r
-               } else {\r
-                       for( n in css ){\r
-                               if( Type.isNumber( parse( n ) ) === false ) ret[ n ] = parse( css[ n ] );\r
-                       };\r
-               };\r
-\r
-               if( SPECIAL.setFilters ){\r
-                       SPECIAL.setFilters( ret );\r
-               } else {\r
-                       ret.opacity = SPECIAL.opacity !== null ? ret[ SPECIAL.opacity ] : 1;\r
-               };\r
-               \r
-               SPECIAL.setBackgroundPositionXY && SPECIAL.setBackgroundPositionXY( ret );\r
-               SPECIAL.setClipTopRightBottomLeft && SPECIAL.setClipTopRightBottomLeft( ret );\r
-               \r
-               return ret;\r
-       };\r
-\r
-       var COLOR = ( function(){\r
-               var ret = {}, v, name,\r
-                       list = [\r
-                               0, 'BLACK',\r
-                               parseInt( 'FF0000', 16 ), 'RED',\r
-                               parseInt( '00FF00', 16 ), 'LIME',\r
-                               parseInt( '0000FF', 16 ), 'BLUE',\r
-                               parseInt( 'FFFF00', 16 ), 'YELLOW',\r
-                               parseInt( '00FFFF', 16 ), 'AQUA or CYAN',\r
-                               parseInt( 'FF00FF', 16 ), 'FUCHSIA or MAGENTA',\r
-                               parseInt( 'FFFFFF', 16 ), 'WHITE',\r
-                               parseInt( '008000', 16 ), 'GREEN',\r
-                               parseInt( '800080', 16 ), 'PURPLE',\r
-                               parseInt( '800000', 16 ), 'MAROON',\r
-                               parseInt( '000080', 16 ), 'NAVY',\r
-                               parseInt( '808000', 16 ), 'OLIVE',\r
-                               parseInt( '008080', 16 ), 'TEAL',\r
-                               parseInt( '808080', 16 ), 'GRAY',\r
-                               parseInt( 'C0C0C0', 16 ), 'SILVER',\r
-                               parseInt( '696969', 16 ), 'DIMGRAY',\r
-                               parseInt( '708090', 16 ), 'SLATEGRAY',\r
-                               parseInt( 'A9A9A9', 16 ), 'DARKGRAY',\r
-                               parseInt( 'DCDCDC', 16 ), 'GAINSBORO',\r
-                               parseInt( '191970', 16 ), 'MIDNIGHTBLUE',\r
-                               parseInt( '6A5ACD', 16 ), 'SLATEBLUE',\r
-                               parseInt( '0000CD', 16 ), 'MEDIUMBLUE',\r
-                               parseInt( '4169E1', 16 ), 'ROYALBLUE',\r
-                               parseInt( '1E90FF', 16 ), 'DODGERBLUE',\r
-                               parseInt( '87CEEB', 16 ), 'SKYBLUE',\r
-                               parseInt( '4682B4', 16 ), 'STEELBLUE',\r
-                               parseInt( 'ADD8E6', 16 ), 'LIGHTBLUE',\r
-                               parseInt( 'AFEEEE', 16 ), 'PALETURQUOISE',\r
-                               parseInt( '40E0D0', 16 ), 'TURQUOISE',\r
-                               parseInt( 'E0FFFF', 16 ), 'LIGHTCYAN',\r
-                               parseInt( '7FFFD4', 16 ), 'AQUAMARINE',\r
-                               parseInt( '006400', 16 ), 'DARKGREEN',\r
-                               parseInt( '2E8B57', 16 ), 'SEAGREEN',\r
-                               parseInt( '90EE90', 16 ), 'LIGHTGREEN',\r
-                               parseInt( '7FFF00', 16 ), 'CHARTREUSE',\r
-                               parseInt( 'ADFF2F', 16 ), 'GREENYELLOW',\r
-                               parseInt( '32CD32', 16 ), 'LIMEGREEN',\r
-                               parseInt( '9ACD32', 16 ), 'YELLOWGREEN',\r
-                               parseInt( '6B8E23', 16 ), 'OLIVEDRAB',\r
-                               parseInt( 'BCB76B', 16 ), 'DARKKHAKI',\r
-                               parseInt( 'EEE8AA', 16 ), 'PALEGOLDENROD',\r
-                               parseInt( 'FFFFE0', 16 ), 'LIGHTYELLOW',\r
-                               parseInt( 'FFD700', 16 ), 'GOLD',\r
-                               parseInt( 'DAA520', 16 ), 'GOLDENROD',\r
-                               parseInt( 'B8860B', 16 ), 'DARKGOLDENROD',\r
-                               parseInt( 'BC8F8F', 16 ), 'ROSYBROWN',\r
-                               parseInt( 'CD5C5C', 16 ), 'INDIANRED',\r
-                               parseInt( '8B4513', 16 ), 'SADDLEBROWN',\r
-                               parseInt( 'A0522D', 16 ), 'SIENNA',\r
-                               parseInt( 'CD853F', 16 ), 'PERU',\r
-                               parseInt( 'DEB887', 16 ), 'BURLYWOOD',\r
-                               parseInt( 'F5F5DC', 16 ), 'BEIGE',\r
-                               parseInt( 'F5DEB3', 16 ), 'WHEAT',\r
-                               parseInt( 'F4A460', 16 ), 'SANDYBROWN',\r
-                               parseInt( 'D2B48C', 16 ), 'TAN',\r
-                               parseInt( 'D2691E', 16 ), 'CHOCOLATE',\r
-                               parseInt( 'B22222', 16 ), 'FIREBRICK',\r
-                               parseInt( 'A52A2A', 16 ), 'BROWN',\r
-                               parseInt( 'FA8072', 16 ), 'SALMON',\r
-                               parseInt( 'FFA500', 16 ), 'ORANGE',\r
-                               parseInt( 'FF7F50', 16 ), 'CORAL',\r
-                               parseInt( 'FF6347', 16 ), 'TOMATO',\r
-                               parseInt( 'FF69B4', 16 ), 'HOTPINK',\r
-                               parseInt( 'FFC0CB', 16 ), 'PINK',\r
-                               parseInt( 'FF1493', 16 ), 'DEEPPINK',\r
-                               parseInt( 'DB7093', 16 ), 'PALEVIOLETRED',\r
-                               parseInt( 'EE82EE', 16 ), 'VIOLET',\r
-                               parseInt( 'DDA0DD', 16 ), 'PLUM',\r
-                               parseInt( 'DA70D6', 16 ), 'ORCHILD',\r
-                               parseInt( '9400D3', 16 ), 'DARKVIOLET',\r
-                               parseInt( '8A2BE2', 16 ), 'BLUEVIOLET',\r
-                               parseInt( '9370DB', 16 ), 'MEDIUMPURPLE',\r
-                               parseInt( 'D8BFD8', 16 ), 'THISTLE',\r
-                               parseInt( 'E6E6FA', 16 ), 'LAVENDER',\r
-                               parseInt( 'FFE4E1', 16 ), 'MISTYROSE',\r
-                               parseInt( 'FFFFF0', 16 ), 'IVORY',\r
-                               parseInt( 'FFFACD', 16 ), 'LEMONCHIFFON'\r
-                       ];\r
-               for( i=list.length; i; ){\r
-                       v    = list[ --i ];\r
-                       name = list[ --i ];\r
-                       ret[ name ] = v;\r
-               };\r
-               return ret;\r
-       })();\r
-       \r
-       var PARAMS = ( function(){\r
-               ret = {};\r
-               register( ret.percent = {},\r
-                       'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'\r
-               );\r
-               register( ret.offset = {},\r
-                       'height,width,bottom,left,right,top'\r
-               );              \r
-               register( ret.size = {},\r
-                       'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,letterSpacing'\r
-               );\r
-               register( ret.color = {},\r
-                       'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color'\r
-               );\r
-               register( ret.region = {},\r
-                       'margin,padding,borderWidth,borderColor'\r
-               );              \r
-               register( ret.special = {},\r
-                       'clip,backgroundPosition,opacity,lineHeight,zIndex'\r
-               );\r
-               register( ret.unit = {}, 'px,cm,mm,in,pt,pc,em,%' );\r
-               \r
-               register( ret.margin = {}, 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom' );\r
-               register( ret.padding = {}, 'paddingBottom,paddingLeft,paddingRight,paddingTop' );\r
-               register( ret.borderWidth = {}, 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth' );\r
-               register( ret.borderColor = {}, 'borderBottomColor,borderLeftColor,borderRightColor,borderTopColor' );\r
-               \r
-               function register( obj, params ){\r
-                       params = params.split( ',' );\r
-                       for( var i=params.length; i; ) obj[ params[ --i ] ] = true;\r
-               };\r
-               return ret;\r
-       })();\r
-       \r
-       /*\r
-        * \r
-        */\r
-       var PropertyClass = function( name, value, unit, pxPerEm ){\r
-               this.name    = name;\r
-               this.value   = value;\r
-               this.unit    = unit;\r
-               this.pxPerEm = pxPerEm; // XXpx = 1em;\r
-       };\r
-       PropertyClass.prototype = {\r
-               name:    '',\r
-               value:   0,\r
-               pxPerEm: 12, // 1em === ??px\r
-               unit:    '',\r
-               equal: function( prop ){\r
-                       if( this.unit === prop.unit ){\r
-                               return this.value === prop.value;\r
-                       };\r
-                       return Math.abs( this._toPx() - prop._toPx() ) < 1;\r
-               },\r
-               convert: function( prop ){\r
-                       var u = prop.unit, v;\r
-                       if( this.unit === u ) return;\r
-                       this.value = v = this._toPx();\r
-                       this.unit  = u;\r
-                       if( u !== px ){\r
-                               this.value = u === 'em' ? v / this.pxPerEm : Util.pxTo( v, u );\r
-                       };\r
-               },\r
-               setValue: function( v ){\r
-                       this.value = v;\r
-               },\r
-               getValue: function(){\r
-                       return this.value;\r
-               },\r
-               getOffset: function( prop ){\r
-                       return prop.value - this.value;\r
-               },\r
-               getUnit: function(){\r
-                       return this.unit;\r
-               },\r
-               getValueText: function(){\r
-                       return this.value === 0 ? '0' : this.value + this.unit;\r
-               },\r
-               clear: function(){\r
-                       var t = this, p;\r
-                       for( p in t ){\r
-                               if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;\r
-                               delete t[ p ];\r
-                       };\r
-               },\r
-               _toPx: function(){\r
-                       var v = this.value, u = this.unit;\r
-                       if( u === px )   return v;\r
-                       if( u === 'em' ) return v * this.pxPerEm;\r
-                       if( u === '' && this.name === 'lineHeight' ) return v * this.pxPerEm;\r
-                       return Util.toPx( v, u );\r
-               },\r
-               isValid: function( t ){\r
-                       t = t || this;\r
-                       var n = t.name,\r
-                               v = t.value,\r
-                               u = t.unit,\r
-                               z = u !== '' ? true : v === 0;\r
-                       if( PARAMS.percent[ n ] === true ) return z;\r
-                       if( PARAMS.offset[ n ] === true  ) return z;\r
-                       if( PARAMS.size[ n ] === true  )   return z && u !== '%';\r
-                       if( PARAMS.special[ n ] === true  ){\r
-                               if( n === 'lineHeight' ) return true;\r
-                               if( n === 'opacity' )    return 0 <= v && v <= 1 && u === '';\r
-                               if( n === 'zIndex'  )    return u === '';\r
-                       };\r
-                       return false;\r
-               }\r
-       };\r
-       \r
-       /**\r
-        * backgroundPosition, clip\r
-        */\r
-       var PropertyGroupClass = function( name ){\r
-               this.name  = name;\r
-               this.props = [];\r
-               for( var i = 1, l = arguments.length; i<l; ++i ){\r
-                       this.props.push( arguments[ i ] );\r
-               };\r
-       };\r
-       \r
-       /**\r
-        * margin, padding, borderWidth, borderColor\r
-        */\r
-       var FrexiblePropertyClass = function( name ){\r
-               this.name  = name;\r
-               this.props = [];\r
-               for( var i = 1, l = arguments.length; i<l; ++i ){\r
-                       this.props.push( arguments[ i ] );\r
-               };\r
-               // top, bottom, left, right, topbottom, leftright, all\r
-       };\r
-       FrexiblePropertyClass.prototype = PropertyGroupClass.prototype = {\r
-               name:    '',\r
-               equal: function( prop ){\r
-                       var ps = this.props, i = ps.length;\r
-                       for( ; i; ){\r
-                               --i;\r
-                               if( ps[ i ].equal( prop[ i ] ) === false ) return false;\r
-                       };\r
-                       return true;\r
-               },\r
-               convert: function( prop ){\r
-                       var ps = this.props, i = ps.length;\r
-                       for( ; i; ){\r
-                               --i;\r
-                               ps[ i ].convert( prop[ i ] );\r
-                       };\r
-               },\r
-               setValue: function( ary ){\r
-                       var ps = this.props, i = 0, l = ps.length;\r
-                       for( ; i<l; ++i ){\r
-                               ps[ i ].setValue( ary[ i ] );\r
-                       };\r
-               },\r
-               getValue: function(){\r
-                       var ret = [], ps = this.props, i = 0, l = ps.length;\r
-                       for( ; i<l; ++i ){\r
-                               ret.push( ps[ i ].getValue() );\r
-                       };\r
-                       return ret;\r
-               },\r
-               getOffset: function( prop ){\r
-                       var ret = [],\r
-                               ps  = this.props,\r
-                               _ps = prop.props,\r
-                               i   = 0,\r
-                               l = ps.length;\r
-                       for( ; i<l; ++i ){\r
-                               ret.push( ps[ i ].getOffset( _ps[ i ] ) );\r
-                       };\r
-                       return ret;\r
-               },\r
-               getUnit: function(){\r
-                       var ret = [], ps = this.props, i = 0, l = ps.length;\r
-                       for( ; i<l; ++i ){\r
-                               ret.push( ps[ i ].getUnit() );\r
-                       };\r
-                       return ret;\r
-               },\r
-               getValueText: function(){\r
-                       var ret = [], ps = this.props, i = 0, l = ps.length;\r
-                       for( ; i<l; ++i ){\r
-                               ret.push( ps[ i ].getValueText() );\r
-                       };                      \r
-                       if( this.name === 'clip' ){\r
-                               return 'rect(' + ret.join( CLIP_SEPARATOR ) + ')';\r
-                       };\r
-                       return ret.join( ' ' );\r
-               },\r
-               clear: function(){\r
-                       var ps = this.props, i = ps.length;\r
-                       for( ; i; ){\r
-                               ps[ --i ].clear();\r
-                       };\r
-                       delete this.name;\r
-                       delete this.props;\r
-               },\r
-               isValid: function( t ){\r
-                       t = t || this;\r
-                       var ps = t.props, i = ps.length;\r
-                       for( ; i; ){\r
-                               --i;\r
-                               if( ps[ i ].isValid() === false ) return false;\r
-                       };\r
-                       return true;\r
-               }\r
-       };\r
-\r
-       var ColorPropertyClass = function( name, r, g, b, pct ){\r
-               this.name = name;\r
-               this.r    = r;\r
-               this.g    = g;\r
-               this.b    = b;\r
-               this.pct  = pct;\r
-       };\r
-       ColorPropertyClass.prototype = {\r
-               name:    '',\r
-               equal: function( prop ){\r
-                       if( this.pct === prop.pct ){\r
-                               return this.r === prop.r && this.g === prop.g && this.b === prop.b;\r
-                       };\r
-                       var rgb  = this._toPct(),\r
-                               _rgb = prop._toPct();\r
-                       for( var i = rgb.length; i; ){\r
-                               --i;\r
-                               if( Math.abs( rgb[ i ] - _rgb[ i ] ) > 1 ) return false;\r
-                       };\r
-                       return true;\r
-               },\r
-               convert: function( prop ){\r
-                       var u = prop.pct;\r
-                       if( this.pct === u ) return;\r
-                       var x    = u === true ? 100 / 255 : 2.55;\r
-                       this.r  *= x;\r
-                       this.g  *= x;\r
-                       this.b  *= x;\r
-                       this.pct = u;\r
-               },\r
-               setValue: function( rgb ){\r
-                       this.r = rgb[ 0 ];\r
-                       this.g = rgb[ 1 ];\r
-                       this.b = rgb[ 2 ];\r
-               },\r
-               getValue: function(){\r
-                       return [ this.r, this.g, this.b ];\r
-               },\r
-               getOffset: function( prop ){\r
-                       return [ prop.r - this.r, prop.g - this.g, prop.b - this.b ];\r
-               },\r
-               getUnit: function(){\r
-                       return this.pct === true ? '%' : '';\r
-               },\r
-               getValueText: function(){\r
-                       if( this.pct === true ){\r
-                               return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );\r
-                       };\r
-                       var round = Math.round;\r
-                       //return [ 'rgb(', round( this.r ), ',', round( this.g ), ',', round( this.b ), ')' ].join( '' );\r
-                       \r
-                       var rgb   = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );\r
-                       return '#' + rgb.substr( rgb.length - 6 );\r
-               },\r
-               clear: function(){\r
-                       var t = this, p;\r
-                       for( p in t ){\r
-                               if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;\r
-                               delete t[ p ];\r
-                       };\r
-               },\r
-               _toPct: function(){\r
-                       if( this.pct === true ) return [ this.r, this.g, this.b ];\r
-                       return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];\r
-               },\r
-               isValid: function( t ){\r
-                       var isFinite = window.isFinite;\r
-                       if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;\r
-                       if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;\r
-                       if( this.pct === true ){\r
-                               return this.r <= 100 && this.g <= 100 && this.b <= 100;\r
-                       };\r
-                       return this.r <= 255 && this.g <= 255 && this.b <= 255;\r
-               }\r
-       };\r
-       \r
-       var isString       = Type.isString,\r
-               isNumber       = Type.isNumber;\r
-       var REG_UINIT      = /.*\d(\w{1,2})?/,\r
-               $1             = '$1',\r
-               px             = 'px',\r
-               REG_XXXXXX     = /^#[\da-fA-F]{6}?/,\r
-               REG_XXX        = /^#[\da-fA-F]{3}?/;\r
-       \r
-       var WrappedStyleClass = function( elm, style, pxPerEm ){\r
-               this.elm     = elm;\r
-               this.style   = style;\r
-               this.pxPerEm = this.get( 'fontSize' )._toPx();\r
-       };\r
-\r
-       WrappedStyleClass.prototype = {\r
-               get: function( p ){\r
-                       if( PARAMS.special[ p ] === true || PARAMS.region[ p ] === true ){\r
-                               if( p === 'clip' )        return this.getClip();\r
-                               if( p === 'margin' )      return this.getMarginPaddingBorder( p );\r
-                               if( p === 'padding' )     return this.getMarginPaddingBorder( p );\r
-                               if( p === 'borderWidth' ) return this.getMarginPaddingBorder( 'border', 'Width' );\r
-                               if( p === 'borderColor' ) return this.getBorderColor( 'borderColor' );\r
-                               if( p === 'backgroundPosition' ) return this.getBackgroundPosition( p );\r
-                               // opacity, zindex, lineHeight\r
-                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x ), this.pxPerEm );\r
-                       };\r
-                       var x = this.style[ p ], e, v, u;\r
-                       if( PARAMS.offset[ p ] === true ){\r
-                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );\r
-                               /*\r
-                               e = this.elm;\r
-                               if( p === 'width'  ) v = e.offsetWidth;\r
-                               if( p === 'height' ) v = e.offsetHeight;\r
-                               if( p === 'top'    ) v = e.offsetTop;\r
-                               if( p === 'bottom' ) v = e.offsetBottom;\r
-                               if( p === 'left'   ) v = e.offsetLeft;\r
-                               if( p === 'right'  ) v = e.offsetRight;\r
-                               u = this.getUnit( x, p );\r
-                               // alert( p + this.pxTo( v, u ) + u )\r
-                               return new PropertyClass( p, this.pxTo( v, u ), u, this.pxPerEm ); */\r
-                       };\r
-                       if( p === 'fontSize' ){ // xx-small 等\r
-                               v = Util.absoluteFontSizeToPx( x );\r
-                               if( v !== 0 ){\r
-                                       return new PropertyClass( p, v, px, this.pxPerEm );\r
-                               };\r
-                       };                      \r
-                       if( PARAMS.percent[ p ] === true ){\r
-                               // alert( p + ' , ' + x + ' , ' + this.getUnit( x, p ) )\r
-                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );\r
-                       };\r
-                       if( PARAMS.size[ p ] === true ){\r
-                               return new PropertyClass( p, this.getValue( x, p ), this.getUnit( x, p ), this.pxPerEm );\r
-                       };\r
-                       if( PARAMS.color[ p ] === true ){\r
-                               return this.getColor( x, p );\r
-                       };\r
-               },\r
-               pxTo: function( px, unit ){\r
-                       if( unit === 'em' ) return px / this.pxPerEm;\r
-                       return Util.pxTo( px, unit );\r
-               },\r
-               getValue: function( x, p ){\r
-                       if( isString( x ) === true ){\r
-                               return parseInt( x );\r
-                       } else\r
-                       if( isNumber( x ) === true ){\r
-                               return x;\r
-                       };\r
-                       return 0;\r
-               },\r
-               getUnit: function( x, p ){\r
-                       var u;\r
-                       if( isString( x ) === true ){\r
-                               u = x.replace( REG_UINIT, $1 );\r
-                               if( p === 'lineHeight' ) return u;\r
-                               if( PARAMS.unit[ u ] !== true ) return px;\r
-                               return u;\r
-                       };\r
-                       return px;\r
-               },\r
-               getColor: function( x, p ){\r
-                       var rgb = COLOR[ x.toUpperCase() ],\r
-                               pct = false,\r
-                               r   = 0,\r
-                               g   = 0,\r
-                               b   = 0;\r
-                       if( isNumber( rgb ) === true ){\r
-                               r = ( rgb & 0xff0000 ) >> 16;\r
-                               g = ( rgb & 0xff00 ) >> 8;\r
-                               b = ( rgb & 0xff );\r
-                       } else\r
-                       if( x.match( REG_XXXXXX ) ){\r
-                               r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );\r
-                               g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );\r
-                               b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );\r
-                               //alert( x + ' g: ' + g )\r
-                       } else                  \r
-                       if( x.match( REG_XXX ) ){\r
-                               r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );\r
-                               g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );\r
-                               b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );\r
-                       } else\r
-                       if( x.indexOf( 'rgb(' ) === 0 ){\r
-                               rgb = x.substr( 4 ).split( ',' );\r
-                               r = parseFloat( rgb[ 0 ] );\r
-                               g = parseFloat( rgb[ 1 ] );\r
-                               b = parseFloat( rgb[ 2 ] );\r
-                               if( x.indexOf( '%' ) !== -1 ){\r
-                                       pct = true;\r
-                               };\r
-                       } else {\r
-                               r = 255;\r
-                               g = 255;\r
-                               b = 255;\r
-                       };\r
-                       return new ColorPropertyClass( p, r, g, b, pct );\r
-               },\r
-               getClip: function( name ){\r
-                       // rect(...)    クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4~7 では、カンマの代わりにスペースで区切る必要があります。\r
-                       // position:absolute または position:fixed を適用した要素に対してのみ有効です。\r
-                       var top    = this.get( name + 'Top' ),\r
-                               right  = this.get( name + 'Right' ),\r
-                               bottom = this.get( name + 'Bottom' ),\r
-                               left   = this.get( name + 'Left' ),\r
-                               ret    = new PropertyGroupClass( name, top, right, bottom, left );\r
-                       if( ret.isValid() === true ) return ret;\r
-                       ret.clear();\r
-                       all    = this.style[ name ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( CLIP_SEPARATOR );\r
-                       return new PropertyGroupClass( name,\r
-                               new PropertyClass( name + 'Top',    all[ 0 ], px, this.pxPerEm ),\r
-                               new PropertyClass( name + 'Right',  all[ 1 ], px, this.pxPerEm ),\r
-                               new PropertyClass( name + 'Bottom', all[ 2 ], px, this.pxPerEm ),\r
-                               new PropertyClass( name + 'Left',   all[ 3 ], px, this.pxPerEm )\r
-                       );\r
-               },\r
-               getBackgroundPosition: function( name ){\r
-                       var x   = this.get( name + 'X' ),\r
-                               y   = this.get( name + 'Y' ),\r
-                               ret = new PropertyGroupClass( name, x, y ),\r
-                               xy;\r
-                       if( ret.isValid() === true ) return ret;\r
-                       ret.clear();\r
-                       xy  = this.style[ name ].split( ' ' );\r
-                       return new PropertyGroupClass( name,\r
-                               new PropertyClass( name + 'X', this.getValue( xy[ 0 ] ), this.getUnit( xy[ 0 ] ), this.pxPerEm ),\r
-                               new PropertyClass( name + 'Y', this.getValue( xy[ 1 ] ), this.getUnit( xy[ 1 ] ), this.pxPerEm )\r
-                       );\r
-               },\r
-               getMarginPaddingBorder: function( name, widthOrColor ){\r
-                       widthOrColor = widthOrColor || '';\r
-                       var _class = PropertyClass;\r
-                               top    = this.get( name + 'Top' + widthOrColor ),\r
-                               right  = this.get( name + 'Right' + widthOrColor ),\r
-                               bottom = this.get( name + 'Bottom' + widthOrColor ),\r
-                               left   = this.get( name + 'Left' + widthOrColor ),\r
-                               ret    = new FrexiblePropertyClass( name, top, right, bottom, left ),\r
-                               all, x, v, u;\r
-                       \r
-                       if( ret.isValid() === true ) return ret;\r
-                       ret.clear();\r
-                       all = this.style[ name + widthOrColor ].split( ' ' );\r
-                       \r
-                       for( var i=0, l=all.length; i<l; ++i ){\r
-                               x = all[ i ];\r
-                               v = this.getValue( x );\r
-                               u = this.getUnit( x );\r
-                               if( l === 4 ){\r
-                                       if( i === 0 ) top    = new _class( name + 'Top' +    widthOrColor, v, u, this.pxPerEm );\r
-                                       if( i === 1 ) right  = new _class( name + 'Right' +  widthOrColor, v, u, this.pxPerEm );\r
-                                       if( i === 2 ) bottom = new _class( name + 'Bottom' + widthOrColor, v, u, this.pxPerEm );\r
-                                       if( i === 3 ) left   = new _class( name + 'Left' +   widthOrColor, v, u, this.pxPerEm );\r
-                               } else\r
-                               if( l === 3 ){\r
-                                       if( i === 0 ) top    = new _class( name + 'Top' + widthOrColor, v, u, this.pxPerEm );\r
-                                       if( i === 1 ){\r
-                                               right  = new _class( name + 'Right' + widthOrColor, v, u, this.pxPerEm );\r
-                                               left   = new _class( name + 'Left'  + widthOrColor, v, u, this.pxPerEm );\r
-                                       } else\r
-                                       if( i === 2 ) bottom = new _class( name + 'Bottom' + widthOrColor , v, u, this.pxPerEm );\r
-                               } else\r
-                               if( l === 2 ){\r
-                                       if( i === 0 ){\r
-                                               top    = new _class( name + 'Top'    + widthOrColor, v, u, this.pxPerEm );\r
-                                               bottom = new _class( name + 'Bottom' + widthOrColor, v, u, this.pxPerEm );\r
-                                       } else\r
-                                       if( i === 1 ){\r
-                                               right  = new _class( name + 'Right' + widthOrColor, v, u, this.pxPerEm );\r
-                                               left   = new _class( name + 'Left'  + widthOrColor, v, u, this.pxPerEm );\r
-                                       };\r
-                               } else\r
-                               if( l === 1 ){\r
-                                       top    = new _class( name + 'Top'    + widthOrColor, v, u, this.pxPerEm );\r
-                                       bottom = new _class( name + 'Bottom' + widthOrColor, v, u, this.pxPerEm );\r
-                                       right  = new _class( name + 'Right'  + widthOrColor, v, u, this.pxPerEm );\r
-                                       left   = new _class( name + 'Left'   + widthOrColor, v, u, this.pxPerEm );\r
-                               };\r
-                       };\r
-                       return new FrexiblePropertyClass( name, top, right, bottom, left );\r
-               },\r
-               getBorderColor: function( name ){\r
-                       var getColor = this.getColor;\r
-                               top      = this.get( name + 'TopColor' ),\r
-                               right    = this.get( name + 'RightColor' ),\r
-                               bottom   = this.get( name + 'BottomColor' ),\r
-                               left     = this.get( name + 'LeftColor' ),\r
-                               ret      = new FrexiblePropertyClass( name, top, right, bottom, left ),\r
-                               all, x;\r
-                       \r
-                       if( ret.isValid() === true ) return ret;\r
-                       ret.clear();\r
-                       all = this.style[ name ].split( ' ' );\r
-                       \r
-                       for( var i=0, l=all.length; i<l; ++i ){\r
-                               x = all[ i ];\r
-                               if( l === 4 ){\r
-                                       if( i === 0 ) top    = getColor( x, name + 'Top' );\r
-                                       if( i === 1 ) right  = getColor( x, name + 'Right' );\r
-                                       if( i === 2 ) bottom = getColor( x, name + 'Bottom' );\r
-                                       if( i === 3 ) left   = getColor( x, name + 'Left' );\r
-                               } else\r
-                               if( l === 3 ){\r
-                                       if( i === 0 ) top    = getColor( x, name + 'Top' );\r
-                                       if( i === 1 ){\r
-                                               right  = getColor( x, name + 'Right' );\r
-                                               left   = getColor( x, name + 'Left' );\r
-                                       } else\r
-                                       if( i === 2 ) bottom = getColor( x, name + 'Bottom' );\r
-                               } else\r
-                               if( l === 2 ){\r
-                                       if( i === 0 ){\r
-                                               top    = getColor( x, name + 'Top' );\r
-                                               bottom = getColor( x, name + 'Bottom' );\r
-                                       } else\r
-                                       if( i === 1 ){\r
-                                               right  = getColor( x, name + 'Right' );\r
-                                               left   = getColor( x, name + 'Left' );\r
-                                       };\r
-                               } else\r
-                               if( l === 1 ){\r
-                                       top    = getColor( x, name + 'Top' );\r
-                                       bottom = getColor( x, name + 'Bottom' );\r
-                                       right  = getColor( x, name + 'Right' );\r
-                                       left   = getColor( x, name + 'Left' );\r
-                               };\r
-                       };\r
-                       return new FrexiblePropertyClass( name, top, right, bottom, left );\r
-               },\r
-               clear: function(){\r
-                       var t = this, p;\r
-                       for( p in t ){\r
-                               if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;\r
-                               delete t[ p ];\r
-                       };\r
-               }\r
-       };\r
-       function camelizeHash( obj ){\r
-               var p, _p;\r
-               for( p in obj ){\r
-                       _p = Util.camelize( p );\r
-                       if( _p === p ) continue;\r
-                       obj[ _p ] = obj[ _p ] || obj[ p ];\r
-                       delete obj[ p ];\r
-               };\r
-       };\r
-       \r
-       return {\r
-               getWrappedStyle: function( elm, opt_css ){\r
-                       opt_css && camelizeHash( opt_css );\r
-                       return new WrappedStyleClass( elm, opt_css || CSS.getComputedStyle( elm ) );\r
-               },\r
-               getInlineStyle: function( _elm ){\r
-                       return cssToObject( _elm.style.cssText );\r
-               },\r
-               getComputedStyle: function( elm ){\r
-                       /* if( window.getComputedStyle ){\r
-                       CSS.getComputedStyle = function( elm ){\r
-                               return cssToObject( window.getComputedStyle( elm, '' ) );\r
-                       };\r
-                       } else */\r
-                   if( document.defaultView && document.defaultView.getComputedStyle ){\r
-                       CSS.getComputedStyle = function( elm ){\r
-                               var obj = document.defaultView.getComputedStyle( elm, '' );\r
-                               return cssToObject( obj.cssText || obj );\r
-                       };\r
-                   } else {\r
-                       CSS.getComputedStyle = function( elm ){\r
-                               return cssToObject( elm.currentStyle );\r
-                       };\r
-                   };\r
-                   return CSS.getComputedStyle( elm );\r
-               },\r
-               toCssText: function( _css ){\r
-                       var ret = [], v;\r
-                       for( var p in _css ){\r
-                               if( PARAMS.margin[ p ] === true && _css.margin ) continue;\r
-                               if( PARAMS.padding[ p ] === true && _css.padding ) continue;\r
-                               if( PARAMS.borderWidth[ p ] === true && _css.borderWidth ) continue;\r
-                               if( PARAMS.borderColor[ p ] === true && _css.borderColor ) continue;\r
-                               v = _css[ p ];\r
-                               v && ret.push( [ Util.uncamelize( p ), v ].join( ':' ) );\r
-                       };\r
-                       return ret.join( ';' );\r
-               }\r
-       };\r
-       \r
-})( window, document );\r
-\r
-\r
-/* ----------------------------------------------------\r
- * gadgetOS\r
- * \r
- */    \r
-\r
 ( function( window, document, undefined ){\r
        \r
-       var doc            = window.document;\r
-       var body           = doc.getElementsByTagName( 'body' )[ 0 ]; //( doc.compatMode || '' ) !== 'CSS1Compat' ? doc.body : doc.documentElement;// \r
-       \r
+       var body           = document.getElementsByTagName( 'body' )[ 0 ]; //( document.compatMode || '' ) !== 'CSS1Compat' ? document.body : document.documentElement;// \r
        var SERVICE_LIST   = [];\r
        var SUPER_USER_KEY = { getUID: function(){ return 0; }};\r
        var API_USER_LIST  = [ SUPER_USER_KEY ];\r
        var numApiUser     = 1;\r
        \r
+       function EMPTY_FUNCTION(){};\r
+       \r
        function isApiUser( _user ){\r
-               if( _user === SUPER_USER_KEY ) return true;\r
-               if( File.isDriver( _user ) === true ) return true;\r
-               if( Application.isApplicationInstance( _user ) === true ) return true;\r
-               return false;\r
-       }\r
+               return _user === SUPER_USER_KEY ||\r
+                       File.isDriver( _user ) === true ||\r
+                       Application.isApplicationInstance( _user ) === true;\r
+       };\r
        \r
        var Const = {\r
                FILE: {\r
@@ -1550,71 +106,420 @@ var CSS = ( function( window, documwnt, undefined ){
                },\r
                APP: {\r
                        TYPE: {\r
-                               GENERAL: 0,\r
-                               OVERLAY: 1,\r
-                               PAGE:    2\r
+                               GENERAL : 0,\r
+                               OVERLAY : 1,\r
+                               PAGE    : 2\r
                        }\r
                }\r
        };\r
 \r
-var EX = ( function(){\r
-       var F = new Function();\r
+/**\r
+ * Class を定義し システムの管理下に置く.\r
+ * 全てのクラスと pool が有効の場合インスタンスへの参照が保持される.\r
+ *  1. Class.create( def, opt_final, opt_pool, opt_abstract ) でクラスを登録.\r
+ *  2. コンストラクタ となるメソッドは、Constructor : function( arg ){ ... }, に書く.\r
+ *  3. 通常通り new で インスタンス生成\r
+ *  4. kill() でオブジェクトをクリーンして削除、pool が有効の場合は pool される.\r
+ *  5. pool が有効の場合、new で pool されたインスタンスが返される.\r
+ *  6. \r
+ * \r
+ */\r
+var Class = ( function(){\r
+       var CLASS_LIST         = [],\r
+               DEF_LIST           = [],\r
+               PRIVATE_CLASS_LIST = [],\r
+               PRIVATE_DEF_LIST   = [],\r
+               CONSTRUCTOR        = 'Constructor',\r
+               GET_INDEX          = Util.getIndex,\r
+               killPrivateFlag    = false,\r
+               dataUser           = null,\r
+               traits             = null,\r
+               f                  = true,\r
+               copyArray          = Util.copyArray;\r
        \r
-       function clone( src ) {\r
-               var ret;\r
-               if( Type.isArray(src) === true ){\r
-                       ret = [];\r
-               } else\r
-               if( Type.isObject(src) === true ){\r
-                       ret = {};\r
-               } else\r
-               if( Type.isNumber(src) === true || Type.isString(src) === true || Type.isBoolean( src ) === true ){\r
-                       return src;\r
+       function getClass( instance ){\r
+               var cList    = CLASS_LIST,\r
+                       i        = cList.length,\r
+                       klass;\r
+               for( ; i; ){\r
+                       klass = cList[ --i ];\r
+                       if( instance instanceof klass ) return klass;\r
+               };\r
+               cList = PRIVATE_CLASS_LIST;\r
+               i     = cList.length;\r
+               for( ; i; ){\r
+                       klass = cList[ --i ];\r
+                       if( instance instanceof klass ) return klass;\r
+               };\r
+               \r
+               if( GET_INDEX( cList, instance ) !== -1 ) return instance;\r
+               if( GET_INDEX( CLASS_LIST, instance ) !== -1 ) return instance;\r
+       };\r
+       \r
+       function getClassDef( KlassOrInstance ){\r
+               var getIndex = GET_INDEX,\r
+                       i        = getIndex( CLASS_LIST, KlassOrInstance );\r
+               if( i === -1 ) i = getIndex( CLASS_LIST, getClass( KlassOrInstance ) );\r
+               if( i !== -1 ) return DEF_LIST[ i ];\r
+               \r
+               i = getIndex( PRIVATE_CLASS_LIST, KlassOrInstance );\r
+               if( i === -1 ) i = getIndex( PRIVATE_CLASS_LIST, getClass( KlassOrInstance ) );\r
+               if( i !== -1 ) return PRIVATE_DEF_LIST[ i ];\r
+               \r
+               if( GET_INDEX( DEF_LIST, KlassOrInstance ) !== -1 ) return KlassOrInstance;\r
+               if( GET_INDEX( PRIVATE_DEF_LIST, KlassOrInstance ) !== -1 ) return KlassOrInstance;\r
+       };\r
+       \r
+       /* over のプロパティを target にコピーする.ただし target の プロパティが優先, force で解除 */\r
+       function override( target, over, force ){\r
+               for( var p in over ){\r
+                       if( force === true || typeof target[ p ] === 'undefined' ){\r
+                               target[ p ] = over[ p ];\r
+                       };\r
+               };\r
+               return target;\r
+       };\r
+       \r
+       /* サブクラスを作るメソッド  \r
+        * var subClass = superClass.inherits( ... ) \r
+        * http://d.hatena.ne.jp/m-hiyama/20051018/1129605002\r
+        */\r
+       function inherits( /* displayName, classSetting, opt_PrivateClass, props */ ){\r
+               var args        = copyArray( arguments ),\r
+                       params      = [],\r
+                       Super       = this,\r
+                       superDef    = getClassDef( Super ),\r
+                       displayName = args[ 0 ],\r
+                       classSetting,\r
+                       opt_super,\r
+                       klass;\r
+               if( superDef.Final === true ) throw new Error( 'Class is final!' );\r
+               \r
+               if( Type.isString( displayName ) === true ){\r
+                       args.shift();\r
                } else {\r
-                       return null;\r
-               }\r
-               for( var key in src ){\r
-                       ret[ key ] = clone( src[ key ]);\r
+                       displayName = 'SubClass of ' + superDef.displayName;\r
+               };\r
+               params.push( displayName );\r
+               \r
+               classSetting = args[ 0 ];\r
+               if( Type.isNumber( classSetting ) === true ){\r
+                       if( superDef.isPrivate === true ) classSetting = classSetting | Class.PRIVATE_DATA;\r
+                       opt_super = !!( classSetting & Class.SUPER_ACCESS );\r
+                       params.push( classSetting );\r
+                       args.shift();\r
+               };\r
+               if( getClass( args[ 0 ] ) ){\r
+                       params.push( args.shift() );\r
+               } else\r
+               if( superDef.privateClass ){\r
+                       params.push( superDef.privateClass );\r
+               };\r
+               params.push( args[ 0 ] ); /* props */\r
+               f      = false;\r
+               traits = new Super();\r
+               f      = true;\r
+               klass  = Class.create.apply( Class, params );\r
+               traits = null;\r
+               if( opt_super === true ) getClassDef( klass ).Super = Super.prototype;\r
+               return klass;\r
+       };\r
+       \r
+       /* Class.create で作られたクラスのインスタンスが共通で備えるメソッド */\r
+       var CommonProps = {\r
+               kill : function(){\r
+                       var instance = this,\r
+                               klass    = getClass( instance ),\r
+                               def      = getClassDef( klass ),\r
+                               data, p, i;\r
+                       if( def.isPrivate === true && killPrivateFlag === false ){\r
+                               throw new Error( 'PrivateInstance.kill() work in PrivateUser.kill().' );\r
+                       };\r
+                       Type.isFunction( instance.onKill ) === true && instance.onKill();\r
+                       for( p in instance ){\r
+                               if( instance.hasOwnProperty && !instance.hasOwnProperty( p ) ) continue;\r
+                               delete instance[ p ];\r
+                       };\r
+                       if( def.pool ){\r
+                               def.live && def.live.splice( GET_INDEX( def.live, instance ), 1 );\r
+                               def.pool.push( instance );\r
+                       };\r
+                       if( def.privateClass ){\r
+                               i = GET_INDEX( def.userList, instance );\r
+                               if( i !== -1 ){\r
+                                       data            = klass.getPrivateData( instance );\r
+                                       killPrivateFlag = true;\r
+                                       data.kill();\r
+                                       killPrivateFlag = false;\r
+                                       def.dataList.splice( i, 1 );\r
+                                       def.userList.splice( i, 1 );\r
+                               };\r
+                       };\r
+                       // myCallback の削除\r
+                       // myCallback を受け取った API への通知\r
+               },\r
+               getMyCallback : function( callback ){\r
+                       var def       = getClassDef( this ),\r
+                               iList     = def.callbackInstanceList,\r
+                               rList     = def.callbackRegisterList,\r
+                               i, cList, myCallback;\r
+                       if( !iList ){\r
+                               iList = def.callbackInstanceList = [];\r
+                               rList = def.callbackRegisterList = [];\r
+                       };\r
+                       i = GET_INDEX( iList, this );\r
+                       if( i === -1 ){\r
+                               cList = [];\r
+                               iList.push( this );\r
+                               rList.push( cList );\r
+                       } else {\r
+                               cList = rList[ i ];\r
+                               for( i = cList.length; i; ){\r
+                                       if( cList[ --i ].callback === callback ) return cList[ i ];\r
+                               };\r
+                       };\r
+                       myCallback = new Callback( this, callback );\r
+                       cList.push( myCallback );\r
+                       return myCallback;\r
+               },\r
+               releaseMyCallback : function( callback ){\r
+                       var def   = getClassDef( this ),\r
+                               iList = def.callbackInstanceList,\r
+                               rList = def.callbackRegisterList,\r
+                               i, _i, cList;\r
+                       if( !iList ) return;\r
+                       i = GET_INDEX( iList, this );\r
+                       if( i === -1 ) return;\r
+                       cList = rList[ i ];\r
+                       _i    = GET_INDEX( cList, callback );\r
+                       if( _i === -1 ) return;\r
+                       cList.splice( _i, 1 );\r
+                       callback.kill();\r
+                       if( cList.length !== 0 ) return;\r
+                       iList.splice( i, 1 );\r
+                       rList.splice( i, 1 );\r
+                       if( iList.length !== 0 ) return;\r
+                       delete def.callbackInstanceList;\r
+                       delete def.callbackRegisterList;\r
+               },\r
+               listenTo : function( eventDispatcher, eventType, callback ){\r
+                       //if( eventDispatcher instanceof EventDsipatcher ){\r
+                               eventDispatcher.addEventListener( eventType, callback, this );\r
+                       //}\r
+               },\r
+               unlistenTo : function( eventDispatcher, eventType, callback ){\r
+                       \r
                }\r
-               return ret;\r
+       };\r
+\r
+       /* privateDataclass をもつクラスに追加されるメソッド */\r
+       function newPrivateData( /* instance, args */ ){\r
+               var args         = copyArray( arguments ),\r
+                       user         = args.shift(),\r
+                       def          = getClassDef( user ),\r
+                       privateClass = def.privateClass,\r
+                       privateDef   = getClassDef( privateClass ),\r
+                       i            = -1,\r
+                       data;\r
+               if( def.userList ){\r
+                       i = GET_INDEX( def.userList, user );\r
+               } else {\r
+                       def.userList = [];\r
+                       def.dataList = [];\r
+               };\r
+               if( i !== -1 ){\r
+                       throw new Error( 'PrivateData already exist!' );\r
+               };\r
+               dataUser  = user;\r
+               data      = new privateClass( args );\r
+               data.User = user;\r
+               dataUser  = null;       \r
+               return data;\r
+       };\r
+       function getPrivateData( instance ){\r
+               var def = getClassDef( instance ),\r
+                       i   = GET_INDEX( def.userList, instance );\r
+               if( i !== -1 ) return def.dataList[ i ];\r
+       };\r
+       \r
+       /*\r
+        * new の実体.コンストラクタの機能は instance.Constructor に書く.\r
+        * これにより pool された オブジェクト(破棄されたインスタンス) を再利用できる\r
+        */\r
+       /* Constructor Real for GeneralClass */\r
+       function C( args ){\r
+               var klass = this,\r
+                       def   = getClassDef( klass ),   \r
+                       instance,\r
+                       userDef;\r
+               if( def.Abstract === true ){\r
+                       throw new Error( 'AbstractClass!' );\r
+               };\r
+               if( def.isPrivate === true && dataUser === null ){\r
+                       throw new Error( 'use myClass.newPrivateData( instance, ...args )!' );\r
+               };\r
+               f = false;\r
+               instance = def.pool && def.pool.length > 0 ? def.pool.shift() : instance = new klass();\r
+               f = true;\r
+               if( def.Super && !instance.Super ) instance.Super = def.Super;\r
+               if( def.isPrivate === true ){\r
+                       userDef = getClassDef( dataUser );\r
+                       userDef.dataList.push( instance );\r
+                       userDef.userList.push( dataUser );\r
+               } else {\r
+                       def.live && def.live.push( instance );\r
+                       args = copyArray( arguments );\r
+               };\r
+               def[ CONSTRUCTOR ] && def[ CONSTRUCTOR ].apply( instance, args );\r
+               return instance;\r
        };\r
        \r
        return {\r
-               extend: function( base, extend ){\r
-                       F.prototype = base;\r
-                       var ret = new F;\r
-                       for( var p in extend ){\r
-                               ret[ p ] = extend[ p ];\r
+               POOL_OBJECT  : 1,\r
+               ABSTRACT     : 2,\r
+               FINAL        : 4,\r
+               SUPER_ACCESS : 8,\r
+               PRIVATE_DATA : 16,\r
+               create : function( /* displayName, classSetting, opt_PrivateClass, props */ ){\r
+                       var args        = copyArray( arguments ),\r
+                               displayName = args[ 0 ],\r
+                               classSetting,\r
+                               opt_pool, opt_abstract, opt_final, opt_private,\r
+                               privateDef,\r
+                               props,\r
+                               klass,\r
+                               classDef = {};\r
+                       if( Type.isString( displayName ) === true ){\r
+                               classDef.displayName = displayName;\r
+                               args.shift();\r
                        };\r
-                       return ret;\r
+                       classSetting = args[ 0 ];\r
+                       if( Type.isNumber( classSetting ) === true ){\r
+                               opt_pool     = !!( classSetting & Class.POOL_OBJECT  );\r
+                               opt_abstract = !!( classSetting & Class.ABSTRACT     );\r
+                               opt_final    = !!( classSetting & Class.FINAL        );\r
+                               opt_private  = !!( classSetting & Class.PRIVATE_DATA );\r
+                               if( opt_final === true && opt_abstract === true ){\r
+                                       throw new Error( 'final & Abstract!' );\r
+                               };                              \r
+                               args.shift();\r
+                       };\r
+                       \r
+                       if( GET_INDEX( PRIVATE_CLASS_LIST, args[ 0 ] ) !== -1 ){\r
+                               privateDef = getClassDef( args[ 0 ] );\r
+                               if( privateDef.isPrivate !== true ){\r
+                                       throw new Error( 'PrivateClass not found! please, Class.create( Class.PRIVATE, {...} ).' );\r
+                               } else\r
+                               if( privateDef.Abstract === true ){\r
+                                       throw new Error( 'PrivateClass is Abstract!' );\r
+                               };\r
+                               classDef.privateClass = args.shift();\r
+                       };\r
+                       props = args[ 0 ];\r
+                       if( props === null || Type.isObject( props ) === false ){\r
+                               throw new Error( 'No Class Def!' );\r
+                       };\r
+                       \r
+                       if( Type.isFunction( props[ CONSTRUCTOR ] ) === true ){\r
+                               classDef[ CONSTRUCTOR ] = props[ CONSTRUCTOR ];\r
+                       };\r
+                       \r
+                       klass = function(){ var a = arguments; if( f ) return C.apply( a.callee, a )};\r
+                       klass.prototype = override( override( traits || {}, props, true ), CommonProps, false );\r
+                       \r
+                       if( opt_abstract === true ){\r
+                               classDef.Abstract = true;\r
+                       } else\r
+                       if( opt_pool === true ){\r
+                               classDef.pool = [];\r
+                               if( opt_private === false )classDef.live = [];\r
+                       };                      \r
+                       if( opt_final === true ){\r
+                               classDef.Final = true;\r
+                       } else {\r
+                               klass.inherits = inherits;\r
+                       };                      \r
+                       if( opt_private === true ){\r
+                               if( classDef.privateClass ){\r
+                                       throw new Error( 'Private Data Class has no PrivateClass!' );\r
+                               };\r
+                               classDef.isPrivate = true;\r
+                               PRIVATE_CLASS_LIST.push( klass );\r
+                               PRIVATE_DEF_LIST.push( classDef );\r
+                       } else {\r
+                               if( classDef.privateClass ){\r
+                                       klass.newPrivateData = newPrivateData;\r
+                                       klass.getPrivateData = getPrivateData;  \r
+                               };\r
+                               CLASS_LIST.push( klass );\r
+                               DEF_LIST.push( classDef );                              \r
+                       };\r
+                       return klass;\r
                },\r
-               clone: function( obj ){\r
-                       return clone( obj );\r
+               onShutdown : function(){\r
+                       \r
                },\r
-               kill: function(){\r
-                       var self = this, v;\r
-                       for( var p in s ){\r
-                               if( self.hasOwnProperty && !self.hasOwnProperty( p ) ) continue;\r
-                               v = self[ p ];\r
-                               v && v instanceof TicketBase && self.kill();\r
-                               delete self[ p ];\r
-                       }\r
-               }\r
-       }\r
-})();\r
-\r
-var TicketBase = function(){\r
-       this.kill = function(){\r
-               var t = this, v;\r
-               for( var p in t ){\r
-                       if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;\r
-                       v = t[ p ];\r
-                       v && v instanceof TicketBase && v.kill();\r
-                       delete t[ p ];\r
+               getClass : function( instance ){\r
+                       return getClass( instance );\r
+               },\r
+               getClassDef : function(){\r
+                       \r
                }\r
        };\r
-};\r
+})();\r
 \r
+/**\r
+ * Callback 時に thisObject や args を指定したい場合に使用. \r
+ */\r
+var Callback = Class.create(\r
+       Class.POOL_OBJECT | Class.FINAL, {\r
+       Constructor : function( thisObject, callback, opt_args ){\r
+               if( Type.isFunction( callback ) === false ){\r
+                       throw new Error( 'Not function!' );\r
+               };\r
+               this.callback = callback;\r
+               if( thisObject ) this.thisObject = thisObject;\r
+               if( Type.isArray( opt_args ) === true ){\r
+                       this.args = opt_args;\r
+               } else\r
+               if( opt_args !== undefined ){\r
+                       this.arg = opt_args;\r
+               };\r
+       },\r
+       fire : function( /* args */ ){\r
+               var thisObject = this.thisObject || window,\r
+                       args       = Util.copyArray( arguments );\r
+               if( 0 < args.length ){\r
+                       if( this.args !== undefined ){\r
+                               args.push.apply( args, this.args );\r
+                       } else\r
+                       if( this.arg !== undefined ){\r
+                               args.push( this.arg );\r
+                       };\r
+                       this.callback.apply( thisObject, args );\r
+               } else {\r
+                       if( this.args !== undefined ){\r
+                               this.callback.apply( thisObject, this.args );\r
+                       } else\r
+                       if( this.arg !== undefined ){\r
+                               this.callback.call( thisObject, this.arg );\r
+                       } else {\r
+                               this.callback.call( thisObject );\r
+                       };\r
+               };\r
+       },\r
+       registerUser : function( user ){\r
+               if( !this.userList ){\r
+                       this.userList = [ user ];\r
+               } else {\r
+                       Util.getIndex( this.userList, user ) === -1 && this.userList.push( user );\r
+               };\r
+       },\r
+       onKill : function(){\r
+               var instance = this.thisObject;\r
+               this.userList && Class.getClass( instance ) && instance.releaseMyCalllback( this );\r
+       }\r
+});\r
 \r
 \r
 /* --------------------------------------------------------------\r
@@ -1631,23 +536,26 @@ var SystemTimer = ( function(){
        var next          = 0;\r
        \r
        function loop(){\r
-           for( var i = 0; i < TICKET_LIST.length; ) {\r
-               if( TICKET_LIST[ i ].call( next ) !== false ) ++i;\r
+               var i    = 0,\r
+                       list = TICKET_LIST;\r
+           for( i = 0; i < list.length; ){\r
+               if( list[ i ].fire( next ) !== false ) ++i;\r
            };\r
            timerId = undefined;\r
            update();\r
        };\r
        function update(){\r
-               var l = TICKET_LIST.length,\r
-                       n = 99999999,\r
+               var list = TICKET_LIST,\r
+                       l    = list.length,\r
+                       n    = 99999999,\r
                        c;\r
                if( l === 0 ){\r
                        timerId !== undefined && clearTimeout( timerId );\r
                        timerId = undefined;\r
                        return;\r
                };\r
-           for( var i = 0; i<l; i++ ){\r
-               c = TICKET_LIST[ i ].count;\r
+           for( ; l; ){\r
+               c = list[ --l ].count;\r
                if( n > c ) n = c;\r
            };\r
            if( next > n || timerId === undefined ){\r
@@ -1657,46 +565,48 @@ var SystemTimer = ( function(){
            };\r
        };\r
        \r
-       var TimerTicketClass = function( _apiuser, _callback, _time, _once ){\r
-               this.apiuser  = _apiuser;\r
-               this.callback = _callback;\r
-               this.time     = _time;\r
-               this.count    = _time;\r
-               this.once     = _once;\r
-               _apiuser = _callback = null;\r
-       };\r
-       TimerTicketClass.prototype = new TicketBase();\r
-       TimerTicketClass.prototype.call = function( c ){\r
-               this.count -= c;\r
-               if( this.count <= 0 ){\r
-                       this.callback();\r
-                       if( this.once === true ){\r
-                               this.destroy();\r
-                               TICKET_LIST.splice( Util.getIndex( TICKET_LIST, this ), 1 );\r
-                               return false;\r
-                       } else {\r
-                               this.count = this.time;\r
-                       };\r
-               };\r
-       };\r
-       TimerTicketClass.prototype.destroy = function( _apiuser, _callback ){\r
-               if( _apiuser  && _apiuser  !== this.apiuser )  return false;\r
-               if( _callback && _callback !== this.callback ) return false;\r
-               \r
-               this.kill();\r
-               return true;\r
-       };\r
+       var TimerTicket = Class.create(\r
+               Class.POOL_OBJECT, {\r
+                       Constructor : function( apiuser, callback, time, once, opt_thisObject ){\r
+                               this.apiuser  = apiuser;\r
+                               this.callback = callback;\r
+                               this.time     = time;\r
+                               this.count    = time;\r
+                               if( once ) this.once = once;\r
+                               this.thisObj  = opt_thisObject || apiuser;\r
+                       },\r
+                       fire : function( c ){\r
+                               this.count -= c;\r
+                               if( 0 < this.count ) return;\r
+                               this.callback.call( this.thisObj );\r
+                               if( this.once === true ){\r
+                                       this.destroy();\r
+                                       TICKET_LIST.splice( Util.getIndex( TICKET_LIST, this ), 1 );\r
+                                       return false;\r
+                               } else {\r
+                                       this.count = this.time;\r
+                               };\r
+                       },\r
+                       destroy : function( apiuser, callback ){\r
+                               if( apiuser  && apiuser  !== this.apiuser )  return false;\r
+                               if( callback && callback !== this.callback ) return false;\r
+                               \r
+                               this.kill();\r
+                               return true;\r
+                       }\r
+               }\r
+       );\r
        \r
        return {\r
-               add: function( _apiuser, _handler, _time, _once ){\r
+               add: function( _apiuser, _handler, _time, _once, opt_thisObject ){\r
                        if( Type.isNumber( _time ) === false || _time < INTERVAL_TIME ) _time = INTERVAL_TIME;\r
                        \r
-                   var _ticket = new TimerTicketClass( _apiuser, _handler, Math.ceil( _time / INTERVAL_TIME ), _once );\r
+                   var _ticket = new TimerTicket( _apiuser, _handler, Math.ceil( _time / INTERVAL_TIME ), _once, opt_thisObject );\r
                    TICKET_LIST.push( _ticket );\r
                    \r
                    update();\r
                },\r
-               remove: function( _apiuser, _handler ) {\r
+               remove: function( _apiuser, _handler ){\r
                        var _ticket,\r
                                i = 0;\r
                        while( _ticket = TICKET_LIST[ i ] ){\r
@@ -1708,7 +618,7 @@ var SystemTimer = ( function(){
                        };\r
                    update();\r
                }\r
-       }\r
+       };\r
 })();\r
 \r
 /* --------------------------------------------------------------\r
@@ -1717,44 +627,47 @@ var SystemTimer = ( function(){
  */\r
 var AsyncCall = ( function(){\r
        var CALLBACK_LIST = [];\r
-\r
-       var CallbackTicketClass = function( _apiuser, _callback, _argments ){\r
-               this.apiuser  = _apiuser;\r
-               this.callback = _callback;\r
-               this.argments = _argments;\r
-               _apiuser = _callback = _argments = null;\r
-       }\r
-       CallbackTicketClass.prototype = new TicketBase();\r
-       CallbackTicketClass.prototype.call = function(){\r
-               var f = this.callback,\r
-                       a = this.argments;\r
-               if( Type.isArray( a ) === true ){\r
-                       f.apply( this.apiuser, a );\r
-               } else {\r
-                       f( a );\r
+       \r
+       var CallbackTicket = Class.create(\r
+               Class.POOL_OBJECT, {\r
+               Constructor : function( apiuser, callback, args, thisObject ){\r
+                       this.apiuser  = apiuser;\r
+                       this.callback = callback;\r
+                       this.args     = args;\r
+                       this.thisObj  = thisObject || apiuser;\r
+               },\r
+               fire : function(){\r
+                       var f = this.callback,\r
+                               a = this.args,\r
+                               t = this.thisObj;\r
+                       this.destroy();\r
+                       if( Type.isArray( a ) === true ){\r
+                               f.apply( t, a );\r
+                       } else {\r
+                               f.call( t, a );\r
+                       };\r
+               },\r
+               destroy : function( apiuser, callback ){\r
+                       if( apiuser  && apiuser  !== this.apiuser ) return false;\r
+                       if( callback && callback !== this.callback ) return false;\r
+                       \r
+                       this.kill();\r
+                       return true;\r
                }\r
-       };\r
-       CallbackTicketClass.prototype.destroy = function( _apiuser, _callback ){\r
-               if( _apiuser  && _apiuser  !== this.apiuser ) return false;\r
-               if( _callback && _callback !== this.callback ) return false;\r
-               \r
-               this.kill();\r
-               return true;\r
-       };\r
+       });\r
 \r
        function dispatch(){\r
                var _ticket = CALLBACK_LIST.shift();\r
                if( _ticket ){\r
-                       _ticket.call();\r
-                       _ticket.destroy();\r
+                       _ticket.fire();\r
                        CALLBACK_LIST.length !== 0 && SystemTimer.add( SUPER_USER_KEY, dispatch, 1, true );\r
-               }\r
-       }\r
+               };\r
+       };\r
 \r
        return {\r
-               add: function( _apiuser, _callback, _argments ){\r
+               add: function( _apiuser, _callback, _argments, _thisObject ){\r
                        CALLBACK_LIST.length === 0 && SystemTimer.add( SUPER_USER_KEY, dispatch, 1, true );\r
-                       CALLBACK_LIST.push( new CallbackTicketClass( _apiuser, _callback, _argments ) );\r
+                       CALLBACK_LIST.push( new CallbackTicket( _apiuser, _callback, _argments, _thisObject ) );\r
                },\r
                remove: function( _apiuser, _callback ){\r
                        var _ticket,\r
@@ -1764,10 +677,10 @@ var AsyncCall = ( function(){
                                        CALLBACK_LIST.splice( i, 1 );\r
                                } else {\r
                                        ++i;\r
-                               }\r
-                       }\r
+                               };\r
+                       };\r
                }\r
-       }\r
+       };\r
 })();\r
 \r
 /* -----------------------------------------------------------\r
@@ -1798,30 +711,31 @@ var File = ( function(){
                var REQUEST_TICKET_RESISTER = [],\r
                        currentTicket           = null,\r
                        currentData             = null,\r
-                       DATA_TYPE_ARRAY         = 'json,xml,html,text'.split( ','),\r
+                       DATA_TYPE_ARRAY         = 'json,xml,html,text'.split( ',' ),\r
                        DATA_IS_JSON            = 0,\r
                        DATA_IS_XML             = 1,\r
                        DATA_IS_HTML            = 2,\r
                        DATA_IS_TEXT            = 3,\r
                        numError                = 0;\r
                \r
-               var RequestTicketClass = function( _apiuser, _type, _data, _url, _onLoad, _onError ){\r
-                       this.apiuser = _apiuser;\r
-                       this.type    = _type;\r
-                       this.data    = _data;\r
-                       this.url     = _url;\r
-                       this.onLoad  = _onLoad;\r
-                       this.onError = _onError;\r
-                       this.state   = 0;\r
-                       _apiuser = _type = _data = _onLoad = _onError = null;\r
-               };\r
-               RequestTicketClass.prototype = new TicketBase();\r
-               RequestTicketClass.prototype.load = function( _data ){\r
-                       AsyncCall.add( this.apiuser, this.onLoad, [ this.data, _data ] );\r
-               };\r
-               RequestTicketClass.prototype.error = function(){\r
-                       AsyncCall.add( this.apiuser, this.onError, this.data );\r
-               };\r
+               var RequestTicket = Class.create(\r
+                       Class.POOL_OBJECT, {\r
+                       Constructor : function( apiuser, type, data, url, onLoad, onError ){\r
+                               this.apiuser = apiuser;\r
+                               this.type    = type;\r
+                               this.data    = data;\r
+                               this.url     = url;\r
+                               this.onLoad  = onLoad;\r
+                               this.onError = onError;\r
+                               this.state   = 0;\r
+                       },\r
+                       load : function( data ){\r
+                               AsyncCall.add( this.apiuser, this.onLoad, [ this.data, data ] );\r
+                       },\r
+                       error : function(){\r
+                               AsyncCall.add( this.apiuser, this.onError, this.data );\r
+                       }\r
+               });\r
                \r
                function request(){\r
                        if( currentTicket !== null || REQUEST_TICKET_RESISTER.length === 0 ) return;\r
@@ -1832,20 +746,20 @@ var File = ( function(){
                                success:        onSuccess,\r
                                error:          onError\r
                        });\r
-               }\r
+               };\r
                function onSuccess( _data ){\r
                        currentTicket.load( _data );\r
                        currentTicket.kill();\r
                        currentTicket = null;\r
                        request();\r
-               }\r
+               };\r
                function onError(){\r
                        ++numError;\r
                        currentTicket.error();\r
                        currentTicket.kill(); // retry\r
                        currentTicket = null;\r
                        request();\r
-               }\r
+               };\r
 \r
                return {\r
                        getNumTask: function(){\r
@@ -1855,10 +769,10 @@ var File = ( function(){
                                return numError;\r
                        },\r
                        getJson: function( _apiuser, _data, _url, _onLoad, _onError ){\r
-                               REQUEST_TICKET_RESISTER.push( new RequestTicketClass( _apiuser, DATA_IS_JSON, _data, _url, _onLoad, _onError ));\r
+                               REQUEST_TICKET_RESISTER.push( new RequestTicket( _apiuser, DATA_IS_JSON, _data, _url, _onLoad, _onError ));\r
                                currentTicket === null && request();\r
                        }\r
-               }\r
+               };\r
        })();\r
 \r
        var FILE_CONTROLER = {\r
@@ -1930,18 +844,22 @@ var File = ( function(){
                replace: function( _uid, _file, _newIndex ){\r
                        \r
                },\r
-               addEventListener: function( FILEorNULL, _eventType, _callback ){\r
+               addEventListener: function( FILEorNULL, _eventType, _callback, opt_thisObject ){\r
                        var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL;\r
-                       EVENT_LISTENER_REGISTER.push( new FileEventTicketClass( _uid, _eventType, _callback ));\r
-               },\r
-               removeEventListener: function( FILEorNULL, _eventType, _callback ){\r
-                       var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL,\r
-                               _ticket;\r
-                       for(var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i ){\r
-                               _ticket = EVENT_LISTENER_REGISTER[ i ];\r
-                               if( _ticket.fileUID === _uid && _ticket.eventType === _eventType && _ticket.callBack === _callback ){\r
-                                       EVENT_LISTENER_REGISTER.splice( i, 1 );\r
-                                       _ticket.kill();\r
+                       EVENT_LISTENER_REGISTER.push( new FileEventTicket( _uid, _eventType, _callback, opt_thisObject ));\r
+               },\r
+               removeEventListener: function( FILEorNULL, eventType, callback ){\r
+                       var uid  = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL,\r
+                               list = EVENT_LISTENER_REGISTER,\r
+                               i    = 0,\r
+                               ticket;\r
+                       for( ; i < list.length; ){\r
+                               ticket = list[ i ];\r
+                               if( ticket.fileUID === uid && ticket.eventType === eventType && ticket.callBack === callback ){\r
+                                       list.splice( i, 1 );\r
+                                       ticket.kill();\r
+                               } else {\r
+                                       ++i;\r
                                };\r
                        };\r
                },\r
@@ -1993,11 +911,11 @@ var File = ( function(){
                                _type     = _ticket.eventType;\r
                                _callback = _ticket.callBack;\r
                                if( _eventType === _type && _uid === _ticket.fileUID ){\r
-                                       AsyncCall.add( apiuser, _callback, [ _eventType, _targetFile, e.key, e.value ] );\r
+                                       AsyncCall.add( apiuser, _callback, [ _eventType, _targetFile, e.key, e.value ], _ticket.thisObject || _targetFile );\r
                                } else\r
                                if( _type === Const.TREE.EVENT.UPDATE && _eventType === Const.FILE.EVENT.GET_SEQENTIAL_FILES ){\r
                                        //_callback( _eventType, _targetFile );\r
-                                       AsyncCall.add( apiuser, _callback, [ _eventType, _targetFile ] );\r
+                                       AsyncCall.add( apiuser, _callback, [ _eventType, _targetFile ], _ticket.thisObject || instance );\r
                                };\r
                        };\r
                };\r
@@ -2022,21 +940,21 @@ var File = ( function(){
                this.down = function( _index ){\r
                        if( typeof _index !== 'number' || _index < 0 || _index >= currentFile.getChildFileLength()) return;\r
                        PARENT_FILE_RESITER.unshift( currentFile );\r
-                       currentFile = currentFile.getChildFileByIndex( _index );\r
+                       currentFile = currentFile.getChildFileAt( _index );\r
                        currentFile.getSeqentialFiles();\r
                        return currentFile;\r
                };\r
                this.up = function( _index ){\r
                        var l = PARENT_FILE_RESITER.length;\r
-                       if( l === 0) return null;\r
+                       if( l === 0 ) return null;\r
                        \r
                        if( currentFile ){\r
                                var _currentFile = currentFile;\r
                                currentFile = null;\r
                                _currentFile.destroy();\r
                        };\r
-                       if( typeof _index === 'number'){\r
-                               if( _index >= l) return null;\r
+                       if( typeof _index === 'number' ){\r
+                               if( _index >= l ) return null;\r
                                currentFile = this.getParentFileAt( _index );\r
                                PARENT_FILE_RESITER.splice( 0, l -_index);\r
                        } else {\r
@@ -2045,8 +963,8 @@ var File = ( function(){
                        currentFile.getSeqentialFiles();\r
                        return currentFile;     \r
                };\r
-               this.addTreeEventListener = function( _eventType, _callback ){\r
-                       FILE_CONTROLER.addEventListener( null, _eventType, _callback );\r
+               this.addTreeEventListener = function( _eventType, _callback, opt_thisObject ){\r
+                       FILE_CONTROLER.addEventListener( null, _eventType, _callback, opt_thisObject );\r
                };\r
                this.removeTreeEventListener = function( _eventType, _callback ){\r
                        FILE_CONTROLER.removeEventListener( null, _eventType, _callback );\r
@@ -2068,20 +986,22 @@ var File = ( function(){
                        return true;\r
                };\r
        };\r
-\r
-       var FileEventTicketClass = function( _uid, _eventType, _callback ){\r
-               this.fileUID   = _uid;\r
-               this.eventType = _eventType;\r
-               this.callBack  = _callback;\r
-               _uid = _eventType = _callback = undefined;\r
-       };\r
-       FileEventTicketClass.prototype = new TicketBase();\r
+       \r
+       var FileEventTicket = Class.create(\r
+               Class.POOL_OBJECT, {\r
+               Constructor : function( uid, eventType, callback, opt_thisObject ){\r
+                       this.fileUID    = uid;\r
+                       this.eventType  = eventType;\r
+                       this.callBack   = callback;\r
+                       this.thisObject = opt_thisObject;\r
+               }       \r
+       });\r
        \r
        var FileEventClass = function( eventType, file, key, value ){\r
-               this.eventType = eventType;\r
-               this.targetFile = file;\r
+               this.eventType        = eventType;\r
+               this.targetFile       = file;\r
                this.updatedAttribute = key;\r
-               this.updatedValue = value;\r
+               this.updatedValue     = value;\r
        };\r
 \r
 /*\r
@@ -2106,7 +1026,7 @@ var File = ( function(){
 \r
                this.getUID = function(){\r
                        return uid;\r
-               }\r
+               };\r
        };\r
        \r
        FileClass.prototype = {\r
@@ -2143,10 +1063,10 @@ var File = ( function(){
                        }\r
                        return -1;\r
                },\r
-               getChildFileByIndex: function( _index ){\r
+               getChildFileAt: function( _index ){\r
                        var _access = FILE_CONTROLER.getFileDataAccess( this ),\r
                                _children = FILE_CONTROLER.getChildren( this );\r
-                       if( typeof _index !== 'number' || _index < 0 || Type.isArray( _children ) === false || _index >= _children.length) return null;\r
+                       if( typeof _index !== 'number' || _index < 0 || Type.isArray( _children ) === false || _index >= _children.length ) return null;\r
                        var _file = new FileClass( _access.TREE, _access.DATA, _children[ _index ]);\r
                        // _file.init();\r
                        return _file;\r
@@ -2156,7 +1076,7 @@ var File = ( function(){
                        if( typeof driver.getName === 'function'){\r
                                return driver.getName( this );\r
                        }\r
-                       return BASE_DRIVER.getName( this);\r
+                       return BASE_DRIVER.getName( this );\r
                },\r
                getThumbnail: function(){\r
                        var driver = FILE_CONTROLER.getDriver( this );\r
@@ -2199,30 +1119,30 @@ var File = ( function(){
                        // simpleDeepCopy\r
                        var driver = FILE_CONTROLER.getDriver( this ),\r
                                data;\r
-                       if( typeof driver.read === 'function'){\r
+                       if( Type.isFunction( driver.read ) === true ){\r
                                 data = driver.read( this );\r
-                       }\r
+                       };\r
                        return BASE_DRIVER.read( data || this );\r
                },\r
                write: function( _newData, _onUpdateFunction ){\r
                        var driver = FILE_CONTROLER.getDriver( this );\r
-                       if( typeof driver.write === 'function'){\r
+                       if( typeof driver.write === 'function' ){\r
                                return driver.write( this, _newData, _onUpdateFunction );\r
-                       }\r
+                       };\r
                        return BASE_DRIVER.write( this, _newData, _onUpdateFunction );\r
                },\r
                viewerApplicationList: function(){\r
                        var driver = FILE_CONTROLER.getDriver( this );\r
-                       if( typeof driver.viewerApplicationList === 'function'){\r
+                       if( typeof driver.viewerApplicationList === 'function' ){\r
                                return driver.viewerApplicationList( this );\r
-                       }\r
+                       };\r
                        return BASE_DRIVER.viewerApplicationList( this );\r
                },\r
                editorApplicationList: function(){\r
                        var driver = FILE_CONTROLER.getDriver( this );\r
-                       if( typeof driver.editorApplicationList === 'function'){\r
+                       if( typeof driver.editorApplicationList === 'function' ){\r
                                return driver.editorApplicationList( this );\r
-                       }\r
+                       };\r
                        return BASE_DRIVER.viwerApps( this );\r
                },\r
                create: function(){\r
@@ -2284,7 +1204,7 @@ var File = ( function(){
                        delete _access.TREE;\r
                        delete _access.parentData;\r
                }\r
-       }\r
+       };\r
 \r
        /*\r
         * FileDriverBase\r
@@ -2359,36 +1279,46 @@ var File = ( function(){
                        // debug用 全てのメニューを許可\r
                        return Const.FILE.UPDATE_POLICY.DSRWC;\r
                };\r
-               this.read = function( _FILEorDATA ){\r
+               this.read = function( FILEorDATA ){\r
                        var data,\r
-                               protects = Const.FILE.DATA_PROPERTY_RESERVED;                   \r
-                       if( _FILEorDATA instanceof FileClass ){\r
-                               data = FILE_CONTROLER.getFileData( _FILEorDATA )\r
+                               protects = Const.FILE.DATA_PROPERTY_RESERVED,\r
+                               objSrc   = [],\r
+                               objCopy  = [],\r
+                               getIndex = Util.getIndex;                       \r
+                       if( FILEorDATA instanceof FileClass ){\r
+                               data = FILE_CONTROLER.getFileData( FILEorDATA )\r
                        } else {\r
-                               data = _FILEorDATA;\r
-                       }\r
-\r
+                               data = FILEorDATA;\r
+                       };\r
+                       \r
                        function clone( src ) {\r
-                               var ret;\r
-                               if( Type.isArray(src) === true ){\r
+                               var ret, i, key;\r
+                               if( Type.isArray( src ) === true ){\r
+                                       i = getIndex( objSrc, src );\r
+                                       if( i !== -1 ) return objCopy[ i ];\r
                                        ret = [];\r
+                                       objSrc[ objSrc.length ]   = src;\r
+                                       objCopy[ objCopy.length ] = ret;\r
                                } else\r
-                               if( Type.isObject(src) === true ){\r
+                               if( Type.isObject( src ) === true ){\r
+                                       i = getIndex( objSrc, src );\r
+                                       if( i !== -1 ) return objCopy[ i ];\r
                                        ret = {};\r
+                                       objSrc[ objSrc.length ]   = src;\r
+                                       objCopy[ objCopy.length ] = ret;\r
                                } else\r
-                               if( Type.isNumber(src) === true || Type.isString(src) === true || Type.isBoolean( src ) === true ){\r
+                               if( Type.isNumber( src ) === true || Type.isString( src ) === true || Type.isBoolean( src ) === true ){\r
                                        return src;\r
                                } else {\r
-                                       return null;\r
-                               }\r
-                               for( var key in src ){\r
-                                       if( Util.getIndex( protects, key ) === -1 ){\r
+                                       return src;\r
+                               };\r
+                               for( key in src ){\r
+                                       if( getIndex( protects, key ) === -1 ){\r
                                                ret[ key ] = clone( src[ key ]);\r
-                                       }\r
-                               }\r
+                                       };\r
+                               };\r
                                return ret;\r
-                       };\r
-                               \r
+                       };                              \r
                        return clone( data );\r
                };\r
                this.write = function( _file, _newData, _onUpdateFunction ){\r
@@ -2414,7 +1344,7 @@ var File = ( function(){
                this.onDelete = function(){\r
                        \r
                };\r
-       }\r
+       };\r
        \r
        var BASE_DRIVER   = new FileDriverBase();\r
        \r
@@ -2428,7 +1358,7 @@ var File = ( function(){
 \r
        function createFileTypeID(){\r
                return ++numFileType;\r
-       }\r
+       };\r
        \r
        var FileAPIClass = function( driver ){\r
                var constObject;\r
@@ -2462,7 +1392,7 @@ var File = ( function(){
                this.getConst          = function(){\r
                        return Const; // constObject = constObject || clone( Const )\r
                };\r
-       }\r
+       };\r
        \r
        return {\r
                registerDriver: function( _class ){\r
@@ -2492,204 +1422,1156 @@ var File = ( function(){
  * window resize event, overlayApplication currentAplication に流す\r
  */    \r
 \r
-var APPLICATION_LIST         = [];\r
+var APPLICATION_LIST = [];\r
 \r
-var AbstractBasicPane = function(){\r
-       var instance    = null;\r
-       this.MIN_WIDTH  = 240;\r
-       this.MIN_HEIGHT = 240;\r
-       this.init = function(){\r
-               instance = this;\r
-               instance.onInit();\r
+var ApplicationPrivateData = function(){};\r
+ApplicationPrivateData.prototype = {\r
+       appClass      : null,\r
+       application   : null,\r
+       displayName   : null,\r
+       isOverlay     : false,\r
+       rootElement   : null,\r
+       bgColor       : '#C1CACF',\r
+       uiList        : null,\r
+       formList      : null,\r
+       finderList    : null,\r
+       styleCursor   : null,\r
+       eventRoot     : null,\r
+       fetchResource : 0,\r
+       bootParams    : null,\r
+       phase         : 0,\r
+       cursor        : '',\r
+       w             : 0,\r
+       h             : 0,\r
+       init          : function( appClass, displayName, isOverlay ){\r
+               this.appClass    = appClass;\r
+               // this.application = app;\r
+               this.displayName = displayName;\r
+               this.isOverlay   = isOverlay;\r
+               this.rootElement = document.createElement( 'div' );\r
+               this.styleCursor = this.rootElement.style;\r
+               ApplicationPrivateData.list.push( this );\r
+       },\r
+       detect : function(){\r
+               if( this.rootElement.firstChild && this.fetchResource === 0 ){\r
+                       SystemTimer.remove( this.application, this.detect );\r
+                       this.onOpen();\r
+               };\r
+       },\r
+       onOpen : function(){\r
+               this.rootElement.style.display = '';\r
+               \r
+               // this.layer !== null && this.layer.onResize( this.w, this.h );\r
+               \r
+               if( this.application.MIN_WIDTH > this.w || this.application.MIN_HEIGHT > this.h ){\r
+                       if( Type.isHTMLElement( this.rootElement ) === true ){\r
+                               // 小さすぎる!、と表示\r
+                       };\r
+               };\r
+               if( this.bootParams.length > 2 ){\r
+                       this.application.onOpen.apply( this.application, this.bootParams );\r
+               } else {\r
+                       this.application.onOpen( this.w, this.h );\r
+               };\r
+               this.phase = 4; \r
+       },\r
+       fetchResourceComplete : function(){\r
+               --this.fetchResource;\r
+       }\r
+};\r
+ApplicationPrivateData.list = [];\r
+ApplicationPrivateData.get = function( app ){\r
+       var list = ApplicationPrivateData.list,\r
+               i    = list.length;\r
+       for( ; i; ){\r
+               if( app instanceof list[ --i ].appClass ) return list[ i ];\r
        };\r
-       this.onInit = function(){};\r
-       this.resize = function( _w, _h ){\r
-               if( instance.MIN_WIDTH > _w || instance.MIN_HEIGHT > _h ){\r
-                       if( Type.isHTMLElement( instance.rootElement ) === true ){\r
+       return null;\r
+};\r
+\r
+var AbstractApplication = function( appClass, displayName, isOverlay ){\r
+       ( new ApplicationPrivateData() ).init( appClass, displayName, isOverlay );\r
+};\r
+AbstractApplication.prototype = {\r
+       getUID : function(){\r
+               var data = ApplicationPrivateData.get( this );\r
+               return Util.getIndex( API_USER_LIST, data.appClass );\r
+       },\r
+       init : function(){\r
+               var data = ApplicationPrivateData.get( this );\r
+               // this.rootElement = data.rootElement;\r
+               // data.application = this;\r
+               data.phase = 1;\r
+               data.appClass === Page.appClass && Page.show();\r
+               this.onInit();\r
+               data.phase = 2;\r
+       },\r
+       open : function( w, h /*, _option */ ){\r
+               var data = ApplicationPrivateData.get( this );\r
+               data.phase      = 3;\r
+               data.bootParams = Util.copyArray( arguments );\r
+               data.w          = w;\r
+               data.h          = h;\r
+               if( data.rootElement.innerHTML && data.rootElement.innerHTML.length > 0 ){\r
+                       SystemTimer.add( this, data.detect, 16, false, data );\r
+               } else {\r
+                       data.onOpen();\r
+               };\r
+       },\r
+       resize : function( w, h ){\r
+               var data = ApplicationPrivateData.get( this );\r
+               if( data.phase !== 4 ) return;\r
+               if( this.MIN_WIDTH > w || this.MIN_HEIGHT > h ){\r
+                       if( Type.isHTMLElement( this.rootElement ) === true ){\r
                                // 小さすぎる!、と表示\r
                        };\r
                        return;\r
                };\r
-               instance.onPaneResize( _w, _h );\r
+               this.onPaneResize( w, h );\r
+       },\r
+       close : function(){\r
+               var data = ApplicationPrivateData.get( this );\r
+               data.phase = 5;\r
+               if( this.onClose() === false ){\r
+                       return false;\r
+               };\r
+               if( data.uiList ){ \r
+                       while( data.uiList.length > 0 ) data.uiList.shift().destroy();\r
+               };\r
+               if( data.finderList ){\r
+                       while( data.finderList.length > 0 ) data.finderList.shift().destroy();\r
+               };              \r
+               \r
+               data.eventRoot && PointingDeviceEventTree.destroyTree( data.eventRoot );\r
+               MouseEvent.remove( this );\r
+               KeyEvent.remove( this );\r
+               SystemTimer.remove( this );\r
+               AsyncCall.remove( this );\r
+               StyleSheet.unload( this );\r
+\r
+               var elm = this.rootElement;\r
+               Util.removeAllChildren( elm );\r
+               elm.parentNode.removeChild( elm );\r
+               \r
+               Application.shutdown( this, data.isOverlay );\r
+               \r
+               data.appClass === Page.appClass && Page.hide();\r
+\r
+               data.phase = 6;\r
+               \r
+               var list = ApplicationPrivateData.list;\r
+               list.splice( Util.getIndex( list, data ), 1 );\r
+       },\r
+       createUIGroup : function( node ){\r
+               var data = ApplicationPrivateData.get( this ),\r
+                       ui = UI.createUIGroup( this, node );\r
+               if( data.uiList === null ) data.uiList = [];\r
+               data.uiList.push( ui );\r
+               return ui;\r
+       },\r
+       createUIForm : function( nodeOrElm, opt_elmForm ){\r
+               var data = ApplicationPrivateData.get( this ),\r
+                       form = UIForm.createForm( this, nodeOrElm, opt_elmForm );\r
+               if( data.formList === null ) data.formList = [];\r
+               data.formList.push( form );\r
+               return form;\r
+       },\r
+       createFinder : function( _elmTarget, _tree, _onSelect, _viewerOption, _editorOption ){\r
+               var data   = ApplicationPrivateData.get( this ),\r
+                       finder = Finder.create( this, _elmTarget, _tree, _onSelect, _viewerOption, _editorOption );\r
+               if( data.finderList === null ) data.finderList = [];\r
+               data.finderList.push( finder );\r
+               return finder;\r
+       },\r
+       createDHTML : function( _elm ){\r
+               return DHTML.create( this, _elm );\r
+       },\r
+       addEventListener : function( element, eventType, handler, opt_thisObject ){\r
+               MouseEvent.add( this, element, eventType, handler, opt_thisObject );\r
+       },\r
+       removeEventListener : function( element, eventType, handler ){\r
+               MouseEvent.remove( this, element, eventType, handler );\r
+       },\r
+       getPointingDeviceEventTreeRoot : function(){\r
+               var data = ApplicationPrivateData.get( this );\r
+               if( data.phase === 1 ){\r
+                       data.eventRoot   = PointingDeviceEventTree.create( this );\r
+                       data.styleCursor = PointingDeviceEventTree._getNodePrivateData( data.eventRoot ).elmMouseCatch.style;\r
+               };              \r
+               return data.eventRoot;\r
+       },\r
+       updateCoursor : function( _cursor ){\r
+               var data = ApplicationPrivateData.get( this );\r
+               if( data.cursor !== _cursor ){\r
+                       data.styleCursor.cursor = data.cursor = _cursor;\r
+               };\r
+       },\r
+       fetchCSS : function( url, opt_onload, opt_onerror ){\r
+               var data = ApplicationPrivateData.get( this );\r
+               if( data.phase === 1 ){\r
+                       ++data.fetchResource;\r
+                       StyleSheet.load( this, url, data.fetchResourceComplete, data.fetchResourceComplete, data );\r
+               };\r
+       },\r
+       onInit : function(){},\r
+       onOpen : function(){},\r
+       onClose : function(){ return true; },\r
+       onPaneResize : function( w, h ){},\r
+       addKeyEventListener : function( _eventType, _handler, _keyCode, _shift, _ctrl ){\r
+               KeyEvent.add( this, _eventType, _handler, _keyCode, _shift, _ctrl );\r
+       },\r
+       removeKeyEventListener : function( _eventType, _handler, _keyCode, _shift, _ctrl ){\r
+               KeyEvent.remove( this, _eventType, _handler, _keyCode, _shift, _ctrl );\r
+       },\r
+       shiftEnabled : function(){\r
+               return KeyEvent.shiftEnabled;\r
+       },\r
+       ctrlEnabled : function(){\r
+               return KeyEvent.ctrlEnabled;\r
+       },\r
+       addTimer : function( handler, time, once ){\r
+               SystemTimer.add( this, handler, time, !!once );\r
+       },\r
+       removeTimer : function( handler ){\r
+               SystemTimer.remove( this, handler );\r
+       },\r
+       addAsyncCall : function( _callback, _argments, _thisObject ){\r
+               AsyncCall.add( this, _callback, _argments, _thisObject );\r
+       },\r
+       removeAsyncCall : function( _callback ){\r
+               AsyncCall.remove( this, _callback );\r
+       },\r
+       fetchHTMLElement : function( id ){\r
+               var elm = document.getElementById( id );\r
+               if( elm ){\r
+                       elm.removeAttribute( 'id' );\r
+                       elm.parentNode.removeChild( elm );\r
+                       return elm;\r
+               };\r
+       }\r
+};\r
+\r
+var PointingDeviceEventTree = ( function(){\r
+       var ROOT_LIST       = [],\r
+               currentRootData = null,\r
+               targetNodeData  = null,\r
+               forceNodeData   = null,\r
+               hoverList       = [];\r
+       \r
+       function eventRellay( e ){\r
+               var data = forceNodeData, // || targetNodeData,\r
+                       x    = e.clientX,\r
+                       y    = e.clientY,\r
+                       type = e.type,\r
+                       list = hoverList,\r
+                       i    = 0,\r
+                       ret, systemOnly = false, addClass, removeClass,\r
+                       parent;\r
+               if( data && data.dispatchEvent( e, type, true ) === true ) return false;\r
+               if( currentRootData === null ) return;\r
+               targetNodeData = currentRootData;\r
+               currentRootData._capcher( x, y );\r
+               targetNodeData.apiuser.updateCoursor( targetNodeData._cursor );\r
+               data = targetNodeData;\r
+               while( data ){\r
+                       ret = data.dispatchEvent( e, type, true, systemOnly );\r
+                       if( ret === true || ret === false ) break; // systemOnly = true;\r
+                       data = data.parentData;\r
+               };\r
+               \r
+               addClass    = Util.addClass;\r
+               removeClass = Util.removeClass;\r
+               for( ; i < list.length; ){\r
+                       parent = data = list[ i ];\r
+                       while( parent.parentData && parent === parent.parentData.hitChild ){\r
+                               parent = parent.parentData;\r
+                       };\r
+                       if( parent !== currentRootData ){\r
+                               data.hover === true && removeClass( data.elm, data.hoverClass );\r
+                               delete data.isHover;\r
+                               data.events && data.events.mouseout && data.fire( e, 'mouseout', false );\r
+                               delete data.hitSelf;\r
+                               list.splice( i, 1 );\r
+                               continue;\r
+                       };\r
+                       if( data.hover === true && data.isHover === false ){\r
+                               addClass( data.elm, data.hoverClass );\r
+                               data.isHover = true;\r
+                       };\r
+                       if( data.hitSelf === false ){\r
+                               data.events && data.events.mouseover && data.fire( e, 'mouseover', true );\r
+                               data.hitSelf = true;\r
+                       };\r
+                       ++i;\r
+               };\r
+               return false;\r
+       };      \r
+       \r
+       var NodeClass = function( apiuser, rootData, /*parentLayer,*/ parentData, rangeOrElm, through, clip, hover, cursor, scroll, dragdrop ){\r
+               ( new NodePrivateData() ).init( apiuser, rootData, /*parentLayer,*/ parentData, this, rangeOrElm, through, clip, hover, cursor, scroll, dragdrop );\r
        };\r
-       this.onPaneResize = function( _w, _h ){};\r
-       this.close = function(){\r
-               instance.onClose();\r
-               instance = this;\r
+       NodeClass.prototype = {\r
+               createNode : function( rangeOrElmData, through, clip, hover, cursor, scroll, dragdrop ){\r
+                       var data = NodePrivateData.get( this ),\r
+                               elm;\r
+                       if( Type.isHTMLElement( rangeOrElmData ) === true ){\r
+                               elm = rangeOrElmData;\r
+                       } else\r
+                       if( Type.isString( rangeOrElmData ) === true ){\r
+                               elm = document.getElementById( rangeOrElmData );\r
+                               if( !elm ){\r
+                                       elm = Util.pullHtmlAsTemplete( rangeOrElmData );\r
+                               };\r
+                               if( !elm || Type.isHTMLElement( elm ) === false || elm.nodeType !== 1 ){\r
+                                       throw new Error( "invalid HTMLElement." );\r
+                               };\r
+                       } else\r
+                       if( Type.isObject( rangeOrElmData ) === false || Type.isFinite( rangeOrElmData.x ) === false || Type.isFinite( rangeOrElmData.y ) === false ){\r
+                               throw new Error( "No range" );\r
+                       };\r
+                       \r
+                       if( elm && data.elm === null ){\r
+                               throw new Error( "MetaLayer don't containe HTMLElement-Layer." );\r
+                       };\r
+                       if( data.elm && data.elm.style.hasLayout === false ){\r
+                               throw new Error( "[ie] OffsetParent is hasLayout === false." );\r
+                       };\r
+                       \r
+                       var newNode = new NodeClass( data.apiuser, data.rootData, data, elm || rangeOrElmData, through, clip, hover, cursor, scroll, dragdrop ),\r
+                               newData = NodePrivateData.get( newNode );\r
+                       \r
+                       if( data.childData === null ) data.childData = [];\r
+                       data.childData.push( newData );\r
+                       return newNode;\r
+               },\r
+               createNodeAt : function(){\r
+               },\r
+               remove : function(){\r
+                       NodePrivateData.get( this ).remove();\r
+               },\r
+               nodeIndex : function( v ){\r
+                       return NodePrivateData.get( this ).nodeIndex( v );\r
+               },\r
+               numNode : function(){\r
+                       return NodePrivateData.get( this ).numNode();\r
+               },\r
+               disabled : function( v ){\r
+                       return NodePrivateData.get( this ).disabled( v );\r
+               },\r
+               childrenDisabled : function( v ){\r
+                       return NodePrivateData.get( this ).disabled( v );\r
+               },\r
+               mesure : function(){\r
+                       NodePrivateData.get( this ).mesure();\r
+               },\r
+               mesureChildren : function(){\r
+                       NodePrivateData.get( this ).mesureChildren();\r
+               },\r
+               update : function( x, y, w, h ){\r
+                       NodePrivateData.get( this ).update( x, y, w, h );\r
+               },\r
+               setPosition : function( x, y ){\r
+                       NodePrivateData.get( this ).setPosition( x, y );\r
+               },\r
+               setSize : function( w, h ){\r
+                       NodePrivateData.get( this ).setSize( w, h );\r
+               },\r
+               cursor : function( v ){\r
+                       return NodePrivateData.get( this ).cursor( v );\r
+               },\r
+               x : function( x ){\r
+                       return NodePrivateData.get( this ).positionX( x );\r
+               },\r
+               y : function( y ){\r
+                       return NodePrivateData.get( this ).positionY( y );\r
+               },\r
+               width : function( w ){\r
+                       return NodePrivateData.get( this ).width( w );\r
+               },\r
+               height : function( h ){\r
+                       return NodePrivateData.get( this ).height( h );\r
+               },\r
+               getAbsolutePositionX : function(){\r
+                       return NodePrivateData.get( this ).getAbsolutePositionX();\r
+               },\r
+               getAbsolutePositionY : function(){\r
+                       return NodePrivateData.get( this ).getAbsolutePositionY();\r
+               },\r
+               addEventListener : function( type, handler, opt_thisObject ){\r
+                       NodePrivateData.get( this ).addEventListener( type, handler, opt_thisObject );\r
+               },\r
+               removeEventListener : function( type, handler ){\r
+                       NodePrivateData.get( this ).removeEventListener( type, handler );\r
+               },\r
+               scrollTo : function( x, y ){\r
+                       NodePrivateData.get( this ).scrollTo( x, y );\r
+               },\r
+               scrollX : function( v ){\r
+                       return NodePrivateData.get( this ).scrollX( v );\r
+               },\r
+               scrollY : function( v ){\r
+                       return NodePrivateData.get( this ).scrollY( v );\r
+               },\r
+               invalidateScrollbar : function(){\r
+                       ScrollBarManager.update( NodePrivateData.get( this ) );\r
+               }\r
        };\r
-}\r
 \r
-var AbstractApplication = function( displayName, appClass, isOverlay ){\r
-       var self          = null, // init で設定\r
-               uiList        = [],\r
-               finderList    = [],\r
-               fetchResource = 0,\r
-               bootParams    = null,\r
-               phase         = 0;\r
-       this.rootElement = document.createElement( 'div' );\r
-       this.bgColor     = '#C1CACF';\r
-       this.getUID = function(){\r
-               return Util.getIndex( API_USER_LIST, appClass );\r
-       }\r
-       this.init = function(){\r
-               phase = 1;\r
-               self  = this;\r
-               appClass === Page.appClass && Page.show();\r
-               self.onInit();\r
-               phase = 2;\r
+       /**\r
+        * clip : true の場合、子ノードの変更によってヒットエリアを変化させない.elm には overflow:hidden としておくのが通常.\r
+        */\r
+       var NodePrivateData = function(){};\r
+       NodePrivateData.prototype = {\r
+               elmMouseCatch : null, // rootData only\r
+               eventCounter  : null, // rootData only\r
+               cursorStyle   : null, // rootData only\r
+               node          : null,\r
+               apiuser       : null,\r
+               rootData      : null,\r
+               elm           : null, // resizeTarget\r
+               elmScroll     : null,\r
+               elmScroller   : null,\r
+               elmScrollbar  : null,\r
+               x             : 0,\r
+               y             : 0,\r
+               w             : 0,\r
+               h             : 0,\r
+               t             : 0, // top\r
+               l             : 0, // left\r
+               b             : 0, // bottom\r
+               r             : 0, // right\r
+               absoluteX     : 0,\r
+               absoluteY     : 0,\r
+               _scrollX      : 0,\r
+               _scrollY      : 0,\r
+               scrollingX    : 0,\r
+               scrollingY    : 0,\r
+               _cursor       : '',\r
+               // parentLayer   : null,\r
+               parentData    : null,\r
+               childData     : null,\r
+               events        : null,\r
+               hitChild      : null,\r
+               hitSelf       : false,\r
+               _disabled     : false,\r
+               _childDisabled: false,\r
+               layoutManager : null,\r
+               through       : false,\r
+               clip          : false,\r
+               hover         : false,\r
+               hoverClass    : null,\r
+               isHover       : false,\r
+               scroll        : false,\r
+               dragdrop      : false,\r
+               tooltip       : null,\r
+               init: function( apiuser, rootData, /*parentLayer,*/ parentData, node, rangeOrElm, through, clip, hover, cursor, scroll, dragdrop ){\r
+                       this.apiuser     = apiuser;\r
+                       this.rootData    = rootData || this;\r
+                       // this.parentLayer = parentLayer;\r
+                       this.parentData  = parentData;\r
+                       this.node        = node;\r
+                       this.through     = through;\r
+                       this.clip        = !!clip;\r
+                       if( cursor ) this._cursor = cursor;   \r
+\r
+                       if( Type.isHTMLElement( rangeOrElm ) === true ){\r
+                               this.elm        = rangeOrElm;\r
+                               this.hover      = !!hover;\r
+                               this.hoverClass = hover;\r
+                               this.scroll     = clip && scroll;                               \r
+                               this.mesure();\r
+                               this.scroll === true && ScrollBarManager.register( this );\r
+                       } else {\r
+                               this.update( rangeOrElm.x, rangeOrElm.y, rangeOrElm.w, rangeOrElm.h );\r
+                       };\r
+                       \r
+                       NodePrivateData.dataList.push( this );\r
+               },\r
+               mesure : function(){\r
+                       var x, y, w, h, parent, _this, _parent;\r
+                       if( this.elm ){\r
+                               w = this.elm.offsetWidth;\r
+                               h = this.elm.offsetHeight;\r
+                               _this   = Position.cumulativeOffset( this.elm );\r
+                               _parent = this.parentData ? Position.cumulativeOffset( this.parentData.elm ) : [ 0, 0 ];\r
+                               x  = _this[ 0 ] - _parent[ 0 ];\r
+                               y  = _this[ 1 ] - _parent[ 1 ];                         \r
+                               if( this.x !== x || this.y !== y || this.w !== w || this.h !== h ){\r
+                                       this.x = x;\r
+                                       this.y = y;\r
+                                       this.w = w;\r
+                                       this.h = h;\r
+                                       parent = this.parentData;\r
+                                       parent && this._updateAbsoluteXY( parent.absoluteX, parent.absoluteY, parent.scrollingX, parent.scrollingY );\r
+                                       this._updateRectangle();\r
+                               };                      \r
+                       } else {\r
+                               this._updateRectangle();\r
+                       };\r
+               },\r
+               mesureChildren : function(){\r
+                       var nodes, i;\r
+                       if( nodes = this.childData ){\r
+                               for( i = nodes.length; i; ){\r
+                                       nodes[ --i ].mesure();\r
+                               };\r
+                       };\r
+               },\r
+               update : function( x, y, w, h ){\r
+                       var updateXY = false,\r
+                               _this, _parent,\r
+                               parent;\r
+                       \r
+                       if( this.elm ){\r
+                               // width\r
+                               if( Type.isFinite( w ) === true ){\r
+                                       this.elm.style.width = w + 'px';\r
+                               } else\r
+                               if( Type.isString( w ) === true ){\r
+                                       this.elm.style.width = w;\r
+                                       w = this.elm.offsetWidth;\r
+                               };\r
+                               //update = this.w !== w;\r
+       \r
+                               // height\r
+                               if( Type.isFinite( h ) === true ){\r
+                                       this.elm.style.height = h + 'px';\r
+                               } else\r
+                               if( Type.isString( h ) === true ){\r
+                                       this.elm.style.height = w;\r
+                                       h = this.elm.offsetHeight;\r
+                               };\r
+                               //update = update || this.h !== h;\r
+                               \r
+                               // x\r
+                               if( Type.isFinite( x ) === true ){\r
+                                       this.elm.style.left = x + 'px';\r
+                               } else\r
+                               if( Type.isString( x ) === true ){\r
+                                       this.elm.style.left = x;\r
+                                       updateXY = true;\r
+                               } else {\r
+                                       updateXY = true;\r
+                               };\r
+                               \r
+                               // y\r
+                               if( Type.isFinite( y ) === true ){\r
+                                       this.elm.style.top = y + 'px';\r
+                               } else\r
+                               if( Type.isString( y ) === true ){\r
+                                       this.elm.style.top = y;\r
+                                       updateXY = true;\r
+                               } else {\r
+                                       updateXY = true;\r
+                               };\r
+                               if( updateXY === true ){\r
+                                       _this   = Position.cumulativeOffset( this.elm );\r
+                                       _parent = this.parentData ? Position.cumulativeOffset( this.parentData.elm ) : [ 0, 0 ];\r
+                                       x       = _this[ 0 ] - _parent[ 0 ];\r
+                                       y       = _this[ 1 ] - _parent[ 1 ];\r
+                               };\r
+                               //update = update || this.x !== x;\r
+                               //update = update || this.y !== y;\r
+                               \r
+                               //update === true && this._updateRectangle();\r
+                               // return;\r
+                       };\r
+                       x = Type.isFinite( x ) === true ? x : this.x;\r
+                       y = Type.isFinite( y ) === true ? y : this.y;\r
+                       w = Type.isFinite( w ) === true ? w : this.w;\r
+                       h = Type.isFinite( h ) === true ? h : this.h;\r
+                       if( this.x !== x || this.y !== y ){\r
+                               this.x = x;\r
+                               this.y = y;\r
+                               //console.log( 'xy  ' + ( this.elm ? this.elm.id : '' ) + ' x:' + x + ' y:' + y + ' w:' + w + ' h:' + h + ' absX:' + this.parentData.absoluteX )\r
+                               parent = this.parentData;\r
+                               parent && this._updateAbsoluteXY( parent.absoluteX, parent.absoluteY, parent.scrollingX, parent.scrollingY );\r
+                               this.w === w && this.h === h && this._updateRectangle();\r
+                       };\r
+                       if( this.w !== w || this.h !== h ){\r
+                               this.w = w;\r
+                               this.h = h;\r
+                               //console.log( 'wh  ' + ( this.elm ? this.elm.id : '' ) + ' x:' + x + ' y:' + y + ' w:' + w + ' h:' + h )\r
+                               this._updateRectangle();\r
+                       };\r
+                       \r
+                       ScrollBarManager.update( this );\r
+               },\r
+               _updateAbsoluteXY : function( x, y, sX, sY ){\r
+                       var nodes, i;\r
+                       this.absoluteX = x = this.x + x;\r
+                       this.absoluteY = y = this.y + y;\r
+                       if( nodes = this.childData ){\r
+                               for( i = nodes.length; i; ){\r
+                                       nodes[ --i ]._updateAbsoluteXY( x, y, this.scrollingX, this.scrollingY );\r
+                               };\r
+                       };\r
+               },\r
+               _updateRectangle : function(){\r
+                       var w = this.w,\r
+                               h = this.h,\r
+                               x = this.x,\r
+                               y = this.y,\r
+                               l = x,\r
+                               t = y,\r
+                               r = x + w,\r
+                               b = y + h,\r
+                               nodes = this.childData,\r
+                               i, node;\r
+                       // self;\r
+                       // childnodes\r
+                       if( this.clip === false && nodes ){\r
+                               for( i = nodes.length; i; ){\r
+                                       node = nodes[ --i ];\r
+                                       if( node.l + x < l ) l = x + node.l;\r
+                                       if( node.t + y < t ) t = y + node.t;\r
+                                       if( r < node.r + x ) r = x + node.r;\r
+                                       if( b < node.b + y ) b = y + node.b;\r
+                               };\r
+                       };\r
+                       // update\r
+                       if( b !== this.b || r !== this.r || t !== this.t || l !== this.l ){\r
+                               this.l = l;\r
+                               this.t = t;\r
+                               this.r = r;\r
+                               this.b = b;\r
+                               // this.w = r - x;\r
+                               // this.h = b - y;\r
+                               this.parentData && this.parentData.clip === false && this.parentData._updateRectangle();\r
+                               return true;\r
+                       };\r
+               },\r
+               setPosition : function( x, y ){\r
+                       this.update( x, y );\r
+               },\r
+               setSize : function( w, h ){\r
+                       this.update( undefined, undefined, w, h );\r
+               },\r
+               positionX : function( x ){\r
+                       x !== undefined && this.update( x );\r
+                       return this.x;\r
+               },\r
+               positionY : function( y ){\r
+                       y !== undefined && this.update( undefined, y );\r
+                       return this.y;\r
+               },\r
+               width : function( w ){\r
+                       w !== undefined && this.update( undefined, undefined, w );\r
+                       return this.w;\r
+               },\r
+               height : function( h ){\r
+                       h !== undefined && this.update( undefined, undefined, undefined, h );\r
+                       return this.h;\r
+               },\r
+               getAbsolutePositionX : function(){\r
+                       return this.absoluteX;\r
+               },\r
+               getAbsolutePositionY : function(){\r
+                       return this.absoluteY;\r
+               },\r
+               cursor : function( v ){\r
+                       if( Type.isString( v ) === true ){\r
+                               this._cursor = v;\r
+                               this === targetNodeData && this.apiuser.updateCoursor( v );\r
+                       };\r
+                       return this._cursor;\r
+               },\r
+               addEventListener : function( eventType, handler, opt_thisObject ){\r
+                       var node    = this.node,\r
+                               counter = this.rootData.eventCounter,\r
+                               list, i;\r
+                       if( this.events === null ) this.events = {};\r
+                       list = this.events[ eventType ];\r
+                       if( !list ){\r
+                               list = this.events[ eventType ] = [];\r
+                       } else {\r
+                               for( i = list.length; i; ){\r
+                                       if( list[ --i ].match( eventType, handler ) === true ){\r
+                                               return;\r
+                                       };\r
+                               };                              \r
+                       };\r
+                       list.push( new EventTicketClass( this.node, eventType, handler, opt_thisObject ) );\r
+                       if( eventType !== 'mouseout' && eventType !== 'mouseover' ){\r
+                               if( counter[ eventType ] ){\r
+                                       ++counter[ eventType ];\r
+                               } else {\r
+                                       //console.log( eventType );\r
+                                       counter[ eventType ] = 1;\r
+                                       MouseEvent.add( this.apiuser, this.rootData.elmMouseCatch, eventType, eventRellay );\r
+                               };                              \r
+                       };\r
+               },\r
+               removeEventListener : function( eventType, handler ){\r
+                       var events  = this.events,\r
+                               counter = this.rootData.eventCounter,\r
+                               type, list, i = 0;\r
+                       if( events === null ) return;\r
+                       console.log( ' *** remove ' + eventType );\r
+                       for( type in events ){\r
+                               list = events[ type ];\r
+                               if( eventType && eventType !== type ) continue;\r
+                               for( ; i < list.length; ){\r
+                                       if( list[ i ].destroy( type, handler ) === true ){\r
+                                               console.log( ' *** removed! ' + type );\r
+                                               list.splice( i, 1 );\r
+                                       } else {\r
+                                               ++i;\r
+                                       };\r
+                               };\r
+                               if( list.length === 0 ){\r
+                                       // delete this[ type ];\r
+                                       delete events[ type ];\r
+                               };\r
+                               if( counter[ type ] ){\r
+                                       --counter[ type ];\r
+                                       if( counter[ type ] === 0 ){\r
+                                               MouseEvent.remove( this.apiuser, this.rootData.elmMouseCatch, type, eventRellay );\r
+                                               delete counter[ type ];\r
+                                       };\r
+                               };\r
+                       };\r
+               },\r
+               _capcher : function( x, y ){\r
+                       var t = this, nodes, child, _x, _y, hit, i;\r
+                       if( t._disabled === true ) return false;\r
+                       delete t.hitChild;\r
+                       x -= t.x;\r
+                       y -= t.y;\r
+                       if( nodes = t.childData ){\r
+                               _x = x - t.scrollingX;\r
+                               _y = y - t.scrollingY;\r
+                               for( i = nodes.length; i; ){\r
+                                       child = nodes[ --i ];\r
+                                       if( child._disabled === false && child.l <= _x && _x < child.r && child.t <= _y && _y < child.b && child._capcher( _x, _y ) === true ){\r
+                                               t.hitChild = child;\r
+                                               break;\r
+                                       };\r
+                               };\r
+                       };\r
+                       if( t.through === true ){\r
+                               t.hitChild && t.hitSelf === false && hoverList.push( t );\r
+                               return !!t.hitChild;\r
+                       };\r
+                       hit = 0 <= x && x < t.w && 0 <= y && y < t.h;\r
+                       ( t.hitChild || hit ) && t.hitSelf === false && hoverList.push( t );\r
+                       if( hit === true && t.hitChild === null ) targetNodeData = t;\r
+                       return hit || !!t.hitChild;\r
+               },\r
+               fire : function( e, eventType, hit ){\r
+                       var list = this.events[ eventType ],\r
+                               i    = list.length;\r
+                       e = NodePrivateData.createEvent( e, eventType, this, hit );\r
+                       for( ; i; ) list[ --i ].fire( e );\r
+                       // console.log( eventType + ' x:' + x + ' y:' + y );\r
+               },\r
+               dispatchEvent : function( e, eventType, hit ){\r
+                       var ret, list, i, p, child;\r
+                       if( !this.events || !( list = this.events[ eventType ] ) ) return;\r
+                       \r
+                       child = !!this.hitChild;\r
+                       e = NodePrivateData.createEvent( e, eventType, this, hit );\r
+                       for( i = list.length; i; ){\r
+                               ret = list[ --i ].fire( e );\r
+                               if( ret === true && child === false ){\r
+                                       forceNodeData = this;\r
+                                       return true;\r
+                               };\r
+                               if( ret === false ) return false;\r
+                       };\r
+                       forceNodeData  = null;\r
+               },\r
+               scrollTo : function( x, y ){\r
+                       this._scrollX = x;\r
+                       this._scrollY = y;\r
+                       ScrollBarManager.update( this );\r
+               },\r
+               scrollX : function( v ){\r
+                       if( Type.isFinite( v ) === true ){\r
+                               this._scrillX = v;\r
+                               ScrollBarManager.update( this );\r
+                       };\r
+                       return this.scrollingX; // this._scrollX;\r
+               },\r
+               scrollY : function( v ){\r
+                       if( Type.isFinite( v ) === true ){\r
+                               this._scrillY = v;\r
+                               ScrollBarManager.update( this );\r
+                       };\r
+                       return this.scrollingY; // this._scrollY;\r
+               },\r
+               nodeIndex : function( v ){\r
+                       var list, i;\r
+                       if( !this.parentData ) return 0;\r
+                       \r
+                       list = this.parentData.childData;\r
+                       i    = Util.getIndex( list, this );\r
+                       if( Type.isFinite( v ) === false || i === v && v < 0 && list.length <= v ) return i;\r
+                       \r
+                       list.splice( i, 1 );\r
+                       list.length === v ? list.push( this ) : list.splice( v, 0, this );\r
+                       this._free();\r
+                       return v;\r
+               },\r
+               _free : function(){\r
+                       if( this.parentData.hitChild === this ){\r
+                               this.parentData.hitChild = null;\r
+                               this.isHover === true && hoverList.splice( Util.getIndex( hoverList, this ), 1 ) && Util.removeClass( this.elm, this.hoverClass );\r
+                               this.isHover = false;\r
+                               if( forceNodeData === this ) forceNodeData = null;\r
+                               if( targetNodeData  === this ) targetNodeData  = null;\r
+                       };                      \r
+               },\r
+               numNode : function(){\r
+                       return this.childData ? this.childData.length : 0;\r
+               },\r
+               disabled : function( v ){\r
+                       if( Type.isBoolean( v ) === true ){\r
+                               this._disabled = v;\r
+                               if( v === false ){\r
+                                       this._free();\r
+                               };\r
+                       };\r
+                       return this._disabled;\r
+               },\r
+               childrenDisabled : function( v ){\r
+                       if( Type.isBoolean( v ) === true ){\r
+                               this._childDisabled = v;\r
+                       };\r
+                       return this._childDisabled;\r
+               },\r
+               remove : function(){\r
+                       if( this === this.rootData ) return;\r
+                       var parent = this.parentData,\r
+                               nodes  = parent.childData;\r
+                       this._destroy();\r
+                       if( parent.hitChild === this ) delete parent.hitChild;\r
+                       nodes.splice( Util.getIndex( nodes, this ), 1 );\r
+                       if( nodes.length === 0 ) delete parent.childData;       \r
+                       parent.clip === false && parent._updateRectangle();\r
+               },\r
+               _destroy : function(){\r
+                       var nodes = this.childData,\r
+                               list  = NodePrivateData.dataList,\r
+                               node;\r
+                       this.removeEventListener();\r
+                       ScrollBarManager.remove( this );\r
+                       if( nodes ){\r
+                               while( node = nodes.shift() ) node._destroy();\r
+                               delete this.childData;\r
+                       };\r
+                       list.splice( Util.getIndex( list, this ), 1 );\r
+               }\r
+       };\r
+       NodePrivateData.dataList = [];\r
+       NodePrivateData.get = function( node ){\r
+               // if( node instanceof NodePrivateData ) return node;\r
+               // return NodePrivateData.dataList[ layer._getUID() ];\r
+               var list = NodePrivateData.dataList;\r
+               for( var i = list.length; i; ){\r
+                       if( list[ --i ].node === node ) return list[ i ];\r
+               };\r
+               return null;\r
+       };\r
+       NodePrivateData.createEvent = function( e, eventType, data, hit ){\r
+               var _e = {\r
+                       layerX      : e.clientX - data.absoluteX,\r
+                       layerY      : e.clientY - data.absoluteY,\r
+                       clientX     : e.clientX,\r
+                       clientY     : e.clientY,\r
+                       dragOffsetX : e.dragOffsetX,\r
+                       dragOffsetY : e.dragOffsetY,\r
+                       dragPhase   : e.dragPhase,                                      \r
+                       eventType   : eventType,\r
+                       hit         : hit,\r
+                       node        : data.node,\r
+                       wheelDelta  : e.wheelDelta,\r
+                       target      : forceNodeData ? forceNodeData.node : targetNodeData ? targetNodeData.node : null\r
+               };\r
+               return _e;\r
+       };\r
+       \r
+       var EventTicketClass = function( node, eventType, handler, opt_thisObject ){\r
+               this.node    = node;\r
+               this.type    = eventType;\r
+               this.handler = handler;\r
+               this.thisObj = opt_thisObject || node;\r
+       };\r
+       EventTicketClass.prototype = {\r
+               match : function( eventType, handler ){\r
+                       if( handler && this.handler !== handler ) return false;\r
+                       if( eventType && this.type !== eventType ) return false;\r
+                       return true;\r
+               },\r
+               destroy : function( eventType, handler ){\r
+                       if( this.match( eventType, handler ) === false ) return false;\r
+                       delete this.node;\r
+                       delete this.type;\r
+                       delete this.handler;\r
+                       delete this.thisObj;\r
+                       return true;\r
+               },\r
+               fire : ( function(){\r
+                       if( Function.prototype.call ){\r
+                               return function( e ){\r
+                                       return this.handler.call( this.thisObj, e );\r
+                               };                              \r
+                       };\r
+                       return function( e ){\r
+                               var ret;\r
+                               this.thisObj._currentHandler = this.handler;\r
+                               ret = this.thisObj._currentHandler( e );\r
+                               delete this.thisObj._currentHandler;\r
+                               return ret;                                     \r
+                       };\r
+               })()\r
        };\r
-       this.open = function( _w, _h /*, _option */ ){\r
-               phase = 3;\r
-               bootParams = Util.copyArray( arguments );\r
-               \r
-               if( this.rootElement.innerHTML && this.rootElement.innerHTML.length > 0 ){\r
-                       SystemTimer.add( self, detect, 16 );\r
-               } else {\r
-                       onOpen();\r
+       \r
+/*-------------------------------------\r
+ *  StayHelper\r
+ */\r
+       var StayEventTicketClass = function( node, data, stayhandler, opt_thisObject ){\r
+               node.addEventListener( 'mouseover', this.mouseoverHandler, this );\r
+               this.node       = node;\r
+               this.data       = data;\r
+               this.handler    = stayhandler;\r
+               this.thisObject = opt_thisObject;\r
+       };\r
+       StayEventTicketClass.prototype = Util.extend( new EventTicketClass( null, 'mousestay' ), {\r
+               // type : 'mousestay',\r
+               e    : null,\r
+               mouseoverHandler : function( e ){\r
+                       this.e = NodePrivateData.createEvent( e, this.type, this.data, true );\r
+                       this.node.addEventListener( 'mouseout',  this.mousestayHandler, this );\r
+                       this.node.addEventListener( 'mousemove', this.mousemoveHandler, this );\r
+                       SystemTimer.add( this.data.apiuser, this.timeoutHandler, null, this );\r
+               },\r
+               timeoutHandler : function(){\r
+                       this.mouseoutHandler();\r
+                       return this.fire( this.e );\r
+               },\r
+               mousemoveHandler : function( e ){\r
+                       this.e = NodePrivateData.createEvent( e, this.type, this.data, true );\r
+                       SystemTimer.remove( this.data.apiuser, this.timeoutHandler );\r
+                       SystemTimer.add( this.data.apiuser, this.timeoutHandler, null, this );\r
+               },\r
+               mouseoutHandler : function( e ){\r
+                       this.node.removeEventListener( 'mouseout', this.mousestayHandler );\r
+                       this.node.removeEventListener( 'mousemove', this.mousemoveHandler );\r
+                       SystemTimer.remove( this.data.apiuser, this.timeoutHandler );\r
+                       delete this.e;\r
                }\r
+       });\r
+       \r
+       var ScrollBarManager = ( function(){\r
+               var elmScroller     = document.createElement( 'div' ),\r
+                       elmBar          = document.createElement( 'div' ),\r
+                       smoothList      = [],\r
+                       dragPhase       = 2,\r
+                       dragOut         = false,\r
+                       currentNodeData = null,\r
+                       dragStartY      = 0,\r
+                       currentEvent;\r
                \r
-               function detect(){\r
-                       if( self.rootElement.firstChild && fetchResource === 0 ){\r
-                               SystemTimer.remove( self, detect );\r
-                               onOpen();\r
+               function tick(){\r
+                       var list = smoothList,\r
+                               i, data, y;\r
+                       for( i = 0; i < list.length; ){\r
+                               data = list[ i ];\r
+                               if( data.scrollingY !== data._scrollY ){\r
+                                       y = data.scrollingY += data.smoothY;\r
+                                       if( data.smoothY < 0 ){\r
+                                               y = y < data._scrollY ? data._scrollY : y;\r
+                                       } else {\r
+                                               y = data._scrollY < y ? data._scrollY : y;\r
+                                       };\r
+                                       data.scrollingY    = y;\r
+                                       data.elm.scrollTop = -y;\r
+                                       data.events && data.events.scroll && data.fire( currentEvent, 'scroll', true );\r
+                               };\r
+                               if( data.scrollingY === data._scrollY ){\r
+                                       list.splice( i, 1 );\r
+                                       // data.events && data.events.scroll && data.fire( currentEvent, 'scroll', true );\r
+                               } else {\r
+                                       ++i;\r
+                               };\r
                        };\r
+                       list.length === 0 && SystemTimer.remove( SUPER_USER_KEY, tick );\r
+                       currentEvent.type = 'updateAfterScroll';\r
+                       AsyncCall.add( data.apiuser, eventRellay, currentEvent ); // スクロール後の更新        \r
                };\r
                \r
-               function onOpen(){\r
-                       self.rootElement.style.display = '';\r
+               function scrollReady( e ){\r
+                       var data = this;\r
                        \r
-                       if( self.MIN_WIDTH > _w || self.MIN_HEIGHT > _h ){\r
-                               if( Type.isHTMLElement( self.rootElement ) === true ){\r
-                                       // 小さすぎる!、と表示\r
-                               }\r
-                       }\r
-                       if( bootParams.length > 2 ){\r
-                               self.onOpen.apply( self, bootParams );\r
-                       } else {\r
-                               self.onOpen( _w, _h );\r
-                       }\r
-                       phase = 4;                      \r
+                       dragOut = false;\r
+                       if( data === currentNodeData || dragPhase !== 2 ) return; // Drag中の場合は 他にスクロールを作らない\r
+                       currentNodeData && scrollRelease();\r
+\r
+                       dragPhase = 2;\r
+                       data.elm.parentNode.appendChild( elmScroller );\r
+                       elmScroller.appendChild( data.elm );\r
+                       \r
+                       elmScroller.style.cssText = 'position:absolute;left:0;top:0;';\r
+                       elmScroller.appendChild( elmBar );      \r
+                       \r
+                       data.elm.scrollTop = -data.scrollingY;\r
+                       data.rootData.addEventListener( 'mousewheel', onMouseWheelScroll, data );\r
+                       data.rootData.addEventListener( 'mousedrag',  onMouseDragScroll, data );\r
+                       data.addEventListener( 'mouseout',   onMouseOut, data );\r
+                       currentNodeData = data;\r
+                       ScrollBarManager.update( data );\r
+               };\r
+               function scrollRelease(){\r
+                       var data   = currentNodeData;\r
+                       var parent = elmScroller.parentNode;\r
+                       parent.appendChild( currentNodeData.elm );\r
+                       parent.removeChild( elmScroller );\r
+                       currentNodeData.elm.scrollTop = -data.scrollingY;\r
+                       \r
+                       data.rootData.removeEventListener( 'mousewheel', onMouseWheelScroll, data );\r
+                       data.rootData.removeEventListener( 'mousedrag',  onMouseDragScroll, data );\r
+                       data.removeEventListener( 'mouseout',   onMouseOut, data );\r
+                       currentNodeData = null;\r
+               };\r
+               function onMouseOut( e ){\r
+                       dragOut = true;\r
+                       console.log( 'mouseOut ' + dragPhase );\r
+                       dragPhase === 2 && scrollRelease(); // Dragしてのアウトの場合, scroll をリリースしない\r
+               };\r
+               function onMouseWheelScroll( e ){\r
+                       var data = this;\r
+                       this._scrollY += e.wheelDelta;\r
+                       ScrollBarManager.update( this );\r
+                       currentEvent = e;\r
+                       return true;\r
                };\r
-       };\r
-       this.resize = function( _w, _h ){\r
-               if( phase !== 4 ) return;\r
-               if( self.MIN_WIDTH > _w || self.MIN_HEIGHT > _h ){\r
-                       if( Type.isHTMLElement( self.rootElement ) === true ){\r
-                               // 小さすぎる!、と表示\r
+               function onMouseDragScroll( e ){\r
+                       var data = this;\r
+                       //e.dragOffsetY;\r
+                       currentEvent = e;\r
+                       dragPhase = e.dragPhase;\r
+                       switch( dragPhase ){\r
+                               case 0:\r
+                                       dragStartY = this.scrollingY;\r
+                                       data.rootData.removeEventListener( 'mousewheel', onMouseWheelScroll, data );\r
+                               case 1:\r
+                                       this._scrollY = dragStartY + e.dragOffsetY;\r
+                                       ScrollBarManager.update( this );                                \r
+                                       return true;\r
+                               case 2:\r
+                                       dragOut === true ? scrollRelease() : data.rootData.addEventListener( 'mousewheel', onMouseWheelScroll, data );\r
+                                       return false;\r
                        };\r
-                       return;\r
-               };\r
-               self.onPaneResize( _w, _h );\r
-       };\r
-       this.close = function(){\r
-               phase = 5;\r
-               if( self.onClose() === false ){\r
-                       return false;\r
-               };\r
-               MouseEvent.remove( self );\r
-               KeyEvent.remove( self );\r
-               SystemTimer.remove( self );\r
-               AsyncCall.remove( self );\r
-               Css.unload( self );\r
-               \r
-               while( uiList.length > 0 ){\r
-                       uiList.shift().destroy();\r
                };\r
-               while( finderList.length > 0 ){\r
-                       finderList.shift().destroy();\r
-               };\r
-               var elm = self.rootElement;\r
-               Util.removeAllChildren( elm );\r
-               elm.parentNode.removeChild( elm );\r
-               self.rootElement = null;\r
-               \r
-               Application.shutdown( self, isOverlay );\r
                \r
-               appClass === Page.appClass && Page.hide();\r
-               \r
-               self = appClass = uiList = null;\r
-               \r
-               phase = 6;\r
-       };\r
-       this.createUIGroup = function(){\r
-               var _ui = UI.createUIGroup( self );\r
-               uiList.push( _ui );\r
-               return _ui;\r
-       };\r
-       this.createFinder = function( _elmTarget, _tree, _header, _footer, _onSelect, _viewerOption, _editorOption ){\r
-               var _finder = Finder.create( self, _elmTarget, _tree, _header, _footer, _onSelect, _viewerOption, _editorOption );\r
-               finderList.push( _finder );\r
-               return _finder;\r
-       };\r
-       this.createBasicPane = function( _class, _options ){\r
-               if( Type.isFunction( _class ) === false ) return null;\r
-               _class.prototype = new AbstractBasicPane();\r
-               return new _class( _options );\r
-       };\r
-       this.createDHTML = function( _elm ){\r
-               return DHTML.create( self, _elm );\r
-       };\r
-       this.fetchCSS = function( _url, opt_onload, opt_onerror ){\r
-               if( phase === 1 ){\r
-                       ++fetchResource;\r
-                       Css.load( self, _url, fetchResourceComplete, fetchResourceComplete );\r
+               return {\r
+                       register : function( data ){\r
+                               data.addEventListener( 'mouseover', scrollReady, data );\r
+                       },\r
+                       update : function( data ){\r
+                               // if( data !== currentNodeData ) return;\r
+                               var isCurrent = data === currentNodeData;\r
+                               \r
+                               var contentH = data._scrollH = data.elm.scrollHeight,\r
+                                       clipH    = data.h,\r
+                                       offsetH  = contentH - clipH,\r
+                                       scrollY  = data._scrollY = 0 < data._scrollY ? 0 : ( data._scrollY < -offsetH ? -offsetH : data._scrollY ),\r
+                                       barH, barY;\r
+                               if( isCurrent === true ){\r
+                                       elmScroller.style.width  = data.w + 'px';\r
+                                       elmScroller.style.height = clipH + 'px';                                        \r
+                               };\r
+                               \r
+                               if( offsetH < 1 ){\r
+                                       data._scrollY = scrollY = 0;\r
+                                       if( isCurrent === true ) elmBar.style.display = 'none';\r
+                               } else\r
+                               if( isCurrent === true ){\r
+                                       barH     = Math.floor( clipH * ( clipH / contentH ) );\r
+                                       barY     = Math.floor( ( clipH - barH ) * - scrollY / offsetH );\r
+                                       elmBar.style.cssText = [\r
+                                               'position:absolute;',\r
+                                               'width:10px;',\r
+                                               'background-color:#333;',\r
+                                               'right:2px;',\r
+                                               'font-size:0;line-height:0;',\r
+                                               'height:', barH, 'px;',\r
+                                               'top:', data.y + barY, 'px;'\r
+                                       ].join( '' );                                   \r
+                               };\r
+                               data.smoothY = ( scrollY - data.scrollingY ) / 10;\r
+                               if( data.scrollingY !== scrollY && Util.getIndex( smoothList, data ) === -1 ){\r
+                                       smoothList.length === 0 && SystemTimer.add( SUPER_USER_KEY, tick, 16 );\r
+                                       smoothList.push( data );\r
+                               };\r
+                       },\r
+                       remove : function( data ){\r
+                               var list = smoothList,\r
+                                       i    = Util.getIndex( list, data );\r
+                               data === currentNodeData && scrollRelease();\r
+                               i !== -1 && list.splice( i, 1 );\r
+                       }\r
                };\r
-       };\r
+       })();\r
        \r
-       function fetchResourceComplete(){\r
-               --fetchResource;\r
-       };\r
-};\r
-\r
-AbstractApplication.prototype = new AbstractBasicPane();\r
-AbstractApplication.prototype.onInit = function(){\r
-       // overrride\r
-};     \r
-AbstractApplication.prototype.onOpen = function( _w, _h /*, _option */ ){\r
-       // overrride\r
-};\r
-AbstractApplication.prototype.onClose = function(){\r
-       // overrride\r
-       return true;\r
-}; // false の場合、close の拒否 \r
-AbstractApplication.prototype.addMouseEventListener = function( _element, _eventType, _handler ){\r
-       MouseEvent.add( this, _element, _eventType, _handler );\r
-};\r
-AbstractApplication.prototype.removeMouseEventListener = function( _element, _eventType, _handler ){\r
-       MouseEvent.remove( this, _element, _eventType, _handler );\r
-};\r
-AbstractApplication.prototype.addKeyEventListener = function( _eventType, _handler, _keyCode, _shift, _ctrl ){\r
-       KeyEvent.add( this, _eventType, _handler, _keyCode, _shift, _ctrl );\r
-};\r
-AbstractApplication.prototype.removeKeyEventListener = function( _eventType, _handler, _keyCode, _shift, _ctrl ){\r
-       KeyEvent.remove( this, _eventType, _handler, _keyCode, _shift, _ctrl );\r
-};\r
-AbstractApplication.prototype.shiftEnabled = function(){\r
-       return KeyEvent.shiftEnabled;\r
-};\r
-AbstractApplication.prototype.ctrlEnabled = function(){\r
-       return KeyEvent.ctrlEnabled;\r
-};\r
-AbstractApplication.prototype.addTimer = function( handler, time, once ){\r
-       SystemTimer.add( this, handler, time, !!once );\r
-};\r
-AbstractApplication.prototype.removeTimer = function( handler ){\r
-       SystemTimer.remove( this, handler );\r
-};\r
-AbstractApplication.prototype.addAsyncCall = function( _callback, _argments ){\r
-       AsyncCall.add( this, _callback, _argments );\r
-};\r
-AbstractApplication.prototype.removeAsyncCall = function( _callback ){\r
-       AsyncCall.remove( this, _callback );\r
-};\r
-AbstractApplication.prototype.fetchHTMLElement = function( id ){\r
-       var elm = doc.getElementById( id );\r
-       if( elm ){\r
-               elm.removeAttribute( 'id' );\r
-               elm.parentNode.removeChild( elm );\r
-               return elm;\r
+       return {\r
+               create : function( apiuser ){\r
+                       var     elm  = document.createElement( 'div' ),\r
+                               root, data;\r
+                       body.appendChild( elm );\r
+                       \r
+                       root = new NodeClass( apiuser, null, null, elm );\r
+                       data = NodePrivateData.get( root );\r
+                       \r
+                       // elm.style.cssText = 'position:absolute;top:0;left:0;height:100%;';\r
+                       elm.className      = 'mouse-operation-catcher';\r
+                       elm.unselectable   = 'on';\r
+                       data.elmMouseCatch = elm;\r
+                       \r
+                       data.eventCounter  = {};\r
+                       ROOT_LIST.push( data );\r
+                       currentRootData    = data;\r
+                       targetNodeData     = null;\r
+                       forceNodeData      = null;\r
+                       \r
+                       MouseEvent.add( apiuser, elm, 'mousemove', eventRellay );\r
+                       return root;\r
+               },\r
+               onCurrentApplicationChange : function( _application ){\r
+                       currentRootData    = null;\r
+                       targetNodeData     = null;\r
+                       forceNodeData      = null;\r
+                       for( var i = ROOT_LIST.length; i; ){\r
+                               if( ROOT_LIST[ --i ].apiuser === _application ){\r
+                                       currentRootData = ROOT_LIST[ i ];\r
+                                       return;\r
+                               };\r
+                       };\r
+               },\r
+               destroyTree : function( root ){\r
+                       var data = NodePrivateData.get( root );\r
+                       MouseEvent.remove( data.apiuser, data.elmMouseCatch, 'mousemove', eventRellay );\r
+                       body.removeChild( data.elmMouseCatch );\r
+                       data._destroy();\r
+                       ROOT_LIST.splice( Util.getIndex( ROOT_LIST, data ), 1 );\r
+                       if( currentRootData === data ){\r
+                               currentRootData    = null;\r
+                               targetNodeData     = null;\r
+                               forceNodeData      = null;      \r
+                       };\r
+               },\r
+               onSystemShutdown : function(){\r
+                       \r
+               },\r
+               isNodeInstance : function( node ){\r
+                       return node instanceof NodeClass;\r
+               },\r
+               _getNodePrivateData : function( node ){ // system only\r
+                       return NodePrivateData.get( node );\r
+               }\r
        };\r
-};\r
+})();\r
 \r
 var Application = ( function(){\r
        \r
@@ -2707,17 +2589,23 @@ var Application = ( function(){
                this.displayName  = displayName;\r
                this.thumbnailUrl = thumbnailUrl;\r
                this.tailColor    = tailColor;\r
+               \r
+               function asyncBoot(){\r
+                       application = Application.boot( appClass, displayName, self.getUID(), isOverlay, Util.copyArray( arguments ) );\r
+               };\r
                this.getUID = function(){\r
                        return Util.getIndex( API_USER_LIST, appClass );\r
                };\r
+               this.getDisplayName = function(){\r
+                       return this.displayName;\r
+               };\r
                this.boot = function( /* _option */ ){\r
-                       application = Application.boot( displayName, self.getUID(), appClass, isOverlay, Util.copyArray( arguments ) );\r
+                       AsyncCall.add( this, asyncBoot, Util.copyArray( arguments ) );\r
                };\r
                this.shutdown = function(){\r
                        if( !application ) return false;\r
                        \r
-                       if( ( isOverlay === true ? Overlay.hide() : application.close() ) === false ) return false;\r
-                       application = null;\r
+                       AsyncCall.add( application, ( isOverlay === true ? Overlay.hide : application.close ) );\r
                };\r
        };\r
        \r
@@ -2737,26 +2625,28 @@ var Application = ( function(){
                        _tail === true && Home.add( _ref );\r
                        return _ref;\r
                },\r
-               isBasicPaneInstance: function( _basicPane ){\r
-                       return  _basicPane instanceof AbstractBasicPane;\r
-               },\r
-               isApplicationInstance: function( _application ){\r
-                       return _application instanceof AbstractApplication;\r
+               isApplicationInstance: function( app ){\r
+                       return ApplicationPrivateData.get( app ) !== null;\r
                },\r
                isApplicationReference: function( _reference ){\r
                        return _reference instanceof ApplicationReference;\r
                },\r
-               isCurrentAppplication: function( _application ){\r
-                       return true\r
+               isCurrentAppplication: function( app ){\r
+                       return app === currentApplication;\r
                },\r
-               boot: function( displayName, uid, appClass, isOverlay, arg ){\r
+               boot: function( appClass, displayName, uid, isOverlay, arg ){\r
                        if( currentApplication ){\r
                                if( currentApplication.getUID() === uid ) return null;\r
                                if( isOverlay === false && currentApplication.close() === false ) return null;\r
                        };\r
 \r
-                       appClass.prototype = new AbstractApplication( displayName, appClass, isOverlay );\r
-                       var application = new appClass(); // new は boot で\r
+                       appClass.prototype = new AbstractApplication( appClass, displayName, isOverlay );\r
+                       \r
+                       var application = new appClass(),\r
+                               data = ApplicationPrivateData.get( application );\r
+                       \r
+                       application.rootElement = data.rootElement;\r
+                       data.application = application;\r
                        \r
                        coveredApplication = isOverlay === true ? currentApplication : null;\r
                        \r
@@ -2765,14 +2655,14 @@ var Application = ( function(){
                        if( isOverlay === false ){\r
                                body.style.backgroundColor = application.bgColor;\r
                                \r
-                               body.appendChild( application.rootElement );\r
-                               application.rootElement.style.display = 'none';\r
+                               body.appendChild( data.rootElement );\r
+                               data.rootElement.style.display = 'none';\r
                                application.init();\r
 \r
                                application.addAsyncCall( asyncOpen, arg );\r
                        } else {\r
                                Overlay.show( application, arg );\r
-                       }\r
+                       };\r
                        \r
                        return application;\r
                },\r
@@ -2783,14 +2673,16 @@ var Application = ( function(){
                        } else {\r
                                Application.onCurrentApplicationChange( coveredApplication );\r
                                coveredApplication = null;\r
-                       }\r
+                       };\r
                },\r
                onCurrentApplicationChange: function( _application ){\r
                        if( Application.isApplicationInstance( _application ) === false ) return;\r
                        if( currentApplication === _application ) return;\r
                        currentApplication = _application;\r
                        MouseEvent.onCurrentApplicationChange( _application );\r
+                       PointingDeviceEventTree.onCurrentApplicationChange( _application );\r
                        KeyEvent.updateCurrentListener( _application );\r
+                       // InteractiveLayer.onCurrentApplicationChange( _application );\r
                },\r
                onApplicationShutdown: function( _application ){\r
                        LIVE_APPLICATION_LIST.splice( Util.getIndex(  LIVE_APPLICATION_LIST, _application ) );\r
@@ -2850,7 +2742,7 @@ var Application = ( function(){
                                        tailList.push( tail );\r
                                        elm  = tail.elm;\r
                                        elmContainer.appendChild( elm );\r
-                                       self.addMouseEventListener( elm, 'click', onTailClick );\r
+                                       self.addEventListener( elm, 'click', onTailClick );\r
                                };\r
                        };\r
                        \r
@@ -2887,7 +2779,7 @@ var Application = ( function(){
                                \r
                        };\r
                        this.onClose = function(){\r
-                               self.removeMouseEventListener();\r
+                               self.removeEventListener();\r
                                while( tailList.length > 0 ){\r
                                        tailList.shift().destroy();\r
                                }\r
@@ -2973,7 +2865,7 @@ var Application = ( function(){
                                if( pageNodes.length !== 0 ){\r
                                        if( Type.isFunction( gOS.PageApplicationClass ) === true ){\r
                                                Page.appClass = gOS.PageApplicationClass;\r
-                                               Page.appClass.bgColor    = Page.appClass.bgColor    || '#ffffff';\r
+                                               Page.appClass.bgColor    = Page.appClass.bgColor;\r
                                                Page.appClass.MIN_WIDTH  = Page.appClass.MIN_WIDTH  || 240;\r
                                                Page.appClass.MIN_HEIGHT = Page.appClass.MIN_HEIGHT || 240;\r
                                        } else {\r
@@ -2992,6 +2884,9 @@ var Application = ( function(){
                                                };\r
                                        };\r
                                        ref = Application.register( Page.appClass, false, true, document.title, 'page', null, Page.appClass.tailColor || '#999999' );\r
+                                       if( Type.isFunction( gOS.PageApplicationClass ) === true ){\r
+                                               gOS.PageApplicationRef = ref;\r
+                                       }; \r
                                };\r
                                delete Page.onReady;\r
                        },\r
@@ -3032,15 +2927,15 @@ var Application = ( function(){
                        tmp;\r
                \r
                if( window.addEventListener ){\r
-                       wrappedHandlerClass = function( element, handler ){\r
+                       wrappedHandlerClass = function( ticket ){\r
                                this.handler = function( e ){\r
-                                       if( handler.call( element, e ) !== false ) return;\r
+                                       if( ticket.fire( e ) !== false ) return;\r
                                        e.preventDefault();\r
                                        e.stopPropagation();\r
                                        return false;\r
                                };\r
                                this.destroy = function(){\r
-                                       element = handler = null;\r
+                                       ticket = null;\r
                                        delete this.handler;\r
                                        delete this.destroy;\r
                                };\r
@@ -3065,8 +2960,6 @@ var Application = ( function(){
                                this.shiftKey      = e.shiftKey;\r
                                \r
                                this.wheelDelta    = e.wheelDelta;\r
-                               \r
-                               e = element = null;\r
                        };\r
                        wrappedEventClass.prototype.stopPropagation = function(){\r
                                this._event.cancelBubble = true;\r
@@ -3075,17 +2968,19 @@ var Application = ( function(){
                                this._event.returnValue = false;\r
                        };\r
 \r
-                       if( doc.attachEvent ){\r
-                               wrappedHandlerClass = function( element, handler ){\r
+                       if( document.attachEvent ){\r
+                               wrappedHandlerClass = function( ticket ){\r
                                        this.handler = function(){\r
-                                               var e = new wrappedEventClass( window.event, element );\r
-                                               if( handler.call( element, e ) !== false ) return;\r
-                                               e.preventDefault();\r
-                                               e.stopPropagation();\r
+                                               if( ticket === null ) alert( window.event.type )\r
+                                               if( ticket.fire( new wrappedEventClass( window.event, ticket.element ) ) !== false ) return;\r
+                                               // e.preventDefault();\r
+                                               // e.stopPropagation();\r
+                                               window.event.cancelBubble = true;\r
+                                               window.event.returnValue  = false;\r
                                                return false;\r
                                        };\r
                                        this.destroy = function(){\r
-                                               element = handler = null;\r
+                                               ticket = null;\r
                                                delete this.handler;\r
                                                delete this.destroy;\r
                                        };\r
@@ -3096,62 +2991,49 @@ var Application = ( function(){
                                        find: function( _ticket ){\r
                                                for( var i=0, l= tmp.list.length, _item; i<l; ++i ){\r
                                                        _item = tmp.list[ i ];\r
-                                                       if( _item.match( _ticket.element, _ticket.eventType ) === true ){\r
+                                                       if( _item.element === _ticket.element && _item.eventType === _ticket.eventType ){\r
                                                                return _item;\r
                                                        };\r
                                                };\r
                                                return null;\r
                                        }\r
                                };\r
-                               tmp.ticketClass = function( _ticket ){\r
+                               tmp.TicketClass = function( _ticket ){\r
                                        var self = this;\r
                                        this.element   = _ticket.element;\r
                                        this.eventType = _ticket.eventType;\r
-                                       this.handlers  = [ _ticket.handler ];\r
-                                       this.element[ 'on' + this.eventType ] = function( e ){\r
-                                               return self.fire( self, e );\r
-                                       };\r
-                                       this.clean = function(){\r
-                                               self = null;\r
-                                       };\r
+                                       this.tickets   = [ _ticket ];\r
+                                       this.onDestroy = function(){ self = null; };\r
+                                       \r
+                                       this.element[ 'on' + this.eventType ] = function( e ){ return self.fire( e );};\r
                                        _ticket = null;\r
                                };\r
-                               tmp.ticketClass.prototype = {\r
+                               tmp.TicketClass.prototype = {\r
                                        add: function( _ticket ){\r
-                                               this.match( _ticket.element, _ticket.eventType ) === true && \r
-                                                       this.match( null, null, _ticket.handler ) === false &&\r
-                                                               this.handlers.push( _ticket.handler );\r
+                                               Util.getIndex( this.tickets, ticket ) === -1 && this.tickets.push( _ticket );\r
                                        },\r
                                        remove: function( _ticket ){\r
-                                               if( this.match( _ticket.element, _ticket.eventType, _ticket.handler ) === true ){\r
-                                                       var i = Util.getIndex( this.handlers, handler );\r
-                                                       i !== 0 && this.handlers.splice( i, 1 );\r
-                                                       this.handlers.length === 0 && this.destroy();\r
-                                               }\r
+                                               var i = Util.getIndex( this.tickets, _ticket );\r
+                                               i !== -1 && this.tickets.splice( i, 1 );\r
+                                               this.tickets.length === 0 && this.destroy();\r
                                        },\r
-                                       fire: function( self, e ){\r
-                                               e = e || new wrappedEventClass( window.event, self.element );\r
-                                               for( var i=self.handlers.length, cancel; i; ){\r
-                                                       self.element._currentHandler = self.handlers[ --i ];\r
-                                                       if( self.element._currentHandler( e ) === false ) cancel = false;\r
-                                                       delete self.element._currentHandler;\r
+                                       fire: function( e ){\r
+                                               e = e || new wrappedEventClass( window.event, this.element );\r
+                                               var i = this.tickets.length,\r
+                                                       cancel;\r
+                                               for( ; i; ){\r
+                                                       if( this.tickets[ --i ].fire( e ) === false ) cancel = false;\r
                                                };\r
                                                return cancel;\r
                                        },\r
-                                       match: function( element, eventType, handler ){\r
-                                               if( handler && Util.getIndex( this.handlers, handler ) === -1 ) return false;\r
-                                               if( eventType && this.eventType !== eventType ) return false;\r
-                                               if( element && this.element !== element ) return false;\r
-                                               return true;\r
-                                       },\r
                                        destroy: function(){\r
-                                               this.clean();\r
+                                               this.onDestroy();\r
                                                this.element[ 'on' + this.eventType ] = '';\r
                                                tmp.list.splice( Util.getIndex( tmp.list, this ), 1 );\r
                                                delete this.element;\r
                                                delete this.eventType;\r
-                                               delete this.handlers;\r
-                                               delete this.clean;\r
+                                               delete this.tickets;\r
+                                               delete this.onDestroy;\r
                                        }\r
                                };\r
                        };\r
@@ -3159,15 +3041,15 @@ var Application = ( function(){
 \r
                return {\r
                        add: function( _ticket ){\r
-                               if( doc.addEventListener ){\r
+                               if( document.addEventListener ){\r
                                        XBrowserEvent.add = function( _ticket ){\r
-                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket.element, _ticket.handler );\r
+                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket );\r
                                                _ticket.element.addEventListener( _ticket.eventType, _ticket.wrappedHandler.handler, false );\r
-                                       }\r
+                                       };\r
                                } else\r
-                               if( doc.attachEvent ){\r
+                               if( document.attachEvent ){\r
                                        XBrowserEvent.add = function( _ticket ){\r
-                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket.element, _ticket.handler );\r
+                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket );\r
                                                _ticket.element.attachEvent( 'on' + _ticket.eventType, _ticket.wrappedHandler.handler );\r
                                        };\r
                                } else {\r
@@ -3176,21 +3058,21 @@ var Application = ( function(){
                                                if( t !== null ){\r
                                                        t.add( _ticket );\r
                                                } else {\r
-                                                       tmp.list.push( new tmp.ticketClass( _ticket ) );\r
+                                                       tmp.list.push( new tmp.TicketClass( _ticket ) );\r
                                                };\r
                                        };\r
-                               }\r
+                               };\r
                                \r
                                XBrowserEvent.add( _ticket );\r
                        },\r
                        remove: function( _ticket ){\r
-                               if( doc.removeEventListener ){\r
+                               if( document.removeEventListener ){\r
                                        XBrowserEvent.remove = function( _ticket ){\r
                                                _ticket.element.removeEventListener( _ticket.eventType, _ticket.wrappedHandler.handler, false );\r
                                                _ticket.wrappedHandler.destroy();\r
                                        };\r
                                } else\r
-                               if( doc.detachEvent ){\r
+                               if( document.detachEvent ){\r
                                        XBrowserEvent.remove = function( _ticket ){\r
                                                _ticket.element.detachEvent( 'on' + _ticket.eventType, _ticket.wrappedHandler.handler );\r
                                                _ticket.wrappedHandler.destroy();\r
@@ -3212,17 +3094,30 @@ var Application = ( function(){
 /*\r
  * EventTicketClass\r
  */\r
-       var EventTicketClass = function( _element, _eventType, _handler ){\r
+       var EventTicketClass = function( _element, _eventType, _handler, opt_thisObject ){\r
                this.element        = _element;\r
                this.eventType      = _eventType;\r
                this.handler        = _handler;\r
-               this.wrappedHandler = null; // for ie\r
-               \r
+               this.wrappedHandler = null;\r
+               this.thisObject     = opt_thisObject;\r
                XBrowserEvent.add( this );\r
-               \r
-               _element = _eventType = _handler = null;\r
        };\r
        EventTicketClass.prototype = {\r
+               fire : ( function(){\r
+                       if( Function.prototype.call ){\r
+                               return function( e ){\r
+                                       return this.handler.call( this.thisObject || this.element, e );\r
+                               };                              \r
+                       };\r
+                       return function( e ){\r
+                               var thisObj = this.thisObject || this.element,\r
+                                       ret;\r
+                               thisObj._currentHandler = this.handler;\r
+                               ret = thisObj._currentHandler( e );\r
+                               delete thisObj._currentHandler;\r
+                               return ret;                                     \r
+                       };\r
+               })(),\r
                match: function( _element, _eventType, _handler ){\r
                        if( _handler   && _handler   !== this.handler )   return false;\r
                        if( _eventType && _eventType !== this.eventType ) return false;\r
@@ -3239,14 +3134,15 @@ var Application = ( function(){
                        delete this.eventType;\r
                        delete this.handler;\r
                        delete this.wrappedHandler;\r
-                       \r
+                       delete this.thisObject;\r
                        return true;\r
                }\r
        };\r
 \r
 var ReadyEvent = ( function(){\r
        var ticketReady,\r
-               ticketLoad;\r
+               ticketLoad,\r
+        timer;\r
 \r
        function webkitDetect(){\r
                var state = document.readyState;\r
@@ -3290,7 +3186,7 @@ var ReadyEvent = ( function(){
        };\r
        \r
        // Apple WebKit (Safari, OmniWeb, ...)\r
-       if( doc.readyState && !!UA.WEBKIT ){\r
+       if( document.readyState && !!UA.WEBKIT ){\r
                SystemTimer.add( SUPER_USER_KEY, webkitDetect, 50 );\r
        /* } else\r
                if( document.readyState && UA.isIE && UA.ieVersion < 9 ){\r
@@ -3328,7 +3224,7 @@ var ResizeEvent = ( function(){
        \r
        if( document.uniqueID ){\r
                _resize = function(){\r
-                       root = (doc.compatMode || "") !== "CSS1Compat" ? doc.body : doc.documentElement;\r
+                       root = (document.compatMode || "") !== "CSS1Compat" ? document.body : document.documentElement;\r
 \r
                        // resize agent\r
                        function loop(){\r
@@ -3382,141 +3278,144 @@ var ResizeEvent = ( function(){
  * \r
  */\r
        var MouseEvent = ( function(){\r
-               var CLICK_OFFSET   = 2 * 2;             \r
+               var CLICK_OFFSET   = 2 * 2,\r
+                       DRAG_OFFSET    = 4 * 4;         \r
                \r
                var EVENT_LIST_MAP = [],\r
                        TMP = {},\r
                        currentEventList;\r
-\r
-               /* ClickHelper\r
-                * mousedown, mouseup, の移動距離を調べて clickハンドラ を呼ぶ\r
-                */\r
-               var ClickEventTicketClass = function( element, clickhandler ){\r
-                       var startX, startY,\r
-                               mousedownTicket = new EventTicketClass( element, 'mousedown', mousedownHandler ),\r
-                               mouseupTicket, mouseoutTicket;\r
-                       \r
-                       function mousedownHandler( e ){\r
-                               startX = e.clientX;\r
-                               startY = e.clientY;\r
+       /*-------------------------------------\r
+        * ClickHelper\r
+        * mousedown, mouseup, の移動距離を調べて clickハンドラ を呼ぶ\r
+        */\r
+               var ClickEventTicketClass = function( element, clickhandler, opt_thisObject ){\r
+                       this.mousedownTicket = new EventTicketClass( element, 'mousedown', this.mousedownHandler, this );\r
+                       this.element         = element;\r
+                       this.handler         = clickhandler;\r
+                       this.thisObject      = opt_thisObject;\r
+               };\r
+               ClickEventTicketClass.prototype = {\r
+                       element          : null,\r
+                       handler          : null,\r
+                       thisObject       : null,\r
+                       startX           : 0,\r
+                       startY           : 0,\r
+                       mousedownTicket  : null,\r
+                       mousemoveTicket  : null,\r
+                       mouseupTicket    : null,\r
+                       mouseoutTicket   : null,\r
+                       eventType        : 'click',\r
+                       fire             : EventTicketClass.prototype.fire,\r
+                       match            : EventTicketClass.prototype.match,\r
+                       mousedownHandler : function( e ){\r
+                               this.startX = e.clientX;\r
+                               this.startY = e.clientY;\r
                                \r
-                               mouseupTicket  = new EventTicketClass( element, 'mouseup', mouseupHandler );\r
-                               mouseoutTicket = new EventTicketClass( element, 'mouseout', mouseoutHandler );                          \r
-                       }\r
-                       \r
-                       function mouseupHandler( e ){\r
-                               var offsetX = e.clientX - startX,\r
-                                       offsetY = e.clientY - startY;\r
-                               mouseoutHandler();\r
-                               if( offsetX * offsetX + offsetY * offsetY < CLICK_OFFSET ){\r
-                                       if( Function.prototype.call ){\r
-                                               return clickhandler.call( element, e );\r
-                                       }\r
-                                       element._currentHandler = clickhandler;\r
-                                       var ret = element._currentHandler( e );\r
-                                       delete element._currentHandler;\r
-                                       return ret;\r
-                               };\r
-                       };\r
-                       function mouseoutHandler( e ){\r
-                               mouseupTicket && mouseupTicket.destroy();\r
-                               mouseoutTicket && mouseoutTicket.destroy();\r
-                               mouseupTicket = mouseoutTicket = null;\r
-                       };\r
-                       \r
-                       this.element = element;\r
-                       this.handler = clickhandler;            \r
-                       this.destroy = function( _element, _eventType, _handler ){\r
+                               this.mousemoveTicket = new EventTicketClass( this.element, 'mousemove', this.mousemoveHandler, this );\r
+                               this.mouseupTicket   = new EventTicketClass( this.element, 'mouseup',   this.mouseupHandler,   this );\r
+                               this.mouseoutTicket  = new EventTicketClass( this.element, 'mouseout',  this.mouseoutHandler,  this );\r
+                               return false;                   \r
+                       },\r
+                       mousemoveHandler : function( e ){\r
+                               var offsetX = e.clientX - this.startX,\r
+                                       offsetY = e.clientY - this.startY;                              \r
+                               offsetX * offsetX + offsetY * offsetY >= CLICK_OFFSET && this.mouseoutHandler();\r
+                               return false;\r
+                       },\r
+                       mouseupHandler : function( e ){\r
+                               this.mouseoutHandler();\r
+                               return this.fire( ClickEventTicketClass.createEvent( e ) );\r
+                       },\r
+                       mouseoutHandler : function( e ){\r
+                               this.mousemoveTicket && this.mousemoveTicket.destroy();\r
+                               this.mouseupTicket   && this.mouseupTicket.destroy();\r
+                               this.mouseoutTicket  && this.mouseoutTicket.destroy();\r
+                               if( this.mousemoveTicket ) delete this.mousemoveTicket;\r
+                               if( this.mouseupTicket  )  delete this.mouseupTicket;\r
+                               if( this.mouseoutTicket )  delete this.mouseoutTicket;\r
+                               return false;\r
+                       },\r
+                       destroy : function( _element, _eventType, _handler ){\r
                                if( this.match( _element, _eventType, _handler ) === false ) return false;\r
                                \r
-                               mouseoutHandler();\r
-                               mousedownTicket.destroy();\r
-                               element = clickhandler = mousedownTicket = null;\r
-                               \r
+                               this.mouseoutHandler();\r
+                               this.mousedownTicket.destroy();\r
+\r
                                delete this.element;\r
-                               delete this.eventType;\r
                                delete this.handler;\r
-                               \r
+                               delete this.thisObject;\r
+                               delete this.mousedownTicket;    \r
                                return true;\r
-                       };\r
+                       }\r
                };\r
-               ClickEventTicketClass.prototype = {\r
-                       eventType: 'click',\r
-                       match    : EventTicketClass.prototype.match\r
+               if( document.createEvent ){\r
+                       ClickEventTicketClass.createEvent = function( e ){\r
+                               var _e = document.createEvent( 'MouseEvents' );\r
+                               _e.initMouseEvent(\r
+                                       'click' , false, true, e.view, \r
+                                       e.detail, e.screenX, e.screenY, e.clientX, e.clientY, \r
+                                       e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, \r
+                                       e.button, e.relatedTarget\r
+                               );\r
+                               return _e;\r
+                       };                                      \r
+               } else\r
+               if( document.attachEvent ){\r
+                       ClickEventTicketClass.createEvent = function( e ){\r
+                               e.type = 'click';\r
+                               return e;\r
+                       };\r
+               } else {\r
+                       \r
                };\r
                \r
-               /* WheelHelper\r
-                */\r
+       /*-------------------------------------\r
+        *  WheelHelper\r
+        */\r
                var WheelEventTicketClass = ( function(){\r
                        if( UA.GECKO ){\r
-                               return function( element, wheelhandler ){\r
-                                       this.wheelTicket = new EventTicketClass( element, 'DOMMouseScroll', onWheel );\r
+                               return function( element, wheelhandler, opt_thisObject ){\r
+                                       this.wheelTicket = new EventTicketClass( element, 'DOMMouseScroll', this.onGeckoWheel, this );\r
                                        this.element     = element;\r
                                        this.handler     = wheelhandler;\r
-                                       this.destroy     = function( _element, _eventType, _handler ){\r
-                                               if( this.match( _element, _eventType, _handler ) === false ) return false;\r
-                                               element = wheelhandler = null;\r
-                                               \r
-                                               this.wheelTicket && this.wheelTicket.destroy();\r
-                                               \r
-                                               delete this.wheelTicket;\r
-                                               delete this.element;\r
-                                               delete this.handler;\r
-                                               \r
-                                               return true;\r
-                                       };\r
-                                       \r
-                                       function onWheel( e ){\r
-                                               e.wheelDelta = e.detail * -40;\r
-                                               return wheelhandler.call( element, e );\r
-                                       }\r
+                                       this.thisObject  = opt_thisObject;\r
                                };\r
                        } else\r
                        if( true || UA.isIE ){\r
-                               return function( element, wheelhandler ){\r
-                                       this.wheelTicket    = new EventTicketClass( element, 'mousewheel', wheelhandler );\r
-                                       this.element        = element;\r
-                                       this.handler        = wheelhandler;\r
-                                       element = wheelhandler = null;\r
+                               return function( element, wheelhandler, opt_thisObject ){\r
+                                       this.wheelTicket = new EventTicketClass( element, this.eventType, wheelhandler );\r
+                                       this.element     = element;\r
+                                       this.handler     = wheelhandler;\r
+                                       this.thisObject  = opt_thisObject;\r
                                };\r
                        } else {\r
-                               TMP.wheelList   = [];\r
+                               TMP.wheelHandlerList = [];\r
+                               TMP.wheelThisObjList = [];\r
                                //TMP.wheelLegacy = undefined;\r
                                TMP.onWheel   = function( e ){\r
                                        e = e || window.event;\r
                                        var cancel = true,\r
-                                               f = TMP.wheelLegacy;\r
+                                               f = TMP.wheelLegacy, i;\r
                                        if( f ) cancel = f.call( this, e );\r
                                        \r
-                                       for( i = TMP.wheelList.length; i; ){\r
-                                               if( TMP.wheelList[ --i ].call( this, e ) === false ) cancel = false;\r
-                                       }\r
+                                       for( i = TMP.wheelHandlerList.length; i; ){\r
+                                               if( TMP.wheelHandlerList[ --i ].call( TMP.wheelThisObjList[ i ] || this, e ) === false ) cancel = false;\r
+                                       };\r
                                        return cancel;\r
                                };\r
-                               return function( element, wheelhandler ){\r
-                                       this.wheelTicket    = null;\r
-                                       this.element        = element;\r
-                                       this.handler        = wheelhandler;\r
-                                       this.destroy        = function( _element, _eventType, _handler ){\r
-                                               if( this.match( _element, _eventType, _handler ) === false ) return false;\r
-                                               \r
-                                               TMP.wheelList.splice( Util.getIndex( TMP.wheelList, this.handler ) );\r
-                                               if( TMP.wheelList.length === 0 ) this.element.onmousewheel = '';\r
-                                               \r
-                                               delete this.element;\r
-                                               delete this.handler;\r
-                                               \r
-                                               return true;\r
-                                       };\r
+                               return function( element, wheelhandler, opt_thisObject ){\r
+                                       this.element     = element;\r
+                                       this.handler     = wheelhandler;\r
+                                       this.thisObject  = opt_thisObject;\r
                                        \r
-                                       if( TMP.wheelList.length === 0 ){\r
+                                       if( TMP.wheelHandlerList.length === 0 ){\r
                                                //TMP.wheelLegacy     = Type.isFunction( window.onmousewheel ) === true ? window.onmousewheel : undefined;\r
                                                element.onmousewheel = TMP.onWheel;\r
                                        };\r
-                                       TMP.wheelList.push( wheelhandler );\r
-                                       element = wheelhandler = null;\r
+                                       TMP.wheelHandlerList.push( wheelhandler );\r
+                                       TMP.wheelThisObjList.push( opt_thisObject )\r
                                };\r
-                       }\r
+                       };\r
                })();\r
                WheelEventTicketClass.prototype = {\r
                        eventType : 'mousewheel',\r
@@ -3529,16 +3428,149 @@ var ResizeEvent = ( function(){
                                delete this.wheelTicket;\r
                                delete this.element;\r
                                delete this.handler;\r
+                               delete this.thisObject;\r
                                \r
+                               this.onDestroy && this.onDestroy();\r
                                return true;\r
                        }\r
                };\r
+               if( UA.GECKO ){\r
+                       WheelEventTicketClass.prototype.onGeckoWheel = function( e ){\r
+                               var _e = document.createEvent( 'MouseEvents' );\r
+                               _e.initMouseEvent(\r
+                                       'mousewheel' , false, true, e.view, \r
+                                       e.detail, e.screenX, e.screenY, e.clientX, e.clientY, \r
+                                       e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, \r
+                                       e.button, e.relatedTarget\r
+                               );\r
+                               _e.wheelDelta = e.detail * -40;\r
+                               return this.handler.call( this.thisObject || this.element, _e );\r
+                       };\r
+               } else\r
+               if( true || UA.isIE ){\r
+\r
+               } else {\r
+                       WheelEventTicketClass.prototype.onDestroy = function(){\r
+                               TMP.wheelHandlerList.splice( Util.getIndex( TMP.wheelHandlerList, this.handler ), 1 );\r
+                               TMP.wheelThisObjList.splice( Util.getIndex( TMP.wheelThisObjList, this.handler ), 1 );\r
+                               if( TMP.wheelHandlerList.length === 0 ) this.element.onmousewheel = '';\r
+                       };                      \r
+               };\r
                \r
-               \r
+       /*-------------------------------------\r
+        *  DragHelper\r
+        */\r
+               var DragEventTicketClass = function( element, draghandler, opt_thisObject ){\r
+                       this.mousedownTicket = new EventTicketClass( element, 'mousedown', this.mousedownHandler, this );\r
+                       this.element         = element;\r
+                       this.handler         = draghandler;\r
+                       this.thisObject      = opt_thisObject;\r
+               };\r
+               DragEventTicketClass.prototype = {\r
+                       element         : null,\r
+                       handler         : null,\r
+                       thisObject      : null,\r
+                       startX          : 0,\r
+                       startY          : 0,\r
+                       dragging        : false,\r
+                       mousedownTicket : null,\r
+                       mousemoveTicket : null,\r
+                       mouseupTicket   : null,\r
+                       mouseoutTicket  : null,\r
+                       eventType       : 'mousedrag',\r
+                       fire            : EventTicketClass.prototype.fire,\r
+                       match           : EventTicketClass.prototype.match,\r
+                       mousedownHandler: function( e ){\r
+                               this.startX = e.clientX;\r
+                               this.startY = e.clientY;\r
+                               \r
+                               this.mousemoveTicket = new EventTicketClass( this.element, 'mousemove', this.dragMoveHandler, this );\r
+                               this.mouseupTicket   = new EventTicketClass( this.element, 'mouseup',   this.dragEndHandler,  this );\r
+                               this.mouseoutTicket  = new EventTicketClass( this.element, 'mouseout',  this.dragEndHandler,  this );                                   \r
+                       \r
+                               return false;\r
+                       },\r
+                       dragMoveHandler : function( e ){\r
+                               var offsetX = e.clientX - this.startX,\r
+                                       offsetY = e.clientY - this.startY;\r
+                               if( this.dragging === false ){\r
+                                       if( offsetX * offsetX + offsetY * offsetY < DRAG_OFFSET ) return;\r
+                                       console.log( 'Drag start' );\r
+                                       // dragStart\r
+                                       this.dragging = true;\r
+                                       return this.fire( DragEventTicketClass.createEvent( e, offsetX, offsetY, 0 ) );\r
+                               };\r
+                               return this.fire( DragEventTicketClass.createEvent( e, offsetX, offsetY, 1 ) );\r
+                       },\r
+                       dragEndHandler  : function( e ){\r
+                               if( this.dragging === true ){\r
+                                       console.log( 'Drag End ' + e.type );\r
+                                       this.removeEvents();\r
+                                       // dragEnd\r
+                                       return this.fire( DragEventTicketClass.createEvent( e, e.clientX - this.startX, e.clientY - this.startY, 2 ) );\r
+                               };\r
+                               this.removeEvents();\r
+                               return false;\r
+                       },\r
+                       removeEvents : function(){\r
+                               this.dragging = false;\r
+                               if( this.mousemoveTicket ){\r
+                                       this.mousemoveTicket.destroy();\r
+                                       delete this.mousemoveTicket;\r
+                               };\r
+                               if( this.mouseupTicket ){\r
+                                       this.mouseupTicket.destroy();\r
+                                       delete this.mouseupTicket;\r
+                               };\r
+                               if( this.mouseoutTicke ){\r
+                                       this.mouseoutTicket.destroy();\r
+                                       delete this.mouseoutTicket;\r
+                               };                              \r
+                       },\r
+                       destroy : function( _element, _eventType, _handler ){\r
+                               if( this.match( _element, _eventType, _handler ) === false ) return false;\r
+                               \r
+                               this.removeEvents();\r
+                               this.mousedownTicket.destroy();\r
+\r
+                               delete this.element;\r
+                               delete this.handler;\r
+                               delete this.thisObject;\r
+                               delete this.mousedownTicket;    \r
+                               return true;\r
+                       }\r
+               };\r
+               if( document.createEvent ){\r
+                       DragEventTicketClass.createEvent = function( e, offsetX, offsetY, dragPhase ){\r
+                               var _e = document.createEvent( 'MouseEvents' );\r
+                               _e.initMouseEvent(\r
+                                       DragEventTicketClass.prototype.eventType , false, true, e.view, \r
+                                       e.detail, e.screenX, e.screenY, e.clientX, e.clientY, \r
+                                       e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, \r
+                                       e.button, e.relatedTarget\r
+                               );\r
+                               _e.dragPhase   = dragPhase;\r
+                               _e.dragOffsetX = offsetX;\r
+                               _e.dragOffsetY = offsetY;\r
+                               return _e;\r
+                       };                                      \r
+               } else\r
+               if( document.attachEvent ){\r
+                       DragEventTicketClass.createEvent = function( e, offsetX, offsetY, dragPhase ){\r
+                               e.type        = DragEventTicketClass.prototype.eventType;\r
+                               e.dragPhase   = dragPhase;\r
+                               e.dragOffsetX = offsetX;\r
+                               e.dragOffsetY = offsetY;\r
+                               return e;\r
+                       };\r
+               } else {\r
+                       \r
+               };\r
+\r
                return {\r
-                       add: function( _apiuser, _element, _eventType, _handler ){\r
+                       add: function( _apiuser, _element, _eventType, _handler, opt_thisObject ){\r
                                if( isApiUser( _apiuser ) === true &&\r
-                                       ( Type.isHTMLElement( _element ) === true || _element === window || _element === doc ) &&\r
+                                       ( Type.isHTMLElement( _element ) === true || _element === window || _element === document ) &&\r
                                        Type.isString( _eventType ) === true &&\r
                                        Type.isFunction( _handler ) === true\r
                                ){\r
@@ -3550,36 +3582,40 @@ var ResizeEvent = ( function(){
                                                // 2重登録の禁止\r
                                                for( var i=0, l=_events.length; i<l; ++i ){\r
                                                        if( _events[ i ].match( _element, _eventType, _handler ) === true ) return;\r
-                                               }\r
+                                               };\r
                                        };\r
-                                       if( _eventType === 'click' ){\r
-                                               _events.push( new ClickEventTicketClass( _element, _handler ) );\r
-                                       } else\r
-                                       if( _eventType === 'mousewheel' ){\r
-                                               _events.push( new WheelEventTicketClass( _element, _handler ) );\r
-                                       } else {\r
-                                               _events.push( new EventTicketClass( _element, _eventType, _handler ) );\r
+                                       switch( _eventType ){\r
+                                               case 'click':\r
+                                                       _events.push( new ClickEventTicketClass( _element, _handler, opt_thisObject ) );\r
+                                                       break;\r
+                                               case 'mousewheel':\r
+                                                       _events.push( new WheelEventTicketClass( _element, _handler, opt_thisObject ) );\r
+                                                       break;\r
+                                               case 'mousedrag':\r
+                                                       _events.push( new DragEventTicketClass( _element, _handler, opt_thisObject ) );\r
+                                                       break;\r
+                                               default:\r
+                                                       _events.push( new EventTicketClass( _element, _eventType, _handler, opt_thisObject ) );\r
                                        };\r
                                };\r
                        },\r
-                       remove: function( _apiuser, _element, _eventType, _handler ){\r
-                               if( isApiUser( _apiuser ) === true ){\r
-                                       var _uid    = _apiuser.getUID(),\r
-                                               _events = EVENT_LIST_MAP[ _uid ],\r
-                                               _removed,\r
-                                               i = 0;\r
-                                       if( Type.isArray( _events ) === false ) return;\r
-                                       for( ;i < _events.length; ){\r
-                                               if( _events[ i ].destroy( _element, _eventType, _handler ) === true ){\r
-                                                       _events.splice( i, 1 );\r
+                       remove: function( apiuser, element, eventType, handler ){\r
+                               if( isApiUser( apiuser ) === true ){\r
+                                       var uid  = apiuser.getUID(),\r
+                                               list = EVENT_LIST_MAP[ uid ],\r
+                                               i    = 0;\r
+                                       if( Type.isArray( list ) === false ) return;\r
+                                       for( ;i < list.length; ){\r
+                                               if( list[ i ].destroy( element, eventType, handler ) === true ){\r
+                                                       list.splice( i, 1 );\r
                                                } else {\r
                                                        ++i;\r
-                                               }\r
-                                       }\r
-                                       if( _events.length === 0 ){\r
-                                               _events = EVENT_LIST_MAP[ _uid ] = null;\r
-                                       }\r
-                               }\r
+                                               };\r
+                                       };\r
+                                       if( list.length === 0 ){\r
+                                               EVENT_LIST_MAP[ uid ] = null;\r
+                                       };\r
+                               };\r
                        },\r
                        onCurrentApplicationChange: function(){\r
                                \r
@@ -3637,7 +3673,8 @@ var KeyEvent = ( function(){
                        key            = e.keyCode, // || e.which,\r
                        shift          = Type.isBoolean( e.shiftKey ) === true ? e.shiftKey : ( e.modifiers & Event.SHIFT_MASK ),\r
                        ctrl           = Type.isBoolean( e.ctrlKey  ) === true ? e.ctrlKey  : ( e.modifiers & Event.CONTROL_MASK ),\r
-                       lock           = type === 'keyup' ? LOCK_UP : LOCK_DOWN;\r
+                       lock           = type === 'keyup' ? LOCK_UP : LOCK_DOWN,\r
+                       i, t;\r
                        \r
                // block chattering\r
                if( Util.getIndex( lock, key ) !== -1 ) return;\r
@@ -3650,10 +3687,13 @@ var KeyEvent = ( function(){
                if( key === 17 || ctrl === true ){\r
                        KeyEvent.ctrlEnabled  = type !== 'keyup';\r
                };\r
-               for( var i=currentList.length, t; t = currentList[ --i ]; ){\r
+               for( i = currentList.length; i; ){\r
+                       t = currentList[ --i ];\r
                        if( Type.isFunction( t[ type ] ) === true && t.keyCode === key && ( t.shift === undefined || t.shift === shift ) && ( t.ctrl === undefined || t.ctrl === ctrl )){\r
-                               AsyncCall.add( t.apiuser, t[ type ], e );\r
-                               cancel = true;\r
+                               if( t[ type ].call( t.apiuser, e ) === false ){\r
+                                       cancel = true;\r
+                                       break;\r
+                               };\r
                        };\r
                };\r
                if( cancel === true || key === 18 || key === 9 || key === 27 || e.altKey === true ){ // 13.enter 18.esc 9.tab 27.esc   || ( key === 13 && overlayEnabled === false)\r
@@ -3773,7 +3813,7 @@ var KeyEvent = ( function(){
                        }\r
                        if( _down === true ){\r
                                keydownTicket = new EventTicketClass( document, 'keydown', onKeyChange );\r
-                               keypressTicket = keyPress !== null ? new EventTicketClass( doc, 'keypress', keyPress ) : null;\r
+                               keypressTicket = keyPress !== null ? new EventTicketClass( document, 'keypress', keyPress ) : null;\r
                        } else {\r
                                keydownTicket && keydownTicket.destroy();\r
                                keypressTicket && keypressTicket.destroy();\r
@@ -3807,20 +3847,21 @@ var KeyEvent = ( function(){
  * http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof\r
  */\r
 \r
-var Css = ( function(){\r
-       var head = doc.getElementsByTagName( 'head' )[ 0 ];\r
+var StyleSheet = ( function(){\r
+       var head = document.getElementsByTagName( 'head' )[ 0 ];\r
        \r
        var TICKET_LIST = [];\r
        var STATE_LIST  = 'loaded,complete,uninitialized'.split( ',' );\r
        \r
        var cssRules, sheet;\r
        \r
-       var FetchCssTicketClass = function( _apiuser, _url, _elm, _onload, _onerror ){\r
+       var FetchCssTicketClass = function( _apiuser, _url, _elm, _onload, _onerror, opt_thisObject ){\r
                this.apiusers = [ _apiuser ];\r
                this.url      = _url;\r
                this.elm      = _elm;\r
                this.onload   = [ _onload ];\r
                this.onerror  = [ _onerror ];\r
+               this.thisObj  = [ opt_thisObject ];\r
                this.time     = 0;\r
        };\r
        FetchCssTicketClass.prototype = {\r
@@ -3837,6 +3878,7 @@ var Css = ( function(){
                        this.apiusers.splice( i, 1 );\r
                        this.onload.splice( i, 1 );\r
                        this.onerror.splice( i, 1 );\r
+                       this.thisObj.splice( i, 1 );\r
                        \r
                        if( this.apiusers.length !== 0 ) return false;\r
                        \r
@@ -3849,6 +3891,7 @@ var Css = ( function(){
                        delete this.elm;\r
                        delete this.onload;\r
                        delete this.onerror;\r
+                       delete this.thisObj;\r
                        delete this.time;\r
                        \r
                        return true;\r
@@ -3856,14 +3899,14 @@ var Css = ( function(){
                loaded: function(){\r
                for( var i = this.onload.length, f; i; ){\r
                        f = this.onload[ --i ];\r
-                       Type.isFunction( f ) === true && AsyncCall.add( this.apiusers[ i ], f, this.url );\r
+                       Type.isFunction( f ) === true && AsyncCall.add( this.apiusers[ i ], f, this.url, this.thisObj[ i ] || this.apiusers[ i ] );\r
                        this.onload[ i ] = this.onerror[ i ] = null;\r
                };\r
                },\r
                error: function(){\r
-               for( var i = this.onerror.length, c; i; ){\r
-                       c = this.onerror[ --i ];\r
-                       Type.isFunction( c ) === true && AsyncCall.add( t.apiusers[ i ], c, t.url );\r
+               for( var i = this.onerror.length, f; i; ){\r
+                       f = this.onerror[ --i ];\r
+                       Type.isFunction( f ) === true && AsyncCall.add( this.apiusers[ i ], f, this.url, this.thisObj[ i ] || this.apiusers[ i ] );\r
                        this.onload[ i ] = this.onerror[ i ] = null;\r
                };\r
                },\r
@@ -3897,7 +3940,7 @@ var Css = ( function(){
        \r
        function checkTimer(){\r
                var l = TICKET_LIST.length,\r
-                       n = 0;\r
+                       n = 0, t;\r
                for( var i = 0; i < l; ++i ){\r
                        t = TICKET_LIST[ i ];\r
                        ++t.time;\r
@@ -3915,7 +3958,7 @@ var Css = ( function(){
        };\r
        \r
        return {\r
-               load: function( _apiuser, _url, opt_onload, opt_onerror ){\r
+               load: function( _apiuser, _url, opt_onload, opt_onerror, opt_thisObject ){\r
                        _url = Util.getAbsolutePath( _url );\r
                        var t;\r
                        for( var i=TICKET_LIST.length; i; ){\r
@@ -3925,12 +3968,13 @@ var Css = ( function(){
                                                t.apiusers.push( _apiuser );\r
                                                t.onload.push( opt_onload );\r
                                                t.onerror.push( opt_onerror );\r
+                                               t.thisObj.push( opt_thisObject );\r
                                        };\r
                                        SystemTimer.add( SUPER_USER_KEY, checkTimer, 333 );\r
                                        return;\r
                                };\r
                        };\r
-                       var elm = doc.createElement( 'link' );\r
+                       var elm = document.createElement( 'link' );\r
                        head.appendChild( elm );\r
                        elm.rel  = 'stylesheet';\r
                        elm.type = 'text\/css';\r
@@ -3946,25 +3990,161 @@ var Css = ( function(){
                                };\r
                        };\r
                        \r
-                       TICKET_LIST.push( new FetchCssTicketClass( _apiuser, _url, elm, opt_onload, opt_onerror ) );\r
+                       TICKET_LIST.push( new FetchCssTicketClass( _apiuser, _url, elm, opt_onload, opt_onerror, opt_thisObject ) );\r
+                       \r
+                       SystemTimer.add( SUPER_USER_KEY, checkTimer, 333 );\r
+               },\r
+               unload: function( _apiuser, _url ){\r
+                       _url = _url ? Util.getAbsolutePath( _url ) : null;\r
+            var t;\r
+                       for( var i = 0; i < TICKET_LIST.length; ){\r
+                               t = TICKET_LIST[ i ];\r
+                               if( t.destroy( _apiuser, _url ) === true ){\r
+                                       TICKET_LIST.splice( i, 1 );\r
+                               } else {\r
+                                       ++i;\r
+                               }\r
+                       };\r
+                       if( TICKET_LIST.length === 0 ){\r
+                               SystemTimer.remove( SUPER_USER_KEY, checkTimer );\r
+                       }\r
+               }\r
+       }\r
+})();\r
+\r
+/*\r
+ * AssetLoader\r
+ * fetchCSS\r
+ * fetchJson\r
+ * fetchHtml\r
+ * fetchImage\r
+ * fetchLocalFile\r
+ * fetchLocalStorage\r
+ */\r
+\r
+var Image = ( function(){\r
+       var TASK_LIST = [];\r
+       /* \r
+        * FetchClass original is\r
+        * \r
+        * LICENSE: MIT?\r
+        *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631\r
+        *  AUTHOR: uupaa.js@gmail.com\r
+        * \r
+        */\r
+       function detect(){\r
+               for( var i=0, t; i < TASK_LIST.length; ){\r
+                       t = TASK_LIST[ i ];\r
+                       if( t.complete() === true ){\r
+                               TASK_LIST.splice( i, 1 );\r
+                       } else {\r
+                               ++i;\r
+                       };\r
+               };\r
+               TASK_LIST.length === 0 && SystemTimer.remove( SUPER_USER_KEY, detect );\r
+       };\r
+       function getTask( img ){\r
+               for( var i = TASK_LIST.length; i; ){\r
+                       if( TASK_LIST[ --i ].img === img ) return TASK_LIST[ i ];\r
+               };\r
+       };\r
+       function onError(){\r
+               var task = getTask( this );\r
+               if( task.finish === true ) return;\r
+               task.finish = true;\r
+               AsyncCall.add( task.apiuser, task.asyncCallback, null, task );\r
+       };\r
+       function onLoad(){\r
+               // if( finish === true ) return; // これがあると firefox3.6 で駄目、、、\r
+               // if( timer ) return; // これがあると safari3.2 で駄目、、、\r
+               var task = getTask( this );\r
+               task.finish = true;\r
+               TASK_LIST.splice( Util.getIndex( TASK_LIST, task ), 1 );\r
+               if( window.opera && !task.img.complete ){\r
+                       AsyncCall.add( task.apiuser, task.asyncCallback, null, task );\r
+                       return;\r
+               };\r
+               task.size = Util.getImageSize( this );\r
+               AsyncCall.add( task.apiuser, task.asyncCallback, null, task );\r
+       };\r
+\r
+\r
+       var FetchClass = function( apiuser, abspath, onLoadCallback, onErrorCallback, timeout ){\r
+               this.apiuser         = apiuser;\r
+               this.abspath         = abspath;\r
+               this.onLoadCallback  = onLoadCallback;\r
+               this.onErrorCallback = onErrorCallback;\r
+               this.timeout         = timeout;\r
+               this.tick            = 0;\r
+       };\r
+       FetchClass.prototype = {\r
+               img: null,\r
+               size: null,\r
+               tick: 0,\r
+               finish: false,\r
+               load: function(){\r
+                       var img     = this.img = document.createElement( 'img' ); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る\r
+                       img.onabort = img.onerror = onError;\r
+                       img.onload  = onLoad;\r
+                       img.src     = this.abspath;\r
+               },\r
+               complete: function(){\r
+                       if( this.finish === true ) return true;\r
+                       if( this.img.complete ){\r
+                               this.finish = true;\r
+                               if( this.img.width ) return true;\r
+                               AsyncCall.add( this.apiuser, this.asyncCallback, null, this );\r
+                               return true;\r
+                       };\r
+                       if( ( this.tick += 250 ) > this.timeout ){\r
+                               this.finish = true;\r
+                               AsyncCall.add( this.apiuser, this.asyncCallback, null, this );\r
+                               return true;\r
+                       };\r
+               },\r
+               asyncCallback: function(){\r
+                       this.size ? this.onLoadCallback( this.abspath, this.size.width, this.size.height ) : this.onErrorCallback( this.abspath );\r
+                       this.destroy();\r
+               },\r
+               destroy: function(){\r
+                       this.finish  = true;\r
+                       this.img.src = this.img.onload = this.img.onabort = this.img.onerror = '';\r
+                       delete this.img;\r
+                       delete this.size;\r
+                       delete this.onLoadCallback;\r
+                       delete this.onErrorCallback;\r
+               },\r
+               stop: function(){\r
+                       timer !== null && window.clearTimeout( timer );\r
+                       destroy();\r
+               }\r
+       };\r
+       \r
+       return {\r
+               load: function( URLorELM, onLoad, onError, opt_timeout ){\r
+                       var src, fetch;\r
+                       if( Type.isString( URLorELM ) === true ){\r
+                               src = URLorELM;\r
+                       } else\r
+                       if( Type.isHTMLElement( URLorELM ) === true && URLorELM.tagName.toLowerCase() === 'img' ){\r
+                               src = URLorELM.src;\r
+                       } else {\r
+                               return;\r
+                       };\r
+                       \r
+                       fetch = new FetchClass(\r
+                               Util.getAbsolutePath( src ),\r
+                               onLoad, onError,\r
+                               Type.isFinite( opt_timeout ) === true ? opt_timeout : undefined\r
+                       );\r
+                       TASK_LIST.push( fetch );\r
                        \r
-                       SystemTimer.add( SUPER_USER_KEY, checkTimer, 333 );\r
+                       SystemTimer.add( SUPER_USER_KEY, detect, 250 );\r
                },\r
-               unload: function( _apiuser, _url ){\r
-                       _url = _url ? Util.getAbsolutePath( _url ) : null;\r
-                       for( var i = 0; i < TICKET_LIST.length; ){\r
-                               t = TICKET_LIST[ i ];\r
-                               if( t.destroy( _apiuser, _url ) === true ){\r
-                                       TICKET_LIST.splice( i, 1 );\r
-                               } else {\r
-                                       ++i;\r
-                               }\r
-                       };\r
-                       if( TICKET_LIST.length === 0 ){\r
-                               SystemTimer.remove( SUPER_USER_KEY, checkTimer );\r
-                       }\r
+               unload: function(  ){\r
+                       \r
                }\r
-       }\r
+       };\r
 })();\r
 \r
 \r
@@ -3974,6 +4154,7 @@ var Css = ( function(){
 \r
 var Overlay = ( function(){\r
        var elmContainer, elmShadow, elmCloseButton,\r
+               bootParams,\r
                application    = null,\r
                visible        = false,\r
                bodyOverflow   = '',\r
@@ -3983,25 +4164,25 @@ var Overlay = ( function(){
                Overlay.hide();\r
                return false;\r
        };\r
-       function asyncInit( /* arguments */ ){  \r
-               \r
-               //body.appendChild( application.rootElement );\r
-               elmContainer.insertBefore( application.rootElement, elmCloseButton );\r
-               application.rootElement.style.display = 'none';\r
+       function asyncInit( /* arguments */ ){\r
                application.init();\r
+               //application.rootElement.style.display = 'none';\r
+               \r
+               elmContainer.style.cssText = "top:" + body.scrollTop + 'px;display:none;';\r
+               $( elmContainer ).stop().fadeIn( onFadeInComplete );            \r
        };\r
        function asyncOpen( /* arguments */ ){\r
+\r
                \r
-               var _arg = Util.copyArray( arguments );\r
-               _arg.unshift( windowW, windowH );\r
-               application.open.apply( application, _arg );\r
                \r
-               elmContainer.style.cssText = "top:" + body.scrollTop + 'px;display:none;';\r
-               $( elmContainer ).stop().fadeIn( onFadeInComplete );            \r
        };\r
        function onFadeInComplete(){\r
                KeyEvent.add( application, Const.KEY.EVENT.KEY_DOWN, Overlay.hide, 27 ); // 27.esc\r
                MouseEvent.add( application, elmCloseButton, 'click', onCloseClick );\r
+               \r
+               var _arg = bootParams; //Util.copyArray( arguments );\r
+               _arg.unshift( windowW, windowH );\r
+               application.open.apply( application, _arg );            \r
        };\r
        function onFadeOutComplete(){   \r
                Util.removeAllChildren( elmContainer );\r
@@ -4032,11 +4213,15 @@ var Overlay = ( function(){
                        \r
                        elmContainer.style.display = 'none'; // hide for fadeIn\r
                        \r
-                       _application.addAsyncCall( asyncInit );\r
-                       _application.addAsyncCall( asyncOpen, _bootParams );\r
-                       \r
                        visible     = true;\r
                        application = _application;\r
+                       \r
+                       //asyncInit();\r
+                       elmContainer.insertBefore( application.rootElement, elmCloseButton );\r
+                       _application.addAsyncCall( asyncInit );\r
+                       // _application.addAsyncCall( asyncOpen,  );\r
+                       \r
+                       bootParams = _bootParams;                       \r
                },\r
                hide: function(){\r
                        if( visible === false ) return;\r
@@ -4050,9 +4235,6 @@ var Overlay = ( function(){
                        }).fadeOut( onFadeOutComplete );\r
                        visible = false;\r
                        \r
-                       KeyEvent.remove( application, Const.KEY.EVENT.KEY_DOWN, Overlay.hide ); // 27.esc\r
-                       MouseEvent.remove( application, elmCloseButton );\r
-                       \r
                        application = null;\r
                },\r
                onWindowResize: function( _windowW, _windowH ){\r
@@ -4090,16 +4272,6 @@ var UI = ( function(){
 \r
        var CLASSNAME_COMBOBOX_OPTION = 'combobox-option',\r
                CLASSNAME_COMBOBOX_OPTION_CURRENT = CLASSNAME_COMBOBOX_OPTION + ' combobox-option-current',\r
-               ELM_A_ORIGIN = ( function(){\r
-                       var ret = document.createElement( 'a' );\r
-                       ret.href = '#';\r
-                       return ret;\r
-               })(),\r
-               ELM_INPUT_TEXT = ( function(){\r
-                       var ret = document.createElement( 'input' );\r
-                       ret.type = 'text';\r
-                       return ret;\r
-               })(),\r
                ELM_COMBOBOX = ( function(){\r
                        var ret       = document.createElement( 'a' ),\r
                                elmToggle = document.createElement( 'span' ),\r
@@ -4114,212 +4286,474 @@ var UI = ( function(){
                        elmValue.appendChild( document.createTextNode( 'null' ));\r
                        return ret;\r
                })();\r
-               \r
-       var InputTextClass = function( apiuser, uiGroup, elmWrapper, elmValue, onUpdate, validater ){\r
-               var elmA     = ELM_A_ORIGIN.cloneNode( true ),\r
-                       instance = this,\r
-                       focus    = false,\r
-                       visible  = true,\r
-                       enabled  = true,\r
-                       value    = elmValue.innerHTML;\r
-               elmValue.innerHTML = '';\r
-               elmValue.className += ' editable-text';\r
-               elmValue.appendChild( elmA );\r
-               \r
-               this.value = function( _value ){\r
-                       if( Type.isString( _value ) === true || Type.isNumber( _value ) === true ){\r
-                               value = '' + _value;\r
-                               elmA.innerHTML = '' + _value;\r
-                               if( focus === true ){\r
-                                       ELM_INPUT_TEXT.value = '' + value;\r
-                               };\r
-                       };\r
-                       focus === true && instance.blur();\r
-                       return value;\r
+       \r
+       var UIItemPrivateData = function(){};\r
+       UIItemPrivateData.prototype = {\r
+               groupData   : null,\r
+               item        : null,\r
+               elm         : null,\r
+               node        : null,\r
+               focus       : false,\r
+               visible     : true,\r
+               enabled     : true,\r
+               value       : null,\r
+               onUpdate    : null,\r
+               validator   : null,\r
+               elmValue    : null,\r
+               elmBox      : null,\r
+               elmA        : null,\r
+               elmToggle   : null,\r
+               elmValue    : null,\r
+               selectIndex : 0,\r
+               optionList  : null,\r
+               init    : function( groupData, item, elm, value, onUpdate, validator, focus, visible, enabled ){\r
+                       this.groupData = groupData;\r
+                       this.item      = item;\r
+                       this.elm       = elm;\r
+                       this.value     = value;\r
+                       this.onUpdate  = onUpdate;\r
+                       this.validator = validator;                     \r
+                       this.focus     = !!focus;\r
+                       this.visible   = !!visible;\r
+                       this.enabled   = !!enabled;\r
+                       UIItemPrivateData.list.push( this );\r
+               },\r
+               destroy : function(){\r
+                       var list = UIItemPrivateData.list;\r
+                       list.splice( Util.getIndex( list, this ), 1 );\r
+                       \r
+                       list = this.groupData.itemList;\r
+                       var i = Util.getIndex( list, this.item );\r
+                       i !== -1 && list.splice( i, 1 );\r
+                       \r
+                       this.node && this.node.remove();\r
+               }\r
+       };\r
+       UIItemPrivateData.list = [];\r
+       UIItemPrivateData.get = function( item ){\r
+               var list = UIItemPrivateData.list;\r
+               for( i = list.length; i; ){\r
+                       if( list[ --i ].item === item ) return list[ i ];\r
                };\r
-               this.focus = function( e ){\r
-                       focus = true;\r
-                       start( apiuser, uiGroup, instance );\r
-                       elmA.style.display = 'none';\r
+               return null;\r
+       };\r
+       \r
+/* --------------------------------\r
+ * TextInputManager\r
+ */\r
+       var TextInputManager = ( function(){\r
+               var elmInput = ( function(){\r
+                       var ret  = document.createElement( 'input' );\r
+                       ret.type = 'text';\r
+                       ret.id   = 'ui-textinput';\r
+                       return ret;\r
+               })();\r
+               var currentData;\r
+               \r
+               function updateWrapperPosition(){\r
+                       var p = Position.cumulativeOffset( currentData.elmValue ),\r
+                               w = currentData.elmValue.offsetWidth - 2,\r
+                               _w;             \r
+                       elmInput.style.cssText = [\r
+                               'left:',   p[ 0 ], 'px;',\r
+                               'top:',    p[ 1 ], 'px;',//,\r
+                               'width:',  w, 'px;'//,\r
+                               //'height:', data.elmValue.offsetHeight, 'px;',\r
+                               //'position:absolute;'\r
+                       ].join( '' );\r
                        \r
-                       elmValue.appendChild( ELM_INPUT_TEXT );\r
-                       ELM_INPUT_TEXT.value = value;\r
-                       ELM_INPUT_TEXT.focus();\r
-                       ELM_INPUT_TEXT.select();\r
+                       //_w = elmInput.offsetWidth;\r
+                       //if( w !== _w ) elmInput.style.width = ( w - ( _w - w ) ) + 'px;';     \r
+               };\r
+               \r
+               return {\r
+                       show: function( data ){\r
+                               // this.groupData.node.addEventListener( 'mouseout' );\r
+                               currentData = data;\r
 \r
-                       return false;\r
+                               body.appendChild( elmInput );\r
+                               elmInput.value = data.value;\r
+                               updateWrapperPosition();\r
+                               \r
+                               elmInput.focus();\r
+                               elmInput.select();\r
+                               \r
+                               SystemTimer.add( SUPER_USER_KEY, updateWrapperPosition, 500 );\r
+                       },\r
+                       hide : function( data ){\r
+                               if( currentData !== data ) return;\r
+                               currentData = null;\r
+                               body.removeChild( elmInput );\r
+                               var ret = elmInput.value;\r
+                               elmInput.value = '';\r
+                               SystemTimer.remove( SUPER_USER_KEY, updateWrapperPosition );\r
+                               return ret;\r
+                       },\r
+                       update : function( data ){\r
+                               elmInput.value = data.value;\r
+                       },\r
+                       onWindowResize: function( _w, _h ){\r
+                               AsyncCall.add( currentUser, updateWrapperPosition );\r
+                       }\r
                };\r
-               this.blur = function( keep ){\r
-                       var _newValue = ELM_INPUT_TEXT.value,\r
-                               _validated = Type.isFunction( validater ) === true ? '' + validater( _newValue ) : _newValue;\r
-                       _newValue = keep !== 27 ? _validated : value; // 27:ESC\r
+       })();\r
+       \r
+       var TextInputClass = function( groupData, elmWrapper, elmValue, onUpdate, validater ){\r
+               var data = new UIItemPrivateData();\r
+               data.init( groupData, this, elmWrapper, elmValue.innerHTML, onUpdate, validater, false, true, true );\r
+               Util.addClass( elmValue, 'editable-text' );\r
+               data.elmValue = elmValue;\r
+               this.value( data.value );\r
+               data.node = groupData.node.createNode( elmWrapper, false, true, 'ui-inpittext-hover', 'pointer' );\r
+               data.node.addEventListener( 'click', this.focus, this );\r
+               //MouseEvent.add( groupData.apiuser, elmWrapper, 'click', instance.focus );\r
+       };\r
+       TextInputClass.prototype = {\r
+               value : function( value ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isString( value ) === true || Type.isNumber( value ) === true ){\r
+                               data.elmValue.innerHTML = data.value = '' + value;\r
+                               data.focus === true && TextInputManager.update( data );\r
+                       };\r
+                       data.focus === true && this.blur();\r
+                       return data.value;\r
+               },\r
+               focus : function( e ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       data.focus = true;\r
+                       start( data );\r
+                       TextInputManager.show( data );\r
+                       return false;\r
+               },\r
+               blur : function( keep ){\r
+                       var data = UIItemPrivateData.get( this ),\r
+                               newValue;\r
+                       if( data.focus === false ) return;\r
+                       newValue = TextInputManager.hide( data );\r
+                       newValue = keep !== 27 ? ( data.validater ? '' + data.validater( newValue ) : newValue ) : data.value; // 27:ESC\r
 \r
-                       elmValue.removeChild( ELM_INPUT_TEXT );\r
+                       data.elmValue.innerHTML = newValue;\r
                        \r
-                       elmA.innerHTML     = _newValue;\r
-                       elmA.style.display = 'block';\r
+                       data.onUpdate && newValue !== data.value && AsyncCall.add( data.groupData.apiuser, data.onUpdate, [ newValue, data.value ], this );\r
                        \r
-                       onUpdate && _newValue !== value && AsyncCall.add( apiuser, onUpdate, [ _newValue, value ] );\r
+                       data.value = newValue;\r
+                       data.focus = false;\r
+                       finish( data );\r
+               },\r
+               enabled : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.enabled !== v ){\r
+                               Util.toggleClass( data.elm, 'ui-textinput-disabled', !v );\r
+                               if( data.focus === true && v === false ) this.blur();\r
+                               data.enabled = v;\r
+                               data.node.disabled( !( data.visible && v ) );\r
+                       };\r
+                       return data.enabled;\r
+               },\r
+               visible : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.visible !== v ){\r
+                               data.elm.style.display = v ? '' : 'none';\r
+                               if( data.focus === true && v === false ) this.blur();\r
+                               data.visible = v;\r
+                               data.node.disabled( !( data.enabled && v ) );\r
+                       };\r
+                       return data.visible;\r
+               },\r
+               destroy : function(){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       data.focus === true && TextInputManager.hide( data );\r
+                       data.destroy();\r
+               }\r
+       };\r
+\r
+/* --------------------------------\r
+ * TextInputManager\r
+ */\r
+       var FileInputManager = ( function(){\r
+               var currentData,\r
+                       elmForm,\r
+                       elmFileInput,\r
+                       elmWrap,\r
+                       evt;\r
+               \r
+               function updateWrapperPosition(){\r
+                       var p = Position.cumulativeOffset( currentData.elmValue ),\r
+                               w = currentData.elmValue.offsetWidth,\r
+                               _w;             \r
+                       elmWrap.style.cssText = [\r
+                               'left:',   p[ 0 ], 'px;',\r
+                               'top:',    p[ 1 ], 'px;',//,\r
+                               'width:',  w, 'px;'//,\r
+                               //'height:', data.elmValue.offsetHeight, 'px;',\r
+                               //'position:absolute;'\r
+                       ].join( '' );\r
                        \r
-                       value = _newValue;\r
-                       focus = false;\r
-                       finish( apiuser, uiGroup, instance );\r
+                       _w = elmWrap.offsetWidth;\r
+                       if( w !== _w ) elmWrap.style.width = ( w - ( _w - w ) ) + 'px'; \r
+               };\r
+               \r
+               function change( e ){\r
+                       var data = currentData,\r
+                               file = data.elmFileInputReal.value;\r
+                       file = file.split( '\\' );\r
+                       file = file[ file.length - 1 ];\r
+                       if( data.value !== file ){\r
+                               data.onUpdate && AsyncCall.add( data.groupData.apiuser, data.onUpdate, [ file, data.value ], this );\r
+                               data.elmValue.innerHTML = data.value = file;\r
+                       };\r
+                       currentData.item.blur();\r
                };\r
-               this.enabled = function(){\r
-                       return enabled;\r
+               function asyncMouseout(){\r
+                       currentData && currentData.item.blur();\r
                };\r
-               this.visible = function( _visible ){\r
-                       if( Type.isBoolean( _visible ) === true ){\r
-                               elmWrapper.style.display = _visible ? '' : 'none';\r
-                               visible = _visible;\r
-                       }\r
-                       return visible;\r
+               function onClick(){\r
+                       MouseEvent.remove( currentUser, elmFileInput, 'mouseout', asyncMouseout );\r
+                       MouseEvent.remove( currentUser, elmFileInput, 'click', onClick );       \r
                };\r
-               this.destroy = function(){\r
-                       if( focus === true ){\r
-                               elmValue.removeChild( ELM_INPUT_TEXT );\r
+               return {\r
+                       show : function( data ){\r
+                               currentData = data;\r
+                               \r
+                               elmFileInput = data.elmFileInputReal;\r
+                               elmWrap      = elmFileInput.parentNode;\r
+                               // \r
+                               \r
+                               updateWrapperPosition();\r
+                               elmFileInput.focus();\r
+                               //data.node.addEventListener( 'change', change, data );\r
+                               evt = new EventTicketClass( elmFileInput, 'change', change );\r
+                               MouseEvent.add( currentUser, elmFileInput, 'mouseout', asyncMouseout );\r
+                               MouseEvent.add( currentUser, elmFileInput, 'click', onClick );\r
+                               // currentData.elmFileInputReal.onchange = change;\r
+                               SystemTimer.add( SUPER_USER_KEY, updateWrapperPosition, 500 );\r
+                       },\r
+                       hide : function( data ){\r
+                               if( currentData !== data ) return;\r
+                               // data.node.removeEventListener( 'change', change );\r
+                               evt.destroy();\r
+                               // MouseEvent.remove( currentUser, elmFileInput, 'mouseout', asyncMouseout );\r
+                               onClick();\r
+                               //currentData.elmFileInputReal.onchange = null;\r
+                               elmWrap.style.display = 'none';\r
+                               currentData = elmFileInput = null;\r
+                               SystemTimer.remove( SUPER_USER_KEY, updateWrapperPosition );\r
+                       },\r
+                       onWindowResize: function( _w, _h ){\r
+                               AsyncCall.add( currentUser, updateWrapperPosition );\r
                        }\r
-                       MouseEvent.remove( apiuser, elmWrapper );\r
-                       \r
-                       apiuser = uiGroup = elmWrapper = elmValue = elmA = onUpdate = validater = instance = null;\r
                };\r
-               instance.value( value );\r
-               MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );\r
+       })();\r
+       \r
+       var FileInputClass = function( groupData, elmWrapper, onUpdate, validater, elmFileInputReal, elmValue ){\r
+               var data = new UIItemPrivateData();\r
+               data.init( groupData, this, elmWrapper, null, onUpdate, null, false, true, true );\r
+               data.node = groupData.node.createNode( elmWrapper, false, true, 'ui-fileinput-hover', 'pointer' );\r
+               data.elmValue = elmValue;\r
+               data.elmFileInputReal = elmFileInputReal;\r
+               data.node.addEventListener( 'mouseover', this.focus, this );\r
+       };\r
+       FileInputClass.prototype = {\r
+               value : function(){\r
+                       return data.value;\r
+               },\r
+               focus : function(){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       data.focus = true;\r
+                       Util.addClass( data.elm, 'fileinput-has-focus' );\r
+                       start( data );\r
+                       FileInputManager.show( data );\r
+               },\r
+               blur : function( keyCode ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       Util.removeClass( data.elm, 'fileinput-has-focus' );\r
+                       data.focus = false;\r
+                       FileInputManager.hide( data );\r
+                       finish( data );\r
+               },\r
+               enabled : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.enabled !== v ){\r
+                               if( data.focus === true && v === false ) this.blur();\r
+                               Util.toggleClass( data.elm, 'fileinput-disabled', !v );\r
+                               data.enabled = v;\r
+                               data.node.disabled( !( data.visible && v ) );\r
+                       };\r
+                       return data.enabled;\r
+               },\r
+               visible : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.visible !== v ){\r
+                               if( data.focus === true && v === false ) this.blur();\r
+                               data.elm.style.display = v ? '' : 'none';\r
+                               data.visible = v;\r
+                               data.node.disabled( !( data.enabled && v ) );\r
+                       };\r
+                       return data.visible;\r
+               },\r
+               destroy : function(){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       data.focus === true && FileInputManager.hide( data );\r
+                       data.destroy();\r
+               }\r
        };\r
        \r
-       var ButtonClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){\r
-               var instance  = this,\r
-                       focus     = false,\r
-                       visible   = true,\r
-                       enabled   = true;\r
-               MouseEvent.add( apiuser, elmWrapper, 'click', onClick );\r
-               \r
-               function onClick(){\r
-                       focus = true;\r
-                       // onUpdate();\r
-                       AsyncCall.add( apiuser, onUpdate );\r
-                       return false;\r
-               };\r
-               this.focus = function(){\r
-                       focus = true;\r
-                       Util.addClass( elmWrapper, 'button-has-focus' );\r
-                       start( apiuser, uiGroup, instance );\r
-               };\r
-               this.blur = function( keyCode ){\r
-                       keyCode === 13 && onClick();\r
-                       Util.removeClass( elmWrapper, 'button-has-focus' );\r
-                       focus = false;\r
-                       finish( apiuser, uiGroup, instance );\r
-               };\r
-               this.enabled = function( _enabled ){\r
-                       if( Type.isBoolean( _enabled ) === true && enabled !== _enabled ){\r
-                               _enabled === true ? Util.removeClass( elmWrapper, 'button-disabled' ) : Util.addClass( elmWrapper, 'button-disabled' );\r
-                               enabled = _enabled;\r
+       var ButtonClass = function( groupData, elmWrapper, onUpdate ){\r
+               var data = new UIItemPrivateData();\r
+               data.init( groupData, this, elmWrapper, null, onUpdate, null, false, true, true );\r
+               data.node = groupData.node.createNode( elmWrapper, false, true, 'ui-button-hover', 'pointer' );\r
+               data.node.addEventListener( 'click', onUpdate );\r
+               //MouseEvent.add( groupData.apiuser, elmWrapper, 'click', onUpdate );\r
+       };\r
+       ButtonClass.prototype = {\r
+               focus : function(){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       data.focus = true;\r
+                       Util.addClass( data.elm, 'button-has-focus' );\r
+                       start( data );\r
+               },\r
+               blur : function( keyCode ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       keyCode === 13 && data.onUpdate && data.onUpdate();\r
+                       Util.removeClass( data.elm, 'button-has-focus' );\r
+                       data.focus = false;\r
+                       finish( data );\r
+               },\r
+               enabled : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.enabled !== v ){\r
+                               Util.toggleClass( data.elm, 'button-disabled', !v );\r
+                               data.enabled = v;\r
+                               data.node.disabled( !( data.visible && v ) );\r
                        };\r
-                       return enabled;\r
-               };\r
-               this.visible = function( _visible ){\r
-                       if( Type.isBoolean( _visible ) === true ){\r
-                               elmWrapper.style.display = _visible ? '' : 'none';\r
-                               visible = _visible;\r
+                       return data.enabled;\r
+               },\r
+               visible : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.visible !== v ){\r
+                               data.elm.style.display = v ? '' : 'none';\r
+                               data.visible = v;\r
+                               data.node.disabled( !( data.enabled && v ) );\r
                        };\r
-                       return visible;\r
-               };\r
-               this.destroy = function(){\r
-                       MouseEvent.remove( apiuser, elmWrapper );\r
-                       apiuser = uiGroup = elmWrapper = onUpdate = instance = null;\r
-               };\r
+                       return data.visible;\r
+               },\r
+               destroy : function(){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       // MouseEvent.remove( data.groupData.apiuser, data.elm );\r
+                       data.destroy();\r
+               }\r
        };\r
 \r
-       var ComboBoxClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){\r
-               var elmBox     = Util.getElementsByClassName( elmWrapper, 'combobox' )[ 0 ],\r
-                       elmA       = ELM_COMBOBOX.cloneNode( true ),\r
-                       elmToggle  = Util.getElementsByClassName( elmA, 'combobox-toggle' )[ 0 ],\r
-                       elmValue   = Util.getElementsByClassName( elmA, 'combobox-value' )[ 0 ].firstChild,\r
-                       index      = 0,\r
-                       optionList = [],\r
-                       instance   = this,\r
-                       focus      = false,\r
-                       visible    = true,\r
-                       enabled    = true,\r
-                       value;\r
-               elmBox.appendChild( elmA );\r
+       var ComboBoxClass = function( groupData, elmWrapper, onUpdate ){\r
+               var elmA   = ELM_COMBOBOX.cloneNode( true ),\r
+                       data   = new UIItemPrivateData();\r
+               data.init( groupData, this, elmWrapper, null, onUpdate, null, false, true, true );\r
+               \r
+               data.elmBox      = Util.getElementsByClassName( elmWrapper, 'combobox' )[ 0 ];\r
+               data.elmBox.appendChild( elmA );\r
+               data.elmA        = elmA;\r
+               data.elmToggle   = Util.getElementsByClassName( elmA, 'combobox-toggle' )[ 0 ];\r
+               data.elmValue    = Util.getElementsByClassName( elmA, 'combobox-value' )[ 0 ].firstChild;\r
+               data.selectIndex = 0;\r
+               data.optionList  = [];\r
 \r
-               this.elm = elmBox;\r
-               this.focus = function( e ){\r
-                       MouseEvent.remove( apiuser, elmWrapper, 'click', instance.focus );\r
-                       focus = true;\r
-                       elmA.className = 'combobox-has-focus';\r
-                       start( apiuser, uiGroup, instance );\r
-                       OptionControl.show( apiuser, instance, optionList );\r
+               data.node = groupData.node.createNode( elmWrapper, false, true, 'ui-combobox-hover', 'pointer' );\r
+               data.node.addEventListener( 'click', this.focus, this );\r
+       };\r
+       ComboBoxClass.prototype = {\r
+               focus : function( e ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       data.node.removeEventListener( 'click', this.focus );\r
+                       data.focus = true;\r
+                       data.elmA.className = 'combobox-has-focus';\r
+                       start( data );\r
+                       OptionControl.show( data );\r
                        return false;\r
-               };\r
-               this.blur = function( keyCode ){\r
-                       OptionControl.hide( instance );\r
-                       focus = false;\r
-                       elmA.className = '';\r
-                       finish( apiuser, uiGroup, instance );\r
-                       MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );\r
-               };\r
-               this.enabled = function(){\r
-                       return enabled;\r
-               };\r
-               this.visible = function( _visible ){\r
-                       if( Type.isBoolean( _visible ) === true ){\r
-                               elmWrapper.style.display = _visible ? '' : 'none';\r
-                               visible = _visible;\r
+               },\r
+               blur : function( keyCode ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       OptionControl.hide( this );\r
+                       data.focus = false;\r
+                       data.elmA.className = '';\r
+                       finish( data );\r
+                       data.node.addEventListener( 'click', this.focus, this );\r
+               },\r
+               enabled : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.enabled !== v ){\r
+                               Util.toggleClass( data.elm, 'ui-combobox-disabled', !v );\r
+                               if( data.focus === true && v === false ) this.blur();\r
+                               data.enabled = v;\r
+                               data.node.disabled( !( data.visible && v ) );\r
                        };\r
-                       return visible;\r
-               };\r
-               this.value = function( _value ){\r
-                       if( Type.isString( _value ) === true && value !== _value ){\r
-                               for( var i=0, l = optionList.length, _option; i<l; ++i ){\r
-                                       _option = optionList[ i ];\r
+                       return data.enabled;\r
+               },\r
+               visible : function( v ){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.visible !== v ){\r
+                               data.elm.style.display = v ? '' : 'none';\r
+                               if( data.focus === true && v === false ) this.blur();\r
+                               data.visible = v;\r
+                               data.node.disabled( !( data.enabled && v ) );\r
+                       };\r
+                       return data.visible;\r
+               },\r
+               value : function( _value ){\r
+                       var data = UIItemPrivateData.get( this ),\r
+                               i    = 0,\r
+                               list = data.optionList,\r
+                               l    = list.length,\r
+                               _option;\r
+                       if( Type.isString( _value ) === true && data.value !== _value ){\r
+                               for( ; i < l; ++i ){\r
+                                       _option = list[ i ];\r
                                        if( _value === _option.value ){\r
-                                               value = _value;\r
-                                               index = i;\r
-                                               elmValue.data = _option.displayValue;\r
-                                               if( focus === true ){\r
-                                                       OptionControl.update( instance, _value );\r
+                                               data.value = _value;\r
+                                               data.index = i;\r
+                                               data.elmValue.data = _option.displayValue;\r
+                                               if( data.focus === true ){\r
+                                                       OptionControl.update( this, _value );\r
                                                };\r
-                                               Type.isFunction( onUpdate ) === true && AsyncCall.add( apiuser, onUpdate, [ _value ] );\r
+                                               data.onUpdate && AsyncCall.add( data.groupData.apiuser, data.onUpdate, _value, this );\r
                                                break;\r
                                        };\r
                                };\r
                        };\r
-                       return value;\r
-               };\r
-               this.selectIndex = function(){\r
-                       return index;\r
-               };\r
-               this.createOption = function( _displayValue, _value, _isSelected ){\r
-                       var option = null,\r
+                       return data.value;\r
+               },\r
+               selectIndex : function(){\r
+                       var data = UIItemPrivateData.get( this );\r
+                       return data.selectIndex;\r
+               },\r
+               createOption : function( _displayValue, _value, _isSelected ){\r
+                       var data   = UIItemPrivateData.get( this ),\r
+                               option = null,\r
+                               list   = data.optionList,\r
+                               i      = list.length,\r
                                _option, i;\r
                        _value      = _value || _displayValue;\r
                        _isSelected = !!_isSelected;\r
-                       for( i = optionList.length; i; ){\r
-                               _option = optionList[ --i ];\r
+                       for( ; i; ){\r
+                               _option = list[ --i ];\r
                                if( _value === _option.value ){\r
                                        option = _option;\r
                                        break;\r
                                };\r
                        };\r
                        if( _isSelected === true ){\r
-                               index = optionList.length;\r
-                               elmValue.data = _displayValue;\r
+                               data.selectIndex   = list.length;\r
+                               data.elmValue.data = _displayValue;\r
                        };                      \r
-                       if( option === null ){\r
-                               option = new OptionDataClass( _displayValue, _value, _isSelected );\r
-                               optionList.push( option );\r
-                       };\r
-               };\r
-               this.destroy = function(){\r
-                       instance.blur();\r
-                       MouseEvent.remove( apiuser, elmWrapper );\r
-                       optionList.length = 0;\r
-                       apiuser = uiGroup = elmWrapper = onUpdate = elmBox = elmA = elmToggle = elmValue = optionList = instance = null;\r
-               };\r
-               MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );\r
+                       option === null && list.push( new OptionDataClass( _displayValue, _value, _isSelected ) );\r
+               },\r
+               destroy : function(){\r
+                       var data   = UIItemPrivateData.get( this );\r
+                       data.focus === true && OptionControl.hide( this );\r
+                       // this.blur();\r
+                       // MouseEvent.remove( data.groupData.apiuser, data.elm );\r
+                       data.optionList.length = 0;\r
+                       data.destroy();\r
+               }\r
        };\r
        var OptionDataClass = function( displayValue, value, isCurrent ){\r
                this.displayValue = displayValue;\r
@@ -4368,10 +4802,13 @@ var UI = ( function(){
                };\r
                \r
                function onOptionSelect( e ){\r
-                       for( var i = 0, l = OPTION_LIST.length, _option; i < l; ++i){\r
+                       var i = 0,\r
+                               l = OPTION_LIST.length,\r
+                               _option;\r
+                       for( ; i < l; ++i ){\r
                                _option = OPTION_LIST[ i ];\r
                                if( this === _option.elm ){\r
-                                       updateCurrrentOption(  _option.data.value, true );\r
+                                       updateCurrrentOption( _option.data.value, true );\r
                                        currentCombobox.blur();\r
                                        break;\r
                                };\r
@@ -4387,8 +4824,9 @@ var UI = ( function(){
                        currentIndex;\r
                \r
                function updateCurrrentOption( _value, _updateCombobox ){\r
-                       var _option;\r
-                       for( var i = OPTION_LIST.length; i; ){\r
+                       var _option,\r
+                               i = OPTION_LIST.length;\r
+                       for( ; i; ){\r
                                _option = OPTION_LIST[ --i ];\r
                                if( _value === _option.data.value ){\r
                                        currentOption && currentOption.current( false );\r
@@ -4396,7 +4834,6 @@ var UI = ( function(){
                                        currentOption = _option;\r
                                        currentIndex  = i;\r
                                        _updateCombobox === true && currentCombobox.value( _value );\r
-                                       \r
                                        break;\r
                                };\r
                        };\r
@@ -4409,10 +4846,10 @@ var UI = ( function(){
                        var position = Util.getAbsolutePosition( elm );\r
 \r
                        ELM_OPTION_WRAPPER.style.cssText = [\r
-                                       'width:', elm.offsetWidth - 2, 'px;',\r
-                                       'left:', position.x, 'px;',\r
-                                       'top:', position.y + elm.offsetHeight, 'px;'\r
-                               ].join( '' );\r
+                               'width:', elm.offsetWidth - 2, 'px;',\r
+                               'left:',  position.x, 'px;',\r
+                               'top:',   position.y + elm.offsetHeight, 'px;'\r
+                       ].join( '' );\r
                };\r
                function change( e ){\r
                        var l   = OPTION_LIST.length,\r
@@ -4425,16 +4862,20 @@ var UI = ( function(){
                        return false;\r
                };\r
                return {\r
-                       show: function( _apiuser, _combobox, _optionList ){\r
-                               if( currentItem !== _combobox || currentCombobox === _combobox ) return;\r
+                       show: function( data ){\r
+                               var combobox = data.item,\r
+                                       list     = data.optionList,\r
+                                       i        = 0,\r
+                                       l        = list.length;\r
+                               if( currentItem !== combobox || currentCombobox === combobox ) return;\r
                                currentCombobox && currentCombobox.blur();\r
                                \r
-                               apiuser         = _apiuser;\r
-                               currentCombobox = _combobox;\r
-                               elm             = _combobox.elm;\r
+                               apiuser         = data.groupData.apiuser;\r
+                               currentCombobox = combobox;\r
+                               elm             = data.elmBox;\r
                                \r
-                               for( var i = 0, l = _optionList.length; i<l; ++i ){\r
-                                       OPTION_LIST.unshift( new OptionClass( _optionList[ i ] ) );\r
+                               for( ; i < l; ++i ){\r
+                                       OPTION_LIST.unshift( new OptionClass( list[ i ] ) );\r
                                };\r
                                MouseEvent.add( SUPER_USER_KEY, document, 'mouseup', bodyMouseupHandler );\r
                                KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change, 38 );\r
@@ -4444,7 +4885,7 @@ var UI = ( function(){
                                \r
                                body.appendChild( ELM_OPTION_WRAPPER );\r
                                \r
-                               updateCurrrentOption( _combobox.value(), false );\r
+                               updateCurrrentOption( combobox.value(), false );\r
                                updateWrapperPosition();\r
                                \r
                                SystemTimer.add( SUPER_USER_KEY, updateWrapperPosition, 500 );\r
@@ -4459,7 +4900,7 @@ var UI = ( function(){
                                \r
                                body.removeChild( ELM_OPTION_WRAPPER );\r
                                \r
-                               MouseEvent.remove( SUPER_USER_KEY, doc, 'mouseup', bodyMouseupHandler );\r
+                               MouseEvent.remove( SUPER_USER_KEY, document, 'mouseup', bodyMouseupHandler );\r
                                KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change );\r
                                KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change );\r
                                //KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onEnter );\r
@@ -4477,23 +4918,52 @@ var UI = ( function(){
                                //currentCombobox.blur();\r
                                //OptionControl.hide( currentCombobox );\r
                        },\r
-                       update: function( _combobox, _value ){\r
-                               if( currentCombobox !== _combobox || currentItem !== _combobox ) return;\r
+                       update: function( data, _value ){\r
+                               if( currentCombobox !== data.item || currentItem !== data.item ) return;\r
                                if( currentOption.data.value === _value ) return;\r
                                updateCurrrentOption( _value, true );\r
                        },\r
                        onWindowResize: function( _w, _h ){\r
                                currentCombobox && AsyncCall.add( apiuser, updateWrapperPosition );\r
                        }\r
-               }\r
+               };\r
        })();\r
-\r
-       var UIGroupClass = function( apiuser ){\r
-               var self        = this,\r
-                       itemList    = [],\r
-                       windowW, windowH;\r
-\r
-               this.focus = function( _value ){\r
+       \r
+       var UIGroupPrivateData = function(){};\r
+       UIGroupPrivateData.prototype = {\r
+               apiuser  : null,\r
+               node     : null,\r
+               uigroup  : null,\r
+               itemList : null,\r
+               visible  : true,\r
+               enabled  : true,\r
+               init     : function( apiuser, node, uigroup ){\r
+                       this.apiuser  = apiuser;\r
+                       this.node     = node;\r
+                       this.uigroup  = uigroup;\r
+                       this.itemList = [];\r
+                       UIGroupPrivateData.list.push( this );\r
+               },\r
+               destroy  : function(){\r
+                       \r
+               }\r
+       };\r
+       UIGroupPrivateData.list = [];\r
+       UIGroupPrivateData.get  = function( uigroup ){\r
+               var list = UIGroupPrivateData.list,\r
+                       i    = list.length;\r
+               for( ; i; ){\r
+                       if( list[ --i ].uigroup === uigroup ) return list[ i ];\r
+               };\r
+               return null;\r
+       };\r
+       \r
+       var UIGroupClass = function( apiuser, node ){\r
+               ( new UIGroupPrivateData() ).init( apiuser, node, this );\r
+       };\r
+       UIGroupClass.prototype = {\r
+               focus : function( _value ){\r
+                       var data = UIGroupPrivateData.get( this );\r
                        /*\r
                        if( _value === true ){\r
                                if( currentItem ){\r
@@ -4507,76 +4977,108 @@ var UI = ( function(){
                                finish( apiuser, self, currentItem );\r
                        } else\r
                        */\r
-                       if( _value && Util.getIndex( itemList, _value ) !== -1 ){\r
+                       if( _value && Util.getIndex( data.itemList, _value ) !== -1 ){\r
                                // currentItem = _value;\r
-                               currentList = itemList;\r
+                               currentList = data.itemList;\r
                        };\r
-                       return currentUi === self; \r
-               };\r
-               this.blur = function(){\r
-                       if( currentList === itemList ){\r
+                       return currentUi === this; \r
+               },\r
+               blur : function(){\r
+                       var data = UIGroupPrivateData.get( this );\r
+                       if( currentList === data.itemList ){\r
                                currentList = null;\r
                        };\r
-               };\r
-               this.createInputText = function( _elmWrapper, _onUpdate, _validater ){\r
-                       var _elmValue = Util.getElementsByClassName( _elmWrapper, 'editable-value' )[ 0 ];\r
-                       if( _elmValue ){\r
-                               var ret = new InputTextClass( apiuser, self, _elmWrapper, _elmValue, _onUpdate, _validater );\r
-                               itemList.push( ret );\r
+               },\r
+               createInputText : function( elmWrapper, onUpdate, validater ){\r
+                       var data     = UIGroupPrivateData.get( this ),\r
+                               elmValue = Util.getElementsByClassName( elmWrapper, 'editable-value' )[ 0 ],\r
+                               ret;\r
+                       if( elmValue ){\r
+                               ret = new TextInputClass( data, elmWrapper, elmValue, onUpdate, validater );\r
+                               data.itemList.push( ret );\r
                                return ret;\r
-                       }\r
+                       };\r
                        alert( 'error createInputText' );\r
-               };\r
-               this.createButton = function( _elm, _onClick ){\r
-                       var ret = new ButtonClass( apiuser, self, _elm, _onClick );\r
-                       itemList.push( ret );\r
+               },\r
+               createButton : function( elm, onClick ){\r
+                       var data = UIGroupPrivateData.get( this ),\r
+                               ret  = new ButtonClass( data, elm, onClick );\r
+                       data.itemList.push( ret );\r
                        return ret;\r
-               };\r
-               this.createFileInput = function( _elm, _onUpdate, _validater, _elmFileInput ){\r
-                       var ret = FileInputClass( apiuser, self, _elm, _onUpdate, _validater, _elmFileInput );\r
-                       itemList.push( ret );\r
+               },\r
+               createFileInput : function( elm, onUpdate, validater, elmFileInputReal ){\r
+                       var data     = UIGroupPrivateData.get( this ),\r
+                               elmValue = Util.getElementsByClassName( elm, 'fileinput-value' )[ 0 ],\r
+                               ret;\r
+                       if( elmValue ){\r
+                               ret = new FileInputClass( data, elm, onUpdate, validater, elmFileInputReal, elmValue );\r
+                               data.itemList.push( ret );\r
+                               return ret;\r
+                       };\r
                        return ret;\r
-               };\r
-               this.createCombobox = function( _elm, _onUpdate, _optionList ){\r
-                       var ret = new ComboBoxClass( apiuser, self, _elm, _onUpdate, _optionList );\r
-                       itemList.push( ret );\r
+               },\r
+               createCombobox : function( elm, onUpdate, optionList ){\r
+                       var data = UIGroupPrivateData.get( this ),\r
+                               ret  = new ComboBoxClass( data, elm, onUpdate, optionList );\r
+                       data.itemList.push( ret );\r
                        return ret;\r
-               };\r
-               this.createCheckBox = function(){\r
+               },\r
+               createCheckBox : function(){\r
                        \r
-               };\r
-               this.createRadio = function(){\r
+               },\r
+               createRadio : function(){\r
                        \r
-               };\r
-               this.createSlider = function(){\r
+               },\r
+               createSlider : function(){\r
                        \r
-               };\r
-               this.destroy = function(){\r
-                       var _item;\r
-                       while( _item = itemList.shift() ){\r
-                               _item.destroy();\r
+               },\r
+               visible : function( v ){\r
+                       var data = UIGroupPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.visible !== v ){\r
+                               for( var i = data.itemList.length; i; ){\r
+                                       data.itemList[ --i ].visible( v );\r
+                               };\r
+                               data.visible = v;\r
+                               data.node.disabled( !( data.enabled && v ) );\r
+                       };\r
+                       return data.visible;\r
+               },\r
+               enabled : function( v ){\r
+                       var data = UIGroupPrivateData.get( this );\r
+                       if( Type.isBoolean( v ) === true && data.enabled !== v ){\r
+                               for( var i = data.itemList.length; i; ){\r
+                                       data.itemList[ --i ].enabled( v );\r
+                               };\r
+                               data.enabled = v;\r
+                               data.node.disabled( !( data.visible && v ) );\r
                        };\r
+                       return data.enabled;\r
+               },\r
+               destroy : function(){\r
+                       var data = UIGroupPrivateData.get( this ),\r
+                               _item;\r
                        if( currentUi === this ){\r
-                               currentItem = null;\r
-                               currentUi   = null;\r
-                               currentUser = null;\r
-                               currentList = null;\r
+                               currentItem.blur();\r
+                               // finish( UIItemPrivateData.get( currentItem ) );\r
+                       };                      \r
+                       while( _item = data.itemList.shift() ){\r
+                               _item.destroy();\r
                        };\r
-                       apiuser = self = null;\r
-               };\r
+                       data.destroy();\r
+               }\r
        };\r
        \r
-       function start( _apiuser, _uigroup, _item ){\r
-               if( currentItem !== _item ){\r
-                       currentUi !== _uigroup && currentUi && currentUi.blur();\r
+       function start( data ){\r
+               if( currentItem !== data.item ){\r
+                       currentUi !== data.groupData.uigroup && currentUi && currentUi.blur();\r
                        \r
                        currentItem !== null && currentItem.blur();\r
                        \r
-                       currentUser = _apiuser;\r
-                       currentUi   = _uigroup;\r
-                       currentItem = _item;\r
+                       currentUser = data.groupData.apiuser;\r
+                       currentUi   = data.groupData.uigroup;\r
+                       currentItem = data.item;\r
                        \r
-                       _uigroup.focus( _item );\r
+                       currentUi.focus( currentItem );\r
                        \r
                        // if( currentUser !== _apiuser ) {\r
                                KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );\r
@@ -4586,9 +5088,9 @@ var UI = ( function(){
                        // };\r
                };\r
        }\r
-       function finish( _apiuser, _uigroup, _item ){\r
-               if( currentItem === _item ){\r
-                       _uigroup.blur();\r
+       function finish( data ){\r
+               if( currentItem === data.item ){\r
+                       currentUi.blur();\r
                        \r
                        currentUser = null;\r
                        currentUi   = null;\r
@@ -4598,78 +5100,241 @@ var UI = ( function(){
                        KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );\r
                        KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );\r
                        KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );\r
-                       KeyEvent.updateCurrentListener( _apiuser );\r
+                       KeyEvent.updateCurrentListener( data.groupData.apiuser );\r
+               };\r
+       };\r
+\r
+       function onKeyDown( e ){\r
+               if( currentItem === null ) return true;\r
+               var keyCode = e.keyCode,\r
+                       index   = Util.getIndex( currentList, currentItem );\r
+               if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt\r
+                       keyCode === 9  && tabShift( index, e.shiftKey === true ? -1 : 1 );\r
+                       keyCode === 13 && currentItem instanceof ComboBoxClass && OptionControl.onEnter();\r
+                       keyCode === 13 && tabShift( index, 1 );                 \r
+                       currentItem && currentItem.blur( keyCode );\r
+                       return false;\r
+               };\r
+       };\r
+\r
+       function tabShift( index, way ){\r
+               var l = currentList.length,\r
+                       i = index + way,\r
+                       item;\r
+               if( l < 2 ) return;\r
+               while( i !== index ){\r
+                       i = i < 0 ?\r
+                               l - 1 :\r
+                               i < l ? i : 0; // 0 < i < l\r
+                       item = currentList[ i ];\r
+                       if( item.enabled() === true && item.visible() === true ){\r
+                               AsyncCall.add( currentUser, item.focus, null, item );\r
+                               return;\r
+                       };\r
+                       i += way;\r
+               };\r
+       };\r
+       \r
+       return {\r
+               createUIGroup: function( apiuser, node ){\r
+                       var uid  = apiuser.getUID(),\r
+                               list = UI_LIST[ uid ],\r
+                               ui   = new UIGroupClass( apiuser, node );\r
+                       if( Type.isArray( list ) === false ){\r
+                               list = UI_LIST[ uid ] = [];\r
+                       };\r
+                       list.push( ui );\r
+                       return ui;\r
+               },\r
+               onWindowResize: function( w, h ){\r
+                       windowW = w;\r
+                       windowH = h;\r
+                       currentItem instanceof ComboBoxClass && OptionControl.onWindowResize( w, h );\r
+                       currentItem instanceof TextInputClass && TextInputManager.onWindowResize( w, h );\r
+                       currentItem instanceof FileInputClass && FileInputManager.onWindowResize( w, h );\r
+               },\r
+               onCurrentApplicationChange: function( _apiuser ){\r
+                       currentList = UI_LIST[ _apiuser.getUID() ];\r
+               },\r
+               onApplicationShutdown: function( _apiuser ){\r
+                       KeyEvent.remove( _apiuser );\r
+               },\r
+               onSystemShutdown: function(){\r
+                       \r
+               }\r
+       };\r
+})();\r
+\r
+var UIForm = ( function(){\r
+       var FORM_LIST           = [];\r
+       var CLASSNAME_FORM      = 'uiform-invisible';\r
+       var CLASSNAME_FILE_WRAP = 'ui-fileinput-wrapper';\r
+       var FormItemData = function(){};\r
+    var windowW, windowH;\r
+       FormItemData.prototype = {\r
+               formData : null,\r
+               uiItem   : null,\r
+               init : function( formData, uiItem ){\r
+                       this.formData = formData;\r
+                       this.uiItem   = uiItem;\r
+               },\r
+               onUpdate : function( v ){\r
+                       // var index = Util.getIndex( this.formData.itemList, this );\r
+               }\r
+       };\r
+       \r
+       var FormPrivateData = function(){};\r
+       FormPrivateData.prototype = {\r
+               apiuser  : null,\r
+               node     : null,\r
+               form     : null,\r
+               elmForm  : null,\r
+               itemList : null,\r
+               visible  : true,\r
+               enabled  : true,\r
+               init     : function( apiuser, from, node, elm, elmForm ){\r
+                       this.apiuser      = apiuser;\r
+                       this.form         = form;\r
+                       this.ui           = apiuser.createUIGroup( node );\r
+                       this.node         = node;\r
+                       this.elm          = elm;\r
+                       this.elmForm      = elmForm;\r
+                       this.itemList     = [];\r
+                       elmForm.className = CLASSNAME_FORM;\r
+                       FormPrivateData.list.push( this );\r
+                       \r
+                       var forms = Util.copyArray( elmForm.getElementsByTagName( '*' ) ),\r
+                               l     = forms.length,\r
+                               i     = 0,\r
+                               items = 'input,select,textarea,button',\r
+                               form, data, el, wrap;\r
+                       for( ; i<l; ++i ){\r
+                               form = forms[ i ];\r
+                               if( form.nodeType !== 1 ) continue;\r
+                               switch( form.tagName.toLowerCase() ){\r
+                                       case 'input':\r
+                                               switch( form.type.toLowerCase() ){\r
+                                                       case 'text':\r
+                                                               break;\r
+                                                       case 'file':\r
+                                                               el = document.createElement( 'div' );\r
+                                                               el.className = 'uiform-file-container';\r
+                                                               el.appendChild( document.createElement( 'div' ) );\r
+                                                               el.appendChild( document.createElement( 'div' ) );\r
+                                                               el.firstChild.className = 'uiform-label';\r
+                                                               el.lastChild.className  = 'uiform-file fileinput-value';\r
+                                                               // opera9 don't work for opera9;\r
+                                                               //el = Util.pullHtmlAsTemplete( '<div class="uiform-file-container"><div class="uiform-label"></div><div class="uiform-file fileinput-value"></div></div>' );\r
+                                                               elm.appendChild( el );\r
+                                                               data = new FormItemData();\r
+                                                               wrap = document.createElement( 'div' );\r
+                                                               form.parentNode.insertBefore( wrap, form );\r
+                                                               wrap.className = CLASSNAME_FILE_WRAP;\r
+                                                               wrap.appendChild( form );\r
+                                                               data.init( this, this.ui.createFileInput( el, data.onUpdate, null, form ) );\r
+                                                               this.itemList.push( data );\r
+                                                               break;\r
+                                                       case 'button':\r
+                                                               break;\r
+                                                       default:\r
+                                                               continue;\r
+                                               };\r
+                                               break;\r
+                                       case 'select':\r
+                                               break;\r
+                                       case 'button':\r
+                                               break;\r
+                                       case 'textarea':\r
+                                               break;\r
+                                       default:\r
+                                               continue;\r
+                               };\r
+                       };\r
+               },\r
+               destroy  : function(){\r
+                       \r
+               }\r
+       };\r
+       FormPrivateData.list = [];\r
+       FormPrivateData.get  = function( from ){\r
+               var list = FormPrivateData.list,\r
+                       i    = list.length;\r
+               for( ; i; ){\r
+                       if( list[ --i ].form === form ) return list[ i ];\r
                };\r
+               return null;\r
        };\r
-\r
-       function onKeyDown( e ){\r
-               if( currentItem === null ) return true;\r
-               var keyCode = e.keyCode,\r
-                       _index  = Util.getIndex( currentList, currentItem );\r
-               if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt\r
-                       keyCode === 9  && tabShift( _index, e.shiftKey === true ? -1 : 1 );\r
-                       keyCode === 13 && currentItem instanceof ComboBoxClass && OptionControl.onEnter();\r
-                       keyCode === 13 && tabShift( _index, 1 );                        \r
-                       currentItem && currentItem.blur( keyCode );\r
-               };\r
-               return false;\r
+       \r
+       var FormClass = function( apiuser, node, elm, elmForm ){\r
+               ( new FormPrivateData() ).init( apiuser, this, node, elm, elmForm );\r
        };\r
-\r
-       function tabShift( _index, _way ){\r
-               var l = currentList.length,\r
-                       i = _index + _way,\r
-                       _item;\r
-               if( l < 2 ) return;\r
-               while( i !== _index ){\r
-                       i = i < 0 ?\r
-                               l - 1 :\r
-                               i < l ? i : 0; // 0 < i < l\r
-                       _item = currentList[ i ];\r
-                       if( _item.enabled() === true && _item.visible() === true ){\r
-                               AsyncCall.add( currentUser, _item.focus );\r
-                               return;\r
-                       };\r
-                       i += _way;\r
-               };\r
+       FormClass.prototype = {\r
+               createTextInput : function(){\r
+                       \r
+               },\r
+               createMultiLineInput : function(){\r
+                       \r
+               },\r
+               createFileInput : function(){\r
+                       \r
+               },\r
+               createButton : function(){\r
+                       \r
+               },\r
+               createComboBox : function(){\r
+                       \r
+               },\r
+               submit : function(){\r
+                       \r
+               }\r
        };\r
        \r
        return {\r
-               createUIGroup: function( _apiuser ){\r
-                       var _uid  = _apiuser.getUID(),\r
-                               _list = UI_LIST[ _uid ],\r
-                               _ui   = new UIGroupClass( _apiuser );\r
-                       if( Type.isArray( _list ) === false ){\r
-                               _list = UI_LIST[ _uid ] = [];\r
-                       }\r
-                       _list.push( _ui );\r
-                       return _ui;\r
+               createForm: function( apiuser, nodeOrElm, opt_elmForm ){\r
+                       var uid  = apiuser.getUID(),\r
+                               list = FORM_LIST[ uid ],\r
+                               node, elm, form;\r
+                       if( PointingDeviceEventTree.isNodeInstance( nodeOrElm ) === true ){\r
+                               node = nodeOrElm;\r
+                               elm  = PointingDeviceEventTree._getNodePrivateData( nodeOrElm ).elm;\r
+                       } else {\r
+                               // App が eventTree を持っている?\r
+                               // App が eventTree を持っていない\r
+                               elm  = nodeOrElm;\r
+                       };  \r
+                       form = new FormClass( apiuser, node, elm, opt_elmForm );\r
+                       if( Type.isArray( list ) === false ){\r
+                               list = FORM_LIST[ uid ] = [];\r
+                       };\r
+                       list.push( form );\r
+                       return form;\r
                },\r
                onWindowResize: function( w, h ){\r
                        windowW = w;\r
                        windowH = h;\r
                        currentItem instanceof ComboBoxClass && OptionControl.onWindowResize( w, h );\r
+                       currentItem instanceof TextInputClass && TextInputManager.onWindowResize( w, h );\r
+                       currentItem instanceof FileInputClass && FileInputManager.onWindowResize( w, h );\r
                },\r
                onCurrentApplicationChange: function( _apiuser ){\r
-                       currentList = UI_LIST[ _apiuser.getUID() ];\r
                },\r
                onApplicationShutdown: function( _apiuser ){\r
-                       KeyEvent.remove( _apiuser );\r
                },\r
                onSystemShutdown: function(){\r
                        \r
                }\r
-       }\r
+       };\r
 })();\r
 \r
-\r
 var Finder = ( function(){\r
-       var HTML_FINDER_ICON = ( function(){\r
-               return ( UA.isIE === true && UA.ieVersion < 8 ?\r
-               [\r
-                       '<div class="finder-icon fnder-icon-ie7">',\r
-                               '<a href="#" class="finder-icon-main">',\r
-                                       '<span class="finder-icon-handle"></span>',\r
-                                       '<span class="finder-icon-thumbnail"></span>',\r
+       var FINDER_LIST              = [],\r
+               ELM_ORIGIN_LOCATION_ITEM = Util.pullHtmlAsTemplete( '<div class="finder-location-item"></div>' ),\r
+               HTML_FINDER_ICON = ( function(){\r
+                       return ( UA.isIE === true && UA.ieVersion < 8 ?\r
+                       [\r
+                               '<div class="finder-icon fnder-icon-ie7">',\r
+                                       '<div class="finder-icon-handle"></div>',\r
+                                       '<div class="file-icon"><div></div></div>',\r
                                        '<span class="finder-icon-cell finder-icon-ie-filename">',\r
                                                '<span class="finder-icon-vertical-middle-outer">',\r
                                                        '<span class="finder-icon-vertical-middle-inner">',\r
@@ -4684,375 +5349,762 @@ var Finder = ( function(){
                                                        '</span>',\r
                                                '</span>',\r
                                        '</span>',\r
-                               '</a>',\r
-                               '<div class="finder-icon-console">',\r
-                                       '<a href="#" class="finder-icon-console-action"></a>',\r
-                                       '<a href="#" class="finder-icon-console-editor-apps"></a>',\r
-                                       '<a href="#" class="finder-icon-console-viewer-apps"></a>',\r
-                               '</div>',\r
-                       '</div>'\r
-               ] :\r
-               [\r
-                       '<div class="finder-icon fnder-icon-modern">',\r
-                               '<span class="finder-icon-handle"></span>',\r
-                               '<span class="finder-icon-thumbnail"></span>',\r
-                               '<span class="finder-icon-filename break-word">file name</span>',\r
-                               '<span class="finder-icon-summary break-word">file descriptiion</span>',\r
-                               '<div class="finder-icon-console">',\r
-                                       '<a href="#" class="finder-icon-console-action"></a>',\r
-                                       '<a href="#" class="finder-icon-console-editor-apps"></a>',\r
-                                       '<a href="#" class="finder-icon-console-viewer-apps"></a>',\r
-                               '</div>',\r
-                       '</div>'\r
-               ] ).join( '' );\r
-       })();\r
-\r
+                                       '<div class="finder-icon-down"></div>',\r
+                               '</div>'\r
+                       ] :\r
+                       [\r
+                               '<div class="finder-icon fnder-icon-modern">',\r
+                                       '<div class="finder-icon-handle"></div>',\r
+                                       '<div class="file-icon"><div></div></div>',\r
+                                       '<div class="finder-icon-filename break-word">file name</div>',\r
+                                       '<div class="finder-icon-summary break-word">file descriptiion</div>',\r
+                                       '<div class="finder-icon-down">&gt;</div>',\r
+                               '</div>'\r
+                       ] ).join( '' );\r
+               })(),\r
+               ELM_ORIGIN_FINDER_ICON = Util.pullHtmlAsTemplete( HTML_FINDER_ICON ),\r
+               ICON_HEIGHT            = Util.getElementSize( ELM_ORIGIN_FINDER_ICON ).height;\r
        \r
-       var FINDER_ARRAY                    = [],\r
-               ELM_ORIGIN_FINDER_LOCATION_ITEM = Util.pullHtmlAsTemplete( '<li id="templete-finder-location-item" class="finder-location-item"><a href="#"></a></li>'),\r
-               ELM_ORIGIN_FINDER_ICON          = Util.pullHtmlAsTemplete( HTML_FINDER_ICON ),\r
-               ELM_ORIGIN_CONTAINER            = Util.pullHtmlAsTemplete( [\r
-                       '<div id="templete-finder-container" class="finder-container">',\r
-                               '<div class="finder-header">',\r
-                                       '<ul class="finder-location"></ul>',\r
-                                       '<div class="finder-sidebar-switch button">side</div>',\r
-                                       '<div class="finder-style-switch button">style</div>',\r
-                                       '<div class="finder-action-switch button">action</div>',\r
-                               '</div>',\r
-                               '<div class="finder-body"></div>',\r
-                       '</div>'\r
-               ].join( '' ) ),\r
-               ICON_HEIGHT                     = Util.getElementSize( ELM_ORIGIN_FINDER_ICON ).height,\r
-               ICON_CLASSNAME                  = 'finder-icon-thumbnail',\r
-               FINDER_ICON_POOL                = [],\r
-               BREAD_OBJECT_POOL               = [];\r
+       // t : 時間\r
+    // b : 開始の値(開始時の座標やスケールなど)\r
+    // c : 開始と終了の値の差分\r
+    // d : Tween(トゥイーン)の合計時間\r
+\r
+       function easeOutQuad( t, b, c, d ){\r
+               t /= d;\r
+               return -c * t*( t-2 ) + b;\r
+       };\r
        \r
-       var FinderIconClass = function(){\r
-               var elmContainer,\r
-                       ELM_WRAPPER       = ELM_ORIGIN_FINDER_ICON.cloneNode( true),\r
-                       ELM_THUMBNAIL     = Util.getElementsByClassName( ELM_WRAPPER, ICON_CLASSNAME )[ 0 ],\r
-                       ELM_FILENAME      = Util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-filename' )[ 0 ],\r
-                       ELM_DESCRIPTION   = Util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-summary' )[ 0 ],\r
-                       ELM_EDITOR_BUTTON = Util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-console-editor-apps' )[ 0 ],\r
-                       ELM_VIEWER_BUTTON = Util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-console-viewer-apps' )[ 0 ],\r
-                       ELM_ACTION_BUTTON = Util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-console-action' )[ 0 ],\r
-                       instansce         = this,\r
-                       file, w, index, style,\r
-                       onDownCallback, onEditorCallback, onViewerCallback, onActionCallback,\r
-                       viewerList, editorList;\r
-               \r
-               MouseEvent.add( SUPER_USER_KEY, ELM_WRAPPER,       'click', onDownClick );\r
-               MouseEvent.add( SUPER_USER_KEY, ELM_EDITOR_BUTTON, 'click', onEditorClick );\r
-               MouseEvent.add( SUPER_USER_KEY, ELM_VIEWER_BUTTON, 'click', onViwerClick );\r
-               MouseEvent.add( SUPER_USER_KEY, ELM_ACTION_BUTTON, 'click', onActionClick );\r
-               function onDownClick(){\r
-                       onDownCallback( index );\r
-                       return false;\r
-               }\r
-               function onEditorClick(){\r
-                       onEditorCallback( file, editorList[ 0 ] );\r
+/**\r
+ * FinderIconClass\r
+ */\r
+       var FinderIconClass = function(){};\r
+       FinderIconClass.prototype = {\r
+               finderData       : null,\r
+               file             : null,\r
+               elm              : null,\r
+               node             : null,\r
+               _index           : -1,\r
+               _style           : -1,\r
+               init : function( page, file, w, index, style ){\r
+                       if( !this.elm ) this.elm  = ELM_ORIGIN_FINDER_ICON.cloneNode( true );\r
+\r
+                       if( this.page !== page ){\r
+                               this.page = page;\r
+                               page.elm.appendChild( this.elm );\r
+                               this.node && this.node.remove();\r
+                               this.node = page.node.createNode( this.elm, false, true, 'finder-icon-hover', '' );\r
+                       };\r
+                       if( this.file !== file ){\r
+                               this.file && this.file.destroy();\r
+                               this.file   = file;\r
+                               this._index = index;\r
+                               this.draw( w );\r
+                               return;\r
+                       };\r
+                       if( this._index !== index ){\r
+                               this._index = index;\r
+                               this.resize( w );\r
+                       };\r
+               },\r
+               index : function( _index ){     \r
+                       return this._index;\r
+               },\r
+               style : function( _style ){\r
+                       return this._style;\r
+               },\r
+               draw : function( w ){\r
+                       var file       = this.file,\r
+                               elm        = this.elm,\r
+                               thumb      = file.getThumbnail(),\r
+                               elmThumb   = Util.getElementsByClassName( elm, 'file-icon' )[ 0 ].firstChild,\r
+                               elmName    = Util.getElementsByClassName( elm, 'finder-icon-filename' )[ 0 ],\r
+                               elmDesc    = Util.getElementsByClassName( elm, 'finder-icon-summary' )[ 0 ];\r
+                       if( thumb.image ){\r
+                               elmThumb.className = 'has-thumbnail';\r
+                               elmThumb.style.backgroundImage = [ 'url(', thumb.image, ')' ].join( '' );\r
+                       } else {\r
+                               elmThumb.className = thumb.className;\r
+                               elmThumb.style.backgroundImage = '';\r
+                       };\r
+                       \r
+                       elmName.firstChild.data = file.getName();\r
+                       elmDesc.firstChild.data = file.getSummary();\r
+                       \r
+                       this.resize( w );\r
+               },\r
+               resize : function( w ){\r
+                       this.node.update( 0, this._index * ICON_HEIGHT, w );\r
+               },\r
+               onEditorClick : function( e ){\r
+                       this.onEditorCallback && this.onEditorCallback( this.file, this.file.editorApplicationList()[ 0 ] );\r
                        return false;\r
-               }\r
-               function onViwerClick(){\r
-                       onViewerCallback( file, viewerList[ 0 ] );\r
+               },\r
+               onViwerClick : function( e ){\r
+                       this.onViewerCallback && this.onViewerCallback( this.file, this.file.viewerApplicationList()[ 0 ] );\r
                        return false;\r
-               }\r
-               function onActionClick(){\r
-                       onActionCallback( file );\r
+               },\r
+               onActionClick : function( e ){\r
+                       this.onActionCallback && this.onActionCallback( this.file );\r
                        return false;\r
-               }\r
-               function draw(){\r
-                       var _thumb = file.getThumbnail();\r
-                       if( _thumb.image ){\r
-                               ELM_THUMBNAIL.className = ICON_CLASSNAME + ' has-thumbnail';\r
-                               ELM_THUMBNAIL.style.backgroundImage = [ 'url(', _thumb.image, ')'].join( '');\r
-                       } else {\r
-                               ELM_THUMBNAIL.className = ICON_CLASSNAME + ' ' + _thumb.className;\r
-                               ELM_THUMBNAIL.style.backgroundImage = '';\r
-                       }\r
-                       ELM_FILENAME.firstChild.data = file.getName();\r
-                       ELM_DESCRIPTION.firstChild.data = file.getSummary();\r
+               },\r
+               destroy : function(){\r
+                       this.elm && this.elm.parentNode.removeChild( this.elm );\r
+                       this.file && this.file.destroy();\r
+                       this.node && this.node.remove();\r
+                       delete this.page;\r
+                       delete this.file;\r
+                       delete this.node;\r
+                       delete this._index;\r
+                       delete this._style;\r
+                       FinderIconClass.pool.push( this );\r
+               }       \r
+       };\r
+       FinderIconClass.pool = [];\r
+       FinderIconClass.get = function( page, file, w, index, style ){\r
+               var _icon = FinderIconClass.pool.length > 0 ? FinderIconClass.pool.shift() : new FinderIconClass();\r
+               _icon.init( page, file, w, index, style );\r
+               return _icon;\r
+       };\r
+\r
+/**\r
+ * PathClass\r
+ */\r
+       var PathClass = function(){};\r
+       PathClass.prototype = {\r
+               finderData : null,\r
+               elm        : null,\r
+               node       : null,\r
+               file       : null,\r
+               _index     : null,\r
+               w          : 0,\r
+               init : function( finderData, file, index ){\r
+                       if( !this.elm ) this.elm  = ELM_ORIGIN_LOCATION_ITEM.cloneNode( true );\r
                        \r
-                       if( Type.isArray( viewerList ) === true && viewerList.length > 0 ){\r
-                               ELM_VIEWER_BUTTON.style.display = '';\r
-                       } else {\r
-                               ELM_VIEWER_BUTTON.style.display = 'none';\r
+                       if( this.finderData !== finderData ){\r
+                               this.finderData = finderData;\r
+                               finderData.elmPath.appendChild( this.elm );\r
+                               this.node && this.node.remove();\r
+                               delete this.node;\r
                        };\r
-                       if( Type.isArray( editorList ) === true && editorList.length > 0 ){\r
-                               ELM_EDITOR_BUTTON.style.display = '';\r
-                       } else {\r
-                               ELM_EDITOR_BUTTON.style.display = 'none';\r
+                       if( this.file !== file ){\r
+                               this.file = file;\r
+                               this.draw();\r
                        };\r
-               }\r
-               function resize(){\r
-                       // ELM_WRAPPER.style.top = (index * ICON_HEIGHT) +'px';\r
-               }\r
-               function onCollect(){\r
-                       elmContainer.removeChild( ELM_WRAPPER );\r
-                       elmContainer = null;\r
-                       FINDER_ICON_POOL.push( instansce );\r
-               }\r
-               \r
-               this.init = function( _file, _elmContainer, _w, _index, _style, _onDownCallback, _onEditorCallback, _onViewerCallback, _onActionCallback ){\r
-                       if( elmContainer !== _elmContainer){\r
-                               _elmContainer.appendChild( ELM_WRAPPER );\r
-                               elmContainer = _elmContainer;\r
-                       }\r
-                       if( file !== _file ){\r
-                               file && file.destroy();\r
-                               file       = _file;\r
-                               viewerList = file.viewerApplicationList();\r
-                               editorList = file.editorApplicationList();\r
-                               draw();\r
-                       }\r
-                       if( index !== _index){\r
-                               index = _index;\r
-                               resize();\r
-                       }\r
-                       onDownCallback   = _onDownCallback;\r
-                       onEditorCallback = _onEditorCallback;\r
-                       onViewerCallback = _onViewerCallback;\r
-                       onActionCallback = _onActionCallback;\r
-               };\r
-               this.elm = ELM_WRAPPER,\r
-               this.index = function( _index){ \r
-                       return index;\r
-               };\r
-               this.style = function( _style ){\r
-                       return style;\r
-               };\r
-               this.onResize = function( w ){\r
+                       this._index = index;\r
+                       if( !this.node ) this.node = finderData.nodePath.createNode( this.elm, false, true, 'finder-path-hover', 'pointer' );\r
+               },\r
+               draw  : function(){\r
+                       this.elm.className = 'file-icon-' + this.file.getType();\r
+                       this.elm.innerHTML = this.file.getName();                       \r
+               },\r
+               textWidth : function(){\r
+                       this.elm.style.width = 'auto';\r
+                       var ret = this.elm.offsetWidth;\r
+                       this.elm.style.width = '';\r
+                       return ret + 15;\r
+               },\r
+               update : function( x, w ){\r
+                       this.node.update( x - 15, undefined, w );\r
+               },\r
+               index : function( _index ){\r
+                       return this._index;\r
+               },\r
+               destroy : function(){\r
+                       this.finderData.elmPath.removeChild( this.elm );\r
+                       this.node && this.node.remove();\r
                        \r
-               };\r
-               this.destroy = function(){\r
-                       //MouseEvent.remove( SUPER_USER_KEY, ELM_WRAPPER,       'click', onDownClick );\r
-                       //MouseEvent.remove( SUPER_USER_KEY, ELM_EDITOR_BUTTON, 'click', onEditorClick );\r
-                       //MouseEvent.remove( SUPER_USER_KEY, ELM_VIEWER_BUTTON, 'click', onViwerClick );\r
-                       //MouseEvent.remove( SUPER_USER_KEY, ELM_ACTION_BUTTON, 'click', onActionClick );\r
-                       elmContainer.removeChild( ELM_WRAPPER );\r
-                       file && file.destroy();\r
-                       file = elmContainer = onDownCallback = onEditorCallback = onViewerCallback = onActionCallback = viewerList = editorList = null;\r
-                       FINDER_ICON_POOL.push( instansce );\r
-               };\r
-       }\r
-       function updateIconPosition( _style, _w, _index, _elm ){\r
-               \r
-       }\r
-       var BreadcrumbClass = function(){\r
-               var elmContainer,\r
-                       ELM_WRAPPER  = ELM_ORIGIN_FINDER_LOCATION_ITEM.cloneNode( true ),\r
-                       ELM_FILENAME = ELM_WRAPPER.getElementsByTagName( 'a' )[ 0 ],\r
-                       instansce    = this,\r
-                       file, w, index,\r
-                       callback;\r
-               MouseEvent.add( SUPER_USER_KEY, ELM_WRAPPER, 'click', onClick );\r
-               function draw(){\r
-                       ELM_FILENAME.className = 'file-icon-' + file.getType();\r
-                       ELM_FILENAME.innerHTML = file.getName();\r
+                       delete this.finderData;\r
+                       delete this.elm;\r
+                       delete this.node;\r
+                       delete this.file;\r
+                       delete this._index;\r
+                       PathClass.pool.push( this );\r
                }\r
-               function resize( index ){\r
-                       ELM_WRAPPER.style.left = ( index * 90 ) + 'px';\r
+       };\r
+       PathClass.pool = [];\r
+       PathClass.get  = function( finderData, file, index ){\r
+               var _bread = PathClass.pool.length > 0 ? PathClass.pool.shift() : new PathClass();\r
+               _bread.init( finderData, file, index );\r
+               return _bread;\r
+       };\r
+       \r
+       \r
+       /**\r
+        * Page\r
+        */\r
+       var PageClass = function(){};\r
+       PageClass.prototype = {\r
+               nodeRoot     : null,\r
+               elmRoot      : null,\r
+               elmScroll    : null,\r
+               elm          : null,\r
+               node         : null,\r
+               folder       : null,\r
+               iconList     : null,\r
+               sliding      : false,\r
+               currentX     : 0,\r
+               panTime      : 0,\r
+               startX       : 0,\r
+               offsetX      : 0,\r
+               panTotalTime : 0,\r
+               isPanOut     : false,\r
+               init : function( nodeRoot, elmRoot, elmScroll ){\r
+                       this.nodeRoot  = nodeRoot;\r
+                       this.elmRoot   = elmRoot;\r
+                       this.elmScroll = elmScroll;\r
+                       \r
+                       if( this.elm === null ){\r
+                               this.elm = document.createElement( 'div' );\r
+                       };\r
+                       elmScroll.appendChild( this.elm );\r
+                       this.elm.style.cssText = 'position:absolute;top:0;';\r
+                       // this.elm.style.display = 'none';\r
+                       this.node = this.nodeRoot.createNode( this.elm, true, false );\r
+                       if( this.iconList === null ){\r
+                               this.iconList = [];\r
+                       };\r
+               },\r
+               panInReady : function( way ){\r
+                       this.elm.style.display = '';\r
+                       var x = this.sliding === true ? this.currentX : way * this.nodeRoot.width();\r
+                       this.startX       = this.currentX = x;\r
+                       this.targetX      = 0;\r
+                       this.offsetX      = -x;\r
+                       this.panTime      = 0;\r
+                       this.panTotalTime = 20;\r
+                       this.sliding      = true;\r
+                       this.isPanOut     = false;\r
+                       // this.elm.style.left = x + 'px';\r
+                       this.node.x( x );\r
+               },\r
+               panOutReady : function( way ){\r
+                       var x = -way * this.nodeRoot.width();\r
+                       this.startX       = this.currentX || 0;\r
+                       this.targetX      = x;\r
+                       this.offsetX      = x - this.startX;\r
+                       this.panTime      = 0;\r
+                       this.panTotalTime = 20;\r
+                       this.sliding      = true;\r
+                       this.isPanOut     = true;\r
+               },\r
+               pan : function(){\r
+                       var page = this,\r
+                               x    = page.currentX = easeOutQuad( page.panTime, page.startX, page.offsetX, page.panTotalTime );\r
+                       // page.elm.style.left = x + 'px';\r
+                       this.node.x( x );\r
+                       if( page.panTotalTime < ++page.panTime ){\r
+                               delete page.panTime;\r
+                               delete page.startX;\r
+                               delete page.offsetX;                                    \r
+                               delete page.panTotalTime;\r
+                               delete page.sliding;\r
+                               if( this.isPanOut === true ) this.elm.style.display = 'none';\r
+                       };\r
+               },\r
+               draw : function( folder ){\r
+                       var _w = this.nodeRoot.width();\r
+                       this.folder = folder;\r
+                       var data     = this,\r
+                               iconList = data.iconList,\r
+                               i        = 0,\r
+                               j        = 0,\r
+                               l        = folder.getChildFileLength(),\r
+                               m        = iconList.length,\r
+                               scrollY  = -this.nodeRoot.scrollY(),\r
+                               rootH    = scrollY + this.nodeRoot.height(),\r
+                               icon;\r
+\r
+                       for( ; i < l; ++i ){\r
+                               if( ( i + 1 ) * ICON_HEIGHT < scrollY || rootH < i * ICON_HEIGHT ) continue;\r
+                               if( j < m ){\r
+                                       iconList[ j ].init( this, folder.getChildFileAt( i ), _w, i, data.style );\r
+                               } else {\r
+                                       iconList.push( FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );\r
+                               };\r
+                               j++;\r
+                       };\r
+                       data.elmRoot.className    = folder.getState() === Const.FILE.STATE.LOADING ? 'finder-body loading' : 'finder-body';\r
+                       // data.elmRoot.style.height = ( data.h - data.headH ) + 'px';\r
+                       \r
+                       while( j < iconList.length ) iconList.pop().destroy();\r
+                       data.elmScroll.style.height = ( l * ICON_HEIGHT ) + 'px';\r
+               },\r
+               onScroll : function(){\r
+                       var _w       = this.nodeRoot.width();\r
+                       \r
+                       var data     = this,\r
+                               iconList = data.iconList,\r
+                               folder   = this.folder,\r
+                               i        = 0,\r
+                               j        = 0,\r
+                               l        = folder.getChildFileLength(),\r
+                               scrollY  = -this.nodeRoot.scrollY(),\r
+                               rootH    = scrollY + this.nodeRoot.height(),\r
+                               startIndex = 0 < iconList.length ? iconList[ 0 ]._index : 0,\r
+                               icon;\r
+                       \r
+                       // console.log( ' > ' + scrollY + ' , ' + rootH )\r
+                       for( ; i < l; ++i ){\r
+                               if( ( i + 1 ) * ICON_HEIGHT < scrollY || rootH < i * ICON_HEIGHT ){\r
+                                       if( iconList.length <= j ) continue;\r
+                                       icon = iconList[ j ];\r
+                                       if( icon._index !== i ) continue;\r
+                                       icon.destroy();\r
+                                       iconList.splice( j, 1 );\r
+                                       continue;\r
+                               };\r
+                               if( iconList.length <= j || iconList[ j ]._index !== i ){\r
+                                       if( i < startIndex ){\r
+                                               iconList.splice( j, 0, FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );                    \r
+                                       } else\r
+                                       if( startIndex + iconList.length <= i ){\r
+                                               iconList.push( FinderIconClass.get( this, folder.getChildFileAt( i ), _w, i, data.style ) );                    \r
+                                       };                                      \r
+                               };\r
+                               ++j;\r
+                       };\r
+                       \r
+                       //while( j < iconList.length ) iconList.pop().destroy();\r
+               },\r
+               resize : function( w ){\r
+                       var list = this.iconList,\r
+                               i    = list.length;\r
+                       for( ; i; ) list[ --i ].resize( w );\r
+               },\r
+               destroy : function(){\r
+                       var icon;\r
+                       while( icon = this.iconList.shift() ) icon.destroy();\r
+                       \r
+                       this.elm.parentNode.removeChild( this.elm );\r
                }\r
-               function onClick(){\r
-                       callback( index );\r
+       };\r
+       \r
+       var ApplicationButton = function(){};\r
+       ApplicationButton.prototype = {\r
+               elm     : null,\r
+               button  : null,\r
+               app     : null,\r
+               file    : null,\r
+               fileUID : -1,\r
+               init    : function( ui, elmParent, app, file ){\r
+                       if( this.elm === null ){\r
+                               this.elm = document.createElement( 'div' );\r
+                       };\r
+                       elmParent.appendChild( this.elm );\r
+                       this.elm.className = 'button';\r
+                       this.elm.innerHTML = app.getDisplayName();\r
+                       \r
+                       var that = this;\r
+                       this.button = ui.createButton( this.elm, function(){\r
+                               that.onClick();\r
+                               // that = null;\r
+                       } );\r
+                       \r
+                       this.app     = app;\r
+                       this.file    = file;\r
+                       this.fileUID = file.getUID();\r
+               },\r
+               onClick : function(){\r
+                       this.app.boot( this.file );\r
                        return false;\r
-               }\r
-               this.init = function( _file, _elmContainer, _index, _callback ){\r
-                       instansce;\r
-                       if( elmContainer !== _elmContainer ){\r
-                               _elmContainer.appendChild( ELM_WRAPPER );\r
-                               elmContainer = _elmContainer;\r
-                       }\r
-                       if( file !== _file){\r
-                               file = _file;\r
-                               draw();\r
-                       }\r
-                       if( index !== _index){\r
-                               index = _index;\r
-                               resize( index );\r
-                       }\r
-                       callback = _callback;\r
-               };\r
-               this.elm = ELM_WRAPPER;\r
-               this.index = function( _index ){\r
-                       return index;\r
-               };\r
-               this.onResize = function( w ){\r
+               },\r
+               destroy : function(){\r
+                       var elm = this.elm;\r
+                       elm.parentNode.removeChild( elm );\r
                        \r
-               };\r
-               this.destroy = function(){\r
-                       elmContainer.removeChild( ELM_WRAPPER );\r
-                       file = elmContainer = null;\r
-                       BREAD_OBJECT_POOL.push( this );\r
-               };\r
-       }\r
+                       this.button.destroy();\r
+                       //this.kill()\r
+                       //this.elm = elm;\r
+               }\r
+       };\r
        \r
-       var FinderClass = function( application, elmRoot, tree, header, footer, onSelect, viewerOption, editorOption ){\r
-               var ICON_ARRAY       = [],\r
-                       BREAD_ARRAY      = [],\r
-                       elmContainer     = ELM_ORIGIN_CONTAINER.cloneNode( true ),\r
-                       elmLocation      = elmContainer.getElementsByTagName( 'ul' )[ 0 ],\r
-                       nodesDiv         = elmContainer.getElementsByTagName( 'div' ),\r
-                       elmSidebarButton = nodesDiv[ 1 ],\r
-                       elmStyleButton   = nodesDiv[ 2 ],\r
-                       elmActionButton  = nodesDiv[ 3 ],\r
-                       elmBody          = nodesDiv[ nodesDiv.length -1 ],\r
-                       headX,\r
-                       headY,\r
-                       headH            = Util.getElementSize( nodesDiv[ 0 ] ).height,\r
-                       bodyY,\r
-                       currentFile      = null,\r
-                       breadW           = 90,\r
-                       size             = Util.getElementSize( ELM_ORIGIN_FINDER_ICON ),\r
-                       iconW            = size.width,\r
-                       iconH            = size.height,\r
-                       style            = 0,\r
-                       w, h, bodyH,\r
-                       instance         = this;\r
-                       \r
-               tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, draw );\r
-               elmRoot.appendChild( elmContainer );\r
-               \r
-               function draw( _w, _h ){\r
-                       w = Type.isFinite( _w ) === true ? _w : w;\r
-                       h = Type.isFinite( _h ) === true ? _h : h;\r
-                       bodyH = h - headH;\r
-                       var     l = tree.hierarchy() + 1,\r
-                               m = BREAD_ARRAY.length,\r
-                               _file, _bread;\r
-                       for( var i=0; i<l; ++i ){\r
-                               _file = i !== l-1 ? tree.getParentFileAt( i ) : tree.getCurrentFile();\r
-                               if( i < m ){\r
-                                       BREAD_ARRAY[ i ].init( _file, elmLocation, i, onHeadClick );\r
-                               } else {\r
-                                       BREAD_ARRAY.push( getBreadcrumb( _file, elmLocation, i, onHeadClick ));\r
-                               }\r
+       var DetailPageClass = function(){};\r
+       DetailPageClass.prototype = Util.extend( new PageClass(), {\r
+               appButtons : null,\r
+               init : function( finderData ){\r
+                       this.finderData = finderData;\r
+                       this.apiuser    = finderData.apiuser;\r
+                       this.nodeRoot   = finderData.nodeRoot;\r
+                       this.elmRoot    = finderData.elmRoot;\r
+                       this.elmScroll  = finderData.elmScroll;\r
+                       \r
+                       if( this.elm === null ){\r
+                               this.elm = Util.pullHtmlAsTemplete( [\r
+                                       '<div class="finder-detail">',\r
+                                               '<div class="file-icon"><div></div></div>',\r
+                                               '<div class="finder-detail-filename break-word">file name</div>',\r
+                                               '<div class="finder-detail-summary break-word">file descriptiion</div>',\r
+                                               '<div>View this file</div>',\r
+                                               '<div class="viewer-apps"></div>',                                              \r
+                                               '<div>Edit this file</div>',\r
+                                               '<div class="editor-apps"></div>',\r
+                                       '</div>'\r
+                               ].join( '' ) );\r
                        };\r
-                       while( l < BREAD_ARRAY.length ){\r
-                               BREAD_ARRAY.pop().destroy();\r
+                       this.elm.style.display = 'none';\r
+                       this.elmScroll.appendChild( this.elm );\r
+                       this.node = this.nodeRoot.createNode( this.elm, true, false );\r
+                       \r
+                       this.ui = this.apiuser.createUIGroup( this.node );\r
+                       this.appButtons = [];\r
+               },\r
+               draw : function( file ){\r
+                       var elm        = this.elm,\r
+                               thumb      = file.getThumbnail(),\r
+                               elmThumb   = Util.getElementsByClassName( elm, 'file-icon' )[ 0 ].firstChild,\r
+                               elmName    = Util.getElementsByClassName( elm, 'finder-detail-filename' )[ 0 ],\r
+                               elmDesc    = Util.getElementsByClassName( elm, 'finder-detail-summary' )[ 0 ],\r
+                               tmpButtons = Util.copyArray( this.appButtons ),\r
+                               apps, app, elmContainer, button;\r
+                       if( thumb.image ){\r
+                               elmThumb.className = 'has-thumbnail';\r
+                               elmThumb.style.backgroundImage = [ 'url(', thumb.image, ')' ].join( '' );\r
+                       } else {\r
+                               elmThumb.className = thumb.className;\r
+                               elmThumb.style.backgroundImage = '';\r
                        };\r
                        \r
-                       l = _file.getChildFileLength();\r
-                       m = ICON_ARRAY.length;\r
-\r
-                       for( i=0; i<l; ++i ){\r
-                               if( i < m ){\r
-                                       ICON_ARRAY[ i ].init( _file.getChildFileByIndex( i ), elmBody, w, i, style, onDown, onEditor, onViwer, onAction );\r
-                               } else {\r
-                                       ICON_ARRAY.push( getFinderIcon( _file.getChildFileByIndex( i ), elmBody, _w, i, style, onDown, onEditor, onViwer, onAction ));\r
-                               }\r
+                       elmName.firstChild.data = file.getName();\r
+                       elmDesc.firstChild.data = file.getSummary();\r
+                       this.node.width( this.nodeRoot.width() );\r
+                       this.node.height( this.nodeRoot.height() );\r
+                       \r
+                       this.appButtons.length = 0;\r
+                       \r
+                       apps         = file.viewerApplicationList();\r
+                       elmContainer = Util.getElementsByClassName( elm, 'viewer-apps' )[ 0 ];\r
+                       for( i = 0; i < apps.length; ++i ){\r
+                               button = 0 < tmpButtons.length ? tmpButtons.shift() : new ApplicationButton();\r
+                               button.init( this.ui, elmContainer, apps[ i ], file );\r
+                               this.appButtons.push( button );\r
+                       };\r
+                       apps         = file.editorApplicationList();\r
+                       elmContainer = Util.getElementsByClassName( elm, 'editor-apps' )[ 0 ];\r
+                       for( i = 0; i < apps.length; ++i ){\r
+                               button = 0 < tmpButtons.length ? tmpButtons.shift() : new ApplicationButton();\r
+                               button.init( this.ui, elmContainer, apps[ i ], file );\r
+                               this.appButtons.push( button );\r
+                       };\r
+                       \r
+                       while( button = tmpButtons.shift() ) button.destroy();\r
+                       \r
+                       this.resize();\r
+               },\r
+               pan : function(){\r
+                       var page = this,\r
+                               x    = page.currentX = easeOutQuad( page.panTime, page.startX, page.offsetX, page.panTotalTime );\r
+                       // page.elm.style.left = x + 'px';\r
+                       this.node.x( x );\r
+                       if( page.panTotalTime < ++page.panTime ){\r
+                               delete page.panTime;\r
+                               delete page.startX;\r
+                               delete page.offsetX;                                    \r
+                               delete page.panTotalTime;\r
+                               delete page.sliding;\r
+                               if( this.isPanOut === true ) this.elm.style.display = 'none';\r
                        };\r
-                       if( _file.getState() === Const.FILE.STATE.LOADING ){\r
-                               elmBody.className = 'finder-body loading';\r
+               },\r
+               onScroll : function(){\r
+                       \r
+               },\r
+               resize : function(){\r
+                       this.elmScroll.style.height = this.nodeRoot.height() + 'px';\r
+               },\r
+               destroy : function(){\r
+                       var button;\r
+                       while( button = this.appButtons.shift() ) button.destroy();\r
+                       this.ui.destroy();\r
+                       this.node.remove();\r
+               }\r
+       });\r
+       \r
+/**\r
+ * FinderPrivateData\r
+ */\r
+       var FinderPrivateData = Class.create(\r
+               Class.PRIVATE_DATA, {\r
+               finder       : null,\r
+               apiuser      : null,\r
+               elmRoot      : null,\r
+               nodeRoot     : null,\r
+               elmScroll    : null,\r
+               elmPath      : null,\r
+               nodePath     : null,\r
+               tree         : null,\r
+               onSelect     : null,\r
+               viewerOption : null,\r
+               editorOption : null,\r
+               pathList     : null,\r
+               headH        : 0,\r
+               iconW        : 0,\r
+               iconH        : 0,\r
+               style        : 0,\r
+               pageIcons1   : null,\r
+               pageIcons2   : null,\r
+               panInPage    : null,\r
+               panOutPage   : null,\r
+               pageDetail   : null,\r
+               currentFile  : null,\r
+               Constructor : function( finder, apiuser, elm, tree, onSelect, viewerOption, editorOption ){\r
+                       this.finder       = finder;\r
+                       this.apiuser      = apiuser;\r
+                       if( PointingDeviceEventTree.isNodeInstance( elm ) === true ){\r
+                               this.nodeRoot = elm;\r
+                               this.elmRoot  = PointingDeviceEventTree._getNodePrivateData( elm ).elm;\r
                        } else {\r
-                               elmBody.className = 'finder-body';\r
+                               // App が eventTree を持っている?\r
+                               // App が eventTree を持っていない\r
+                               this.elmRoot  = elm;\r
                        };\r
+                       this.nodeRoot.addEventListener( 'click', this.onIconClick, this );\r
+                       this.nodeRoot.addEventListener( 'scroll', this.onScroll, this );\r
+                       \r
+                       this.elmScroll    = document.createElement( 'div' );\r
+                       this.elmRoot.appendChild( this.elmScroll );\r
+                       this.elmScroll.className     = 'finder-elm-scroll';\r
+                       this.elmScroll.style.cssText = 'width:100%;overflow:hidden;';\r
                        \r
-                       elmBody.style.height = bodyH + 'px';\r
+                       this.tree         = tree;\r
+                       this.onSelect     = onSelect;\r
+                       this.viewerOption = viewerOption;\r
+                       this.editorOption = editorOption;\r
                        \r
-                       while( l < ICON_ARRAY.length && ICON_ARRAY.length > 0 ){\r
-                               ICON_ARRAY.pop().destroy();\r
+                       var size          = Util.getElementSize( ELM_ORIGIN_FINDER_ICON );\r
+                       this.iconW        = size.width;\r
+                       this.iconH        = size.height;\r
+                       \r
+                       tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, this.draw, this );\r
+                       Util.addClass( this.elmRoot, 'finder-body' );\r
+                       \r
+                       if( this.panInPage === null ){\r
+                               this.pageIcons1 = new PageClass();\r
+                               this.pageIcons2 = new PageClass();\r
+                               this.pageDetail = new DetailPageClass();\r
                        };\r
-               };\r
-               \r
-               function onHeadClick( i ){\r
-                       var l = BREAD_ARRAY.length - 1;\r
-                       if( i < l){\r
-                               var _file = tree.getParentFileAt( i);\r
-                               if( _file !== null){\r
-                                       tree.up( i);\r
-                                       draw( w, h );\r
+                       this.pageIcons1.init( this.nodeRoot, this.elmRoot, this.elmScroll );\r
+                       this.pageIcons2.init( this.nodeRoot, this.elmRoot, this.elmScroll );\r
+                       this.pageDetail.init( this );\r
+               },\r
+               onIconClick : function( e ){\r
+                       if( this.panInPage === this.pageDetail ) return;\r
+                       \r
+                       var target = e.target,\r
+                               list   = this.panInPage.iconList,\r
+                               i, icon,\r
+                               file;\r
+                       if( target === this.nodeRoot ) return;\r
+                       for( i = list.length; i; ){\r
+                               icon = list[ --i ];\r
+                               if( icon.node === target ){\r
+                                       i = icon._index;\r
+                                       file = this.currentFile.getChildFileAt( i );\r
+                                       if( target.width() - 30 < e.layerX ){\r
+                                               this.tree.down( i );\r
+                                               this.draw( this.w, this.h, 1, true );\r
+                                       } else\r
+                                       if( file.getChildFileLength() !== -1 || file.getType() === Const.FILE.TYPE.FOLDER ){\r
+                                               this.tree.down( i );\r
+                                               this.draw( this.w, this.h, 1 );\r
+                                       } else\r
+                                       if( Type.isFunction( this.onSelect ) === true ){ /* && this.onSelect( file ) === true */\r
+                                               this.onSelect( file );\r
+                                       } else {\r
+                                               this.tree.down( i );\r
+                                               this.draw( this.w, this.h, 1 );\r
+                                       };\r
+                                       file.destroy();\r
+                                       break;\r
                                };\r
                        };\r
-               };\r
-               function onDown( i ){\r
-                       if( i < ICON_ARRAY.length ){\r
-                               var _file = tree.getCurrentFile().getChildFileByIndex( i );\r
-                               if( _file !== null && ( _file.getChildFileLength() !== -1 || _file.getType() === Const.FILE.TYPE.FOLDER )){\r
-                                       tree.down( i );\r
-                                       draw( w, h );\r
+               },\r
+               onScroll : function( e ){\r
+                       this.panInPage.onScroll( e );\r
+               },\r
+               onPathClick : function( e ){\r
+                       var target = e.target,\r
+                               i      = target.nodeIndex();\r
+                       if( target === this.nodePath || this.nodePath.numNode() - 1 === i ) return;\r
+                       this.tree.up( i );\r
+                       this.draw( this.w, this.h, -1 );\r
+               },\r
+               draw : function( w, h, way, showDetail ){\r
+                       var data = this, page;\r
+                       data.w = w = Type.isFinite( w ) === true ? w : data.w;\r
+                       data.h = h = Type.isFinite( h ) === true ? h : data.h;\r
+                       \r
+                       var file     = this.currentFile = this.tree.getCurrentFile(),\r
+                               isFolder = showDetail !== true && ( file.getChildFileLength() !== -1 || file.getType() === Const.FILE.TYPE.FOLDER );\r
+                       \r
+                       data.elmPath && data.drawPath( w );\r
+                       page = this.panInPage;\r
+                       if( Type.isNumber( way ) === true ){\r
+                               if( page.sliding === false ){\r
+                                       if( isFolder === true ){\r
+                                               this.panInPage = page === this.pageIcons1 ? this.pageIcons2 : ( page === this.pageIcons2 ? this.pageIcons1 : this.panOutPage );\r
+                                       } else {\r
+                                               this.panInPage = this.pageDetail;\r
+                                       };\r
+                                       this.panOutPage = page;\r
+                               };\r
+                               this.panInPage.panInReady( way );\r
+                               //this.panInPage.elm.className = 'panIN';\r
+                               this.panOutPage.panOutReady( way );\r
+                               //this.panOutPage.elm.className = 'panOut';\r
+                               this.nodeRoot.disabled( true );\r
+                               SystemTimer.add( this.apiuser, this.tick, 16, false, this );\r
+                       } else {\r
+                               if( isFolder === true ){\r
+                                       this.panInPage = page === null ? this.pageIcons1 : page;\r
                                } else {\r
-                                       Type.isFunction( onSelect ) === true && onSelect( _file );\r
+                                       this.panInPage = this.pageDetail;\r
                                };\r
-                               _file.destroy();\r
                        };\r
-               };\r
-               function onEditor( _file, _app, editorOption ){\r
-                       _app.boot( _file, editorOption );\r
-               };\r
-               function onViwer( _file, _app ){\r
-                       _app.boot( _file, viewerOption );\r
-               };\r
-               function onAction( _file ){\r
-\r
-               };\r
-               this.MIN_WIDTH     = 240;\r
-               this.MIN_HEIGHT    = 240;\r
-               this.onInit = function(){\r
-                       var position = Util.getAbsolutePosition( elmLocation );\r
-                       headX = position.x;\r
-                       headY = position.y;\r
-                       bodyY = Util.getAbsolutePosition( elmBody ).y;\r
-               };\r
-               this.onPaneResize = function( _w, _h ){\r
-                       draw( _w, _h );                 \r
+                       this.panInPage.draw( file );\r
+                       \r
+                       data.nodeRoot.invalidateScrollbar();\r
+               },\r
+               tick : function(){\r
+                       if( this.panInPage.sliding === false && this.panOutPage.sliding === false ){\r
+                               SystemTimer.remove( this.apiuser, this.tick );\r
+                               this.nodeRoot.disabled( false );\r
+                               this.nodeRoot.invalidateScrollbar();\r
+                               return;\r
+                       };\r
+                       this.panInPage.sliding === true && this.panInPage.pan();\r
+                       this.panOutPage.sliding  === true && this.panOutPage.pan();\r
+               },\r
+               drawPath : function( w ){\r
+                       if( !this.elmPath.parentNode ) return;\r
+                       w = this.nodePath.width();\r
+                       var data      = this,\r
+                               tree      = data.tree,\r
+                               pathList  = data.pathList,\r
+                               i         = 0,\r
+                               l         = tree.hierarchy() + 1,\r
+                               m         = pathList.length,\r
+                               wList     = [],\r
+                               totalW    = 0,\r
+                               minW      = FinderPrivateData.MIN_PATH_WIDTH,\r
+                               file, path, pathW, offset, remove, pathX = 0, fit = false;\r
                        \r
-                       w = _w;\r
-                       h = _h;\r
-                       elmBody.style.height = ( _h - headH ) + 'px';\r
+                       for( ; i < l; ++i ){\r
+                               file = i !== l - 1 ? tree.getParentFileAt( i ) : this.currentFile;\r
+                               if( i < m ){\r
+                                       pathList[ i ].init( this, file, i );\r
+                               } else {\r
+                                       pathList.push( PathClass.get( this, file, i ) );\r
+                               };\r
+                       };\r
+                       while( l < pathList.length ) pathList.pop().destroy();\r
                        \r
-                       for( var i = ICON_ARRAY.length; i; ){\r
-                               ICON_ARRAY[ --i ].onResize( _w );\r
+                       for( i = l; i; ){\r
+                               pathW = pathList[ --i ].textWidth();\r
+                               wList.push( pathW );\r
+                               totalW += pathW;\r
                        };\r
-               };\r
-               this.destroy = function(){\r
-                       tree.removeTreeEventListener( Const.TREE.EVENT.UPDATE, draw );\r
                        \r
-                       while( BREAD_ARRAY.length > 0 ){\r
-                               BREAD_ARRAY.shift().destroy();\r
+                       //if( minW * ( l + 1 ) * 1.2 < w ){\r
+                               console.log( totalW + ' , ' + w )\r
+                               while( true ){\r
+                                       if( fit === true ) break;\r
+                                       for( i = 0; i < l; ++i ){\r
+                                               offset = totalW - w;\r
+                                               if( offset <= 0 ){\r
+                                                       fit = true;\r
+                                                       break;\r
+                                               };\r
+                                               remove = l - i;\r
+                                               remove = offset < remove ? offset : remove;\r
+                                               pathW  = wList[ i ];\r
+                                               if( pathW - remove < minW ){\r
+                                                       totalW -= ( pathW - minW );\r
+                                                       wList[ i ] = minW;\r
+                                               } else {\r
+                                                       wList[ i ] = pathW - remove;\r
+                                                       totalW -= remove;\r
+                                               };\r
+                                       };\r
+                               };\r
+                               for( i = 0; i < l; ++i ){\r
+                                       path  = pathList[ i ];\r
+                                       pathW = wList[ i ];\r
+                                       path.update( pathX, pathW );\r
+                                       pathX += pathW;\r
+                               };                      \r
+                       //} else {\r
+                               \r
+                       //};\r
+               },\r
+               createPath : function( node ){\r
+                       if( this.elmPath ) return;\r
+                       \r
+                       if( PointingDeviceEventTree.isNodeInstance( node ) === true ){\r
+                               this.nodePath = node;\r
+                               this.elmPath  = PointingDeviceEventTree._getNodePrivateData( node ).elm;\r
+                               \r
+                               node.addEventListener( 'click', this.onPathClick, this );\r
+                               Util.addClass( this.elmPath, 'finder-path' );\r
+                               // this.elmPath  = document.createElement( 'div' );\r
+                               // this.elmPath.className = ;\r
+                               this.pathList = [];\r
+                               // this.headH    = 0;\r
+                               AsyncCall.add( this.apiuser, this.draw, null, this );\r
                        };\r
-                       while( ICON_ARRAY.length > 0 ){\r
-                               ICON_ARRAY.shift().destroy();\r
+               },\r
+               onKill : function(){\r
+                       this.tree.removeTreeEventListener( Const.TREE.EVENT.UPDATE, this.draw );\r
+\r
+                       if( this.pathList ){\r
+                               while( this.pathList.length > 0 ) this.pathList.shift().destroy();\r
                        };\r
                        \r
-                       FINDER_ARRAY.splice( Util.getIndex( FINDER_ARRAY, instance ), 1 );\r
-               };\r
-       };\r
-       FinderClass.prototype = new AbstractBasicPane();\r
-       \r
-       function getFinderIcon( _file, _elmContainer, w, index, style, onDown, onEditor, onViwer, onAction ){\r
-               var _icon;\r
-               if( FINDER_ICON_POOL.length > 0){\r
-                       _icon = FINDER_ICON_POOL.shift();\r
-               } else {\r
-                       _icon = new FinderIconClass();\r
-               };\r
-               _icon.init( _file, _elmContainer, w, index, style, onDown, onEditor, onViwer, onAction );\r
-               return _icon;\r
-       };\r
-       \r
-       function getBreadcrumb( _file, _elmContainer, index, callback ){\r
-               var _bread;\r
-               if( BREAD_OBJECT_POOL.length > 0 ){\r
-                       _bread = BREAD_OBJECT_POOL.shift();\r
-               } else {\r
-                       _bread = new BreadcrumbClass();\r
-               };\r
-               _bread.init( _file, _elmContainer, index, callback );\r
-               return _bread;\r
-       };\r
+                       this.pageIcons1.destroy();\r
+                       this.pageIcons2.destroy();\r
+                       this.pageDetail.destroy();\r
+                       this.nodeRoot.remove();\r
+                       \r
+                       FINDER_LIST.splice( Util.getIndex( FINDER_LIST, this.finder ), 1 );\r
+                       var data = ApplicationPrivateData.get( this.apiuser ),\r
+                               list = data.finderList,\r
+                               i    = Util.getIndex( list, this.finder );\r
+                       i !== -1 && list.splice( i, 1 );\r
+               }\r
+       });\r
+       FinderPrivateData.MIN_PATH_WIDTH = 25;\r
+\r
+/**\r
+ * FinderClass\r
+ */\r
+       var Finder = Class.create(\r
+               FinderPrivateData, {\r
+               Constructor : function( application, elmRoot, tree, onSelect, viewerOption, editorOption ){\r
+                       Finder.newPrivateData( this, this, application, elmRoot, tree, onSelect, viewerOption, editorOption );\r
+               },\r
+               MIN_WIDTH  : 200,\r
+               MIN_HEIGHT : 200,\r
+               resize : function( w, h ){\r
+                       var data = Finder.getPrivateData( this );\r
+                       data.panInPage && data.panInPage.resize( w );\r
+               },\r
+               createPath : function( node ){\r
+                       return Finder.getPrivateData( this ).createPath( node );\r
+               },\r
+               destroy : function(){\r
+                       this.kill();\r
+               }\r
+       });\r
 \r
        return {\r
                init: function(){\r
                        \r
                },\r
-               create: function( _application, _elmTarget, _tree, _header, _footer, _onSelect, _viewerOption, _editorOption ){\r
+               create: function( application, elmTarget, tree, onSelect, viewerOption, editorOption ){\r
                        //if( Application.isApplicationInstance( _application ) === false ) return;\r
                        \r
-                       var _finder = new FinderClass( _application, _elmTarget, _tree, _header, _footer, _onSelect, _viewerOption, _editorOption );\r
-                       _finder.init();\r
-                       FINDER_ARRAY.push( _finder );\r
-                       return _finder;\r
+                       var finder = new Finder( application, elmTarget, tree, onSelect, viewerOption, editorOption );\r
+                       FINDER_LIST.push( finder );\r
+                       return finder;\r
                },\r
                registerFinderHead: function(){\r
                        \r
@@ -5061,7 +6113,7 @@ var Finder = ( function(){
                        \r
                },\r
                isFinderInstance: function( _finder ){\r
-                       return _finder instanceof FinderClass;\r
+                       return _finder instanceof Finder;\r
                },\r
                isFinderPaneInstance: function(){\r
                        \r
@@ -5099,15 +6151,15 @@ var Finder = ( function(){
 \r
 var DHTML = ( function(){\r
        \r
-       var ANIMATION_TICKET_ARRAY = [],\r
-               fpms                   = 50,\r
-               round                  = Math.round,\r
-               cround                 = function ( v ){ return round( v * 100 ) / 100 };\r
+       var TICKET_ARRAY = [],\r
+               fpms         = 50,\r
+               round        = Math.round,\r
+               cround       = function( v ){ return round( v * 100 ) / 100 };\r
        \r
        function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames ){\r
-               var _ticket, i = ANIMATION_TICKET_ARRAY.length;\r
+               var _ticket, i = TICKET_ARRAY.length;\r
                for( ; i; ){\r
-                       _ticket = ANIMATION_TICKET_ARRAY[ --i ];\r
+                       _ticket = TICKET_ARRAY[ --i ];\r
                        if( _ticket.elm === _elm ){\r
                                return;\r
                        };\r
@@ -5155,18 +6207,18 @@ var DHTML = ( function(){
                        current.clear();\r
                };\r
                \r
-               var i, _cssTextArray = [];\r
+               var i, cssTexts = [];\r
                for( i = 0; i < _numFrames; ++i ){\r
                        if( i < _numFrames - 1 ){\r
                                tickValue( _currentValues, _offsetValues, _numFrames );\r
-                               createCssText( _currentValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );\r
+                               cssTexts.push( createCssText( _currentValues, _targetProperties, targetStyle, inlineStyle ) );\r
                        } else {\r
-                               createCssText( _endValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );\r
+                               cssTexts.push( createCssText( _endValues, _targetProperties, targetStyle, inlineStyle ) );\r
                        };\r
                };\r
                \r
-               ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(\r
-                       _elm, _cssTextArray,\r
+               TICKET_ARRAY.push( new AnimationTaskClass(\r
+                       _elm, cssTexts,\r
                        Type.isFunction( _onComplete ) === true   ? _onComplete   : null,\r
                        Type.isFunction( _onEnterFrame ) === true ? _onEnterFrame : null,\r
                        _numFrames\r
@@ -5189,7 +6241,7 @@ var DHTML = ( function(){
                        return current + offset / numFrames;\r
                };\r
        };\r
-       function createCssText( update, props, style, inline, cssTextArray ){\r
+       function createCssText( update, props, style, inline ){\r
                var prop;\r
                for( var i = props.length; i; ){\r
                        prop = style.get( props[ --i ] );\r
@@ -5198,14 +6250,14 @@ var DHTML = ( function(){
                        //if( prop.name === 'backgroundColor' ) alert( prop.getValueText() + '|' + update[ i ].join( ',') )\r
                        prop.clear();\r
                };\r
-               cssTextArray.push( CSS.toCssText( inline ) );\r
+               return CSS.toCssText( inline );\r
        };\r
        \r
        function onEnterFrame(){\r
                var _ticket, l,\r
                        i = 0;\r
-               while( i < ANIMATION_TICKET_ARRAY.length ){\r
-                       _ticket = ANIMATION_TICKET_ARRAY[ i ];\r
+               while( i < TICKET_ARRAY.length ){\r
+                       _ticket = TICKET_ARRAY[ i ];\r
                        l       = _ticket.cssTexts.length;\r
                        _ticket.elm.style.cssText = _ticket.cssTexts.shift();\r
                        if( l === 1 ){\r
@@ -5215,13 +6267,13 @@ var DHTML = ( function(){
                                delete _ticket.onComplete;\r
                                delete _ticket.onEnterFrame;\r
                                delete _ticket.numFrame;\r
-                               ANIMATION_TICKET_ARRAY.splice( i, 1 );\r
+                               TICKET_ARRAY.splice( i, 1 );\r
                        } else {\r
                                _ticket.onEnterFrame && _ticket.onEnterFrame( l / _ticket.numFrame );\r
                                ++i;\r
                        };\r
                };\r
-               if( ANIMATION_TICKET_ARRAY.length === 0 ){\r
+               if( TICKET_ARRAY.length === 0 ){\r
                        SystemTimer.remove( SUPER_USER_KEY, onEnterFrame );\r
                };\r
        };\r
@@ -5235,27 +6287,22 @@ var DHTML = ( function(){
        };\r
        \r
        var VisualEffectClass = function( elm ){\r
-               var isHtmlElement;\r
-               \r
-               function registerAnime( _cssObject, _onComplete, _onEnterFrame, _time ){\r
+               this.elm = elm;\r
+       };\r
+       VisualEffectClass.prototype = {\r
+               anime : function( _cssObject, _onComplete, _onEnterFrame, _time ){\r
                        var _numFrames = Math.floor( _time / fpms );\r
-                       startAnimation( elm, _cssObject, _onComplete, _onEnterFrame, _numFrames );\r
-               };\r
-               function startFadeIn(){\r
-                       \r
-               };\r
-               function startFadeOut(){\r
+                       startAnimation( this.elm, _cssObject, _onComplete, _onEnterFrame, _numFrames );\r
+               },\r
+               fadeIn : function(){\r
                        \r
-               };\r
-               function update( _x, _y, _w, _h ){\r
-                       var _cssText = elm.style.cssText;\r
+               },\r
+               fadeOut : function(){\r
                        \r
-               };\r
-               \r
-               this.anime   = registerAnime;\r
-               this.fadeIn  = startFadeIn;\r
-               this.fadeOut = startFadeOut;\r
-               this.update  = update;\r
+               },\r
+               update : function( x, y, w, h ){\r
+                       var _cssText = this.elm.style.cssText;\r
+               }\r
        };\r
        \r
        return {\r