OSDN Git Service

0.5.18, rewrite for PointingDeviceEventTree, much bugs, sorry.
authoritozyun <itozyun@gmail.com>
Sun, 11 Nov 2012 23:46:13 +0000 (08:46 +0900)
committeritozyun <itozyun@gmail.com>
Sun, 11 Nov 2012 23:46:13 +0000 (08:46 +0900)
0.5.x/javascripts/peta.apps.js
0.5.x/javascripts/peta.common.js
0.5.x/javascripts/pongame.js
0.5.x/javascripts/system.js
0.5.x/stylesheets/peta.apps.css
0.5.x/stylesheets/system.css
0.5.x/work.html

index b531283..e4efa29 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.17
+ *   version 0.5.18
  *   
  * author:
  *   itozyun
@@ -24,7 +24,7 @@
                                if( _data === null ){
                                        onErrorJson( _file );
                                        return;
-                               }
+                               };
                                _data.state = Const.FILE.STATE.OK;
                                
                                if( Type.isArray( _json ) === true ){
@@ -484,6 +484,8 @@ var Cabinet = gOS.registerApplication( function(){
        var self         = this,
                finder       = null,
                tree         = null,
+               nodePath     = null,
+               nodeBody     = null,
                headerH      = 0;
 
        this.bgColor     = '#FFFFFF';
@@ -492,13 +494,18 @@ var Cabinet = gOS.registerApplication( function(){
        this.onInit = function(){
                self.rootElement.id = 'cabinet-root';
                self.rootElement.innerHTML = [
-                       '<div id="cabinet-header">Cabinet<div id="cabinet-close-button">x</div></div>',
+                       '<div id="cabinet-header">',
+                               'Cabinet',
+                               '<div id="cabinet-close-button">x</div>',
+                               '<div id="cabinet-path" class="finder-path"></div>',
+                       '</div>',
                        '<div id="cabinet-container" class="finder-container"></div>'
                ].join( '' );
                
                self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
                
-               tree   = FileAPI.createTree( FILE_DATA_SERVICE_ROOT );
+               tree = FileAPI.createTree( FILE_DATA_SERVICE_ROOT );
+               self.useInteractiveLayer( 'mousemove', 'mousedown', 'mouseup', 'mouseout' );
                
                delete self.onInit;
        };
@@ -507,7 +514,13 @@ var Cabinet = gOS.registerApplication( function(){
                
                self.addEventListener( document.getElementById( 'cabinet-close-button' ), 'click', Cabinet.shutdown );
                
-               finder = self.createFinder( self.rootElement, tree );
+               var eventRoot = self.getPointingDeviceEventTreeRoot();
+               eventRoot.addEventListener( 'mousemove', new Function() );
+               nodePath = eventRoot.createNode( document.getElementById( 'cabinet-path' ), false, false );
+               nodeBody = eventRoot.createNode( document.getElementById( 'cabinet-container' ), false, true, null, '', true );
+               
+               finder = self.createFinder( nodeBody, tree );
+               finder.createPath( nodePath );
                self.onPaneResize( _w, _h );
        };
        this.onClose = function(){
@@ -515,8 +528,10 @@ var Cabinet = gOS.registerApplication( function(){
                tree.destroy();
                finder = tree = null;
        };
-       this.onPaneResize = function( _w, _h ){
-               finder.resize( _w, _h - headerH );
+       this.onPaneResize = function( w, h ){
+               nodePath.width( w );
+               nodeBody.update( 0, headerH, w, h - headerH );
+               finder.resize( w, h - headerH );
        };
 }, false, true, 'Cabinet', 'cabinet', null, '#1C1C1C' );
 
@@ -709,7 +724,7 @@ var PremiumSatge = gOS.registerApplication( function(){
                        delete instance.destroy;
                        // timer && window.clearTimeout( timer );
                        self.removeTimer( asyncDraw );
-                       self.removeMouseEventListener( elmIconWrap );
+                       self.removeEventListener( elmIconWrap );
                        reversibleImage !== null && reversibleImage.destroy();
                        // Util.removeAllChildren( elmIconWrap );
                        // elmContainer.removeChild( elmIconWrap );
@@ -982,7 +997,7 @@ var TextEditor = gOS.registerApplication( function(){
        };
        this.onClose = function(){
                self.removeKeyEventListener();
-               self.removeMouseEventListener( elmButton );
+               self.removeEventListener( elmButton );
                
                elmTextarea = elmButton = onUpdate = textElement = self = null;
        };
@@ -1128,8 +1143,8 @@ var Reader = gOS.registerApplication( function(){
                );
        };
        this.onClose = function(){
-               self.removeMouseEventListener( elmBackButton );
-               self.removeMouseEventListener( elmNextButton );
+               self.removeEventListener( elmBackButton );
+               self.removeEventListener( elmNextButton );
                
                bindWorker.destroy();
                bindWorker = null;
@@ -1147,25 +1162,18 @@ var Editor = gOS.registerApplication( function(){
        var PANEL_ELEMENT_TYPE_IMAGE = 0,
                PANEL_ELEMENT_TYPE_TEXT  = 1,
                MODULE_ARRAY             = [],
-               MOUSE_LISTENER_ARRAY     = [],
                PANEL_ELEMENT_ARRAY      = [],
                MIN_PANEL_HEIGHT         = 20,
                MIN_ELEMENT_SIZE         = 19,
                MOUSE_HIT_AREA           = 10,
-               elmMouseEventChatcher,
-               jqMouseEventChacher,
-               jqEditor,
                windowW, windowH,
-               currentListener          = null,
-               currentCursor            = '',
-               self                     = this,
-               app                      = self,
+               app                      = this,
+               eventRoot                = null,
                option,
                comicID                  = -1,
                panelID                  = -1,
                panelTimming             = -1,
-               phase                    = -1,
-               log;
+               phase                    = -1;
 
        var kill = function(){
                var o = this, v;
@@ -1198,7 +1206,7 @@ var Editor = gOS.registerApplication( function(){
                        MODULE_ARRAY.push( ret );
                        return ret;
                }
-       }
+       };
 /* ----------------------------------------
  * MENU BAR
  *  - mouseEventListener
@@ -1213,211 +1221,336 @@ var Editor = gOS.registerApplication( function(){
  *          kbd shortcut
  */
        var MENU_BAR_CONTROL = ( function(){
-               var ELM_ITEM_CLASSNAME = 'menu-bar-item',
-                       itemList           = [],
-                       elmRoot, elmBar,
-                       elmItemOrigin, elmSelectionOrigin,
-                       barH, itemW, selectionW;
-
-               var MenubarOptionClass = function( callback, separateAfter ){
+               var ELM_ITEM_CLASSNAME = 'menubar-item',
+                       currentMenu        = null,
+                       elmBar, elmBox,
+                       nodeBar, nodeBox,
+                       barH, menuW;
+       /** -----------------------------------------
+        *  PrivateOptionDataClass
+        */
+               var PrivateOptionDataClass = function( menuData, option, title, shortcut, callback, visible, separateAfter, thisObject ){
+                       this.menuData      = menuData;
+                       this.option        = option;
+                       this.title         = title;
+                       this.shortcut      = shortcut || '';
                        this.callback      = callback;
+                       this.thisObject    = thisObject;
+                       this.visible       = visible;
                        this.separateAfter = separateAfter;
                };
-               MenubarOptionClass.prototype = {
-                       elm: null,
-                       elmTitle: null,
-                       title: function( _title ){
-                               if( Type.isString( _title ) === true ){
-                                       this.elmTitle.innerHTML = _title;
+               PrivateOptionDataClass.prototype = {
+                       menuData      : null,
+                       option        : null,
+                       elm           : null,
+                       node          : null,
+                       visible       : undefined,
+                       border        : false,
+                       title         : null,
+                       shortcut      : null,
+                       callback      : null,
+                       thisObject    : null,
+                       separateAfter : false,
+                       show : function( elm ){
+                               if( this.elm === elm ) return;
+                               if( !elm ){
+                                       elm = document.createElement( 'div' );
+                                       elmBox.appendChild( elm );
+                                       elm.appendChild( document.createElement( 'span' ) );
+                                       elm.appendChild( document.createElement( 'kbd' ) );
                                };
-                               return this.elmTitle.innerHTML;
+                               this.elm      = elm;
+                               this.option.title( this.title );
+                               this.option.visible( !!this.visible );
+                               elm.lastChild.innerHTML = this.shortcut;
+                               elm.style.borderStyle = this.border === true ? 'solid' : 'none';
+                               
+                               this.node     = nodeBox.createNode( elm, false, true, 'menubar-option-hover', 'pointer' );
+                               // this.node.addEventListener( 'click', this.callback, this.thisObject );
+                               this.node.disabled( !this.visible );
                        },
-                       _visible: false,
-                       visible: function( _visible ){
-                               if( Type.isBoolean( _visible ) === true && this._visible !== _visible ){
-                                       this._visible = _visible;
-                                       this.elm.className = _visible === true ? '' : 'disabled';
-                               };
-                               return this._visible;
+                       hide : function(){
+                               this.node.remove();
+                               delete this.elm;
+                               delete this.node;
                        },
-                       _init: function( elmParent, _title, _shortcut, _visible ){
-                               this.elm      = elmSelectionOrigin.cloneNode( true );
-                               this.elmTitle = this.elm.getElementsByTagName( 'span' )[ 0 ];
-                               
-                               elmParent.appendChild( this.elm );
-                               
-                               this.title( _title );
-                               this.visible( !!_visible );
-                               
-                               var elmShortcut = this.elm.getElementsByTagName( 'kbd' )[ 0 ];
-                               if( _shortcut ){
-                                       elmShortcut.innerHTML = _shortcut;
-                               } else {
-                                       elmShortcut.parentNode.removeChild( elmShortcut );
-                               };
+                       fire : function(){
+                               this.callback.call( this.thisObject || this.option, Util.getIndex( this.menuData.optionDataList, this ) );
                        },
-                       _kill: kill
+                       remove : function(){
+                               var list = PrivateOptionDataClass.list;
+                               list.splice( Util.getIndex( list, this ), 1 );
+                       }
+               };
+               PrivateOptionDataClass.list = [];
+               PrivateOptionDataClass.get = function( OptionOrElm ){
+                       var list = PrivateOptionDataClass.list,
+                               i    = list.length,
+                               data;
+                       for( ; i; ){
+                               data = list[ --i ];
+                               if( data.option === OptionOrElm || data.elm === OptionOrElm ) return data;
+                       };
+                       return null;
                };
 
-               var MenuBarItemClass = function( title ){
-                       this.elm          = elmItemOrigin.cloneNode( true );
-                       elmBar.appendChild( this.elm );
-                       this.elm.style.left = ( itemW * itemList.length ) + 'px';
-                       
-                       this.elm.getElementsByTagName( 'div' )[ 0 ].innerHTML = title;
-                       
-                       this.elmUl        = this.elm.getElementsByTagName( 'ul' )[ 0 ];
-                       this.optionList   = [];
-                       this.visible      = false;
+       /** -----------------------------------------
+        *  OptionClass
+        */     
+               var OptionClass = function( menuData, title, shortcut, callback, visible, separateAfter, thisObject ){
+                       PrivateOptionDataClass.list.push( new PrivateOptionDataClass( menuData, this, title, shortcut, callback, visible, separateAfter, thisObject ) );
+               };
+               OptionClass.prototype = {
+                       title: function( v ){
+                               var data = PrivateOptionDataClass.get( this );
+                               if( Type.isString( v ) === true ){
+                                       data.title = v;
+                                       if( data.elm ) data.elm.firstChild.innerHTML = v;
+                               };
+                               return data.title;
+                       },
+                       visible : function( v ){
+                               var data = PrivateOptionDataClass.get( this );
+                               if( Type.isBoolean( v ) === true ){
+                                       data.visible = v;
+                                       data.elm && Util.toggleClass( data.elm, 'menubar-option-disabled', !v );
+                               };
+                               return data.visible;
+                       }
+               };
+       /** -----------------------------------------
+        *  AsyncOptionClass
+        */
+               var AsyncOptionClass = function( menuData, callback, visible, separateAfter, thisObject ){
+                       var data  = new PrivateOptionDataClass( menuData, this, null, null, callback, visible, separateAfter, thisObject );
+                       data.show = AsyncOptionClass.show;
+                       data.hide = AsyncOptionClass.hide;                      
+                       PrivateOptionDataClass.list.push( data );
+               };
+               AsyncOptionClass.prototype = {
+                       title    : function(){},
+                       visible  : OptionClass.prototype.visible
+               };
+               AsyncOptionClass.show = function( elm ){
+                       if( this.elm === elm ) return;
+                       if( !elm ){
+                               elm = document.createElement( 'div' );
+                               elmBox.appendChild( elm );
+                               elm.appendChild( document.createElement( 'span' ) );
+                               elm.appendChild( document.createElement( 'kbd' ) );             
+                       };
+                       this.elm         = elm;
+                       elm.className    = 'loading';
+                       elm.style.height = '90px';
+                       elm.firstChild.innerHTML = this.elm.lastChild.innerHTML = '';
+                       elm.style.borderStyle    = this.border === true ? 'solid' : 'none';
                        
-                       var optionList    = this.optionList;
+                       this.callback();                        
+               };
+               AsyncOptionClass.hide = function(){
+                       this.elm.className    = '';
+                       this.elm.style.height = '';
+                       delete this.elm;
+               };
+               
+       /** -----------------------------------------
+        *  MenuPrivateDataClass
+        */
+               var MenuPrivateDataClass = function( menu, title ){
+                       this.menu           = menu;
+                       this.elm            = document.createElement( 'div' );
+                       this.optionDataList = [];
                        
-                       this.onClick = function( e ){
-                               var i = Util.getChildIndex( this.parentNode, this );
-                               i !== -1 && this.className !== 'disabled' && optionList[ i ].callback( i );
-                               return false;
-                       };
-                       this._onClose = function(){
-                               optionList = null;
+                       elmBar.appendChild( this.elm );
+                       this.elm.className  = ELM_ITEM_CLASSNAME;
+                       this.elm.innerHTML  = title;
+               };
+               MenuPrivateDataClass.prototype = {
+                       menu           : null,
+                       elm            : null,
+                       node           : null,
+                       visible        : false,
+                       currentOption  : -1,
+                       index          : -1,
+                       optionDataList : null,
+                       open : function(){
+                               this.elm.style.left = ( menuW * Util.getIndex( MenuPrivateDataClass.list, this ) ) + 'px';
+                               this.node           = nodeBar.createNode( this.elm, false, false, ELM_ITEM_CLASSNAME + '-hover', 'pointer' );
+                               // this.node.addEventListener( 'click', this.onClick, this );
+                               this.node.addEventListener( 'click', this.onClick, this );                      
+                       },                      
+                       close : function(){
+                               var o;
+                               while( o = this.optionDataList.shift() ) o.remove();
+                               this._kill = kill;
+                               this._kill();
+                       },
+                       onClick : function( e ){
+                               if( currentMenu !== this.menu ){
+                                       currentMenu && currentMenu.hide();
+                                       currentMenu = this.menu;
+                                       this.menu.show();
+                               };
+                       },
+                       onOptionClick : function( e ){
+                               var target = e.target,
+                                       i      = target.nodeIndex(),
+                                       option = this.optionDataList[ i ];
+                               if( target === nodeBox ) return true;
+                               option.fire();
+                       },
+                       onMousemove : function( e ){
+                               // if( currentMenu === -1 ) return;
+                               var x    = e.clientX,
+                                       y    = e.clientY,
+                                       boxX = nodeBox.x();
+                               console.log( 'x:' + x + ' y:' + y + ' Box.x:' + nodeBox.x() + ' Box.y:' + nodeBox.y() + ' Box.w:' + nodeBox.width() + ' Box.h:' + nodeBox.height() )
+                               console.log( 'x:' + x + ' y:' + y + ' Bar.x:' + nodeBar.x() + ' Bar.y:' + nodeBar.y() + ' Bar.w:' + nodeBar.width() + ' Bar.h:' + nodeBar.height() + ' hit:' + e.hit )
+                               //if( barH < y && ( x < boxX || nodeBox.width() + boxX < x || barH + nodeBox.y() + nodeBox.height() < y ) ){
+                               //      this.menu.hide();
+                               //};
+                       }
+               };
+               MenuPrivateDataClass.list = [];
+               MenuPrivateDataClass.get  = function( menu ){
+                       var list = MenuPrivateDataClass.list,
+                               i    = list.length;
+                       for( ; i; ){
+                               if( list[ --i ].menu === menu ) return list[ i ];
                        };
+                       return null;
                };
-               MenuBarItemClass.prototype = {
+       
+       /** -----------------------------------------
+        *  MenuClass
+        */
+               var MenuClass = function( title ){
+                       MenuPrivateDataClass.list.push( new MenuPrivateDataClass( this, title ) );
+               };
+               MenuClass.prototype = {
                        show: function(){
-                               if( this.visible === true ) return;
-                               elmRoot.appendChild( this.elm );
-                               this.elm.className = ELM_ITEM_CLASSNAME + '-focus';
-                               this.onShow && app.addAsyncCall( this.onShow, null, this );
-                               this.visible = true;
+                               data = MenuPrivateDataClass.get( this );
+                               if( data.visible === true ) return;
+                               
+                               data.elm.className = ELM_ITEM_CLASSNAME + '-focus';
+                               
+                               if( !elmBox ){
+                                       elmBox   = document.createElement( 'div' );
+                                       elmBar.appendChild( elmBox );
+                                       elmBox.className = 'menubar-option-box';
+                                       nodeBox  = nodeBar.createNode( elmBox, false, false, 'menubar-option-box-hover' );
+                               };
+                               nodeBox.disabled( false );
+                               elmBar.parentNode.insertBefore( elmBox, elmBar.nextSibling ); // ie6 では elmBar の 子にすると 選択肢が表示されない
+                               
+                               nodeBox.setPosition( data.node.x(), barH );
+                               
+                               var i,
+                                       children = elmBox.childNodes,
+                                       list     = data.optionDataList
+                                       l        = list.length;
+                               while( l < children.length ){
+                                       elmBox.removeChild( elmBox.firstChild );
+                               };
+                               for( i = 0; i < l; ++i ){
+                                       list[ i ].show( children[ i ] );
+                               };
+                               nodeBox.mesure();
+                               // eventRoot.addEventListener( 'mousemove', data.onMousemove, data );
+                               nodeBar.addEventListener( 'mouseout', this.hide, this );
+                               nodeBox.addEventListener( 'click', data.onOptionClick, data );
+                               data.visible = true;                                                            
                        },
                        hide: function(){
-                               if( this.visible === false ) return;
-                               elmBar.appendChild( this.elm );
-                               this.elm.className = ELM_ITEM_CLASSNAME;
-                               this.onHide && app.addAsyncCall( this.onHide, null, this );
-                               this.visible = false;
-                       },
-                       createOption: function( title, shortcut, callback, visible, separateBefore, separateAfter ){
-                               var ret    = new MenubarOptionClass( callback, separateAfter ),
-                                       before = this.optionList[ this.optionList.length -1 ];
-                               ret._init( this.elmUl, title, shortcut, visible );
+                               data = MenuPrivateDataClass.get( this );
+                               if( data.visible === false ) return;
                                
-                               this.optionList.push( ret );
-                               if( before && ( separateBefore === true || before.separateAfter === true )){
-                                       ret.elm.style.borderTop = '1px solid #ccc';
-                               }
-                               return ret;
+                               data.elm.className = ELM_ITEM_CLASSNAME;
+                               for( var i = data.optionDataList.length; i; ){
+                                       data.optionDataList[ --i ].hide();
+                               };
+                               elmBar.parentNode.removeChild( elmBox );
+                               nodeBox.disabled( true );
+                               // eventRoot.removeEventListener( 'mousemove', data.onMousemove );
+                               nodeBar.removeEventListener( 'mouseout', this.hide );
+                               nodeBox.removeEventListener( 'click', data.onOptionClick );
+                               data.visible = false;
+                               currentMenu  = null;
                        },
-                       _open: function(){
-                               for( var lis = this.optionList, i = lis.length; i; ){
-                                       app.addEventListener( lis[ --i ].elm, 'click', this.onClick );
+                       createOption: function( title, shortcut, callback, visible, separateBefore, separateAfter, thisObject ){
+                               var data       = MenuPrivateDataClass.get( this ),
+                                       before     = data.optionDataList[ data.optionDataList.length - 1 ],
+                                       ret        = new OptionClass( data, title, shortcut, callback, visible, separateAfter, thisObject ),
+                                       dataOption = PrivateOptionDataClass.get( ret );
+                               if( before ) before.border = separateBefore === true || before.separateAfter === true;
+                               data.optionDataList.push( dataOption );
+                               if( data.visible === true ){
+                                       dataOption.show();
+                                       nodeBox.mesure();
                                };
-                       },                      
-                       _close: function(){
-                               this._onClose();
-                               var o;
-                               while( o = this.optionList.shift() ) o._kill();
-                               this._kill = kill;
-                               this._kill();
+                               return ret;
+                       },
+                       createAsyncOption: function( onOpen, visible, separateBefore, separateAfter, thisObject ){
+                               var data       = MenuPrivateDataClass.get( this ),
+                                       before     = data.optionDataList[ data.optionDataList.length -1 ],
+                                       ret        = new AsyncOptionClass( data, onOpen, visible, separateAfter, thisObject ),
+                                       dataOption = PrivateOptionDataClass.get( ret );
+                               if( before ) before.border = separateBefore === true || before.separateAfter === true;
+                               data.optionDataList.push( dataOption );
+                               data.visible === true && dataOption.show();
+                               return ret;
+                       },
+                       remove : function( option ){
+                               var data       = MenuPrivateDataClass.get( this ),
+                                       optionData = PrivateOptionDataClass.get( option ),
+                                       i          = Util.getIndex( data.optionDataList, optionData );
+                               if( i === -1 ) return;
+                               
+                               data.optionDataList.splice( i, 1 );
+                               
+                               data.visible === true && elmBox.removeChild( optionData.elm ) && optionData.hide();
+                               optionData.remove();
+                               
+                               !( option instanceof AsyncOptionClass ) && data.optionDataList.length === 0 && this.hide();
                        }
                };
                
-               function createMenubarItem( title ){
-                       itemList.push( new MenuBarItemClass( title ) );
-                       return itemList[ itemList.length - 1 ];
-               }
                return {
-                       init: function(){
-                               elmRoot = app.rootElement;
-                               elmBar  = document.getElementById( 'menu-bar' );
-                               elmItemOrigin    = ( function(){
-                                       var ret = document.createElement( 'div' ),
-                                               div = document.createElement( 'div' ),
-                                               ul  = document.createElement( 'ul' );
-                                       ret.className = ELM_ITEM_CLASSNAME;
-                                       ret.appendChild( div );
-                                       ret.appendChild( ul );
-                                       return ret;
-                               })();
-                               elmSelectionOrigin = ( function(){
-                                       var ret  = document.createElement( 'li' ),
-                                               a    = document.createElement( 'a' ),
-                                               span = document.createElement( 'span' ),
-                                               key  = document.createElement( 'kbd' );
-                                       a.appendChild( span );
-                                       a.appendChild( key );
-                                       ret.appendChild( a );
-                                       a.href = '#';
-                                       return ret;
-                               })();
-                               barH       = Util.getElementSize( elmBar ).height;
-                               MENU_BAR_CONTROL.h = barH;
-                               itemW      = Util.getElementSize( elmItemOrigin ).width;
-                               selectionW = Util.getElementSize( elmItemOrigin.getElementsByTagName( 'ul' )[ 0 ] ).width;
+                       id : 'MENU_BAR_CONTROL',
+                       h  : 0,
+                       init : function(){
+                               elmBar   = document.getElementById( 'menu-bar' );
+                               nodeBar  = eventRoot.createNode( elmBar, false, false, 'menu-bar-hover' );
                                
-                               MENU_BAR_CONTROL.QUIT   = createMenubarItem( 'Quit' );
-                               MENU_BAR_CONTROL.EDIT   = createMenubarItem( 'Edit' );
-                               MENU_BAR_CONTROL.WINDOW = createMenubarItem( 'Window' );
-                               MENU_BAR_CONTROL.HELP   = Util.extend(
-                                       createMenubarItem( 'Help' ),
-                                       {
-                                               createAjaxSelection: function( callback ){
-                                                       var elmLoading   = document.createElement( 'li' ),
-                                                               that         = this;
-                                                       this.elmUl.appendChild( elmLoading );
-                                                       elmLoading.className    = 'loading';
-                                                       elmLoading.style.height = '90px';                                                       
-               
-                                                       this.onShow = callback;
-                                                       callback    = null;
-                                                       
-                                                       delete this.createAjaxSelection;
-                                                       return function(){
-                                                               that.elmUl.removeChild( elmLoading );
-                                                               that._open();
-                                                               delete that.onShow;
-                                                               elmLoading = that = null;
-                                                       };
-                                               },
-                                               onShow: null
-                                       }
-                               );
+                               MENU_BAR_CONTROL.QUIT   = MENU_BAR_CONTROL.createItem( 'Quit' );
+                               MENU_BAR_CONTROL.EDIT   = MENU_BAR_CONTROL.createItem( 'Edit' );
+                               MENU_BAR_CONTROL.WINDOW = MENU_BAR_CONTROL.createItem( 'Window' );
+                               MENU_BAR_CONTROL.HELP   = MENU_BAR_CONTROL.createItem( 'Help' );
+                               
+                               var size = Util.getElementSize( MenuPrivateDataClass.list[ 0 ].elm );
+                               menuW    = size.width;
+                               barH     = MENU_BAR_CONTROL.h = size.height;
+                               
+                               elmBar.style.top = ( - barH ) + 'px';
+                               $( elmBar ).animate( { top: 0 } );                              
                                
-                               elmBar.style.top = ( -barH ) + 'px';
-                               $( elmBar ).animate( { top: 0 });
-
                                delete MENU_BAR_CONTROL.init;
                        },
-                       open: function(){
-                               for( var i = itemList.length; i; ) itemList[ --i ]._open();
+                       open : function(){
+                               for( var i = MenuPrivateDataClass.list.length; i; ) MenuPrivateDataClass.list[ --i ].open();
                                delete MENU_BAR_CONTROL.open;
                        },
-                       close: function(){
-                               var s;
-                               while( s = itemList.shift() ) s._close();
-                               itemList = elmRoot = elmBar = elmItemOrigin = elmSelectionOrigin = null;
+                       close : function(){
+                               var data;
+                               while( data = MenuPrivateDataClass.list.shift() ) data.close();
+                               MenuPrivateDataClass.list = elmBar = layerBox = elmBox = null;
                                MENU_BAR_CONTROL.kill = kill;
                                MENU_BAR_CONTROL.kill();
                        },
-                       h: 0,
-                       mousemove: function( _mouseX, _mouseY ){
-                               if( barH >= _mouseY ) return true;
-                               
-                               for( var i = itemList.length; i; ) itemList[ --i ].hide();
-                               return false;
-                       },
-                       mouseup: function( _mouseX, _mouseY ){
-                               return false;
-                       },
-                       mousedown: function( _mouseX, _mouseY ){
-                               var l = itemList.length;
-                               if( barH < _mouseY || itemW * l < _mouseX ) return false;
-                               for( ; l; ){
-                                       --l;
-                                       itemList[ l ][ l * itemW <= _mouseX && _mouseX < ( l + 1 ) * itemW ? 'show' : 'hide' ]();
-                               };
-                               return true;
+                       createItem : function( title ){
+                               return new MenuClass( title );
                        },
-                       busy: function( _busy ){
+                       busy : function( _busy ){
                                return false;
                        },
                        onWindowResize: function( _windowW, _windowH ){
@@ -1427,7 +1560,7 @@ var Editor = gOS.registerApplication( function(){
                        EDIT:   null,
                        WINDOW: null,
                        HELP:   null
-               }
+               };
        })();
 
 
@@ -1449,7 +1582,7 @@ var Editor = gOS.registerApplication( function(){
                        if( stackBack.length === 0 ) return;
 
                        var s = stackBack.pop();
-                       s.fn.apply( {}, s.argBack );
+                       s.callback.apply( s.thisObj || {}, s.argBack );
                        menubarBack.visible( stackBack.length !== 0 );
                        SAVE_CONTROL.panelUpdated( stackBack.length !== 0 );
                        
@@ -1460,18 +1593,19 @@ var Editor = gOS.registerApplication( function(){
                        if( stackForward.length === 0 ) return;
                        
                        var s = stackForward.pop();
-                       s.fn.apply( {}, s.argForword );
+                       s.callback.apply( s.thisObj || {}, s.argForword );
                        menubarForward.visible( stackForward.length !== 0 );
                        
                        stackBack.push( s );
                        menubarBack.visible( true );
                        SAVE_CONTROL.panelUpdated( true );
                };
-               var RecordClass = function( _function, _argBack, _argForword, _destroy ){
-                       this.fn         = _function;
-                       this.argBack    = _argBack;
-                       this.argForword = _argForword;
-                       this.destroy    = _destroy;
+               var RecordClass = function( callback, argBack, argForword, destroy, opt_thisObject ){
+                       this.callback         = callback;
+                       this.argBack    = argBack;
+                       this.argForword = argForword;
+                       this.destroy    = destroy;
+                       this.thisObj    = opt_thisObject;
                };
                RecordClass.prototype.kill = function( _callDestroy ){
                        var     _argBack    = this.argBack,
@@ -1513,8 +1647,8 @@ var Editor = gOS.registerApplication( function(){
                        while( s = stackForward.shift() ) s.kill( true );
                        menubarBack = menubarForward = stackBack = stackForward = null;
                        },
-                   saveState: function( _function, _argBack, _argForword, _onRecordDestroy ){
-                       stackBack.push( new RecordClass( _function, _argBack, _argForword, _onRecordDestroy ));
+                   saveState: function( _function, _argBack, _argForword, _onRecordDestroy, opt_thisObject ){
+                       stackBack.push( new RecordClass( _function, _argBack, _argForword, _onRecordDestroy, opt_thisObject ));
                        menubarBack.visible( true );
                                SAVE_CONTROL.panelUpdated( true );
                                
@@ -1522,7 +1656,7 @@ var Editor = gOS.registerApplication( function(){
                        while( s = stackForward.shift() ) s.kill( s.destroy );
                                menubarForward.visible( false );
                    }           
-               }
+               };
        })();
 
 /* ----------------------------------------
@@ -1589,7 +1723,7 @@ var Editor = gOS.registerApplication( function(){
                        save: function(){
                                
                        }
-               }
+               };
        })();
 
 /* ----------------------------------------
@@ -1598,315 +1732,372 @@ var Editor = gOS.registerApplication( function(){
  *  - mouseEventListener
  */    
        var WINDOWS_CONTROL = ( function(){
-               /*
-                *  表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。
-                */
+       /*
+        *  表示上手前にあるwindowは、WINDOW_DATA_LISTの先頭にあり、htmlでは後ろにある。
+        */
                var DEFAULT_MIN_WINDOW_WIDTH  = 200,
                        DEFAULT_MIN_WINDOW_HEIGHT = 200,
-                       WINDOW_ARRAY              = [],
+                       WINDOW_DATA_LIST          = [],
                        WINDOW_BODY_BODER_SIZE    = 1,
-                       currentWindowIndex        = -1,
-                       currentWindow,
+                       currentWindowData,
                        elmRoot,
+                       nodeContainer,
                        elmWindowOrigin,
                        closeButtonWidth;
-                       
-               var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH ){
-                       var menubarOption,
-                               elmHeader, elmFooter = null,
-                               elmBody, elmBodyStyle,
-                               startX, startY, startW, startH,
-                               offsetX, offsetY,
-                               headerH, bodyH, footerH = 0,
-                               isDragging = false,
-                               isResizing = false,
-                               bodyIsTachable = false,
-                               self = this;
-
-                       function update( _x, _y, _w, _h ){
-                               _x = _x !== undefined ? _x : x;
-                               _y = _y !== undefined ? _y : y;
-                               _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;
-                               _w = _w !== undefined ? _w : w;
-                               _h = _h !== undefined ? _h : h;
-                               self.elm.style.cssText = [
-                                       'left:',   _x, 'px;',
-                                       'top:',    _y, 'px;',
-                                       'width:',  _w, 'px;',
-                                       'height:', _h, 'px;'
-                               ].join( '' );
-                               bodyH = _h - headerH - footerH;
-                               elmBodyStyle.height = bodyH + 'px';
-                               ( w !== _w || h !== _h) && self.onResize && self.onResize( _w, bodyH );
-                               x = _x;
-                               y = _y;
-                               w = _w;
-                               h = _h;
-                       };
-                       function bodyBackOrForward( isBack ){
-                               if( !self ) return;
-                               if( bodyIsTachable === !isBack ) return;
-                               elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';
-                               elmBodyStyle.left =             isBack === true ? 0  : x +'px';
-                               elmBodyStyle.top =              isBack === true ? 0  : y + headerH + 'px';
-                               elmBodyStyle.width =    isBack === true ? '' : ( w - WINDOW_BODY_BODER_SIZE * 2 ) + 'px';
-                               bodyIsTachable === isBack && isBack === true ? elmHeader.parentNode.insertBefore( elmBody, elmHeader.nextSibling ) : app.rootElement.appendChild( elmBody );
-                               bodyIsTachable = !isBack;
-                       };
-
-                       this.init = function(){
-                               self.elm      = elmWindowOrigin.cloneNode( true );
-                               menubarOption = MENU_BAR_CONTROL.WINDOW.createOption( 
-                                       ( visible !== true ? 'show ' : 'hide ' ) + title,
-                                       null, function(){ visible === true ? self.close() : self.open(); }, true
+       /**
+        * WindowPrivateData
+        */
+               var WindowPrivateData = function(){};
+               WindowPrivateData.prototype = {
+                       window        : null,
+                       menubarOption : null,
+                       elm           : null,
+                       elmHead       : null,
+                       elmBody       : null,
+                       nodeWindow    : null,
+                       nodeHead      : null,
+                       nodeBody      : null,
+                       nodeFoot      : null,
+                       nodeResize    : null,
+                       visible       : false,
+                       isDragging    : false,
+                       isResizing    : false,
+                       title         : null,
+                       x             : 0,
+                       y             : 0,
+                       w             : 0,
+                       h             : 0,
+                       minWindowW    : 200,
+                       minWindowH    : 200,
+                       startX        : 0,
+                       startY        : 0,
+                       startW        : 0,
+                       startH        : 0,
+                       offsetX       : 0,
+                       offsetY       : 0,
+                       headerH       : 0,
+                       bodyH         : 0,
+                       footerH       : 0,
+                       init : function( win, bodyTempleteID, title, x, y, w, h, visible, closeEnabled, resizeEnabled, minWindowW, minWindowH ){
+                               this.window         = win;
+                               this.bodyTempleteID = bodyTempleteID;
+                               this.title          = title;
+                               this.x              = x;
+                               this.y              = y;
+                               this.w              = w;
+                               this.h              = h;
+                               this.visible        = visible;
+                               this.closeEnabled   = closeEnabled;
+                               this.resizeEnabled  = resizeEnabled;
+                               this.minWindowW     = minWindowW;
+                               this.minWindowH     = minWindowH;
+                               
+                               WINDOW_DATA_LIST.push( this );
+                       },
+                       create : function(){
+                               var win = this.window;
+                               this.elm = win.elm = elmWindowOrigin.cloneNode( true );
+                               this.menubarOption = MENU_BAR_CONTROL.WINDOW.createOption( 
+                                       ( this.visible !== true ? 'show ' : 'hide ' ) + this.title,
+                                       null, this.onMenubarClick,
+                                       true, false, false,
+                                       this
                                );
-                               elmHeader     = Util.getElementsByClassName( self.elm, 'window-header' )[ 0 ];
-                               elmHeader.innerHTML = title;
-                               headerH       = Util.getElementSize( elmHeader ).height;
-                               elmBody       = Util.getElementsByClassName( self.elm, 'window-body' )[ 0 ];
-                               elmBodyStyle  = elmBody.style;
+                               if( win.onInit ){
+                                       win.onInit();
+                                       delete win.onInit;
+                               };
+                       },
+                       onMenubarClick : function(){
+                               this.window[ this.visible === true ? 'close' : 'open' ]();
+                       },
+                       update : function( x, y, w, h ){
+                               var win = this.window, bodyH;
+                                       
+                               x = x !== undefined ? x : this.x;
+                               y = y !== undefined ? y : this.y;
+                               y = y > MENU_BAR_CONTROL.h ? y : MENU_BAR_CONTROL.h;
+                               w = w !== undefined ? w : this.w;
+                               h = h !== undefined ? h : this.h;
                                
-                               self.onInit && self.onInit();
-                               delete self.init;
-                       };
-                       this.x = function(){ return x;};
-                       this.y = function(){ return y;};
-                       this.w = function(){ return w;};
-                       this.h = function(){ return h;};
-                       this.title = function( _title ){
-                               if( Type.isString( _title ) === true ){
-                                       jqHeader.html( _title );
-                                       title = _title;
-                               }
-                               return title;
-                       };
-                       this.visible   = visible;
-                       this.firstOpen = function(){
-                               var elmReplace = Util.getElementsByClassName( self.elm, 'window-body-insert-position' )[ 0 ];
+                               this.nodeWindow.update( x, y, w, h );
+                               this.nodeHead && this.nodeHead.update( 0, 0, w, this.headerH );
+                               console.log( '************ hewader' + this.headerH )
+                               this.nodeBody.update( 0, this.headerH, w, this.bodyH = h - this.headerH - this.footerH );
+                               ( this.w !== w || this.h !== h ) && win.onResize && win.onResize( w, this.bodyH );
 
-                               if( bodyTempleteID ){
-                                       elmReplace.parentNode.replaceChild( document.getElementById( bodyTempleteID ), elmReplace );
-                               } else {
-                                       elmReplace.parentNode.removeChild( elmReplace );
-                               };
+                               this.x = x;
+                               this.y = y;
+                               this.w = w;
+                               this.h = h;
+                       },
+                       firstOpen : function(){
+                               var win       = this.window,
+                                       elmHead   = this.elmHead = Util.getElementsByClassName( this.elm, 'window-header' )[ 0 ];
+                                       elmBody   = this.elmBody = Util.getElementsByClassName( this.elm, 'window-body' )[ 0 ],
+                                       elmClose  = Util.getElementsByClassName( this.elm, 'window-close-button' )[ 0 ],
+                                       elmFoot   = Util.getElementsByClassName( this.elm, 'window-footer' )[ 0 ],
+                                       elmResize = Util.getElementsByClassName( this.elm, 'window-resize-button' )[ 0 ],
+                                       replaceID = this.bodyTempleteID;
                                
-                               if( CLOSE_BUTTON_ENABLED !== true ){
-                                       var elmClose = Util.getElementsByClassName( self.elm, 'window-close-button' )[ 0 ];
-                                       elmClose.parentNode.removeChild( elmClose );
-                               };                              
+                               this.nodeWindow = nodeContainer.createNode( this.elm, false, true, 'window-wrapper-hover' );
+                               this.nodeWindow.addEventListener( 'mousemove', this.mousemove, this );
+                               this.nodeWindow.addEventListener( 'mousedown', this.mousedown, this );
+                               this.nodeWindow.addEventListener( 'mouseup',   this.mouseup,   this );
+                               this.nodeWindow.addEventListener( 'mouseout',  this.mouseup,   this );
                                
+                               // this.nodeHead   = this.nodeWindow.createNode( elmHead );
+                               win.title( this.title );
+
+                               this.nodeBody   = this.nodeWindow.createNode( elmBody, false, true, null, '', true );
+                               replaceID && elmBody.appendChild( document.getElementById( replaceID ) );
                                
-                               var elmFooter = Util.getElementsByClassName( self.elm, 'window-footer' )[ 0 ];
-                               if( RESIZE_BUTTON_ENABLED === true ){
-                                       footerH = Util.getElementSize( elmFooter ).height;
+                               if( this.closeEnabled === true ){
+                                       // this.nodeClose = this.nodeHead.createNode( elmClose );
+                                       // this.nodeClose.addEventListener( 'mousedown', win.close, data );
                                } else {
-                                       elmFooter.parentNode.removeChild( elmFooter );
-                               }
-                               self.onFirstOpen && self.onFirstOpen( w, h - headerH - footerH );
+                                       elmClose.parentNode.removeChild( elmClose );
+                               };
+                               
+                               if( this.resizeEnabled === true ){
+                                       // this.nodeFoot = this.nodeWindow.createNode( elmFoot );
+                                       this.footerH  = Util.getElementSize( elmFoot ).height; // this.nodeFoot.height();
+                                       
+                                       // this.nodeResize = this.nodeFoot.createNode( elmResize );
+                                       // this.nodeResize.addEventListener( 'mousedrag', this.resizeDrag, data );
+                               } else {
+                                       elmFoot.parentNode.removeChild( elmFoot );
+                               };
                                
-                               update( x, y, w, h );
+                               this.update( this.x, this.y, this.w, this.h );
+                               if( win.onFirstOpen ){
+                                       win.onFirstOpen( this.w, this.bodyH, this.nodeBody );
+                                       delete win.onFirtOpen;
+                               };
                                
-                               delete self.firstOpen;
-                       };
-                       this.open = function(){
-                               if( visible === true )return;
-                               self.visible = visible = true;
-                               openWindow( self );
-                               menubarOption.title( 'hide ' + title );
+                               this.firstOpen = null;
+                       },
+                       onFadeIn : function(){
+                               var data = WindowPrivateData.get( this ),
+                                       win  = data.window;
+                               data.firstOpen && data.firstOpen();
+                               win.onOpen && win.onOpen( data.w, data.bodyH );
+                               data.nodeWindow.disabled( false );
+                               data.goFront();
+                       },
+                       onFadeOut : function(){
+                               var data = WindowPrivateData.get( this ),
+                                       win  = data.window;
+                               elmRoot.removeChild( data.elm );
+                               win.onClose && app.addAsyncCall( win.onClose, null, win );
+                       },
+                       mousedown : function( e ){
+                               currentWindowData !== this && this.goFront();
                                
-                               for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i ){
-                                       if( WINDOW_ARRAY[ i ] === self ){
-                                               WINDOW_ARRAY.splice( i, 1 );
-                                               WINDOW_ARRAY.unshift( self );
-                                               currentWindow      = null;
-                                               currentWindowIndex = -1;
-                                       };
+                               var x   = e.layerX,
+                                       y   = e.layerY;
+                               if( this.resizeEnabled === true && this.w - 20 <= x && x < this.w && this.headerH + this.bodyH < y && y <= this.h ){
+                                       this.isResizing = true;
+                                       //this.startX     = this.x;
+                                       //this.startY     = this.y;
+                                       this.startW     = this.w;
+                                       this.startH     = this.h;
+                                       this.offsetX    = x;
+                                       this.offsetY    = y;
+                                       // app.updateCoursor( 'nw-resize' );
+                                       this.nodeWindow.cursor( 'nw-resize' );
+                                       return true;
                                };
-                       };
-                       this.onFadeIn = function(){
-                               self.firstOpen && self.firstOpen();
-                               self.onOpen && self.onOpen( w, bodyH );
-                       };
-                       this.onFadeOut = function(){
-                               self.elm.parentNode.removeChild( self.elm );
-                               self.onClose && app.addAsyncCall( self.onClose, null, self );
-                       };
-                       this.close = function(){
-                               if( visible === false) return;
-                               self.visible = visible = false;
-                               $( self.elm ).fadeOut( self.onFadeOut );
-                               menubarOption.title( 'show ' + title );
-                       };
-                       this.bodyBackOrForward = bodyBackOrForward;
-                       this.mousedown = function( _mouseX, _mouseY ){
-                               if( RESIZE_BUTTON_ENABLED === true && x + w -20 <= _mouseX && _mouseX < x + w && y + headerH + bodyH < _mouseY && _mouseY <= y + h ){
-                                       bodyBackOrForward( true);
-                                       isResizing = true;
-                                       startX = x;
-                                       startY = y;
-                                       startW = w;
-                                       startH = h;
-                                       offsetX = _mouseX;
-                                       offsetY = _mouseY;
-                                       updateMouseCursor( 'nw-resize');
-                                       return;
-                               }
                                
-                               if( x > _mouseX || y > _mouseY || x + w < _mouseX || y + headerH < _mouseY ) return;
-                               if( CLOSE_BUTTON_ENABLED === true && x + w - closeButtonWidth < _mouseX){
-                                       self.close();
+                               // if( x < 0 || y < 0 || this.w < x || this.headerH < y ) return false;
+                               if( this.closeEnabled === true && this.w - closeButtonWidth < x && y < this.headerH ){
+                                       this.window.close();
                                        return;
-                               }
+                               };
                                
-                               isDragging = true;
-                               updateMouseCursor( 'move');                             
-                               startX = x;
-                               startY = y;
-                               startW = w;
-                               startH = h;
-                               offsetX = _mouseX;
-                               offsetY = _mouseY;
-                       };
-                       this.mouseup = function( _mouseX, _mouseY ){
-                               isDragging = isResizing = false;
-                               updateMouseCursor( '');
-                       };
-                       this.mousemove = function( _mouseX, _mouseY ){
-                               var _updateX = _mouseX - offsetX,
-                                       _updateY = _mouseY - offsetY;
+                               if( y < this.headerH ){
+                                       this.isDragging = true;
+                                       this.startX     = this.x;
+                                       this.startY     = this.y;
+                                       this.startW     = this.w;
+                                       this.startH     = this.h;
+                                       this.offsetX    = x;
+                                       this.offsetY    = y;
+                                       
+                                       // app.updateCoursor( 'move' );
+                                       this.nodeWindow.cursor( 'move' );
+                                       return true;                                    
+                               }
+                       },
+                       mouseup : function( e ){
+                               if( this.isResizing === true || this.isDragging === true ){
+                                       this.isDragging = this.isResizing = false;
+                                       this.update();
+                               };
+                               this.nodeWindow.cursor( '' );
+                       },
+                       mousemove : function( e ){
+                               currentWindowData !== this && this.goFront();
                                
-                               if( isResizing === true){
-                                       var _w = startW +_updateX,
-                                               _h = startH +_updateY;
-                                       update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h );
-                                       return;
-                               } else
-                               if( isDragging === true) {
-                                       update( startX + _updateX, startY + _updateY);
-                                       return;
+                               var x   = e.layerX,
+                                       y   = e.layerY,
+                                       w, h;
+                               if( this.isResizing === true ){
+                                       w = this.startW + x - this.offsetX;
+                                       h = this.startH + y - this.offsetY;
+                                       this.w = w = w < this.minWindowW ? this.minWindowW : w;
+                                       this.h = h = h < this.minWindowH ? this.minWindowH : h;
+                                       this.elm.style.width  = w + 'px';
+                                       this.elm.style.height = h + 'px';
+                                       return true;                            
                                } else
-                               if( x > _mouseX || x + w < _mouseX ) return;
-
-                               ( y <= _mouseY && y +headerH >= _mouseY ) ?
-                                       updateMouseCursor( 'pointer') : // hit to header
-                                       updateMouseCursor( '');
-                               bodyBackOrForward( y + headerH > _mouseY || y + headerH + bodyH < _mouseY);
-                       };
-                       this.onMouseOut = function( _mouseX, _mouseY ){
-                               bodyIsTachable === true && bodyBackOrForward( true );
-                               isDragging = false;
-                               updateMouseCursor( '' );
-                       };
-                       this.busy = function(){
-                               return isDragging === true || isResizing === true;
+                               if( this.isDragging === true ){
+                                       this.x = x = this.startX + x - this.offsetX;
+                                       this.y = y = this.startY + y - this.offsetY;
+                                       this.elm.style.left = x + 'px';
+                                       this.elm.style.top  = y + 'px';
+                                       return true;
+                               };
+                               // if( e.hit === false || ( this.headerH < layerY && layerY < this.headerH + this.bodyH ) ) return false;
+                               this.nodeWindow.cursor( ( /*0 < layerX && layerX < this.w && 0 <= layerY &&*/ y <= this.headerH ) ? 'pointer' : '' );
+                       },
+                       goFront : function(){
+                               currentWindowData = this;
+                               var i = nodeContainer.numNode() - 1;
+                               // console.log( this.nodeWindow.nodeIndex() + ' , ' + this.nodeWindow.numNode() )
+                               if( this.nodeWindow.nodeIndex() !== i ){
+                                       this.nodeWindow.nodeIndex( i );
+                                       elmRoot.appendChild( this.elm );
+                               };
+                       },
+                       busy : function(){
+                               return this.isDragging === true || this.isResizing === true;
+                       },
+                       destroy : function(){
+                               
+                       }
+               };
+               WindowPrivateData.get = function( windowOrElement ){
+                       if( windowOrElement instanceof WindowPrivateData ) return windowOrElement;
+                       var list = WINDOW_DATA_LIST,
+                               i    = list.length,
+                               data;
+                       for( ; i; ){
+                               data = list[ --i ];
+                               if( data.window === windowOrElement || data.elm === windowOrElement ) return data;
                        };
+                       return null;
                };
                
-               function getCurrentIndex( _mouseX, _mouseY ){
-                       if( currentWindow && currentWindow.busy() === true ) return currentWindowIndex;
-                       var l = WINDOW_ARRAY.length,
-                               _currentWindow = null,
-                               _win, _x, _y;
-                       currentWindowIndex = -1;
-                       for( var i=0; i<l; i++){
-                               _win = WINDOW_ARRAY[ i];
-                               if( _win.visible !== true ) continue;
-                               _x = _win.x();
-                               _y = _win.y();
-                               if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){
-                                       _currentWindow = _win;
-                                       currentWindowIndex = i;
-                                       break;
-                               }
+       /**
+        * WindowClass
+        */
+               var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, closeEnabled, resizeEnabled, minWindowW, minWindowH ){
+                       ( new WindowPrivateData() ).init( this, bodyTempleteID, title, x, y, w, h, visible, closeEnabled, resizeEnabled, minWindowW, minWindowH );
+               };
+               WindowClass.prototype = {
+                       elm        : null,
+                       open : function(){
+                               var data = WindowPrivateData.get( this );
+                               if( data.visible === true ) return;
+                               
+                               data.visible = true;
+                               openWindow( data );
+                               data.menubarOption.title( 'hide ' + data.title );
+                               
+                               // WINDOW_DATA_LIST.splice( Util.getIndex( WINDOW_DATA_LIST, data ), 1 );
+                               // WINDOW_DATA_LIST.unshift( data );
+                               currentWindowData  = null;
+                       },
+                       close : function(){
+                               var data = WindowPrivateData.get( this );
+                               if( data.visible === false ) return;
+                               
+                               data.visible = false;
+                               $( data.elm ).fadeOut( data.onFadeOut );
+                               data.menubarOption.title( 'show ' + data.title );
+                               data.nodeWindow.disabled( true );
+                       },
+                       title : function( _title ){
+                               if( Type.isString( _title ) === true ){
+                                       var data = WindowPrivateData.get( this );
+                                       data.elmHead.firstChild.innerHTML = data.title = _title;
+                                       // data.nodeHead.mesure();
+                                       //data.headerH = data.nodeHead.height();
+                                       data.headerH = Util.getElementSize( data.elmHead ).height;
+                               };
+                               return data.title;
+                       },
+                       createHeaderItem : function(){
+                               var data = WindowPrivateData.get( this ),
+                                       elm  = document.createElement( 'div' ),
+                                       node;
+                               if( !data.nodeHead ) data.nodeHead = data.nodeWindow.createNode( data.elmHead, true, false );
+                               data.elmHead.appendChild( elm );
+                               elm.className = 'header-item finder-path';
+                               node = data.nodeHead.createNode( elm, false, true, 'header-item-hover', '' )
+                               // data.nodeHead.mesure();
+                               // data.headerH = data.nodeHead.height();
+                               
+                               data.headerH = Util.getElementSize( data.elmHead ).height;
+                               data.update();
+                               
+                               return node;
                        }
-                       currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);
-                       currentWindow = _currentWindow;
-                       return currentWindowIndex;
-               }
-               function openWindow( _window ){
-                       if( _window.visible !== true ) return;
-                       elmRoot.appendChild( _window.elm );// appendした後に fadeIn() しないと ie で filterが適用されない.
-                       $( _window.elm ).fadeIn( _window.onFadeIn );
+               };
+               
+               function openWindow( data ){
+                       if( data.visible !== true ) return;
+                       elmRoot.appendChild( data.elm );// appendした後に fadeIn() しないと ie で filterが適用されない.
+                       $( data.elm ).fadeIn( data.onFadeIn );
                        return;
-               }
+               };
                
                return {
-                       init: function(){
+                       id   : 'WINDOWS_CONTROL',
+                       init : function(){
                                elmRoot          = document.getElementById( 'window-container' );
+                               nodeContainer    = eventRoot.createNode( elmRoot, true, false );
                                elmWindowOrigin  = app.fetchHTMLElement( 'windowTemplete' );
                                closeButtonWidth = Util.getElementSize( Util.getElementsByClassName( elmWindowOrigin, 'window-close-button' )[ 0 ] ).width;
                                
                                delete WINDOWS_CONTROL.init;
                        },
-                       open: function(){
-                               for( var i = WINDOW_ARRAY.length, _window; i; ){
-                                       _window = WINDOW_ARRAY[ --i ];
-                                       _window.init && _window.init();
-                                       _window.visible === true && openWindow( _window );
+                       open : function(){
+                               for( var i = WINDOW_DATA_LIST.length, data; i; ){
+                                       data = WINDOW_DATA_LIST[ --i ];
+                                       data.create();
+                                       openWindow( data );
                                };
-                               
                                delete WINDOWS_CONTROL.open;
                        },
-                       close: function(){
-                       },
-                       mousemove: function( _mouseX, _mouseY ){
-                               var _index = getCurrentIndex( _mouseX, _mouseY );
-                               if( _index === 0 ){
-                                       currentWindow.mousemove( _mouseX, _mouseY );
-                                       return true;
-                               } else
-                               if( _index > 0 ){ // 先頭のクリックでない場合
-                               // Array を前に
-                                       WINDOW_ARRAY.splice( currentWindowIndex, 1 );
-                                       WINDOW_ARRAY.unshift( currentWindow );
-                               // Domを最後に
-                                       elmRoot.appendChild( currentWindow.elm );
-                                       currentWindowIndex = 0;
-                                       return true;
-                               }
-                               return false;
-                       },
-                       mouseup: function( _mouseX, _mouseY ){
-                               if( getCurrentIndex( _mouseX, _mouseY) === 0){
-                                       currentWindow.mouseup( _mouseX, _mouseY);
-                                       return true;
-                               }
-                               return false;
-                       },
-                       mousedown: function( _mouseX, _mouseY ){
-                               if( getCurrentIndex( _mouseX, _mouseY) === 0){
-                                       currentWindow.mousedown( _mouseX, _mouseY);
-                                       return true;
-                               }
-                               return false;
+                       close : function(){
                        },
-                       busy: function(){
-                               return currentWindow !== null;
-                       },
-                       onWindowResize: function( _windowW, _windowH ){
+                       onWindowResize : function( _windowW, _windowH ){
                                /*
                                 * 画面外に出るwindowの移動
                                 */
                        },
-                       createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ){
-                               opt_visible = opt_visible !== false;
-                               opt_closeButtonEnabled = opt_closeButtonEnabled === true;
-                               opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;
-                               opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH ) ? w : DEFAULT_MIN_WINDOW_WIDTH;
-                               opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT ) ? h : DEFAULT_MIN_WINDOW_HEIGHT;
+                       createWindow : function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeEnabled, opt_resizeEnabled, opt_minWindowW, opt_minWindowH ){
+                               opt_visible       = opt_visible !== false;
+                               opt_closeEnabled  = opt_closeEnabled === true;
+                               opt_resizeEnabled = opt_resizeEnabled === true;
+                               opt_minWindowW    = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH ) ? w : DEFAULT_MIN_WINDOW_WIDTH;
+                               opt_minWindowH    = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT ) ? h : DEFAULT_MIN_WINDOW_HEIGHT;
                                
-                               var _window = new WindowClass( bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH );
+                               var win = new WindowClass( bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeEnabled, opt_resizeEnabled, opt_minWindowW, opt_minWindowH ),
+                                       data;
                                for( var key in EXTENDS ){
-                                       _window[ key ] = EXTENDS[ key ];
-                               }
-                               WINDOW_ARRAY.unshift( _window );
+                                       win[ key ] = EXTENDS[ key ];
+                               };
                                if( Type.isUndefined( WINDOWS_CONTROL.init ) === true ){
-                                       _window.init();
-                                       openWindow( _window );
-                               }
-                               return _window;
+                                       data = WindowPrivateData.get( win );
+                                       data.create();
+                                       openWindow( data );
+                               };
+                               return win;
                        }
-               }
+               };
        })();
 
 /* ----------------------------------------
@@ -1920,43 +2111,39 @@ var Editor = gOS.registerApplication( function(){
                app.addKeyEventListener( 'keydown', switchGrid, 71, false, true );
 
                function addImage(){
-                       IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);
-                       TOOL_BOX_WINDOW.bodyBackOrForward( true );
+                       // IMAGE_EXPLORER_WINDOW.open();
+                       app.addAsyncCall( IMAGE_EXPLORER_WINDOW.open, null, IMAGE_EXPLORER_WINDOW );
+                       //TOOL_BOX_WINDOW.bodyBackOrForward( true );
                };
                function addText(){
                        app.addAsyncCall( PANEL_ELEMENT_CONTROL.createTextElement );
                };
                function switchGrid(){
-                       app.addAsyncCall( GRID_CONTROL.update );
+                       app.addAsyncCall( GRID_CONTROL.update, null, GRID_CONTROL );
                };
                function popupHelp(){
-                       TOOL_BOX_WINDOW.bodyBackOrForward( true );
-                       app.addAsyncCall( HELP_DOCUMENTS_WINDOW.open );
+                       //.bodyBackOrForward( true );
+                       app.addAsyncCall( HELP_DOCUMENTS_WINDOW.open, null, HELP_DOCUMENTS_WINDOW );
                };
                function editBG( e ){
-                       TOOL_BOX_WINDOW.bodyBackOrForward( true );
-                       app.addAsyncCall( INFOMATION_WINDOW.open );
+                       //TOOL_BOX_WINDOW.bodyBackOrForward( true );
+                       app.addAsyncCall( INFOMATION_WINDOW.open, null, INFOMATION_WINDOW );
                };
                
                return WINDOWS_CONTROL.createWindow(
                        {
                                onInit: function(){
-                                       MENU_BAR_CONTROL.EDIT.createOption( 'Add Image', 'ctrl + I', addImage, true, true, false);
-                                       MENU_BAR_CONTROL.EDIT.createOption( 'Add Text', 'ctrl + T',  addText, true, false, true);
-                                       MENU_BAR_CONTROL.EDIT.createOption( 'show Grid', 'ctrl + G', switchGrid, true, true, true);
-                                       
-                                       delete TOOL_BOX_WINDOW.onInit;
+                                       MENU_BAR_CONTROL.EDIT.createOption( 'Add Image', 'ctrl + I', addImage, true, true, false );
+                                       MENU_BAR_CONTROL.EDIT.createOption( 'Add Text',  'ctrl + T', addText, true, false, true );
+                                       MENU_BAR_CONTROL.EDIT.createOption( 'show Grid', 'ctrl + G', switchGrid, true, true, true );
                                },
-                               onFirstOpen: function(){
-                                       app.addEventListener( document.getElementById( 'toolbox-add-image-button'), 'click', addImage );
-                                       app.addEventListener( document.getElementById( 'toolbox-add-text-button'), 'click', addText );
-                                       app.addEventListener( document.getElementById( 'toolbox-edit-bg-button'), 'click', editBG );
-                                       app.addEventListener( document.getElementById( 'toolbox-switch-grid'), 'click', switchGrid );
-                                       app.addEventListener( document.getElementById( 'toolbox-popup-help-button'), 'click', popupHelp );
-                                       
-                                       // postButton = $( '#toolbox-post-button');
-                                       
-                                       delete TOOL_BOX_WINDOW.onFirstOpen;
+                               onFirstOpen: function( x, y, nodeBody ){
+                                       nodeBody.createNode( document.getElementById( 'toolbox-add-image-button'  ), false, true, 'button-hover', 'pointer' ).addEventListener( 'click', addImage );
+                                       nodeBody.createNode( document.getElementById( 'toolbox-add-text-button'   ), false, true, 'button-hover', 'pointer' ).addEventListener( 'click', addText );
+                                       nodeBody.createNode( document.getElementById( 'toolbox-edit-bg-button'    ), false, true, 'button-hover', 'pointer' ).addEventListener( 'click', editBG );
+                                       nodeBody.createNode( document.getElementById( 'toolbox-switch-grid'       ), false, true, 'button-hover', 'pointer' ).addEventListener( 'click', switchGrid );
+                                       nodeBody.createNode( document.getElementById( 'toolbox-popup-help-button' ), false, true, 'button-hover', 'pointer' ).addEventListener( 'click', popupHelp );
+                                       // nodeBody.createNode( document.getElementById( 'toolbox-add-text-button'   ), false, true, 'button-hover', 'pointer' ).addEventListener( 'click', addText );
                                }
                        },
                        'toolbox-window', 'Tool box', 0, 215, 110, 290, true
@@ -1976,16 +2163,14 @@ var Editor = gOS.registerApplication( function(){
                        if( Driver.isPettanrFileInstance( _file ) === true ){
                                if( _file.getType() === FILE_TYPE.PICTURE ){
                                        PANEL_ELEMENT_CONTROL.onImageSelect( FileAPI.getFileData( _file ) );
-                               }
-                       }
-               }
+                               };
+                       };
+               };
                
                return WINDOWS_CONTROL.createWindow(
                        {
-                               onInit: function(){
-                                       delete IMAGE_EXPLORER_WINDOW.onInit;
-                               },
-                               onFirstOpen: function( _w, _h ){
+                               onInit: function(){},
+                               onFirstOpen: function( _w, _h, nodeBody ){
                                        tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
                                        var     _root  = tree.getRootFile(),
                                                _myPic = _root.getChildFileByIndex( 0 ),
@@ -1994,16 +2179,14 @@ var Editor = gOS.registerApplication( function(){
                                        _pic.getSeqentialFiles();
                                        _myPic.destroy();
                                        _pic.destroy(); 
-                                       
+                       
                                        finder = app.createFinder(
-                                               document.getElementById( 'image-exproler-container' ),
+                                               nodeBody,
                                                tree,
-                                               null, null,
                                                onFileSelect,
                                                PANEL_ELEMENT_CONTROL.onImageSelect
                                        );
-                                       
-                                       delete IMAGE_EXPLORER_WINDOW.onFirstOpen;
+                                       finder.createPath( IMAGE_EXPLORER_WINDOW.createHeaderItem() );
                                },
                                onOpen: function( _w, _h ){
                                        finder.resize( _w, _h );
@@ -2012,7 +2195,7 @@ var Editor = gOS.registerApplication( function(){
                                        finder.resize( _w, _h );
                                }
                        },
-                       'image-exproler', 'Album', 0, 215, 600, 350, false, true, true, 300, 300
+                       null, 'Album', 0, 215, 600, 350, false, true, true, 300, 300
                );
        })();
        
@@ -2050,7 +2233,6 @@ var Editor = gOS.registerApplication( function(){
                                        inputPercentW    = ui.createInputText( document.getElementById( 'comic-element-w-percent' ), null );
                                        inputPercentH    = ui.createInputText( document.getElementById( 'comic-element-h-percent' ), null );
                                        inputAspectRatio = $( '#comic-element-keep-aspect' );
-                                       delete INFOMATION_WINDOW.onFirstOpen;
                                },
                                onResize: function(  _w, _h ){
                                        jqPanelElementInformation.css( {
@@ -2083,7 +2265,7 @@ var Editor = gOS.registerApplication( function(){
                                                                inputPercentW.visible( true );
                                                                inputPercentH.visible( true );
                                                                inputAspectRatio.show();
-                                                       }
+                                                       };
                                                        currentElementType === -1 && jqPanelElementInformation.stop().css( {
                                                                filter:         '',
                                                                opacity:        ''
@@ -2093,9 +2275,9 @@ var Editor = gOS.registerApplication( function(){
                                                                filter:         '',
                                                                opacity:        ''
                                                        })[ FADE_OUT_EFFECT ]();
-                                               }
+                                               };
                                                currentElementType = _elementType;
-                                       }
+                                       };
                                        if( currentElementType !== -1){
                                                inputX.value( x );
                                                inputY.value( y );
@@ -2107,7 +2289,7 @@ var Editor = gOS.registerApplication( function(){
                                                _elementType === 0 && inputPercentH.value( hPercent );
                                        } else {
                                                
-                                       }
+                                       };
                                }
                        },
                        'infomation-window', 'Infomation', 0, 30, 200, 180, true
@@ -2125,10 +2307,11 @@ var Editor = gOS.registerApplication( function(){
                        jqPages,
                        currentPageIndex = 0,
                        numPage          = 0,
-                       help             = null,
-                       onLoadFunction   = null;
+                       asyncOption      = null;
 
                function onAjaxStart( _pageIndex ){
+                       delete asyncOption.callback;
+                       
                        currentPageIndex = _pageIndex || currentPageIndex;
                        if( onHelpLoad !== null ){
                                $.ajax({
@@ -2138,8 +2321,8 @@ var Editor = gOS.registerApplication( function(){
                                });
                                onHelpLoad = null;
                        }
-                       onAjaxStart = new Function;
-               }
+                       onAjaxStart = null;
+               };
                var onHelpLoad = function( _xml ){
                        var jqXML          = $( _xml ),
                                helpTitle      = jqXML.find( 'pages' ).eq( 0 ).attr( 'title' ),
@@ -2156,13 +2339,16 @@ var Editor = gOS.registerApplication( function(){
                        elmPageOrigin.className = 'page-content main';
                        elmPageOrigin.appendChild( elmTitleOrigin);
                        
+                       MENU_BAR_CONTROL.HELP.remove( asyncOption );
+                       asyncOption = null;                     
+                       
                        jqXML.find( 'page' ).each( function(){
                                var xmlPage = $( this ),
                                        title = xmlPage.attr( 'title' ),
                                        content = xmlPage.text();
                                
                                elmItemOrigin.innerHTML = title;
-                               elmNavi.appendChild( elmItemOrigin.cloneNode( true ));
+                               elmNavi.appendChild( elmItemOrigin.cloneNode( true ) );
                                
                                elmTitleOrigin.innerHTML = title;
                                
@@ -2178,11 +2364,9 @@ var Editor = gOS.registerApplication( function(){
                                }
                                elmPages.appendChild( elmPage );
                                
-                               help.createOption( title, null, onSelectionClick, true );
+                               MENU_BAR_CONTROL.HELP.createOption( title, null, onSelectionClick, true );
                                ++numPage;
                        });
-                       onLoadFunction();
-                       onLoadFunction = null;
                        
                        jqAjaxContents.removeClass( 'loading' ).append( elmNavi, elmPages );
                        
@@ -2191,45 +2375,42 @@ var Editor = gOS.registerApplication( function(){
                        jqPages.find( 'a' ).click( onInnerLinkClick );
                        
                        app.addAsyncCall( jumpPage );
-               }
+               };
                function onSelectionClick( _pageIndex ){
                        HELP_DOCUMENTS_WINDOW.open();
                        jumpPage( _pageIndex );
-               }
+               };
                function jumpPage( _index ){
                        if( Type.isNumber( _index ) === true && 0 <= _index && _index < numPage && currentPageIndex !== _index ){
                                currentPageIndex = _index;
                        };
                        jqNaviItems.removeClass( 'current' ).eq( currentPageIndex ).addClass( 'current' );
                        jqPages.hide().eq( currentPageIndex ).show();
-               }
+               };
                function onNaviClick( e ){
                        // this は <a>
                        jumpPage( Util.getChildIndex( this.parentNode, this ) );
                        return false;
-               }
+               };
                function onInnerLinkClick( e ){
                        var jump = ( this.href || '' ).split( '#jump' ),
                                n = jump[ 1 ];
                        if( !n ) return;
                        jumpPage( '' + parseFloat( n ) === n ? parseFloat( n ) : -1 );
                        return false;                           
-               }
+               };
                return WINDOWS_CONTROL.createWindow(
                        {
                                onInit: function(){
-                                       help           = MENU_BAR_CONTROL.HELP;
-                                       onLoadFunction = help.createAjaxSelection( onAjaxStart );
+                                       asyncOption    = MENU_BAR_CONTROL.HELP.createAsyncOption( onAjaxStart );
                                        jqAjaxContents = $( HELP_DOCUMENTS_WINDOW.elm ).find( '.window-body' ).addClass( 'loading' ).css( { overflow: 'auto' } );
-                                       delete HELP_DOCUMENTS_WINDOW.onInit;
                                },
                                onFirstOpen: function( _w, _h ){
                                        jqAjaxContents.css( { height: _h } );
-                                       onAjaxStart();
-                                       delete HELP_DOCUMENTS_WINDOW.onFirstOpen;
+                                       onAjaxStart !== null && onAjaxStart();
                                },
                                onResize: function( _w, _h ){
-                                       jqAjaxContents && jqAjaxContents.css( { height: _h });
+                                       jqAjaxContents && jqAjaxContents.css( { height: _h } );
                                }
                        },
                        null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300
@@ -2243,7 +2424,7 @@ var Editor = gOS.registerApplication( function(){
  */
        var GRID_CONTROL = ( function(){
                var elmGrid,
-                       urlBG = "url('images/grid.gif')",
+                       urlBG   = "url('images/grid.gif')",
                        visible = false;
 
                return {
@@ -2320,7 +2501,7 @@ var Editor = gOS.registerApplication( function(){
                                styleBottom.width  = _w + 'px';
                                styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom ) + 'px';
                        }
-               }
+               };
        })();
 
 
@@ -2329,81 +2510,113 @@ var Editor = gOS.registerApplication( function(){
  *  - mouseEventListener
  */
        var PanelResizerClass = function( id, isTop ){
-               var style          = document.getElementById( id ).style,
-                       BORDER_WIDTH   = 2,
-                       RESIZER_HEIGHT = 30,
-                       x              = -BORDER_WIDTH / 2,
-                       y              = isTop === true ? ( -5 - RESIZER_HEIGHT - BORDER_WIDTH ) : 0,
-                       w,
-                       h = RESIZER_HEIGHT,
-                       panelX, panelY, panelW, panelH,
-                       offsetY, startY, startH,
-                       isDragging = false;
-               /* history */
-               function restoreState( x, y, w, h ){
-                       if( arguments.length > 3){
-                               PANEL_CONTROL.resize( isTop, x || panelX, y || panelY, w || panelW, h || panelH );
-                       };
-               };
+               this.id    = id;
+               this.isTop = isTop;
+       };
+       PanelResizerClass.BORDER_SIZE = 2;
+       PanelResizerClass.HEIGHT      = 30;
+       PanelResizerClass.prototype = {
+               id             : null,
+               node           : null,
+               style          : null,
+               isTop          : false,
+               x              : - PanelResizerClass.BORDER_SIZE / 2,
+               y              : 0,
+               w              : 0,
+               h              : PanelResizerClass.HEIGHT,
+               panelX         : 0,
+               panelY         : 0,
+               panelW         : 0,
+               panelH         : 0,
+               offsetY        : 0,
+               startY         : 0,
+               startH         : 0,
+               isDragging     : false,
+               init : function(){
+                       this.node  = PANEL_CONTROL.node.createNode( document.getElementById( this.id ), false, false, 'panel-resizer-hover', 'pointer' );
+                       this.node.addEventListener( 'mousedown', this.mousedown, this );
+                       this.style = document.getElementById( this.id ).style;
+                       this.y     = this.isTop === true ? ( -5 - PanelResizerClass.HEIGHT - PanelResizerClass.BORDER_SIZE ) : 0;
+               },      
+               mousedown : function( e ){
                        
-               this.mousedown = function( _mouseX, _mouseY ){
-                       var _x = _mouseX -panelX,
-                               _y = _mouseY -panelY;
-                       if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
-                       offsetY = _y;
-                       startY = panelY;
-                       startH = panelH;
-                       isDragging = true;
-                       updateMouseCursor( 'n-resize' );
+                       var x = e.layerX, // - this.panelX,
+                               y = e.layerY; // - this.panelY;
+                       this.offsetY    = y;
+                       this.startY     = this.panelY;
+                       this.startH     = this.panelH;
+                       this.isDragging = true;
+                       // app.updateCoursor( 'n-resize' );
+                       this.node.addEventListener( 'mousemove', this.mousemove, this );
+                       this.node.addEventListener( 'mouseup',   this.mouseup,   this );
+                       this.node.cursor( 'n-resize' );
                        return true;
-               };
-               this.mousemove = function( _mouseX, _mouseY ){
-                       var _x = _mouseX - panelX,
-                               _y = _mouseY - panelY;
-                       if( isDragging !== true ){
-                               if( _x < x || x + w < _x || _y < y || y + h < _y ) return false;
-                               PANEL_ELEMENT_OPERATION_MANAGER.hide();
-                               updateMouseCursor( 'pointer' );
-                               return true;
+               },
+               mousemove : function( e ){
+                       var move = e.layerY - this.offsetY,
+                               h;
+
+                       if( this.isTop === true ){
+                               if( this.panelH - move < MIN_PANEL_HEIGHT ){
+                                       move = this.panelH - MIN_PANEL_HEIGHT;
+                               };
+                               PANEL_CONTROL.resizeElement( true, this.panelX, this.panelY + move, this.panelW, this.panelH - move );
                        } else {
-                               var move = _y -offsetY;
-                               if( isTop === true){
-                                       if( panelH - move < MIN_PANEL_HEIGHT ){
-                                               move = panelH -MIN_PANEL_HEIGHT;
-                                       };
-                                       PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move );
-                               } else {
-                                       var _h = startH + move;
-                                       if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH ){
-                                               PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h );
-                                       };
+                               h = this.startH + move;
+                               if( 0 < h && h < windowH - this.panelY - PanelResizerClass.HEIGHT - 5 - PanelResizerClass.BORDER_SIZE ){
+                                       PANEL_CONTROL.resizeElement( false, this.panelX, this.panelY, this.panelW, h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : h );
                                };
                        };
                        return true;
-               };
-               this.mouseup = function( _mouseX, _mouseY ){
-                       if( isDragging !== true ) return;
-                       ( startY !== panelY || startH !== panelH ) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH ] );
-                       isDragging = false;
-                       updateMouseCursor( '');
-               };
-               this.busy = function(){
-                       return isDragging;
-               };
-               this.onPanelResize = function( _x, _y, _w, _h ){
-                       panelX = _x;
-                       panelY = _y;
-                       if( panelW !== _w ){
-                               style.width = ( _w + 2 ) + 'px';
-                               panelW = _w;
-                       }
-                       panelH = _h;
-                       y = isTop === true ? y : ( panelH + 5 + BORDER_WIDTH );
-                       w = panelW + 2;
-               };
+               },
+               mouseup : function( e ){
+                       if( this.isDragging !== true ) return;
+                       ( this.startY !== this.panelY || this.startH !== this.panelH ) &&
+                               HISTORY_CONTROL.saveState(
+                                       this.restoreState,
+                                       [ undefined, this.startY, undefined, this.startH ],
+                                       [ undefined, this.panelY, undefined, this.panelH ],
+                                       null, this
+                               );
+                       this.isDragging = false;
+                       var move = e.layerY - this.offsetY,
+                               h;
+
+                       if( this.isTop === true ){
+                               if( this.panelH - move < MIN_PANEL_HEIGHT ){
+                                       move = this.panelH - MIN_PANEL_HEIGHT;
+                               };
+                               PANEL_CONTROL.resize( true, this.panelX, this.panelY + move, this.panelW, this.panelH - move );
+                       } else {
+                               h = this.startH + move;
+                               if( 0 < h && h < windowH - this.panelY - PanelResizerClass.HEIGHT - 5 - PanelResizerClass.BORDER_SIZE ){
+                                       PANEL_CONTROL.resize( false, this.panelX, this.panelY, this.panelW, h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : h );
+                               };
+                       };
+                       // app.updateCoursor( '' );
+                       this.node.removeEventListener( 'mousemove', this.mousemove );
+                       this.node.removeEventListener( 'mouseup',   this.mouseup );
+                       this.node.cursor( 'pointer' );
+               },
+               restoreState : function( x, y, w, h ){
+                       PANEL_CONTROL.resize( this.isTop, x || this.panelX, y || this.panelY, w || this.panelW, h || this.panelH );
+               },
+               busy : function(){
+                       return this.isDragging;
+               },
+               onPanelResize : function( x, y, w, h ){
+                       this.panelX = x;
+                       this.panelY = y;
+                       if( this.panelW !== w ){
+                               this.style.width = ( w + 2 ) + 'px';
+                               this.panelW      = w;
+                       };
+                       this.panelH = h;
+                       this.y = this.isTop === true ? this.y : ( this.panelH + 5 + PanelResizerClass.BORDER_SIZE );
+                       this.w = this.panelW + 2;
+                       this.node.update( undefined, undefined, this.w );
+               }       
        };
-       var     PANEL_RESIZER_TOP,
-               PANEL_RESIZER_BOTTOM;
 
 /* ----------------------------------------
  * PANEL_CONTROL
@@ -2416,39 +2629,45 @@ var Editor = gOS.registerApplication( function(){
  */
        var PANEL_CONTROL = ( function(){
                var elmPanel, stylePanel,
+                       nodePanel            = null,
                        DEFAULT_PANEL_WIDTH  = 400,
                        DEFAULT_PANEL_HEIGHT = 300,
-                       borderSize = 2,
+                       borderSize           = 2,
                        offsetX, offsetY, startX, startY,
-                       isDragging = false,
-                       isDraggable = false;
+                       isDragging           = false,
+                       isDraggable          = false,
+                       resizerTop           = new PanelResizerClass( 'panel-resizer-top',    true ),
+                       resizerBottom        = new PanelResizerClass( 'panel-resizer-bottom', false );
                
                app.addKeyEventListener( 'keychange', onSpaceUpdate, 32, false, false );
                
                function onSpaceUpdate( e ){
                        if( e.type === 'keyup' ){
-                               currentListener === null && updateMouseCursor( '' );
+                               app.isCurrentInteractiveEventListener( null ) === true && app.updateCoursor( '' );
                                isDraggable = false;
                        } else {
-                               currentListener === null && updateMouseCursor( 'move' );
+                               app.isCurrentInteractiveEventListener( null ) === true && app.updateCoursor( 'move' );
                                isDraggable = true;
                        };
                        return false;
                };
                
                return {
-                       x: 0,
-                       y: 0,
-                       w: 0,
-                       h: 0,                   
-                       init: function(){
-                               elmPanel   = document.getElementById( 'panel-tools-container' );
-                               stylePanel = elmPanel.style;
+                       id   : 'PANEL_CONTROL',
+                       x    : 0,
+                       y    : 0,
+                       w    : 0,
+                       h    : 0,
+                       elm  : null,
+                       node : null,
+                       init : function(){
+                               elmPanel      = this.elm  = document.getElementById( 'panel-tools-container' );
+                               nodePanel     = this.node = eventRoot.createNode( elmPanel, true, false );
                                
-                               PANEL_RESIZER_TOP    = new PanelResizerClass( 'panel-resizer-top',    true );
-                               PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );
-                               PanelResizerClass    = null;
+                               resizerTop.init();
+                               resizerBottom.init();
                                
+                               stylePanel = elmPanel.style;
                                delete PANEL_CONTROL.init;
                        },
                        open: function( _panelW, _panelH, _borderSize ){
@@ -2461,22 +2680,31 @@ var Editor = gOS.registerApplication( function(){
                        close: function(){
                                
                        },
-                       resize: function( isResizerTopAction, _x, _y, _w, _h ){
-                               PANEL_CONTROL.x = _x = _x !== undefined ? _x : PANEL_CONTROL.x;
-                               PANEL_CONTROL.y = _y = _y !== undefined ? _y : PANEL_CONTROL.y;
-                               PANEL_CONTROL.w = _w = _w !== undefined ? _w : PANEL_CONTROL.w;
-                               PANEL_CONTROL.h = _h = _h !== undefined ? _h : PANEL_CONTROL.h;
+                       resize: function( isResizerTopAction, x, y, w, h ){
+                               PANEL_CONTROL.x = x = x !== undefined ? x : PANEL_CONTROL.x;
+                               PANEL_CONTROL.y = y = y !== undefined ? y : PANEL_CONTROL.y;
+                               PANEL_CONTROL.w = w = w !== undefined ? w : PANEL_CONTROL.w;
+                               PANEL_CONTROL.h = h = h !== undefined ? h : PANEL_CONTROL.h;
                                
-                               stylePanel.left   = ( _x - borderSize ) + 'px';
-                               stylePanel.top    = ( _y - borderSize ) + 'px';
-                               stylePanel.width  = _w + 'px';
-                               stylePanel.height = _h + 'px';
+                               nodePanel.update( x - borderSize, y - borderSize, w, h );
+
                                
-                               PANEL_RESIZER_TOP.onPanelResize( _x, _y, _w, _h );
-                               PANEL_RESIZER_BOTTOM.onPanelResize( _x, _y, _w, _h );
-                               GRID_CONTROL.onPanelResize( _x, _y );
-                               WHITE_GLASS_CONTROL.onPanelResize( _x, _y, _w, _h );
-                               PANEL_ELEMENT_CONTROL.onPanelResize( _x, _y, _w, _h, isResizerTopAction === true );
+                               resizerTop.onPanelResize( x, y, w, h );
+                               resizerBottom.onPanelResize( x, y, w, h );
+                               GRID_CONTROL.onPanelResize( x, y );
+                               WHITE_GLASS_CONTROL.onPanelResize( x, y, w, h );
+                               PANEL_ELEMENT_CONTROL.onPanelResize( x, y, w, h, isResizerTopAction === true );
+                       },
+                       resizeElement : function( isResizerTopAction, x, y, w, h ){
+                               stylePanel.cssText = [ 'left:',  ( x - borderSize ), 'px;',
+                                                                        'top:',    ( y - borderSize ), 'px;',
+                                                                        'width:',  w, 'px;',
+                                                                        'height:', h, 'px' ].join( '' );
+                               // PANEL_RESIZER_TOP.onPanelResize( x, y, w, h );
+                               // PANEL_RESIZER_BOTTOM.onPanelResize( x, y, w, h );
+                               GRID_CONTROL.onPanelResize( x, y );
+                               WHITE_GLASS_CONTROL.onPanelResize( x, y, w, h );
+                               PANEL_ELEMENT_CONTROL.onPanelResize( x, y, w, h, isResizerTopAction );                  
                        },
                        onWindowResize: function( _windowW, _windowH ){
                                PANEL_CONTROL.x = Math.floor( ( _windowW - PANEL_CONTROL.w ) / 2 );
@@ -2491,7 +2719,7 @@ var Editor = gOS.registerApplication( function(){
                        mouseup: function( _mouseX, _mouseY ){
                                if( isDraggable === true ){
                                        isDragging = false;
-                                       updateMouseCursor( '' );
+                                       app.updateCoursor( '' );
                                }
                        },
                        mousedown: function( _mouseX, _mouseY ){
@@ -2501,7 +2729,7 @@ var Editor = gOS.registerApplication( function(){
                                        startX     = PANEL_CONTROL.x;
                                        startY     = PANEL_CONTROL.y;
                                        isDragging = true;
-                                       updateMouseCursor( 'move' );
+                                       app.updateCoursor( 'move' );
                                        return true;
                                }
                        },
@@ -2518,57 +2746,49 @@ var Editor = gOS.registerApplication( function(){
        var CONSOLE_CONTROLER = ( function(){
                var LAYER_BACK_BUTTON, LAYER_FORWARD_BUTTON, DELETE_BUTTON, EDIT_BUTTON, CHANGE_BUTTON,
                        elmConsoleWrapper, styleConsoleWrapper,
-                       elmConsoleParent,
+                       layerWrapper,
+                       // elmConsoleParent,
                        styleImgConsole, styleTextConsole,
                        currentElement  = null,
                        currentType     = -1,
                        visible         = false,
                        imgConsoleWidth, imgConsoleHeight,
                        textConsoleWidth, textConsoleHeight,
-                       tailSize        = 10,
-                       buttonClickable = false;
-               
-               function buttonBackOrForward( isBack ){
-                       var     offset = Util.getAbsolutePosition( elmConsoleWrapper );
-                       styleConsoleWrapper.position = isBack === true ? '' : 'absolute';
-                       styleConsoleWrapper.left     = ( isBack === true ? CONSOLE_CONTROLER.x  : offset.x ) + 'px';
-                       styleConsoleWrapper.top      = ( isBack === true ? CONSOLE_CONTROLER.y  : offset.y ) + 'px';
-                       buttonClickable === isBack && ( isBack === true ? elmConsoleParent : app.rootElement ).appendChild( elmConsoleWrapper );
-                       buttonClickable = !isBack;
-               };
+                       tailSize        = 10;
+                       
                function layerBack(){
-                       if( currentElement === null) return;
+                       if( currentElement === null ) return;
                        if( PANEL_ELEMENT_CONTROL.replace( currentElement, false ) === false ) return;
                        INFOMATION_WINDOW.update( currentElement );
                        HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.resplace, [ currentElement, true ], [ currentElement, false ] );
                        var _z = currentElement.z;
                        LAYER_BACK_BUTTON.visible( _z > 0 );
-                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1 );
+                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
                };
                function layerForward(){
-                       if( currentElement === null) return;
-                       if( PANEL_ELEMENT_CONTROL.replace( currentElement, true ) === false) return;
-                       INFOMATION_WINDOW.update( currentElement);
-                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.replace, [ currentElement, false], [ currentElement, true ] );
+                       if( currentElement === null ) return;
+                       if( PANEL_ELEMENT_CONTROL.replace( currentElement, true ) === false ) return;
+                       INFOMATION_WINDOW.update( currentElement );
+                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.replace, [ currentElement, false ], [ currentElement, true ] );
                        var _z = currentElement.z;
                        LAYER_BACK_BUTTON.visible( _z > 0 );
-                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
+                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
                };
                function del(){
-                       if( currentElement === null) return;
-                       buttonBackOrForward( true );
+                       if( currentElement === null ) return;
+                       // buttonBackOrForward( true );
                        HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ true, currentElement ], [ false, currentElement ], false ); // true
                        PANEL_ELEMENT_CONTROL.remove( currentElement );
                        PANEL_ELEMENT_OPERATION_MANAGER.hide();
                };
                function edit(){
-                       if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;
+                       if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT ) return;
                        TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, currentElement );
-                       buttonBackOrForward( true );
+                       // buttonBackOrForward( true );
                };
                function change(){
                        if( currentElement === null) return;
-                       buttonBackOrForward( true );
+                       // buttonBackOrForward( true );
                        PremiumSatge.boot( currentElement.getArtistID(), currentElement.resourcePicture );
                };
                function onImageSelect( resourcePicture ){
@@ -2591,32 +2811,24 @@ var Editor = gOS.registerApplication( function(){
                                imgConsoleWidth    = imgConsoleSize.width;
                                imgConsoleHeight   = imgConsoleSize.height;
                                styleImgConsole    = elmImgConsole.style;
-                               elmImgConsole.style.display = 'none';
                                
                                var elmTextConsole  = document.getElementById( 'text-element-consol' ),
                                        textConsoleSize = Util.getElementSize( elmTextConsole );
                                textConsoleWidth    = textConsoleSize.width;
                                textConsoleHeight   = textConsoleSize.height;
                                styleTextConsole    = elmTextConsole.style;
-                               styleTextConsole.display = 'none';
                                
                                elmConsoleWrapper   = document.getElementById( 'comic-element-consol-wrapper' );
                                styleConsoleWrapper = elmConsoleWrapper.style;
-                               elmConsoleParent    = elmConsoleWrapper.parentNode;
-                               styleConsoleWrapper.display = 'none';
+                               // elmConsoleParent    = elmConsoleWrapper.parentNode;
                                
-                               app.addEventListener( document.getElementById( 'edit-text-button' ),     'click', edit );
-                               app.addEventListener( document.getElementById( 'delete-image-button' ),  'click', del );
-                               app.addEventListener( document.getElementById( 'delete-text-button' ),   'click', del );
-                               app.addEventListener( document.getElementById( 'change-image-button' ),  'click', change );
-                               app.addEventListener( document.getElementById( 'layer-forward-button' ), 'click', layerForward );
-                               app.addEventListener( document.getElementById( 'forward-text-button' ),  'click', layerForward );
-                               app.addEventListener( document.getElementById( 'layer-back-button' ),    'click', layerBack );
-                               app.addEventListener( document.getElementById( 'back-text-button' ),     'click', layerBack );
-                                                                                       
+                               elmImgConsole.style.display = styleTextConsole.display = styleConsoleWrapper.display = 'none';
+                                                                               
                                delete CONSOLE_CONTROLER.init;
                        },
                        open: function(){
+                               layerWrapper = app.createInteractContainer( elmConsoleWrapper );
+                               
                                LAYER_BACK_BUTTON    = MENU_BAR_CONTROL.EDIT.createOption( 'layer back', 'ctrl + B', layerBack, false, true, false );
                                LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'layer forward', 'ctrl + F', layerForward, false, false, false );
                                DELETE_BUTTON        = MENU_BAR_CONTROL.EDIT.createOption( 'delete', 'ctrl + D', del, false, true, true );
@@ -2628,23 +2840,37 @@ var Editor = gOS.registerApplication( function(){
                        show: function( _currentElement, _w, _h ){
                                if( visible === false ) styleConsoleWrapper.display = '';
                                visible = true;
-                               currentElement = _currentElement;
+                               currentElement   = _currentElement;
                                var _currentType = _currentElement.type,
-                                       _z = _currentElement.z;
+                                       _z           = _currentElement.z,
+                                       imgEvent, txtEvent;
                                if( currentType !== _currentType ){
                                        currentType = _currentType;
                                        styleImgConsole.display  = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? '' : 'none';
                                        styleTextConsole.display = _currentType === PANEL_ELEMENT_TYPE_TEXT  ? '' : 'none';
                                        CONSOLE_CONTROLER.w = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
                                        CONSOLE_CONTROLER.h = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
-                               }
+                                       
+                                       imgEvent = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? 'addEventListener' : 'removeEventListener';
+                                       txtEvent = _currentType === PANEL_ELEMENT_TYPE_TEXT ?  'addEventListener' : 'removeEventListener';
+                                       
+                                       app[ imgEvent ]( document.getElementById( 'change-image-button' ),  'click', change );
+                                       app[ imgEvent ]( document.getElementById( 'layer-forward-button' ), 'click', layerForward );
+                                       app[ imgEvent ]( document.getElementById( 'layer-back-button' ),    'click', layerBack );
+                                       app[ imgEvent ]( document.getElementById( 'delete-image-button' ),  'click', del );                                     
+                                       
+                                       app[ txtEvent ]( document.getElementById( 'edit-text-button' ),     'click', edit );
+                                       app[ txtEvent ]( document.getElementById( 'forward-text-button' ),  'click', layerForward );
+                                       app[ txtEvent ]( document.getElementById( 'back-text-button' ),     'click', layerBack );
+                                       app[ txtEvent ]( document.getElementById( 'delete-text-button' ),   'click', del );
+                               };
                                CONSOLE_CONTROLER.x = Math.floor( ( _w - CONSOLE_CONTROLER.w ) / 2 );
                                
                                LAYER_BACK_BUTTON.visible( _z > 0 );
                                LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
-                               DELETE_BUTTON.visible( true);
+                               DELETE_BUTTON.visible( true );
                                EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT );
-                               CHANGE_BUTTON.visible( false);
+                               CHANGE_BUTTON.visible( false );
                                
                                if( _w > CONSOLE_CONTROLER.w * 1.5 && _h > CONSOLE_CONTROLER.h * 1.5 ){
                                        CONSOLE_CONTROLER.y = Math.floor( ( _h - CONSOLE_CONTROLER.h ) / 2 );
@@ -2655,24 +2881,36 @@ var Editor = gOS.registerApplication( function(){
                                };
                                styleConsoleWrapper.left = CONSOLE_CONTROLER.x + 'px';
                                styleConsoleWrapper.top  = CONSOLE_CONTROLER.y + 'px';
+                               
+                               layerWrapper.mesure();
                        },
                        hide: function(){
                                if( visible === true ) styleConsoleWrapper.display = 'none';
                                visible = false;
                                currentElement = null;
-                               LAYER_BACK_BUTTON.visible( false);
-                               LAYER_FORWARD_BUTTON.visible( false);
-                               DELETE_BUTTON.visible( false);
-                               EDIT_BUTTON.visible( false);
-                               CHANGE_BUTTON.visible( false);
+                               LAYER_BACK_BUTTON.visible( false );
+                               LAYER_FORWARD_BUTTON.visible( false );
+                               DELETE_BUTTON.visible( false );
+                               EDIT_BUTTON.visible( false );
+                               CHANGE_BUTTON.visible( false );
                        },
-                       mousemove: function( _mouseX, _mouseY ){
+                       hitTest : function( _mouseX, _mouseY ){
+                               if( currentElement === null ) return false;
+                               _mouseX -= currentElement.x;
+                               _mouseY -= currentElement.y;
+                               return visible === true &&
+                                       CONSOLE_CONTROLER.x <= _mouseX && _mouseX <= CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w &&
+                                       CONSOLE_CONTROLER.y <= _mouseY && _mouseY <= CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h; 
+                       },
+                       mousemove: function(){
+                               /*
                                if( CONSOLE_CONTROLER.x > _mouseX || CONSOLE_CONTROLER.y > _mouseY || CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w < _mouseX || CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h < _mouseY ){
-                                       buttonClickable === true && buttonBackOrForward( true );
+                                       // buttonClickable === true && buttonBackOrForward( true );
                                        return false;
                                }
-                               buttonClickable === false && buttonBackOrForward( false );
-                               return true;
+                               // buttonClickable === false && buttonBackOrForward( false ); */
+                               layerWrapper.mesure();
+                               return false;
                        }
                }
        })();
@@ -2712,11 +2950,10 @@ var Editor = gOS.registerApplication( function(){
                                tailX = FLOOR( ( ( COS( radA ) / 2 + 0.5 ) * ( balloonW + SIZE )) - SIZE / 2 );
                                tailY = FLOOR( ( ( SIN( radA ) / 2 + 0.5 ) * ( balloonH + SIZE )) - SIZE / 2 );
                                styleMover.left = tailX +'px';
-                               styleMover.top = tailY +'px';
-                               //log.html( [ balloonW, balloonH, balloonA].join());
+                               styleMover.top  = tailY +'px';
                        },
                        show: function( _currentText ){
-                               /*
+                               /**
                                 * visibilityのほうがいい, display:none だと ie で描画が狂う
                                 */
                                styleMover.visibility = '';
@@ -2724,10 +2961,10 @@ var Editor = gOS.registerApplication( function(){
                                currentText = _currentText;
                        },
                        hitTest: function( _mouseX, _mouseY ){
-                               var _x = tailX -SIZE / 2,
-                                       _y = tailY -SIZE / 2;
-                                       ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;
-                               ret === true && updateMouseCursor( 'move' );
+                               var _x  = tailX -SIZE / 2,
+                                       _y  = tailY -SIZE / 2,
+                                       ret = _x <= _mouseX && _y <= _mouseY && _x + SIZE >= _mouseX && _y + SIZE >= _mouseY;
+                               ret === true && app.updateCoursor( 'move' );
                                return ret;
                        },
                        hide: function(){
@@ -2738,7 +2975,7 @@ var Editor = gOS.registerApplication( function(){
                                if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;
                                x = _currentText.x;
                                y = _currentText.y;
-                               if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true){
+                               if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true ){
                                        w = _currentText.w;
                                        h = _currentText.h;
                                        currentText = _currentText;
@@ -2821,18 +3058,14 @@ var Editor = gOS.registerApplication( function(){
                        y = _y = _y !== undefined ? _y : y;
                        w = _w = _w !== undefined ? _w : w;
                        h = _h = _h !== undefined ? _h : h;
-                       try {
-                               elmResizerContainerStyle.left   = _x + 'px';
-                               elmResizerContainerStyle.top    = _y + 'px';
-                               elmResizerContainerStyle.width  = _w + 'px';
-                               elmResizerContainerStyle.height = _h + 'px';
-                               elmResizerTopStyle.left = elmResizerBottomStyle.left = FLOOR( _w / 2 - 5 ) + 'px';
-                               elmResizerLeftStyle.top = elmResizerRightStyle.top   = FLOOR( _h / 2 - 5 ) + 'px';
-                       } catch( e ){
-                               alert( [x, y, w, h].join( ','));
-                               return;
-                       };
-                       
+
+                       elmResizerContainerStyle.left   = _x + 'px';
+                       elmResizerContainerStyle.top    = _y + 'px';
+                       elmResizerContainerStyle.width  = _w + 'px';
+                       elmResizerContainerStyle.height = _h + 'px';
+                       elmResizerTopStyle.left = elmResizerBottomStyle.left = FLOOR( _w / 2 - 5 ) + 'px';
+                       elmResizerLeftStyle.top = elmResizerRightStyle.top   = FLOOR( _h / 2 - 5 ) + 'px';
+
                        POSITION_ARRAY.splice( 0, POSITION_ARRAY.length );
                        POSITION_ARRAY.push(
                                {x:     _x +5,                                  y:      _y -HIT_AREA,           w:      _w -5 *2,               h:      HIT_AREA +5},
@@ -2876,7 +3109,7 @@ var Editor = gOS.registerApplication( function(){
                        currentIndex = _flipH === true || _flipV === true ? p[
                                        _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v' )
                                ] : currentIndex;
-                       updateMouseCursor( CURSOR_AND_FLIP[ currentIndex ].cursor );
+                       app.updateCoursor( CURSOR_AND_FLIP[ currentIndex ].cursor );
                        elmResizerContainer.className = 'current-resizer-is-' + currentIndex;
                        currentElement.flip( _flipH, _flipV );
                }
@@ -2899,7 +3132,7 @@ var Editor = gOS.registerApplication( function(){
                                for( i=4; i<8; i++ ){
                                        p = POSITION_ARRAY[ i ];
                                        if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY ){
-                                               updateMouseCursor( CURSOR_AND_FLIP[ i].cursor);
+                                               app.updateCoursor( CURSOR_AND_FLIP[ i].cursor );
                                                elmResizerContainer.className = 'current-resizer-is-' +i;
                                                return currentIndex = i;
                                        }
@@ -2907,12 +3140,12 @@ var Editor = gOS.registerApplication( function(){
                                for( i=0; i<4; i++ ){
                                        p = POSITION_ARRAY[ i ];
                                        if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
-                                               updateMouseCursor( CURSOR_AND_FLIP[ i].cursor);
+                                               app.updateCoursor( CURSOR_AND_FLIP[ i].cursor);
                                                elmResizerContainer.className = 'current-resizer-is-' +i;
                                                return currentIndex = i;
                                        }
                                }
-                               updateMouseCursor( '' );
+                               app.updateCoursor( '' );
                                elmResizerContainer.className = '';
                                return -1;
                        },
@@ -2953,9 +3186,7 @@ var Editor = gOS.registerApplication( function(){
                                        _thisError = 0;
                                        
                                var _memoryX = 0,
-                                       _memoryY = 0,
-                                       _momoryW = 0,
-                                       _momoryH = 0;
+                                       _memoryY = 0;
                                /*
                                 * Opera 11+ often forget values, why ??
                                 */
@@ -3049,14 +3280,14 @@ var Editor = gOS.registerApplication( function(){
                                ].join( ' , ')); */
                        },
                        onFinish: function(){
-                               updateMouseCursor( '');
+                               app.updateCoursor( '');
                                if( w === startW && h === startH && x === startX && y === startY ) return;
                                PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h );
                                currentElement.resize( x, y, w, h);
                                PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH );
                        },
                        onCancel: function(){
-                               updateMouseCursor( '');
+                               app.updateCoursor( '');
                                PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH );
                                currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
                                        currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
@@ -3094,7 +3325,7 @@ var Editor = gOS.registerApplication( function(){
                                offsetY = _mouseY;
                                startX  = x = _currentElement.x;
                                startY  = y = _currentElement.y;
-                               updateMouseCursor( 'move' );
+                               app.updateCoursor( 'move' );
                        },
                        onDrag: function( _mouseX, _mouseY ){
                                var moveX = _mouseX - offsetX,
@@ -3108,14 +3339,14 @@ var Editor = gOS.registerApplication( function(){
                                update( _x, _y );
                        },
                        onFinish: function(){
-                               updateMouseCursor( '' );
+                               app.updateCoursor( '' );
                                if( x === startX && y === startY ) return;
                                PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y );
                                currentElement.resize( x, y );
                                PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY );
                        },
                        onCancel: function(){
-                               updateMouseCursor( '' );
+                               app.updateCoursor( '' );
                                PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY );
                                currentElement.animate( startX, startY );
                        },
@@ -3186,7 +3417,7 @@ var Editor = gOS.registerApplication( function(){
                        hide: function(){
                                currentElement !== null && RESIZE_OPERATOR.hide();
                                currentElement = null;
-                               updateMouseCursor( '' );
+                               app.updateCoursor( '' );
                                TAIL_OPERATOR.hide();
                                CONSOLE_CONTROLER.hide();
                                INFOMATION_WINDOW.update( null );
@@ -3449,22 +3680,22 @@ var Editor = gOS.registerApplication( function(){
                        if( type !== _type ){
                                type = _type || type;
                                balloon.type( type );
-                       }
-               }
+                       };
+               };
                function updateAngle( _a ){
                        if( _a !== undefined && a !== _a ){
                                a = _a !== undefined ? _a : a;
                                balloon.angle( a );
-                       }
-               }
+                       };
+               };
                /* history */
                function updateText( _text ){
                        text = _text || text || '';
                        elmText.firstChild.data = text;
-               }
+               };
                function resizeBalloon(){
                        balloon && balloon.resize( a, w, h );
-               }
+               };
                
                /* global methods */
                this.$ = JQ_WRAPPER;
@@ -3524,8 +3755,9 @@ var Editor = gOS.registerApplication( function(){
  *  - mouseEventListener
  */
        var PANEL_ELEMENT_CONTROL = ( function(){
-               var     elmContainer,
-                       currentElement  = null,
+               var     elmContainer   = null,
+                       currentElement = null,
+                       nodeWorkarea   = null,
                        panelX, panelY, panelW, panelH,
                        startX, startY;
        /*
@@ -3592,12 +3824,20 @@ var Editor = gOS.registerApplication( function(){
                };
                function onTextInput( _panelElement ){
                        appendPanelElement( _panelElement );
-                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement ], [ true, _panelElement ], true );
+                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement ], [ true, _panelElement ], true, PANEL_ELEMENT_CONTROL );
                };
        
                return {
+                       id : 'PANEL_ELEMENT_CONTROL',
                        init: function(){
-                               elmContainer = document.getElementById( 'comic-element-container' );
+                               elmContainer  = document.getElementById( 'comic-element-container' );
+                               nodeWorkarea  = eventRoot.createNode( { x: 0, y:0, w:9999, h:9999 }, false, true );
+                               nodeWorkarea.addEventListener( 'mousemove', PANEL_ELEMENT_CONTROL.mousemove, PANEL_ELEMENT_CONTROL );
+                               nodeWorkarea.addEventListener( 'mousedown', PANEL_ELEMENT_CONTROL.mousedown, PANEL_ELEMENT_CONTROL );
+                               nodeWorkarea.addEventListener( 'mouseup',   PANEL_ELEMENT_CONTROL.mouseup,   PANEL_ELEMENT_CONTROL );
+                               //eventRoot.addEventListener( 'mousemove', PANEL_ELEMENT_CONTROL.mousemove, PANEL_ELEMENT_CONTROL );
+                               //eventRoot.addEventListener( 'mousedown', PANEL_ELEMENT_CONTROL.mousedown, PANEL_ELEMENT_CONTROL );
+                               //eventRoot.addEventListener( 'mouseup',   PANEL_ELEMENT_CONTROL.mouseup,   PANEL_ELEMENT_CONTROL );
                                delete PANEL_ELEMENT_CONTROL.init;
                        },
                        open: function(){
@@ -3670,23 +3910,29 @@ var Editor = gOS.registerApplication( function(){
                                        'top:',    panelY = _panelY, 'px'
                                ].join( '' );
                        },
-                       mousemove: function( _mouseX, _mouseY ){
+                       mousemove: function( e ){
                                var l    = PANEL_ELEMENT_ARRAY.length,
-                                       _x   = _mouseX - panelX,
-                                       _y   = _mouseY - panelY,
-                                       _elm = currentElement;
-                                       
+                                       mX   = e.layerX,
+                                       mY   = e.layerY,
+                                       _x   = mX - panelX,
+                                       _y   = mY - panelY,
+                                       _elm = currentElement,
+                                       i;
+                               console.log( 'x:' + _x + ' y:' + _y )
+                               // mouse が コンソールに乗ったらフォーカスを外す.
+                               if(  CONSOLE_CONTROLER.hitTest( _x, _y ) === true ) return false;
+                               
                                if( _elm !== null ){
                                        if( _elm.busy() === true ){
                                                _elm.mousemove( _x, _y );
                                                return true;
-                                       }
+                                       };
                                        if( _elm.hitTest( _x, _y ) === true ){
                                                _elm.mousemove( _x, _y ); // cursor
                                                return true;
-                                       }
+                                       };
                                };
-                               for( var i=0; i<l; ++i ){
+                               for( i = 0; i < l; ++i ){
                                        _elm = PANEL_ELEMENT_ARRAY[ i ];
                                        // hitTest
                                        if( _elm.hitTest( _x, _y ) === true ){
@@ -3699,21 +3945,26 @@ var Editor = gOS.registerApplication( function(){
                                PANEL_ELEMENT_OPERATION_MANAGER.hide();
                                return false;
                        },
-                       mouseup: function( _mouseX, _mouseY ){
-                               var ret = currentElement !== null && currentElement.busy() === true;
-                               ret === true && currentElement.mouseup( _mouseX -startX || panelX, _mouseY -startY || panelY );
+                       mouseup: function( e ){
+                               var x   = e.layerX,
+                                       y   = e.layerY,
+                                       ret = currentElement !== null && currentElement.busy() === true;
+                               ret === true && currentElement.mouseup( x -startX || panelX, y -startY || panelY );
                                return ret;
                        },
-                       mousedown: function( _mouseX, _mouseY ){
+                       mousedown: function( e ){
+                               var x   = e.layerX,
+                                       y   = e.layerY;
+                               if( currentElement === null ) return false;
                                startX = panelX;
                                startY = panelY;
-                               if( currentElement === null) return false
-                               currentElement.mousedown( _mouseX -startX, _mouseY -startY);
+                               currentElement.mousedown( x - startX, y - startY );
                                return true;
                        },
+                       /*
                        busy: function(){
                                return currentElement !== null;
-                       },
+                       }, */
                        createImageElement: function( data ){
                                if( Type.isObject( data ) === false ){
                                        PremiumSatge.boot( 1, PANEL_ELEMENT_CONTROL.onImageSelect );
@@ -3771,47 +4022,16 @@ var Editor = gOS.registerApplication( function(){
                                        onTextInput( _panelElement );
                                }
                        }
-               }
+               };
        })();
 
        /*
         * end of PANEL_ELEMENT_CONTROL
         */
 
-       function updateMouseCursor( _cursor ){
-               if( currentCursor !== _cursor ){
-                       currentCursor = _cursor;
-                       app.addAsyncCall( update );
-               };
-               function update(){
-                       elmMouseEventChatcher.style.cursor = currentCursor;
-               };
-       };
        function centering(){
                app.onPaneResize( windowW, windowH );
        };
-       function mouseEventRellay( e ){
-               var _mouseX = e.clientX,
-                       _mouseY = e.clientY,
-                       rellayMethod = e.type === 'mouseout' ? 'mouseup' : e.type;
-               if( currentListener !== null && currentListener.busy() === true ){
-                       currentListener[ rellayMethod ]( _mouseX, _mouseY );
-               } else {
-                       currentListener = null;
-                       var l = MOUSE_LISTENER_ARRAY.length,
-                               _listener;
-                       for( var i=0; i<l; ++i ){
-                               _listener = MOUSE_LISTENER_ARRAY[ i ];
-                               if( _listener[ rellayMethod ]( _mouseX, _mouseY ) === true ){
-                                       currentListener = _listener;
-                                       break;
-                               };
-                       };
-               };
-               // 文字選択の禁止
-               //!document.selection && window.getSelection().removeAllRanges();
-               return false;
-       };
 
        /* grobal method */
        
@@ -3829,7 +4049,7 @@ var Editor = gOS.registerApplication( function(){
                                '<div id="whiteGlass-bottom"></div>',
                        '</div>',
                        '<div id="panel-tools-container">',
-                       '<div id="panel-resizer-top">▲</div>',
+                               '<div id="panel-resizer-top">▲</div>',
                                '<div id="panel-resizer-bottom">▼</div>',
                                '<div id="comic-element-resizer-container">',
                                        '<div class="comic-element-resizer" id="comic-element-resizer-top"></div>',
@@ -3864,7 +4084,6 @@ var Editor = gOS.registerApplication( function(){
                        '</div>',
                        '<div id="window-container"></div>',
                        '<div id="menu-bar"></div>',
-                       '<div id="mouse-operation-catcher" unselectable="on"></div>',
                        
                        '<div id="templete-container" style="display: none;">',
                        
@@ -3889,11 +4108,11 @@ var Editor = gOS.registerApplication( function(){
                                '</div>',
                                
                                '<div id="windowTemplete" class="window-wrapper">',
-                                       '<div class="window-header">window title</div>',
-                                       '<div class="window-close-button">x</div>',
-                                       '<div class="window-body clearfix">',
-                                               '<div class="window-body-insert-position"></div>',
+                                       '<div class="window-header">',
+                                               '<div class="window-header-title">window title</div>',
+                                               '<div class="window-close-button">x</div>',
                                        '</div>',
+                                       '<div class="window-body"></div>',
                                        '<div class="window-footer">',
                                                '<div class="window-resize-button">/</div>',
                                        '</div>',
@@ -3951,47 +4170,39 @@ var Editor = gOS.registerApplication( function(){
                                '</div>',
                                
                                '<div id="toolbox-window">',
-                                       '<div id="toolbox-add-image-button">add image</div>',
-                                       '<div id="toolbox-add-text-button">add text</div>',
-                                       '<div id="toolbox-edit-bg-button">edit bg</div>',
-                                       '<div id="toolbox-switch-grid">grid</div>',
-                                       '<div id="toolbox-popup-help-button">?</div>',
-                                       '<div id="toolbox-post-button">post</div>',
+                                       '<div id="toolbox-add-image-button" class="button">add image</div>',
+                                       '<div id="toolbox-add-text-button" class="button">add text</div>',
+                                       '<div id="toolbox-edit-bg-button" class="button">edit bg</div>',
+                                       '<div id="toolbox-switch-grid" class="button">grid</div>',
+                                       '<div id="toolbox-popup-help-button" class="button">?</div>',
+                                       '<div id="toolbox-post-button" class="button">post</div>',
                                '</div>',
-                               
-                               '<div id="image-exproler"><div id="image-exproler-container"></div></div>',
-                       
+                                                       
                        '</div>'
                ].join( '' );
                
                app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+               app.useInteractiveLayer( 'mousemove', 'mousedown', 'mouseup', 'mouseout' );
+               eventRoot = app.getPointingDeviceEventTreeRoot();
                
                delete app.onInit;
        };
        this.onOpen = function( _w, _h, _file ){
-               elmMouseEventChatcher = document.getElementById( 'mouse-operation-catcher' );
-               
+               // 表示奥の物から順に init() していく
+               PANEL_ELEMENT_CONTROL.init();
+               PANEL_CONTROL.init();
+               // PANEL_RESIZER_BOTTOM.init();
+               // PANEL_RESIZER_TOP.init();
+               WINDOWS_CONTROL.init();
                MENU_BAR_CONTROL.init();
+               
+               // レイヤーにあまり関係ないモジュール  
                HISTORY_CONTROL.init();
                SAVE_CONTROL.init();
-               WINDOWS_CONTROL.init();
                GRID_CONTROL.init();
                WHITE_GLASS_CONTROL.init();
-               PANEL_CONTROL.init();
                CONSOLE_CONTROLER.init();
                PANEL_ELEMENT_OPERATION_MANAGER.init();
-               PANEL_ELEMENT_CONTROL.init();
-               
-               /*
-                * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初
-                * MENU_BAR_CONTROL,
-                * WINDOW_CONTROL,
-                * PANEL_ELEMENT_CONTROL,
-                * PANEL_CONTROL
-                * .busy() === true なら、そのままmousemove()にイベントを流す.
-                * mousemove()に流してみて、false が帰れば、次のリスナーにも流す.
-                */
-               MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, PANEL_ELEMENT_CONTROL, PANEL_CONTROL );          
                
                comicID      = -1;
                panelID      = -1;
@@ -4025,6 +4236,7 @@ var Editor = gOS.registerApplication( function(){
                } else {
                };
                
+               // open() は各モジュールの init() 後に実施可能になる. 
                HISTORY_CONTROL.open();
                SAVE_CONTROL.open();
                WINDOWS_CONTROL.open();
@@ -4040,7 +4252,7 @@ var Editor = gOS.registerApplication( function(){
                
                windowW = _w;
                windowH = _h;
-               self.onPaneResize( _w, _h );
+               app.onPaneResize( _w, _h );
                
 
                if( Type.isArray( panelElements ) === true ){
@@ -4058,21 +4270,23 @@ var Editor = gOS.registerApplication( function(){
        /*
         * centering
         */
-               self.addKeyEventListener( 'keydown', centering, 96, false, true );      // ctrl + 0
-               self.addKeyEventListener( 'krydown', centering, 48, false, true );      // ctrl + 0
+               app.addKeyEventListener( 'keydown', centering, 96, false, true );       // ctrl + 0
+               app.addKeyEventListener( 'krydown', centering, 48, false, true );       // ctrl + 0
                MENU_BAR_CONTROL.EDIT.createOption( 'centering', 'ctrl + 0', centering, true, true, true);
-       /*
-        * jqMouseEventChacher は透明な要素で、
-        * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
-        * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
-        */
-               self.addEventListener( elmMouseEventChatcher, 'mousemove', mouseEventRellay );
-               self.addEventListener( elmMouseEventChatcher, 'mousedown', mouseEventRellay );
-               self.addEventListener( elmMouseEventChatcher, 'mouseup',   mouseEventRellay );
-               //self.addEventListener( elmMouseEventChatcher, 'mouseout',  mouseEventRellay );
                
                phase   = 1;
-               
+
+               /*
+                * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初
+                * MENU_BAR_CONTROL,
+                * WINDOW_CONTROL,
+                * PANEL_ELEMENT_CONTROL,
+                * PANEL_CONTROL
+                * .busy() === true なら、そのままmousemove()にイベントを流す.
+                * mousemove()に流してみて、false が帰れば、次のリスナーにも流す.
+                */     
+               app.registerInteractiveListener( /* MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, PANEL_ELEMENT_CONTROL, PANEL_CONTROL */ );
+
                delete app.onOpen;
        };
        this.onClose = function(){
@@ -4095,11 +4309,8 @@ var Editor = gOS.registerApplication( function(){
        this.onPaneResize = function( _windowW, _windowH ){
                windowW = _windowW || windowW;
                windowH = _windowH || windowH;
-               /*
-                * ieは +'px'が不要みたい
-                */
-               self.rootElement.style.height = _windowH + 'px';
-               elmMouseEventChatcher.style.height = _windowH + 'px';
+
+               app.rootElement.style.height = _windowH + 'px';
                
                WINDOWS_CONTROL.onWindowResize( _windowW, _windowH );
                MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH );
@@ -4644,7 +4855,7 @@ var Model = ( function(){
                                        '"x": ',                   _textElement.x, ',', cr,
                                        '"y": ',                   _textElement.y, ',', cr,
                                        '"z": ',                   _textElement.z + 1, ',', cr,
-                                       '"t": ',                   _timing, ',', cr,
+                                       '"t": ',                   timing, ',', cr,
                                        '"width": ',               _textElement.w, ',', cr,
                                        '"height": ',              _textElement.h, ',', cr,
                                        '"speeches_attributes": {', cr,
index 19b96eb..c6e1e3e 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR peta.common.js\r
- *   version 0.5.14\r
+ *   version 0.5.18\r
  * \r
  *   author:\r
  *     itozyun\r
@@ -24,10 +24,10 @@ var pettanr = ( function(){
                                                v = decodeURIComponent( elm[ 1]);\r
                                                if( '' + parseFloat( v ) === v ) v = parseFloat( v );\r
                                                if( '' + parseInt( v, 10 ) === '0' + v ) v = parseInt( v, 10 );\r
-                                               if( v === 'true') v = true;\r
-                                               if( v === 'false') v = false;\r
-                                               if( v === 'null') v = null;\r
-                                               if( v === 'undefined') v = undefined;\r
+                                               if( v === 'true' ) v = true;\r
+                                               if( v === 'false' ) v = false;\r
+                                               if( v === 'null' ) v = null;\r
+                                               if( v === 'undefined' ) v = undefined;\r
                                    ret[ name] = v;\r
                                        } else\r
                                        if( elm.length === 1){\r
@@ -624,10 +624,10 @@ pettanr.image = ( function(){
  * bind : 製本\r
  */\r
 pettanr.bind = ( function(){\r
-       var BIND_WORKER_ARRAY = [],\r
+       var BIND_WORKER_ARRAY   = [],\r
                NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',\r
-               PICTURE_PATH = pettanr.CONST.PANEL_PICTURE_PATH,\r
-               ELM_DETECT_WIDTH = ( function(){\r
+               PICTURE_PATH        = pettanr.CONST.PANEL_PICTURE_PATH,\r
+               ELM_DETECT_WIDTH    = ( function(){\r
                        var ret = document.createElement( 'div');\r
                        ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';\r
                        return ret;\r
index c2b27b9..fa95b2b 100644 (file)
@@ -95,7 +95,7 @@
                                Init();\r
 \r
                                //box.onmousemove = '';\r
-                               self.removeMouseEventListener( box, 'mousemove', MovePaddle );\r
+                               self.removeEventListener( box, 'mousemove', MovePaddle );\r
                                msg.data = 'You Loose! Click on Paddle to Re-Start Game.';\r
                        }\r
 \r
                                Init();\r
 \r
                                // box.onmousemove = '';\r
-                               self.removeMouseEventListener( box, 'mousemove', MovePaddle );\r
+                               self.removeEventListener( box, 'mousemove', MovePaddle );\r
 \r
                                msg.data = 'You Win!<br/>Click on Paddle to Re-Start Game.';\r
                        }\r
index b4df86f..f24189c 100644 (file)
-/*\r
- * pettanR system.js\r
- *   version 0.5.17\r
- * \r
- * \r
- * Type\r
- * \r
- * UA\r
- * \r
- * Util\r
- * \r
- * CSS\r
- * \r
- * gadgetOS\r
- *   author:\r
- *     itozyun\r
- *   licence:\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
-               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
-                       } else {\r
-                               return null;\r
-                       };\r
-                       for( var key in src ){\r
-                               ret[ key ] = clone( src[ key ]);\r
-                       };\r
-                       return ret;\r
-               };\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
-                       copy: function( objOrArray ){\r
-                               return clone( objOrArray );\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 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 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
-       \r
-       var Const = {\r
-               FILE: {\r
-                       TYPE: {\r
-                               UNKNOWN:        0,\r
-                               FOLDER:         1,\r
-                               IMAGE:          2,\r
-                               TEXT:           3,\r
-                               HTML:           4,\r
-                               CSV:            5,\r
-                               JSON:           6,\r
-                               XML:            7\r
-                       },\r
-                       STATE: {\r
-                               UNKNOWN:        0,\r
-                               OK:                     1,\r
-                               LOADING:        2,\r
-                               ERROR:          3,\r
-                               BROKEN:         4\r
-                       },\r
-                       UPDATE_POLICY: {\r
-                               _____:          parseInt( '00000', 2 ),\r
-                               ____C:          parseInt( '00001', 2 ), // hasCreateMenu\r
-                               ___W_:          parseInt( '00010', 2 ), // isWritable\r
-                               ___WC:          parseInt( '00011', 2 ), // isWritable\r
-                               __R__:          parseInt( '00100', 2 ), // isRenamable\r
-                               __R_C:          parseInt( '00101', 2 ), // hasCreateMenu\r
-                               __RW_:          parseInt( '00110', 2 ), // isWritable\r
-                               __RWC:          parseInt( '00111', 2 ), // isWritable\r
-                               _S___:          parseInt( '01000', 2 ), // childrenIsSortable\r
-                               _S__C:          parseInt( '01001', 2 ),\r
-                               _S_W_:          parseInt( '01010', 2 ),\r
-                               _S_WC:          parseInt( '01011', 2 ),\r
-                               _SR__:          parseInt( '01100', 2 ),\r
-                               _SR_C:          parseInt( '01101', 2 ),\r
-                               _SRW_:          parseInt( '01110', 2 ),\r
-                               _SRWC:          parseInt( '01111', 2 ),\r
-                               D____:          parseInt( '10000', 2 ),\r
-                               D___C:          parseInt( '10001', 2 ), // hasCreateMenu\r
-                               D__W_:          parseInt( '10010', 2 ), // isWritable\r
-                               D__WC:          parseInt( '10011', 2 ), // isWritable\r
-                               D_R__:          parseInt( '10100', 2 ), // isRenamable\r
-                               D_R_C:          parseInt( '10101', 2 ), // hasCreateMenu\r
-                               D_RW_:          parseInt( '10110', 2 ), // isWritable\r
-                               D_RWC:          parseInt( '10111', 2 ), // isWritable\r
-                               DS___:          parseInt( '11000', 2 ), // childrenIsSortable\r
-                               DS__C:          parseInt( '11001', 2 ),\r
-                               DS_W_:          parseInt( '11010', 2 ),\r
-                               DS_WC:          parseInt( '11011', 2 ),\r
-                               DSR__:          parseInt( '11100', 2 ),\r
-                               DSR_C:          parseInt( '11101', 2 ),\r
-                               DSRW_:          parseInt( '11110', 2 ),\r
-                               DSRWC:          parseInt( '11111', 2 ),\r
-                               CREATE:         1,\r
-                               WRAITE:         2,\r
-                               RENAME:         4,\r
-                               SORT:           8,\r
-                               DELETE:         16\r
-                       },\r
-                       EVENT: {\r
-                               UPDATE_ATTRIVUTE:       'onFileUpdate',\r
-                               GET_SEQENTIAL_FILES:'gotSeqentilFiles'\r
-                       },\r
-                       DATA_PROPERTY_RESERVED: [\r
-                               'children', 'driver', 'state', 'type'\r
-                       ]                       \r
-               },\r
-               TREE: {\r
-                       EVENT: {\r
-                               UPDATE:                         'onTreeUpdate'\r
-                       }\r
-               },\r
-               KEY: {\r
-                       EVENT: {\r
-                               KEY_DOWN:                       'keydown',\r
-                               KEY_UP:                         'keyup',\r
-                               KEY_CHANGE:                     'keychange',\r
-                               CURSOL:                         'cursol'\r
-                       }\r
-               },\r
-               APP: {\r
-                       TYPE: {\r
-                               GENERAL: 0,\r
-                               OVERLAY: 1,\r
-                               PAGE:    2\r
-                       }\r
-               }\r
-       };\r
-\r
-var EX = ( function(){\r
-       var F = new Function();\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
-               } else {\r
-                       return null;\r
-               }\r
-               for( var key in src ){\r
-                       ret[ key ] = clone( src[ key ]);\r
-               }\r
-               return ret;\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
-                       };\r
-                       return ret;\r
-               },\r
-               clone: function( obj ){\r
-                       return clone( obj );\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
-               }\r
-       };\r
-};\r
-\r
-\r
-\r
-/* --------------------------------------------------------------\r
- * System Timer\r
- * \r
- */\r
-\r
-var SystemTimer = ( function(){\r
-       var setTimeout    = window.setTimeout;\r
-       var clearTimeout  = window.clearTimeout;\r
-       var INTERVAL_TIME = 16;\r
-       var TICKET_LIST   = [];\r
-       var timerId       = undefined;\r
-       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
-           };\r
-           timerId = undefined;\r
-           update();\r
-       };\r
-       function update(){\r
-               var l = TICKET_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
-               if( n > c ) n = c;\r
-           };\r
-           if( next > n || timerId === undefined ){\r
-               timerId !== undefined && clearTimeout( timerId );\r
-               timerId = setTimeout( loop, INTERVAL_TIME * n );\r
-               next = n;\r
-           };\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
-       \r
-       return {\r
-               add: function( _apiuser, _handler, _time, _once ){\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
-                   TICKET_LIST.push( _ticket );\r
-                   \r
-                   update();\r
-               },\r
-               remove: function( _apiuser, _handler ) {\r
-                       var _ticket,\r
-                               i = 0;\r
-                       while( _ticket = TICKET_LIST[ i ] ){\r
-                               if( _ticket.destroy( _apiuser, _handler ) === true ){\r
-                                       TICKET_LIST.splice( i, 1 );\r
-                               } else {\r
-                                       ++i;\r
-                               };\r
-                       };\r
-                   update();\r
-               }\r
-       }\r
-})();\r
-\r
-/* --------------------------------------------------------------\r
- * Async Callback\r
- * \r
- */\r
-var AsyncCall = ( function(){\r
-       var CALLBACK_LIST = [];\r
-\r
-       var CallbackTicketClass = function( _apiuser, _callback, _argments, _thisObject ){\r
-               this.apiuser    = _apiuser;\r
-               this.callback   = _callback;\r
-               this.argments   = _argments;\r
-               this.thisObject = _thisObject;\r
-       };\r
-       CallbackTicketClass.prototype = new TicketBase();\r
-       CallbackTicketClass.prototype.call = function(){\r
-               var f = this.callback,\r
-                       a = this.argments,\r
-                       t = this.thisObject;\r
-               this.destroy();\r
-               if( Type.isArray( a ) === true ){\r
-                       f.apply( t, a );\r
-               } else {\r
-                       f.call( t, a );\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
-       function dispatch(){\r
-               var _ticket = CALLBACK_LIST.shift();\r
-               if( _ticket ){\r
-                       _ticket.call();\r
-                       CALLBACK_LIST.length !== 0 && SystemTimer.add( SUPER_USER_KEY, dispatch, 1, true );\r
-               };\r
-       };\r
-\r
-       return {\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, _thisObject || _apiuser ) );\r
-               },\r
-               remove: function( _apiuser, _callback ){\r
-                       var _ticket,\r
-                               i = 0;\r
-                       while( _ticket = CALLBACK_LIST[ i ] ){\r
-                               if( _ticket.destroy( _apiuser, _callback ) === true ){\r
-                                       CALLBACK_LIST.splice( i, 1 );\r
-                               } else {\r
-                                       ++i;\r
-                               };\r
-                       };\r
-               }\r
-       };\r
-})();\r
-\r
-/* -----------------------------------------------------------\r
- * 画像一覧は\r
- *     お気に入り画像一覧 > tag:ペン次郎 > ペン次郎:笑う\r
- *  最近アップロードされた画像 > images\r
- *  最近使われた画像 > images\r
- *  キャラクター画像庫 > アニマル系 > tag:ペン次郎 > ペン次郎:笑う\r
- *  風景画像庫 >\r
- *  効果画像庫 >\r
- *  アイテム画像庫 >\r
- *  \r
- * 画像一覧を読み込むタイミング\r
- */\r
-var File = ( function(){\r
-       var DRIVER_LIST             = [];\r
-       \r
-       var FILE_TYPE_IS_FOLDER     = Const.FILE.TYPE.FOLDER,\r
-               numFileType             = Const.FILE.TYPE.XML,\r
-               FILEDATA_RESITER        = [],                   // store all of fileData( json object )\r
-               FILEDATA_ACCESS         = [],                   // file operations for Kernel only ! hide from Out of File\r
-               FILE_OBJECT_POOL        = [],\r
-               EVENT_LISTENER_REGISTER = [],\r
-               TREE_ARRAY              = [],\r
-               TREE_ACCESS_ARRAY       = [];\r
-       \r
-       var REQUEST_CONTROLER = ( function(){\r
-               var REQUEST_TICKET_RESISTER = [],\r
-                       currentTicket           = null,\r
-                       currentData             = null,\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
-               \r
-               function request(){\r
-                       if( currentTicket !== null || REQUEST_TICKET_RESISTER.length === 0 ) return;\r
-                       currentTicket = REQUEST_TICKET_RESISTER.shift();\r
-                       $.ajax({\r
-                               url:            currentTicket.url,\r
-                               dataType:       DATA_TYPE_ARRAY[ currentTicket.type ],\r
-                               success:        onSuccess,\r
-                               error:          onError\r
-                       });\r
-               };\r
-               function onSuccess( _data ){\r
-                       currentTicket.load( _data );\r
-                       currentTicket.kill();\r
-                       currentTicket = null;\r
-                       request();\r
-               };\r
-               function onError(){\r
-                       ++numError;\r
-                       currentTicket.error();\r
-                       currentTicket.kill(); // retry\r
-                       currentTicket = null;\r
-                       request();\r
-               };\r
-\r
-               return {\r
-                       getNumTask: function(){\r
-                               return REQUEST_TICKET_RESISTER.length;\r
-                       },\r
-                       getNumError: function(){\r
-                               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
-                               currentTicket === null && request();\r
-                       }\r
-               };\r
-       })();\r
-\r
-       var FILE_CONTROLER = {\r
-               createTree: function( _apiuser, _rootFileData ){\r
-                       var _tree = new TreeClass( _apiuser, _rootFileData );\r
-                       TREE_ARRAY.push( _tree );\r
-                       return _tree;\r
-               },\r
-               getFileUID: function( FILEDATAorFILE ){\r
-                       if( FILEDATAorFILE instanceof FileClass ){\r
-                               return FILEDATAorFILE.getUID();\r
-                       };\r
-                       \r
-                       var uid = Util.getIndex( FILEDATA_RESITER, FILEDATAorFILE );\r
-                       if( uid === -1 ){\r
-                               uid = FILEDATA_RESITER.length;\r
-                               FILEDATA_RESITER.push( FILEDATAorFILE );\r
-                       };\r
-                       return uid;\r
-               },\r
-               getFileDataAccess: function( UIDorFILEorFILEDATA ){\r
-                       var _uid, _data = FILE_CONTROLER.getFileData( UIDorFILEorFILEDATA ), _access;\r
-\r
-                       if( _data === null || typeof _data !== 'object' ) return null;\r
-                       for( var i=0, l = FILEDATA_ACCESS.length; i<l; ++i ){\r
-                               _access = FILEDATA_ACCESS[ i ];\r
-                               if( _access.DATA === _data ) return _access;\r
-                       };\r
-                       return null;\r
-               },      \r
-               getFileData: function( UIDorFILEorFILEDATA ){\r
-                       if( typeof UIDorFILEorFILEDATA === 'number' ){\r
-                               return FILEDATA_RESITER[ UIDorFILEorFILEDATA ] || null;\r
-                       } else\r
-                       if( UIDorFILEorFILEDATA instanceof FileClass ){\r
-                               return FILEDATA_RESITER[ UIDorFILEorFILEDATA.getUID() ] || null;\r
-                       } else\r
-                       if( Util.getIndex( FILEDATA_RESITER, UIDorFILEorFILEDATA ) !== -1 ){\r
-                               return UIDorFILEorFILEDATA;\r
-                       };\r
-                       return null;\r
-               },\r
-               getChildren: function( UIDorFILEorFILEDATA ){\r
-                       var _data = FILE_CONTROLER.getFileData( UIDorFILEorFILEDATA );\r
-                       return _data !== null ? _data.children || null : null;\r
-               },\r
-               getDriver: function( _file ){\r
-                       var _data = FILE_CONTROLER.getFileData( _file );\r
-                       return _data !== null && _data.driver ? _data.driver : BASE_DRIVER;\r
-               },\r
-               getUpdateFlag: function( _file, _bit ){\r
-                       var _driver = FILE_CONTROLER.getDriver( _file ),\r
-                               _policy;\r
-                       if( typeof _driver.getUpdatePolicy === 'function' ){\r
-                               _policy = _driver.getUpdatePolicy( _file );\r
-                               \r
-                       }\r
-                       if( typeof _policy !== 'number' ) {\r
-                               _policy = BASE_DRIVER.getUpdatePolicy( _file )\r
-                       }\r
-                       return _policy % ( _bit * 2 ) >= _bit;\r
-               },\r
-               move: function( _prentUID, _targetfile, _newFolder, _newIndex, _opt_callback ){\r
-                       var _parentData = FILE_CONTROLER.getFileDataAccess( _prentUID ),\r
-                               _parentType = _parentData.TYPE,\r
-                               _targetData = FILE_CONTROLER.getFileDataAccess( _targetfile ),\r
-                               _targetType = _targetData.TYPE;\r
-               },\r
-               replace: function( _uid, _file, _newIndex ){\r
-                       \r
-               },\r
-               addEventListener: function( FILEorNULL, _eventType, _callback ){\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
-                               };\r
-                       };\r
-               },\r
-               getTreeAccess: function(){\r
-                       \r
-               },\r
-               fileEventRellay: function( _uid, _event ){\r
-                       var _fileAccess = FILE_CONTROLER.getFileDataAccess( _uid );\r
-                       if( _fileAccess === null ) return;\r
-                       var _treeUID    =  _fileAccess.TREE.getUID(),\r
-                               _treeAccess = TREE_ACCESS_ARRAY[ _treeUID ],\r
-                               _data       = _fileAccess.DATA,\r
-                               _tree;\r
-                       if( !_treeAccess ) return;\r
-                       _treeAccess.dispatchFileEvent( _event );\r
-                       for( var i=0, l = TREE_ARRAY.length; i<l; ++i ){\r
-                               if( i !== _treeUID ){\r
-                                       _tree = TREE_ARRAY[ i ];\r
-                                       if( FILE_CONTROLER.getFileData( _tree.getCurrentFile() ) === _data ){\r
-                                               _treeAccess = TREE_ACCESS_ARRAY[ _tree.getUID() ];\r
-                                               _treeAccess && _treeAccess.dispatchFileEvent( _event );\r
-                                       };\r
-                               };\r
-                       };\r
-               }\r
-       };\r
-       \r
-       var TreeClass = function( apiuser, rootFileData ){\r
-               var PARENT_FILE_RESITER = [],\r
-                       ACCESS = {\r
-                               apiuser          : apiuser,\r
-                               dispatchFileEvent: dispatchFileEvent\r
-                       },\r
-                       EVENT_LISTENER_ARRAY = [],\r
-                       instance             = this,\r
-                       rootFile             = new FileClass( instance, null, rootFileData ),\r
-                       currentFile          = rootFile;\r
-               \r
-               currentFile.getSeqentialFiles();\r
-               TREE_ACCESS_ARRAY.push( ACCESS );\r
-               \r
-               function dispatchFileEvent( e ){\r
-                       var _eventType  = e.eventType,\r
-                               _targetFile = e.targetFile,\r
-                               _uid        = _targetFile.getUID(),\r
-                               _ticket, _type, _callback;\r
-                       for( var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i ){\r
-                               _ticket   = EVENT_LISTENER_REGISTER[ i ];\r
-                               _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 ], _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 ], instance );\r
-                               };\r
-                       };\r
-               };\r
-               \r
-               this.getUID = function(){\r
-                       return Util.getIndex( TREE_ACCESS_ARRAY, ACCESS );\r
-               };\r
-               this.getRootFile = function(){\r
-                       return rootFile;\r
-               };\r
-               this.getCurrentFile = function(){\r
-                       return currentFile;\r
-               };\r
-               this.hierarchy = function(){\r
-                       return PARENT_FILE_RESITER.length;\r
-               };\r
-               this.getParentFileAt = function( _index ){\r
-                       var l = PARENT_FILE_RESITER.length;\r
-                       if( typeof _index !== 'number' || _index < 0 || _index >= l ) return null;\r
-                       return PARENT_FILE_RESITER[ l -1 -_index ];\r
-               };\r
-               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.getSeqentialFiles();\r
-                       return currentFile;\r
-               };\r
-               this.up = function( _index ){\r
-                       var l = PARENT_FILE_RESITER.length;\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
-                               currentFile = this.getParentFileAt( _index );\r
-                               PARENT_FILE_RESITER.splice( 0, l -_index);\r
-                       } else {\r
-                               currentFile = PARENT_FILE_RESITER.shift();\r
-                       };\r
-                       currentFile.getSeqentialFiles();\r
-                       return currentFile;     \r
-               };\r
-               this.addTreeEventListener = function( _eventType, _callback ){\r
-                       FILE_CONTROLER.addEventListener( null, _eventType, _callback );\r
-               };\r
-               this.removeTreeEventListener = function( _eventType, _callback ){\r
-                       FILE_CONTROLER.removeEventListener( null, _eventType, _callback );\r
-               };\r
-               this.destroy = function( _apiuser ){\r
-                       if( _apiuser && apiuser !== _apiuser ) return false;\r
-                       // removeEvent\r
-                       var _currentFile = currentFile;\r
-                       currentFile = rootFile = rootFileData = null;\r
-                       // currentFile, rootFile を null にしないと .File.destroy() ができない.\r
-                       _currentFile.destroy();\r
-                       while( PARENT_FILE_RESITER.length > 0 ){\r
-                               _currentFile = PARENT_FILE_RESITER.shift();\r
-                               _currentFile.destroy();\r
-                       };\r
-                       \r
-                       AsyncCall.remove( apiuser );\r
-                       instance = apiuser = null;\r
-                       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 FileEventClass = function( eventType, file, key, value ){\r
-               this.eventType = eventType;\r
-               this.targetFile = file;\r
-               this.updatedAttribute = key;\r
-               this.updatedValue = value;\r
-       };\r
-\r
-/*\r
- * file の data は object で保持している。\r
- * File の外からファイルをみるときは、FileClassを通して操作する。\r
- * fileの変更、それに付随して追加されたイベントは、TreeClassで管理される。\r
- * treeがdestryされると、fileのイベントリスナーも全て削除される。\r
- * 他の tree も data の共通する currentFile に対してのみは、file の変更イベントを受け取って流す.\r
- * \r
- */\r
-       \r
-       var FileClass = function( tree, parentData, data ){\r
-               var uid = FILE_CONTROLER.getFileUID( data );\r
-               \r
-               FILEDATA_ACCESS.push( {\r
-                       TREE:                           tree,\r
-                       parentData:                     parentData,\r
-                       DATA:                           data\r
-               } );\r
-               \r
-               tree = parentData = data = null;\r
-\r
-               this.getUID = function(){\r
-                       return uid;\r
-               }\r
-       };\r
-       \r
-       FileClass.prototype = {\r
-               isChildFile: function( _FILEorFILEDATA ){\r
-                       return this.getChildFileIndex( _FILEorFILEDATA) !== -1;\r
-               },\r
-               getSeqentialFiles: function(){\r
-                       var _driver = FILE_CONTROLER.getDriver( this );\r
-                       if( _driver !== null && typeof _driver.getSeqentialFiles === 'function' ){\r
-                               _driver.getSeqentialFiles( this );\r
-                       }\r
-               },\r
-               addEventListener: function( _eventType, _callback ){\r
-                       FILE_CONTROLER.addEventListener( this, _eventType, _callback );\r
-               },\r
-               removeEventListener: function( _eventType, _callback ){\r
-                       FILE_CONTROLER.removeEventListener( this, _eventType, _callback );\r
-               },\r
-               dispatchEvent: function( e ){\r
-                       e instanceof FileEventClass && FILE_CONTROLER.fileEventRellay( this.getUID(), e );\r
-               },\r
-               getChildFileLength: function(){\r
-                       var children = FILE_CONTROLER.getChildren( this );\r
-                       return Type.isArray( children ) === true ? children.length : -1;\r
-               },\r
-               getChildFileIndex: function( _FILEorFILEDATA ){\r
-                       var children = FILE_CONTROLER.getChildren( this );\r
-                       if( Type.isArray( children ) === false ) return -1;\r
-                       var l = children.length,\r
-                               _fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA );\r
-                       if( _fileData === null ) return -1;\r
-                       for( var i=0; i<l; ++i ){\r
-                               if( children[ i ] === _fileData ) return i;\r
-                       }\r
-                       return -1;\r
-               },\r
-               getChildFileByIndex: 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
-                       var _file = new FileClass( _access.TREE, _access.DATA, _children[ _index ]);\r
-                       // _file.init();\r
-                       return _file;\r
-               },\r
-               getName: function(){\r
-                       var driver = FILE_CONTROLER.getDriver( this );\r
-                       if( typeof driver.getName === 'function'){\r
-                               return driver.getName( this );\r
-                       }\r
-                       return BASE_DRIVER.getName( this);\r
-               },\r
-               getThumbnail: function(){\r
-                       var driver = FILE_CONTROLER.getDriver( this );\r
-                       if( typeof driver.getThumbnail === 'function'){\r
-                               return driver.getThumbnail( this );\r
-                       }\r
-                       return BASE_DRIVER.getThumbnail( this );\r
-               },\r
-               getType: function(){\r
-                       var _data = FILE_CONTROLER.getFileData( this );\r
-                       return typeof _data.type === 'number' ? _data.type : Const.FILE.TYPE.UNKNOWN;\r
-               },\r
-               getState: function(){\r
-                       var _data = FILE_CONTROLER.getFileData( this );\r
-                       return typeof _data.state === 'number' ? _data.state : Const.FILE.STATE.OK;\r
-               },\r
-               getSummary: function(){\r
-                       var driver = FILE_CONTROLER.getDriver( this );\r
-                       if( typeof driver.getSummary === 'function'){\r
-                               return driver.getSummary( this );\r
-                       }\r
-                       return BASE_DRIVER.getSummary( this );\r
-               },\r
-               isWritable: function(){\r
-                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.WRITE );\r
-               },\r
-               isSortable: function(){\r
-                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.SORT );\r
-               },              \r
-               isCreatable: function(){\r
-                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.CREATE );\r
-               },\r
-               isRenamable: function(){\r
-                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.RENAME );\r
-               },\r
-               isDeletable: function(){\r
-                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.DELETE );\r
-               },\r
-               read: function(){\r
-                       // simpleDeepCopy\r
-                       var driver = FILE_CONTROLER.getDriver( this ),\r
-                               data;\r
-                       if( typeof driver.read === 'function'){\r
-                                data = driver.read( this );\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
-                               return driver.write( this, _newData, _onUpdateFunction );\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
-                               return driver.viewerApplicationList( this );\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
-                               return driver.editorApplicationList( this );\r
-                       }\r
-                       return BASE_DRIVER.viwerApps( this );\r
-               },\r
-               create: function(){\r
-                       \r
-               },\r
-               sort: function(){\r
-                       \r
-               },\r
-               onCopy: function(){\r
-                       \r
-               },\r
-               onDelete: function(){\r
-                       \r
-               },\r
-               move: function( _newFolder, _newIndex, opt_callback ){\r
-                       var _access = FILE_CONTROLER.getFileDataAccess( this );\r
-                       _access.TREE.move( _access.parentData, this.getUID(), _newFolder, _newIndex, opt_callback );\r
-               },\r
-               replace: function( _newIndex, opt_callback ){\r
-                       var _access = FILE_CONTROLER.getFileDataAccess( this );\r
-                       _access.TREE.replace( _access.parentData, this.getUID(), _newIndex, opt_callback);\r
-               },\r
-               /**\r
-                * サーチ\r
-                * 探しているファイルの属性と値を指定.一致する child の index を配列で返す.\r
-                */\r
-               search: function( obj, rule ){\r
-                       var _children = FILE_CONTROLER.getChildren( this ),\r
-                               _child,\r
-                               ret = [], k, c;\r
-                       for( var i=0, l=_children.length; i<l; ++i ){\r
-                               _child = _children[ i ];\r
-                               c = true;\r
-                               for( k in obj ){\r
-                                       if( obj[ k ] !== _child[ k ] ){\r
-                                               c = false;\r
-                                               break;\r
-                                       }\r
-                               }\r
-                               c === true && ret.push( i );\r
-                       }\r
-                       return ret;\r
-               },\r
-               destroy: function(){\r
-                       var _access = FILE_CONTROLER.getFileDataAccess( this );\r
-                       var _tree = _access.TREE;\r
-                       if( _tree.getCurrentFile() === this ) return;\r
-                       if( _tree.getRootFile() === this ) return;\r
-                       for( var i=0, l = _tree.hierarchy(); i<l; ++i ){\r
-                               if( _tree.getParentFileAt( i ) === this ){\r
-                                       return;\r
-                               }\r
-                       }\r
-                       var _index = Util.getIndex( FILEDATA_ACCESS, _access );\r
-                       if( _index === -1 ) return;\r
-                       // event の 削除\r
-                       FILEDATA_ACCESS.splice( _index, 1 );\r
-                       delete _access.DATA;\r
-                       delete _access.TREE;\r
-                       delete _access.parentData;\r
-               }\r
-       }\r
-\r
-       /*\r
-        * FileDriverBase\r
-        */\r
-       var FileDriverBase = function( driverClass ){\r
-               this.getUID = function(){\r
-                       return Util.getIndex( API_USER_LIST, driverClass );\r
-               };\r
-               this.getSeqentialFiles = function( _file ){\r
-               };\r
-               this.getName = function( _file ){\r
-                       var _data = FILE_CONTROLER.getFileData( _file );\r
-                       return _data.name || 'No Name';\r
-               };\r
-               this.getThumbnail = function( _file ){\r
-                       var _data = FILE_CONTROLER.getFileData( _file ),\r
-                               _type = _data.type,\r
-                               _className = '';\r
-                       if( _type === Const.FILE.TYPE.FOLDER ){\r
-                               _className = 'folder';\r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.IMAGE ){\r
-                               \r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.TEXT ){\r
-                               \r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.HTML ){\r
-                               \r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.CSV ){\r
-                               \r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.JSON ){\r
-                               \r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.XML ){\r
-                               \r
-                       };\r
-                       return {\r
-                               image:          null,\r
-                               className:      ' file-type-' + _className\r
-                       };\r
-               };\r
-               this.getSummary = function( _file ){\r
-                       var _data = FILE_CONTROLER.getFileData( _file ),\r
-                               _type = _data.type;\r
-                       if( _type === Const.FILE.TYPE.FOLDER ){\r
-                               return 'folder';\r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.IMAGE ){\r
-                               return 'image file';\r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.TEXT ){\r
-                               return 'text file';\r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.HTML ){\r
-                               return 'html document file';\r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.CSV ){\r
-                               return 'csv daat file';\r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.JSON ){\r
-                               return 'json data file';\r
-                       } else\r
-                       if( _type === Const.FILE.TYPE.XML ){\r
-                               return 'xml data file';\r
-                       }\r
-                       return '';\r
-               };\r
-               this.getUpdatePolicy = function( _file ){\r
-                       // debug用 全てのメニューを許可\r
-                       return Const.FILE.UPDATE_POLICY.DSRWC;\r
-               };\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
-                       } else {\r
-                               data = _FILEorDATA;\r
-                       }\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
-                               } else {\r
-                                       return null;\r
-                               }\r
-                               for( var key in src ){\r
-                                       if( Util.getIndex( protects, key ) === -1 ){\r
-                                               ret[ key ] = clone( src[ key ]);\r
-                                       }\r
-                               }\r
-                               return ret;\r
-                       };\r
-                               \r
-                       return clone( data );\r
-               };\r
-               this.write = function( _file, _newData, _onUpdateFunction ){\r
-                       var _data = FILE_CONTROLER.getFileData( _file ),\r
-                               _type = _data.type;\r
-                       return false;\r
-               };\r
-               this.viewerApplicationList = function(){\r
-                       return [];\r
-               };\r
-               this.editorApplicationList = function(){\r
-                       return [];\r
-               };\r
-               this.onCreate = function(){\r
-                       \r
-               };\r
-               this.onSort = function(){\r
-                       \r
-               };\r
-               this.onCopy = function(){\r
-                       \r
-               };\r
-               this.onDelete = function(){\r
-                       \r
-               };\r
-       }\r
-       \r
-       var BASE_DRIVER   = new FileDriverBase();\r
-       \r
-       var ROOT_FILEDATA = {\r
-                       name:           'system root',\r
-                       type:           FILE_TYPE_IS_FOLDER,\r
-                       children:       []\r
-               },\r
-               SYSTEM_TREE = FILE_CONTROLER.createTree( SUPER_USER_KEY, ROOT_FILEDATA ),\r
-               ROOT_FILE   = SYSTEM_TREE.getRootFile();\r
-\r
-       function createFileTypeID(){\r
-               return ++numFileType;\r
-       }\r
-       \r
-       var FileAPIClass = function( driver ){\r
-               var constObject;\r
-               this.createFolderUnderRoot = function( _fileData ){\r
-                       if( _fileData !== null && Type.isObject( _fileData ) === true ){\r
-                               ROOT_FILEDATA.children.push( _fileData );\r
-                               ROOT_FILE.dispatchEvent( new FileEventClass( Const.FILE.EVENT.GET_SEQENTIAL_FILES, ROOT_FILE, 'children', null ));\r
-                       }\r
-               };\r
-               this.createFileEvent   = function( _eventType, _file, _key, _value ){\r
-                       return new FileEventClass( _eventType, _file, _key, _value );\r
-               };\r
-               this.createFileTypeID  = createFileTypeID;\r
-               this.getFileDataAccess = FILE_CONTROLER.getFileDataAccess;\r
-               this.getFileData       = FILE_CONTROLER.getFileData;\r
-               this.getJson           = function( _data, _url, _onLoad, _onError ){\r
-                       REQUEST_CONTROLER.getJson( driver, _data, _url, _onLoad, _onError );\r
-               };\r
-               this.createTree        = function( _rootFile ){\r
-                       return FILE_CONTROLER.createTree( driver, _rootFile );\r
-               };\r
-               this.isTreeInstance    = function( _tree ){\r
-                       return _tree instanceof TreeClass;\r
-               };\r
-               this.isFileInstance    = function( _file ){\r
-                       return _file instanceof FileClass;\r
-               };\r
-               this.isFileEvent       = function( _event ){\r
-                       return _event instanceof FileEventClass;\r
-               };\r
-               this.getConst          = function(){\r
-                       return Const; // constObject = constObject || clone( Const )\r
-               };\r
-       }\r
-       \r
-       return {\r
-               registerDriver: function( _class ){\r
-                       _class.prototype = new FileDriverBase( _class );\r
-                       var _driver = new _class();\r
-                       \r
-                       DRIVER_LIST.push( _driver );\r
-                       API_USER_LIST.push( _class );\r
-\r
-                       return new FileAPIClass( _driver );\r
-               },\r
-               isDriver: function( _driver ){\r
-                       return _driver instanceof FileDriverBase;\r
-               },\r
-               isTreeInstance: function( _tree ){\r
-                       return _tree instanceof TreeClass;\r
-               },\r
-               isFileInstance: function( _file ){\r
-                       return _file instanceof FileClass;\r
-               }\r
-       }\r
-})();\r
-\r
-\r
-/* ----------------------------------------------------\r
- * ApplicationManager\r
- * window resize event, overlayApplication currentAplication に流す\r
- */    \r
-\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
-       };\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
-                               // 小さすぎる!、と表示\r
-                       };\r
-                       return;\r
-               };\r
-               instance.onPaneResize( _w, _h );\r
-       };\r
-       this.onPaneResize = function( _w, _h ){};\r
-       this.close = function(){\r
-               instance.onClose();\r
-               instance = this;\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
-       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
-               function detect(){\r
-                       if( self.rootElement.firstChild && fetchResource === 0 ){\r
-                               SystemTimer.remove( self, detect );\r
-                               onOpen();\r
-                       };\r
-               };\r
-               \r
-               function onOpen(){\r
-                       self.rootElement.style.display = '';\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
-               };\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
-                       };\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
-               StyleSheet.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
-                       StyleSheet.load( self, _url, fetchResourceComplete, fetchResourceComplete );\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.addEventListener = 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, _thisObject ){\r
-       AsyncCall.add( this, _callback, _argments, _thisObject );\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
-       };\r
-};\r
-\r
-var Application = ( function(){\r
-       \r
-       var LIVE_APPLICATION_LIST = [];\r
-       \r
-       var currentApplication    = null,\r
-               coveredApplication    = null,\r
-               winW                  = 0,\r
-               winH                  = 0;\r
-       \r
-       var ApplicationReference = function( appClass, isOverlay, displayName, id, thumbnailUrl, tailColor ){\r
-               var self          = this;\r
-               var application   = null;\r
-               this.id           = id;\r
-               this.displayName  = displayName;\r
-               this.thumbnailUrl = thumbnailUrl;\r
-               this.tailColor    = tailColor;\r
-               this.getUID = function(){\r
-                       return Util.getIndex( API_USER_LIST, appClass );\r
-               };\r
-               this.boot = function( /* _option */ ){\r
-                       application = Application.boot( displayName, self.getUID(), appClass, isOverlay, 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
-               };\r
-       };\r
-       \r
-       function asyncBootHome(){\r
-               currentApplication === null && Home.boot();\r
-       };\r
-       function asyncOpen( /* arguments */ ){\r
-               var _arg = Util.copyArray( arguments );\r
-               _arg.unshift( winW, winH );\r
-               currentApplication.open.apply( currentApplication, _arg );\r
-       };\r
-       return {\r
-               register: function( _class, _overlay, _tail, _displayName, _id, _thumbnailUrl, _tailColor ){\r
-                       APPLICATION_LIST.push( _class );\r
-                       API_USER_LIST.push( _class );\r
-                       var _ref = new ApplicationReference( _class, _overlay, _displayName, _id, _thumbnailUrl, _tailColor );\r
-                       _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
-               },\r
-               isApplicationReference: function( _reference ){\r
-                       return _reference instanceof ApplicationReference;\r
-               },\r
-               isCurrentAppplication: function( _application ){\r
-                       return true\r
-               },\r
-               boot: function( displayName, uid, appClass, 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
-                       \r
-                       coveredApplication = isOverlay === true ? currentApplication : null;\r
-                       \r
-                       Application.onCurrentApplicationChange( application );\r
-                       \r
-                       if( isOverlay === false ){\r
-                               body.style.backgroundColor = application.bgColor;\r
-                               \r
-                               body.appendChild( application.rootElement );\r
-                               application.rootElement.style.display = 'none';\r
-                               application.init();\r
-\r
-                               application.addAsyncCall( asyncOpen, arg );\r
-                       } else {\r
-                               Overlay.show( application, arg );\r
-                       }\r
-                       \r
-                       return application;\r
-               },\r
-               shutdown: function( _application, isOverlay ){\r
-                       if( isOverlay === false ){\r
-                               currentApplication = null;\r
-                               AsyncCall.add( SUPER_USER_KEY, asyncBootHome );\r
-                       } else {\r
-                               Application.onCurrentApplicationChange( coveredApplication );\r
-                               coveredApplication = null;\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
-                       KeyEvent.updateCurrentListener( _application );\r
-               },\r
-               onApplicationShutdown: function( _application ){\r
-                       LIVE_APPLICATION_LIST.splice( Util.getIndex(  LIVE_APPLICATION_LIST, _application ) );\r
-               },\r
-               onWindowResize: function( w, h ){\r
-                       winW = w;\r
-                       winH = h;\r
-                       currentApplication && currentApplication.resize( w, h );\r
-                       Overlay.onWindowResize( w, h );\r
-                       UI.onWindowResize( w, h );\r
-               },\r
-               onSystemShutdown: function(){\r
-                       \r
-               }\r
-       }\r
-})();\r
-\r
-/* --------------------------------------------------------------\r
- * Home\r
- * \r
- */\r
-       var Home = ( function(){\r
-               var APP_REF_LIST    = [];\r
-               var ELM_TAIL_ORIGIN = ( function(){\r
-                       var ret = document.createElement( 'div' ),\r
-                               h2  = document.createElement( 'h2' );\r
-                       ret.className = 'tail-wrapper';\r
-                       ret.appendChild( h2 );\r
-                       h2.appendChild( document.createTextNode( 'appName' ) );\r
-                       return ret;\r
-               })();\r
-               \r
-               var TailClass = function( appRef ){\r
-                       this.elm = ELM_TAIL_ORIGIN.cloneNode( true );\r
-                       this.destroy = function(){\r
-                               appRef = self = elmName = null;\r
-                       };                      \r
-                       \r
-                       var self    = this,\r
-                               elmName = this.elm.getElementsByTagName( 'h2' )[ 0 ].firstChild;\r
-                       \r
-                       this.elm.style.backgroundColor = appRef.tailColor;\r
-                       elmName.data = appRef.displayName;\r
-               };\r
-               \r
-               var ref = Application.register( function(){\r
-                       var self     = this,\r
-                               winW     = 0,\r
-                               winH     = 0,\r
-                               tailList = [],\r
-                               elmContainer, elmHeader;\r
-                       \r
-                       function draw(){\r
-                               var tail, elm;\r
-                               for( var i=0, l=APP_REF_LIST.length; i<l; ++i ){\r
-                                       tail = new TailClass( APP_REF_LIST[ i ] );\r
-                                       tailList.push( tail );\r
-                                       elm  = tail.elm;\r
-                                       elmContainer.appendChild( elm );\r
-                                       self.addEventListener( elm, 'click', onTailClick );\r
-                               };\r
-                       };\r
-                       \r
-                       function onTailClick( e ){\r
-                               var _children = elmContainer.getElementsByTagName( 'div' );\r
-                               for( var i=0, l=_children.length; i<l; ++i ){\r
-                                       if( this === _children[ i ] ){\r
-                                               APP_REF_LIST[ i ].boot();\r
-                                               break;\r
-                                       };\r
-                               };\r
-                       };\r
-                       \r
-                       this.bgColor     = '#0F6D39';\r
-                       this.MIN_WIDTH   = 320;\r
-                       this.MIN_HEIGHT  = 320;\r
-                       this.onInit = function(){\r
-                               self.rootElement.id = 'home-root';\r
-                               \r
-                               elmContainer        = document.createElement( 'div' );\r
-                               self.rootElement.appendChild( elmContainer );\r
-                               elmContainer.id     = 'home-tail-container';\r
-                               \r
-                               elmHeader           = document.createElement( 'div' );\r
-                               self.rootElement.appendChild( elmHeader );\r
-                               elmHeader.id        = 'home-header';\r
-                       };\r
-                       this.onOpen = function( _w, _h ){\r
-                               winW = _w;\r
-                               winH = _h;\r
-                               draw();\r
-                       };\r
-                       this.onPaneResize = function( _w, _h ){\r
-                               \r
-                       };\r
-                       this.onClose = function(){\r
-                               self.removeMouseEventListener();\r
-                               while( tailList.length > 0 ){\r
-                                       tailList.shift().destroy();\r
-                               }\r
-                               self = tailList = elmContainer = null;\r
-                       };\r
-               }, false, false, 'home', 'home', null );\r
-               \r
-               return {\r
-                       add: function( _appRef ){\r
-                               if( Application.isApplicationReference( _appRef ) === false ) return;\r
-                               Util.getIndex( APP_REF_LIST, _appRef ) === -1 && APP_REF_LIST.push( _appRef );\r
-                       },\r
-                       boot: function(){\r
-                               ref.boot();\r
-                       }\r
-               }\r
-       })();\r
-\r
-       var Page = ( function(){\r
-               var pageNodes = [],\r
-                       appClass, ref,\r
-                       ignoreTagList = [ 'script', 'noscript', 'style' ];\r
-               \r
-               var MemoryClass = function( node ){\r
-                       this.node = node;\r
-               };\r
-               MemoryClass.prototype = {\r
-                       init: function(){\r
-                               var node      = this.node,\r
-                                       _nodeType = node.nodeType;\r
-                               if( _nodeType === 1 && Util.getIndex( ignoreTagList, node.tagName.toLowerCase() ) === -1 ){\r
-                                       this.type    = _nodeType;\r
-                                       this.display = node.style.display;\r
-                               } else\r
-                               if( _nodeType === 3 ){\r
-                                       if( node.data.replace( /\s/g, '' ).length !== 0 ){\r
-                                               this.type    = _nodeType;\r
-                                               this.before  = pageNodes.length === 0 ? null : pageNodes[ pageNodes.length - 1 ].node;\r
-                                       } else {\r
-                                               body.removeChild( node );\r
-                                               return false;\r
-                                       }\r
-                               } else {\r
-                                       // body.removeChild( node );\r
-                                       return false;\r
-                               };\r
-                       },\r
-                       show: function(){\r
-                               if( this.type === 1 ){\r
-                                       if( this.display ){\r
-                                               this.node.style.display = this.display;\r
-                                       } else {\r
-                                               this.node.style.display = '';\r
-                                       }\r
-                               } else {\r
-                                       if( this.before ){\r
-                                               body.insertBefore( this.node, this.before );\r
-                                       } else {\r
-                                               body.appendChild( this.node );\r
-                                       };\r
-                               };\r
-                       },\r
-                       hide: function(){\r
-                               if( !this.node.parentNode ){\r
-                                       return;\r
-                               };\r
-                               if( this.type === 1 ){\r
-                                       this.node.style.display = 'none';\r
-                               } else {\r
-                                       body.removeChild( this.node );\r
-                               };\r
-                       }\r
-               };\r
-               \r
-               return {\r
-                       onReady: function(){\r
-                               var _children = Util.copyArray( body.childNodes ),\r
-                                       _mem;\r
-                               for( var i = 0, l = _children.length; i<l; ++i ){\r
-                                       _mem = new MemoryClass( _children[ i ] );\r
-                                       _mem.init() !== false && pageNodes.push( _mem );\r
-                               };\r
-                               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.MIN_WIDTH  = Page.appClass.MIN_WIDTH  || 240;\r
-                                               Page.appClass.MIN_HEIGHT = Page.appClass.MIN_HEIGHT || 240;\r
-                                       } else {\r
-                                               Page.appClass = function(){\r
-                                                       var self     = this;\r
-                                                       \r
-                                                       this.bgColor      = '#ffffff';\r
-                                                       this.MIN_WIDTH    = 200;\r
-                                                       this.MIN_HEIGHT   = 200;\r
-                                                       this.onInit       = function(){};\r
-                                                       this.onOpen       = function( _w, _h ){\r
-                                                               KeyEvent.add( self, Const.KEY.EVENT.KEY_DOWN, ref.shutdown, 27 ); // 27.esc\r
-                                                       };\r
-                                                       this.onPaneResize = function( _w, _h ){};\r
-                                                       this.onClose      = function(){};\r
-                                               };\r
-                                       };\r
-                                       ref = Application.register( Page.appClass, false, true, document.title, 'page', null, Page.appClass.tailColor || '#999999' );\r
-                               };\r
-                               delete Page.onReady;\r
-                       },\r
-                       show: function(){\r
-                               for( var i = pageNodes.length; i; ){\r
-                                       pageNodes[ --i ].show();\r
-                               };\r
-                       },\r
-                       hide: function(){\r
-                               for( var i = pageNodes.length; i; ){\r
-                                       pageNodes[ --i ].hide();\r
-                               };                              \r
-                       },\r
-                       boot: function(){\r
-                               ref && ref.boot();\r
-                       },\r
-                       registered: function(){\r
-                               return !!ref;\r
-                       },\r
-                       appClass: null\r
-               }\r
-       })();\r
-\r
-/* --------------------------------------------------------------\r
- * Event\r
- * \r
- *  screenX\r
- *  スクリーン座標は、コンピュータのディスプレイの左上を原点とする座標系である。screenX, screenY属性で取得できる。Javascritpでは、同名のプロパティとして実装されている。\r
- *  しかし、これは、現実的には、何の役に立たない。ブラウザ自体がディスプレイのどの位置にいるのかがわからないので、画面上の位置を知ったところで、何にもならないからだ。 \r
- * \r
- *  clientX\r
- *  ウインドウ座標とは、現在のブラウザのウインドウの、ドキュメントを表示している部分の左上原点とした座標である。\r
- *  問題は、ウインドウは、必ずしもドキュメント全体を表示するとは限らない。スクロールと呼ばれるUIによって、ドキュメントの一部だけを表示しているかもしれない。\r
- */\r
-       var XBrowserEvent = ( function(){\r
-               var wrappedHandlerClass,\r
-                       wrappedEventClass,\r
-                       tmp;\r
-               \r
-               if( window.addEventListener ){\r
-                       wrappedHandlerClass = function( element, handler ){\r
-                               this.handler = function( e ){\r
-                                       if( handler.call( element, e ) !== false ) return;\r
-                                       e.preventDefault();\r
-                                       e.stopPropagation();\r
-                                       return false;\r
-                               };\r
-                               this.destroy = function(){\r
-                                       element = handler = null;\r
-                                       delete this.handler;\r
-                                       delete this.destroy;\r
-                               };\r
-                       };\r
-               } else {\r
-                       wrappedEventClass = function( e, element ){\r
-                               this._event        = e;\r
-                               this.type          = e.type;\r
-                               this.target        = e.srcElement;\r
-                               this.currentTarget = element;\r
-                               this.relatedTarget = e.formElement ? e.formElement : e.toElement;\r
-                               this.eventPhase    = e.srcElement === element ? 2: 3;\r
-                               \r
-                               this.clientX       = e.clientX;\r
-                               this.clientY       = e.clientY;\r
-                               this.screenX       = e.screenX;\r
-                               this.screenY       = e.screenY;\r
-                               \r
-                               this.keyCode       = e.keyCode;\r
-                               this.altKey        = e.altKey;\r
-                               this.ctrlKey       = e.ctrlKey;\r
-                               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
-                       };\r
-                       wrappedEventClass.prototype.preventDefault  = function(){\r
-                               this._event.returnValue = false;\r
-                       };\r
-\r
-                       if( doc.attachEvent ){\r
-                               wrappedHandlerClass = function( element, handler ){\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
-                                               return false;\r
-                                       };\r
-                                       this.destroy = function(){\r
-                                               element = handler = null;\r
-                                               delete this.handler;\r
-                                               delete this.destroy;\r
-                                       };\r
-                               };\r
-                       } else {\r
-                               tmp = {\r
-                                       list: [],\r
-                                       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
-                                                               return _item;\r
-                                                       };\r
-                                               };\r
-                                               return null;\r
-                                       }\r
-                               };\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
-                                       _ticket = null;\r
-                               };\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
-                                       },\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
-                                       },\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
-                                               };\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.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
-                                       }\r
-                               };\r
-                       };\r
-               };\r
-\r
-               return {\r
-                       add: function( _ticket ){\r
-                               if( doc.addEventListener ){\r
-                                       XBrowserEvent.add = function( _ticket ){\r
-                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket.element, _ticket.handler );\r
-                                               _ticket.element.addEventListener( _ticket.eventType, _ticket.wrappedHandler.handler, false );\r
-                                       }\r
-                               } else\r
-                               if( doc.attachEvent ){\r
-                                       XBrowserEvent.add = function( _ticket ){\r
-                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket.element, _ticket.handler );\r
-                                               _ticket.element.attachEvent( 'on' + _ticket.eventType, _ticket.wrappedHandler.handler );\r
-                                       };\r
-                               } else {\r
-                                       XBrowserEvent.add = function( _ticket ){\r
-                                               var t = tmp.find( _ticket );\r
-                                               if( t !== null ){\r
-                                                       t.add( _ticket );\r
-                                               } else {\r
-                                                       tmp.list.push( new tmp.ticketClass( _ticket ) );\r
-                                               };\r
-                                       };\r
-                               }\r
-                               \r
-                               XBrowserEvent.add( _ticket );\r
-                       },\r
-                       remove: function( _ticket ){\r
-                               if( doc.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
-                                       XBrowserEvent.remove = function( _ticket ){\r
-                                               _ticket.element.detachEvent( 'on' + _ticket.eventType, _ticket.wrappedHandler.handler );\r
-                                               _ticket.wrappedHandler.destroy();\r
-                                       };\r
-                               } else {\r
-                                       XBrowserEvent.remove = function( _ticket ){\r
-                                               var t = tmp.find( _ticket );\r
-                                               if( t !== null ){\r
-                                                       t.remove( _ticket );\r
-                                               };\r
-                                       };\r
-                               };\r
-                               \r
-                               XBrowserEvent.remove( _ticket );\r
-                       }\r
-               }\r
-       })();\r
-\r
-/*\r
- * EventTicketClass\r
- */\r
-       var EventTicketClass = function( _element, _eventType, _handler ){\r
-               this.element        = _element;\r
-               this.eventType      = _eventType;\r
-               this.handler        = _handler;\r
-               this.wrappedHandler = null; // for ie\r
-               \r
-               XBrowserEvent.add( this );\r
-               \r
-               _element = _eventType = _handler = null;\r
-       };\r
-       EventTicketClass.prototype = {\r
-               match: function( _element, _eventType, _handler ){\r
-                       if( _handler   && _handler   !== this.handler )   return false;\r
-                       if( _eventType && _eventType !== this.eventType ) return false;\r
-                       if( _element   && _element   !== this.element )   return false;\r
-                       \r
-                       return true;\r
-               },\r
-               destroy: function( _element, _eventType, _handler ){\r
-                       if( this.match( _element, _eventType, _handler ) === false ) return false;\r
-                       \r
-                       XBrowserEvent.remove( this );\r
-                       \r
-                       delete this.element;\r
-                       delete this.eventType;\r
-                       delete this.handler;\r
-                       delete this.wrappedHandler;\r
-                       \r
-                       return true;\r
-               }\r
-       };\r
-\r
-var ReadyEvent = ( function(){\r
-       var ticketReady,\r
-               ticketLoad;\r
-\r
-       function webkitDetect(){\r
-               var state = document.readyState;\r
-               if( state === 'loaded' || state === 'complete' ){\r
-                       SystemTimer.remove( SUPER_USER_KEY, webkitDetect );\r
-                       timer = null;\r
-                       onReady();\r
-               };\r
-       };\r
-       function ieDetect(){\r
-               if( this.readyState === 'complete' ){ // this.readyState === 'loaded' || \r
-                       this.onreadystatechange = new Function();\r
-                       this.onreadystatechange = null;\r
-                       AsyncCall.remove( SUPER_USER_KEY, ieScroll );\r
-                       onReady();\r
-               };\r
-       };\r
-       function ieScroll(){\r
-               try {\r
-                       document.documentElement.doScroll( 'left' );\r
-               } catch( e ){\r
-                       AsyncCall.add( SUPER_USER_KEY, ieScroll );\r
-                       return;\r
-               };\r
-               // no errors, fire\r
-               document.onreadystatechange = new Function();\r
-               document.onreadystatechange = null;\r
-               onReady();              \r
-       };\r
-               \r
-       function onReady(){\r
-               ticketReady && ticketReady.destroy();\r
-               ticketLoad  && ticketLoad.destroy();\r
-               ticketReady = ticketLoad = null;\r
-               Page.onReady();\r
-               if( Page.registered() === true ){\r
-                       Page.boot();\r
-               } else {\r
-                       Home.boot();\r
-               };\r
-       };\r
-       \r
-       // Apple WebKit (Safari, OmniWeb, ...)\r
-       if( doc.readyState && !!UA.WEBKIT ){\r
-               SystemTimer.add( SUPER_USER_KEY, webkitDetect, 50 );\r
-       /* } else\r
-               if( document.readyState && UA.isIE && UA.ieVersion < 9 ){\r
-               ieScroll();\r
-               document.onreadystatechange = ieDetect; */\r
-       } else {\r
-               ticketReady = new EventTicketClass( document, 'DOMContentLoaded', onReady );\r
-               ticketLoad  = new EventTicketClass( window, 'load', onReady );\r
-       };\r
-})();\r
-\r
-\r
-\r
-\r
-/* =====================================================\r
- *  ResizeEvent\r
- * \r
- */\r
-\r
-var ResizeEvent = ( function(){\r
-       var _globalLock = 0;\r
-       var _resize;\r
-       var root = window;\r
-       var w = 0, h = 0;\r
-       \r
-       function getInnerSize(){\r
-               return {\r
-                       w : root.innerWidth || root.clientWidth,\r
-                       h : root.innerHeight || root.clientHeight\r
-               };\r
-       }\r
-       function unlock(){\r
-               _globalLock = 0;\r
-       }\r
-       \r
-       if( document.uniqueID ){\r
-               _resize = function(){\r
-                       root = (doc.compatMode || "") !== "CSS1Compat" ? doc.body : doc.documentElement;\r
-\r
-                       // resize agent\r
-                       function loop(){\r
-                               if( !_globalLock++ ){\r
-                                       var size = getInnerSize();\r
-                                       if( w !== size.w || h !== size.h ){// resized\r
-                                               w = size.w;\r
-                                               h = size.h;\r
-                                               // update\r
-                                               Application.onWindowResize( w, h );\r
-                                       }\r
-                                       window.setTimeout( unlock, 0 );\r
-                                       // delay unlock\r
-                               }\r
-                               window.setTimeout( loop, 100 );\r
-                       }\r
-                       loop();\r
-               };\r
-       } else {\r
-               _resize = function(){\r
-                       new EventTicketClass( window, 'resize', onResize );\r
-                       \r
-                       function onResize(){\r
-                               if( !_globalLock++ ) {\r
-                                       var size = getInnerSize();\r
-                                       if( w !== size.w || h !== size.h ){// resized\r
-                                               w = size.w;\r
-                                               h = size.h;\r
-                                               // update\r
-                                               Application.onWindowResize( w, h );\r
-                                       }\r
-                                       window.setTimeout( unlock, 0 );\r
-                               }\r
-                       }\r
-                       onResize();\r
-               };\r
-       }\r
-       AsyncCall.add( SUPER_USER_KEY, _resize );\r
-       \r
-       return {\r
-               getSize: getInnerSize,\r
-               onSystemShutdown: function(){\r
-                       \r
-               }\r
-       }\r
-})();\r
-\r
-\r
-/* =====================================================\r
- *  MouseEvent\r
- * \r
- */\r
-       var MouseEvent = ( function(){\r
-               var CLICK_OFFSET   = 2 * 2;             \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
-                               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
-                               if( this.match( _element, _eventType, _handler ) === false ) return false;\r
-                               \r
-                               mouseoutHandler();\r
-                               mousedownTicket.destroy();\r
-                               element = clickhandler = mousedownTicket = null;\r
-                               \r
-                               delete this.element;\r
-                               delete this.eventType;\r
-                               delete this.handler;\r
-                               \r
-                               return true;\r
-                       };\r
-               };\r
-               ClickEventTicketClass.prototype = {\r
-                       eventType: 'click',\r
-                       match    : EventTicketClass.prototype.match\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
-                                       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
-                               };\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
-                               };\r
-                       } else {\r
-                               TMP.wheelList   = [];\r
-                               //TMP.wheelLegacy = undefined;\r
-                               TMP.onWheel   = function( e ){\r
-                                       e = e || window.event;\r
-                                       var cancel = true,\r
-                                               f = TMP.wheelLegacy;\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
-                                       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
-                                       \r
-                                       if( TMP.wheelList.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
-                               };\r
-                       }\r
-               })();\r
-               WheelEventTicketClass.prototype = {\r
-                       eventType : 'mousewheel',\r
-                       match     : EventTicketClass.prototype.match,\r
-                       destroy   : function( _element, _eventType, _handler ){\r
-                               if( this.match( _element, _eventType, _handler ) === false ) return false;\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
-               \r
-               \r
-               return {\r
-                       add: function( _apiuser, _element, _eventType, _handler ){\r
-                               if( isApiUser( _apiuser ) === true &&\r
-                                       ( Type.isHTMLElement( _element ) === true || _element === window || _element === doc ) &&\r
-                                       Type.isString( _eventType ) === true &&\r
-                                       Type.isFunction( _handler ) === true\r
-                               ){\r
-                                       var _uid    = _apiuser.getUID(),\r
-                                               _events = EVENT_LIST_MAP[ _uid ];\r
-                                       if( Type.isArray( _events ) === false ){\r
-                                               _events = EVENT_LIST_MAP[ _uid ] = [];\r
-                                       } else {\r
-                                               // 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
-                                       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
-                                       };\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
-                                               } else {\r
-                                                       ++i;\r
-                                               }\r
-                                       }\r
-                                       if( _events.length === 0 ){\r
-                                               _events = EVENT_LIST_MAP[ _uid ] = null;\r
-                                       }\r
-                               }\r
-                       },\r
-                       onCurrentApplicationChange: function(){\r
-                               \r
-                       },\r
-                       onApplicationShutdown: function(){\r
-                               \r
-                       },\r
-                       onSystemShutdown: function(){\r
-                               \r
-                       }\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * KEY\r
- * \r
- *  - EDITABLE_TEXT_CONTROL\r
- * \r
- *    .SHIFT_DOWN_EVENT:       'shiftDown',\r
- *    .SHIFT_UP_EVENT:         'shiftUp',\r
- *    .CTRL_DOWN_EVENT:                'ctrlDown',\r
- *    .CTRL_UP_EVENT:          'ctrlUp',\r
- *    .SPACE_DOWN_EVENT:       'spaceDown',\r
- *    .SPACE_UP_EVENT:         'spaceUp',\r
- *    .init:                           function,\r
- *    .addKeyDownEvent:                function,\r
- *    .keyEventDispatcher:     function,\r
- * \r
- * ショートカットキーの監視とテキスト入力(input, textarea)、チェックボックスを管理する。\r
- * キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。\r
- * \r
- */\r
-var KeyEvent = ( function(){\r
-       var EVENT_LIST_MAP = [],\r
-               LOCK_UP        = [],\r
-               LOCK_DOWN      = [],\r
-               application    = null,\r
-               currentList    = null;\r
-\r
-       window.focus();\r
-       \r
-       var focusTicket    = null,\r
-               keydownTicket  = null,\r
-               keyupTicket    = null,\r
-               keyPress       = null,\r
-               keypressTicket = null;\r
-       \r
-       function unlock( lock, key ){\r
-               lock.splice( Util.getIndex( lock, key ), 1 );\r
-       };\r
-       \r
-       function onKeyChange( e ){\r
-               var cancel         = false,\r
-                       type           = e.type,\r
-                       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
-                       \r
-               // block chattering\r
-               if( Util.getIndex( lock, key ) !== -1 ) return;\r
-               lock.push( key );\r
-               AsyncCall.add( SUPER_USER_KEY, unlock, [ lock, key ] );\r
-               \r
-               if( key === 16 || shift === true ){\r
-                       KeyEvent.shiftEnabled = type !== 'keyup';\r
-               };\r
-               if( key === 17 || ctrl === true ){\r
-                       KeyEvent.ctrlEnabled  = type !== 'keyup';\r
-               };\r
-               for( var i=currentList.length, t; 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
-                       };\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
-                       return false;\r
-               };\r
-       };\r
-       \r
-       if( UA.isIE === true && UA.ieRenderingVersion < 9 ){\r
-               keyPress = function( e ){\r
-                       var key = e.keyCode;\r
-                       if( key === 13 || key === 27 ){\r
-                               e.type = 'keydown';\r
-                               return onKeyChange( e );\r
-                       };\r
-               };\r
-       };\r
-       \r
-       var KeyEventTicketClass = function( _apiuser, _type, _onKeydown, _onKeyup, _keyCode, _shift, _ctrl ){\r
-               this.apiuser = _apiuser;\r
-               this.type    = _type;\r
-               this.keydown = _onKeydown;\r
-               this.keyup   = _onKeyup;                \r
-               this.keyCode = _keyCode;\r
-               this.shift   = _shift;\r
-               this.ctrl    = _ctrl;\r
-               _apiuser = _onKeydown = _onKeyup = null;\r
-       }\r
-       KeyEventTicketClass.prototype = {\r
-               match: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){\r
-                       if( _apiuser  && _apiuser  !== this.apiuser ) return false;\r
-                       if( _type     && _type     !== this.type )    return false;\r
-                       if( _handler ){\r
-                               if( this.type === 'keydown' ){\r
-                                       if( _handler !== this.keydown ) return false;\r
-                               } else {\r
-                                       if( _handler !== this.keyup )   return false;\r
-                               };\r
-                       };\r
-                       if( _keyCode  && _keyCode  !== this.keyCode ) return false;\r
-                       if( _shift    && _shift    !== this.shift )   return false;\r
-                       if( _ctrl     && _ctrl     !== this.ctrl )    return false;\r
-                       return true;\r
-               },\r
-               destroy: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){\r
-                       if( this.match( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ) === false ) return false;\r
-                       \r
-                       delete this.apiuser;\r
-                       delete this.keydown;\r
-                       delete this.keyup;\r
-                       \r
-                       return true;\r
-               }\r
-       };\r
-       \r
-       function registerEvent( _apiuser, _type, _onKeydown, _onKeyup, _keyCode, _shift, _ctrl ){\r
-               var _uid  = _apiuser.getUID(),\r
-                       _list = EVENT_LIST_MAP[ _uid ];\r
-               if( Type.isArray( _list ) === false ){\r
-                       _list = EVENT_LIST_MAP[ _uid ] = [];\r
-               }\r
-               for( var i=0, l=_list.length; i<l; ++i ){\r
-                       if( _list[ i ].match( _apiuser, _type, _onKeydown || _onKeyup, _keyCode, _shift, _ctrl ) === true ) return;\r
-               }\r
-               _list.push( new KeyEventTicketClass( _apiuser, _type, _onKeydown, _onKeyup, _keyCode, _shift, _ctrl ));\r
-               \r
-               if( _apiuser === application ) KeyEvent.updateCurrentListener( _apiuser );\r
-       };\r
-       \r
-       return {\r
-               add: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){\r
-                       if( _type === 'keydown' ){\r
-                               registerEvent( _apiuser, _type, _handler, null, _keyCode, _shift, _ctrl );\r
-                       } else\r
-                       if( _type === 'keyup' ){\r
-                               registerEvent( _apiuser, _type, null, _handler, _keyCode, _shift, _ctrl );\r
-                       } else\r
-                       if( _type === 'keychange' ){\r
-                               registerEvent( _apiuser, _type, _handler, _handler, _keyCode, _shift, _ctrl );\r
-                       } else\r
-                       if( _type === 'cursol' ){\r
-                               \r
-                       };\r
-               },\r
-               remove: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){\r
-                       var _list = EVENT_LIST_MAP[ _apiuser.getUID() ],\r
-                               i = 0;\r
-                       if( Type.isArray( _list ) === true ){\r
-                               while( i < _list.length ){\r
-                                       if( _list[ i ].destroy( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ) === true ){\r
-                                               _list.splice( i, 1 );\r
-                                       } else {\r
-                                               ++i;\r
-                                       }\r
-                               }\r
-                       }\r
-                       if( _apiuser === application ) KeyEvent.updateCurrentListener( _apiuser );\r
-               },\r
-               shiftEnabled: false,\r
-               ctrlEnabled:  false,\r
-               /*\r
-                * currentListener\r
-                *  currrentApplication ( overlay Application ) or\r
-                *  superuser ( UI )\r
-                */\r
-               updateCurrentListener: function( _apiuser ){\r
-                       application = _apiuser;\r
-                       var _uid    = _apiuser.getUID();\r
-                       currentList = EVENT_LIST_MAP[ _uid ] || ( EVENT_LIST_MAP[ _uid ] = [] );\r
-                       \r
-                       var _ticket,\r
-                               _down = false,\r
-                               _up   = false;\r
-                       for( var i=currentList.length; _ticket = currentList[ --i ]; ){\r
-                               if( _down === false ) _down = !!_ticket.keydown;\r
-                               if( _up   === false ) _up   = !!_ticket.keyup;\r
-                               if( _down && _up ) break;\r
-                       }\r
-                       if( _down === true ){\r
-                               keydownTicket = new EventTicketClass( document, 'keydown', onKeyChange );\r
-                               keypressTicket = keyPress !== null ? new EventTicketClass( doc, 'keypress', keyPress ) : null;\r
-                       } else {\r
-                               keydownTicket && keydownTicket.destroy();\r
-                               keypressTicket && keypressTicket.destroy();\r
-                               keydownTicket = keypressTicket = null;\r
-                       }\r
-                       if( _up === true ){\r
-                               keyupTicket   = new EventTicketClass( document, 'keyup', onKeyChange );\r
-                       } else {\r
-                               keyupTicket && keyupTicket.destroy();\r
-                               keyupTicket = null;\r
-                       }\r
-                       \r
-                       if( _down === true || _up === true ){\r
-                               focusTicket   = new EventTicketClass( document, 'mouseenter', window.focus );\r
-                       } else {\r
-                               focusTicket && focusTicket.destroy();\r
-                               focusTicket = null;\r
-                       }\r
-               },\r
-               onApplicationShutdown: function( _apiuser ){\r
-                       KeyEvent.remove( _apiuser );\r
-               },\r
-               onSystemShutdown: function(){\r
-                       \r
-               }\r
-       }\r
-})();\r
-\r
-/**\r
- * \r
- * http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof\r
- */\r
-\r
-var StyleSheet = ( function(){\r
-       var head = doc.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
-               this.apiusers = [ _apiuser ];\r
-               this.url      = _url;\r
-               this.elm      = _elm;\r
-               this.onload   = [ _onload ];\r
-               this.onerror  = [ _onerror ];\r
-               this.time     = 0;\r
-       };\r
-       FetchCssTicketClass.prototype = {\r
-               match: function( _apiuser, _url ){\r
-                       if( _apiuser  && Util.getIndex( this.apiusers, _apiuser ) === -1 ) return false;\r
-                       if( _url      && _url      !== this.url     ) return false;\r
-                       return true;\r
-               },\r
-               destroy: function( _apiuser, _url ){\r
-                       if( this.match( _apiuser, _url ) === false ) return false;\r
-                       \r
-                       var i = Util.getIndex( this.apiusers, _apiuser );\r
-                       \r
-                       this.apiusers.splice( i, 1 );\r
-                       this.onload.splice( i, 1 );\r
-                       this.onerror.splice( i, 1 );\r
-                       \r
-                       if( this.apiusers.length !== 0 ) return false;\r
-                       \r
-                       head.removeChild( this.elm );\r
-                       this.elm.onreadystatechange = new Function();\r
-                       this.elm.onload = null;\r
-                       \r
-                       delete this.apiusers;\r
-                       delete this.url;\r
-                       delete this.elm;\r
-                       delete this.onload;\r
-                       delete this.onerror;\r
-                       delete this.time;\r
-                       \r
-                       return true;\r
-               },\r
-               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
-                       this.onload[ i ] = this.onerror[ i ] = null;\r
-               };\r
-               },\r
-               error: function(){\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 );\r
-                       this.onload[ i ] = this.onerror[ i ] = null;\r
-               };\r
-               },\r
-               check: function(){\r
-                       var el = this.elm;\r
-                       try {\r
-                               return el[ sheet ] && el[ sheet ][ cssRules ].length > 0;\r
-                       } catch( e ){\r
-                               return false;\r
-                       };\r
-               },\r
-               done: false\r
-       };\r
-       \r
-       function getTicket( elm ){\r
-               for( var i = TICKET_LIST.length, t; i; ){\r
-                       t = TICKET_LIST[ --i ];\r
-                       if( t.elm === elm ) return t;\r
-               };\r
-       };\r
-       \r
-       function detect(){\r
-               var t = getTicket( this ), rs = this.readyState, c;\r
-               if( t && t.done === false && ( !rs || Util.getIndex( STATE_LIST, rs ) !== -1 ) ){\r
-                       t.done = true;\r
-               t.loaded();\r
-               this.onreadystatechange = new Function();\r
-               this.onload = null;\r
-               };\r
-       };\r
-       \r
-       function checkTimer(){\r
-               var l = TICKET_LIST.length,\r
-                       n = 0;\r
-               for( var i = 0; i < l; ++i ){\r
-                       t = TICKET_LIST[ i ];\r
-                       ++t.time;\r
-                       if( t.check() === true ){\r
-                               t.loaded();\r
-                               ++n;\r
-                       } else\r
-                       if( t.time > 99 ){\r
-                               t.error();\r
-                       } else {\r
-                               \r
-                       };\r
-               };\r
-               l === n && SystemTimer.remove( SUPER_USER_KEY, checkTimer );\r
-       };\r
-       \r
-       return {\r
-               load: function( _apiuser, _url, opt_onload, opt_onerror ){\r
-                       _url = Util.getAbsolutePath( _url );\r
-                       var t;\r
-                       for( var i=TICKET_LIST.length; i; ){\r
-                               t = TICKET_LIST[ --i ];\r
-                               if( t.match( null, _url ) === true ){\r
-                                       if( t.match( _apiuser, _url ) === false ){\r
-                                               t.apiusers.push( _apiuser );\r
-                                               t.onload.push( opt_onload );\r
-                                               t.onerror.push( opt_onerror );\r
-                                       };\r
-                                       SystemTimer.add( SUPER_USER_KEY, checkTimer, 333 );\r
-                                       return;\r
-                               };\r
-                       };\r
-                       var elm = doc.createElement( 'link' );\r
-                       head.appendChild( elm );\r
-                       elm.rel  = 'stylesheet';\r
-                       elm.type = 'text\/css';\r
-                       elm.onreadystatechange = elm.onload = detect;\r
-                       elm.href = _url;\r
-                       \r
-                       if( !sheet ){ // only assign these once\r
-                               cssRules = 'cssRules';\r
-                               sheet    = 'sheet';\r
-                               if ( !( sheet in elm ) ) { // MSIE uses non-standard property names\r
-                                       cssRules = 'rules';\r
-                                       sheet    = 'styleSheet';\r
-                               };\r
-                       };\r
-                       \r
-                       TICKET_LIST.push( new FetchCssTicketClass( _apiuser, _url, elm, opt_onload, opt_onerror ) );\r
-                       \r
-                       SystemTimer.add( SUPER_USER_KEY, checkTimer, 333 );\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
-               }\r
-       }\r
-})();\r
-\r
-/*\r
- * AssetLoader\r
- * fetchCSS\r
- * fetchJson\r
- * fetchHtml\r
- * fetchImage\r
- * fetchLocalFile\r
+/*
+ * pettanR system.js
+ *   version 0.5.18
+ *
+ * gadgetOS
+ *   author:
+ *     itozyun
+ *   licence:
+ *     3-clause BSD
+ */
+
+( function( window, document, undefined ){
+       
+       var body           = document.getElementsByTagName( 'body' )[ 0 ]; //( document.compatMode || '' ) !== 'CSS1Compat' ? document.body : document.documentElement;// 
+       var SERVICE_LIST   = [];
+       var SUPER_USER_KEY = { getUID: function(){ return 0; }};
+       var API_USER_LIST  = [ SUPER_USER_KEY ];
+       var numApiUser     = 1;
+       
+       function isApiUser( _user ){
+               return _user === SUPER_USER_KEY ||
+                       File.isDriver( _user ) === true ||
+                       Application.isApplicationInstance( _user ) === true;
+       };
+       
+       var Const = {
+               FILE: {
+                       TYPE: {
+                               UNKNOWN:        0,
+                               FOLDER:         1,
+                               IMAGE:          2,
+                               TEXT:           3,
+                               HTML:           4,
+                               CSV:            5,
+                               JSON:           6,
+                               XML:            7
+                       },
+                       STATE: {
+                               UNKNOWN:        0,
+                               OK:                     1,
+                               LOADING:        2,
+                               ERROR:          3,
+                               BROKEN:         4
+                       },
+                       UPDATE_POLICY: {
+                               _____:          parseInt( '00000', 2 ),
+                               ____C:          parseInt( '00001', 2 ), // hasCreateMenu
+                               ___W_:          parseInt( '00010', 2 ), // isWritable
+                               ___WC:          parseInt( '00011', 2 ), // isWritable
+                               __R__:          parseInt( '00100', 2 ), // isRenamable
+                               __R_C:          parseInt( '00101', 2 ), // hasCreateMenu
+                               __RW_:          parseInt( '00110', 2 ), // isWritable
+                               __RWC:          parseInt( '00111', 2 ), // isWritable
+                               _S___:          parseInt( '01000', 2 ), // childrenIsSortable
+                               _S__C:          parseInt( '01001', 2 ),
+                               _S_W_:          parseInt( '01010', 2 ),
+                               _S_WC:          parseInt( '01011', 2 ),
+                               _SR__:          parseInt( '01100', 2 ),
+                               _SR_C:          parseInt( '01101', 2 ),
+                               _SRW_:          parseInt( '01110', 2 ),
+                               _SRWC:          parseInt( '01111', 2 ),
+                               D____:          parseInt( '10000', 2 ),
+                               D___C:          parseInt( '10001', 2 ), // hasCreateMenu
+                               D__W_:          parseInt( '10010', 2 ), // isWritable
+                               D__WC:          parseInt( '10011', 2 ), // isWritable
+                               D_R__:          parseInt( '10100', 2 ), // isRenamable
+                               D_R_C:          parseInt( '10101', 2 ), // hasCreateMenu
+                               D_RW_:          parseInt( '10110', 2 ), // isWritable
+                               D_RWC:          parseInt( '10111', 2 ), // isWritable
+                               DS___:          parseInt( '11000', 2 ), // childrenIsSortable
+                               DS__C:          parseInt( '11001', 2 ),
+                               DS_W_:          parseInt( '11010', 2 ),
+                               DS_WC:          parseInt( '11011', 2 ),
+                               DSR__:          parseInt( '11100', 2 ),
+                               DSR_C:          parseInt( '11101', 2 ),
+                               DSRW_:          parseInt( '11110', 2 ),
+                               DSRWC:          parseInt( '11111', 2 ),
+                               CREATE:         1,
+                               WRAITE:         2,
+                               RENAME:         4,
+                               SORT:           8,
+                               DELETE:         16
+                       },
+                       EVENT: {
+                               UPDATE_ATTRIVUTE:       'onFileUpdate',
+                               GET_SEQENTIAL_FILES:'gotSeqentilFiles'
+                       },
+                       DATA_PROPERTY_RESERVED: [
+                               'children', 'driver', 'state', 'type'
+                       ]                       
+               },
+               TREE: {
+                       EVENT: {
+                               UPDATE:                         'onTreeUpdate'
+                       }
+               },
+               KEY: {
+                       EVENT: {
+                               KEY_DOWN:                       'keydown',
+                               KEY_UP:                         'keyup',
+                               KEY_CHANGE:                     'keychange',
+                               CURSOL:                         'cursol'
+                       }
+               },
+               APP: {
+                       TYPE: {
+                               GENERAL : 0,
+                               OVERLAY : 1,
+                               PAGE    : 2
+                       }
+               }
+       };
+
+var EX = ( function(){
+       var F = new Function();
+       
+       function clone( src ){
+               var ret;
+               if( Type.isArray(src) === true ){
+                       ret = [];
+               } else
+               if( Type.isObject(src) === true ){
+                       ret = {};
+               } else
+               if( Type.isNumber(src) === true || Type.isString(src) === true || Type.isBoolean( src ) === true ){
+                       return src;
+               } else {
+                       return null;
+               };
+               for( var key in src ){
+                       ret[ key ] = clone( src[ key ]);
+               };
+               return ret;
+       };
+       
+       return {
+               extend: function( base, extend ){
+                       F.prototype = base;
+                       var ret = new F;
+                       for( var p in extend ){
+                               ret[ p ] = extend[ p ];
+                       };
+                       return ret;
+               },
+               clone: function( obj ){
+                       return clone( obj );
+               },
+               kill: function(){
+                       var self = this, v;
+                       for( var p in s ){
+                               if( self.hasOwnProperty && !self.hasOwnProperty( p ) ) continue;
+                               v = self[ p ];
+                               v && v instanceof TicketBase && self.kill();
+                               delete self[ p ];
+                       }
+               }
+       }
+})();
+
+var TicketBase = function(){
+       this.kill = function(){
+               var t = this, v;
+               for( var p in t ){
+                       if( t.hasOwnProperty && !t.hasOwnProperty( p ) ) continue;
+                       v = t[ p ];
+                       v && v instanceof TicketBase && v.kill();
+                       delete t[ p ];
+               }
+       };
+};
+
+
+
+/* --------------------------------------------------------------
+ * System Timer
+ * 
+ */
+
+var SystemTimer = ( function(){
+       var setTimeout    = window.setTimeout;
+       var clearTimeout  = window.clearTimeout;
+       var INTERVAL_TIME = 16;
+       var TICKET_LIST   = [];
+       var timerId       = undefined;
+       var next          = 0;
+       
+       function loop(){
+           for( var i = 0; i < TICKET_LIST.length; ) {
+               if( TICKET_LIST[ i ].call( next ) !== false ) ++i;
+           };
+           timerId = undefined;
+           update();
+       };
+       function update(){
+               var l = TICKET_LIST.length,
+                       n = 99999999,
+                       c;
+               if( l === 0 ){
+                       timerId !== undefined && clearTimeout( timerId );
+                       timerId = undefined;
+                       return;
+               };
+           for( var i = 0; i<l; i++ ){
+               c = TICKET_LIST[ i ].count;
+               if( n > c ) n = c;
+           };
+           if( next > n || timerId === undefined ){
+               timerId !== undefined && clearTimeout( timerId );
+               timerId = setTimeout( loop, INTERVAL_TIME * n );
+               next = n;
+           };
+       };
+       
+       var TimerTicketClass = function( _apiuser, _callback, _time, _once ){
+               this.apiuser  = _apiuser;
+               this.callback = _callback;
+               this.time     = _time;
+               this.count    = _time;
+               this.once     = _once;
+               _apiuser = _callback = null;
+       };
+       TimerTicketClass.prototype = new TicketBase();
+       TimerTicketClass.prototype.call = function( c ){
+               this.count -= c;
+               if( this.count <= 0 ){
+                       this.callback();
+                       if( this.once === true ){
+                               this.destroy();
+                               TICKET_LIST.splice( Util.getIndex( TICKET_LIST, this ), 1 );
+                               return false;
+                       } else {
+                               this.count = this.time;
+                       };
+               };
+       };
+       TimerTicketClass.prototype.destroy = function( _apiuser, _callback ){
+               if( _apiuser  && _apiuser  !== this.apiuser )  return false;
+               if( _callback && _callback !== this.callback ) return false;
+               
+               this.kill();
+               return true;
+       };
+       
+       return {
+               add: function( _apiuser, _handler, _time, _once ){
+                       if( Type.isNumber( _time ) === false || _time < INTERVAL_TIME ) _time = INTERVAL_TIME;
+                       
+                   var _ticket = new TimerTicketClass( _apiuser, _handler, Math.ceil( _time / INTERVAL_TIME ), _once );
+                   TICKET_LIST.push( _ticket );
+                   
+                   update();
+               },
+               remove: function( _apiuser, _handler ){
+                       var _ticket,
+                               i = 0;
+                       while( _ticket = TICKET_LIST[ i ] ){
+                               if( _ticket.destroy( _apiuser, _handler ) === true ){
+                                       TICKET_LIST.splice( i, 1 );
+                               } else {
+                                       ++i;
+                               };
+                       };
+                   update();
+               }
+       }
+})();
+
+/* --------------------------------------------------------------
+ * Async Callback
+ * 
+ */
+var AsyncCall = ( function(){
+       var CALLBACK_LIST = [];
+
+       var CallbackTicketClass = function( _apiuser, _callback, _argments, _thisObject ){
+               this.apiuser    = _apiuser;
+               this.callback   = _callback;
+               this.argments   = _argments;
+               this.thisObject = _thisObject;
+       };
+       CallbackTicketClass.prototype = new TicketBase();
+       CallbackTicketClass.prototype.call = function(){
+               var f = this.callback,
+                       a = this.argments,
+                       t = this.thisObject;
+               this.destroy();
+               if( Type.isArray( a ) === true ){
+                       f.apply( t, a );
+               } else {
+                       f.call( t, a );
+               };
+       };
+       CallbackTicketClass.prototype.destroy = function( _apiuser, _callback ){
+               if( _apiuser  && _apiuser  !== this.apiuser ) return false;
+               if( _callback && _callback !== this.callback ) return false;
+               
+               this.kill();
+               return true;
+       };
+
+       function dispatch(){
+               var _ticket = CALLBACK_LIST.shift();
+               if( _ticket ){
+                       _ticket.call();
+                       CALLBACK_LIST.length !== 0 && SystemTimer.add( SUPER_USER_KEY, dispatch, 1, true );
+               };
+       };
+
+       return {
+               add: function( _apiuser, _callback, _argments, _thisObject ){
+                       CALLBACK_LIST.length === 0 && SystemTimer.add( SUPER_USER_KEY, dispatch, 1, true );
+                       CALLBACK_LIST.push( new CallbackTicketClass( _apiuser, _callback, _argments, _thisObject || _apiuser ) );
+               },
+               remove: function( _apiuser, _callback ){
+                       var _ticket,
+                               i = 0;
+                       while( _ticket = CALLBACK_LIST[ i ] ){
+                               if( _ticket.destroy( _apiuser, _callback ) === true ){
+                                       CALLBACK_LIST.splice( i, 1 );
+                               } else {
+                                       ++i;
+                               };
+                       };
+               }
+       };
+})();
+
+/* -----------------------------------------------------------
+ * 画像一覧は
+ *     お気に入り画像一覧 > tag:ペン次郎 > ペン次郎:笑う
+ *  最近アップロードされた画像 > images
+ *  最近使われた画像 > images
+ *  キャラクター画像庫 > アニマル系 > tag:ペン次郎 > ペン次郎:笑う
+ *  風景画像庫 >
+ *  効果画像庫 >
+ *  アイテム画像庫 >
+ *  
+ * 画像一覧を読み込むタイミング
+ */
+var File = ( function(){
+       var DRIVER_LIST             = [];
+       
+       var FILE_TYPE_IS_FOLDER     = Const.FILE.TYPE.FOLDER,
+               numFileType             = Const.FILE.TYPE.XML,
+               FILEDATA_RESITER        = [],                   // store all of fileData( json object )
+               FILEDATA_ACCESS         = [],                   // file operations for Kernel only ! hide from Out of File
+               FILE_OBJECT_POOL        = [],
+               EVENT_LISTENER_REGISTER = [],
+               TREE_ARRAY              = [],
+               TREE_ACCESS_ARRAY       = [];
+       
+       var REQUEST_CONTROLER = ( function(){
+               var REQUEST_TICKET_RESISTER = [],
+                       currentTicket           = null,
+                       currentData             = null,
+                       DATA_TYPE_ARRAY         = 'json,xml,html,text'.split( ','),
+                       DATA_IS_JSON            = 0,
+                       DATA_IS_XML             = 1,
+                       DATA_IS_HTML            = 2,
+                       DATA_IS_TEXT            = 3,
+                       numError                = 0;
+               
+               var RequestTicketClass = function( _apiuser, _type, _data, _url, _onLoad, _onError ){
+                       this.apiuser = _apiuser;
+                       this.type    = _type;
+                       this.data    = _data;
+                       this.url     = _url;
+                       this.onLoad  = _onLoad;
+                       this.onError = _onError;
+                       this.state   = 0;
+                       _apiuser = _type = _data = _onLoad = _onError = null;
+               };
+               RequestTicketClass.prototype = new TicketBase();
+               RequestTicketClass.prototype.load = function( _data ){
+                       AsyncCall.add( this.apiuser, this.onLoad, [ this.data, _data ] );
+               };
+               RequestTicketClass.prototype.error = function(){
+                       AsyncCall.add( this.apiuser, this.onError, this.data );
+               };
+               
+               function request(){
+                       if( currentTicket !== null || REQUEST_TICKET_RESISTER.length === 0 ) return;
+                       currentTicket = REQUEST_TICKET_RESISTER.shift();
+                       $.ajax({
+                               url:            currentTicket.url,
+                               dataType:       DATA_TYPE_ARRAY[ currentTicket.type ],
+                               success:        onSuccess,
+                               error:          onError
+                       });
+               };
+               function onSuccess( _data ){
+                       currentTicket.load( _data );
+                       currentTicket.kill();
+                       currentTicket = null;
+                       request();
+               };
+               function onError(){
+                       ++numError;
+                       currentTicket.error();
+                       currentTicket.kill(); // retry
+                       currentTicket = null;
+                       request();
+               };
+
+               return {
+                       getNumTask: function(){
+                               return REQUEST_TICKET_RESISTER.length;
+                       },
+                       getNumError: function(){
+                               return numError;
+                       },
+                       getJson: function( _apiuser, _data, _url, _onLoad, _onError ){
+                               REQUEST_TICKET_RESISTER.push( new RequestTicketClass( _apiuser, DATA_IS_JSON, _data, _url, _onLoad, _onError ));
+                               currentTicket === null && request();
+                       }
+               };
+       })();
+
+       var FILE_CONTROLER = {
+               createTree: function( _apiuser, _rootFileData ){
+                       var _tree = new TreeClass( _apiuser, _rootFileData );
+                       TREE_ARRAY.push( _tree );
+                       return _tree;
+               },
+               getFileUID: function( FILEDATAorFILE ){
+                       if( FILEDATAorFILE instanceof FileClass ){
+                               return FILEDATAorFILE.getUID();
+                       };
+                       
+                       var uid = Util.getIndex( FILEDATA_RESITER, FILEDATAorFILE );
+                       if( uid === -1 ){
+                               uid = FILEDATA_RESITER.length;
+                               FILEDATA_RESITER.push( FILEDATAorFILE );
+                       };
+                       return uid;
+               },
+               getFileDataAccess: function( UIDorFILEorFILEDATA ){
+                       var _uid, _data = FILE_CONTROLER.getFileData( UIDorFILEorFILEDATA ), _access;
+
+                       if( _data === null || typeof _data !== 'object' ) return null;
+                       for( var i=0, l = FILEDATA_ACCESS.length; i<l; ++i ){
+                               _access = FILEDATA_ACCESS[ i ];
+                               if( _access.DATA === _data ) return _access;
+                       };
+                       return null;
+               },      
+               getFileData: function( UIDorFILEorFILEDATA ){
+                       if( typeof UIDorFILEorFILEDATA === 'number' ){
+                               return FILEDATA_RESITER[ UIDorFILEorFILEDATA ] || null;
+                       } else
+                       if( UIDorFILEorFILEDATA instanceof FileClass ){
+                               return FILEDATA_RESITER[ UIDorFILEorFILEDATA.getUID() ] || null;
+                       } else
+                       if( Util.getIndex( FILEDATA_RESITER, UIDorFILEorFILEDATA ) !== -1 ){
+                               return UIDorFILEorFILEDATA;
+                       };
+                       return null;
+               },
+               getChildren: function( UIDorFILEorFILEDATA ){
+                       var _data = FILE_CONTROLER.getFileData( UIDorFILEorFILEDATA );
+                       return _data !== null ? _data.children || null : null;
+               },
+               getDriver: function( _file ){
+                       var _data = FILE_CONTROLER.getFileData( _file );
+                       return _data !== null && _data.driver ? _data.driver : BASE_DRIVER;
+               },
+               getUpdateFlag: function( _file, _bit ){
+                       var _driver = FILE_CONTROLER.getDriver( _file ),
+                               _policy;
+                       if( typeof _driver.getUpdatePolicy === 'function' ){
+                               _policy = _driver.getUpdatePolicy( _file );
+                               
+                       }
+                       if( typeof _policy !== 'number' ) {
+                               _policy = BASE_DRIVER.getUpdatePolicy( _file )
+                       }
+                       return _policy % ( _bit * 2 ) >= _bit;
+               },
+               move: function( _prentUID, _targetfile, _newFolder, _newIndex, _opt_callback ){
+                       var _parentData = FILE_CONTROLER.getFileDataAccess( _prentUID ),
+                               _parentType = _parentData.TYPE,
+                               _targetData = FILE_CONTROLER.getFileDataAccess( _targetfile ),
+                               _targetType = _targetData.TYPE;
+               },
+               replace: function( _uid, _file, _newIndex ){
+                       
+               },
+               addEventListener: function( FILEorNULL, _eventType, _callback, opt_thisObject ){
+                       var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL;
+                       EVENT_LISTENER_REGISTER.push( new FileEventTicketClass( _uid, _eventType, _callback, opt_thisObject ));
+               },
+               removeEventListener: function( FILEorNULL, _eventType, _callback ){
+                       var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL,
+                               _ticket;
+                       for(var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i ){
+                               _ticket = EVENT_LISTENER_REGISTER[ i ];
+                               if( _ticket.fileUID === _uid && _ticket.eventType === _eventType && _ticket.callBack === _callback ){
+                                       EVENT_LISTENER_REGISTER.splice( i, 1 );
+                                       _ticket.kill();
+                               };
+                       };
+               },
+               getTreeAccess: function(){
+                       
+               },
+               fileEventRellay: function( _uid, _event ){
+                       var _fileAccess = FILE_CONTROLER.getFileDataAccess( _uid );
+                       if( _fileAccess === null ) return;
+                       var _treeUID    =  _fileAccess.TREE.getUID(),
+                               _treeAccess = TREE_ACCESS_ARRAY[ _treeUID ],
+                               _data       = _fileAccess.DATA,
+                               _tree;
+                       if( !_treeAccess ) return;
+                       _treeAccess.dispatchFileEvent( _event );
+                       for( var i=0, l = TREE_ARRAY.length; i<l; ++i ){
+                               if( i !== _treeUID ){
+                                       _tree = TREE_ARRAY[ i ];
+                                       if( FILE_CONTROLER.getFileData( _tree.getCurrentFile() ) === _data ){
+                                               _treeAccess = TREE_ACCESS_ARRAY[ _tree.getUID() ];
+                                               _treeAccess && _treeAccess.dispatchFileEvent( _event );
+                                       };
+                               };
+                       };
+               }
+       };
+       
+       var TreeClass = function( apiuser, rootFileData ){
+               var PARENT_FILE_RESITER = [],
+                       ACCESS = {
+                               apiuser          : apiuser,
+                               dispatchFileEvent: dispatchFileEvent
+                       },
+                       EVENT_LISTENER_ARRAY = [],
+                       instance             = this,
+                       rootFile             = new FileClass( instance, null, rootFileData ),
+                       currentFile          = rootFile;
+               
+               currentFile.getSeqentialFiles();
+               TREE_ACCESS_ARRAY.push( ACCESS );
+               
+               function dispatchFileEvent( e ){
+                       var _eventType  = e.eventType,
+                               _targetFile = e.targetFile,
+                               _uid        = _targetFile.getUID(),
+                               _ticket, _type, _callback;
+                       for( var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i ){
+                               _ticket   = EVENT_LISTENER_REGISTER[ i ];
+                               _type     = _ticket.eventType;
+                               _callback = _ticket.callBack;
+                               if( _eventType === _type && _uid === _ticket.fileUID ){
+                                       AsyncCall.add( apiuser, _callback, [ _eventType, _targetFile, e.key, e.value ], _ticket.thisObject || _targetFile );
+                               } else
+                               if( _type === Const.TREE.EVENT.UPDATE && _eventType === Const.FILE.EVENT.GET_SEQENTIAL_FILES ){
+                                       //_callback( _eventType, _targetFile );
+                                       AsyncCall.add( apiuser, _callback, [ _eventType, _targetFile ], _ticket.thisObject || instance );
+                               };
+                       };
+               };
+               
+               this.getUID = function(){
+                       return Util.getIndex( TREE_ACCESS_ARRAY, ACCESS );
+               };
+               this.getRootFile = function(){
+                       return rootFile;
+               };
+               this.getCurrentFile = function(){
+                       return currentFile;
+               };
+               this.hierarchy = function(){
+                       return PARENT_FILE_RESITER.length;
+               };
+               this.getParentFileAt = function( _index ){
+                       var l = PARENT_FILE_RESITER.length;
+                       if( typeof _index !== 'number' || _index < 0 || _index >= l ) return null;
+                       return PARENT_FILE_RESITER[ l -1 -_index ];
+               };
+               this.down = function( _index ){
+                       if( typeof _index !== 'number' || _index < 0 || _index >= currentFile.getChildFileLength()) return;
+                       PARENT_FILE_RESITER.unshift( currentFile );
+                       currentFile = currentFile.getChildFileByIndex( _index );
+                       currentFile.getSeqentialFiles();
+                       return currentFile;
+               };
+               this.up = function( _index ){
+                       var l = PARENT_FILE_RESITER.length;
+                       if( l === 0 ) return null;
+                       
+                       if( currentFile ){
+                               var _currentFile = currentFile;
+                               currentFile = null;
+                               _currentFile.destroy();
+                       };
+                       if( typeof _index === 'number' ){
+                               if( _index >= l ) return null;
+                               currentFile = this.getParentFileAt( _index );
+                               PARENT_FILE_RESITER.splice( 0, l -_index);
+                       } else {
+                               currentFile = PARENT_FILE_RESITER.shift();
+                       };
+                       currentFile.getSeqentialFiles();
+                       return currentFile;     
+               };
+               this.addTreeEventListener = function( _eventType, _callback, opt_thisObject ){
+                       FILE_CONTROLER.addEventListener( null, _eventType, _callback, opt_thisObject );
+               };
+               this.removeTreeEventListener = function( _eventType, _callback ){
+                       FILE_CONTROLER.removeEventListener( null, _eventType, _callback );
+               };
+               this.destroy = function( _apiuser ){
+                       if( _apiuser && apiuser !== _apiuser ) return false;
+                       // removeEvent
+                       var _currentFile = currentFile;
+                       currentFile = rootFile = rootFileData = null;
+                       // currentFile, rootFile を null にしないと .File.destroy() ができない.
+                       _currentFile.destroy();
+                       while( PARENT_FILE_RESITER.length > 0 ){
+                               _currentFile = PARENT_FILE_RESITER.shift();
+                               _currentFile.destroy();
+                       };
+                       
+                       AsyncCall.remove( apiuser );
+                       instance = apiuser = null;
+                       return true;
+               };
+       };
+
+       var FileEventTicketClass = function( uid, eventType, callback, opt_thisObject ){
+               this.fileUID    = uid;
+               this.eventType  = eventType;
+               this.callBack   = callback;
+               this.thisObject = opt_thisObject;
+       };
+       FileEventTicketClass.prototype = new TicketBase();
+       
+       var FileEventClass = function( eventType, file, key, value ){
+               this.eventType        = eventType;
+               this.targetFile       = file;
+               this.updatedAttribute = key;
+               this.updatedValue     = value;
+       };
+
+/*
+ * file の data は object で保持している。
+ * File の外からファイルをみるときは、FileClassを通して操作する。
+ * fileの変更、それに付随して追加されたイベントは、TreeClassで管理される。
+ * treeがdestryされると、fileのイベントリスナーも全て削除される。
+ * 他の tree も data の共通する currentFile に対してのみは、file の変更イベントを受け取って流す.
+ * 
+ */
+       
+       var FileClass = function( tree, parentData, data ){
+               var uid = FILE_CONTROLER.getFileUID( data );
+               
+               FILEDATA_ACCESS.push( {
+                       TREE:                           tree,
+                       parentData:                     parentData,
+                       DATA:                           data
+               } );
+               
+               tree = parentData = data = null;
+
+               this.getUID = function(){
+                       return uid;
+               }
+       };
+       
+       FileClass.prototype = {
+               isChildFile: function( _FILEorFILEDATA ){
+                       return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
+               },
+               getSeqentialFiles: function(){
+                       var _driver = FILE_CONTROLER.getDriver( this );
+                       if( _driver !== null && typeof _driver.getSeqentialFiles === 'function' ){
+                               _driver.getSeqentialFiles( this );
+                       }
+               },
+               addEventListener: function( _eventType, _callback ){
+                       FILE_CONTROLER.addEventListener( this, _eventType, _callback );
+               },
+               removeEventListener: function( _eventType, _callback ){
+                       FILE_CONTROLER.removeEventListener( this, _eventType, _callback );
+               },
+               dispatchEvent: function( e ){
+                       e instanceof FileEventClass && FILE_CONTROLER.fileEventRellay( this.getUID(), e );
+               },
+               getChildFileLength: function(){
+                       var children = FILE_CONTROLER.getChildren( this );
+                       return Type.isArray( children ) === true ? children.length : -1;
+               },
+               getChildFileIndex: function( _FILEorFILEDATA ){
+                       var children = FILE_CONTROLER.getChildren( this );
+                       if( Type.isArray( children ) === false ) return -1;
+                       var l = children.length,
+                               _fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA );
+                       if( _fileData === null ) return -1;
+                       for( var i=0; i<l; ++i ){
+                               if( children[ i ] === _fileData ) return i;
+                       }
+                       return -1;
+               },
+               getChildFileByIndex: function( _index ){
+                       var _access = FILE_CONTROLER.getFileDataAccess( this ),
+                               _children = FILE_CONTROLER.getChildren( this );
+                       if( typeof _index !== 'number' || _index < 0 || Type.isArray( _children ) === false || _index >= _children.length) return null;
+                       var _file = new FileClass( _access.TREE, _access.DATA, _children[ _index ]);
+                       // _file.init();
+                       return _file;
+               },
+               getName: function(){
+                       var driver = FILE_CONTROLER.getDriver( this );
+                       if( typeof driver.getName === 'function'){
+                               return driver.getName( this );
+                       }
+                       return BASE_DRIVER.getName( this);
+               },
+               getThumbnail: function(){
+                       var driver = FILE_CONTROLER.getDriver( this );
+                       if( typeof driver.getThumbnail === 'function'){
+                               return driver.getThumbnail( this );
+                       }
+                       return BASE_DRIVER.getThumbnail( this );
+               },
+               getType: function(){
+                       var _data = FILE_CONTROLER.getFileData( this );
+                       return typeof _data.type === 'number' ? _data.type : Const.FILE.TYPE.UNKNOWN;
+               },
+               getState: function(){
+                       var _data = FILE_CONTROLER.getFileData( this );
+                       return typeof _data.state === 'number' ? _data.state : Const.FILE.STATE.OK;
+               },
+               getSummary: function(){
+                       var driver = FILE_CONTROLER.getDriver( this );
+                       if( typeof driver.getSummary === 'function'){
+                               return driver.getSummary( this );
+                       }
+                       return BASE_DRIVER.getSummary( this );
+               },
+               isWritable: function(){
+                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.WRITE );
+               },
+               isSortable: function(){
+                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.SORT );
+               },              
+               isCreatable: function(){
+                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.CREATE );
+               },
+               isRenamable: function(){
+                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.RENAME );
+               },
+               isDeletable: function(){
+                       return FILE_CONTROLER.getUpdateFlag( this, Const.FILE.UPDATE_POLICY.DELETE );
+               },
+               read: function(){
+                       // simpleDeepCopy
+                       var driver = FILE_CONTROLER.getDriver( this ),
+                               data;
+                       if( typeof driver.read === 'function'){
+                                data = driver.read( this );
+                       }
+                       return BASE_DRIVER.read( data || this );
+               },
+               write: function( _newData, _onUpdateFunction ){
+                       var driver = FILE_CONTROLER.getDriver( this );
+                       if( typeof driver.write === 'function'){
+                               return driver.write( this, _newData, _onUpdateFunction );
+                       }
+                       return BASE_DRIVER.write( this, _newData, _onUpdateFunction );
+               },
+               viewerApplicationList: function(){
+                       var driver = FILE_CONTROLER.getDriver( this );
+                       if( typeof driver.viewerApplicationList === 'function'){
+                               return driver.viewerApplicationList( this );
+                       }
+                       return BASE_DRIVER.viewerApplicationList( this );
+               },
+               editorApplicationList: function(){
+                       var driver = FILE_CONTROLER.getDriver( this );
+                       if( typeof driver.editorApplicationList === 'function'){
+                               return driver.editorApplicationList( this );
+                       }
+                       return BASE_DRIVER.viwerApps( this );
+               },
+               create: function(){
+                       
+               },
+               sort: function(){
+                       
+               },
+               onCopy: function(){
+                       
+               },
+               onDelete: function(){
+                       
+               },
+               move: function( _newFolder, _newIndex, opt_callback ){
+                       var _access = FILE_CONTROLER.getFileDataAccess( this );
+                       _access.TREE.move( _access.parentData, this.getUID(), _newFolder, _newIndex, opt_callback );
+               },
+               replace: function( _newIndex, opt_callback ){
+                       var _access = FILE_CONTROLER.getFileDataAccess( this );
+                       _access.TREE.replace( _access.parentData, this.getUID(), _newIndex, opt_callback);
+               },
+               /**
+                * サーチ
+                * 探しているファイルの属性と値を指定.一致する child の index を配列で返す.
+                */
+               search: function( obj, rule ){
+                       var _children = FILE_CONTROLER.getChildren( this ),
+                               _child,
+                               ret = [], k, c;
+                       for( var i=0, l=_children.length; i<l; ++i ){
+                               _child = _children[ i ];
+                               c = true;
+                               for( k in obj ){
+                                       if( obj[ k ] !== _child[ k ] ){
+                                               c = false;
+                                               break;
+                                       }
+                               }
+                               c === true && ret.push( i );
+                       }
+                       return ret;
+               },
+               destroy: function(){
+                       var _access = FILE_CONTROLER.getFileDataAccess( this );
+                       var _tree = _access.TREE;
+                       if( _tree.getCurrentFile() === this ) return;
+                       if( _tree.getRootFile() === this ) return;
+                       for( var i=0, l = _tree.hierarchy(); i<l; ++i ){
+                               if( _tree.getParentFileAt( i ) === this ){
+                                       return;
+                               }
+                       }
+                       var _index = Util.getIndex( FILEDATA_ACCESS, _access );
+                       if( _index === -1 ) return;
+                       // event の 削除
+                       FILEDATA_ACCESS.splice( _index, 1 );
+                       delete _access.DATA;
+                       delete _access.TREE;
+                       delete _access.parentData;
+               }
+       }
+
+       /*
+        * FileDriverBase
+        */
+       var FileDriverBase = function( driverClass ){
+               this.getUID = function(){
+                       return Util.getIndex( API_USER_LIST, driverClass );
+               };
+               this.getSeqentialFiles = function( _file ){
+               };
+               this.getName = function( _file ){
+                       var _data = FILE_CONTROLER.getFileData( _file );
+                       return _data.name || 'No Name';
+               };
+               this.getThumbnail = function( _file ){
+                       var _data = FILE_CONTROLER.getFileData( _file ),
+                               _type = _data.type,
+                               _className = '';
+                       if( _type === Const.FILE.TYPE.FOLDER ){
+                               _className = 'folder';
+                       } else
+                       if( _type === Const.FILE.TYPE.IMAGE ){
+                               
+                       } else
+                       if( _type === Const.FILE.TYPE.TEXT ){
+                               
+                       } else
+                       if( _type === Const.FILE.TYPE.HTML ){
+                               
+                       } else
+                       if( _type === Const.FILE.TYPE.CSV ){
+                               
+                       } else
+                       if( _type === Const.FILE.TYPE.JSON ){
+                               
+                       } else
+                       if( _type === Const.FILE.TYPE.XML ){
+                               
+                       };
+                       return {
+                               image:          null,
+                               className:      ' file-type-' + _className
+                       };
+               };
+               this.getSummary = function( _file ){
+                       var _data = FILE_CONTROLER.getFileData( _file ),
+                               _type = _data.type;
+                       if( _type === Const.FILE.TYPE.FOLDER ){
+                               return 'folder';
+                       } else
+                       if( _type === Const.FILE.TYPE.IMAGE ){
+                               return 'image file';
+                       } else
+                       if( _type === Const.FILE.TYPE.TEXT ){
+                               return 'text file';
+                       } else
+                       if( _type === Const.FILE.TYPE.HTML ){
+                               return 'html document file';
+                       } else
+                       if( _type === Const.FILE.TYPE.CSV ){
+                               return 'csv daat file';
+                       } else
+                       if( _type === Const.FILE.TYPE.JSON ){
+                               return 'json data file';
+                       } else
+                       if( _type === Const.FILE.TYPE.XML ){
+                               return 'xml data file';
+                       }
+                       return '';
+               };
+               this.getUpdatePolicy = function( _file ){
+                       // debug用 全てのメニューを許可
+                       return Const.FILE.UPDATE_POLICY.DSRWC;
+               };
+               this.read = function( _FILEorDATA ){
+                       var data,
+                               protects = Const.FILE.DATA_PROPERTY_RESERVED;                   
+                       if( _FILEorDATA instanceof FileClass ){
+                               data = FILE_CONTROLER.getFileData( _FILEorDATA )
+                       } else {
+                               data = _FILEorDATA;
+                       }
+
+                       function clone( src ) {
+                               var ret;
+                               if( Type.isArray(src) === true ){
+                                       ret = [];
+                               } else
+                               if( Type.isObject(src) === true ){
+                                       ret = {};
+                               } else
+                               if( Type.isNumber(src) === true || Type.isString(src) === true || Type.isBoolean( src ) === true ){
+                                       return src;
+                               } else {
+                                       return null;
+                               }
+                               for( var key in src ){
+                                       if( Util.getIndex( protects, key ) === -1 ){
+                                               ret[ key ] = clone( src[ key ]);
+                                       }
+                               }
+                               return ret;
+                       };
+                               
+                       return clone( data );
+               };
+               this.write = function( _file, _newData, _onUpdateFunction ){
+                       var _data = FILE_CONTROLER.getFileData( _file ),
+                               _type = _data.type;
+                       return false;
+               };
+               this.viewerApplicationList = function(){
+                       return [];
+               };
+               this.editorApplicationList = function(){
+                       return [];
+               };
+               this.onCreate = function(){
+                       
+               };
+               this.onSort = function(){
+                       
+               };
+               this.onCopy = function(){
+                       
+               };
+               this.onDelete = function(){
+                       
+               };
+       }
+       
+       var BASE_DRIVER   = new FileDriverBase();
+       
+       var ROOT_FILEDATA = {
+                       name:           'system root',
+                       type:           FILE_TYPE_IS_FOLDER,
+                       children:       []
+               },
+               SYSTEM_TREE = FILE_CONTROLER.createTree( SUPER_USER_KEY, ROOT_FILEDATA ),
+               ROOT_FILE   = SYSTEM_TREE.getRootFile();
+
+       function createFileTypeID(){
+               return ++numFileType;
+       }
+       
+       var FileAPIClass = function( driver ){
+               var constObject;
+               this.createFolderUnderRoot = function( _fileData ){
+                       if( _fileData !== null && Type.isObject( _fileData ) === true ){
+                               ROOT_FILEDATA.children.push( _fileData );
+                               ROOT_FILE.dispatchEvent( new FileEventClass( Const.FILE.EVENT.GET_SEQENTIAL_FILES, ROOT_FILE, 'children', null ));
+                       }
+               };
+               this.createFileEvent   = function( _eventType, _file, _key, _value ){
+                       return new FileEventClass( _eventType, _file, _key, _value );
+               };
+               this.createFileTypeID  = createFileTypeID;
+               this.getFileDataAccess = FILE_CONTROLER.getFileDataAccess;
+               this.getFileData       = FILE_CONTROLER.getFileData;
+               this.getJson           = function( _data, _url, _onLoad, _onError ){
+                       REQUEST_CONTROLER.getJson( driver, _data, _url, _onLoad, _onError );
+               };
+               this.createTree        = function( _rootFile ){
+                       return FILE_CONTROLER.createTree( driver, _rootFile );
+               };
+               this.isTreeInstance    = function( _tree ){
+                       return _tree instanceof TreeClass;
+               };
+               this.isFileInstance    = function( _file ){
+                       return _file instanceof FileClass;
+               };
+               this.isFileEvent       = function( _event ){
+                       return _event instanceof FileEventClass;
+               };
+               this.getConst          = function(){
+                       return Const; // constObject = constObject || clone( Const )
+               };
+       }
+       
+       return {
+               registerDriver: function( _class ){
+                       _class.prototype = new FileDriverBase( _class );
+                       var _driver = new _class();
+                       
+                       DRIVER_LIST.push( _driver );
+                       API_USER_LIST.push( _class );
+
+                       return new FileAPIClass( _driver );
+               },
+               isDriver: function( _driver ){
+                       return _driver instanceof FileDriverBase;
+               },
+               isTreeInstance: function( _tree ){
+                       return _tree instanceof TreeClass;
+               },
+               isFileInstance: function( _file ){
+                       return _file instanceof FileClass;
+               }
+       }
+})();
+
+
+/* ----------------------------------------------------
+ * ApplicationManager
+ * window resize event, overlayApplication currentAplication に流す
+ */    
+
+var APPLICATION_LIST = [];
+
+var AbstractBasicPane = function(){
+       var instance    = null;
+       this.MIN_WIDTH  = 240;
+       this.MIN_HEIGHT = 240;
+       this.init = function(){
+               instance = this;
+               instance.onInit();
+       };
+       this.onInit = function(){};
+       this.resize = function( _w, _h ){
+               if( instance.MIN_WIDTH > _w || instance.MIN_HEIGHT > _h ){
+                       if( Type.isHTMLElement( instance.rootElement ) === true ){
+                               // 小さすぎる!、と表示
+                       };
+                       return;
+               };
+               instance.onPaneResize( _w, _h );
+       };
+       this.onPaneResize = function( _w, _h ){};
+       this.close = function(){
+               instance.onClose();
+               instance = this;
+       };
+};
+
+var AbstractApplication = function( displayName, appClass, isOverlay ){
+       var self          = null, // init で設定
+               uiList        = [],
+               finderList    = [],
+               layer         = null,
+               root          = null,
+               fetchResource = 0,
+               bootParams    = null,
+               phase         = 0,
+               cursor        = '';
+       this.rootElement = document.createElement( 'div' );
+       this.bgColor     = '#C1CACF';
+       this.getUID = function(){
+               return Util.getIndex( API_USER_LIST, appClass );
+       };
+       this.init = function(){
+               phase = 1;
+               self  = this;
+               appClass === Page.appClass && Page.show();
+               self.onInit();
+               layer !== null && layer.start();
+               phase = 2;
+       };
+       this.open = function( _w, _h /*, _option */ ){
+               phase = 3;
+               bootParams = Util.copyArray( arguments );
+               
+               if( this.rootElement.innerHTML && this.rootElement.innerHTML.length > 0 ){
+                       SystemTimer.add( self, detect, 16 );
+               } else {
+                       onOpen();
+               };
+               
+               function detect(){
+                       if( self.rootElement.firstChild && fetchResource === 0 ){
+                               SystemTimer.remove( self, detect );
+                               onOpen();
+                       };
+               };
+               
+               function onOpen(){
+                       self.rootElement.style.display = '';
+                       
+                       layer !== null && layer.onResize( _w, _h );
+                       
+                       if( self.MIN_WIDTH > _w || self.MIN_HEIGHT > _h ){
+                               if( Type.isHTMLElement( self.rootElement ) === true ){
+                                       // 小さすぎる!、と表示
+                               };
+                       };
+                       if( bootParams.length > 2 ){
+                               self.onOpen.apply( self, bootParams );
+                       } else {
+                               self.onOpen( _w, _h );
+                       };
+                       phase = 4;                      
+               };
+       };
+       this.resize = function( _w, _h ){
+               if( phase !== 4 ) return;
+               if( self.MIN_WIDTH > _w || self.MIN_HEIGHT > _h ){
+                       if( Type.isHTMLElement( self.rootElement ) === true ){
+                               // 小さすぎる!、と表示
+                       };
+                       return;
+               };
+               self.onPaneResize( _w, _h );
+               layer !== null && layer.onResize( _w, _h );
+       };
+       this.close = function(){
+               phase = 5;
+               if( self.onClose() === false ){
+                       return false;
+               };
+               while( uiList.length > 0 ){
+                       uiList.shift().destroy();
+               };
+               while( finderList.length > 0 ){
+                       finderList.shift().destroy();
+               };              
+               
+               root && PointingDeviceEventTree.destroyTree( root );
+               MouseEvent.remove( self );
+               KeyEvent.remove( self );
+               SystemTimer.remove( self );
+               AsyncCall.remove( self );
+               StyleSheet.unload( self );
+               
+               layer !== null && layer.destroy();
+               layer = null;
+               
+
+               var elm = self.rootElement;
+               Util.removeAllChildren( elm );
+               elm.parentNode.removeChild( elm );
+               self.rootElement = null;
+               
+               Application.shutdown( self, isOverlay );
+               
+               appClass === Page.appClass && Page.hide();
+               
+               self = appClass = uiList = null;
+               
+               phase = 6;
+       };
+       this.createUIGroup = function(){
+               var _ui = UI.createUIGroup( self );
+               uiList.push( _ui );
+               return _ui;
+       };
+       this.createFinder = function( _elmTarget, _tree, _onSelect, _viewerOption, _editorOption ){
+               var _finder = Finder.create( self, _elmTarget, _tree, _onSelect, _viewerOption, _editorOption );
+               finderList.push( _finder );
+               return _finder;
+       };
+       this.createBasicPane = function( _class, _options ){
+               if( Type.isFunction( _class ) === false ) return null;
+               _class.prototype = new AbstractBasicPane();
+               return new _class( _options );
+       };
+       this.createDHTML = function( _elm ){
+               return DHTML.create( self, _elm );
+       };
+       this.addEventListener = function( _element, _eventType, _handler, _opt_thisObject ){
+               if( layer !== null && layer.contain( _element ) === true ){
+                       layer.addEvent( _element, _eventType, _handler, _opt_thisObject );
+               } else {
+                       MouseEvent.add( self, _element, _eventType, _handler, _opt_thisObject );
+               };
+       };
+       this.removeEventListener = function( _element, _eventType, _handler ){
+               if( layer !== null && layer.contain( _element ) === true ){
+                       layer.removeEvent( _element, _eventType, _handler );
+               } else {
+                       MouseEvent.remove( self, _element, _eventType, _handler );
+               };
+       };
+       this.useInteractiveLayer = function( /* handleEvents */ ){
+               if( phase === 1 && layer === null ){
+                       layer = InteractiveLayer.create( self, Util.copyArray( arguments ) );
+                       root  = PointingDeviceEventTree.create( self, layer );
+               };
+       };
+       this.getPointingDeviceEventTreeRoot = function(){
+               return root;
+       };
+       this.createInteractContainer = function( elm ){
+               if( layer !== null ) return layer.createContainer( elm );
+       };
+       this.registerInteractiveListener = function( /*  */ ){
+               layer !== null && layer.register( Util.copyArray( arguments ) );
+       };
+       this.isCurrentInteractiveEventListener = function( listener ){
+               layer !== null && layer.isCurrentListener( listener );
+       };
+       this.updateCoursor = function( _cursor ){
+               if( cursor !== _cursor ){
+                       if( layer ){
+                               layer.elm.style.cursor = cursor = _cursor;
+                       } else {
+                               self.rootElement.style.cursor = cursor = _cursor;
+                       };
+               };
+       };
+       this.fetchCSS = function( _url, opt_onload, opt_onerror ){
+               if( phase === 1 ){
+                       ++fetchResource;
+                       StyleSheet.load( self, _url, fetchResourceComplete, fetchResourceComplete );
+               };
+       };
+       
+       function fetchResourceComplete(){
+               --fetchResource;
+       };
+};
+
+AbstractApplication.prototype = new AbstractBasicPane();
+AbstractApplication.prototype.onInit = function(){
+       // overrride
+};     
+AbstractApplication.prototype.onOpen = function( _w, _h /*, _option */ ){
+       // overrride
+};
+AbstractApplication.prototype.onClose = function(){
+       // overrride
+       return true;
+}; // false の場合、close の拒否 
+AbstractApplication.prototype.addKeyEventListener = function( _eventType, _handler, _keyCode, _shift, _ctrl ){
+       KeyEvent.add( this, _eventType, _handler, _keyCode, _shift, _ctrl );
+};
+AbstractApplication.prototype.removeKeyEventListener = function( _eventType, _handler, _keyCode, _shift, _ctrl ){
+       KeyEvent.remove( this, _eventType, _handler, _keyCode, _shift, _ctrl );
+};
+AbstractApplication.prototype.shiftEnabled = function(){
+       return KeyEvent.shiftEnabled;
+};
+AbstractApplication.prototype.ctrlEnabled = function(){
+       return KeyEvent.ctrlEnabled;
+};
+AbstractApplication.prototype.addTimer = function( handler, time, once ){
+       SystemTimer.add( this, handler, time, !!once );
+};
+AbstractApplication.prototype.removeTimer = function( handler ){
+       SystemTimer.remove( this, handler );
+};
+AbstractApplication.prototype.addAsyncCall = function( _callback, _argments, _thisObject ){
+       AsyncCall.add( this, _callback, _argments, _thisObject );
+};
+AbstractApplication.prototype.removeAsyncCall = function( _callback ){
+       AsyncCall.remove( this, _callback );
+};
+AbstractApplication.prototype.fetchHTMLElement = function( id ){
+       var elm = document.getElementById( id );
+       if( elm ){
+               elm.removeAttribute( 'id' );
+               elm.parentNode.removeChild( elm );
+               return elm;
+       };
+};
+
+
+var InteractiveLayer = ( function(){
+       var LAYER_LIST      = [],
+               currentLayer    = null,
+               currentList     = null,
+               currentListener = null;
+       
+       function eventRellay( e ){
+               var _mouseX   = e.clientX,
+                       _mouseY   = e.clientY,
+                       _type     = e.type === 'mouseout' ? 'mouseup' : e.type,
+                       _listener = currentListener,
+                       i, l;
+               if( _listener !== null && _listener.busy() === true && _listener[ _type ] && _listener[ _type ]( _mouseX, _mouseY, e, _type ) === true ){
+                       // currentListener[ _type ]( _mouseX, _mouseY, e, _type );
+                       // console.log( '** current true : ' + _type + '  ' + Util.getIndex( currentList, _listener ) + ( _listener.id || _listener.elm.id ) );
+               } else {
+                       currentListener = null;
+                       for( i = 0, l = currentList.length; i<l; ++i ){
+                               _listener = currentList[ i ];
+                               if( _listener[ _type ] && _listener[ _type ]( _mouseX, _mouseY, e, _type ) === true ){
+                                       currentListener = _listener;
+                                       // console.log( 'true : currentList.length = ' + l + ' ' + i )
+                                       break;
+                               };
+                       };
+                       
+               };
+               // 文字選択の禁止
+               //!document.selection && window.getSelection().removeAllRanges();
+               return false;
+       };
+       
+       var LayerClass = function( apiuser ){
+               this.apiuser = apiuser;
+       };
+       LayerClass.prototype = {
+               init: function( events ){
+                       this.elm       = document.createElement( 'div' );
+                       body.appendChild( this.elm );
+                       // this.elm.style.cssText = 'position:absolute;top:0;left:0;height:100%;';
+                       this.elm.className    = 'mouse-operation-catcher';
+                       this.elm.unselectable = 'on';
+                       
+                       this.listeners = [];
+                       
+                       if( Type.isString( events ) === true ){
+                               events = events.split( ',' );
+                       } else
+                       if( Type.isArray( events ) === false ){
+                               return;
+                       };
+                       for( var i = events.length; i; ){
+                               MouseEvent.add( this.apiuser, this.elm, events[ --i ], eventRellay );
+                       };
+               },
+               register: function( listener ){
+                       if( Type.isArray( listener ) === false ){
+                               this.listeners.push( listener );
+                       } else {
+                               this.listeners.push.apply( this.listeners, listener );
+                       };
+               },
+               isCurrentListener : function( listener ){
+                       return currentListener === listener;
+               },
+               onResize : function( _w, _h ){
+                       this.elm.style.height = _h + 'px';
+               },
+               contain : function( elm ){
+                       return !!this.getContainer( elm );
+               },
+               getContainer : function( elm ){
+                       var linstener;
+                       for( var i = this.listeners.length; i; ){
+                               linstener = this.listeners[ --i ];
+                               if( linstener instanceof InteractiveContainer ){
+                                       if( linstener.contain( elm ) === true ) return linstener;
+                               };
+                       };
+                       return null;
+               },
+               createContainer : function( elm ){
+                       if( this.contain( elm ) === true ) return null;
+                       var ret = new InteractiveContainer( this.apiuser, elm );
+                       this.listeners.unshift( ret );
+                       return ret;
+               },
+               addEvent : function( element, eventType, handler, _opt_thisObject ){
+                       //console.log( eventType )
+                       currentListener = null;
+                       
+                       var container = this.getContainer( element );
+                       container !== null && container.addEvent( element, eventType, handler, _opt_thisObject );
+                       
+                       MouseEvent.add( this.apiuser, this.elm, eventType, eventRellay );
+               },
+               removeEvent : function( element, eventType, handler ){
+                       currentListener = null;
+                       
+                       var container = this.getContainer( element );
+                       container !== null && container.removeEvent( element, eventType, handler );
+               },
+               start : function(){
+                       currentLayer = this;
+                       currentList  = currentLayer.listeners;
+                       currentLayer.elm.style.display = '';
+               },
+               destroy: function(){
+                       MouseEvent.remove( this.apiuser, this.elm );
+                       body.removeChild( this.elm );
+                       
+                       this.listeners.splice( 0, this.listeners.length );
+                       
+                       LAYER_LIST.splice( Util.getIndex( LAYER_LIST, this ), 1 );
+               }
+       };
+       
+       return {
+               create : function( apiuser, events ){
+                       var ret = new LayerClass( apiuser );
+                       ret.init( events );
+                       LAYER_LIST.push( ret );
+                       return ret;
+               },
+               onCurrentApplicationChange : function( _application ){
+                       for( var i = 0, l = LAYER_LIST.length; i < l; ++i ){
+                               if( LAYER_LIST[ i ].apiuser === _application ){
+                                       currentLayer = LAYER_LIST[ i ];
+                                       currentList  = currentLayer.listeners;
+                                       currentLayer.elm.style.display = '';
+                                       return;
+                               };
+                       };
+                       if( currentLayer ) currentLayer.elm.style.display = 'none';
+                       currentLayer    = null;
+                       currentList     = null;
+                       currentListener = null;                 
+               },
+               onSystemShutdown : function(){
+                       
+               }
+       };
+})();
+
+var InteractiveContainer = function( apiuser, elm ){
+       this.apiuser = apiuser;
+       this.elm     = elm;
+       this.events  = {};
+       this.mesure();
+};
+InteractiveContainer.prototype = {
+       current  : null,
+       addEvent : function( element, eventType, handler, opt_thisObject ){
+               var list = this.events[ eventType ], i;
+               if( !list ){
+                       list = this.events[ eventType ] = [];
+                       this[ eventType ] = this._eventRellay;
+               };
+               for( i = list.length; i; ){
+                       if( list[ --i ].match( element, eventType, handler ) === true ){
+                               return;
+                       };
+               };
+               var ticket = new InterractiveEventTicket( element, eventType, handler, this.elm, opt_thisObject );
+               ticket.init( Position.cumulativeOffset( this.elm ) );
+               list.push( ticket );
+               // AsyncCall.add( this.apiuser, ticket.init, Position.cumulativeOffset( this.elm ), ticket );
+       },
+       removeEvent : function( element, eventType, handler ){
+               var list, i;
+               for( var type in this.events ){
+                       list = this.events[ type ];
+                       if( eventType && eventType !== type ) continue;
+                       if( Type.isArray( list ) === false ) continue;
+                       for( i = list.length; i; ){
+                               if( list[ --i ].match( element, eventType, handler ) === true ){
+                                       list.splice( i, 1 );
+                                       if( list.length === 0 ){
+                                               delete this[ type ];
+                                               delete this.events[ type ];
+                                       };
+                               };
+                       };                      
+               };
+       },
+       mesured : false,
+       mesure : function(){
+               var positon  = Position.cumulativeOffset( this.elm );
+               this.x       = positon[ 0 ];
+               this.y       = positon[ 1 ];
+               this.mesured = true;
+       },
+       asyncMesure : function(){
+               this.mesured === false && this.mesure();
+       },
+       setPositon : function( x, y ){
+               this.x = x;
+               this.y = y;
+               this.elm.style.left = x + 'px';
+               this.elm.style.top  = y + 'px';
+       },
+       contain : function( child ){
+               return this.elm === child || Util.contain( this.elm, child );
+       },
+       busy : function(){
+               return this.current !== null;
+       },
+       _eventRellay : function( mouseX, mouseY, e, eventType ){
+               var list = this.events[ eventType ];
+               if( Type.isArray( list ) === false ) return false;
+               // console.log( eventType + ' mX:' + mouseX + ' mY:' + mouseY + ' x:' + this.x + ' y:' + this.y + ' ' + this.elm.id );
+               var x = mouseX - this.x,
+                       y = mouseY - this.y,
+                       c = this.current,
+                       t, i;
+               if( c !== null && c.type === eventType ){
+                       if( c.x <= x && x <= c.x + c.target.offsetWidth && c.y <= y && y <= c.y + c.target.offsetHeight ){
+                               c.handler.call( c.thisObj || c.target, e, x, y );
+                               return true;
+                       };
+               };
+               for( i = list.length; i; ){
+                       t = list[ --i ];
+                       if( t.x <= x && x <= t.x + t.target.offsetWidth && t.y <= y && y <= t.y + t.target.offsetHeight ){
+                               t.handler.call( t.thisObj || t.target, e, x, y );
+                               this.current = t;
+                               return true;
+                       };
+               };
+               // console.log( 'false ' + this.elm.id );
+               this.current = null;
+               return false;
+       }
+};
+
+var InterractiveEventTicket = function( elm, type, handler, parent, opt_thisObject ){
+       this.target  = elm;
+       this.type    = type;
+       this.handler = handler;
+       this.parent  = parent;
+       this.thisObj = opt_thisObject;
+};
+InterractiveEventTicket.prototype = {
+       x    : -99999,
+       y    : -99999,
+       w    : 0,
+       h    : 0, 
+       init : function( _positon ){
+               var positon = Position.cumulativeOffset( this.target );
+               this.x = positon[ 0 ] - _positon[ 0 ];
+               this.y = positon[ 1 ] - _positon[ 1 ];
+               this.w = this.target.offsetWidth;
+               this.h = this.target.offsetHeight;
+               // console.log( '- x: ' + this.x + ' y: ' + this.y + ' w: ' + this.w + ' h: ' + this.h + ' ' + ( this.target.id || '-' ) + ' ,' + this.type );
+       },
+       match : function( element, eventType, handler ){
+               if( handler && this.handler !== handler ) return false;
+               if( eventType && this.type !== eventType ) return false;
+               if( element && this.target !== element ) return false;
+               return true;
+       }
+};
+
+var PointingDeviceEventTree = ( function(){
+       var ROOT_LIST       = [],
+               currentRootData = null,
+               targetNodeData  = null,
+               forceNodeData   = null,
+               hoverList       = [],
+               c               = 0;
+       
+       function eventRellay( e ){
+               var data = forceNodeData, // || targetNodeData,
+                       x    = e.clientX,
+                       y    = e.clientY,
+                       type = e.type,
+                       list = hoverList,
+                       i    = 0,
+                       hit, parent;
+               ++c;
+               if( data && data.dispatchEvent( e, type, true ) === true ) return false;
+               //if( p = targetNodeData ) while( p = p.parentData ) delete p.hitChild;
+
+               currentRootData !== null && currentRootData._eventRellay( x, y, e, type );
+               
+               if( c > 20 ) c = 0;
+               
+               for( ; i < list.length; ){
+                       parent = data = list[ i ];
+                       while( parent.parentData && parent === parent.parentData.hitChild ){
+                               parent = parent.parentData;
+                       };
+                       if( parent !== currentRootData ){
+                       //if( data.parentData && data.parentData.hitChild !== data ){
+                               data.hover === true && Util.removeClass( data.elm, data.hoverClass );
+                               delete data.isHover;
+                               data.events && data.events.mouseout && data.fire( e, 'mouseout', false );
+                               delete data.hitSelf;
+                               list.splice( i, 1 );
+                       } else {
+                               ++i;
+                       };
+               };
+               return false;
+       };
+       
+       var NodeClass = function( apiuser, rootData, /*parentLayer,*/ parentData, rangeOrElm, through, clip, hover, cursor, scroll, dragdrop ){
+               ( new NodePrivateData() ).init( apiuser, rootData, /*parentLayer,*/ parentData, this, rangeOrElm, through, clip, hover, cursor, scroll, dragdrop );
+       };
+       NodeClass.prototype = {
+               createNode : function( rangeOrElmData, through, clip, hover, cursor, scroll, dragdrop ){
+                       var data = NodePrivateData.get( this ),
+                               elm;
+                       if( Type.isHTMLElement( rangeOrElmData ) === true ){
+                               elm = rangeOrElmData;
+                       } else
+                       if( Type.isString( rangeOrElmData ) === true ){
+                               elm = document.getElementById( rangeOrElmData );
+                               if( !elm ){
+                                       elm = Util.pullHtmlAsTemplete( rangeOrElmData );
+                               };
+                               if( !elm || Type.isHTMLElement( elm ) === false || elm.nodeType !== 1 ){
+                                       throw new Error( "invalid HTMLElement." );
+                               };
+                       } else
+                       if( Type.isObject( rangeOrElmData ) === false || Type.isFinite( rangeOrElmData.x ) === false || Type.isFinite( rangeOrElmData.y ) === false ){
+                               throw new Error( "No range" );
+                       };
+                       
+                       if( elm && data.elm === null ){
+                               throw new Error( "MetaLayer don't containe HTMLElement-Layer." );
+                       };
+                       if( data.elm && data.elm.style.hasLayout === false ){
+                               throw new Error( "[ie] OffsetParent is hasLayout === false." );
+                       };
+                       
+                       var newNode = new NodeClass( data.apiuser, data.rootData, data, elm || rangeOrElmData, through, clip, hover, cursor, scroll, dragdrop ),
+                               newData = NodePrivateData.get( newNode );
+                       
+                       if( data.childData === null ) data.childData = [];
+                       data.childData.push( newData );
+                       return newNode;
+               },
+               createNodeAt : function(){
+               },
+               remove : function(){
+                       NodePrivateData.get( this ).remove();
+               },
+               nodeIndex : function( v ){
+                       return NodePrivateData.get( this ).nodeIndex( v );
+               },
+               numNode : function(){
+                       return NodePrivateData.get( this ).numNode();
+               },
+               disabled : function( v ){
+                       return NodePrivateData.get( this ).disabled( v );
+               },
+               childrenDisabled : function( v ){
+                       return NodePrivateData.get( this ).disabled( v );
+               },
+               mesure : function(){
+                       NodePrivateData.get( this ).mesure();
+               },
+               update : function( x, y, w, h ){
+                       NodePrivateData.get( this ).update( x, y, w, h );
+               },
+               setPosition : function( x, y ){
+                       NodePrivateData.get( this ).setPosition( x, y );
+               },
+               setSize : function( w, h ){
+                       NodePrivateData.get( this ).setSize( w, h );
+               },
+               cursor : function( v ){
+                       return NodePrivateData.get( this ).cursor( v );
+               },
+               x : function( x ){
+                       return NodePrivateData.get( this ).positionX( x );
+               },
+               y : function( y ){
+                       return NodePrivateData.get( this ).positionY( y );
+               },
+               width : function( w ){
+                       return NodePrivateData.get( this ).width( w );
+               },
+               height : function( h ){
+                       return NodePrivateData.get( this ).height( h );
+               },
+               getAbsolutePositionX : function(){
+                       return NodePrivateData.get( this ).getAbsolutePositionX();
+               },
+               getAbsolutePositionY : function(){
+                       return NodePrivateData.get( this ).getAbsolutePositionY();
+               },
+               addEventListener : function( type, handler, opt_thisObject ){
+                       NodePrivateData.get( this ).addEventListener( type, handler, opt_thisObject );
+               },
+               removeEventListener : function( type, handler ){
+                       NodePrivateData.get( this ).removeEventListener( type, handler );
+               },
+               scrollTo : function( x, y ){
+                       NodePrivateData.get( this ).scrollTo( x, y );
+               },
+               scrollX : function( v ){
+                       return NodePrivateData.get( this ).scrollX( v );
+               },
+               scrollY : function( v ){
+                       return NodePrivateData.get( this ).scrollY( v );
+               },
+               invalidateScrollbar : function(){
+                       ScrollBarManager.update( NodePrivateData.get( this ) );
+               }
+       };
+
+       /**
+        * clip : true の場合、子ノードの変更によってヒットエリアを変化させない.elm には overflow:hidden としておくのが通常.
+        */
+       var NodePrivateData = function(){};
+       NodePrivateData.prototype = {
+               elmMouseCatch : null, // rootData only
+               eventCounter  : null, // rootData only
+               cursorStyle   : null, // rootData only
+               node          : null,
+               apiuser       : null,
+               rootData      : null,
+               elm           : null, // resizeTarget
+               elmScroll     : null,
+               elmScroller   : null,
+               elmScrollbar  : null,
+               x             : 0,
+               y             : 0,
+               w             : 0,
+               h             : 0,
+               t             : 0, // top
+               l             : 0, // left
+               b             : 0, // bottom
+               r             : 0, // right
+               absoluteX     : 0,
+               absoluteY     : 0,
+               _scrollX      : 0,
+               _scrollY      : 0,
+               scrollingX    : 0,
+               scrollingY    : 0,
+               scrollStartX  : 0,
+               scrollStartY  : 0,
+               _cursor       : '',
+               // parentLayer   : null,
+               parentData    : null,
+               childData     : null,
+               events        : null,
+               hitChild      : null,
+               hitSelf       : false,
+               _disabled     : false,
+               _childDisabled: false,
+               layoutManager : null,
+               through       : false,
+               clip          : false,
+               hover         : false,
+               hoverClass    : null,
+               isHover       : false,
+               scroll        : false,
+               dragdrop      : false,
+               tooltip       : null,
+               init: function( apiuser, rootData, /*parentLayer,*/ parentData, node, rangeOrElm, through, clip, hover, cursor, scroll, dragdrop ){
+                       this.apiuser     = apiuser;
+                       this.rootData    = rootData || this;
+                       // this.parentLayer = parentLayer;
+                       this.parentData  = parentData;
+                       this.node        = node;
+                       this.through     = through;
+                       this.clip        = !!clip;
+                       this._cursor     = cursor;   
+
+                       if( Type.isHTMLElement( rangeOrElm ) === true ){
+                               this.elm        = rangeOrElm;
+                               this.hover      = !!hover;
+                               this.hoverClass = hover;
+                               this.scroll     = clip && scroll;                               
+                               this.mesure();
+                               this.scroll === true && this.addEventListener( 'mouseover', this.onScrollReady, this );
+                       } else {
+                               this.update( rangeOrElm.x, rangeOrElm.y, rangeOrElm.w, rangeOrElm.h );
+                       };
+                       
+                       NodePrivateData.dataList.push( this );
+               },
+               mesure : function(){
+                       var x, y, w, h, _this, _parent;
+                       if( this.elm ){
+                               w = this.elm.offsetWidth;
+                               h = this.elm.offsetHeight;
+                               _this   = Position.cumulativeOffset( this.elm );
+                               _parent = this.parentData ? Position.cumulativeOffset( this.parentData.elm ) : [ 0, 0 ];
+                               x  = _this[ 0 ] - _parent[ 0 ];
+                               y  = _this[ 1 ] - _parent[ 1 ];                         
+                               if( this.x !== x || this.y !== y || this.w !== w || this.h !== h ){
+                                       this.x = x;
+                                       this.y = y;
+                                       this.w = w;
+                                       this.h = h;
+                                       console.log( ' ---- mesure' + this.elm.id + ' x:' + this.x + ' y:' + this.y + ' w:' + w + ' h:' + h )
+                                       this._updateRectangle();
+                               };                      
+                       } else {
+                               this._updateRectangle();
+                       };
+               },
+               update : function( x, y, w, h ){
+                       var updateXY = false,
+                               _this, _parent,
+                               parent;
+                       
+                       if( this.elm ){
+                               // width
+                               if( Type.isFinite( w ) === true ){
+                                       this.elm.style.width = w + 'px';
+                               } else
+                               if( Type.isString( w ) === true ){
+                                       this.elm.style.width = w;
+                                       w = this.elm.offsetWidth;
+                               };
+                               //update = this.w !== w;
+       
+                               // height
+                               if( Type.isFinite( h ) === true ){
+                                       this.elm.style.height = h + 'px';
+                               } else
+                               if( Type.isString( h ) === true ){
+                                       this.elm.style.height = w;
+                                       h = this.elm.offsetHeight;
+                               };
+                               //update = update || this.h !== h;
+                               
+                               // x
+                               if( Type.isFinite( x ) === true ){
+                                       this.elm.style.left = x + 'px';
+                               } else
+                               if( Type.isString( x ) === true ){
+                                       this.elm.style.left = x;
+                                       updateXY = true;
+                               } else {
+                                       updateXY = true;
+                               };
+                               
+                               // y
+                               if( Type.isFinite( y ) === true ){
+                                       this.elm.style.top = y + 'px';
+                               } else
+                               if( Type.isString( y ) === true ){
+                                       this.elm.style.top = y;
+                                       updateXY = true;
+                               } else {
+                                       updateXY = true;
+                               };
+                               if( updateXY === true ){
+                                       _this   = Position.cumulativeOffset( this.elm );
+                                       _parent = this.parentData ? Position.cumulativeOffset( this.parentData.elm ) : [ 0, 0 ];
+                                       x       = _this[ 0 ] - _parent[ 0 ];
+                                       y       = _this[ 1 ] - _parent[ 1 ];
+                               };
+                               //update = update || this.x !== x;
+                               //update = update || this.y !== y;
+                               
+                               //update === true && this._updateRectangle();
+                               // return;
+                       };
+                       x = Type.isFinite( x ) === true ? x : this.x;
+                       y = Type.isFinite( y ) === true ? y : this.y;
+                       w = Type.isFinite( w ) === true ? w : this.w;
+                       h = Type.isFinite( h ) === true ? h : this.h;
+                       if( this.x !== x || this.y !== y ){
+                               this.x = x;
+                               this.y = y;
+                               console.log( 'xy  ' + ( this.elm ? this.elm.id : '' ) + ' x:' + x + ' y:' + y + ' w:' + w + ' h:' + h + ' absX:' + this.parentData.absoluteX )
+                               parent = this.parentData;
+                               parent && this._updateAbsoluteXY( parent.absoluteX, parent.absoluteY, parent.scrollingX, parent.scrollingY );
+                               this.w === w && this.h === h && this._updateRectangle();
+                       };
+                       if( this.w !== w || this.h !== h ){
+                               this.w = w;
+                               this.h = h;
+                               console.log( 'wh  ' + ( this.elm ? this.elm.id : '' ) + ' x:' + x + ' y:' + y + ' w:' + w + ' h:' + h )
+                               this._updateRectangle();
+                       };
+                       
+                       ScrollBarManager.update( this );
+               },
+               _updateAbsoluteXY : function( x, y, sX, sY ){
+                       var nodes, i;
+                       this.absoluteX = x = this.x + x;
+                       this.absoluteY = y = this.y + y;
+                       if( nodes = this.childData ){
+                               for( i = nodes.length; i; ){
+                                       nodes[ --i ]._updateAbsoluteXY( x, y, this.scrollingX, this.scrollingY );
+                               };
+                       };
+               },
+               _updateRectangle : function(){
+                       var w = this.w,
+                               h = this.h,
+                               x = this.x,
+                               y = this.y,
+                               l = x,
+                               t = y,
+                               r = x + w,
+                               b = y + h,
+                               nodes = this.childData,
+                               i, node;
+                       // self;
+                       // childnodes
+                       if( this.clip === false && nodes ){
+                               for( i = nodes.length; i; ){
+                                       node = nodes[ --i ];
+                                       if( node.l + x < l ) l = x + node.l;
+                                       if( node.t + y < t ) t = y + node.t;
+                                       if( r < node.r + x ) r = x + node.r;
+                                       if( b < node.b + y ) b = y + node.b;
+                               };
+                       };
+                       // update
+                       if( b !== this.b || r !== this.r || t !== this.t || l !== this.l ){
+                               this.l = l;
+                               this.t = t;
+                               this.r = r;
+                               this.b = b;
+                               // this.w = r - x;
+                               // this.h = b - y;
+                               this.parentData && this.parentData.clip === false && this.parentData._updateRectangle();
+                       };
+               },
+               setPosition : function( x, y ){
+                       this.update( x, y );
+               },
+               setSize : function( w, h ){
+                       this.update( undefined, undefined, w, h );
+               },
+               positionX : function( x ){
+                       x !== undefined && this.update( x );
+                       return this.x;
+               },
+               positionY : function( y ){
+                       y !== undefined && this.update( undefined, y );
+                       return this.y;
+               },
+               width : function( w ){
+                       w !== undefined && this.update( undefined, undefined, w );
+                       return this.w;
+               },
+               height : function( h ){
+                       h !== undefined && this.update( undefined, undefined, undefined, h );
+                       return this.h;
+               },
+               getAbsolutePositionX : function(){
+                       return this.absoluteX;
+               },
+               getAbsolutePositionY : function(){
+                       return this.absoluteY;
+               },
+               cursor : function( v ){
+                       if( Type.isString( v ) === true ){
+                               this._cursor = v;
+                               this === targetNodeData && this.apiuser.updateCoursor( v );
+                       };
+                       return this._cursor;
+               },
+               addEventListener : function( eventType, handler, opt_thisObject ){
+                       var node    = this.node,
+                               counter = this.rootData.eventCounter,
+                               list, i;
+                       if( this.events === null ) this.events = {};
+                       list = this.events[ eventType ];
+                       if( !list ){
+                               list = this.events[ eventType ] = [];
+                               // node[ eventType ] = this._eventRellay;
+                       } else {
+                               for( i = list.length; i; ){
+                                       if( list[ --i ].match( eventType, handler ) === true ){
+                                               return;
+                                       };
+                               };                              
+                       };
+                       list.push( new EventTicketClass( this.node, eventType, handler, opt_thisObject ) );
+                       if( eventType !== 'mouseout' && eventType !== 'mouseover' ){
+                               if( counter[ eventType ] ){
+                                       ++counter[ eventType ];
+                               } else {
+                                       console.log( eventType );
+                                       counter[ eventType ] = 1;
+                                       MouseEvent.add( this.apiuser, this.rootData.elmMouseCatch, eventType, eventRellay );
+                               };                              
+                       };
+               },
+               removeEventListener : function( eventType, handler ){
+                       var events  = this.events,
+                               counter = this.rootData.eventCounter,
+                               type, list, i;
+                       if( events === null ) return;
+                       console.log( ' *** remove ' + eventType );
+                       for( type in events ){
+                               list = events[ type ];
+                               if( eventType && eventType !== type ) continue;
+                               for( i = 0; i < list.length; ){
+                                       if( list[ i ].destroy( type, handler ) === true ){
+                                               console.log( ' *** removed! ' + type );
+                                               list.splice( i, 1 );
+                                       } else {
+                                               ++i;
+                                       };
+                               };
+                               if( list.length === 0 ){
+                                       // delete this[ type ];
+                                       delete events[ type ];
+                               };
+                               --counter[ type ];
+                               if( counter[ type ] === 0 ){
+                                       MouseEvent.remove( this.apiuser, this.rootData.elmMouseCatch, type, eventRellay );
+                                       delete counter[ type ];
+                               };
+                       };                      
+               },
+               _eventRellay : function( x, y, e, eventType ){
+                       if( this._disabled === true ) return false; 
+                       var nodes, child, _x, _y, //  = this.hitChild,
+                               hit, i;                 
+                       x -= this.x;
+                       y -= this.y;
+                       /**
+                       if( c > 20 || eventType !== 'mousemove' ){
+                               var depth = 0, p = this;
+                               while( p = p.parentData ){ ++depth; };
+                               console.log( '-'.repeat( depth ) + this.nodeIndex() + '\t\t' + eventType + '\tx:' + x + '\ty:' + y + '\tcX:' + e.clientX + '\tcY:' + e.clientY + ' nodes:' + this.numNode() + ' N.x:' + this.x + ' N.y:' + this.y + ' N.w' + this.w + ' N.h' + this.h + ' N.l' + this.l + ' N.t' + this.t + ' N.r' + this.r + ' N.b' + this.b );
+                       }; */
+                       
+                       delete this.hitChild;
+                       
+                       if( nodes = this.childData ){
+                               _x = x - this._scrollX;
+                               _y = y - this._scrollY;
+                               for( i = nodes.length; i; ){
+                                       child = nodes[ --i ];
+                                       if( child._disabled === false && child._hitRect( _x, _y ) === true && child._eventRellay( _x, _y, e, eventType ) === true ){
+                                               this.hitChild = child;
+                                               break;
+                                       };
+                               };
+                       };              
+
+                       if( this.through === true ) return !!this.hitChild;
+                       
+                       hit = this._hitNode( x, y );
+                       if( hit === true ){
+                               if( this.hitChild === null ){
+                                       this.apiuser.updateCoursor( this._cursor );
+                                       targetNodeData = this;
+                               };
+                               if( this.hover === true && this.isHover === false ){
+                                       Util.addClass( this.elm, this.hoverClass );
+                                       this.isHover = true;
+                               };
+                               this.hitSelf === false && hoverList.push( this ) && this.events && this.events.mouseover && this.fire( e, 'mouseover', true );
+                       };
+                       this.hitSelf = hit || !!this.hitChild;
+                       
+                       if( this.hitSelf === false ) return false;
+                       if( !this.events || !this.events[ eventType ] ) return true;
+                       return this.dispatchEvent( e, eventType, true );
+               },
+               fire : function( e, eventType, hit ){
+                       var list = this.events[ eventType ],
+                               i    = list.length;
+                       e = NodePrivateData.createEvent( e, eventType, this, hit );
+                       for( ; i; ) list[ --i ].fire( e );
+                       // console.log( eventType + ' x:' + x + ' y:' + y );
+               },
+               dispatchEvent : function( e, eventType, hit ){
+                       var ret, list, i, p;
+                       if( !this.events || !( list = this.events[ eventType ] ) ) return hit;
+                       
+                       e = NodePrivateData.createEvent( e, eventType, this, hit );
+                       for( i = list.length; i; ){
+                               if( list[ --i ].fire( e ) === true ) ret = true;
+                       };
+                       if( this.hitChild ) return true;
+                       // target
+                       if( ret === true ){
+                               forceNodeData  = this;
+                               // targetNodeData = this;
+                               this.apiuser.updateCoursor( this._cursor );
+                               return true;
+                       };
+                       if( hit === true ){
+                               forceNodeData  = null;
+                               // targetNodeData = this;
+                               this.apiuser.updateCoursor( this._cursor );
+                               return true;
+                       };
+                       forceNodeData  = null;
+                       targetNodeData = null;
+                       return false;
+               },
+               _hitRect : function( x, y ){
+                       return this.l <= x && x < this.r && this.t <= y && y < this.b;
+               },
+               _hitNode : function( x, y ){
+                       return ( 0 <= x && x < this.w && 0 <= y && y < this.h ) || ( this === currentRootData );
+               },
+               onScrollReady : function( e ){
+                       ScrollBarManager.show( this );
+               },
+               onMouseWheelScroll : function( e ){
+                       this._scrollY += e.wheelDelta;
+                       ScrollBarManager.update( this );
+                       //return true;
+               },
+               onMouseDragScroll : function( e ){
+                       //e.dragOffsetY;
+                       this._scrollY = this.scrollStartY + e.dragOffsetY;
+                       ScrollBarManager.update( this );
+                       this.scrollStartY = this._scrollY;
+                       return true;
+               },
+               onScrollComplete : function( e ){
+                       ScrollBarManager.hide( this );
+               },
+               scrollTo : function( x, y ){
+       
+               },
+               scrollX : function( v ){
+                       if( Type.isFinite( v ) === true ){
+                               this._scrillX = v;
+                               ScrollBarManager.update( this );
+                       };
+                       return this._scrollX;
+               },
+               scrollY : function( v ){
+                       if( Type.isFinite( v ) === true ){
+                               this._scrillY = v;
+                               ScrollBarManager.update( this );
+                       };
+                       return this._scrollY;
+               },
+               remove : function(){
+                       if( this === this.rootData ) return;
+                       var parent = this.parentData,
+                               list   = NodePrivateData.dataList,
+                               nodes  = this.childData,
+                               node;
+                       this._destroy();
+                       if( parent.hitChild === this ) parent.hitChild = null;
+                       if( parent.childData.length === 0 ) delete parent.childData;    
+                       parent.clip === false && parent._updateRectangle();
+               },
+               _destroy : function(){
+                       var nodes = this.childData,
+                               list  = NodePrivateData.dataList,
+                               node;
+                       this.removeEventListener();
+                       if( nodes ){
+                               while( node = nodes.shift() ) node._destroy();
+                       };
+                       list.splice( Util.getIndex( list, this ), 1 );
+                       if( !this.parentData ) return;
+                       nodes = this.parentData.childData;
+                       nodes.splice( Util.getIndex( nodes, this ), 1 );
+               },
+               nodeIndex : function( v ){
+                       var list, i;
+                       if( !this.parentData ) return 0;
+                       
+                       list = this.parentData.childData;
+                       i    = Util.getIndex( list, this );
+                       if( Type.isFinite( v ) === false || i === v && v < 0 && list.length <= v ) return i;
+                       
+                       list.splice( i, 1 );
+                       list.length === v ? list.push( this ) : list.splice( v, 0, this );
+                       this._free();
+                       return v;
+               },
+               _free : function(){
+                       if( this.parentData.hitChild === this ){
+                               this.parentData.hitChild = null;
+                               this.isHover === true && hoverList.splice( Util.getIndex( hoverList, this ), 1 ) && Util.removeClass( this.elm, this.hoverClass );
+                               this.isHover = false;
+                               if( forceNodeData === this ) forceNodeData = null;
+                               if( targetNodeData  === this ) targetNodeData  = null;
+                       };                      
+               },
+               numNode : function(){
+                       return this.childData ? this.childData.length : 0;
+               },
+               disabled : function( v ){
+                       if( Type.isBoolean( v ) === true ){
+                               this._disabled = v;
+                               if( v === false ){
+                                       this._free();
+                               };
+                       };
+                       return this._disabled;
+               },
+               childrenDisabled : function( v ){
+                       if( Type.isBoolean( v ) === true ){
+                               this._childDisabled = v;
+                       };
+                       return this._childDisabled;
+               }
+       };
+       NodePrivateData.dataList = [];
+       NodePrivateData.get = function( node ){
+               // if( node instanceof NodePrivateData ) return node;
+               // return NodePrivateData.dataList[ layer._getUID() ];
+               var list = NodePrivateData.dataList;
+               for( var i = list.length; i; ){
+                       if( list[ --i ].node === node ) return list[ i ];
+               };
+               return null;
+       };
+       NodePrivateData.createEvent = function( e, eventType, data, hit ){
+               var _e = {
+                       layerX      : e.clientX - data.absoluteX,
+                       layerY      : e.clientY - data.absoluteY,
+                       clientX     : e.clientX,
+                       clientY     : e.clientY,
+                       dragOffsetX : e.dragOffsetX,
+                       dragOffsetY : e.dragOffsetY,                                    
+                       eventType   : eventType,
+                       hit         : hit,
+                       node        : data.node,
+                       wheelDelta  : e.wheelDelta,
+                       target      : forceNodeData ? forceNodeData.node : targetNodeData ? targetNodeData.node : null
+               };
+               return _e;
+       };
+       
+       var EventTicketClass = function( node, eventType, handler, opt_thisObject ){
+               this.node    = node;
+               this.type    = eventType;
+               this.handler = handler;
+               this.thisObj = opt_thisObject;
+       };
+       EventTicketClass.prototype = {
+               match : function( eventType, handler ){
+                       if( handler && this.handler !== handler ) return false;
+                       if( eventType && this.type !== eventType ) return false;
+                       return true;
+               },
+               destroy : function( eventType, handler ){
+                       if( this.match( eventType, handler ) === false ) return false;
+                       delete this.node;
+                       delete this.type;
+                       delete this.handler;
+                       delete this.thisObj;
+                       return true;
+               },
+               fire : ( function(){
+                       if( Function.prototype.call ){
+                               return function( e ){
+                                       return this.handler.call( this.thisObj || this.node, e );
+                               };                              
+                       };
+                       return function( e ){
+                               var thisObj = this.thisObj || this.node,
+                                       ret;
+                               thisObj._currentHandler = this.handler;
+                               ret = thisObj._currentHandler( e );
+                               delete thisObj._currentHandler;
+                               return ret;                                     
+                       };
+               })()
+       };
+       
+       var ScrollBarManager = ( function(){
+               var elmBar          = document.createElement( 'div' ),
+                       smoothList      = [],
+                       currentNodeData = null;
+               
+               function tick(){
+                       var list = smoothList,
+                               i, data, y;
+                       for( i = 0; i < list.length; ){
+                               data = list[ i ];
+                               if( data.scrollingY !== data._scrollY ){
+                                       y = data.scrollingY += data.smoothY;
+                                       if( data.smoothY < 0 ){
+                                               y = y < data._scrollY ? data._scrollY : y;
+                                       } else {
+                                               y = data._scrollY < y ? data._scrollY : y;
+                                       };
+                                       data.scrollingY = y;
+                                       data.elmScroller.style.top = y + 'px';
+                               };
+                               if( data.scrollingY === data._scrollY ){
+                                       smoothList.splice( i, 1 );
+                               } else {
+                                       ++i;
+                               };
+                       };
+                       list.length === 0 && SystemTimer.remove( SUPER_USER_KEY, tick );
+               };
+               
+               return {
+                       show : function( data ){
+                               console.log( '############ show ' + ( currentNodeData === null ) )
+                               if( data === currentNodeData ) return;
+                               currentNodeData && ScrollBarManager.hide( currentNodeData );
+                               if( !data.elmScroller ){
+                                       data.elmScroll = data.elm.firstChild;
+                                       data.elmScroller = document.createElement( 'div' );
+                                       data.elm.appendChild( data.elmScroller );
+                                       data.elmScroller.style.cssText = 'position:absolute;top:0;left:0;width:100%;';
+                                       data.elmScroller.appendChild( data.elmScroll );
+                               };
+                               data.scrollStartX = data.scrollingX;
+                               data.scrollStartY = data.scrollingY;
+                               //data._scrollX = data.elmScroll.offsetLeft;
+                               //data._scrollY = data.elmScroll.offsetTop;
+                               data.addEventListener( 'mousewheel', data.onMouseWheelScroll, data );
+                               data.addEventListener( 'mousedrag',  data.onMouseDragScroll, data );
+                               data.addEventListener( 'mouseout',   data.onScrollComplete, data );
+                               currentNodeData = data;
+                               data.elm.appendChild( elmBar );
+                               ScrollBarManager.update( data );
+                       },
+                       update : function( data ){
+                               //if( data !== currentNodeData ) return;
+                               if( data.elmScroll === null ) return;
+                               var contentH = data._scrollH = data.elmScroll.offsetHeight,
+                                       scrollY  = data._scrollY,
+                                       clipH    = data.h,
+                                       barH     = Math.floor( clipH * ( clipH / contentH ) ),
+                                       offsetH  = contentH - clipH,
+                                       barY;
+                               if( 0 < scrollY ) scrollY  = data._scrollY = 0;
+                               if( scrollY < -offsetH ) scrollY = data._scrollY = -offsetH;
+                               barY = Math.floor( ( clipH - barH ) * -scrollY / ( contentH - clipH ) );
+                               if( contentH <= clipH ) data._scrollY = barY = barH = scrollY = 0;
+                               data.smoothY = ( data._scrollY - data.scrollingY ) / 10;
+                               elmBar.style.cssText = [
+                                       'position:absolute;',
+                                       'width:10px;',
+                                       'background-color:#333;',
+                                       'right:2px;',
+                                       'height:', barH, 'px;',
+                                       'top:', barY, 'px;'
+                               ].join( '' );
+                               if( data.scrollingY !== data._scrollY && Util.getIndex( smoothList, data ) === -1 ){
+                                       smoothList.length === 0 && SystemTimer.add( SUPER_USER_KEY, tick, 16 );
+                                       smoothList.push( data );
+                               };
+                       },
+                       hide : function( data ){
+                               console.log( '############ hide ' + ( currentNodeData === null ) )
+                               if( data !== currentNodeData ) return;
+                               data.removeEventListener( 'mousewheel', data.onMouseWheelScroll, data );
+                               data.removeEventListener( 'mousedrag',  data.onMouseDragScroll, data );
+                               data.removeEventListener( 'mouseout',   data.onScrollComplete, data );
+                               data.elm.removeChild( elmBar );
+                               currentNodeData = null;
+                       }
+               };
+       })();
+       
+       return {
+               create : function( apiuser, layer ){
+                       var root = new NodeClass( apiuser, null, null, apiuser.rootElement ),
+                               data = NodePrivateData.get( root );
+                       data.elmMouseCatch = layer.elm;
+                       data.eventCounter  = {};
+                       ROOT_LIST.push( data );
+                       currentRootData    = data;
+                       targetNodeData     = null;
+                       forceNodeData      = null;
+                       return root;
+               },
+               onCurrentApplicationChange : function( _application ){
+                       currentRootData    = null;
+                       targetNodeData     = null;
+                       forceNodeData      = null;
+                       for( var i = ROOT_LIST.length; i; ){
+                               if( ROOT_LIST[ --i ].apiuser === _application ){
+                                       currentRootData = ROOT_LIST[ i ];
+                                       return;
+                               };
+                       };
+               },
+               destroyTree : function( root ){
+                       NodePrivateData.get( root )._destroy();
+                       ROOT_LIST.splice( Util.getIndex( ROOT_LIST, root ), 1 );
+               },
+               onSystemShutdown : function(){
+                       
+               },
+               isNodeInstance : function( node ){
+                       return node instanceof NodeClass;
+               },
+               _getNodePrivateData : function( node ){ // system only
+                       return NodePrivateData.get( node );
+               }
+       };
+})();
+
+var Application = ( function(){
+       
+       var LIVE_APPLICATION_LIST = [];
+       
+       var currentApplication    = null,
+               coveredApplication    = null,
+               winW                  = 0,
+               winH                  = 0;
+       
+       var ApplicationReference = function( appClass, isOverlay, displayName, id, thumbnailUrl, tailColor ){
+               var self          = this;
+               var application   = null;
+               this.id           = id;
+               this.displayName  = displayName;
+               this.thumbnailUrl = thumbnailUrl;
+               this.tailColor    = tailColor;
+               this.getUID = function(){
+                       return Util.getIndex( API_USER_LIST, appClass );
+               };
+               this.boot = function( /* _option */ ){
+                       application = Application.boot( displayName, self.getUID(), appClass, isOverlay, Util.copyArray( arguments ) );
+               };
+               this.shutdown = function(){
+                       if( !application ) return false;
+                       
+                       if( ( isOverlay === true ? Overlay.hide() : application.close() ) === false ) return false;
+                       application = null;
+               };
+       };
+       
+       function asyncBootHome(){
+               currentApplication === null && Home.boot();
+       };
+       function asyncOpen( /* arguments */ ){
+               var _arg = Util.copyArray( arguments );
+               _arg.unshift( winW, winH );
+               currentApplication.open.apply( currentApplication, _arg );
+       };
+       return {
+               register: function( _class, _overlay, _tail, _displayName, _id, _thumbnailUrl, _tailColor ){
+                       APPLICATION_LIST.push( _class );
+                       API_USER_LIST.push( _class );
+                       var _ref = new ApplicationReference( _class, _overlay, _displayName, _id, _thumbnailUrl, _tailColor );
+                       _tail === true && Home.add( _ref );
+                       return _ref;
+               },
+               isBasicPaneInstance: function( _basicPane ){
+                       return  _basicPane instanceof AbstractBasicPane;
+               },
+               isApplicationInstance: function( _application ){
+                       return _application instanceof AbstractApplication;
+               },
+               isApplicationReference: function( _reference ){
+                       return _reference instanceof ApplicationReference;
+               },
+               isCurrentAppplication: function( _application ){
+                       return true
+               },
+               boot: function( displayName, uid, appClass, isOverlay, arg ){
+                       if( currentApplication ){
+                               if( currentApplication.getUID() === uid ) return null;
+                               if( isOverlay === false && currentApplication.close() === false ) return null;
+                       };
+
+                       appClass.prototype = new AbstractApplication( displayName, appClass, isOverlay );
+                       var application = new appClass(); // new は boot で
+                       
+                       coveredApplication = isOverlay === true ? currentApplication : null;
+                       
+                       Application.onCurrentApplicationChange( application );
+                       
+                       if( isOverlay === false ){
+                               body.style.backgroundColor = application.bgColor;
+                               
+                               body.appendChild( application.rootElement );
+                               application.rootElement.style.display = 'none';
+                               application.init();
+
+                               application.addAsyncCall( asyncOpen, arg );
+                       } else {
+                               Overlay.show( application, arg );
+                       }
+                       
+                       return application;
+               },
+               shutdown: function( _application, isOverlay ){
+                       if( isOverlay === false ){
+                               currentApplication = null;
+                               AsyncCall.add( SUPER_USER_KEY, asyncBootHome );
+                       } else {
+                               Application.onCurrentApplicationChange( coveredApplication );
+                               coveredApplication = null;
+                       };
+               },
+               onCurrentApplicationChange: function( _application ){
+                       if( Application.isApplicationInstance( _application ) === false ) return;
+                       if( currentApplication === _application ) return;
+                       currentApplication = _application;
+                       MouseEvent.onCurrentApplicationChange( _application );
+                       PointingDeviceEventTree.onCurrentApplicationChange( _application );
+                       KeyEvent.updateCurrentListener( _application );
+                       // InteractiveLayer.onCurrentApplicationChange( _application );
+               },
+               onApplicationShutdown: function( _application ){
+                       LIVE_APPLICATION_LIST.splice( Util.getIndex(  LIVE_APPLICATION_LIST, _application ) );
+               },
+               onWindowResize: function( w, h ){
+                       winW = w;
+                       winH = h;
+                       currentApplication && currentApplication.resize( w, h );
+                       Overlay.onWindowResize( w, h );
+                       UI.onWindowResize( w, h );
+               },
+               onSystemShutdown: function(){
+                       
+               }
+       }
+})();
+
+/* --------------------------------------------------------------
+ * Home
+ * 
+ */
+       var Home = ( function(){
+               var APP_REF_LIST    = [];
+               var ELM_TAIL_ORIGIN = ( function(){
+                       var ret = document.createElement( 'div' ),
+                               h2  = document.createElement( 'h2' );
+                       ret.className = 'tail-wrapper';
+                       ret.appendChild( h2 );
+                       h2.appendChild( document.createTextNode( 'appName' ) );
+                       return ret;
+               })();
+               
+               var TailClass = function( appRef ){
+                       this.elm = ELM_TAIL_ORIGIN.cloneNode( true );
+                       this.destroy = function(){
+                               appRef = self = elmName = null;
+                       };                      
+                       
+                       var self    = this,
+                               elmName = this.elm.getElementsByTagName( 'h2' )[ 0 ].firstChild;
+                       
+                       this.elm.style.backgroundColor = appRef.tailColor;
+                       elmName.data = appRef.displayName;
+               };
+               
+               var ref = Application.register( function(){
+                       var self     = this,
+                               winW     = 0,
+                               winH     = 0,
+                               tailList = [],
+                               elmContainer, elmHeader;
+                       
+                       function draw(){
+                               var tail, elm;
+                               for( var i=0, l=APP_REF_LIST.length; i<l; ++i ){
+                                       tail = new TailClass( APP_REF_LIST[ i ] );
+                                       tailList.push( tail );
+                                       elm  = tail.elm;
+                                       elmContainer.appendChild( elm );
+                                       self.addEventListener( elm, 'click', onTailClick );
+                               };
+                       };
+                       
+                       function onTailClick( e ){
+                               var _children = elmContainer.getElementsByTagName( 'div' );
+                               for( var i=0, l=_children.length; i<l; ++i ){
+                                       if( this === _children[ i ] ){
+                                               APP_REF_LIST[ i ].boot();
+                                               break;
+                                       };
+                               };
+                       };
+                       
+                       this.bgColor     = '#0F6D39';
+                       this.MIN_WIDTH   = 320;
+                       this.MIN_HEIGHT  = 320;
+                       this.onInit = function(){
+                               self.rootElement.id = 'home-root';
+                               
+                               elmContainer        = document.createElement( 'div' );
+                               self.rootElement.appendChild( elmContainer );
+                               elmContainer.id     = 'home-tail-container';
+                               
+                               elmHeader           = document.createElement( 'div' );
+                               self.rootElement.appendChild( elmHeader );
+                               elmHeader.id        = 'home-header';
+                       };
+                       this.onOpen = function( _w, _h ){
+                               winW = _w;
+                               winH = _h;
+                               draw();
+                       };
+                       this.onPaneResize = function( _w, _h ){
+                               
+                       };
+                       this.onClose = function(){
+                               self.removeEventListener();
+                               while( tailList.length > 0 ){
+                                       tailList.shift().destroy();
+                               }
+                               self = tailList = elmContainer = null;
+                       };
+               }, false, false, 'home', 'home', null );
+               
+               return {
+                       add: function( _appRef ){
+                               if( Application.isApplicationReference( _appRef ) === false ) return;
+                               Util.getIndex( APP_REF_LIST, _appRef ) === -1 && APP_REF_LIST.push( _appRef );
+                       },
+                       boot: function(){
+                               ref.boot();
+                       }
+               }
+       })();
+
+       var Page = ( function(){
+               var pageNodes = [],
+                       appClass, ref,
+                       ignoreTagList = [ 'script', 'noscript', 'style' ];
+               
+               var MemoryClass = function( node ){
+                       this.node = node;
+               };
+               MemoryClass.prototype = {
+                       init: function(){
+                               var node      = this.node,
+                                       _nodeType = node.nodeType;
+                               if( _nodeType === 1 && Util.getIndex( ignoreTagList, node.tagName.toLowerCase() ) === -1 ){
+                                       this.type    = _nodeType;
+                                       this.display = node.style.display;
+                               } else
+                               if( _nodeType === 3 ){
+                                       if( node.data.replace( /\s/g, '' ).length !== 0 ){
+                                               this.type    = _nodeType;
+                                               this.before  = pageNodes.length === 0 ? null : pageNodes[ pageNodes.length - 1 ].node;
+                                       } else {
+                                               body.removeChild( node );
+                                               return false;
+                                       }
+                               } else {
+                                       // body.removeChild( node );
+                                       return false;
+                               };
+                       },
+                       show: function(){
+                               if( this.type === 1 ){
+                                       if( this.display ){
+                                               this.node.style.display = this.display;
+                                       } else {
+                                               this.node.style.display = '';
+                                       }
+                               } else {
+                                       if( this.before ){
+                                               body.insertBefore( this.node, this.before );
+                                       } else {
+                                               body.appendChild( this.node );
+                                       };
+                               };
+                       },
+                       hide: function(){
+                               if( !this.node.parentNode ){
+                                       return;
+                               };
+                               if( this.type === 1 ){
+                                       this.node.style.display = 'none';
+                               } else {
+                                       body.removeChild( this.node );
+                               };
+                       }
+               };
+               
+               return {
+                       onReady: function(){
+                               var _children = Util.copyArray( body.childNodes ),
+                                       _mem;
+                               for( var i = 0, l = _children.length; i<l; ++i ){
+                                       _mem = new MemoryClass( _children[ i ] );
+                                       _mem.init() !== false && pageNodes.push( _mem );
+                               };
+                               if( pageNodes.length !== 0 ){
+                                       if( Type.isFunction( gOS.PageApplicationClass ) === true ){
+                                               Page.appClass = gOS.PageApplicationClass;
+                                               Page.appClass.bgColor    = Page.appClass.bgColor    || '#ffffff';
+                                               Page.appClass.MIN_WIDTH  = Page.appClass.MIN_WIDTH  || 240;
+                                               Page.appClass.MIN_HEIGHT = Page.appClass.MIN_HEIGHT || 240;
+                                       } else {
+                                               Page.appClass = function(){
+                                                       var self     = this;
+                                                       
+                                                       this.bgColor      = '#ffffff';
+                                                       this.MIN_WIDTH    = 200;
+                                                       this.MIN_HEIGHT   = 200;
+                                                       this.onInit       = function(){};
+                                                       this.onOpen       = function( _w, _h ){
+                                                               KeyEvent.add( self, Const.KEY.EVENT.KEY_DOWN, ref.shutdown, 27 ); // 27.esc
+                                                       };
+                                                       this.onPaneResize = function( _w, _h ){};
+                                                       this.onClose      = function(){};
+                                               };
+                                       };
+                                       ref = Application.register( Page.appClass, false, true, document.title, 'page', null, Page.appClass.tailColor || '#999999' );
+                               };
+                               delete Page.onReady;
+                       },
+                       show: function(){
+                               for( var i = pageNodes.length; i; ){
+                                       pageNodes[ --i ].show();
+                               };
+                       },
+                       hide: function(){
+                               for( var i = pageNodes.length; i; ){
+                                       pageNodes[ --i ].hide();
+                               };                              
+                       },
+                       boot: function(){
+                               ref && ref.boot();
+                       },
+                       registered: function(){
+                               return !!ref;
+                       },
+                       appClass: null
+               }
+       })();
+
+/* --------------------------------------------------------------
+ * Event
+ * 
+ *  screenX
+ *  スクリーン座標は、コンピュータのディスプレイの左上を原点とする座標系である。screenX, screenY属性で取得できる。Javascritpでは、同名のプロパティとして実装されている。
+ *  しかし、これは、現実的には、何の役に立たない。ブラウザ自体がディスプレイのどの位置にいるのかがわからないので、画面上の位置を知ったところで、何にもならないからだ。 
+ * 
+ *  clientX
+ *  ウインドウ座標とは、現在のブラウザのウインドウの、ドキュメントを表示している部分の左上原点とした座標である。
+ *  問題は、ウインドウは、必ずしもドキュメント全体を表示するとは限らない。スクロールと呼ばれるUIによって、ドキュメントの一部だけを表示しているかもしれない。
+ */
+       var XBrowserEvent = ( function(){
+               var wrappedHandlerClass,
+                       wrappedEventClass,
+                       tmp;
+               
+               if( window.addEventListener ){
+                       wrappedHandlerClass = function( ticket ){
+                               this.handler = function( e ){
+                                       if( ticket.fire( e ) !== false ) return;
+                                       e.preventDefault();
+                                       e.stopPropagation();
+                                       return false;
+                               };
+                               this.destroy = function(){
+                                       ticket = null;
+                                       delete this.handler;
+                                       delete this.destroy;
+                               };
+                       };
+               } else {
+                       wrappedEventClass = function( e, element ){
+                               this._event        = e;
+                               this.type          = e.type;
+                               this.target        = e.srcElement;
+                               this.currentTarget = element;
+                               this.relatedTarget = e.formElement ? e.formElement : e.toElement;
+                               this.eventPhase    = e.srcElement === element ? 2: 3;
+                               
+                               this.clientX       = e.clientX;
+                               this.clientY       = e.clientY;
+                               this.screenX       = e.screenX;
+                               this.screenY       = e.screenY;
+                               
+                               this.keyCode       = e.keyCode;
+                               this.altKey        = e.altKey;
+                               this.ctrlKey       = e.ctrlKey;
+                               this.shiftKey      = e.shiftKey;
+                               
+                               this.wheelDelta    = e.wheelDelta;
+                       };
+                       wrappedEventClass.prototype.stopPropagation = function(){
+                               this._event.cancelBubble = true;
+                       };
+                       wrappedEventClass.prototype.preventDefault  = function(){
+                               this._event.returnValue = false;
+                       };
+
+                       if( document.attachEvent ){
+                               wrappedHandlerClass = function( ticket ){
+                                       this.handler = function(){
+                                               if( ticket.fire( new wrappedEventClass( window.event, ticket.element ) ) !== false ) return;
+                                               // e.preventDefault();
+                                               // e.stopPropagation();
+                                               window.event.cancelBubble = true;
+                                               window.event.returnValue  = false;
+                                               return false;
+                                       };
+                                       this.destroy = function(){
+                                               ticket = null;
+                                               delete this.handler;
+                                               delete this.destroy;
+                                       };
+                               };
+                       } else {
+                               tmp = {
+                                       list: [],
+                                       find: function( _ticket ){
+                                               for( var i=0, l= tmp.list.length, _item; i<l; ++i ){
+                                                       _item = tmp.list[ i ];
+                                                       if( _item.element === _ticket.element && _item.eventType === _ticket.eventType ){
+                                                               return _item;
+                                                       };
+                                               };
+                                               return null;
+                                       }
+                               };
+                               tmp.TicketClass = function( _ticket ){
+                                       var self = this;
+                                       this.element   = _ticket.element;
+                                       this.eventType = _ticket.eventType;
+                                       this.tickets   = [ _ticket ];
+                                       this.onDestroy = function(){ self = null; };
+                                       
+                                       this.element[ 'on' + this.eventType ] = function( e ){ return self.fire( e );};
+                                       _ticket = null;
+                               };
+                               tmp.TicketClass.prototype = {
+                                       add: function( _ticket ){
+                                               Util.getIndex( this.tickets, ticket ) === -1 && this.tickets.push( _ticket );
+                                       },
+                                       remove: function( _ticket ){
+                                               var i = Util.getIndex( this.tickets, _ticket );
+                                               i !== -1 && this.tickets.splice( i, 1 );
+                                               this.tickets.length === 0 && this.destroy();
+                                       },
+                                       fire: function( e ){
+                                               e = e || new wrappedEventClass( window.event, this.element );
+                                               var i = this.tickets.length,
+                                                       cancel;
+                                               for( ; i; ){
+                                                       if( this.tickets[ --i ].fire( e ) === false ) cancel = false;
+                                               };
+                                               return cancel;
+                                       },
+                                       destroy: function(){
+                                               this.onDestroy();
+                                               this.element[ 'on' + this.eventType ] = '';
+                                               tmp.list.splice( Util.getIndex( tmp.list, this ), 1 );
+                                               delete this.element;
+                                               delete this.eventType;
+                                               delete this.tickets;
+                                               delete this.onDestroy;
+                                       }
+                               };
+                       };
+               };
+
+               return {
+                       add: function( _ticket ){
+                               if( document.addEventListener ){
+                                       XBrowserEvent.add = function( _ticket ){
+                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket );
+                                               _ticket.element.addEventListener( _ticket.eventType, _ticket.wrappedHandler.handler, false );
+                                       };
+                               } else
+                               if( document.attachEvent ){
+                                       XBrowserEvent.add = function( _ticket ){
+                                               _ticket.wrappedHandler = new wrappedHandlerClass( _ticket );
+                                               _ticket.element.attachEvent( 'on' + _ticket.eventType, _ticket.wrappedHandler.handler );
+                                       };
+                               } else {
+                                       XBrowserEvent.add = function( _ticket ){
+                                               var t = tmp.find( _ticket );
+                                               if( t !== null ){
+                                                       t.add( _ticket );
+                                               } else {
+                                                       tmp.list.push( new tmp.TicketClass( _ticket ) );
+                                               };
+                                       };
+                               };
+                               
+                               XBrowserEvent.add( _ticket );
+                       },
+                       remove: function( _ticket ){
+                               if( document.removeEventListener ){
+                                       XBrowserEvent.remove = function( _ticket ){
+                                               _ticket.element.removeEventListener( _ticket.eventType, _ticket.wrappedHandler.handler, false );
+                                               _ticket.wrappedHandler.destroy();
+                                       };
+                               } else
+                               if( document.detachEvent ){
+                                       XBrowserEvent.remove = function( _ticket ){
+                                               _ticket.element.detachEvent( 'on' + _ticket.eventType, _ticket.wrappedHandler.handler );
+                                               _ticket.wrappedHandler.destroy();
+                                       };
+                               } else {
+                                       XBrowserEvent.remove = function( _ticket ){
+                                               var t = tmp.find( _ticket );
+                                               if( t !== null ){
+                                                       t.remove( _ticket );
+                                               };
+                                       };
+                               };
+                               
+                               XBrowserEvent.remove( _ticket );
+                       }
+               }
+       })();
+
+/*
+ * EventTicketClass
+ */
+       var EventTicketClass = function( _element, _eventType, _handler, opt_thisObject ){
+               this.element        = _element;
+               this.eventType      = _eventType;
+               this.handler        = _handler;
+               this.wrappedHandler = null;
+               this.thisObject     = opt_thisObject;
+               XBrowserEvent.add( this );
+       };
+       EventTicketClass.prototype = {
+               fire : ( function(){
+                       if( Function.prototype.call ){
+                               return function( e ){
+                                       return this.handler.call( this.thisObject || this.element, e );
+                               };                              
+                       };
+                       return function( e ){
+                               var thisObj = this.thisObject || this.element,
+                                       ret;
+                               thisObj._currentHandler = this.handler;
+                               ret = thisObj._currentHandler( e );
+                               delete thisObj._currentHandler;
+                               return ret;                                     
+                       };
+               })(),
+               match: function( _element, _eventType, _handler ){
+                       if( _handler   && _handler   !== this.handler )   return false;
+                       if( _eventType && _eventType !== this.eventType ) return false;
+                       if( _element   && _element   !== this.element )   return false;
+                       
+                       return true;
+               },
+               destroy: function( _element, _eventType, _handler ){
+                       if( this.match( _element, _eventType, _handler ) === false ) return false;
+                       
+                       XBrowserEvent.remove( this );
+                       
+                       delete this.element;
+                       delete this.eventType;
+                       delete this.handler;
+                       delete this.wrappedHandler;
+                       delete this.thisObject;
+                       return true;
+               }
+       };
+
+var ReadyEvent = ( function(){
+       var ticketReady,
+               ticketLoad;
+
+       function webkitDetect(){
+               var state = document.readyState;
+               if( state === 'loaded' || state === 'complete' ){
+                       SystemTimer.remove( SUPER_USER_KEY, webkitDetect );
+                       timer = null;
+                       onReady();
+               };
+       };
+       function ieDetect(){
+               if( this.readyState === 'complete' ){ // this.readyState === 'loaded' || 
+                       this.onreadystatechange = new Function();
+                       this.onreadystatechange = null;
+                       AsyncCall.remove( SUPER_USER_KEY, ieScroll );
+                       onReady();
+               };
+       };
+       function ieScroll(){
+               try {
+                       document.documentElement.doScroll( 'left' );
+               } catch( e ){
+                       AsyncCall.add( SUPER_USER_KEY, ieScroll );
+                       return;
+               };
+               // no errors, fire
+               document.onreadystatechange = new Function();
+               document.onreadystatechange = null;
+               onReady();              
+       };
+               
+       function onReady(){
+               ticketReady && ticketReady.destroy();
+               ticketLoad  && ticketLoad.destroy();
+               ticketReady = ticketLoad = null;
+               Page.onReady();
+               if( Page.registered() === true ){
+                       Page.boot();
+               } else {
+                       Home.boot();
+               };
+       };
+       
+       // Apple WebKit (Safari, OmniWeb, ...)
+       if( document.readyState && !!UA.WEBKIT ){
+               SystemTimer.add( SUPER_USER_KEY, webkitDetect, 50 );
+       /* } else
+               if( document.readyState && UA.isIE && UA.ieVersion < 9 ){
+               ieScroll();
+               document.onreadystatechange = ieDetect; */
+       } else {
+               ticketReady = new EventTicketClass( document, 'DOMContentLoaded', onReady );
+               ticketLoad  = new EventTicketClass( window, 'load', onReady );
+       };
+})();
+
+
+
+
+/* =====================================================
+ *  ResizeEvent
+ * 
+ */
+
+var ResizeEvent = ( function(){
+       var _globalLock = 0;
+       var _resize;
+       var root = window;
+       var w = 0, h = 0;
+       
+       function getInnerSize(){
+               return {
+                       w : root.innerWidth || root.clientWidth,
+                       h : root.innerHeight || root.clientHeight
+               };
+       }
+       function unlock(){
+               _globalLock = 0;
+       }
+       
+       if( document.uniqueID ){
+               _resize = function(){
+                       root = (document.compatMode || "") !== "CSS1Compat" ? document.body : document.documentElement;
+
+                       // resize agent
+                       function loop(){
+                               if( !_globalLock++ ){
+                                       var size = getInnerSize();
+                                       if( w !== size.w || h !== size.h ){// resized
+                                               w = size.w;
+                                               h = size.h;
+                                               // update
+                                               Application.onWindowResize( w, h );
+                                       }
+                                       window.setTimeout( unlock, 0 );
+                                       // delay unlock
+                               }
+                               window.setTimeout( loop, 100 );
+                       }
+                       loop();
+               };
+       } else {
+               _resize = function(){
+                       new EventTicketClass( window, 'resize', onResize );
+                       
+                       function onResize(){
+                               if( !_globalLock++ ) {
+                                       var size = getInnerSize();
+                                       if( w !== size.w || h !== size.h ){// resized
+                                               w = size.w;
+                                               h = size.h;
+                                               // update
+                                               Application.onWindowResize( w, h );
+                                       }
+                                       window.setTimeout( unlock, 0 );
+                               }
+                       }
+                       onResize();
+               };
+       }
+       AsyncCall.add( SUPER_USER_KEY, _resize );
+       
+       return {
+               getSize: getInnerSize,
+               onSystemShutdown: function(){
+                       
+               }
+       }
+})();
+
+
+/* =====================================================
+ *  MouseEvent
+ * 
+ */
+       var MouseEvent = ( function(){
+               var CLICK_OFFSET   = 2 * 2,
+                       DRAG_OFFSET    = 4 * 4;         
+               
+               var EVENT_LIST_MAP = [],
+                       TMP = {},
+                       currentEventList;
+       /*-------------------------------------
+        * ClickHelper
+        * mousedown, mouseup, の移動距離を調べて clickハンドラ を呼ぶ
+        */
+               var ClickEventTicketClass = function( element, clickhandler, opt_thisObject ){
+                       this.mousedownTicket = new EventTicketClass( element, 'mousedown', this.mousedownHandler, this );
+                       this.element         = element;
+                       this.handler         = clickhandler;
+                       this.thisObject      = opt_thisObject;
+               };
+               ClickEventTicketClass.prototype = {
+                       element          : null,
+                       handler          : null,
+                       thisObject       : null,
+                       startX           : 0,
+                       startY           : 0,
+                       mousedownTicket  : null,
+                       mousemoveTicket  : null,
+                       mouseupTicket    : null,
+                       mouseoutTicket   : null,
+                       eventType        : 'click',
+                       fire             : EventTicketClass.prototype.fire,
+                       match            : EventTicketClass.prototype.match,
+                       mousedownHandler : function( e ){
+                               this.startX = e.clientX;
+                               this.startY = e.clientY;
+                               
+                               this.mousemoveTicket = new EventTicketClass( this.element, 'mousemove', this.mousemoveHandler, this );
+                               this.mouseupTicket   = new EventTicketClass( this.element, 'mouseup',   this.mouseupHandler,   this );
+                               this.mouseoutTicket  = new EventTicketClass( this.element, 'mouseout',  this.mouseoutHandler,  this );                          
+                       },
+                       mousemoveHandler : function( e ){
+                               var offsetX = e.clientX - this.startX,
+                                       offsetY = e.clientY - this.startY;                              
+                               offsetX * offsetX + offsetY * offsetY >= CLICK_OFFSET && this.mouseoutHandler();
+                       },
+                       mouseupHandler : function( e ){
+                               this.mouseoutHandler();
+                               return this.fire( ClickEventTicketClass.createEvent( e ) );
+                       },
+                       mouseoutHandler : function( e ){
+                               this.mousemoveTicket && this.mousemoveTicket.destroy();
+                               this.mouseupTicket   && this.mouseupTicket.destroy();
+                               this.mouseoutTicket  && this.mouseoutTicket.destroy();
+                               if( this.mousemoveTicket ) delete this.mousemoveTicket;
+                               if( this.mouseupTicket  )  delete this.mouseupTicket;
+                               if( this.mouseoutTicket )  delete this.mouseoutTicket;
+                       },
+                       destroy : function( _element, _eventType, _handler ){
+                               if( this.match( _element, _eventType, _handler ) === false ) return false;
+                               
+                               this.mouseoutHandler();
+                               this.mousedownTicket.destroy();
+
+                               delete this.element;
+                               delete this.handler;
+                               delete this.thisObject;
+                               delete this.mousedownTicket;    
+                               return true;
+                       }
+               };
+               if( document.createEvent ){
+                       ClickEventTicketClass.createEvent = function( e ){
+                               var _e = document.createEvent( 'MouseEvents' );
+                               _e.initMouseEvent(
+                                       'click' , false, true, e.view, 
+                                       e.detail, e.screenX, e.screenY, e.clientX, e.clientY, 
+                                       e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 
+                                       e.button, e.relatedTarget
+                               );
+                               return _e;
+                       };                                      
+               } else
+               if( document.attachEvent ){
+                       ClickEventTicketClass.createEvent = function( e ){
+                               e.type = 'click';
+                               return e;
+                       };
+               } else {
+                       
+               };
+               
+       /*-------------------------------------
+        *  WheelHelper
+        */
+               var WheelEventTicketClass = ( function(){
+                       if( UA.GECKO ){
+                               return function( element, wheelhandler, opt_thisObject ){
+                                       this.wheelTicket = new EventTicketClass( element, 'DOMMouseScroll', this.onGeckoWheel, this );
+                                       this.element     = element;
+                                       this.handler     = wheelhandler;
+                                       this.thisObject  = opt_thisObject;
+                               };
+                       } else
+                       if( true || UA.isIE ){
+                               return function( element, wheelhandler, opt_thisObject ){
+                                       this.wheelTicket = new EventTicketClass( element, this.eventType, wheelhandler );
+                                       this.element     = element;
+                                       this.handler     = wheelhandler;
+                                       this.thisObject  = opt_thisObject;
+                               };
+                       } else {
+                               TMP.wheelHandlerList = [];
+                               TMP.wheelThisObjList = [];
+                               //TMP.wheelLegacy = undefined;
+                               TMP.onWheel   = function( e ){
+                                       e = e || window.event;
+                                       var cancel = true,
+                                               f = TMP.wheelLegacy;
+                                       if( f ) cancel = f.call( this, e );
+                                       
+                                       for( i = TMP.wheelHandlerList.length; i; ){
+                                               if( TMP.wheelHandlerList[ --i ].call( TMP.wheelThisObjList[ i ] || this, e ) === false ) cancel = false;
+                                       };
+                                       return cancel;
+                               };
+                               return function( element, wheelhandler, opt_thisObject ){
+                                       this.element     = element;
+                                       this.handler     = wheelhandler;
+                                       this.thisObject  = opt_thisObject;
+                                       
+                                       if( TMP.wheelHandlerList.length === 0 ){
+                                               //TMP.wheelLegacy     = Type.isFunction( window.onmousewheel ) === true ? window.onmousewheel : undefined;
+                                               element.onmousewheel = TMP.onWheel;
+                                       };
+                                       TMP.wheelHandlerList.push( wheelhandler );
+                                       TMP.wheelThisObjList.push( opt_thisObject )
+                               };
+                       };
+               })();
+               WheelEventTicketClass.prototype = {
+                       eventType : 'mousewheel',
+                       match     : EventTicketClass.prototype.match,
+                       destroy   : function( _element, _eventType, _handler ){
+                               if( this.match( _element, _eventType, _handler ) === false ) return false;
+                               
+                               this.wheelTicket && this.wheelTicket.destroy();
+                               
+                               delete this.wheelTicket;
+                               delete this.element;
+                               delete this.handler;
+                               delete this.thisObject;
+                               
+                               this.onDestroy && this.onDestroy();
+                               return true;
+                       }
+               };
+               if( UA.GECKO ){
+                       WheelEventTicketClass.prototype.onGeckoWheel = function( e ){
+                               var _e = document.createEvent( 'MouseEvents' );
+                               _e.initMouseEvent(
+                                       'mousewheel' , false, true, e.view, 
+                                       e.detail, e.screenX, e.screenY, e.clientX, e.clientY, 
+                                       e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 
+                                       e.button, e.relatedTarget
+                               );
+                               _e.wheelDelta = e.detail * -40;
+                               return this.handler.call( this.thisObject || this.element, _e );
+                       };
+               } else
+               if( true || UA.isIE ){
+
+               } else {
+                       WheelEventTicketClass.prototype.onDestroy = function(){
+                               TMP.wheelHandlerList.splice( Util.getIndex( TMP.wheelHandlerList, this.handler ), 1 );
+                               TMP.wheelThisObjList.splice( Util.getIndex( TMP.wheelThisObjList, this.handler ), 1 );
+                               if( TMP.wheelHandlerList.length === 0 ) this.element.onmousewheel = '';
+                       };                      
+               };
+               
+       /*-------------------------------------
+        *  DragHelper
+        */
+               var DragEventTicketClass = function( element, draghandler, opt_thisObject ){
+                       this.mousedownTicket = new EventTicketClass( element, 'mousedown', this.mousedownHandler, this );
+                       this.element         = element;
+                       this.handler         = draghandler;
+                       this.thisObject      = opt_thisObject;
+               };
+               DragEventTicketClass.prototype = {
+                       element         : null,
+                       handler         : null,
+                       thisObject      : null,
+                       startX          : 0,
+                       startY          : 0,
+                       dragging        : false,
+                       mousedownTicket : null,
+                       mousemoveTicket : null,
+                       mouseupTicket   : null,
+                       mouseoutTicket  : null,
+                       eventType       : 'mousedrag',
+                       fire            : EventTicketClass.prototype.fire,
+                       match           : EventTicketClass.prototype.match,
+                       mousedownHandler: function( e ){
+                               this.startX = e.clientX;
+                               this.startY = e.clientY;
+                               
+                               this.mousemoveTicket = new EventTicketClass( this.element, 'mousemove', this.dragMoveHandler, this );
+                               this.mouseupTicket   = new EventTicketClass( this.element, 'mouseup',   this.dragEndHandler,  this );
+                               this.mouseoutTicket  = new EventTicketClass( this.element, 'mouseout',  this.dragEndHandler,  this );                                   
+                       },
+                       dragMoveHandler : function( e ){
+                               var offsetX = e.clientX - this.startX,
+                                       offsetY = e.clientY - this.startY;
+                               if( this.dragging === false ){
+                                       if( offsetX * offsetX + offsetY * offsetY < DRAG_OFFSET ) return;
+                                       // dragStart
+                                       this.dragging = true;
+                                       return this.fire( DragEventTicketClass.createEvent( e, offsetX, offsetY, 0 ) );
+                               };
+                               return this.fire( DragEventTicketClass.createEvent( e, offsetX, offsetY, 1 ) );
+                       },
+                       dragEndHandler  : function( e ){
+                               var offsetX = e.clientX - this.startX,
+                                       offsetY = e.clientY - this.startY;
+                               if( this.dragging === true ){
+                                       this.removeEvents();
+                                       // dragEnd
+                                       return this.fire( DragEventTicketClass.createEvent( e, offsetX, offsetY, 2 ) );
+                               };
+                               this.removeEvents();
+                       },
+                       removeEvents : function(){
+                               this.dragging = false;
+                               if( this.mousemoveTicket ){
+                                       this.mousemoveTicket.destroy();
+                                       delete this.mousemoveTicket;
+                               };
+                               if( this.mouseupTicket ){
+                                       this.mouseupTicket.destroy();
+                                       delete this.mouseupTicket;
+                               };
+                               if( this.mouseoutTicket  ){
+                                       this.mouseoutTicket.destroy();
+                                       delete this.mouseoutTicket;
+                               };                              
+                       },
+                       destroy : function( _element, _eventType, _handler ){
+                               if( this.match( _element, _eventType, _handler ) === false ) return false;
+                               
+                               this.removeEvents();
+                               this.mousedownTicket.destroy();
+
+                               delete this.element;
+                               delete this.handler;
+                               delete this.thisObject;
+                               delete this.mousedownTicket;    
+                               return true;
+                       }
+               };
+               if( document.createEvent ){
+                       DragEventTicketClass.createEvent = function( e, offsetX, offsetY, dragPhase ){
+                               var _e = document.createEvent( 'MouseEvents' );
+                               _e.initMouseEvent(
+                                       DragEventTicketClass.prototype.eventType , false, true, e.view, 
+                                       e.detail, e.screenX, e.screenY, e.clientX, e.clientY, 
+                                       e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 
+                                       e.button, e.relatedTarget
+                               );
+                               _e.dragPhase   = dragPhase;
+                               _e.dragOffsetX = offsetX;
+                               _e.dragOffsetY = offsetY;
+                               return _e;
+                       };                                      
+               } else
+               if( document.attachEvent ){
+                       DragEventTicketClass.createEvent = function( e, offsetX, offsetY, dragPhase ){
+                               e.type        = DragEventTicketClass.prototype.eventType;
+                               e.dragPhase   = dragPhase;
+                               e.dragOffsetX = offsetX;
+                               e.dragOffsetY = offsetY;
+                               return e;
+                       };
+               } else {
+                       
+               };
+               
+               
+               return {
+                       add: function( _apiuser, _element, _eventType, _handler, opt_thisObject ){
+                               if( isApiUser( _apiuser ) === true &&
+                                       ( Type.isHTMLElement( _element ) === true || _element === window || _element === document ) &&
+                                       Type.isString( _eventType ) === true &&
+                                       Type.isFunction( _handler ) === true
+                               ){
+                                       var _uid    = _apiuser.getUID(),
+                                               _events = EVENT_LIST_MAP[ _uid ];
+                                       if( Type.isArray( _events ) === false ){
+                                               _events = EVENT_LIST_MAP[ _uid ] = [];
+                                       } else {
+                                               // 2重登録の禁止
+                                               for( var i=0, l=_events.length; i<l; ++i ){
+                                                       if( _events[ i ].match( _element, _eventType, _handler ) === true ) return;
+                                               };
+                                       };
+                                       switch( _eventType ){
+                                               case 'click':
+                                                       _events.push( new ClickEventTicketClass( _element, _handler, opt_thisObject ) );
+                                                       break;
+                                               case 'mousewheel':
+                                                       _events.push( new WheelEventTicketClass( _element, _handler, opt_thisObject ) );
+                                                       break;
+                                               case 'mousedrag':
+                                                       _events.push( new DragEventTicketClass( _element, _handler, opt_thisObject ) );
+                                                       break;
+                                               default:
+                                                       _events.push( new EventTicketClass( _element, _eventType, _handler, opt_thisObject ) );
+                                       };
+                               };
+                       },
+                       remove: function( _apiuser, _element, _eventType, _handler ){
+                               if( isApiUser( _apiuser ) === true ){
+                                       var _uid    = _apiuser.getUID(),
+                                               _events = EVENT_LIST_MAP[ _uid ],
+                                               _removed,
+                                               i = 0;
+                                       if( Type.isArray( _events ) === false ) return;
+                                       for( ;i < _events.length; ){
+                                               if( _events[ i ].destroy( _element, _eventType, _handler ) === true ){
+                                                       _events.splice( i, 1 );
+                                               } else {
+                                                       ++i;
+                                               };
+                                       };
+                                       if( _events.length === 0 ){
+                                               _events = EVENT_LIST_MAP[ _uid ] = null;
+                                       };
+                               };
+                       },
+                       onCurrentApplicationChange: function(){
+                               
+                       },
+                       onApplicationShutdown: function(){
+                               
+                       },
+                       onSystemShutdown: function(){
+                               
+                       }
+               }
+       })();
+
+/* ----------------------------------------
+ * KEY
+ * 
+ *  - EDITABLE_TEXT_CONTROL
+ * 
+ *    .SHIFT_DOWN_EVENT:       'shiftDown',
+ *    .SHIFT_UP_EVENT:         'shiftUp',
+ *    .CTRL_DOWN_EVENT:                'ctrlDown',
+ *    .CTRL_UP_EVENT:          'ctrlUp',
+ *    .SPACE_DOWN_EVENT:       'spaceDown',
+ *    .SPACE_UP_EVENT:         'spaceUp',
+ *    .init:                           function,
+ *    .addKeyDownEvent:                function,
+ *    .keyEventDispatcher:     function,
+ * 
+ * ショートカットキーの監視とテキスト入力(input, textarea)、チェックボックスを管理する。
+ * キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。
+ * 
+ */
+var KeyEvent = ( function(){
+       var EVENT_LIST_MAP = [],
+               LOCK_UP        = [],
+               LOCK_DOWN      = [],
+               application    = null,
+               currentList    = null;
+
+       window.focus();
+       
+       var focusTicket    = null,
+               keydownTicket  = null,
+               keyupTicket    = null,
+               keyPress       = null,
+               keypressTicket = null;
+       
+       function unlock( lock, key ){
+               lock.splice( Util.getIndex( lock, key ), 1 );
+       };
+       
+       function onKeyChange( e ){
+               var cancel         = false,
+                       type           = e.type,
+                       key            = e.keyCode, // || e.which,
+                       shift          = Type.isBoolean( e.shiftKey ) === true ? e.shiftKey : ( e.modifiers & Event.SHIFT_MASK ),
+                       ctrl           = Type.isBoolean( e.ctrlKey  ) === true ? e.ctrlKey  : ( e.modifiers & Event.CONTROL_MASK ),
+                       lock           = type === 'keyup' ? LOCK_UP : LOCK_DOWN;
+                       
+               // block chattering
+               if( Util.getIndex( lock, key ) !== -1 ) return;
+               lock.push( key );
+               AsyncCall.add( SUPER_USER_KEY, unlock, [ lock, key ] );
+               
+               if( key === 16 || shift === true ){
+                       KeyEvent.shiftEnabled = type !== 'keyup';
+               };
+               if( key === 17 || ctrl === true ){
+                       KeyEvent.ctrlEnabled  = type !== 'keyup';
+               };
+               for( var i=currentList.length, t; t = currentList[ --i ]; ){
+                       if( Type.isFunction( t[ type ] ) === true && t.keyCode === key && ( t.shift === undefined || t.shift === shift ) && ( t.ctrl === undefined || t.ctrl === ctrl )){
+                               AsyncCall.add( t.apiuser, t[ type ], e );
+                               cancel = true;
+                       };
+               };
+               if( cancel === true || key === 18 || key === 9 || key === 27 || e.altKey === true ){ // 13.enter 18.esc 9.tab 27.esc   || ( key === 13 && overlayEnabled === false)
+                       return false;
+               };
+       };
+       
+       if( UA.isIE === true && UA.ieRenderingVersion < 9 ){
+               keyPress = function( e ){
+                       var key = e.keyCode;
+                       if( key === 13 || key === 27 ){
+                               e.type = 'keydown';
+                               return onKeyChange( e );
+                       };
+               };
+       };
+       
+       var KeyEventTicketClass = function( _apiuser, _type, _onKeydown, _onKeyup, _keyCode, _shift, _ctrl ){
+               this.apiuser = _apiuser;
+               this.type    = _type;
+               this.keydown = _onKeydown;
+               this.keyup   = _onKeyup;                
+               this.keyCode = _keyCode;
+               this.shift   = _shift;
+               this.ctrl    = _ctrl;
+               _apiuser = _onKeydown = _onKeyup = null;
+       }
+       KeyEventTicketClass.prototype = {
+               match: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){
+                       if( _apiuser  && _apiuser  !== this.apiuser ) return false;
+                       if( _type     && _type     !== this.type )    return false;
+                       if( _handler ){
+                               if( this.type === 'keydown' ){
+                                       if( _handler !== this.keydown ) return false;
+                               } else {
+                                       if( _handler !== this.keyup )   return false;
+                               };
+                       };
+                       if( _keyCode  && _keyCode  !== this.keyCode ) return false;
+                       if( _shift    && _shift    !== this.shift )   return false;
+                       if( _ctrl     && _ctrl     !== this.ctrl )    return false;
+                       return true;
+               },
+               destroy: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){
+                       if( this.match( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ) === false ) return false;
+                       
+                       delete this.apiuser;
+                       delete this.keydown;
+                       delete this.keyup;
+                       
+                       return true;
+               }
+       };
+       
+       function registerEvent( _apiuser, _type, _onKeydown, _onKeyup, _keyCode, _shift, _ctrl ){
+               var _uid  = _apiuser.getUID(),
+                       _list = EVENT_LIST_MAP[ _uid ];
+               if( Type.isArray( _list ) === false ){
+                       _list = EVENT_LIST_MAP[ _uid ] = [];
+               }
+               for( var i=0, l=_list.length; i<l; ++i ){
+                       if( _list[ i ].match( _apiuser, _type, _onKeydown || _onKeyup, _keyCode, _shift, _ctrl ) === true ) return;
+               }
+               _list.push( new KeyEventTicketClass( _apiuser, _type, _onKeydown, _onKeyup, _keyCode, _shift, _ctrl ));
+               
+               if( _apiuser === application ) KeyEvent.updateCurrentListener( _apiuser );
+       };
+       
+       return {
+               add: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){
+                       if( _type === 'keydown' ){
+                               registerEvent( _apiuser, _type, _handler, null, _keyCode, _shift, _ctrl );
+                       } else
+                       if( _type === 'keyup' ){
+                               registerEvent( _apiuser, _type, null, _handler, _keyCode, _shift, _ctrl );
+                       } else
+                       if( _type === 'keychange' ){
+                               registerEvent( _apiuser, _type, _handler, _handler, _keyCode, _shift, _ctrl );
+                       } else
+                       if( _type === 'cursol' ){
+                               
+                       };
+               },
+               remove: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){
+                       var _list = EVENT_LIST_MAP[ _apiuser.getUID() ],
+                               i = 0;
+                       if( Type.isArray( _list ) === true ){
+                               while( i < _list.length ){
+                                       if( _list[ i ].destroy( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ) === true ){
+                                               _list.splice( i, 1 );
+                                       } else {
+                                               ++i;
+                                       }
+                               }
+                       }
+                       if( _apiuser === application ) KeyEvent.updateCurrentListener( _apiuser );
+               },
+               shiftEnabled: false,
+               ctrlEnabled:  false,
+               /*
+                * currentListener
+                *  currrentApplication ( overlay Application ) or
+                *  superuser ( UI )
+                */
+               updateCurrentListener: function( _apiuser ){
+                       application = _apiuser;
+                       var _uid    = _apiuser.getUID();
+                       currentList = EVENT_LIST_MAP[ _uid ] || ( EVENT_LIST_MAP[ _uid ] = [] );
+                       
+                       var _ticket,
+                               _down = false,
+                               _up   = false;
+                       for( var i=currentList.length; _ticket = currentList[ --i ]; ){
+                               if( _down === false ) _down = !!_ticket.keydown;
+                               if( _up   === false ) _up   = !!_ticket.keyup;
+                               if( _down && _up ) break;
+                       }
+                       if( _down === true ){
+                               keydownTicket = new EventTicketClass( document, 'keydown', onKeyChange );
+                               keypressTicket = keyPress !== null ? new EventTicketClass( document, 'keypress', keyPress ) : null;
+                       } else {
+                               keydownTicket && keydownTicket.destroy();
+                               keypressTicket && keypressTicket.destroy();
+                               keydownTicket = keypressTicket = null;
+                       }
+                       if( _up === true ){
+                               keyupTicket   = new EventTicketClass( document, 'keyup', onKeyChange );
+                       } else {
+                               keyupTicket && keyupTicket.destroy();
+                               keyupTicket = null;
+                       }
+                       
+                       if( _down === true || _up === true ){
+                               focusTicket   = new EventTicketClass( document, 'mouseenter', window.focus );
+                       } else {
+                               focusTicket && focusTicket.destroy();
+                               focusTicket = null;
+                       }
+               },
+               onApplicationShutdown: function( _apiuser ){
+                       KeyEvent.remove( _apiuser );
+               },
+               onSystemShutdown: function(){
+                       
+               }
+       }
+})();
+
+/**
+ * 
+ * http://thudjs.tumblr.com/post/637855087/stylesheet-onload-or-lack-thereof
+ */
+
+var StyleSheet = ( function(){
+       var head = document.getElementsByTagName( 'head' )[ 0 ];
+       
+       var TICKET_LIST = [];
+       var STATE_LIST  = 'loaded,complete,uninitialized'.split( ',' );
+       
+       var cssRules, sheet;
+       
+       var FetchCssTicketClass = function( _apiuser, _url, _elm, _onload, _onerror ){
+               this.apiusers = [ _apiuser ];
+               this.url      = _url;
+               this.elm      = _elm;
+               this.onload   = [ _onload ];
+               this.onerror  = [ _onerror ];
+               this.time     = 0;
+       };
+       FetchCssTicketClass.prototype = {
+               match: function( _apiuser, _url ){
+                       if( _apiuser  && Util.getIndex( this.apiusers, _apiuser ) === -1 ) return false;
+                       if( _url      && _url      !== this.url     ) return false;
+                       return true;
+               },
+               destroy: function( _apiuser, _url ){
+                       if( this.match( _apiuser, _url ) === false ) return false;
+                       
+                       var i = Util.getIndex( this.apiusers, _apiuser );
+                       
+                       this.apiusers.splice( i, 1 );
+                       this.onload.splice( i, 1 );
+                       this.onerror.splice( i, 1 );
+                       
+                       if( this.apiusers.length !== 0 ) return false;
+                       
+                       head.removeChild( this.elm );
+                       this.elm.onreadystatechange = new Function();
+                       this.elm.onload = null;
+                       
+                       delete this.apiusers;
+                       delete this.url;
+                       delete this.elm;
+                       delete this.onload;
+                       delete this.onerror;
+                       delete this.time;
+                       
+                       return true;
+               },
+               loaded: function(){
+               for( var i = this.onload.length, f; i; ){
+                       f = this.onload[ --i ];
+                       Type.isFunction( f ) === true && AsyncCall.add( this.apiusers[ i ], f, this.url );
+                       this.onload[ i ] = this.onerror[ i ] = null;
+               };
+               },
+               error: function(){
+               for( var i = this.onerror.length, f; i; ){
+                       f = this.onerror[ --i ];
+                       Type.isFunction( f ) === true && AsyncCall.add( this.apiusers[ i ], f, this.url );
+                       this.onload[ i ] = this.onerror[ i ] = null;
+               };
+               },
+               check: function(){
+                       var el = this.elm;
+                       try {
+                               return el[ sheet ] && el[ sheet ][ cssRules ].length > 0;
+                       } catch( e ){
+                               return false;
+                       };
+               },
+               done: false
+       };
+       
+       function getTicket( elm ){
+               for( var i = TICKET_LIST.length, t; i; ){
+                       t = TICKET_LIST[ --i ];
+                       if( t.elm === elm ) return t;
+               };
+       };
+       
+       function detect(){
+               var t = getTicket( this ), rs = this.readyState, c;
+               if( t && t.done === false && ( !rs || Util.getIndex( STATE_LIST, rs ) !== -1 ) ){
+                       t.done = true;
+               t.loaded();
+               this.onreadystatechange = new Function();
+               this.onload = null;
+               };
+       };
+       
+       function checkTimer(){
+               var l = TICKET_LIST.length,
+                       n = 0;
+               for( var i = 0; i < l; ++i ){
+                       t = TICKET_LIST[ i ];
+                       ++t.time;
+                       if( t.check() === true ){
+                               t.loaded();
+                               ++n;
+                       } else
+                       if( t.time > 99 ){
+                               t.error();
+                       } else {
+                               
+                       };
+               };
+               l === n && SystemTimer.remove( SUPER_USER_KEY, checkTimer );
+       };
+       
+       return {
+               load: function( _apiuser, _url, opt_onload, opt_onerror ){
+                       _url = Util.getAbsolutePath( _url );
+                       var t;
+                       for( var i=TICKET_LIST.length; i; ){
+                               t = TICKET_LIST[ --i ];
+                               if( t.match( null, _url ) === true ){
+                                       if( t.match( _apiuser, _url ) === false ){
+                                               t.apiusers.push( _apiuser );
+                                               t.onload.push( opt_onload );
+                                               t.onerror.push( opt_onerror );
+                                       };
+                                       SystemTimer.add( SUPER_USER_KEY, checkTimer, 333 );
+                                       return;
+                               };
+                       };
+                       var elm = document.createElement( 'link' );
+                       head.appendChild( elm );
+                       elm.rel  = 'stylesheet';
+                       elm.type = 'text\/css';
+                       elm.onreadystatechange = elm.onload = detect;
+                       elm.href = _url;
+                       
+                       if( !sheet ){ // only assign these once
+                               cssRules = 'cssRules';
+                               sheet    = 'sheet';
+                               if ( !( sheet in elm ) ) { // MSIE uses non-standard property names
+                                       cssRules = 'rules';
+                                       sheet    = 'styleSheet';
+                               };
+                       };
+                       
+                       TICKET_LIST.push( new FetchCssTicketClass( _apiuser, _url, elm, opt_onload, opt_onerror ) );
+                       
+                       SystemTimer.add( SUPER_USER_KEY, checkTimer, 333 );
+               },
+               unload: function( _apiuser, _url ){
+                       _url = _url ? Util.getAbsolutePath( _url ) : null;
+                       for( var i = 0; i < TICKET_LIST.length; ){
+                               t = TICKET_LIST[ i ];
+                               if( t.destroy( _apiuser, _url ) === true ){
+                                       TICKET_LIST.splice( i, 1 );
+                               } else {
+                                       ++i;
+                               }
+                       };
+                       if( TICKET_LIST.length === 0 ){
+                               SystemTimer.remove( SUPER_USER_KEY, checkTimer );
+                       }
+               }
+       }
+})();
+
+/*
+ * AssetLoader
+ * fetchCSS
+ * fetchJson
+ * fetchHtml
+ * fetchImage
+ * fetchLocalFile
  * fetchLocalStorage
- */\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, detect, 250 );\r
-               },\r
-               unload: function(  ){\r
-                       \r
-               }\r
-       };\r
-})();\r
-\r
-\r
-/* ----------------------------------------\r
- * \r
- */\r
-\r
-var Overlay = ( function(){\r
-       var elmContainer, elmShadow, elmCloseButton,\r
-               application    = null,\r
-               visible        = false,\r
-               bodyOverflow   = '',\r
-               windowW, windowH;\r
-\r
-       function onCloseClick( e ){\r
-               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
-               application.init();\r
-       };\r
-       function asyncOpen( /* arguments */ ){\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
-       function onFadeOutComplete(){   \r
-               Util.removeAllChildren( elmContainer );\r
-               body.removeChild( elmContainer );\r
-               elmContainer = elmShadow = elmCloseButton = null;\r
-       };\r
-       return {\r
-               show: function( _application, _bootParams ){\r
-                       if( visible === true && application === _application ) return;\r
-                       if( Application.isApplicationInstance( _application ) === false ) return;\r
-                       \r
-                       elmContainer = document.createElement( 'div' );\r
-                       body.appendChild( elmContainer );\r
-                       \r
-                       elmContainer.id = 'overlay-container';\r
-                       \r
-                       bodyOverflow        = body.style.overflow;\r
-                       body.style.overflow = 'hidden';\r
-                       \r
-                       elmShadow = document.createElement( 'div' );\r
-                       elmContainer.appendChild( elmShadow );\r
-                       elmShadow.id = 'overlay-shadow';\r
-                       \r
-                       elmCloseButton  = document.createElement( 'div' );\r
-                       elmContainer.appendChild( elmCloseButton );\r
-                       elmCloseButton.id = 'overlay-close-button';\r
-                       elmCloseButton.appendChild( document.createTextNode( 'x' ) );\r
-                       \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
-               hide: function(){\r
-                       if( visible === false ) return;\r
-                       if( application.close() === false ) return false;\r
-                       \r
-                       body.style.overflow = bodyOverflow;\r
-                       \r
-                       $( elmContainer ).stop().css( {\r
-                               filter:         '',\r
-                               opacity:        ''\r
-                       }).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
-                       windowW = _windowW;\r
-                       windowH = _windowH;                     \r
-                       \r
-                       if( application === null ) return;\r
-                       \r
-                       elmContainer.style.height = _windowH + 'px';\r
-                       elmContainer.style.top    = body.scrollTop + 'px';\r
-\r
-                       elmShadow.style.height = _windowH + 'px';\r
-\r
-                       AsyncCall.add( application, application.resize, [ _windowW, _windowH ] );\r
-               }\r
-       }\r
-})();\r
-\r
-/* ----------------------------------------\r
- * UI\r
- * \r
- * keyEventRellay\r
- *  form -> overlay -> view\r
- * \r
- */\r
-\r
-var UI = ( function(){\r
-       var UI_LIST     = [],\r
-               currentUser = null,\r
-               currentList = null,\r
-               currentUi   = null,\r
-               currentItem = null,\r
-               windowW     = 0,\r
-               windowH     = 0;\r
-\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
-                               elmValue  = document.createElement( 'span' );\r
-                       ret.href = '#';\r
-                       ret.appendChild( elmToggle );\r
-                       ret.appendChild( elmValue );\r
-                       elmToggle.className = 'combobox-toggle';\r
-                       elmValue.className  = 'combobox-value';\r
-                       \r
-                       elmToggle.appendChild( document.createTextNode( '▼' ));\r
-                       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
-               this.focus = function( e ){\r
-                       focus = true;\r
-                       start( apiuser, uiGroup, instance );\r
-                       elmA.style.display = 'none';\r
-                       \r
-                       elmValue.appendChild( ELM_INPUT_TEXT );\r
-                       ELM_INPUT_TEXT.value = value;\r
-                       ELM_INPUT_TEXT.focus();\r
-                       ELM_INPUT_TEXT.select();\r
-\r
-                       return false;\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
-                       elmValue.removeChild( ELM_INPUT_TEXT );\r
-                       \r
-                       elmA.innerHTML     = _newValue;\r
-                       elmA.style.display = 'block';\r
-                       \r
-                       onUpdate && _newValue !== value && AsyncCall.add( apiuser, onUpdate, [ _newValue, value ], instance );\r
-                       \r
-                       value = _newValue;\r
-                       focus = false;\r
-                       finish( apiuser, uiGroup, instance );\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
-                       return visible;\r
-               };\r
-               this.destroy = function(){\r
-                       if( focus === true ){\r
-                               elmValue.removeChild( ELM_INPUT_TEXT );\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 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, null, instance );\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
-                       };\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
-                       return visible;\r
-               };\r
-               this.destroy = function(){\r
-                       MouseEvent.remove( apiuser, elmWrapper );\r
-                       apiuser = uiGroup = elmWrapper = onUpdate = instance = null;\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
-\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
-                       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
-                       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
-                                       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
-                                               };\r
-                                               Type.isFunction( onUpdate ) === true && AsyncCall.add( apiuser, onUpdate, _value, instance );\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
-                               _option, i;\r
-                       _value      = _value || _displayValue;\r
-                       _isSelected = !!_isSelected;\r
-                       for( i = optionList.length; i; ){\r
-                               _option = optionList[ --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
-                       };                      \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
-       };\r
-       var OptionDataClass = function( displayValue, value, isCurrent ){\r
-               this.displayValue = displayValue;\r
-               this.value        = value || displayValue;\r
-               this.current      = isCurrent;\r
-               displayValue = value = null;\r
-       };\r
-\r
-       var OptionControl = ( function(){\r
-               var ELM_OPTION_WRAPPER = ( function(){\r
-                               var ret = document.createElement( 'div' );\r
-                               ret.className = 'option-container';\r
-                               return ret;\r
-                       })(),\r
-                       ELM_OPTION_ORIGIN = ( function(){\r
-                               var ret = document.createElement( 'a' );\r
-                               ret.appendChild( document.createTextNode( 'option' ) );\r
-                               ret.href = '#';\r
-                               return ret;\r
-                       })();\r
-\r
-               var OptionClass = function( option ){\r
-                       this.elm     = ELM_OPTION_ORIGIN.cloneNode( true );\r
-                       this.data    = option;\r
-                       this.init();\r
-               };\r
-               OptionClass.prototype = {\r
-                       init: function(){\r
-                               ELM_OPTION_WRAPPER.appendChild( this.elm );\r
-                               this.elm.firstChild.data = this.data.displayValue;\r
-                               this.current( this.data.current );\r
-                               MouseEvent.add( SUPER_USER_KEY, this.elm, 'mousedown', onOptionSelect );// onclick では 選択ボックス 隠すように body に設定した onmouseup が先に動いてしまう!\r
-                       },\r
-                       current: function( _current ){\r
-                               this.elm.className = _current === true ? CLASSNAME_COMBOBOX_OPTION_CURRENT : CLASSNAME_COMBOBOX_OPTION;\r
-                               this.data.current  = _current;\r
-                               currentOption      = _current === true ? this : currentOption;\r
-                       },\r
-                       destroy: function(){\r
-                               MouseEvent.remove( SUPER_USER_KEY, this.elm );\r
-                               Util.removeAllChildren( this.elm );\r
-                               ELM_OPTION_WRAPPER.removeChild( this.elm );\r
-                               delete this.elm;\r
-                               delete this.data;\r
-                       }\r
-               };\r
-               \r
-               function onOptionSelect( e ){\r
-                       for( var i = 0, l = OPTION_LIST.length, _option; i < l; ++i){\r
-                               _option = OPTION_LIST[ i ];\r
-                               if( this === _option.elm ){\r
-                                       updateCurrrentOption(  _option.data.value, true );\r
-                                       currentCombobox.blur();\r
-                                       break;\r
-                               };\r
-                       };\r
-                       return false;\r
-               };\r
-               \r
-               var OPTION_LIST     = [],\r
-                       currentCombobox = null,\r
-                       apiuser,\r
-                       elm,\r
-                       currentOption,\r
-                       currentIndex;\r
-               \r
-               function updateCurrrentOption( _value, _updateCombobox ){\r
-                       var _option;\r
-                       for( var i = OPTION_LIST.length; i; ){\r
-                               _option = OPTION_LIST[ --i ];\r
-                               if( _value === _option.data.value ){\r
-                                       currentOption && currentOption.current( false );\r
-                                       _option.current( true );\r
-                                       currentOption = _option;\r
-                                       currentIndex  = i;\r
-                                       _updateCombobox === true && currentCombobox.value( _value );\r
-                                       \r
-                                       break;\r
-                               };\r
-                       };\r
-               };\r
-               function bodyMouseupHandler(){\r
-                       currentCombobox.blur();\r
-                       OptionControl.hide( currentCombobox );\r
-               };\r
-               function updateWrapperPosition(){\r
-                       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
-               };\r
-               function change( e ){\r
-                       var l   = OPTION_LIST.length,\r
-                               i   = currentIndex + ( e.keyCode === 40 ? -1 : 1 );\r
-                       if( currentCombobox === null || l < 2 ) return;\r
-                       i = i < 0 ?\r
-                                       l - 1 :\r
-                                       i < l ? i : 0;\r
-                       updateCurrrentOption( OPTION_LIST[ i ].data.value, true );\r
-                       return false;\r
-               };\r
-               return {\r
-                       show: function( _apiuser, _combobox, _optionList ){\r
-                               if( currentItem !== _combobox || currentCombobox === _combobox ) return;\r
-                               currentCombobox && currentCombobox.blur();\r
-                               \r
-                               apiuser         = _apiuser;\r
-                               currentCombobox = _combobox;\r
-                               elm             = _combobox.elm;\r
-                               \r
-                               for( var i = 0, l = _optionList.length; i<l; ++i ){\r
-                                       OPTION_LIST.unshift( new OptionClass( _optionList[ 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
-                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change, 40 );\r
-                               //KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onEnter, 13 );\r
-                               //KeyEvent.updateCurrentListener( SUPER_USER_KEY );\r
-                               \r
-                               body.appendChild( ELM_OPTION_WRAPPER );\r
-                               \r
-                               updateCurrrentOption( _combobox.value(), false );\r
-                               updateWrapperPosition();\r
-                               \r
-                               SystemTimer.add( SUPER_USER_KEY, updateWrapperPosition, 500 );\r
-                       },\r
-                       hide: function( _combobox ){\r
-                               if( currentCombobox !== _combobox || currentCombobox === null ) return;\r
-\r
-                               var _option;\r
-                               while( _option = OPTION_LIST.shift() ){\r
-                                       _option.destroy();\r
-                               };\r
-                               \r
-                               body.removeChild( ELM_OPTION_WRAPPER );\r
-                               \r
-                               MouseEvent.remove( SUPER_USER_KEY, doc, '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
-                               //KeyEvent.updateCurrentListener( apiuser );\r
-                               \r
-                               SystemTimer.remove( SUPER_USER_KEY, updateWrapperPosition, 500 );\r
-                               \r
-                               apiuser         = null;\r
-                               currentCombobox = null;\r
-                               currentOption   = null;\r
-                               currentIndex    = 0;                            \r
-                       },\r
-                       onEnter: function(){\r
-                               currentCombobox.value( currentOption.data.value );\r
-                               //currentCombobox.blur();\r
-                               //OptionControl.hide( currentCombobox );\r
-                       },\r
-                       update: function( _combobox, _value ){\r
-                               if( currentCombobox !== _combobox || currentItem !== _combobox ) 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
-       var UIGroupClass = function( apiuser ){\r
-               var self        = this,\r
-                       itemList    = [],\r
-                       windowW, windowH;\r
-\r
-               this.focus = function( _value ){\r
-                       /*\r
-                       if( _value === true ){\r
-                               if( currentItem ){\r
-                                       start( apiuser, self, currentItem );\r
-                               } else\r
-                               if( itemList.length > 0 ){\r
-                                       start( apiuser, self, itemList[ 0 ] );\r
-                               };\r
-                       } else\r
-                       if( _value === false ){\r
-                               finish( apiuser, self, currentItem );\r
-                       } else\r
-                       */\r
-                       if( _value && Util.getIndex( itemList, _value ) !== -1 ){\r
-                               // currentItem = _value;\r
-                               currentList = itemList;\r
-                       };\r
-                       return currentUi === self; \r
-               };\r
-               this.blur = function(){\r
-                       if( currentList === 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
-                               return ret;\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
-                       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
-                       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
-                       return ret;\r
-               };\r
-               this.createCheckBox = function(){\r
-                       \r
-               };\r
-               this.createRadio = function(){\r
-                       \r
-               };\r
-               this.createSlider = function(){\r
-                       \r
-               };\r
-               this.destroy = function(){\r
-                       var _item;\r
-                       while( _item = itemList.shift() ){\r
-                               _item.destroy();\r
-                       };\r
-                       if( currentUi === this ){\r
-                               currentItem = null;\r
-                               currentUi   = null;\r
-                               currentUser = null;\r
-                               currentList = null;\r
-                       };\r
-                       apiuser = self = null;\r
-               };\r
-       };\r
-       \r
-       function start( _apiuser, _uigroup, _item ){\r
-               if( currentItem !== _item ){\r
-                       currentUi !== _uigroup && currentUi && currentUi.blur();\r
-                       \r
-                       currentItem !== null && currentItem.blur();\r
-                       \r
-                       currentUser = _apiuser;\r
-                       currentUi   = _uigroup;\r
-                       currentItem = _item;\r
-                       \r
-                       _uigroup.focus( _item );\r
-                       \r
-                       // if( currentUser !== _apiuser ) {\r
-                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );\r
-                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );\r
-                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );\r
-                               KeyEvent.updateCurrentListener( SUPER_USER_KEY );\r
-                       // };\r
-               };\r
-       }\r
-       function finish( _apiuser, _uigroup, _item ){\r
-               if( currentItem === _item ){\r
-                       _uigroup.blur();\r
-                       \r
-                       currentUser = null;\r
-                       currentUi   = null;\r
-                       currentItem = null;\r
-                       currentList = null;\r
-                       \r
-                       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
-               };\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
-\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 ){\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
-               },\r
-               onWindowResize: function( w, h ){\r
-                       windowW = w;\r
-                       windowH = h;\r
-                       currentItem instanceof ComboBoxClass && OptionControl.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
-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
-                                       '<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
-                                                               '<span class="finder-icon-filename break-word">file name</span>',\r
-                                                       '</span>',\r
-                                               '</span>',\r
-                                       '</span>',\r
-                                       '<span class="finder-icon-cell finder-icon-ie-summary">',\r
-                                               '<span class="finder-icon-vertical-middle-outer">',\r
-                                                       '<span class="finder-icon-vertical-middle-inner">',\r
-                                                               '<span class="finder-icon-summary break-word">file descriptiion</span>',\r
-                                                       '</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
-       \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
-       \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
-                       return false;\r
-               }\r
-               function onViwerClick(){\r
-                       onViewerCallback( file, viewerList[ 0 ] );\r
-                       return false;\r
-               }\r
-               function onActionClick(){\r
-                       onActionCallback( 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
-                       if( Type.isArray( viewerList ) === true && viewerList.length > 0 ){\r
-                               ELM_VIEWER_BUTTON.style.display = '';\r
-                       } else {\r
-                               ELM_VIEWER_BUTTON.style.display = 'none';\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
-                       };\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
-                       \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
-               }\r
-               function resize( index ){\r
-                       ELM_WRAPPER.style.left = ( index * 90 ) + 'px';\r
-               }\r
-               function onClick(){\r
-                       callback( index );\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
-               };\r
-               this.destroy = function(){\r
-                       elmContainer.removeChild( ELM_WRAPPER );\r
-                       file = elmContainer = null;\r
-                       BREAD_OBJECT_POOL.push( this );\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
-                       };\r
-                       while( l < BREAD_ARRAY.length ){\r
-                               BREAD_ARRAY.pop().destroy();\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
-                       };\r
-                       if( _file.getState() === Const.FILE.STATE.LOADING ){\r
-                               elmBody.className = 'finder-body loading';\r
-                       } else {\r
-                               elmBody.className = 'finder-body';\r
-                       };\r
-                       \r
-                       elmBody.style.height = bodyH + 'px';\r
-                       \r
-                       while( l < ICON_ARRAY.length && ICON_ARRAY.length > 0 ){\r
-                               ICON_ARRAY.pop().destroy();\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
-                               };\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
-                               } else {\r
-                                       Type.isFunction( onSelect ) === true && onSelect( _file );\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
-                       \r
-                       w = _w;\r
-                       h = _h;\r
-                       elmBody.style.height = ( _h - headH ) + 'px';\r
-                       \r
-                       for( var i = ICON_ARRAY.length; i; ){\r
-                               ICON_ARRAY[ --i ].onResize( _w );\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
-                       };\r
-                       while( ICON_ARRAY.length > 0 ){\r
-                               ICON_ARRAY.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
-\r
-       return {\r
-               init: function(){\r
-                       \r
-               },\r
-               create: function( _application, _elmTarget, _tree, _header, _footer, _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
-               },\r
-               registerFinderHead: function(){\r
-                       \r
-               },\r
-               registerFinderPane: function( _finderPane ){\r
-                       \r
-               },\r
-               isFinderInstance: function( _finder ){\r
-                       return _finder instanceof FinderClass;\r
-               },\r
-               isFinderPaneInstance: function(){\r
-                       \r
-               },\r
-               isFinderHeadInstance: function(){\r
-               }\r
-       };\r
-})();\r
-\r
-\r
-/*\r
- * -- len, %\r
- * marginBottom, marginLeft, marginRight, marginTop, margin\r
- * padding, paddingBottom, paddingLeft, paddingRight, paddingTop\r
- * fontSize, textIndent\r
- * height, width\r
- * bottom, left, right, top                    (len, %)\r
- *\r
- * -- len\r
- * borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderWidth,\r
- * letterSpacing\r
- *\r
- * -- color\r
- * backgroundColor\r
- * borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, borderColor\r
- * color\r
- *\r
- * -- special\r
- * clip                        rect(0px, 40px, 40px, 0px);\r
- * backgroundPosition  (len, %)\r
- * opacity\r
- * lineHeight          (len, %, num)\r
- * zIndex                      ( order )\r
- */\r
-\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
-       \r
-       function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames ){\r
-               var _ticket, i = ANIMATION_TICKET_ARRAY.length;\r
-               for( ; i; ){\r
-                       _ticket = ANIMATION_TICKET_ARRAY[ --i ];\r
-                       if( _ticket.elm === _elm ){\r
-                               return;\r
-                       };\r
-               };\r
-               \r
-               var _currentValues     = [],\r
-                       _offsetValues      = [],\r
-                       _endValues         = [],\r
-                       _targetProperties  = [],\r
-                       _units             = [];\r
-               var target, current,\r
-                       inlineStyle    = CSS.getInlineStyle( _elm ),\r
-                       currentStyle   = CSS.getWrappedStyle( _elm ),\r
-                       targetStyle    = CSS.getWrappedStyle( _elm, _cssObject );\r
-                       targetStyle.pxPerEm = currentStyle.get( 'fontSize' )._toPx();\r
-               for( var p in _cssObject ){\r
-                       p       = Util.camelize( p );\r
-                       target  = targetStyle.get( p );\r
-                       current = currentStyle.get( p );\r
-\r
-                       if( target.isValid() === false || current.isValid() === false || current.equal( target ) !== false ){\r
-                               target.clear();\r
-                               current.clear();\r
-                               continue;\r
-                       };\r
-                       \r
-                       current.convert( target );\r
-                       // alert( current.getValue() + ' , ' + target.getValue() )\r
-                       _currentValues.push( current.getValue() );\r
-                       _offsetValues.push( current.getOffset( target ) );\r
-                       _endValues.push( target.getValue() );\r
-                       _targetProperties.push( p );\r
-                       _units.push( target.getUnit() );\r
-\r
-                       // IE has trouble with opacity if it does not have layout\r
-                       // Force it by setting the zoom level                   \r
-                       if( p === 'opacity' && SPECIAL.hasLayout ){\r
-                               if( SPECIAL.hasLayout( _elm ) === false ) inlineStyle.zoom = 1;\r
-                               inlineStyle.filter = current.getValueText();\r
-                       } else {\r
-                               inlineStyle[ p ]   = current.getValueText();\r
-                       };\r
-                       \r
-                       target.clear();\r
-                       current.clear();\r
-               };\r
-               \r
-               var i, _cssTextArray = [];\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
-                       } else {\r
-                               createCssText( _endValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );\r
-                       };\r
-               };\r
-               \r
-               ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(\r
-                       _elm, _cssTextArray,\r
-                       Type.isFunction( _onComplete ) === true   ? _onComplete   : null,\r
-                       Type.isFunction( _onEnterFrame ) === true ? _onEnterFrame : null,\r
-                       _numFrames\r
-               ) );\r
-               \r
-               currentStyle.clear();\r
-               targetStyle.clear();            \r
-               SystemTimer.add( SUPER_USER_KEY, onEnterFrame, 1000 / fpms );\r
-       };\r
-       \r
-       function tickValue( current, offset, numFrames ){\r
-               if( Type.isArray( current ) === true ){\r
-                       var ret, i = current.length;\r
-                       for( ; i; ){\r
-                               --i;\r
-                               ret = tickValue( current[ i ], offset[ i ], numFrames );\r
-                               if( Type.isNumber( ret ) === true ) current[ i ] = ret;\r
-                       };\r
-               } else {\r
-                       return current + offset / numFrames;\r
-               };\r
-       };\r
-       function createCssText( update, props, style, inline, cssTextArray ){\r
-               var prop;\r
-               for( var i = props.length; i; ){\r
-                       prop = style.get( props[ --i ] );\r
-                       prop.setValue( update[ i ] );\r
-                       inline[ Util.uncamelize( prop.name ) ] = prop.getValueText();\r
-                       //if( prop.name === 'backgroundColor' ) alert( prop.getValueText() + '|' + update[ i ].join( ',') )\r
-                       prop.clear();\r
-               };\r
-               cssTextArray.push( 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
-                       l       = _ticket.cssTexts.length;\r
-                       _ticket.elm.style.cssText = _ticket.cssTexts.shift();\r
-                       if( l === 1 ){\r
-                               _ticket.onComplete && _ticket.onComplete();\r
-                               delete _ticket.elm;\r
-                               delete _ticket.cssTexts;\r
-                               delete _ticket.onComplete;\r
-                               delete _ticket.onEnterFrame;\r
-                               delete _ticket.numFrame;\r
-                               ANIMATION_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
-                       SystemTimer.remove( SUPER_USER_KEY, onEnterFrame );\r
-               };\r
-       };\r
-       \r
-       var AnimationTaskClass = function( elm, cssTexts, onEnterFrame, onComplete, numFrame ){\r
-               this.elm          = elm;\r
-               this.cssTexts     = cssTexts;\r
-               this.onEnterFrame = onEnterFrame;\r
-               this.onComplete   = onComplete;\r
-               this.numFrame     = numFrame;\r
-       };\r
-       \r
-       var VisualEffectClass = function( elm ){\r
-               var isHtmlElement;\r
-               \r
-               function registerAnime( _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
-                       \r
-               };\r
-               function update( _x, _y, _w, _h ){\r
-                       var _cssText = elm.style.cssText;\r
-                       \r
-               };\r
-               \r
-               this.anime   = registerAnime;\r
-               this.fadeIn  = startFadeIn;\r
-               this.fadeOut = startFadeOut;\r
-               this.update  = update;\r
-       };\r
-       \r
-       return {\r
-               create: function( application, _elm ){\r
-                       return new VisualEffectClass( _elm );\r
-               },\r
-               isInstanceOfVisualEffect: function( _instance){\r
-                       return _instance instanceof VisualEffectClass;\r
-               }\r
-       }\r
-})();\r
-\r
-\r
-/* --------------------------------------------\r
- * \r
- */\r
-\r
-       Application.onCurrentApplicationChange( SUPER_USER_KEY );\r
-       \r
-       SERVICE_LIST.push( MouseEvent );\r
-       \r
-       new EventTicketClass( window, 'unload', function(){\r
-               var _service;\r
-               while( SERVICE_LIST.length > 0 ){\r
-                       _service = SERVICE_LIST.shift();\r
-                       Type.isFunction( _service.onSystemShutdown ) === true && _service.onSystemShutdown();\r
-               }\r
-       });\r
-       // beforeunload\r
-\r
-\r
-/* ---------------------------------------------\r
- * broadcast to global\r
- */\r
-       window.gOS = {};\r
-       \r
-       gOS.registerApplication = Application.register;\r
-       gOS.registerDriver      = File.registerDriver;\r
-       \r
-})( window, document );\r
+ */
+
+var Image = ( function(){
+       var TASK_LIST = [];
+       /* 
+        * FetchClass original is
+        * 
+        * LICENSE: MIT?
+        *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631
+        *  AUTHOR: uupaa.js@gmail.com
+        * 
+        */
+       function detect(){
+               for( var i=0, t; i < TASK_LIST.length; ){
+                       t = TASK_LIST[ i ];
+                       if( t.complete() === true ){
+                               TASK_LIST.splice( i, 1 );
+                       } else {
+                               ++i;
+                       };
+               };
+               TASK_LIST.length === 0 && SystemTimer.remove( SUPER_USER_KEY, detect );
+       };
+       function getTask( img ){
+               for( var i = TASK_LIST.length; i; ){
+                       if( TASK_LIST[ --i ].img === img ) return TASK_LIST[ i ];
+               };
+       };
+       function onError(){
+               var task = getTask( this );
+               if( task.finish === true ) return;
+               task.finish = true;
+               AsyncCall.add( task.apiuser, task.asyncCallback, null, task );
+       };
+       function onLoad(){
+               // if( finish === true ) return; // これがあると firefox3.6 で駄目、、、
+               // if( timer ) return; // これがあると safari3.2 で駄目、、、
+               var task = getTask( this );
+               task.finish = true;
+               TASK_LIST.splice( Util.getIndex( TASK_LIST, task ), 1 );
+               if( window.opera && !task.img.complete ){
+                       AsyncCall.add( task.apiuser, task.asyncCallback, null, task );
+                       return;
+               };
+               task.size = Util.getImageSize( this );
+               AsyncCall.add( task.apiuser, task.asyncCallback, null, task );
+       };
+
+
+       var FetchClass = function( apiuser, abspath, onLoadCallback, onErrorCallback, timeout ){
+               this.apiuser         = apiuser;
+               this.abspath         = abspath;
+               this.onLoadCallback  = onLoadCallback;
+               this.onErrorCallback = onErrorCallback;
+               this.timeout         = timeout;
+               this.tick            = 0;
+       };
+       FetchClass.prototype = {
+               img: null,
+               size: null,
+               tick: 0,
+               finish: false,
+               load: function(){
+                       var img     = this.img = document.createElement( 'img' ); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る
+                       img.onabort = img.onerror = onError;
+                       img.onload  = onLoad;
+                       img.src     = this.abspath;
+               },
+               complete: function(){
+                       if( this.finish === true ) return true;
+                       if( this.img.complete ){
+                               this.finish = true;
+                               if( this.img.width ) return true;
+                               AsyncCall.add( this.apiuser, this.asyncCallback, null, this );
+                               return true;
+                       };
+                       if( ( this.tick += 250 ) > this.timeout ){
+                               this.finish = true;
+                               AsyncCall.add( this.apiuser, this.asyncCallback, null, this );
+                               return true;
+                       };
+               },
+               asyncCallback: function(){
+                       this.size ? this.onLoadCallback( this.abspath, this.size.width, this.size.height ) : this.onErrorCallback( this.abspath );
+                       this.destroy();
+               },
+               destroy: function(){
+                       this.finish  = true;
+                       this.img.src = this.img.onload = this.img.onabort = this.img.onerror = '';
+                       delete this.img;
+                       delete this.size;
+                       delete this.onLoadCallback;
+                       delete this.onErrorCallback;
+               },
+               stop: function(){
+                       timer !== null && window.clearTimeout( timer );
+                       destroy();
+               }
+       };
+       
+       return {
+               load: function( URLorELM, onLoad, onError, opt_timeout ){
+                       var src, fetch;
+                       if( Type.isString( URLorELM ) === true ){
+                               src = URLorELM;
+                       } else
+                       if( Type.isHTMLElement( URLorELM ) === true && URLorELM.tagName.toLowerCase() === 'img' ){
+                               src = URLorELM.src;
+                       } else {
+                               return;
+                       };
+                       
+                       fetch = new FetchClass(
+                               Util.getAbsolutePath( src ),
+                               onLoad, onError,
+                               Type.isFinite( opt_timeout ) === true ? opt_timeout : undefined
+                       );
+                       TASK_LIST.push( fetch );
+                       
+                       SystemTimer.add( SUPER_USER_KEY, detect, 250 );
+               },
+               unload: function(  ){
+                       
+               }
+       };
+})();
+
+
+/* ----------------------------------------
+ * 
+ */
+
+var Overlay = ( function(){
+       var elmContainer, elmShadow, elmCloseButton,
+               application    = null,
+               visible        = false,
+               bodyOverflow   = '',
+               windowW, windowH;
+
+       function onCloseClick( e ){
+               Overlay.hide();
+               return false;
+       };
+       function asyncInit( /* arguments */ ){  
+               
+               //body.appendChild( application.rootElement );
+               elmContainer.insertBefore( application.rootElement, elmCloseButton );
+               application.rootElement.style.display = 'none';
+               application.init();
+       };
+       function asyncOpen( /* arguments */ ){
+               
+               var _arg = Util.copyArray( arguments );
+               _arg.unshift( windowW, windowH );
+               application.open.apply( application, _arg );
+               
+               elmContainer.style.cssText = "top:" + body.scrollTop + 'px;display:none;';
+               $( elmContainer ).stop().fadeIn( onFadeInComplete );            
+       };
+       function onFadeInComplete(){
+               KeyEvent.add( application, Const.KEY.EVENT.KEY_DOWN, Overlay.hide, 27 ); // 27.esc
+               MouseEvent.add( application, elmCloseButton, 'click', onCloseClick );
+       };
+       function onFadeOutComplete(){   
+               Util.removeAllChildren( elmContainer );
+               body.removeChild( elmContainer );
+               elmContainer = elmShadow = elmCloseButton = null;
+       };
+       return {
+               show: function( _application, _bootParams ){
+                       if( visible === true && application === _application ) return;
+                       if( Application.isApplicationInstance( _application ) === false ) return;
+                       
+                       elmContainer = document.createElement( 'div' );
+                       body.appendChild( elmContainer );
+                       
+                       elmContainer.id = 'overlay-container';
+                       
+                       bodyOverflow        = body.style.overflow;
+                       body.style.overflow = 'hidden';
+                       
+                       elmShadow = document.createElement( 'div' );
+                       elmContainer.appendChild( elmShadow );
+                       elmShadow.id = 'overlay-shadow';
+                       
+                       elmCloseButton  = document.createElement( 'div' );
+                       elmContainer.appendChild( elmCloseButton );
+                       elmCloseButton.id = 'overlay-close-button';
+                       elmCloseButton.appendChild( document.createTextNode( 'x' ) );
+                       
+                       elmContainer.style.display = 'none'; // hide for fadeIn
+                       
+                       _application.addAsyncCall( asyncInit );
+                       _application.addAsyncCall( asyncOpen, _bootParams );
+                       
+                       visible     = true;
+                       application = _application;
+               },
+               hide: function(){
+                       if( visible === false ) return;
+                       if( application.close() === false ) return false;
+                       
+                       body.style.overflow = bodyOverflow;
+                       
+                       $( elmContainer ).stop().css( {
+                               filter:         '',
+                               opacity:        ''
+                       }).fadeOut( onFadeOutComplete );
+                       visible = false;
+                       
+                       KeyEvent.remove( application, Const.KEY.EVENT.KEY_DOWN, Overlay.hide ); // 27.esc
+                       MouseEvent.remove( application, elmCloseButton );
+                       
+                       application = null;
+               },
+               onWindowResize: function( _windowW, _windowH ){
+                       windowW = _windowW;
+                       windowH = _windowH;                     
+                       
+                       if( application === null ) return;
+                       
+                       elmContainer.style.height = _windowH + 'px';
+                       elmContainer.style.top    = body.scrollTop + 'px';
+
+                       elmShadow.style.height = _windowH + 'px';
+
+                       AsyncCall.add( application, application.resize, [ _windowW, _windowH ] );
+               }
+       }
+})();
+
+/* ----------------------------------------
+ * UI
+ * 
+ * keyEventRellay
+ *  form -> overlay -> view
+ * 
+ */
+
+var UI = ( function(){
+       var UI_LIST     = [],
+               currentUser = null,
+               currentList = null,
+               currentUi   = null,
+               currentItem = null,
+               windowW     = 0,
+               windowH     = 0;
+
+       var CLASSNAME_COMBOBOX_OPTION = 'combobox-option',
+               CLASSNAME_COMBOBOX_OPTION_CURRENT = CLASSNAME_COMBOBOX_OPTION + ' combobox-option-current',
+               ELM_A_ORIGIN = ( function(){
+                       var ret = document.createElement( 'a' );
+                       ret.href = '#';
+                       return ret;
+               })(),
+               ELM_INPUT_TEXT = ( function(){
+                       var ret = document.createElement( 'input' );
+                       ret.type = 'text';
+                       return ret;
+               })(),
+               ELM_COMBOBOX = ( function(){
+                       var ret       = document.createElement( 'a' ),
+                               elmToggle = document.createElement( 'span' ),
+                               elmValue  = document.createElement( 'span' );
+                       ret.href = '#';
+                       ret.appendChild( elmToggle );
+                       ret.appendChild( elmValue );
+                       elmToggle.className = 'combobox-toggle';
+                       elmValue.className  = 'combobox-value';
+                       
+                       elmToggle.appendChild( document.createTextNode( '▼' ));
+                       elmValue.appendChild( document.createTextNode( 'null' ));
+                       return ret;
+               })();
+               
+       var InputTextClass = function( apiuser, uiGroup, elmWrapper, elmValue, onUpdate, validater ){
+               var elmA     = ELM_A_ORIGIN.cloneNode( true ),
+                       instance = this,
+                       focus    = false,
+                       visible  = true,
+                       enabled  = true,
+                       value    = elmValue.innerHTML;
+               elmValue.innerHTML = '';
+               elmValue.className += ' editable-text';
+               elmValue.appendChild( elmA );
+               
+               this.value = function( _value ){
+                       if( Type.isString( _value ) === true || Type.isNumber( _value ) === true ){
+                               value = '' + _value;
+                               elmA.innerHTML = '' + _value;
+                               if( focus === true ){
+                                       ELM_INPUT_TEXT.value = '' + value;
+                               };
+                       };
+                       focus === true && instance.blur();
+                       return value;
+               };
+               this.focus = function( e ){
+                       focus = true;
+                       start( apiuser, uiGroup, instance );
+                       elmA.style.display = 'none';
+                       
+                       elmValue.appendChild( ELM_INPUT_TEXT );
+                       ELM_INPUT_TEXT.value = value;
+                       ELM_INPUT_TEXT.focus();
+                       ELM_INPUT_TEXT.select();
+
+                       return false;
+               };
+               this.blur = function( keep ){
+                       var _newValue = ELM_INPUT_TEXT.value,
+                               _validated = Type.isFunction( validater ) === true ? '' + validater( _newValue ) : _newValue;
+                       _newValue = keep !== 27 ? _validated : value; // 27:ESC
+
+                       elmValue.removeChild( ELM_INPUT_TEXT );
+                       
+                       elmA.innerHTML     = _newValue;
+                       elmA.style.display = 'block';
+                       
+                       onUpdate && _newValue !== value && AsyncCall.add( apiuser, onUpdate, [ _newValue, value ], instance );
+                       
+                       value = _newValue;
+                       focus = false;
+                       finish( apiuser, uiGroup, instance );
+               };
+               this.enabled = function(){
+                       return enabled;
+               };
+               this.visible = function( _visible ){
+                       if( Type.isBoolean( _visible ) === true ){
+                               elmWrapper.style.display = _visible ? '' : 'none';
+                               visible = _visible;
+                       }
+                       return visible;
+               };
+               this.destroy = function(){
+                       if( focus === true ){
+                               elmValue.removeChild( ELM_INPUT_TEXT );
+                       }
+                       MouseEvent.remove( apiuser, elmWrapper );
+                       
+                       apiuser = uiGroup = elmWrapper = elmValue = elmA = onUpdate = validater = instance = null;
+               };
+               instance.value( value );
+               MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
+       };
+       
+       var ButtonClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){
+               var instance  = this,
+                       focus     = false,
+                       visible   = true,
+                       enabled   = true;
+               MouseEvent.add( apiuser, elmWrapper, 'click', onClick );
+               
+               function onClick(){
+                       focus = true;
+                       // onUpdate();
+                       AsyncCall.add( apiuser, onUpdate, null, instance );
+                       return false;
+               };
+               this.focus = function(){
+                       focus = true;
+                       Util.addClass( elmWrapper, 'button-has-focus' );
+                       start( apiuser, uiGroup, instance );
+               };
+               this.blur = function( keyCode ){
+                       keyCode === 13 && onClick();
+                       Util.removeClass( elmWrapper, 'button-has-focus' );
+                       focus = false;
+                       finish( apiuser, uiGroup, instance );
+               };
+               this.enabled = function( _enabled ){
+                       if( Type.isBoolean( _enabled ) === true && enabled !== _enabled ){
+                               _enabled === true ? Util.removeClass( elmWrapper, 'button-disabled' ) : Util.addClass( elmWrapper, 'button-disabled' );
+                               enabled = _enabled;
+                       };
+                       return enabled;
+               };
+               this.visible = function( _visible ){
+                       if( Type.isBoolean( _visible ) === true ){
+                               elmWrapper.style.display = _visible ? '' : 'none';
+                               visible = _visible;
+                       };
+                       return visible;
+               };
+               this.destroy = function(){
+                       MouseEvent.remove( apiuser, elmWrapper );
+                       apiuser = uiGroup = elmWrapper = onUpdate = instance = null;
+               };
+       };
+
+       var ComboBoxClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){
+               var elmBox     = Util.getElementsByClassName( elmWrapper, 'combobox' )[ 0 ],
+                       elmA       = ELM_COMBOBOX.cloneNode( true ),
+                       elmToggle  = Util.getElementsByClassName( elmA, 'combobox-toggle' )[ 0 ],
+                       elmValue   = Util.getElementsByClassName( elmA, 'combobox-value' )[ 0 ].firstChild,
+                       index      = 0,
+                       optionList = [],
+                       instance   = this,
+                       focus      = false,
+                       visible    = true,
+                       enabled    = true,
+                       value;
+               elmBox.appendChild( elmA );
+
+               this.elm = elmBox;
+               this.focus = function( e ){
+                       MouseEvent.remove( apiuser, elmWrapper, 'click', instance.focus );
+                       focus = true;
+                       elmA.className = 'combobox-has-focus';
+                       start( apiuser, uiGroup, instance );
+                       OptionControl.show( apiuser, instance, optionList );
+                       return false;
+               };
+               this.blur = function( keyCode ){
+                       OptionControl.hide( instance );
+                       focus = false;
+                       elmA.className = '';
+                       finish( apiuser, uiGroup, instance );
+                       MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
+               };
+               this.enabled = function(){
+                       return enabled;
+               };
+               this.visible = function( _visible ){
+                       if( Type.isBoolean( _visible ) === true ){
+                               elmWrapper.style.display = _visible ? '' : 'none';
+                               visible = _visible;
+                       };
+                       return visible;
+               };
+               this.value = function( _value ){
+                       if( Type.isString( _value ) === true && value !== _value ){
+                               for( var i=0, l = optionList.length, _option; i<l; ++i ){
+                                       _option = optionList[ i ];
+                                       if( _value === _option.value ){
+                                               value = _value;
+                                               index = i;
+                                               elmValue.data = _option.displayValue;
+                                               if( focus === true ){
+                                                       OptionControl.update( instance, _value );
+                                               };
+                                               Type.isFunction( onUpdate ) === true && AsyncCall.add( apiuser, onUpdate, _value, instance );
+                                               break;
+                                       };
+                               };
+                       };
+                       return value;
+               };
+               this.selectIndex = function(){
+                       return index;
+               };
+               this.createOption = function( _displayValue, _value, _isSelected ){
+                       var option = null,
+                               _option, i;
+                       _value      = _value || _displayValue;
+                       _isSelected = !!_isSelected;
+                       for( i = optionList.length; i; ){
+                               _option = optionList[ --i ];
+                               if( _value === _option.value ){
+                                       option = _option;
+                                       break;
+                               };
+                       };
+                       if( _isSelected === true ){
+                               index = optionList.length;
+                               elmValue.data = _displayValue;
+                       };                      
+                       if( option === null ){
+                               option = new OptionDataClass( _displayValue, _value, _isSelected );
+                               optionList.push( option );
+                       };
+               };
+               this.destroy = function(){
+                       instance.blur();
+                       MouseEvent.remove( apiuser, elmWrapper );
+                       optionList.length = 0;
+                       apiuser = uiGroup = elmWrapper = onUpdate = elmBox = elmA = elmToggle = elmValue = optionList = instance = null;
+               };
+               MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
+       };
+       var OptionDataClass = function( displayValue, value, isCurrent ){
+               this.displayValue = displayValue;
+               this.value        = value || displayValue;
+               this.current      = isCurrent;
+               displayValue = value = null;
+       };
+
+       var OptionControl = ( function(){
+               var ELM_OPTION_WRAPPER = ( function(){
+                               var ret = document.createElement( 'div' );
+                               ret.className = 'option-container';
+                               return ret;
+                       })(),
+                       ELM_OPTION_ORIGIN = ( function(){
+                               var ret = document.createElement( 'a' );
+                               ret.appendChild( document.createTextNode( 'option' ) );
+                               ret.href = '#';
+                               return ret;
+                       })();
+
+               var OptionClass = function( option ){
+                       this.elm     = ELM_OPTION_ORIGIN.cloneNode( true );
+                       this.data    = option;
+                       this.init();
+               };
+               OptionClass.prototype = {
+                       init: function(){
+                               ELM_OPTION_WRAPPER.appendChild( this.elm );
+                               this.elm.firstChild.data = this.data.displayValue;
+                               this.current( this.data.current );
+                               MouseEvent.add( SUPER_USER_KEY, this.elm, 'mousedown', onOptionSelect );// onclick では 選択ボックス 隠すように body に設定した onmouseup が先に動いてしまう!
+                       },
+                       current: function( _current ){
+                               this.elm.className = _current === true ? CLASSNAME_COMBOBOX_OPTION_CURRENT : CLASSNAME_COMBOBOX_OPTION;
+                               this.data.current  = _current;
+                               currentOption      = _current === true ? this : currentOption;
+                       },
+                       destroy: function(){
+                               MouseEvent.remove( SUPER_USER_KEY, this.elm );
+                               Util.removeAllChildren( this.elm );
+                               ELM_OPTION_WRAPPER.removeChild( this.elm );
+                               delete this.elm;
+                               delete this.data;
+                       }
+               };
+               
+               function onOptionSelect( e ){
+                       for( var i = 0, l = OPTION_LIST.length, _option; i < l; ++i){
+                               _option = OPTION_LIST[ i ];
+                               if( this === _option.elm ){
+                                       updateCurrrentOption(  _option.data.value, true );
+                                       currentCombobox.blur();
+                                       break;
+                               };
+                       };
+                       return false;
+               };
+               
+               var OPTION_LIST     = [],
+                       currentCombobox = null,
+                       apiuser,
+                       elm,
+                       currentOption,
+                       currentIndex;
+               
+               function updateCurrrentOption( _value, _updateCombobox ){
+                       var _option;
+                       for( var i = OPTION_LIST.length; i; ){
+                               _option = OPTION_LIST[ --i ];
+                               if( _value === _option.data.value ){
+                                       currentOption && currentOption.current( false );
+                                       _option.current( true );
+                                       currentOption = _option;
+                                       currentIndex  = i;
+                                       _updateCombobox === true && currentCombobox.value( _value );
+                                       
+                                       break;
+                               };
+                       };
+               };
+               function bodyMouseupHandler(){
+                       currentCombobox.blur();
+                       OptionControl.hide( currentCombobox );
+               };
+               function updateWrapperPosition(){
+                       var position = Util.getAbsolutePosition( elm );
+
+                       ELM_OPTION_WRAPPER.style.cssText = [
+                                       'width:', elm.offsetWidth - 2, 'px;',
+                                       'left:', position.x, 'px;',
+                                       'top:', position.y + elm.offsetHeight, 'px;'
+                               ].join( '' );
+               };
+               function change( e ){
+                       var l   = OPTION_LIST.length,
+                               i   = currentIndex + ( e.keyCode === 40 ? -1 : 1 );
+                       if( currentCombobox === null || l < 2 ) return;
+                       i = i < 0 ?
+                                       l - 1 :
+                                       i < l ? i : 0;
+                       updateCurrrentOption( OPTION_LIST[ i ].data.value, true );
+                       return false;
+               };
+               return {
+                       show: function( _apiuser, _combobox, _optionList ){
+                               if( currentItem !== _combobox || currentCombobox === _combobox ) return;
+                               currentCombobox && currentCombobox.blur();
+                               
+                               apiuser         = _apiuser;
+                               currentCombobox = _combobox;
+                               elm             = _combobox.elm;
+                               
+                               for( var i = 0, l = _optionList.length; i<l; ++i ){
+                                       OPTION_LIST.unshift( new OptionClass( _optionList[ i ] ) );
+                               };
+                               MouseEvent.add( SUPER_USER_KEY, document, 'mouseup', bodyMouseupHandler );
+                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change, 38 );
+                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change, 40 );
+                               //KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onEnter, 13 );
+                               //KeyEvent.updateCurrentListener( SUPER_USER_KEY );
+                               
+                               body.appendChild( ELM_OPTION_WRAPPER );
+                               
+                               updateCurrrentOption( _combobox.value(), false );
+                               updateWrapperPosition();
+                               
+                               SystemTimer.add( SUPER_USER_KEY, updateWrapperPosition, 500 );
+                       },
+                       hide: function( _combobox ){
+                               if( currentCombobox !== _combobox || currentCombobox === null ) return;
+
+                               var _option;
+                               while( _option = OPTION_LIST.shift() ){
+                                       _option.destroy();
+                               };
+                               
+                               body.removeChild( ELM_OPTION_WRAPPER );
+                               
+                               MouseEvent.remove( SUPER_USER_KEY, document, 'mouseup', bodyMouseupHandler );
+                               KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change );
+                               KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change );
+                               //KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onEnter );
+                               //KeyEvent.updateCurrentListener( apiuser );
+                               
+                               SystemTimer.remove( SUPER_USER_KEY, updateWrapperPosition, 500 );
+                               
+                               apiuser         = null;
+                               currentCombobox = null;
+                               currentOption   = null;
+                               currentIndex    = 0;                            
+                       },
+                       onEnter: function(){
+                               currentCombobox.value( currentOption.data.value );
+                               //currentCombobox.blur();
+                               //OptionControl.hide( currentCombobox );
+                       },
+                       update: function( _combobox, _value ){
+                               if( currentCombobox !== _combobox || currentItem !== _combobox ) return;
+                               if( currentOption.data.value === _value ) return;
+                               updateCurrrentOption( _value, true );
+                       },
+                       onWindowResize: function( _w, _h ){
+                               currentCombobox && AsyncCall.add( apiuser, updateWrapperPosition );
+                       }
+               };
+       })();
+
+       var UIGroupClass = function( apiuser ){
+               var self        = this,
+                       itemList    = [],
+                       windowW, windowH;
+
+               this.focus = function( _value ){
+                       /*
+                       if( _value === true ){
+                               if( currentItem ){
+                                       start( apiuser, self, currentItem );
+                               } else
+                               if( itemList.length > 0 ){
+                                       start( apiuser, self, itemList[ 0 ] );
+                               };
+                       } else
+                       if( _value === false ){
+                               finish( apiuser, self, currentItem );
+                       } else
+                       */
+                       if( _value && Util.getIndex( itemList, _value ) !== -1 ){
+                               // currentItem = _value;
+                               currentList = itemList;
+                       };
+                       return currentUi === self; 
+               };
+               this.blur = function(){
+                       if( currentList === itemList ){
+                               currentList = null;
+                       };
+               };
+               this.createInputText = function( _elmWrapper, _onUpdate, _validater ){
+                       var _elmValue = Util.getElementsByClassName( _elmWrapper, 'editable-value' )[ 0 ];
+                       if( _elmValue ){
+                               var ret = new InputTextClass( apiuser, self, _elmWrapper, _elmValue, _onUpdate, _validater );
+                               itemList.push( ret );
+                               return ret;
+                       }
+                       alert( 'error createInputText' );
+               };
+               this.createButton = function( _elm, _onClick ){
+                       var ret = new ButtonClass( apiuser, self, _elm, _onClick );
+                       itemList.push( ret );
+                       return ret;
+               };
+               this.createFileInput = function( _elm, _onUpdate, _validater, _elmFileInput ){
+                       var ret = FileInputClass( apiuser, self, _elm, _onUpdate, _validater, _elmFileInput );
+                       itemList.push( ret );
+                       return ret;
+               };
+               this.createCombobox = function( _elm, _onUpdate, _optionList ){
+                       var ret = new ComboBoxClass( apiuser, self, _elm, _onUpdate, _optionList );
+                       itemList.push( ret );
+                       return ret;
+               };
+               this.createCheckBox = function(){
+                       
+               };
+               this.createRadio = function(){
+                       
+               };
+               this.createSlider = function(){
+                       
+               };
+               this.destroy = function(){
+                       var _item;
+                       while( _item = itemList.shift() ){
+                               _item.destroy();
+                       };
+                       if( currentUi === this ){
+                               currentItem = null;
+                               currentUi   = null;
+                               currentUser = null;
+                               currentList = null;
+                       };
+                       apiuser = self = null;
+               };
+       };
+       
+       function start( _apiuser, _uigroup, _item ){
+               if( currentItem !== _item ){
+                       currentUi !== _uigroup && currentUi && currentUi.blur();
+                       
+                       currentItem !== null && currentItem.blur();
+                       
+                       currentUser = _apiuser;
+                       currentUi   = _uigroup;
+                       currentItem = _item;
+                       
+                       _uigroup.focus( _item );
+                       
+                       // if( currentUser !== _apiuser ) {
+                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );
+                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );
+                               KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );
+                               KeyEvent.updateCurrentListener( SUPER_USER_KEY );
+                       // };
+               };
+       }
+       function finish( _apiuser, _uigroup, _item ){
+               if( currentItem === _item ){
+                       _uigroup.blur();
+                       
+                       currentUser = null;
+                       currentUi   = null;
+                       currentItem = null;
+                       currentList = null;
+                       
+                       KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );
+                       KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );
+                       KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );
+                       KeyEvent.updateCurrentListener( _apiuser );
+               };
+       };
+
+       function onKeyDown( e ){
+               if( currentItem === null ) return true;
+               var keyCode = e.keyCode,
+                       _index  = Util.getIndex( currentList, currentItem );
+               if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt
+                       keyCode === 9  && tabShift( _index, e.shiftKey === true ? -1 : 1 );
+                       keyCode === 13 && currentItem instanceof ComboBoxClass && OptionControl.onEnter();
+                       keyCode === 13 && tabShift( _index, 1 );                        
+                       currentItem && currentItem.blur( keyCode );
+               };
+               return false;
+       };
+
+       function tabShift( _index, _way ){
+               var l = currentList.length,
+                       i = _index + _way,
+                       _item;
+               if( l < 2 ) return;
+               while( i !== _index ){
+                       i = i < 0 ?
+                               l - 1 :
+                               i < l ? i : 0; // 0 < i < l
+                       _item = currentList[ i ];
+                       if( _item.enabled() === true && _item.visible() === true ){
+                               AsyncCall.add( currentUser, _item.focus, null, _item );
+                               return;
+                       };
+                       i += _way;
+               };
+       };
+       
+       return {
+               createUIGroup: function( _apiuser ){
+                       var _uid  = _apiuser.getUID(),
+                               _list = UI_LIST[ _uid ],
+                               _ui   = new UIGroupClass( _apiuser );
+                       if( Type.isArray( _list ) === false ){
+                               _list = UI_LIST[ _uid ] = [];
+                       }
+                       _list.push( _ui );
+                       return _ui;
+               },
+               onWindowResize: function( w, h ){
+                       windowW = w;
+                       windowH = h;
+                       currentItem instanceof ComboBoxClass && OptionControl.onWindowResize( w, h );
+               },
+               onCurrentApplicationChange: function( _apiuser ){
+                       currentList = UI_LIST[ _apiuser.getUID() ];
+               },
+               onApplicationShutdown: function( _apiuser ){
+                       KeyEvent.remove( _apiuser );
+               },
+               onSystemShutdown: function(){
+                       
+               }
+       }
+})();
+
+
+var Finder = ( function(){
+       var HTML_FINDER_ICON = ( function(){
+               return ( UA.isIE === true && UA.ieVersion < 8 ?
+               [
+                       '<div class="finder-icon fnder-icon-ie7">',
+                               '<span class="finder-icon-handle"></span>',
+                               '<span class="finder-icon-thumbnail"></span>',
+                               '<span class="finder-icon-cell finder-icon-ie-filename">',
+                                       '<span class="finder-icon-vertical-middle-outer">',
+                                               '<span class="finder-icon-vertical-middle-inner">',
+                                                       '<span class="finder-icon-filename break-word">file name</span>',
+                                               '</span>',
+                                       '</span>',
+                               '</span>',
+                               '<span class="finder-icon-cell finder-icon-ie-summary">',
+                                       '<span class="finder-icon-vertical-middle-outer">',
+                                               '<span class="finder-icon-vertical-middle-inner">',
+                                                       '<span class="finder-icon-summary break-word">file descriptiion</span>',
+                                               '</span>',
+                                       '</span>',
+                               '</span>',
+                       '</div>'
+               ] :
+               [
+                       '<div class="finder-icon fnder-icon-modern">',
+                               '<span class="finder-icon-handle"></span>',
+                               '<span class="finder-icon-thumbnail"></span>',
+                               '<span class="finder-icon-filename break-word">file name</span>',
+                               '<span class="finder-icon-summary break-word">file descriptiion</span>',
+                       '</div>'
+               ] ).join( '' );
+       })();
+
+       
+       var FINDER_LIST              = [],
+               ELM_ORIGIN_LOCATION_ITEM = Util.pullHtmlAsTemplete( '<div class="finder-location-item"></div>' ),
+               ELM_ORIGIN_FINDER_ICON   = Util.pullHtmlAsTemplete( HTML_FINDER_ICON ),
+               ELM_ORIGIN_CONTAINER     = Util.pullHtmlAsTemplete( '<div class="finder-body"></div>' ),
+               ICON_HEIGHT              = Util.getElementSize( ELM_ORIGIN_FINDER_ICON ).height,
+               ICON_CLASSNAME           = 'finder-icon-thumbnail',
+               elmConsole               = Util.pullHtmlAsTemplete( [
+                       '<div class="finder-icon-console">',
+                               '<a href="#" class="finder-icon-console-action"></a>',
+                               '<a href="#" class="finder-icon-console-editor-apps"></a>',
+                               '<a href="#" class="finder-icon-console-viewer-apps"></a>',
+                       '</div>'
+               ].join( '' ) );
+       
+/**
+ * FinderIconClass
+ */
+       var FinderIconClass = function(){};
+       FinderIconClass.prototype = {
+               finderData       : null,
+               file             : null,
+               elm              : null,
+               node             : null,
+               _index           : -1,
+               _style           : -1,
+               init : function( finderData, file, w, index, style ){
+                       if( !this.elm ) this.elm  = ELM_ORIGIN_FINDER_ICON.cloneNode( true );
+
+                       if( this.finderData !== finderData ){
+                               this.finderData = finderData;
+                               finderData.elmScroll.appendChild( this.elm );
+                               this.node && this.node.remove();
+                               this.node = finderData.nodeRoot.createNode( this.elm, false, true, 'finder-icon-hover', '' );
+                       };
+                       if( this.file !== file ){
+                               this.file && this.file.destroy();
+                               this.file   = file;
+                               this._index = index;
+                               this.draw( w );
+                               return;
+                       };
+                       if( this._index !== index ){
+                               this._index = index;
+                               this.resize( w );
+                       };
+               },
+               index : function( _index ){     
+                       return this._index;
+               },
+               style : function( _style ){
+                       return this._style;
+               },
+               draw : function( w ){
+                       var file       = this.file,
+                               elm        = this.elm,
+                               thumb      = file.getThumbnail(),
+                               elmThumb   = Util.getElementsByClassName( elm, ICON_CLASSNAME )[ 0 ],
+                               elmName    = Util.getElementsByClassName( elm, 'finder-icon-filename' )[ 0 ],
+                               elmDesc    = Util.getElementsByClassName( elm, 'finder-icon-summary' )[ 0 ];
+                       if( thumb.image ){
+                               elmThumb.className = ICON_CLASSNAME + ' has-thumbnail';
+                               elmThumb.style.backgroundImage = [ 'url(', thumb.image, ')' ].join( '' );
+                       } else {
+                               elmThumb.className = ICON_CLASSNAME + ' ' + thumb.className;
+                               elmThumb.style.backgroundImage = '';
+                       };
+                       
+                       elmName.firstChild.data = file.getName();
+                       elmDesc.firstChild.data = file.getSummary();
+                       
+                       this.resize( w );
+               },
+               resize : function( w ){
+                       this.node.update( 0, this._index * ICON_HEIGHT, w );
+               },
+               onEditorClick : function( e ){
+                       this.onEditorCallback && this.onEditorCallback( this.file, this.file.editorApplicationList()[ 0 ] );
+                       return false;
+               },
+               onViwerClick : function( e ){
+                       this.onViewerCallback && this.onViewerCallback( this.file, this.file.viewerApplicationList()[ 0 ] );
+                       return false;
+               },
+               onActionClick : function( e ){
+                       this.onActionCallback && this.onActionCallback( this.file );
+                       return false;
+               },
+               destroy : function(){
+                       this.elm && this.elm.parentNode.removeChild( this.elm );
+                       this.file && this.file.destroy();
+                       this.node && this.node.remove();
+                       delete this.finderData;
+                       delete this.file;
+                       delete this.node;
+                       delete this._index;
+                       delete this._style;
+                       FinderIconClass.pool.push( this );
+               }       
+       };
+       FinderIconClass.pool = [];
+       FinderIconClass.get = function( finderData, file, w, index, style ){
+               var _icon = FinderIconClass.pool.length > 0 ? FinderIconClass.pool.shift() : new FinderIconClass();
+               _icon.init( finderData, file, w, index, style );
+               return _icon;
+       };
+
+/**
+ * PathClass
+ */
+       var PathClass = function(){};
+       PathClass.prototype = {
+               finderData : null,
+               elm        : null,
+               node       : null,
+               file       : null,
+               _index     : null,
+               w          : 0,
+               init : function( finderData, file, index ){
+                       if( !this.elm ) this.elm  = ELM_ORIGIN_LOCATION_ITEM.cloneNode( true );
+                       
+                       if( this.finderData !== finderData ){
+                               this.finderData = finderData;
+                               finderData.elmPath.appendChild( this.elm );
+                               this.node && this.node.remove();
+                               delete this.node;
+                       };
+                       if( this.file !== file ){
+                               this.file = file;
+                               this.draw();
+                       };
+                       if( this._index !== index ){
+                               this._index = index;
+                               this.resize( index );
+                       };
+                       if( !this.node ) this.node = finderData.nodePath.createNode( this.elm, false, true, 'finder-path-hover', 'pointer' );
+               },
+               draw  : function(){
+                       this.elm.className = 'file-icon-' + this.file.getType();
+                       this.elm.innerHTML = this.file.getName();                       
+               },
+               resize : function(){
+                       this.elm.style.left = ( this._index * 90 ) + 'px';
+               },
+               index : function( _index ){
+                       return this._index;
+               },
+               destroy : function(){
+                       this.finderData.elmPath.removeChild( this.elm );
+                       this.node && this.node.remove();
+                       
+                       delete this.finderData;
+                       delete this.elm;
+                       delete this.node;
+                       delete this.file;
+                       delete this._index;
+                       PathClass.pool.push( this );
+               }
+       };
+       PathClass.pool = [];
+       PathClass.get  = function( finderData, file, index ){
+               var _bread = PathClass.pool.length > 0 ? PathClass.pool.shift() : new PathClass();
+               _bread.init( finderData, file, index );
+               return _bread;
+       };
+       
+/**
+ * FinderPrivateData
+ */
+       var FinderPrivateData = function(){};
+       FinderPrivateData.prototype = {
+               finder       : null,
+               apiuser      : null,
+               elmRoot      : null,
+               nodeRoot     : null,
+               elmScroll    : null,
+               elmPath      : null,
+               nodePath     : null,
+               tree         : null,
+               onSelect     : null,
+               viewerOption : null,
+               editorOption : null,
+               iconList     : null,
+               pathList     : null,
+               headH        : 0,
+               iconW        : 0,
+               iconH        : 0,
+               style        : 0,
+               init : function( finder, apiuser, elm, tree, onSelect, viewerOption, editorOption ){
+                       this.finder       = finder;
+                       this.apiuser      = apiuser;
+                       if( PointingDeviceEventTree.isNodeInstance( elm ) === true ){
+                               this.nodeRoot = elm;
+                               this.elmRoot  = PointingDeviceEventTree._getNodePrivateData( elm ).elm;
+                       } else {
+                               // App が eventTree を持っている?
+                               // App が eventTree を持っていない
+                               this.elmRoot  = elm;
+                       };
+                       this.nodeRoot.addEventListener( 'click', this.onIconClick, this );
+                       
+                       this.elmScroll    = document.createElement( 'div' );
+                       this.elmRoot.appendChild( this.elmScroll );
+                       this.elmScroll.style.cssText = 'width:100%;';
+                       
+                       this.tree         = tree;
+                       this.onSelect     = onSelect;
+                       this.viewerOption = viewerOption;
+                       this.editorOption = editorOption;
+                       
+                       this.iconList     = [];
+                       
+                       var size          = Util.getElementSize( ELM_ORIGIN_FINDER_ICON );
+                       this.iconW        = size.width;
+                       this.iconH        = size.height;
+                       
+                       tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, this.draw, this );
+                       Util.addClass( this.elmRoot, 'finder-body' );
+                       
+                       FinderPrivateData.LIST.push( this );
+               },
+               onIconClick : function( e ){
+                       var target = e.target,
+                               i      = target.nodeIndex(),
+                               file;
+                       if( target === this.nodeRoot ) return;
+                       var file = this.tree.getCurrentFile().getChildFileByIndex( i );
+                       if( file !== null && ( file.getChildFileLength() !== -1 || file.getType() === Const.FILE.TYPE.FOLDER )){
+                               this.tree.down( i );
+                               this.draw();
+                       } else {
+                               Type.isFunction( this.onSelect ) === true && this.onSelect( file );
+                       };
+                       file.destroy();
+               },
+               onPathClick : function( e ){
+                       var target = e.target,
+                               i      = target.nodeIndex();
+                       if( target === this.nodePath || this.nodePath.numNode() - 1 === i ) return;
+                       this.tree.up( i );
+                       this.draw();
+               },
+               draw : function( _w, _h ){
+                       var data = this;
+                       data.w   = _w = Type.isFinite( _w ) === true ? _w : data.w;
+                       data.h   = _h = Type.isFinite( _h ) === true ? _h : data.h;
+                       data.elmPath && data.drawPath( _w );
+                       data.drawBody( _w, _h );
+               },
+               drawPath : function( _w ){
+                       if( !this.elmPath.parentNode ) return;
+                       
+                       var data      = this,
+                               tree      = data.tree,
+                               apiuser   = data.apiuser,
+                               pathList  = data.pathList,
+                               i         = 0,
+                               l         = tree.hierarchy() + 1,
+                               m         = pathList.length,
+                               file;
+                       
+                       for( ; i < l; ++i ){
+                               file = i !== l - 1 ? tree.getParentFileAt( i ) : tree.getCurrentFile();
+                               if( i < m ){
+                                       pathList[ i ].init( this, file, i );
+                               } else {
+                                       pathList.push( PathClass.get( this, file, i ) );
+                               };
+                       };
+                       while( l < pathList.length ) pathList.pop().destroy();
+               },
+               drawBody : function( _w, _h ){
+                       var data     = this,
+                               apiuser  = data.apiuser,
+                               iconList = data.iconList,
+                               file     = data.tree.getCurrentFile(),
+                               i        = 0,
+                               l        = file.getChildFileLength(),
+                               m        = iconList.length;
+
+                       for( ; i < l; ++i ){
+                               if( i < m ){
+                                       iconList[ i ].init( this, file.getChildFileByIndex( i ), _w, i, data.style );
+                               } else {
+                                       iconList.push( FinderIconClass.get( this, file.getChildFileByIndex( i ), _w, i, data.style ) );
+                               };
+                       };
+                       data.elmRoot.className    = file.getState() === Const.FILE.STATE.LOADING ? 'finder-body loading' : 'finder-body';
+                       // data.elmRoot.style.height = ( data.h - data.headH ) + 'px';
+                       
+                       while( l < iconList.length ) iconList.pop().destroy();
+                       
+                       this.nodeRoot.invalidateScrollbar();
+               },
+               createPath : function( node ){
+                       if( this.elmPath ) return;
+                       
+                       if( PointingDeviceEventTree.isNodeInstance( node ) === true ){
+                               this.nodePath = node;
+                               this.elmPath  = PointingDeviceEventTree._getNodePrivateData( node ).elm;
+                               
+                               node.addEventListener( 'click', this.onPathClick, this );
+                               Util.addClass( this.elmPath, 'finder-path' );
+                               // this.elmPath  = document.createElement( 'div' );
+                               // this.elmPath.className = ;
+                               this.pathList = [];
+                               // this.headH    = 0;
+                               AsyncCall.add( this.apiuser, this.draw, null, this );                           
+                       };
+               },
+               destroy : function(){
+                       this.tree.removeTreeEventListener( Const.TREE.EVENT.UPDATE, this.draw );
+                       
+                       this.nodeRoot.remove();
+                       this.nodePath && this.nodePath.remove();
+                       
+                       if( this.pathList ){
+                               while( this.pathList.length > 0 ) this.pathList.shift().destroy();
+                       };
+                       while( this.iconList.length > 0 ) this.iconList.shift().destroy();
+                       
+                       this.elmRoot.removeChild( this.elmRoot );
+               }
+       };
+       FinderPrivateData.LIST = [];
+       FinderPrivateData.get = function( finderOrTree ){
+               var list = FinderPrivateData.LIST,
+                       i    = list.length,
+                       data;
+               for( ; i; ){
+                       data = list[ --i ];
+                       if( data === finderOrTree || data.finder === finderOrTree || data.tree === finderOrTree ) return data;
+               };
+               return null;
+       };
+       
+/**
+ * FinderClass
+ */
+       var FinderClass = function( application, elmRoot, tree, onSelect, viewerOption, editorOption ){
+               ( new FinderPrivateData() ).init( this, application, elmRoot, tree, onSelect, viewerOption, editorOption );
+       };
+       FinderClass.prototype            = new AbstractBasicPane();
+       FinderClass.prototype.MIN_WIDTH  = 240;
+       FinderClass.prototype.MIN_HEIGHT = 240;
+       FinderClass.prototype.onInit     = function(){
+               var data = FinderPrivateData.get( this );
+               // var position = Util.getAbsolutePosition( elmPath );
+               // data.headX = position.x;
+               // data.headY = position.y;
+               // data.bodyY = Util.getAbsolutePosition( data.elmBody ).y;
+               console.log( 'Finder  onInit..........' );
+               data.apiuser.addEventListener( data.elmRoot, 'mousemove',  data.mousemove,  data );
+               data.apiuser.addEventListener( data.elmRoot, 'click',      data.click,      data );
+               data.apiuser.addEventListener( data.elmRoot, 'mousewheel', data.mousewheel, data );
+       };
+       FinderClass.prototype.onPaneResize = function( _w, _h ){
+               var data = FinderPrivateData.get( this ),
+                       i    = data.iconList.length;
+               //data.draw( _w, _h );                  
+
+               //data.elmRoot.style.height = ( _h - data.headH ) + 'px';
+               
+               for( ; i; ) data.iconList[ --i ].resize( _w );
+       };
+       FinderClass.prototype.createPath = function( node ){
+               return FinderPrivateData.get( this ).createPath( node );
+       };
+       FinderClass.prototype.destroy = function(){
+               FinderPrivateData.get( this ).destroy();
+               FINDER_LIST.splice( Util.getIndex( FINDER_LIST, this ), 1 );
+       };
+
+       return {
+               init: function(){
+                       
+               },
+               create: function( application, elmTarget, tree, onSelect, viewerOption, editorOption ){
+                       //if( Application.isApplicationInstance( _application ) === false ) return;
+                       
+                       var finder = new FinderClass( application, elmTarget, tree, onSelect, viewerOption, editorOption );
+                       finder.init();
+                       FINDER_LIST.push( finder );
+                       return finder;
+               },
+               registerFinderHead: function(){
+                       
+               },
+               registerFinderPane: function( _finderPane ){
+                       
+               },
+               isFinderInstance: function( _finder ){
+                       return _finder instanceof FinderClass;
+               },
+               isFinderPaneInstance: function(){
+                       
+               },
+               isFinderHeadInstance: function(){
+               }
+       };
+})();
+
+
+/*
+ * -- len, %
+ * marginBottom, marginLeft, marginRight, marginTop, margin
+ * padding, paddingBottom, paddingLeft, paddingRight, paddingTop
+ * fontSize, textIndent
+ * height, width
+ * bottom, left, right, top                    (len, %)
+ *
+ * -- len
+ * borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderWidth,
+ * letterSpacing
+ *
+ * -- color
+ * backgroundColor
+ * borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, borderColor
+ * color
+ *
+ * -- special
+ * clip                        rect(0px, 40px, 40px, 0px);
+ * backgroundPosition  (len, %)
+ * opacity
+ * lineHeight          (len, %, num)
+ * zIndex                      ( order )
+ */
+
+var DHTML = ( function(){
+       
+       var ANIMATION_TICKET_ARRAY = [],
+               fpms                   = 50,
+               round                  = Math.round,
+               cround                 = function ( v ){ return round( v * 100 ) / 100 };
+       
+       function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames ){
+               var _ticket, i = ANIMATION_TICKET_ARRAY.length;
+               for( ; i; ){
+                       _ticket = ANIMATION_TICKET_ARRAY[ --i ];
+                       if( _ticket.elm === _elm ){
+                               return;
+                       };
+               };
+               
+               var _currentValues     = [],
+                       _offsetValues      = [],
+                       _endValues         = [],
+                       _targetProperties  = [],
+                       _units             = [];
+               var target, current,
+                       inlineStyle    = CSS.getInlineStyle( _elm ),
+                       currentStyle   = CSS.getWrappedStyle( _elm ),
+                       targetStyle    = CSS.getWrappedStyle( _elm, _cssObject );
+                       targetStyle.pxPerEm = currentStyle.get( 'fontSize' )._toPx();
+               for( var p in _cssObject ){
+                       p       = Util.camelize( p );
+                       target  = targetStyle.get( p );
+                       current = currentStyle.get( p );
+
+                       if( target.isValid() === false || current.isValid() === false || current.equal( target ) !== false ){
+                               target.clear();
+                               current.clear();
+                               continue;
+                       };
+                       
+                       current.convert( target );
+                       // alert( current.getValue() + ' , ' + target.getValue() )
+                       _currentValues.push( current.getValue() );
+                       _offsetValues.push( current.getOffset( target ) );
+                       _endValues.push( target.getValue() );
+                       _targetProperties.push( p );
+                       _units.push( target.getUnit() );
+
+                       // IE has trouble with opacity if it does not have layout
+                       // Force it by setting the zoom level                   
+                       if( p === 'opacity' && SPECIAL.hasLayout ){
+                               if( SPECIAL.hasLayout( _elm ) === false ) inlineStyle.zoom = 1;
+                               inlineStyle.filter = current.getValueText();
+                       } else {
+                               inlineStyle[ p ]   = current.getValueText();
+                       };
+                       
+                       target.clear();
+                       current.clear();
+               };
+               
+               var i, _cssTextArray = [];
+               for( i = 0; i < _numFrames; ++i ){
+                       if( i < _numFrames - 1 ){
+                               tickValue( _currentValues, _offsetValues, _numFrames );
+                               createCssText( _currentValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );
+                       } else {
+                               createCssText( _endValues, _targetProperties, targetStyle, inlineStyle, _cssTextArray );
+                       };
+               };
+               
+               ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(
+                       _elm, _cssTextArray,
+                       Type.isFunction( _onComplete ) === true   ? _onComplete   : null,
+                       Type.isFunction( _onEnterFrame ) === true ? _onEnterFrame : null,
+                       _numFrames
+               ) );
+               
+               currentStyle.clear();
+               targetStyle.clear();            
+               SystemTimer.add( SUPER_USER_KEY, onEnterFrame, 1000 / fpms );
+       };
+       
+       function tickValue( current, offset, numFrames ){
+               if( Type.isArray( current ) === true ){
+                       var ret, i = current.length;
+                       for( ; i; ){
+                               --i;
+                               ret = tickValue( current[ i ], offset[ i ], numFrames );
+                               if( Type.isNumber( ret ) === true ) current[ i ] = ret;
+                       };
+               } else {
+                       return current + offset / numFrames;
+               };
+       };
+       function createCssText( update, props, style, inline, cssTextArray ){
+               var prop;
+               for( var i = props.length; i; ){
+                       prop = style.get( props[ --i ] );
+                       prop.setValue( update[ i ] );
+                       inline[ Util.uncamelize( prop.name ) ] = prop.getValueText();
+                       //if( prop.name === 'backgroundColor' ) alert( prop.getValueText() + '|' + update[ i ].join( ',') )
+                       prop.clear();
+               };
+               cssTextArray.push( CSS.toCssText( inline ) );
+       };
+       
+       function onEnterFrame(){
+               var _ticket, l,
+                       i = 0;
+               while( i < ANIMATION_TICKET_ARRAY.length ){
+                       _ticket = ANIMATION_TICKET_ARRAY[ i ];
+                       l       = _ticket.cssTexts.length;
+                       _ticket.elm.style.cssText = _ticket.cssTexts.shift();
+                       if( l === 1 ){
+                               _ticket.onComplete && _ticket.onComplete();
+                               delete _ticket.elm;
+                               delete _ticket.cssTexts;
+                               delete _ticket.onComplete;
+                               delete _ticket.onEnterFrame;
+                               delete _ticket.numFrame;
+                               ANIMATION_TICKET_ARRAY.splice( i, 1 );
+                       } else {
+                               _ticket.onEnterFrame && _ticket.onEnterFrame( l / _ticket.numFrame );
+                               ++i;
+                       };
+               };
+               if( ANIMATION_TICKET_ARRAY.length === 0 ){
+                       SystemTimer.remove( SUPER_USER_KEY, onEnterFrame );
+               };
+       };
+       
+       var AnimationTaskClass = function( elm, cssTexts, onEnterFrame, onComplete, numFrame ){
+               this.elm          = elm;
+               this.cssTexts     = cssTexts;
+               this.onEnterFrame = onEnterFrame;
+               this.onComplete   = onComplete;
+               this.numFrame     = numFrame;
+       };
+       
+       var VisualEffectClass = function( elm ){
+               var isHtmlElement;
+               
+               function registerAnime( _cssObject, _onComplete, _onEnterFrame, _time ){
+                       var _numFrames = Math.floor( _time / fpms );
+                       startAnimation( elm, _cssObject, _onComplete, _onEnterFrame, _numFrames );
+               };
+               function startFadeIn(){
+                       
+               };
+               function startFadeOut(){
+                       
+               };
+               function update( _x, _y, _w, _h ){
+                       var _cssText = elm.style.cssText;
+                       
+               };
+               
+               this.anime   = registerAnime;
+               this.fadeIn  = startFadeIn;
+               this.fadeOut = startFadeOut;
+               this.update  = update;
+       };
+       
+       return {
+               create: function( application, _elm ){
+                       return new VisualEffectClass( _elm );
+               },
+               isInstanceOfVisualEffect: function( _instance){
+                       return _instance instanceof VisualEffectClass;
+               }
+       }
+})();
+
+
+/* --------------------------------------------
+ * 
+ */
+
+       Application.onCurrentApplicationChange( SUPER_USER_KEY );
+       
+       SERVICE_LIST.push( MouseEvent );
+       
+       new EventTicketClass( window, 'unload', function(){
+               var _service;
+               while( SERVICE_LIST.length > 0 ){
+                       _service = SERVICE_LIST.shift();
+                       Type.isFunction( _service.onSystemShutdown ) === true && _service.onSystemShutdown();
+               }
+       });
+       // beforeunload
+
+
+/* ---------------------------------------------
+ * broadcast to global
+ */
+       window.gOS = {};
+       
+       gOS.registerApplication = Application.register;
+       gOS.registerDriver      = File.registerDriver;
+       
+})( window, document );
index c61ab59..71e8452 100644 (file)
@@ -1,7 +1,7 @@
 @charset "UTF-8";\r
 \r
 /* pettanR peta.apps.css\r
- *   version 0.5.12\r
+ *   version 0.5.18\r
  * \r
  *   author:\r
  *     itozyun\r
                        -webkit-box-shadow:     0 4px 9px #333;\r
                        filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);\r
                }\r
-                       .menu-bar-item,\r
-                       .menu-bar-item-focus {\r
+                       .menubar-item,\r
+                       .menubar-item-focus {\r
                                position:               absolute;\r
                                top:                    0;\r
                                width:                  80px;\r
                                color:                  #666;\r
+                               overflow:               hidden;\r
+                               height:                 24.1pt;\r
+                               line-height:    24.1pt;\r
+                               padding-left:   0.6em;\r
+                               font-size:              11pt;                           \r
+                       }\r
+                       .menubar-item-focus {\r
+                               background-color:       #161;\r
+                               color:                          #eee;\r
                        }\r
-                               .menu-bar-item div,\r
-                               .menu-bar-item-focus div {\r
-                                       cursor:                 pointer;\r
-                                       overflow:               hidden;\r
-                                       height:                 24.1pt;\r
-                                       line-height:    24.1pt;\r
-                                       padding-left:   0.6em;\r
-                                       font-size:              11pt;\r
-                               }\r
-                               .menu-bar-item-focus div {\r
-                                       background-color:       #66f;\r
-                                       color:                          #eee;\r
-                               }\r
-                               .menu-bar-item ul {\r
-                                       display:                        none;\r
-                               }\r
-                               .menu-bar-item-focus ul {\r
+                               .menubar-option-box {\r
                                        position:                       absolute;\r
                                        list-style:                     none;\r
                                        top:                            24.1pt;\r
                                        width:                          200px;\r
                                        margin:                         0;\r
                                        padding:                        0;\r
-                                       background-color:       #fff;\r
+                                       background-color:       #f5f5f5;\r
                                        color:                          #666;\r
                                        border:                         1px solid #ccc;\r
                                        box-shadow:                     1px 4px 9px #333;\r
                                        -webkit-box-shadow:     1px 4px 9px #333;\r
                                        filter:                         progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
                                }\r
-                                       .menu-bar-item-focus li {\r
-                                               display:                block;\r
-                                               cursor:                 pointer;\r
-                                               width:                  200px;\r
-                                               height:                 24.1pt;\r
-                                               line-height:    24.1pt;\r
-                                       }\r
-                                       .menu-bar-item-focus li.disabled {\r
-                                               cursor:                 default;\r
+                               .menubar-option-box-hover {\r
+                                       background-color:       #fff;\r
+                               }\r
+                                       .menubar-option-box div {\r
+                                               position:                       relative;\r
+                                               display:                        block;\r
+                                               width:                          200px;\r
+                                               height:                         24.1pt;\r
+                                               line-height:            24.1pt;\r
+                                               border-style:           none;\r
+                                               border-width:           0 0 1px;\r
+                                               border-color:           #ccc;                                   \r
+                                       }       \r
+                                       .menubar-option-disabled {\r
+                                               color:                          #ddd !important;\r
+                                       }                               \r
+                                       .menubar-option-hover {\r
+                                               background-color:       #161 !important;\r
+                                               color:                          #eee !important;\r
                                        }\r
-                                               .menu-bar-item-focus a,\r
-                                               .menu-bar-item-focus a:link,\r
-                                               .menu-bar-item-focus a:visited {\r
-                                                       color:                  #666;\r
-                                                       position:               relative;\r
+                                               .menubar-option-hover * {\r
+                                                       color:                          #eee !important;\r
+                                               }\r
+                                               .menubar-option-box span {\r
+                                                       position:               absolute;\r
+                                                       top:                    0;\r
+                                                       left:                   10px;\r
                                                        display:                block;\r
-                                                       width:                  200px;\r
-                                                       height:                 24.1pt;\r
-                                                       line-height:    24.1pt;\r
-                                                       *cursor:                pointer;\r
+                                                       font-size:              11pt;\r
+                                                       font-weight:    bold;\r
+                                                       width:                  120px;\r
+                                                       overflow:               hidden;\r
                                                }\r
-                                               .menu-bar-item-focus a:hover {\r
-                                                       color:                          #333;\r
-                                                       background-color:       #ccf;\r
-                                                       text-decoration:        none;\r
-                                                       *cursor:                        pointer;\r
-                                               }                               \r
-                                               .menu-bar-item-focus li.disabled a,\r
-                                               .menu-bar-item-focus li.disabled a:link,\r
-                                               .menu-bar-item-focus li.disabled a:visited,\r
-                                               .menu-bar-item-focus li.disabled a:active,\r
-                                               .menu-bar-item-focus li.disabled a:hover {\r
-                                                       color:                          #999;\r
-                                                       background-color:       #fff;\r
-                                                       *cursor:                        default;\r
+                                               .menubar-option-box kbd {\r
+                                                       position:               absolute;\r
+                                                       top:                    0;\r
+                                                       right:                  10px;\r
+                                                       display:                block;\r
+                                                       font-size:              8pt;\r
+                                                       color:                  #999;\r
+                                                       width:                  60px;\r
+                                                       overflow:               hidden;\r
                                                }\r
-                                                       .menu-bar-item-focus span {\r
-                                                               position:               absolute;\r
-                                                               top:                    0;\r
-                                                               left:                   10px;\r
-                                                               display:                block;\r
-                                                               font-size:              11pt;\r
-                                                               font-weight:    bold;\r
-                                                               width:                  120px;\r
-                                                               overflow:               hidden;\r
-                                                       }\r
-                                                       .menu-bar-item-focus kbd {\r
-                                                               position:               absolute;\r
-                                                               top:                    0;\r
-                                                               left:                   140px;\r
-                                                               display:                block;\r
-                                                               font-size:              8pt;\r
-                                                               color:                  #999;\r
-                                                               width:                  60px;\r
-                                                               overflow:               hidden;\r
-                                                       }\r
-                                       .menu-bar-item-focus li.separator {\r
-                                               width:                  200px;\r
-                                               height:                 0;\r
-                                               line-height:    0;\r
-                                               border-top:             1px solid #ccc;\r
-                                               margin:                 0;\r
-                                               padding:                0;\r
-                                       }\r
        \r
        /*  whiteGlass\r
        --------------------------------------------------------------------------------------*/        \r
                        border:         2px solid #333;\r
                }\r
        \r
-       /*  mouse-operation-catcher\r
-       --------------------------------------------------------------------------------------*/        \r
-               #mouse-operation-catcher {\r
-                       position:                       absolute;\r
-                       top:                            0;\r
-                       left:                           0;\r
-                       width:                          100%;\r
-                       height:                         100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */\r
-               }\r
-               .pettanr-ActiveX-enabled #mouse-operation-catcher {\r
-                       background-color:       #fff;\r
-                       filter:                         alpha( opacity=0 );\r
-                       -ms-filter:                     alpha( opacity=0 );\r
-               }\r
-               /*\r
-                * ie では、背景を設定しないと、 mousemove が働かない。\r
-                * activeX 有効の場合は背景を着色して filter で透明に。\r
-                * activeX 無効の場合は透明 gif を使用\r
-                * background:                  url(4x4.gif) fixed repeat;\r
-                */\r
-               .pettanr-ActiveX-disabled #mouse-operation-catcher {\r
-                       background:                     url( "../images/opacity0.gif" ) fixed repeat;\r
-               }\r
-       \r
-       \r
        /*  comic-element\r
        --------------------------------------------------------------------------------------*/\r
                #comic-element-container {\r
        --------------------------------------------------------------------------------------*/\r
                .window-wrapper {\r
                        position:                       absolute;\r
-                       top:                            10px;\r
-                       left:                           10px;\r
-                       width:                          200px;\r
-                       height:                         200px;\r
+                       overflow:                       hidden;\r
                        border-bottom:          1px solid #999;\r
                        background-color:       #fff;\r
                        box-shadow:                     1px 4px 9px #333;\r
                        filter:                         progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
                }\r
 \r
-                       .window-header,\r
+                       .window-header-title,\r
                        .window-close-button {\r
                                font-size:                              12px;\r
                                color:                                  #eee;\r
                                text-align:                             center;\r
                                padding-top:                    8px;\r
                                padding-bottom:                 6px;\r
+                               background-color:               #444;\r
+                       }\r
+                       .window-wrapper-hover .window-header-title {\r
                                background-color:               #333;\r
                        }\r
                                .window-close-button {\r
                                }\r
                        \r
                        .window-wrapper,\r
-                       .window-header {\r
+                       .window-header,\r
+                       .window-header-title {\r
                                border-radius:                  8px 8px 0 0;\r
                                -o-border-radius:               8px 8px 0 0;\r
                                -ms-border-radius:              8px 8px 0 0;\r
                                -webkit-border-radius:  8px 8px 0 0;\r
                        }\r
                        .window-body {\r
-                               position:                               relative;\r
+                               position:                               absolute;\r
+                               width:                                  100%;\r
                                border-right:                   1px solid #999;\r
                                border-left:                    1px solid #aaa;\r
                                *border-left:                   1px solid #ccc;\r
                        #toolbox-popup-help-button,\r
                        #toolbox-post-button {\r
                                position:                               absolute;\r
-                               left:                                   10px;\r
+                               left:                                   9px;\r
                                width:                                  90px;\r
-                               border:                                 1px outset #999;\r
                                height:                                 40px;\r
                                line-height:                    40px;\r
-                               text-align:                             center;\r
-                               cursor:                                 pointer;\r
-                               background-color:               #ccc;\r
-                               border-radius:                  8px;\r
-                               -o-border-radius:               8px;\r
-                               -ms-border-radius:              8px;\r
-                               -moz-border-radius:             8px;\r
-                               -webkit-border-radius:  8px;\r
                        }\r
                        #toolbox-add-image-button {\r
                                top:                                    10px;                                                           \r
                        }\r
                        #toolbox-popup-help-button {\r
                                width:                                  35px !important;\r
-                               left:                                   65px !important;\r
+                               left:                                   63px !important;\r
                        }\r
                        \r
                        #toolbox-post-button {\r
index a803d7a..7291393 100644 (file)
@@ -1,10 +1,10 @@
 @charset "UTF-8";\r
 \r
 /* pettanR system.css\r
- *   version 0.5.11\r
+ *   version 0.5.18\r
  * \r
  *   author:\r
- *     itozyun
+ *     itozyun\r
  */\r
 \r
 /*  Reset\r
                text-decoration:        underline;\r
                color:                          #f60;\r
        }\r
-       \r
+\r
+       /*  mouse-operation-catcher\r
+       --------------------------------------------------------------------------------------*/        \r
+               .mouse-operation-catcher {\r
+                       position:                       absolute;\r
+                       top:                            0;\r
+                       left:                           0;\r
+                       width:                          100%;\r
+                       height:                         100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */\r
+               }\r
+               .pettanr-ActiveX-enabled .mouse-operation-catcher {\r
+                       background-color:       #fff;\r
+                       filter:                         alpha( opacity=0 );\r
+                       -ms-filter:                     alpha( opacity=0 );\r
+               }\r
+               /*\r
+                * ie では、背景を設定しないと、 mousemove が働かない。\r
+                * activeX 有効の場合は背景を着色して filter で透明に。\r
+                * activeX 無効の場合は透明 gif を使用\r
+                * background:                  url(4x4.gif) fixed repeat;\r
+                */\r
+               .pettanr-ActiveX-disabled .mouse-operation-catcher {\r
+                       background:                     url( "../images/opacity0.gif" ) fixed repeat;\r
+               }\r
        \r
 /*  ClearFix\r
 --------------------------------------------------------------------------------------*/\r
 /*  Button\r
 --------------------------------------------------------------------------------------*/\r
        .button {\r
-               border:                                 1px solid;\r
+               border-width:                   1px;\r
+               border-style:                   solid;\r
+               border-color:                   #ccc #bbb #aaa;\r
                background:                             #E3E3E3;\r
                background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3);\r
                background:                             -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));\r
-               border-color:                   #ccc #bbb #aaa;\r
                color:                                  #666;\r
                font-weight:                    bold;\r
                text-align:                             center;\r
                -moz-border-radius:             3px;\r
                -webkit-border-radius:  3px;\r
        }\r
+       .button-hover {\r
+               color:                                  #333;\r
+               border-color:                   #999 #888 #777;\r
+       }\r
        .button-has-focus {\r
                border-color:                   #4D90FE;\r
        }\r
  *  \r
  -------------------------------------------------------------------------------------*/\r
        .finder-body {\r
-               position:                               relative;\r
-               overflow:                               auto;\r
+               position:                               absolute;\r
+               overflow:                               hidden;\r
        }\r
                .finder-container .loading {\r
                         background-position: 50% bottom;\r
                }\r
-       .finder-header {\r
+               \r
+       .finder-path {\r
                height:                                 40px;\r
                position:                               relative;\r
-               background-color:               #333;\r
+               background-color:               #484848;\r
        }\r
-               .finder-header ul {\r
+               .finder-path div {\r
                        list-style:                             none;\r
                        position:                               absolute;\r
                        top:                                    0;\r
                        padding:                                0;\r
                        margin:                                 0;\r
                }\r
-                       .finder-header li {\r
+                       .finder-path div {\r
                                position:                               absolute;\r
                                top:                                    0;\r
                                left:                                   0;\r
                                width:                                  90px;\r
                                padding:                                0;\r
                                margin:                                 0;\r
-                       }\r
-                       .finder-header li a,\r
-                       .finder-header li a:link,\r
-                       .finder-header li a:visited {\r
-                               display:                                block;\r
-                               height:                                 14px;\r
                                font-size:                              14px;\r
-                               line-height:                    14px;\r
-                               padding:                                16px 0 10px 20px;\r
+                               line-height:                    40px;\r
                                margin:                                 0;\r
                                color:                                  #eee;\r
                                overflow:                               hidden;\r
                        }\r
-                       .finder-header li a:hover {\r
+                       .finder-path-hover {\r
                                text-decoration:                none;\r
                                background-color:               #66f;\r
                                color:                                  #eee;\r
                        }\r
-                       \r
-                       \r
-               .finder-header .button {\r
-                       position:                               absolute;\r
-                       top:                                    8px;\r
-                       width:                                  30px;\r
-                       height:                                 24px;\r
-                       line-height:                    24px;\r
-               }\r
-               .finder-sidebar-switch {\r
-                       left:                                   8px;\r
-               }\r
-               .finder-style-switch {\r
-                       right:                                  48px;\r
-               }\r
-               .finder-action-switch {\r
-                       right:                                  8px;\r
-               }\r
                \r
        /*  Finder Icon\r
        --------------------------------------------------------------------------------------*/\r
        .finder-icon {\r
-               position:                                       relative;\r
+               /* position:                                    absolute; */\r
+               left:                                           0;\r
                height:                                         74px;\r
                border-bottom:                          1px solid #ccc;\r
-               clear:                                          both;\r
                overflow:                                       hidden; /* for webkit */\r
        }\r
-       .finder-icon:hover {\r
+       .finder-icon-hover {\r
                background-color:                       #eee;\r
-               cursor:                                         pointer;\r
        }\r
                .fnder-icon-modern .finder-icon-handle,\r
                .fnder-icon-modern .finder-icon-thumbnail,\r
index 395663a..37fc6aa 100644 (file)
@@ -12,6 +12,7 @@
        </head>
        <body>
                <script type="text/javascript" src="javascripts/jquery-1.6.2.min.js"></script>
+               <script type="text/javascript" src="javascripts/libs.js"></script>
                <script type="text/javascript" src="javascripts/system.js"></script>
                <script type="text/javascript" src="javascripts/pongame.js"></script>
                <script type="text/javascript">