OSDN Git Service

client is version0.4.18, update around applications.
authoritozyun <itozyun@gmail.com>
Sat, 14 Apr 2012 14:24:37 +0000 (23:24 +0900)
committeritozyun <itozyun@gmail.com>
Sat, 14 Apr 2012 14:24:37 +0000 (23:24 +0900)
app/views/layouts/application.html.erb
public/assets/common.js
public/assets/system.js
public/assets/work.js

index 2fba784..7739008 100644 (file)
                        <div id="entrance" class="console-page main" style="display:block;">\r
                                <%= yield %>\r
                                <h3>クイックアクセス</h3>\r
-                               <p><a href="#" onclick="pettanr.view.show('editor');return false;">新しいコマを描く(いまだけ)</a></p>\r
-                               <p><a href="#" onclick="pettanr.comicConsole._quickAccessShow();return false;">新しいコミックをつくる</a></p>\r
-                               <p><a href="#" onclick="pettanr.uploadConsole._quickAccessShow();return false;">画像のアップロード</a></p>\r
-                               <p><a href="#" onclick="pettanr.panelConsole._quickAccessShow();return false;">コマの追加(開発用)</a></p>\r
-                               <p><a href="#" onclick="pettanr.artistConsole._quickAccessShow();return false;">アーティスト登録(すでに登録している場合も操作可能)</a></p>\r
+                               <p><a href="#" onclick="pettanr.editor.boot();return false;">新しいコマを描く(いまだけ)</a></p>\r
+                               <p><a href="#" onclick="pettanr.comicConsole.bootInOverlay();return false;">新しいコミックをつくる</a></p>\r
+                               <p><a href="#" onclick="pettanr.uploadConsole.bootInOverlay();return false;">画像のアップロード</a></p>\r
+                               <p><a href="#" onclick="pettanr.panelConsole.bootInOverlay();return false;">コマの追加(開発用)</a></p>\r
+                               <p><a href="#" onclick="pettanr.artistConsole.bootInOverlay();return false;">アーティスト登録(すでに登録している場合も操作可能)</a></p>\r
                                <h3>座長からのお知らせ</h3>\r
                                <p>メンテナンスについて</p>\r
                        </div>\r
index 540227f..eb8e270 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR common.js\r
- *   version 0.4.17\r
+ *   version 0.4.18\r
  * \r
  * author: itozyun\r
  */\r
@@ -511,7 +511,7 @@ pettanr.util = ( function(){
                        return ret;\r
                },\r
                getChildIndex: function( _parent, _child){\r
-                       var _children = _parent.getElementsByTagName( _child.tagName),\r
+                       var _children = _parent.getElementsByTagName( _child.tagName ),\r
                                l = _children.length;\r
                        for(var i=0; i<l; ++i){\r
                                if( _children[ i] === _child) return i;\r
@@ -537,7 +537,7 @@ pettanr.util = ( function(){
                        }\r
                },\r
                getIndex: function( _array, _element){\r
-                       if( Array.prototype.indexof){\r
+                       if( Array.prototype.indexof ){\r
                                pettanr.util.getIndex = function( _array, _element){\r
                                        return _array.indexof( _element);\r
                                }\r
@@ -551,6 +551,13 @@ pettanr.util = ( function(){
                        }\r
                        return pettanr.util.getIndex( _array, _element);\r
                },\r
+               copyArray: function( _array ){\r
+                       var ret = new Array( l );\r
+                       for(var i=0, l = _array.length; i<l; ++i){\r
+                               ret[ i ] = _array[ i ];\r
+                       }\r
+                       return ret;\r
+               },\r
                /*\r
                 * \r
                 */\r
@@ -774,7 +781,7 @@ pettanr.CONST = ( function(){
                URL_COMICS_JSON:                        ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'comics.json',\r
                URL_PANELS_JSON:                        ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'panels.json',\r
                NS_PETTANR_COMIC:                       'pettanr-comic',\r
-               RESOURCE_PICTURE_PATH:          ( isLocal === true ? pettanr.ROOT_PATH : PETTANR_ROOT_PATH) + 'resource_pictures\/',\r
+               RESOURCE_PICTURE_PATH:          ( isLocal === true ? '' : PETTANR_ROOT_PATH) + 'resource_pictures\/',\r
                CREATE_COMIC_JS:                        isLocal === true ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',\r
                CREATE_PANEL_JS:                        isLocal === true ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',\r
                UPLOAD_PICTURE_JS:                      isLocal === true ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
@@ -813,7 +820,7 @@ pettanr.view = ( function(){
                LoginUserNavi = {\r
                        show: function(){\r
                                var i = pettanr.util.getChildIndex( this.parentNode, this );\r
-                               i !== -1 && pettanr.view.show( i );\r
+                               i !== -1 && bootApplication( i );\r
                                return false;\r
                        },\r
                        hide: function(){}\r
@@ -833,19 +840,11 @@ pettanr.view = ( function(){
        var jqWindow,\r
                APPLICATION_LIST = [],\r
                LUNCHER_APPLICATION_LIST = [],\r
-               navi = document.getElementById('global-navi'),\r
-               currentApplication;\r
-       \r
-       function onWindowResize(){\r
-               var w = jqWindow.width(),\r
-                       h = jqWindow.height();\r
-               currentApplication && currentApplication.resize && currentApplication.resize( w, h);\r
-               pettanr.overlay.currentID !== null && pettanr.overlay.onWindowResize( w, h);\r
-       }\r
+               currentApplication = null;\r
        \r
        var AbstractBasicPane = function(){\r
                this.rootElement = null;\r
-               this.onOpen = function( _w, _h, _option ){\r
+               this.onOpen = function( _w, _h /*, _option */ ){\r
                        // overrride\r
                };\r
                this.onClose = function(){\r
@@ -853,14 +852,17 @@ pettanr.view = ( function(){
                        return true;\r
                } // false の場合、close の拒否 \r
                this.onPaneResize = function( _w, _h ){}\r
-               this.open = function( _w, _h, _option ){\r
+               this.open = function( _w, _h /*, _option */ ){\r
                        if( this.MIN_WIDTH > _w || this.MIN_HEIGHT > _h ){\r
                                if( Type.isHTMLElement( this.rootElement ) === true ){\r
                                        // 小さすぎる!、と表示\r
                                }\r
-                               return;\r
                        }\r
-                       this.onOpen( _w, _h, _option );\r
+                       if( arguments.length > 2){\r
+                               argumentsRellay( this.onOpen, arguments );\r
+                       } else {\r
+                               this.onOpen( _w, _h );\r
+                       }\r
                }\r
                this.close = function(){\r
                        if( this.onClose() === false ){\r
@@ -879,81 +881,157 @@ pettanr.view = ( function(){
                this.MIN_WIDTH = 240;\r
                this.MIN_HEIGHT = 240;\r
        }\r
+       \r
        var AbstractApplication = function(){\r
                this.displayName = 'app name';\r
                this.ID = 'app id';\r
        }\r
        AbstractApplication.prototype = new AbstractBasicPane();\r
        \r
-       return {\r
-               init: function( _funcArray ){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       jqWindow.resize( onWindowResize);\r
-                       \r
-                       var _option = {}; // urlパラメータ\r
-                       \r
-                       pettanr.view.show( pettanr.URL_PARAMS.view || 0, _option );\r
-                       \r
-                       delete pettanr.view.init;\r
-               },\r
-               show: function( APPLICATIONorINDEX, _option ){\r
-                       if( isWorkPage === false ) return;\r
-                       \r
-                       var _applicetion,\r
-                               _elm, i, l,\r
-                               nodesA = navi.getElementsByTagName( 'a') || [],\r
-                               _index = -1;\r
-                       if( typeof APPLICATIONorINDEX === 'number' && APPLICATIONorINDEX < LUNCHER_APPLICATION_LIST.length){\r
-                               _applicetion = LUNCHER_APPLICATION_LIST[ APPLICATIONorINDEX ];\r
-                       } else\r
-                       if( typeof APPLICATIONorINDEX === 'string' ){\r
-                               for( i=0, l=LUNCHER_APPLICATION_LIST.length; i<l; ++i ){\r
-                                       if( APPLICATIONorINDEX === APPLICATION_LIST[ i ].ID ){\r
-                                               _applicetion = APPLICATION_LIST[ i ];\r
-                                               break;\r
-                                       }\r
-                               }\r
-                       } else\r
-                       if( pettanr.view.isApplicationInstance( APPLICATIONorINDEX ) === true ){\r
-                               _applicetion = APPLICATIONorINDEX;\r
-                       } else\r
-                       if( !currentApplication ){\r
-                               _applicetion = LUNCHER_APPLICATION_LIST[ 0 ];\r
+       var ApplicationReference = function( _application ){\r
+               this.inOverlay = false;\r
+               this.boot = function( /* _option */ ){\r
+                       if( arguments.length > 0 ){\r
+                               bootApplication( _application, pettanr.util.copyArray( arguments ) );\r
                        } else {\r
-                               return;\r
+                               bootApplication( _application );\r
                        }\r
+               }\r
+               this.bootInOverlay = function( /* _option */ ){\r
+                       this.inOverlay = true;\r
+                       pettanr.overlay.show( _application );\r
                        \r
-                       if( !_applicetion ) return;\r
+                       if( arguments.length > 0 ){\r
+                               var _arguments = pettanr.util.copyArray( arguments );\r
+                               _arguments.unshift( jqWindow.width(), jqWindow.height() )\r
+                               // argumentsRellay( _application.open, _arguments );\r
+                               _application.open.apply( _application, _arguments );\r
+                       } else {\r
+                               _application.open( jqWindow.width(), jqWindow.height() );\r
+                       }\r
+               }\r
+               this.shutdown = function(){\r
+                       if( this.inOverlay === true ){\r
+                               pettanr.overlay.hide();\r
+                               _application.close();\r
+                               this.inOverlay = false;\r
+                       } else {\r
+                               bootApplication( 0 );\r
+                       }\r
+               }\r
+               this.addToLancher = function(){\r
+                       if( pettanr.util.getIndex( LUNCHER_APPLICATION_LIST, _application ) !== -1 ) return;\r
+                       LUNCHER_APPLICATION_LIST.push( _application );\r
+       \r
+                       var navi = document.getElementById('global-navi'),\r
+                               item = document.createElement('a');\r
+                       navi.appendChild( item );\r
+                       navi.style.width = ( ( item.offsetWidth || 80 ) * LUNCHER_APPLICATION_LIST.length ) + 'px';\r
+                       item.href = '#';\r
+                       item.appendChild( document.createTextNode( _application.displayName ));\r
+                       item.onclick = LoginUserNavi.show;\r
+               }\r
+       }\r
+\r
+       function bootApplication( APPLICATIONorINDEX, _arguments ){\r
+               if( isWorkPage === false ) return;\r
+               \r
+               var _application,\r
+                       _elm, i, l,\r
+                       nodesA = document.getElementById('global-navi').getElementsByTagName( 'a') || [],\r
+                       _index = -1;\r
+               if( typeof APPLICATIONorINDEX === 'number' && APPLICATIONorINDEX < LUNCHER_APPLICATION_LIST.length){\r
+                       _application = LUNCHER_APPLICATION_LIST[ APPLICATIONorINDEX ];\r
+               } else\r
+               if( typeof APPLICATIONorINDEX === 'string' ){\r
                        for( i=0, l=LUNCHER_APPLICATION_LIST.length; i<l; ++i ){\r
-                               if( _applicetion === LUNCHER_APPLICATION_LIST[ i ] ){\r
-                                       _index = i;\r
+                               if( APPLICATIONorINDEX === APPLICATION_LIST[ i ].ID ){\r
+                                       _application = APPLICATION_LIST[ i ];\r
                                        break;\r
                                }\r
                        }\r
-                       if( _index !== -1 ){\r
-                               for( i=0, l=nodesA.length; i<l; ++i ){\r
-                                       nodesA[ i ].className = _index === i ? 'current' : '';\r
-                               }\r
+               } else\r
+               if( pettanr.view.isApplicationInstance( APPLICATIONorINDEX ) === true ){\r
+                       _application = APPLICATIONorINDEX;\r
+               } else\r
+               if( !currentApplication ){\r
+                       _application = LUNCHER_APPLICATION_LIST[ 0 ];\r
+               } else {\r
+                       return;\r
+               }\r
+               \r
+               if( !_application ) return;\r
+               \r
+               for( i=0, l=LUNCHER_APPLICATION_LIST.length; i<l; ++i ){\r
+                       if( _application === LUNCHER_APPLICATION_LIST[ i ] ){\r
+                               for(var j=0, l=nodesA.length; j<l; ++j ){\r
+                                       nodesA[ j ].className = i === j ? 'current' : '';\r
+                               }                                       \r
+                               break;\r
                        }\r
-                       \r
-                       if( currentApplication === _applicetion ) return;\r
-                       \r
-                       if( currentApplication ){\r
-                               _elm = currentApplication.rootElement;\r
-                               if( _elm ){\r
-                                       _elm.style.display = 'none';\r
-                               }\r
-                               typeof currentApplication.onClose === 'function' && currentApplication.onClose();\r
+               }\r
+               \r
+               if( currentApplication === _application ) return;\r
+               \r
+               if( currentApplication ){\r
+                       _elm = currentApplication.rootElement;\r
+                       if( _elm ){\r
+                               _elm.style.display = 'none';\r
                        }\r
-                       currentApplication = _applicetion;\r
+                       currentApplication.close();\r
+               }\r
+               currentApplication = _application;\r
+               \r
+               _elm = _application.rootElement;\r
+               if( _elm ){\r
+                       _elm.style.display = 'block';\r
+               }\r
+               \r
+               if( _arguments ){\r
+                       _arguments.unshift( jqWindow.width(), jqWindow.height() );\r
+                       _application.open.apply( _application, _arguments );\r
+                       // argumentsRellay( _application.open, _arguments );                    \r
+               } else {\r
+                       _application.open( jqWindow.width(), jqWindow.height() );\r
+               }\r
+               pettanr.view.currentID = _application.ID;\r
+       }\r
+       \r
+       function argumentsRellay( _method, _arguments ){\r
+               l = _arguments.length;\r
+               if( l > 0 ){\r
+                       var _arg = [];\r
+                       for( i=0; i<l; ++i ){\r
+                               _arg.push( '_arguments[' + i + ']' );\r
+                       }\r
+                       window['_method'] = _method;\r
+                       eval( '_method(' + _arg.join(',') + ')' );\r
+                       delete window['_method'];\r
+               } else {\r
+                       _method();\r
+               }               \r
+       }\r
+       \r
+       function onWindowResize(){\r
+               var w = jqWindow.width(),\r
+                       h = jqWindow.height();\r
+               currentApplication && currentApplication.resize && currentApplication.resize( w, h );\r
+               pettanr.overlay.currentID !== null && pettanr.overlay.onWindowResize( w, h );\r
+       }\r
+\r
+       return {\r
+               init: function( _funcArray ){\r
+                       jqWindow = pettanr.jqWindow();\r
+                       jqWindow.resize( onWindowResize );\r
                        \r
-                       _elm = _applicetion.rootElement;\r
-                       if( _elm ){\r
-                               _elm.style.display = 'block';\r
+                       var _option = {}; // urlパラメータ\r
+                       \r
+                       for( var i=0, l=APPLICATION_LIST.length; i<l; ++i){\r
+                               APPLICATION_LIST[ i ].init && APPLICATION_LIST[ i ].init();\r
                        }\r
-                       typeof _applicetion.open === 'function' && _applicetion.open( jqWindow.width(), jqWindow.height(), _option );\r
+                       bootApplication( pettanr.URL_PARAMS.view || 0 );\r
                        \r
-                       this.currentID = _applicetion.ID;\r
+                       delete pettanr.view.init;\r
                },\r
                createBasicPane: function( _class, _options ){\r
                        _class.prototype = new AbstractBasicPane();\r
@@ -962,42 +1040,21 @@ pettanr.view = ( function(){
                registerAsBasicPane: function( _class ){\r
                        _class.prototype = new AbstractBasicPane();\r
                },\r
-               createApplication: function( _class, _options ){\r
+               registerApplication: function( _class, _options ){\r
                        _class.prototype = new AbstractApplication();\r
-                       return new _class( _options );\r
-               },\r
-               registerApplication: function( _application, _addToLancher ){\r
-                       if( pettanr.view._isApplicationInstance( _application ) === true ){\r
-                               \r
-                       }\r
+                       _application = new _class( _options );\r
                        APPLICATION_LIST.push( _application );\r
-                       if( _addToLancher === true ){\r
-                               pettanr.view.addApplicationToLancher( _application );\r
-                       }\r
-               },\r
-               addApplicationToLancher: function( _application ){\r
-                       // if( pettanr.view.isApplicationInstance( _application ) === false ) return;\r
-                       \r
-                       if( pettanr.util.getIndex( LUNCHER_APPLICATION_LIST, _application ) !== -1 ) return;\r
-                       LUNCHER_APPLICATION_LIST.push( _application );\r
-\r
-                       var item = document.createElement('a');\r
-                       navi.appendChild( item );\r
-                       navi.style.width = ( ( item.offsetWidth || 80 ) * LUNCHER_APPLICATION_LIST.length ) + 'px';\r
-                       item.href = '#';\r
-                       item.appendChild( document.createTextNode( _application.displayName ));\r
-                       item.onclick = LoginUserNavi.show;\r
+                       return new ApplicationReference( _application );\r
                },\r
                isBasicPaneInstance: function( _basicPane ){\r
                        return  _basicPane instanceof AbstractBasicPane;\r
                },\r
                isApplicationInstance: function( _application ){\r
-                       return pettanr.util.getIndex( APPLICATION_LIST, _application ) !== -1;\r
-                       // return _application instanceof AbstractApplication;\r
-               },\r
-               _isApplicationInstance: function( _application ){\r
                        return _application instanceof AbstractApplication;\r
                },\r
+               isApplicationReference: function( _reference ){\r
+                       return _reference instanceof ApplicationReference;\r
+               },\r
                currentID:      null,\r
                EDITOR:         'editor',\r
                OVERLAY:        'overlay'\r
@@ -1012,17 +1069,20 @@ pettanr.overlay = ( function(){
                windowW, windowH;\r
 \r
        function close(){\r
-               currentOverlay && currentOverlay.onClose && currentOverlay.onClose();\r
+               currentOverlay && currentOverlay.close();\r
                pettanr.overlay.hide();         \r
        }\r
        function asyncResize(){\r
-               currentOverlay.onWindowResize( windowW, windowH);\r
+               currentOverlay.resize( windowW, windowH);\r
        }\r
        function onCloseClick( e){\r
                close();\r
                e.preventDefault();\r
                return false;           \r
        }\r
+       function onFadeInComplete(){\r
+               \r
+       }\r
        return {\r
                init: function(){\r
                        //jqBody = pettanr.jqBody();\r
@@ -1034,18 +1094,18 @@ pettanr.overlay = ( function(){
                        \r
                        delete pettanr.overlay.init;\r
                },\r
-               show: function( _currentOverlay){\r
-                       if( visible === true && currentOverlay === _currentOverlay) return;\r
+               show: function( _currentOverlay ){\r
+                       if( visible === true && currentOverlay === _currentOverlay ) return;\r
                        document.body.style.overflow = 'hidden';\r
                        jqConteiner.stop().css( {\r
                                filter:         '',\r
                                opacity:        '',\r
                                top:            document.documentElement.scrollTop || document.body.scrollTop\r
-                       }).fadeIn();\r
+                       }).fadeIn( onFadeInComplete );\r
                        this.visible = visible = true;\r
                        currentOverlay = _currentOverlay;\r
                        this.currentID = _currentOverlay.ID;\r
-                       jqCloseButton.toggle( !!_currentOverlay.onClose);\r
+                       jqCloseButton.toggle( !!_currentOverlay.onClose );\r
                },\r
                hide: function(){\r
                        currentOverlay = null;\r
@@ -1060,7 +1120,7 @@ pettanr.overlay = ( function(){
                },\r
                visible: visible,\r
                currentID: null,\r
-               onWindowResize: function( _windowW, _windowH){\r
+               onWindowResize: function( _windowW, _windowH ){\r
                        jqConteiner.css({\r
                                height:         _windowH,\r
                                top:            document.documentElement.scrollTop || document.body.scrollTop\r
@@ -1069,7 +1129,7 @@ pettanr.overlay = ( function(){
                        windowW = _windowW;\r
                        windowH = _windowH;\r
                        // 先にeditorのcanvasを確定する。\r
-                       currentOverlay && currentOverlay.onWindowResize && setTimeout( asyncResize, 0);\r
+                       currentOverlay && setTimeout( asyncResize, 0);\r
                },\r
                registerOverlay: function( _basicPane){\r
                        var _api = pettanr.view.createBasicPane( _basicPane );\r
index 1a4aac0..f3fb48d 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.4.17
+ *   version 0.4.18
  *   
  * author:
  *   itozyun
@@ -285,6 +285,7 @@ pettanr.file = ( function(){
                                // 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();
@@ -353,28 +354,28 @@ pettanr.file = ( function(){
                },
                getSeqentialFiles: function(){
                        var _driver = FILE_CONTROLER.getDriver( this );
-                       if( _driver !== null && typeof _driver.getSeqentialFiles === 'function'){
+                       if( _driver !== null && typeof _driver.getSeqentialFiles === 'function' ){
                                _driver.getSeqentialFiles( this );
                        }
                },
-               addEventListener: function( _eventType, _callback){
-                       FILE_CONTROLER.addEventListener( this, _eventType, _callback);
+               addEventListener: function( _eventType, _callback ){
+                       FILE_CONTROLER.addEventListener( this, _eventType, _callback );
                },
-               removeEventListener: function( _eventType, _callback){
-                       FILE_CONTROLER.removeEventListener( this, _eventType, _callback);
+               removeEventListener: function( _eventType, _callback ){
+                       FILE_CONTROLER.removeEventListener( this, _eventType, _callback );
                },
                getChildFileLength: function(){
-                       var children = FILE_CONTROLER.getChildren( this);
+                       var children = FILE_CONTROLER.getChildren( this );
                        return Type.isArray( children ) === true ? children.length : -1;
                },
-               getChildFileIndex: function( _FILEorFILEDATA){
+               getChildFileIndex: function( _FILEorFILEDATA ){
                        var children = FILE_CONTROLER.getChildren( this);
-                       if( Type.isArray( children.length ) === false ) return -1;
+                       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;
+                               _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;
                },
@@ -430,12 +431,12 @@ pettanr.file = ( function(){
                        }
                        return FileDriverBase.read( this );
                },
-               write: function( _newName, _newData ){
+               write: function( _newData, _onUpdateFunction ){
                        var driver = FILE_CONTROLER.getDriver( this );
                        if( typeof driver.write === 'function'){
-                               return driver.write( this, _newName, _newData );
+                               return driver.write( this, _newData, _onUpdateFunction );
                        }
-                       return FileDriverBase.write( this, _newName, _newData );
+                       return FileDriverBase.write( this, _newData, _onUpdateFunction );
                },
                viewerApplicationList: function(){
                        var driver = FILE_CONTROLER.getDriver( this );
@@ -475,10 +476,31 @@ pettanr.file = ( function(){
                        var _access = FILE_CONTROLER.getFileDataAccess( this );
                        _access.TREE.move( _access.parentFile, this.getUID(), _newFolder, _newIndex, opt_callback );
                },
-               replace: function( _newIndex, opt_callback){
+               replace: function( _newIndex, opt_callback ){
                        var _access = FILE_CONTROLER.getFileDataAccess( this );
                        _access.TREE.replace( _access.parentFile, 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;
@@ -572,7 +594,7 @@ pettanr.file = ( function(){
                },
                read: function( _file ){
                        var data = FILE_CONTROLER.getFileData( _file ),
-                               protect = pettanr.file.FILE_DATA_PROPERTY_RESERVED.join( '\n' );
+                               protects = pettanr.file.FILE_DATA_PROPERTY_RESERVED;
                        
                        function clone( src ) {
                                var ret;
@@ -588,7 +610,7 @@ pettanr.file = ( function(){
                                        return null;
                                }
                                for( var key in src ){
-                                       if( protect.indexOf( key ) === -1 ){
+                                       if( pettanr.util.getIndex( protects, key ) === -1 ){
                                                //alert( key )
                                                ret[ key ] = clone( src[ key ]);
                                        }
@@ -598,7 +620,7 @@ pettanr.file = ( function(){
                                
                        return clone( data );
                },
-               write: function( _file, _newName, _newData){
+               write: function( _file, _newData, _onUpdateFunction ){
                        var _data = FILE_CONTROLER.getFileData( _file ),
                                _type = _data.type;
                        return false;
@@ -815,9 +837,9 @@ pettanr.finder = ( function(){
                        ELM_WRAPPER.style.top = (index * ICON_HEIGHT) +'px';
                }
                function onCollect(){
-                       elmContainer.removeChild( ELM_WRAPPER);
+                       elmContainer.removeChild( ELM_WRAPPER );
                        elmContainer = null;
-                       FINDER_ICON_POOL.push( instansce);
+                       FINDER_ICON_POOL.push( instansce );
                }
                
                return {
@@ -888,7 +910,7 @@ pettanr.finder = ( function(){
                return {
                        init: function( _file, _elmContainer, _index, _callback ){
                                instansce = this;
-                               if( elmContainer !== _elmContainer){
+                               if( elmContainer !== _elmContainer ){
                                        _elmContainer.appendChild( ELM_WRAPPER);
                                        elmContainer = _elmContainer;
                                }
@@ -939,7 +961,8 @@ pettanr.finder = ( function(){
                        iconW = size.width,
                        iconH = size.height,
                        style = 0,
-                       w, h, bodyH;
+                       w, h, bodyH,
+                       instance = this;
                        
                tree.addTreeEventListener( pettanr.file.TREE_EVENT.UPDATE, draw);
                
@@ -1004,15 +1027,15 @@ pettanr.finder = ( function(){
                        }
                }
                function onEditor( _file, _app ){
-                       pettanr.view.show( _app, _file );
+                       _app.boot( _file );
                }
                function onViwer( _file, _app ){
-                       pettanr.view.show( _app, _file );
+                       _app.boot( _file );
                }
                function onAction( _file ){
 
                }
-               
+               this.ID = 'finder';
                this.init = function(){
                        ELM_CONTAINER.appendChild( elmContainer);
                        //$( elmLocation).click( onHeadClick);
@@ -1020,17 +1043,17 @@ pettanr.finder = ( function(){
                        var position = pettanr.util.getAbsolutePosition( elmLocation);
                        headX = position.x;
                        headY = position.y;
-                       bodyY = pettanr.util.getAbsolutePosition( elmBody).y;
-                       delete this.init;
+                       bodyY = pettanr.util.getAbsolutePosition( elmBody ).y;
+                       delete instance.init;
                }
                this.onOpen = function( _w, _h, _option ){
-                       this.init !== undefined && this.init();
+                       instance.init && instance.init();
                        draw( _w, _h );
                }
                this.onClose = function(){
                        return true;
                }
-               this.onPaneResize = function( _w, _h){
+               this.onPaneResize = function( _w, _h ){
                        w = _w;
                        h = _h;
                        elmBody.style.height = ( _h - headH ) + 'px';
@@ -1073,7 +1096,7 @@ pettanr.finder = ( function(){
                },
                createFinder: function( _elmTarget, _tree, _header, _footer ){
                        var _finder = new FinderClass( _elmTarget, _tree, _header, _footer );
-                       FINDER_ARRAY.push( _finder);
+                       FINDER_ARRAY.push( _finder );
                        return _finder;
                },
                registerFinderHead: function(){
@@ -1102,7 +1125,11 @@ pettanr.driver = ( function(){
                                var _data = FileAPI.getFileData( _file),
                                        _json = _data !== null ? _data.json : null;
                                if( _json === true && _data.type === pettanr.driver.FILE_TYPE.COMIC ){
-                                       _json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'comics\/', _data.id, '.json\/play\/' ].join( '' );
+                                       if( pettanr.LOCAL === true ){
+                                               _json = [ 'json\/comics_', _data.id, '.json' ].join( '' );
+                                       } else {
+                                               _json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'comics\/', _data.id, '.json\/play\/' ].join( '' );
+                                       }
                                }
                                if( typeof _json === 'string'){
                                        FileAPI.getJson( _file, _json, onLoadJson, onErrorJson);
@@ -1183,6 +1210,21 @@ pettanr.driver = ( function(){
                                }
                                return 'pettanR unknown file';
                        },
+                       write: function( _file, _newData, _onUpdateFunction ){
+                               var _data = FileAPI.getFileData( _file ),
+                                       _type = _data !== null ? _data.type : null;
+                               if( _type === pettanr.driver.FILE_TYPE.COMIC ){
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.PANEL ){
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.PANEL_PICTURE ){
+                                       
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.BALLOON ){
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.PICTURE ){
+                               }                               
+                       },
                        viewerApplicationList: function( _file ){
                                var _data = FileAPI.getFileData( _file ),
                                        _type = _data !== null ? _data.type : null;
@@ -1200,7 +1242,7 @@ pettanr.driver = ( function(){
                                return [];
                        }
                },
-               FileAPI = pettanr.file.registerDriver( Driver),
+               FileAPI = pettanr.file.registerDriver( Driver ),
                FILE_DATA_SERVICE_ROOT = {
                        name:           'PettanR root',
                        type:           pettanr.file.FILE_TYPE.FOLDER,
@@ -1424,13 +1466,13 @@ pettanr.driver = ( function(){
                        _data.author = getResource( AUTHOR_ARRAY, _data.author_id );
 
                        // picture data をファイルに取り出し
-                       if( Type.isArray( _data.panel_elements ) === true ){
-                               var _elements,
-                                       _elm, _rpic;
+                       var _elements = _data.panel_elements,
+                               _elm;
+                       if( Type.isArray( _elements ) === true ){
                                for( i=0, l=_elements.length; i<l; ++i){
                                        _elm = _elements[ i];
                                        if( _elm.resource_picture ){
-                                               _elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT); // 上記参照切れに備えてここで上書き
+                                               _elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT ); // 上記参照切れに備えてここで上書き
                                        } else {
                                                _elm.resource_picture = getResource( RESOURCE_PICTURE_ARRAY, _elm.resource_picture_id );
                                        }
@@ -1465,13 +1507,16 @@ pettanr.driver = ( function(){
 
        return {
                createComicTree: function(){
-                       return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT); //FILE_DATA_COMICS_ROOT);
+                       return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT ); //FILE_DATA_COMICS_ROOT);
                },
                createPictureTree: function(){
-                       return pettanr.file.createTree( FILE_DATA_PICTURE_ROOT);
+                       return pettanr.file.createTree( FILE_DATA_PICTURE_ROOT );
+               },
+               createArtistTree: function(){
+                       return pettanr.file.createTree( FILE_DATA_ARTIST_ROOT );
                },
                createServiceTree: function(){
-                       return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT);
+                       return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT );
                },
                isPettanrFileInstance: function( _file ){
                        if( pettanr.file.isFileInstance( _file ) === true){
@@ -1480,6 +1525,9 @@ pettanr.driver = ( function(){
                        }
                        return false;
                },
+               _getAPI: function(){
+                       return FileAPI;
+               },
                FILE_TYPE: {
                        COMIC:                          FileAPI.createFileTypeID(),
                        PANEL:                          FileAPI.createFileTypeID(),
@@ -1493,74 +1541,70 @@ pettanr.driver = ( function(){
        }
 })();
 
-pettanr.entrance = pettanr.view.createApplication( function(){
+pettanr.entrance = pettanr.view.registerApplication( function(){
        this.displayName = 'Home';
+       this.ID          = 'Home';
        this.rootElement = document.getElementById('entrance');
        this.onOpen = function( _w, _h, _option ){
-               var pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
+               var pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' ) ).height;
                document.getElementById('inner-wrapper').style.height = ( _h - pageHeaderH ) + 'px';
        }
        this.onClose = function(){
                document.getElementById('inner-wrapper').style.height = '0px';
        }
-       this.onWindowResize = function( _w, _h){
-               pettanr.entrance.onOpen( _w, _h );
+       this.onPaneResize = function( _w, _h){
+               this.onOpen( _w, _h );
        }
 });
-pettanr.view.registerApplication( pettanr.entrance, true );
+pettanr.entrance.addToLancher();
 
-pettanr.cabinet = pettanr.view.createApplication( function(){
+pettanr.cabinet = pettanr.view.registerApplication( function(){
        var finder,
                elmContainer = document.getElementById( 'cabinet'),
                option,
-               pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
+               pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' ) ).height;
                
-       this.displayName = 'Comic list',
-       this.rootElement = elmContainer,
-       this.init = function( _option){
-               option = _option;
-               delete pettanr.cabinet.init;
-       }
+       this.displayName = 'Comic list';
+       this.ID          = 'Comiclist';
+       this.rootElement = elmContainer;
        this.onOpen = function( _w, _h, _option ){
-               finder = finder || pettanr.finder.createFinder( elmContainer, pettanr.driver.createComicTree());
-               finder.onOpen( _w, _h - pageHeaderH, _option );
-               
+               finder = finder || pettanr.finder.createFinder( elmContainer, pettanr.driver.createComicTree() );
+               finder.open( _w, _h - pageHeaderH, _option );
        }
        this.onClose = function(){
-               finder.onClose();
+               finder.close();
        }
-       this.onWindowResize = function( _w, _h){
-               finder.resize( _w, _h - pageHeaderH);
+       this.onPaneResize = function( _w, _h){
+               finder.resize( _w, _h - pageHeaderH );
        }
 });
-pettanr.view.registerApplication( pettanr.cabinet, true );
+pettanr.cabinet.addToLancher();
 
-pettanr.gallery = pettanr.view.createApplication( function(){
+pettanr.gallery = pettanr.view.registerApplication( function(){
        var finder,
                elmContainer = document.getElementById( 'gallery' ),
                option,
-               pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
+               pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' ) ).height;
+               
        this.displayName = 'Pictures';
+       this.ID          = 'pictures';
        this.rootElement = elmContainer;
-       this.init = function( _option){
-               option = _option;
-               delete pettanr.gallery.init;
-       }
        this.onOpen = function( _w, _h, _option ){
-               finder = finder || pettanr.finder.createFinder( elmContainer, pettanr.driver.createPictureTree());
-               finder.onOpen( _w, _h - pageHeaderH, _option );
+               finder = finder || pettanr.finder.createFinder( elmContainer, pettanr.driver.createPictureTree() );
+               finder.open( _w, _h - pageHeaderH, _option );
        }
        this.onClose = function(){
-               finder.onClose();
+               finder.close();
        }
        this.onWindowResize = function( _w, _h){
                finder.resize( _w, _h - pageHeaderH );
        }
 });
-pettanr.view.registerApplication( pettanr.gallery, true );
+pettanr.gallery.addToLancher();
 
-pettanr.backyard = pettanr.view.createApplication( function(){
+pettanr.backyard = pettanr.view.registerApplication( function(){
        this.displayName = 'Settings';
+       this.ID          = 'Settinds';
        this.rootElement = document.getElementById( 'backyard' );
        this.onOpen = function( _w, _h, _option ){
        }
@@ -1569,10 +1613,10 @@ pettanr.backyard = pettanr.view.createApplication( function(){
        this.onWindowResize = function( _w, _h){
        }
 });
-pettanr.view.registerApplication( pettanr.backyard, true );
+pettanr.backyard.addToLancher();
 
 if( pettanr.DEBUG === true){
-       pettanr.debug = pettanr.view.createApplication( function(){
+       pettanr.debug = pettanr.view.registerApplication( function(){
                var elmDl = document.getElementById( 'useragent'),
                        elmDt, elmDd,
                        data = {
@@ -1609,19 +1653,20 @@ if( pettanr.DEBUG === true){
                        elmDl.appendChild( elmDd);
                }
                this.displayName = 'Debug';
+               this.ID          = 'debug';
                this.rootElement = document.getElementById( 'debug' );
                this.onOpen = function( _w, _h, _option ){
-                       var pageHeaderH = pettanr.util.getElementSize( document.getElementById('header') ).height;
-                       document.getElementById('inner-wrapper').style.height = ( _h - pageHeaderH ) + 'px';
+                       var pageHeaderH = pettanr.util.getElementSize( document.getElementById( 'header' )).height;
+                       document.getElementById( 'inner-wrapper' ).style.height = ( _h - pageHeaderH ) + 'px';
                }
                this.onClose = function(){
-                       document.getElementById('inner-wrapper').style.height = '0px';
+                       document.getElementById( 'inner-wrapper' ).style.height = '0px';
                }
-               this.onWindowResize = function( _w, _h){
+               this.onPaneResize = function( _w, _h ){
                        pettanr.debug.onOpen( _w, _h );
                }
        });
-       pettanr.view.registerApplication( pettanr.debug, true );
+       pettanr.debug.addToLancher();
        
 } else {
        var _debug = document.getElementById( 'debug');
@@ -1632,6 +1677,317 @@ if( pettanr.DEBUG === true){
        }
 }
 
+/* ----------------------------------------
+ * Image Group Exproler
+ *  - overlay
+ */
+pettanr.premiumSatge = pettanr.view.registerApplication( function(){
+       var ICON_ARRAY = [],
+               WHEEL_DELTA = 64,
+               ARTIST_TREE = pettanr.driver.createArtistTree(),
+               ARTIST_ROOT_FILE = ARTIST_TREE.getRootFile(),
+               instance = this,
+               winW, winH,
+               containerW, containerH, wrapX,
+               jqWrap, jqContainer, jqItemOrigin,
+               itemW, itemH,
+               jqName, jqButton, buttonW,
+               //onUpdateFunction,
+               _g_onUpdateFunction,
+               onEnterInterval = null;
+       
+       var BASE_PATH = pettanr.LOCAL === true ? 'resource_pictures\/' : pettanr.CONST.PETTANR_ROOT_PATH + 'resource_pictures\/',
+               THUMB_PATH = BASE_PATH, // + 'thumbnail/',
+               LIMIT_FILESIZE = 1024 * 10; // 10KB
+
+       var ImageGroupIconClass = function( INDEX, file ){
+               var JQ_ICON_WRAP = jqItemOrigin.clone( true),
+                       data = pettanr.driver._getAPI().getFileData( file ),
+                       SRC = [ BASE_PATH, data.id, '.', data.ext ].join( ''),
+                       LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext ].join( '') : null,
+                       reversibleImage = null,
+                       onEnterFlag = false,
+                       imgW, imgH;
+               JQ_ICON_WRAP.children( 'div').eq( 0 ).html( data.filesize + 'bytes' );
+               jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));
+               
+               function onImageLoad( url, _imgW, _imgH ){
+                       if( reversibleImage === null) {
+                               alert( url);
+                               return;
+                       }
+                       data.width = imgW = _imgW || data.width || 64;
+                       data.height = imgH = _imgH || data.height || 64;
+                       JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
+                       var zoom = 128 /( imgW > imgH ? imgW : imgH),
+                               h = Math.floor( imgH *zoom ),
+                               w = Math.floor( imgW *zoom );
+                       reversibleImage.elm.style.width = w +'px';
+                       reversibleImage.elm.style.height = h +'px';
+                       reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
+                       reversibleImage.resize( w, h);
+                       JQ_ICON_WRAP.click( onClick );
+               }
+               
+               function onClick( e ){
+                       if( _g_onUpdateFunction ) {
+                               //if( LOW_SRC === null){
+                                       window[ _g_onUpdateFunction]( data );
+                                       window[ _g_onUpdateFunction] = null;
+                               /*
+                               } else {
+                                       var _onLoad = pettanr.util.createGlobalFunc( [
+                                                       'function( url, w, h ){',
+                                                               'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',
+                                                               'window["', _g_onUpdateFunction, '"] = null;',
+                                                       '}'
+                                               ].join( '')),
+                                               _onError = pettanr.util.createGlobalFunc( [
+                                                       'function( url){',
+                                                               'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',
+                                                               'window["', _g_onUpdateFunction, '"] = null;',
+                                                       '}'
+                                               ].join( ''));
+                                       pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);
+                                       window[ _onLoad] = window[ _onError] = undefined;
+                               }*/
+                       }
+                       pettanr.premiumSatge.shutdown();
+               }
+               
+               this.onEnter = function(){
+                       if( onEnterFlag === true ) return;
+                       reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad );
+                       JQ_ICON_WRAP.children( 'img' ).replaceWith( reversibleImage.elm );
+                       onEnterFlag = true;                                             
+               }
+               this.destroy = function(){
+                       reversibleImage && reversibleImage.destroy();
+                       JQ_ICON_WRAP.remove();
+                       file.destroy();
+                       reversibleImage = JQ_ICON_WRAP = data = null;
+                       delete this.destroy;
+               }
+       }
+       
+       function onEnterShowImage(){
+               var l = ICON_ARRAY.length,
+                       _start = -wrapX /itemW -1,
+                       _end = _start + winW /itemW +1;
+               for( var i=0; i<l; ++i){
+                       _start < i && i < _end && ICON_ARRAY[ i].onEnter();
+               }
+               onEnterInterval !== null && window.clearTimeout( onEnterInterval );
+               onEnterInterval = null;
+       }
+       function clickOK(){
+               pettanr.premiumSatge.shutdown();
+       }
+       function onMouseWheel( e, delta ){
+               if( winW < containerW){
+                       wrapX += delta * WHEEL_DELTA;
+                       wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
+                       jqContainer.css( { left: wrapX});
+                       
+                       onEnterInterval !== null && window.clearTimeout( onEnterInterval );
+                       onEnterInterval = window.setTimeout( onEnterShowImage, 500);
+               }
+               //e.stopPropagation();
+               return false;                   
+       }
+       
+       /* grobal method */
+       // this.rootElement = elmWrap;
+       this.displayName = 'premiumStage';
+       this.ID          = 'premiumStage';
+       this.MIN_WIDTH   = 320;
+       this.MIN_HEIGHT  = 320;
+       this.init = function(){
+               instance.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();
+               jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);
+               containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;
+               jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());
+               var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));
+               itemW = itemSize.width;
+               itemH = itemSize.height;
+               jqName = $( '#gruop-name-display');
+               jqButton = $( '#image-gruop-button').click( clickOK);
+               buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;
+               
+               delete instance.init;
+       }
+       this.jqWrap = null;
+       this.onOpen = function( _windowW, _windowH, _artistID, _onUpdateFunction ){
+               instance.init && instance.init();
+               //onUpdateFunction = _onUpdateFunction;
+               if( _onUpdateFunction){
+                       _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);
+               } else {
+                       _g_onUpdateFunction = null;
+               }
+               
+               var _index = ARTIST_ROOT_FILE.search( { id: _artistID } )[ 0 ],
+                       _artistFile = ARTIST_ROOT_FILE.getChildFileByIndex( _index ),
+                       i, l = 0;
+               if( _artistFile !== null ){
+                       for( i=0, l=_artistFile.getChildFileLength(); i<l; ++i ){
+                               ICON_ARRAY.push( new ImageGroupIconClass( i, _artistFile.getChildFileByIndex( i ) ));
+                       }                       
+               }
+
+               wrapX = 0;
+               containerW = l * itemW;
+               
+               winW = _windowW;
+               winH = _windowH;
+               var w = winW > containerW ? winW : containerW,
+                       h = _windowH > containerH ? containerH : _windowH;
+               
+               jqWrap.show();
+               jqContainer.css( {
+                       width:          w,
+                       height:         0,
+                       left:           0,
+                       top:            Math.floor( _windowH /2)
+               }).stop().animate( {
+                       height:         h,
+                       top:            Math.floor( _windowH /2 -h /2)
+               });
+               
+               jqButton.css( {
+                       left:           Math.floor( winW /2 - buttonW /2),
+                       top:            Math.floor( _windowH /2 + containerH /2 +10)
+               });
+               
+               onEnterShowImage();
+       }
+       this.onPaneResize = function( _windowW, _windowH ){
+               var w = _windowW > containerW ? _windowW : containerW,
+                       h = _windowH > containerH ? containerH : _windowH,
+                       offsetW = Math.floor( _windowW /2 -winW /2);
+               winW = _windowW;
+               winH = _windowH;
+               if( offsetW <= 0){ // smaller
+                       jqContainer.css( {
+                               left:                           offsetW,
+                               width:                          w
+                       }).animate( {
+                               left:                           0,
+                               top:                            Math.floor( _windowH /2 -h /2)
+                       });                                     
+               } else {
+                       jqContainer.css( { // bigger
+                               left:                           0,
+                               width:                          w,
+                               borderLeftWidth:        offsetW
+                       }).animate( {
+                               top:                            Math.floor( _windowH /2 -h /2),
+                               borderLeftWidth:        0
+                       });
+               }
+               jqButton.css( {
+                       left:           Math.floor( _windowW /2 -buttonW /2),
+                       top:            Math.floor( _windowH /2 +containerH /2 +10)
+               });
+               onEnterShowImage();
+       }
+       this.onClose = function(){
+               jqContainer.stop().animate( {
+                               height: 0,
+                               top:    Math.floor( winH /2 )
+                       }, function(){
+                               jqWrap.hide();
+                       });
+               while( ICON_ARRAY.length > 0 ){
+                       ICON_ARRAY.shift().destroy();
+               }
+               onEnterInterval !== null && window.clearTimeout( onEnterInterval );
+               onEnterInterval = _g_onUpdateFunction = null;
+       }
+});
+
+
+/* ----------------------------------------
+ * Text Editor
+ *  - overlay
+ */
+pettanr.textEditor = pettanr.view.registerApplication( function(){
+       var jqWrap, jqTextarea, jqButton,
+               textElement, onUpdateFunction,
+               ID = 'textEditor',
+               panelX, panelY,
+               instance = this;
+       //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
+       
+       function clickOK(){
+               textElement && textElement.text( jqTextarea.val() );
+               onUpdateFunction && onUpdateFunction( textElement );
+               pettanr.textEditor.shutdown();
+       }
+       
+       function keyCancel( e ){
+               if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){
+                       clickOK();
+                       e.preventDefault();
+               e.keyCode = 0;
+               e.cancelBubble = true;
+               e.returnValue = false;
+                       return false;
+               }       
+       }
+       
+       /* grobal method */
+       // this.rootElement = elmWrap;
+       this.displayName = 'textEditor';
+       this.ID          = 'textEditor';
+       this.MIN_WIDTH   = 320;
+       this.MIN_HEIGHT  = 320;
+       this.init = function(){
+               instance.jqWrap = jqWrap = $( '#speach-editor-wrapper' ).hide();
+               jqTextarea = $( '#speach-editor' ).keydown( keyCancel );
+               jqButton = $( '#speach-edit-complete-button').click( clickOK );
+               delete instance.init;
+       }
+       this.jqWrap = null;
+       this.onOpen = function( _w, _h, _panelX, _panelY, _textElement, _onUpdateFunction ){
+               instance.init && instance.init();
+               
+               panelX = _panelX;
+               panelY = _panelY;
+               textElement = _textElement;
+               onUpdateFunction = _onUpdateFunction || null;
+               
+               var h = _textElement.h;
+               
+               instance.onPaneResize( _w, _h );
+               jqTextarea.val( _textElement.text() ).focus();
+               
+               /*
+                * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
+                */
+               pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){
+                       var rows = 0;
+                       while( jqTextarea.height() < h){
+                               rows++;
+                               jqTextarea.attr( 'rows', rows);
+                       }
+                       rows > 1 && jqTextarea.attr( 'rows', rows -1 );
+               }, 0);
+       }
+       this.onPaneResize = function( _w, _h ){
+               jqWrap.show().css( {
+                       left:                   textElement.x + panelX,
+                       top:                    textElement.y + panelY,
+                       width:                  textElement.w,
+                       height:                 textElement.h
+               });
+       }
+       this.onClose = function(){
+               jqWrap.hide();
+               textElement = onUpdateFunction = null;          
+       }
+});
+
 // i18n
 // login
 // lib
@@ -1642,10 +1998,6 @@ pettanr.fn( pettanr.key);
 pettanr.fn( pettanr.balloon);
 
 pettanr.fn( pettanr.editor);
-pettanr.fn( pettanr.comicConsole);
-pettanr.fn( pettanr.uploadConsole);
-pettanr.fn( pettanr.panelConsole);
-pettanr.fn( pettanr.artistConsole);
 
 pettanr.fn( pettanr.file);
 pettanr.fn( pettanr.finder);
index 7dd9b67..7a978f4 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR work.js\r
- *   version 0.4.17\r
+ *   version 0.4.18\r
  *   \r
  * author:\r
  *   itozyun\r
@@ -37,8 +37,6 @@
  *    - MENU_BAR_CONTROL\r
  *    - HISTORY_CONTROL\r
  *    - SAVE_CONTROL\r
- *    - TEXT_EDITOR_CONTROL\r
- *    - IMAGE_GROUP_EXPROLER\r
  *    - WINDOW_CONTROL\r
  *       - WindowClass\r
  *    - INFOMATION_WINDOW\r
  * \r
  * \r
  */\r
-pettanr.editor = pettanr.view.createApplication( function(){\r
+pettanr.editor = pettanr.view.registerApplication( function(){\r
 \r
-       var COMIC_ELEMENT_TYPE_IMAGE = 0,\r
-               COMIC_ELEMENT_TYPE_TEXT = 1,\r
+       var PANEL_ELEMENT_TYPE_IMAGE = 0,\r
+               PANEL_ELEMENT_TYPE_TEXT = 1,\r
                MOUSE_LISTENER_ARRAY = [],\r
                COMIC_ELEMENT_ARRAY = [],\r
                ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
@@ -82,6 +80,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                windowW, windowH,\r
                currentListener = null,\r
                currentCursor = '',\r
+               instance = this,\r
                option,\r
                log;\r
 \r
@@ -358,13 +357,13 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        var     _argBack = _stack.argBack,\r
                                _argForword = _stack.argForword,\r
                                _value;\r
-                       if( typeof _argBack.length === 'number'){ // isArray\r
+                       if( Type.isArray( _argBack ) === true ){ // isArray\r
                                while( _argBack.length > 0){\r
                                        _value = _argBack.shift();\r
                                        _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
                                }\r
                        }\r
-                       if( typeof _argForword.length === 'number'){\r
+                       if( Type.isArray( _argForword ) === true ){\r
                                while( _argForword.length > 0){\r
                                        _value = _argForword.shift();\r
                                        _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
@@ -409,58 +408,6 @@ pettanr.editor = pettanr.view.createApplication( function(){
                }\r
        })();\r
 \r
-\r
-/* ----------------------------------------\r
- * OUTPUT_CONSOLE\r
- *  - overlay\r
- */\r
-       var OUTPUT_CONSOLE = ( function(){\r
-               var jqWrap, jqOutputArea,\r
-                       ID = 'outputConsole';\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function close(){\r
-                       jqWrap.hide();\r
-                       jqOutputArea.val('');\r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\r
-                       close();                        \r
-               }\r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
-                               jqOutputArea = $( '#output-area');\r
-                               delete OUTPUT_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _text){\r
-                               jqWrap.show();\r
-\r
-                               \r
-                               pettanr.overlay.show( this);\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );                              \r
-                               \r
-                               jqOutputArea.val( _text).focus();\r
-                       },\r
-                       onWindowResize: function(){\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );\r
-                       },\r
-                       onClose: close,\r
-                       ID: 'textEditor'\r
-               }\r
-       })();\r
-\r
 /* ----------------------------------------\r
  * SAVE_CONTROL\r
  *  - controler\r
@@ -475,23 +422,23 @@ pettanr.editor = pettanr.view.createApplication( function(){
                \r
                function quit(){\r
                        // 本来は os.application.close();\r
-                       pettanr.view.show( 0 );\r
+                       pettanr.editor.shutdown();\r
                }\r
                \r
                function outputAsHtml(){\r
-                       OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
+                       pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
                }\r
                function outputAsJsonString(){\r
-                       OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
+                       pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
                }\r
                return {\r
                        open: function(){},\r
                        close: function(){},\r
                        quit: quit,\r
                        panelUpdated: function( _updated){\r
-                               if( _updated !== undefined && updated !== _updated){\r
-                                       SAVE.visible( !!_updated);\r
-                                       SAVE_AND_QUIT.visible( !!_updated);\r
+                               if( _updated !== undefined && updated !== _updated ){\r
+                                       SAVE.visible( !!_updated );\r
+                                       SAVE_AND_QUIT.visible( !!_updated );\r
                                        updated = !!_updated;\r
                                }\r
                                return updated;\r
@@ -503,469 +450,6 @@ pettanr.editor = pettanr.view.createApplication( function(){
        })();\r
 \r
 /* ----------------------------------------\r
- * Text Editor\r
- *  - overlay\r
- */\r
-       var TEXT_EDITOR_CONTROL = ( function(){\r
-               var jqWrap, jqTextarea, jqButton,\r
-                       textElement, onUpdateFunction,\r
-                       ID = 'textEditor';\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function close(){\r
-                       jqWrap.hide();\r
-                       textElement = onUpdateFunction = null;          \r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\r
-                       textElement && textElement.text( jqTextarea.val());\r
-                       onUpdateFunction && onUpdateFunction( textElement);\r
-                       close();                        \r
-               }\r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
-                               jqTextarea = $( '#speach-editor').keydown( function( e){\r
-                                       if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
-                                               clickOK();\r
-                                               e.preventDefault();\r
-                                       e.keyCode = 0;\r
-                                       e.cancelBubble = true;\r
-                                       e.returnValue = false;\r
-                                               return false;\r
-                                       }\r
-                               });\r
-                               jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
-                               delete TEXT_EDITOR_CONTROL.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _textElement, _onUpdateFunction){\r
-                               textElement = _textElement;\r
-                               onUpdateFunction = _onUpdateFunction || null;\r
-                               pettanr.overlay.show( this);\r
-                               var h = _textElement.h;\r
-                               jqWrap.show().css( {\r
-                                       left:                   _textElement.x +PANEL_CONTROL.x(),\r
-                                       top:                    _textElement.y +PANEL_CONTROL.y(),\r
-                                       width:                  _textElement.w,\r
-                                       height:                 h\r
-                               });\r
-                               jqTextarea.val( _textElement.text()).focus();\r
-                               \r
-                               /*\r
-                                * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。\r
-                                */\r
-                               pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){\r
-                                       var rows = 0;\r
-                                       while( jqTextarea.height() < h){\r
-                                               rows++;\r
-                                               jqTextarea.attr( 'rows', rows);\r
-                                       }\r
-                                       rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
-                               }, 0);\r
-                       },\r
-                       onWindowResize: function(){\r
-                               textElement && this.show( textElement);\r
-                       },\r
-                       onClose: close,\r
-                       ID: ID\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * Image Group Exproler\r
- *  - overlay\r
- */\r
-       var IMAGE_GROUP_EXPROLER = ( function(){\r
-               var ICON_ARRAY = [],\r
-                       WHEEL_DELTA = 64,\r
-                       containerW, containerH, wrapX,\r
-                       jqWrap, jqContainer, jqItemOrigin,\r
-                       itemW, itemH,\r
-                       jqName, jqButton, buttonW,\r
-                       //onUpdateFunction,\r
-                       _g_onUpdateFunction,\r
-                       winW,\r
-                       onEnterInterval = null;\r
-               \r
-               var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',\r
-                       THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
-                       LIMIT_FILESIZE = 1024 * 10; // 10KB\r
-               var IMAGE_DATA = {\r
-                               pen001: [\r
-                                   {\r
-                                       "created_at": "2011-11-13T08:57:39Z", \r
-                                       "ext": "png", \r
-                                       "filesize": 9969, \r
-                                       "height": 463, \r
-                                       "id": 1, \r
-                                       "updated_at": "2011-11-13T08:57:39Z", \r
-                                       "width": 441\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:57:54Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 5418, \r
-                                       "height": 500, \r
-                                       "id": 2, \r
-                                       "updated_at": "2011-11-13T08:57:54Z", \r
-                                       "width": 500\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:06Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 8758, \r
-                                       "height": 464, \r
-                                       "id": 3, \r
-                                       "updated_at": "2011-11-13T08:58:06Z", \r
-                                       "width": 366\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:23Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 9383, \r
-                                       "height": 480, \r
-                                       "id": 4, \r
-                                       "updated_at": "2011-11-13T08:58:23Z", \r
-                                       "width": 392\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:33Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 11061, \r
-                                       "height": 500, \r
-                                       "id": 5, \r
-                                       "updated_at": "2011-11-13T08:58:33Z", \r
-                                       "width": 500\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T09:50:43Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 1131, \r
-                                       "height": 126, \r
-                                       "id": 6, \r
-                                       "updated_at": "2011-11-20T09:50:43Z", \r
-                                       "width": 259\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T09:50:55Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 1125, \r
-                                       "height": 126, \r
-                                       "id": 7, \r
-                                       "updated_at": "2011-11-20T09:50:55Z", \r
-                                       "width": 259\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 8, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 9, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 10, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 11, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-22T09:17:20Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 9055, \r
-                                       "height": 473, \r
-                                       "id": 12, \r
-                                       "updated_at": "2011-11-22T09:17:20Z", \r
-                                       "width": 405\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-22T10:11:07Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 8758, \r
-                                       "height": 464, \r
-                                       "id": 13, \r
-                                       "updated_at": "2011-11-22T10:11:07Z", \r
-                                       "width": 366\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-24T09:05:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 6431, \r
-                                       "height": 386, \r
-                                       "id": 16, \r
-                                       "updated_at": "2011-11-24T09:05:12Z", \r
-                                       "width": 453\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 17, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 18, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 19, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 20, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 21, \r
-                                       "updated_at": "2011-11-26T04:52:12Z",\r
-                                       "width": 306\r
-                                   }\r
-                               ]\r
-                       }\r
-               \r
-               var ImageGroupIconClass = function( INDEX, data){\r
-                       var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
-                               SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
-                               LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
-                               reversibleImage = null,\r
-                               onEnterFlag = false,\r
-                               imgW, imgH;\r
-                       JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
-                       jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
-                       \r
-                       function onImageLoad( url, _imgW, _imgH){\r
-                               if( reversibleImage === null) {\r
-                                       alert( url);\r
-                                       return;\r
-                               }\r
-                               imgW = _imgW || data.width || 64;\r
-                               imgH = _imgH || data.height || 64;\r
-                               JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
-                               var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
-                                       h = Math.floor( imgH *zoom),\r
-                                       w = Math.floor( imgW *zoom);\r
-                               reversibleImage.elm.style.width = w +'px';\r
-                               reversibleImage.elm.style.height = h +'px';\r
-                               reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
-                               reversibleImage.resize( w, h);\r
-                               JQ_ICON_WRAP.click( onClick);\r
-                       }\r
-                       \r
-                       function onClick( e){\r
-                               pettanr.overlay.hide();\r
-                               if( _g_onUpdateFunction) {\r
-                                       if( LOW_SRC === null){\r
-                                               window[ _g_onUpdateFunction]( SRC, imgW, imgH);\r
-                                               window[ _g_onUpdateFunction] = null;\r
-                                       } else {\r
-                                               var _onLoad = pettanr.util.createGlobalFunc( [\r
-                                                               'function( url, w, h){',\r
-                                                                       'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',\r
-                                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
-                                                               '}'\r
-                                                       ].join( '')),\r
-                                                       _onError = pettanr.util.createGlobalFunc( [\r
-                                                               'function( url){',\r
-                                                                       'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',\r
-                                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
-                                                               '}'\r
-                                                       ].join( ''));\r
-                                               pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);\r
-                                               window[ _onLoad] = window[ _onError] = undefined;\r
-                                       }\r
-                               }\r
-                               close();\r
-                       }\r
-                       \r
-                       return {\r
-                               onEnter: function(){\r
-                                       if( onEnterFlag === true) return;\r
-                                       reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);\r
-                                       JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
-                                       onEnterFlag = true;                                             \r
-                               },\r
-                               destroy: function(){\r
-                                       reversibleImage && reversibleImage.destroy();\r
-                                       JQ_ICON_WRAP.remove();\r
-                                       reversibleImage = JQ_ICON_WRAP = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               }\r
-               \r
-               function close(){\r
-                       jqContainer.stop().animate( {\r
-                                       height: 0,\r
-                                       top:    Math.floor( windowH /2)\r
-                               }, function(){\r
-                                       jqWrap.hide()\r
-                               });\r
-                       while( ICON_ARRAY.length > 0){\r
-                               ICON_ARRAY.shift().destroy();\r
-                       }\r
-                       onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                       onEnterInterval = _g_onUpdateFunction = null;\r
-               }\r
-               function onEnterShowImage(){\r
-                       var l = ICON_ARRAY.length,\r
-                               _start = -wrapX /itemW -1,\r
-                               _end = _start + winW /itemW +1;\r
-                       for( var i=0; i<l; ++i){\r
-                               _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
-                       }\r
-                       onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                       onEnterInterval = null;\r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\r
-                       close();\r
-               }\r
-               function onMouseWheel( e, delta){\r
-                       if( winW < containerW){\r
-                               wrapX += delta *WHEEL_DELTA;\r
-                               wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
-                               jqContainer.css( { left: wrapX});\r
-                               \r
-                               onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                               onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
-                       }\r
-                       //e.stopPropagation();\r
-                       return false;                   \r
-               }\r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
-                               jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);\r
-                               containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;\r
-                               jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
-                               var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));\r
-                               itemW = itemSize.width;\r
-                               itemH = itemSize.height;\r
-                               jqName = $( '#gruop-name-display');\r
-                               jqButton = $( '#image-gruop-button').click( clickOK);\r
-                               buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
-                               \r
-                               delete IMAGE_GROUP_EXPROLER.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _onUpdateFunction){\r
-                               //onUpdateFunction = _onUpdateFunction;\r
-                               if( _onUpdateFunction){\r
-                                       _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);\r
-                               } else {\r
-                                       _g_onUpdateFunction = null;\r
-                               }\r
-                               pettanr.overlay.show( this);\r
-                               \r
-                               var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
-                                       l = CURRENT_GROUP_ARRAY.length;\r
-                               for( var i=0; i<l; ++i){\r
-                                       ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));\r
-                               }\r
-                               wrapX = 0;\r
-                               containerW = l * itemW;\r
-                               \r
-                               winW = windowW;\r
-                               var w = winW > containerW ? winW : containerW,\r
-                                       h = windowH > containerH ? containerH : windowH;\r
-                               \r
-                               jqWrap.show();\r
-                               jqContainer.css( {\r
-                                       width:          w,\r
-                                       height:         0,\r
-                                       left:           0,\r
-                                       top:            Math.floor( windowH /2)\r
-                               }).stop().animate( {\r
-                                       height:         h,\r
-                                       top:            Math.floor( windowH /2 -h /2)\r
-                               });\r
-                               \r
-                               jqButton.css( {\r
-                                       left:           Math.floor( winW /2 -buttonW /2),\r
-                                       top:            Math.floor( windowH /2 +containerH /2 +10)\r
-                               });\r
-                               \r
-                               onEnterShowImage();\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               var w = _windowW > containerW ? _windowW : containerW,\r
-                                       h = _windowH > containerH ? containerH : _windowH,\r
-                                       offsetW = Math.floor( _windowW /2 -winW /2);\r
-                               winW = _windowW;\r
-                               if( offsetW <= 0){ // smaller\r
-                                       jqContainer.css( {\r
-                                               left:                           offsetW,\r
-                                               width:                          w\r
-                                       }).animate( {\r
-                                               left:                           0,\r
-                                               top:                            Math.floor( _windowH /2 -h /2)\r
-                                       });                                     \r
-                               } else {\r
-                                       jqContainer.css( { // bigger\r
-                                               left:                           0,\r
-                                               width:                          w,\r
-                                               borderLeftWidth:        offsetW\r
-                                       }).animate( {\r
-                                               top:                            Math.floor( _windowH /2 -h /2),\r
-                                               borderLeftWidth:        0\r
-                                       });\r
-                               }\r
-                               jqButton.css( {\r
-                                       left:           Math.floor( _windowW /2 -buttonW /2),\r
-                                       top:            Math.floor( _windowH /2 +containerH /2 +10)\r
-                               });\r
-                               onEnterShowImage();\r
-                       },\r
-                       onClose: close,\r
-                       ID: 'imageGroupExproler'\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
  * WINDOWS_CONTROL\r
  *  - contloler\r
  *  - mouseEventListener\r
@@ -1396,15 +880,12 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        instance = this;\r
                                        delete this.onInit;\r
                                },\r
-                               onFirstOpen: function( _w, _h){\r
-                                       finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
-                                       delete this.onFirstOpen;\r
-                               },\r
                                onOpen: function( _w, _h){\r
-                                       finder.onOpen( _w, _h);\r
+                                       finder = finder || pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
+                                       finder.open( _w, _h );\r
                                },\r
-                               onResize: function( _w, _h){\r
-                                       finder.resize( _w, _h);\r
+                               onResize: function( _w, _h ){\r
+                                       finder.resize( _w, _h );\r
                                }\r
                        },\r
                        'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300\r
@@ -1462,13 +943,13 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                                x = currentElement !== null ? currentElement.x : 0,\r
                                                y = currentElement !== null ? currentElement.y : 0,\r
                                                z = currentElement !== null ? currentElement.z : 0,\r
-                                               a = _elementType === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,\r
+                                               a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,\r
                                                w = currentElement !== null ? currentElement.w : 0,\r
                                                h = currentElement !== null ? currentElement.h : 0,\r
-                                               actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,\r
-                                               actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,\r
-                                               wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,\r
-                                               hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,\r
+                                               actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,\r
+                                               actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,\r
+                                               wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,\r
+                                               hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,\r
                                                keepAspect = currentElement !== null && currentElement.keepAspect === true;\r
                                        \r
                                        if( currentElementType !== _elementType){\r
@@ -1853,66 +1334,64 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        }\r
                }\r
                        \r
-               return {\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               var _x = _mouseX -panelX,\r
-                                       _y = _mouseY -panelY;\r
+               this.onMouseDown = function( _mouseX, _mouseY){\r
+                       var _x = _mouseX -panelX,\r
+                               _y = _mouseY -panelY;\r
+                       if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
+                       offsetY = _y;\r
+                       startY = panelY;\r
+                       startH = panelH;\r
+                       isDragging = true;\r
+                       MOUSE_CURSOR( 'n-resize');\r
+                       return true;\r
+               }\r
+               this.onMouseMove = function( _mouseX, _mouseY){\r
+                       var _x = _mouseX -panelX,\r
+                               _y = _mouseY -panelY;\r
+                       if( isDragging !== true){\r
                                if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
-                               offsetY = _y;\r
-                               startY = panelY;\r
-                               startH = panelH;\r
-                               isDragging = true;\r
-                               MOUSE_CURSOR( 'n-resize');\r
+                               COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
+                               MOUSE_CURSOR( 'pointer');\r
                                return true;\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               var _x = _mouseX -panelX,\r
-                                       _y = _mouseY -panelY;\r
-                               if( isDragging !== true){\r
-                                       if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
-                                       COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
-                                       MOUSE_CURSOR( 'pointer');\r
-                                       return true;\r
+                       } else {\r
+                               var move = _y -offsetY;\r
+                               if( isTop === true){\r
+                                       if( panelH - move < MIN_PANEL_HEIGHT){\r
+                                               move = panelH -MIN_PANEL_HEIGHT;\r
+                                       }\r
+                                       PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
                                } else {\r
-                                       var move = _y -offsetY;\r
-                                       if( isTop === true){\r
-                                               if( panelH - move < MIN_PANEL_HEIGHT){\r
-                                                       move = panelH -MIN_PANEL_HEIGHT;\r
-                                               }\r
-                                               PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
-                                       } else {\r
-                                               var _h = startH +move;\r
-                                               if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
-                                                       PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
-                                               }\r
+                                       var _h = startH +move;\r
+                                       if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
+                                               PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
                                        }\r
                                }\r
-                               return true;\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               if( isDragging !== true) return;\r
-                               ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
-                               isDragging = false;\r
-                               MOUSE_CURSOR( '');\r
-                       },\r
-                       busy: function(){\r
-                               return isDragging\r
-                       },\r
-                       onPanelResize: function( _x, _y, _w, _h){\r
-                               panelX = _x;\r
-                               panelY = _y;\r
-                               if( panelW !== _w){\r
-                                       ELM.style.width = ( _w +2) +'px';\r
-                                       panelW = _w;\r
-                               }\r
-                               panelH = _h;\r
-                               y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
-                               w = panelW +2;\r
                        }\r
+                       return true;\r
+               }\r
+               this.onMouseUp = function( _mouseX, _mouseY){\r
+                       if( isDragging !== true) return;\r
+                       ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
+                       isDragging = false;\r
+                       MOUSE_CURSOR( '');\r
+               }\r
+               this.busy = function(){\r
+                       return isDragging\r
+               }\r
+               this.onPanelResize = function( _x, _y, _w, _h){\r
+                       panelX = _x;\r
+                       panelY = _y;\r
+                       if( panelW !== _w){\r
+                               ELM.style.width = ( _w +2) +'px';\r
+                               panelW = _w;\r
+                       }\r
+                       panelH = _h;\r
+                       y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
+                       w = panelW +2;\r
                }\r
        };\r
-       var     PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),\r
-               PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);\r
+       var     PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ),\r
+               PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );\r
                \r
        PanelResizerClass = undefined;\r
 \r
@@ -1984,14 +1463,17 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
                }\r
                function edit(){\r
-                       if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;\r
-                       TEXT_EDITOR_CONTROL.show( currentElement);\r
+                       if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;\r
+                       pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), currentElement );\r
                        buttonBackOrForward( true);\r
                }\r
                function change(){\r
                        if( currentElement === null) return;\r
                        buttonBackOrForward( true);\r
-                       IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
+                       pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture );\r
+               }\r
+               function onImageSelect( resourcePicture ){\r
+                       currentElement.resourcePicture( resourcePicture );\r
                }\r
                return {\r
                        init: function(){\r
@@ -2018,7 +1500,9 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                                                                        \r
                                delete CONSOLE_CONTROLER.init;\r
                        },\r
-                       show: function( _currentElement, _w, _h){\r
+                       show: function( _currentElement, _w, _h ){\r
+                               CONSOLE_CONTROLER.init && CONSOLE_CONTROLER.init();\r
+                               \r
                                visible === false && jqConsoleWrapper.show();\r
                                visible = true;\r
                                currentElement = _currentElement;\r
@@ -2026,17 +1510,17 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        _z = _currentElement.z;\r
                                if( currentType !== _currentType){\r
                                        currentType = _currentType;\r
-                                       jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
-                                       jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
-                                       consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
-                                       consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
+                                       jqImgConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_IMAGE);\r
+                                       jqTextConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_TEXT);\r
+                                       consoleWidth = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
+                                       consoleHeight = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
                                }\r
                                consoleX = Math.floor( ( _w -consoleWidth) /2);\r
                                \r
                                LAYER_BACK_BUTTON.visible( _z > 0);\r
                                LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
                                DELETE_BUTTON.visible( true);\r
-                               EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+                               EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT);\r
                                CHANGE_BUTTON.visible( false);\r
                                \r
                                if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
@@ -2134,7 +1618,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                currentText = null;\r
                        },\r
                        onStart: function( _currentText, _mouseX, _mouseY){\r
-                               if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;\r
+                               if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT) return false;\r
                                x = _currentText.x;\r
                                y = _currentText.y;\r
                                if( this.hitTest( _mouseX -x, _mouseY -y) === true){\r
@@ -2314,7 +1798,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        },\r
                        show: function( _currentElement){\r
                                currentElement = _currentElement;\r
-                               currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
+                               currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;\r
                                elmResizerContainerStyle.display = '';\r
                        },\r
                        hide: function(){\r
@@ -2323,7 +1807,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        },\r
                        onStart: function( _currentElement, _mouseX, _mouseY){\r
                                currentElement = _currentElement;\r
-                               currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
+                               currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;\r
                                if( _currentElement.keepSize === true) return false;\r
                                currentIndex = this.index( _mouseX, _mouseY);\r
                                if( currentIndex === -1) return false;\r
@@ -2333,7 +1817,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                startY = baseY = _currentElement.y;\r
                                startW = baseW = _currentElement.w;\r
                                startH = baseH = _currentElement.h;\r
-                               if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){\r
+                               if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){\r
                                        startFilpV = _currentElement.flipV();\r
                                        startFilpH = _currentElement.flipH();                                                   \r
                                }\r
@@ -2386,7 +1870,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                                _h = MIN_ELEMENT_SIZE;\r
                                        }\r
                                } else \r
-                               if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){\r
+                               if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){\r
                                        return;\r
                                } else \r
                                if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){\r
@@ -2454,7 +1938,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        onCancel: function(){\r
                                MOUSE_CURSOR( '');\r
                                COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);\r
-                               currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+                               currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?\r
                                        currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
                                        currentElement.animate( startX, startY, startW, startH, angle);\r
                        },\r
@@ -2560,7 +2044,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                if( currentElement !== _currentElement){\r
                                        currentElement = _currentElement;\r
                                        \r
-                                       currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
+                                       currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT);\r
                                        currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();\r
                                        \r
                                        flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
@@ -2606,7 +2090,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        _a = arg[ 5],\r
                                        _flipV = arg[ 6], _flipH = arg[ 7];\r
                                if( !_currentElement && !currentOperator) return;\r
-                               _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+                               _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?\r
                                        _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
                                        _currentElement.animate( _x, _y, _w, _h, _a);\r
                                currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
@@ -2629,7 +2113,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        busy: function(){\r
                                return currentOperator !== null;\r
                        },\r
-                       hitTest: function( _mouseX, _mouseY, _comicElement){\r
+                       hitTest: function( _mouseX, _mouseY, _comicElement ){\r
                                var _x, _y, _w, _h;\r
                                if( _comicElement === currentElement){\r
                                        var _consoleX = CONSOLE_CONTROLER.x();\r
@@ -2645,6 +2129,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        _w = _comicElement.w +HIT_AREA *2;\r
                                        _h = _comicElement.h +HIT_AREA *2;\r
                                }\r
+                               log.html( [ _x, _y, _w, _h ].join( ' ') );\r
                                return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;\r
                        },\r
                        onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
@@ -2681,33 +2166,25 @@ pettanr.editor = pettanr.view.createApplication( function(){
         *  // COMIC_ELEMENT_OPERATION_MANAGER\r
         */\r
 \r
-       var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
-               var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;\r
-               return {\r
-                       $: JQ_WAPPER,\r
-                       type: COMIC_ELM_TYPE,\r
-                       x: x,\r
-                       y: y,\r
-                       w: w,\r
-                       h: h,                                   \r
-                       z: z,\r
-                       timing: timing,\r
-                       hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest(  _mouseX, _mouseY, this);},\r
-                       shift: function( _shiftX, _shiftY){\r
-                               update( this.x +_shiftX, this.y +_shiftY);\r
-                       },\r
-                       busy: function(){\r
-                               return OPERATOR.busy();\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
-                       },\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
-                       }\r
+       var AbstractComicElement = function( COMIC_ELM_TYPE ){\r
+               this.type = COMIC_ELM_TYPE;\r
+               this.hitTest = function( _mouseX, _mouseY ){\r
+                       return COMIC_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );\r
+               }\r
+               this.shift = function( _shiftX, _shiftY ){\r
+                       this.resize( this.x + _shiftX, this.y + _shiftY);\r
+               }\r
+               this.busy = function(){\r
+                       return COMIC_ELEMENT_OPERATION_MANAGER.busy();\r
+               }\r
+               this.onMouseMove = function( _mouseX, _mouseY ){\r
+                       COMIC_ELEMENT_OPERATION_MANAGER.onMouseMove( this, _mouseX, _mouseY );\r
+               }\r
+               this.onMouseUp = function( _mouseX, _mouseY ){\r
+                       COMIC_ELEMENT_OPERATION_MANAGER.onMouseUp( this, _mouseX, _mouseY );\r
+               }\r
+               this.onMouseDown = function( _mouseX, _mouseY ){\r
+                       COMIC_ELEMENT_OPERATION_MANAGER.onMouseDown( this, _mouseX, _mouseY );\r
                }\r
        };\r
 \r
@@ -2715,131 +2192,140 @@ pettanr.editor = pettanr.view.createApplication( function(){
  * ImageElementClass\r
  */\r
        var     jqImageElementOrigin;\r
-       var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){\r
+       var ImageElementClass = function( data ){\r
                jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
                \r
-               var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
-                       OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
+               var JQ_WRAPPER = jqImageElementOrigin.clone( true ),\r
                        SAVE = HISTORY_CONTROL.saveState,\r
                        HIT_AREA = MOUSE_HIT_AREA,\r
-                       reversibleImage = null,\r
-                       actualW = 0, actualH = 0,\r
+                       w = data.width,\r
+                       h = data.height,\r
+                       x, y, z, timing,\r
                        flipH = w < 0 ? -1 : 1,\r
                        flipV = h < 0 ? -1 : 1,\r
-                       instance;\r
-               w = Math.floor( w);\r
-               h = Math.floor( h);\r
-               \r
-               function update( _x, _y, _w, _h, animate){\r
+                       resourcePicture,\r
+                       actualW,\r
+                       actualH,\r
+                       reversibleImage = null,\r
+                       instance = this;\r
+               w = Math.floor( w );\r
+               h = Math.floor( h );\r
+\r
+               function onAnimeComplete(){\r
+                       reversibleImage.resize( flipH * w, flipV * h );\r
+               }\r
+               function updateResourcePicture( _resourcePicture ){\r
+                       resourcePicture = _resourcePicture;\r
+                       \r
+                       actualW = _resourcePicture.width;\r
+                       actualH = _resourcePicture.height;\r
+                       \r
+                       var _reversibleImage = pettanr.image.createReversibleImage( \r
+                               [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),\r
+                               flipH * w, flipV * h\r
+                       );\r
+                       if( reversibleImage !== null){\r
+                               JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );\r
+                               reversibleImage.destroy();\r
+                       } else {\r
+                               JQ_WRAPPER.append( _reversibleImage.elm );\r
+                       }\r
+                       reversibleImage = _reversibleImage;\r
+               }\r
+               /* global methods */\r
+               this.$ = JQ_WRAPPER;\r
+               //this.x = x;\r
+               //this.y = y;\r
+               //this.w = w;\r
+               //this.h = h;                                   \r
+               this.z = data.z;\r
+               this.timing = timing;\r
+               this.init = function(){\r
+                       updateResourcePicture( data.resource_picture );\r
+                       instance.resize( data.x, data.y, data.width, data.height );\r
+                       delete instance.init;\r
+               }\r
+               this.flip = function( _updateH, _updateV ){\r
+                       if( _updateH !== true && _updateV !== true ) return;\r
+                       flipH = _updateH === true ? -flipH : flipH;\r
+                       flipV = _updateV === true ? -flipV : flipV;\r
+                       reversibleImage.resize( flipH * w, flipV * h );\r
+               }\r
+               this.flipV = function(){\r
+                       return flipV;\r
+               }\r
+               this.flipH = function(){\r
+                       return flipH;\r
+               }\r
+               this.resourcePicture = function( _resourcePicture ){\r
+                       if( _resourcePicture && _resourcePicture !== resourcePicture ){\r
+                               SAVE( updateResourcePicture, resourcePicture, _resourcePicture );\r
+                               updateResourcePicture( _resourcePicture );\r
+                       }\r
+                       return resourcePicture;\r
+               }\r
+               this.getArtistID = function(){\r
+                       return resourcePicture.artist_id || resourcePicture.artist.id || -1;\r
+               }\r
+               this.actualW = function(){ return actualW;}\r
+               this.actualH = function(){ return actualH;}\r
+               this.keepSize = false;\r
+               this.resize = function( _x, _y, _w, _h, animate ){\r
                        instance.x = x = _x !== undefined ? _x : x;\r
                        instance.y = y = _y !== undefined ? _y : y;\r
                        instance.w = w = _w !== undefined ? _w : w;\r
                        instance.h = h = _h !== undefined ? _h : h;\r
-                       JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { \r
+                       JQ_WRAPPER[ animate === true ? 'animate' : 'css' ]( { \r
                                left:   x,\r
                                top:    y,\r
                                width:  w,\r
                                height: h\r
-                       }, 250, onAnimeComplete);\r
+                       }, 250, onAnimeComplete );\r
                        animate !== true && onAnimeComplete();\r
                }\r
-               function onAnimeComplete(){\r
-                       reversibleImage.resize( flipH * w, flipV * h);\r
-               }\r
-               \r
-               function updateUrl( _url){\r
-                       if( url === _url) return;\r
-                       url = _url || url;\r
-                       var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
-                               actualW = _actualW;\r
-                               actualH = _actualH;\r
-                       });\r
-                       if( reversibleImage !== null){\r
-                               JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
-                               reversibleImage.destroy();\r
-                       } else {\r
-                               JQ_WRAPPER.append( _reversibleImage.elm);\r
-                       }\r
-                       reversibleImage = _reversibleImage;\r
+               this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){\r
+                       flipH = _flipH !== undefined ? _flipH : flipH;\r
+                       flipV = _flipV !== undefined ? _flipV : flipV;\r
+                       instance.resize( _x, _y, _w, _h, true);\r
+               }\r
+               this.getAsHTML = function( isAbsoluteUrl, isXHTML ){\r
+                       return [\r
+                               '<img ',\r
+                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
+                                       'width="', w, '" ',\r
+                                       'height="', h, '" ',\r
+                                       'style="',                                                                      \r
+                                               'left:', x, 'px;',\r
+                                               'top:', y, 'px;',\r
+                                               'z-index:', this.z, ';',\r
+                                       '"',\r
+                               isXHTML !== true ? '>' : ' \/>'\r
+                       ].join( '');\r
+               }\r
+               this.getAsJsonString = function(){\r
+                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+                       return [\r
+                               '"new', this.timing, '": {', cr,\r
+                                       '"resource_picture_id": 1,', cr,\r
+                                       '"x": ', x, ',', cr,\r
+                                       '"y": ', y, ',', cr,\r
+                                       '"z": ', this.z, ',', cr,\r
+                                       '"width": ', w, ',', cr,\r
+                                       '"height": ', h, ',', cr,\r
+                                       '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
+                                       '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
+                                       '"t": ', this.timing, cr,\r
+                               '}'\r
+                       ].join( '');\r
+               }\r
+               this.destroy = function(){\r
+                       reversibleImage.destroy();\r
+                       JQ_WRAPPER.remove();\r
+                       JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = SAVE = null;\r
+                       delete this.destroy;\r
                }\r
-               return pettanr.util.extend(\r
-                       new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),\r
-                       {\r
-                               init: function(){\r
-                                       instance = this;\r
-                                       updateUrl();\r
-                                       update();\r
-                                       delete this.init;\r
-                               },\r
-                               flip: function( _flipH, _flipV){\r
-                                       if( _flipH !== true && _flipV !== true) return;\r
-                                       flipH = _flipH === true ? -flipH : flipH;\r
-                                       flipV = _flipV === true ? -flipV : flipV;\r
-                                       reversibleImage.resize( flipH * w, flipV * h);\r
-                               },\r
-                               flipV: function(){\r
-                                       return flipV;\r
-                               },\r
-                               flipH: function(){\r
-                                       return flipH;\r
-                               },\r
-                               url: function( _url, _actualW, _actualH){\r
-                                       if( _url && _url !== url){\r
-                                               SAVE( updateUrl, url, _url);\r
-                                               actualW = _actualW;\r
-                                               actualH = _actualH;\r
-                                               updateUrl( _url);\r
-                                       }\r
-                                       return url;\r
-                               },\r
-                               actualW: function(){ return actualW;},\r
-                               actualH: function(){ return actualH;},\r
-                               keepSize: false,\r
-                               resize: update,\r
-                               animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
-                                       flipH = _flipH !== undefined ? _flipH : flipH;\r
-                                       flipV = _flipV !== undefined ? _flipV : flipV;\r
-                                       update( _x, _y, _w, _h, true);\r
-                               },\r
-                               getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                                       return [\r
-                                               '<img ',\r
-                                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                                       'width="', w, '" ',\r
-                                                       'height="', h, '" ',\r
-                                                       'style="',                                                                      \r
-                                                               'left:', x, 'px;',\r
-                                                               'top:', y, 'px;',\r
-                                                               'z-index:', this.z, ';',\r
-                                                       '"',\r
-                                               isXHTML !== true ? '>' : ' \/>'\r
-                                       ].join( '');\r
-                               },\r
-                               getAsJsonString: function(){\r
-                                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       return [\r
-                                               '"new', this.timing, '": {', cr,\r
-                                                       '"resource_picture_id": 1,', cr,\r
-                                                       '"x": ', x, ',', cr,\r
-                                                       '"y": ', y, ',', cr,\r
-                                                       '"z": ', this.z, ',', cr,\r
-                                                       '"width": ', w, ',', cr,\r
-                                                       '"height": ', h, ',', cr,\r
-                                                       '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
-                                                       '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
-                                                       '"t": ', this.timing, cr,\r
-                                               '}'\r
-                                       ].join( '');\r
-                               },\r
-                               destroy: function(){\r
-                                       reversibleImage.destroy();\r
-                                       JQ_WRAPPER.remove();\r
-                                       JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               );\r
        }\r
+       ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );\r
 /*\r
  * / ImageElementClass\r
  * --------------------------------------------------------------------------------------------\r
@@ -2859,24 +2345,73 @@ pettanr.editor = pettanr.view.createApplication( function(){
  * \r
  */\r
        var jqTextElementOrigin;\r
-       var TextElementClass = function( type, a, text, x, y, z, w, h, timing){\r
+       var TextElementClass = function( data ){\r
                jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
                        var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
                                _MODERN = $( $( '#textElementTemplete').remove().html());\r
                        return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
                })();\r
                \r
-               var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
-                       XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),\r
+               var JQ_WRAPPER = jqTextElementOrigin.clone( true ),\r
                        TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
-                       OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
                        HIT_AREA = MOUSE_HIT_AREA,\r
-                       SAVE = HISTORY_CONTROL.saveState,\r
-                       instance;\r
-                       \r
-               JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
+                       SAVE     = HISTORY_CONTROL.saveState,\r
+                       type     = data.balloon_template_id,\r
+                       text     = ( function(){\r
+                               var _speachs = data.speaches_attributes;\r
+                               for( var k in _speachs ){\r
+                                       return _speachs[ k ].content || '';\r
+                               }\r
+                               return '';\r
+                       }),\r
+                       balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),\r
+                       x, y, w, h, a,\r
+                       instance = this;\r
+               \r
+               JQ_WRAPPER.find( 'img').eq( 0).replaceWith( balloon.elm );\r
+               \r
+               function updateType( _type ){\r
+                       if( type !== _type ){\r
+                               type = _type || type;\r
+                               balloon.type( type );\r
+                       }\r
+               }\r
+               function updateAngle( _a){\r
+                       if( _a !== undefined && a !== _a ){\r
+                               a = _a !== undefined ? _a : a;\r
+                               balloon.angle( a );\r
+                       }\r
+               }\r
+               function updateText( _text){\r
+                       text = _text || text || '';\r
+                       TEXT_ELM.html( text );\r
+               }\r
                \r
-               function update( _x, _y, _w, _h, _a, animate){\r
+               /* global methods */\r
+               this.$ = JQ_WRAPPER;\r
+               //this.x = x;\r
+               //this.y = y;\r
+               //this.w = w;\r
+               //this.h = h;\r
+               this.z = data.z;\r
+               this.timing = data.t;\r
+               this.init = function(){\r
+                       updateText();\r
+                       instance.resize( data.x, data.y, data.width, data.height, data.tail );\r
+                       delete instance.init;\r
+               }\r
+               this.angle = function( _a){\r
+                       _a !== undefined && instance.resize( undefined, undefined, undefined, undefined, _a);\r
+                       return a;\r
+               }\r
+               this.text = function( _text){\r
+                       if( _text && text !== _text) {\r
+                               SAVE( updateText, text || '', _text);\r
+                               updateText( _text);\r
+                       }\r
+                       return text;\r
+               }\r
+               this.resize = function( _x, _y, _w, _h, _a, animate ){\r
                        instance.x = x = _x !== undefined ? _x : x;\r
                        instance.y = y = _y !== undefined ? _y : y;\r
                        instance.w = w = _w !== undefined ? _w : w;\r
@@ -2890,117 +2425,77 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        height:         h\r
                                }, 250,\r
                                function(){\r
-                                       XBROWSER_BALLOON.resize( a, w, h);\r
+                                       balloon.resize( a, w, h);\r
                                }\r
                        );              \r
-                       animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
+                       animate !== true && balloon.resize( a, w, h);\r
                }\r
-               \r
-               function updateType( _type){\r
-                       if( type !== _type){\r
-                               type = _type || type;\r
-                               XBROWSER_BALLOON.type( type);\r
-                       }\r
+               this.animate = function ( _x, _y, _w, _h, _a ){\r
+                       instance.resize( _x, _y, _w, _h, _a, true);\r
                }\r
-               function updateAngle( _a){\r
-                       if( _a !== undefined && a !== _a){\r
-                               a = _a !== undefined ? _a : a;\r
-                               XBROWSER_BALLOON.angle( a);\r
-                       }\r
+               this.destroy = function(){\r
+                       JQ_WRAPPER.remove();\r
+                       balloon.destroy();\r
+                       balloon = null;\r
+                       delete instance.destroy;\r
                }\r
-               function updateText( _text){\r
-                       text = _text || text || '';\r
-                       TEXT_ELM.html( text);\r
+               this.getAsJSON = function(){\r
+                       \r
                }\r
-               \r
-               return pettanr.util.extend(\r
-                       new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),\r
-                       {\r
-                               init: function(){\r
-                                       instance = this;\r
-                                       updateText();\r
-                                       update();\r
-                                       delete this.init;\r
-                               },\r
-                               angle: function( _a){\r
-                                       _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
-                                       return a;\r
-                               },\r
-                               text: function( _text){\r
-                                       if( _text && text !== _text) {\r
-                                               SAVE( updateText, text || '', _text);\r
-                                               updateText( _text);\r
-                                       }\r
-                                       return text;\r
-                               },\r
-                               resize: update,\r
-                               animate: function ( _x, _y, _w, _h, _a){\r
-                                       update( _x, _y, _w, _h, _a, true);\r
-                               },\r
-                               destroy: function(){\r
-                                       JQ_WRAPPER.remove();\r
-                                       XBROWSER_BALLOON.destroy();\r
-                                       OPERATOR = null;\r
-                                       delete this.destroy;\r
-                               },\r
-                               getAsJSON: function(){\r
-                                       \r
-                               },\r
-                               getAsJsonString: function(){\r
-                                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       return [\r
-                                               '"new', this.timing, '": {', cr,\r
-                                                       '"balloon_template_id": ', 1, ',', cr,\r
-                                                       '"system_picture_id": ', 1, ',', cr,\r
-                                                       '"size": ', 1, ',', cr,\r
-                                                       '"tail": ', a, ',', cr,\r
+               this.getAsJsonString = function(){\r
+                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+                       return [\r
+                               '"new', this.timing, '": {', cr,\r
+                                       '"balloon_template_id": ', 1, ',', cr,\r
+                                       '"system_picture_id": ', 1, ',', cr,\r
+                                       '"size": ', 1, ',', cr,\r
+                                       '"tail": ', a, ',', cr,\r
+                                       '"x": ', x, ',', cr,\r
+                                       '"y": ', y, ',', cr,\r
+                                       '"z": ', this.z, ',', cr,\r
+                                       '"t": ', this.timing, ',', cr,\r
+                                       '"width": ', w, ',', cr,\r
+                                       '"height": ', h, ',', cr,\r
+                                       '"speaches_attributes": {', cr,\r
+                                               '"newf', this.timing, '": {', cr,\r
+                                               '"content": "', text, '",', cr,\r
                                                        '"x": ', x, ',', cr,\r
                                                        '"y": ', y, ',', cr,\r
-                                                       '"z": ', this.z, ',', cr,\r
-                                                       '"t": ', this.timing, ',', cr,\r
+                                                       '"t": ', 0, ',', cr,\r
                                                        '"width": ', w, ',', cr,\r
-                                                       '"height": ', h, ',', cr,\r
-                                                       '"speaches_attributes": {', cr,\r
-                                                       '"newf', this.timing, '": {', cr,\r
-                                                       '"content": "', text, '",', cr,\r
-                                                                       '"x": ', x, ',', cr,\r
-                                                                       '"y": ', y, ',', cr,\r
-                                                                       '"t": ', 0, ',', cr,\r
-                                                                       '"width": ', w, ',', cr,\r
-                                                                       '"height": ', h, cr,\r
-                                                               '}', cr,\r
-                                                       '}', cr,\r
-                                               '}'\r
-                                       ].join( '');\r
-                               },\r
-                               getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                                       var url = XBROWSER_BALLOON.getURL();\r
-                                       return [\r
-                                               '<img ',\r
-                                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                                       'width="', w, '" ',\r
-                                                       'height="', h, '" ',\r
-                                                       'style="',                                                                      \r
-                                                               'left:', x, 'px;',\r
-                                                               'top:', y, 'px;',\r
-                                                               'z-index:', this.z, ';',\r
-                                                       '"',\r
-                                               isXHTML !== true ? '>' : ' \/>',\r
-                                               pettanr.LINE_FEED_CODE_TEXTAREA,\r
-                                               '<div class="balloon" style="',\r
-                                                       'left:', x, 'px;',\r
-                                                       'top:', y, 'px;',\r
-                                                       'width:', w, 'px;',\r
-                                                       'height:', h, 'px;',\r
-                                                       'z-index:', this.z,\r
-                                               '"><span>', text, '<\/span>', '<\/div>'\r
-                                                       \r
-                                       ].join( '');\r
-                               },\r
-                               getAsXML: function(){}\r
-                       }\r
-               );\r
+                                                       '"height": ', h, cr,\r
+                                               '}', cr,\r
+                                       '}', cr,\r
+                               '}'\r
+                       ].join( '');\r
+               }\r
+               this.getAsHTML = function( isAbsoluteUrl, isXHTML){\r
+                       var url = balloon.getURL();\r
+                       return [\r
+                               '<img ',\r
+                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
+                                       'width="', w, '" ',\r
+                                       'height="', h, '" ',\r
+                                       'style="',                                                                      \r
+                                               'left:', x, 'px;',\r
+                                               'top:', y, 'px;',\r
+                                               'z-index:', this.z, ';',\r
+                                       '"',\r
+                               isXHTML !== true ? '>' : ' \/>',\r
+                               pettanr.LINE_FEED_CODE_TEXTAREA,\r
+                               '<div class="balloon" style="',\r
+                                       'left:', x, 'px;',\r
+                                       'top:', y, 'px;',\r
+                                       'width:', w, 'px;',\r
+                                       'height:', h, 'px;',\r
+                                       'z-index:', this.z,\r
+                               '"><span>', text, '<\/span>', '<\/div>'\r
+                                       \r
+                       ].join( '');\r
+               }\r
+               this.getAsXML = function(){}\r
        }\r
+       TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );\r
 \r
 /* --------------------------------------------------------------------------------------------\r
  * COMIC_ELEMENT_CONTROL\r
@@ -3035,53 +2530,52 @@ pettanr.editor = pettanr.view.createApplication( function(){
         * 1. remove\r
         * 2. renumber z\r
         */\r
-               function appendComicElement( _comicElement) {\r
-                       _comicElement.init && _comicElement.init();\r
+               function appendComicElement( _comicElement ) {\r
                        var z = _comicElement.z,\r
                                l = COMIC_ELEMENT_ARRAY.length,\r
                                _jqElm = _comicElement.$.stop().css( {\r
                                        filter:         '',\r
                                        opacity:        ''\r
                                });\r
-                       if( typeof z !== 'number' || z < 0 || z >= l){\r
-                               COMIC_ELEMENT_ARRAY.unshift( _comicElement);\r
-                               ELM_CONTAINER.appendChild( _jqElm.get( 0));\r
+                       if( typeof z !== 'number' || z < 0 || z >= l ){\r
+                               COMIC_ELEMENT_ARRAY.unshift( _comicElement );\r
+                               ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
                                _jqElm.fadeIn();\r
                        } else {\r
                                var insertIndex = 0;\r
-                               for( var i = 0; i < l; ++i){\r
-                                       if( COMIC_ELEMENT_ARRAY[ i].z <= z){\r
+                               for( var i = 0; i < l; ++i ){\r
+                                       if( COMIC_ELEMENT_ARRAY[ i ].z <= z ){\r
                                                insertIndex = i;\r
                                                break;\r
                                        }\r
                                }\r
-                               COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());\r
-                               COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
+                               COMIC_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );\r
+                               COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement );\r
                        }\r
                        renumber();\r
                }\r
-               function removeComicElement( _comicElement) {\r
+               function removeComicElement( _comicElement ) {\r
                        var l = COMIC_ELEMENT_ARRAY.length;\r
                        for( var i=0; i<l; ++i){\r
-                               if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){\r
-                                       COMIC_ELEMENT_ARRAY.splice( i, 1);\r
+                               if( COMIC_ELEMENT_ARRAY[ i ] === _comicElement ){\r
+                                       COMIC_ELEMENT_ARRAY.splice( i, 1 );\r
                                        renumber();\r
                                        _comicElement.$.stop().css( {\r
                                                filter:         '',\r
                                                opacity:        ''\r
-                                       }).fadeOut( onFadeOut);\r
+                                       }).fadeOut( onFadeOut );\r
                                        currentElement = currentElement === _comicElement ? null : currentElement;\r
                                        return;\r
                                }\r
                        }\r
                        function onFadeOut(){\r
-                               this.parentNode.removeChild( this);\r
+                               this.parentNode.removeChild( this );\r
                        }\r
                }\r
-               function restoreComicElement( arg){\r
-                       var isAppend = arg[ 0],\r
-                               comicElement = arg[ 1];\r
-                       isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
+               function restoreComicElement( arg ){\r
+                       var isAppend = arg[ 0 ],\r
+                               comicElement = arg[ 1 ];\r
+                       isAppend === true ? appendComicElement( comicElement ) : removeComicElement( comicElement );\r
                }\r
                /*\r
                 * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
@@ -3091,19 +2585,19 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        var l = COMIC_ELEMENT_ARRAY.length,\r
                                _comicElement, jqElm, jqNext;\r
                        for( var i=0; i < l; ++i){\r
-                               _comicElement = COMIC_ELEMENT_ARRAY[ i];\r
+                               _comicElement = COMIC_ELEMENT_ARRAY[ i ];\r
                                jqElm = _comicElement.$;\r
-                               jqNext && jqNext.before( jqElm);\r
+                               jqNext && jqNext.before( jqElm );\r
                                _comicElement.z = l -i -1;\r
                                jqNext = jqElm;\r
                        }\r
                }\r
-               function replaceComicElement( _comicElement, goForward){\r
+               function replaceComicElement( _comicElement, goForward ){\r
                        // COMIC_ELEMENT_ARRAYの再構築\r
                        var l = COMIC_ELEMENT_ARRAY.length,\r
                                i = ( function(){\r
-                                       for( var ret = 0; ret < l; ++ret){\r
-                                               if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
+                                       for( var ret = 0; ret < l; ++ret ){\r
+                                               if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement ) return ret;\r
                                        }\r
                                        return -1;\r
                                })();\r
@@ -3144,7 +2638,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        restore: restoreComicElement,\r
                        replace: replaceComicElement,\r
                        restoreReplace: restoreReplaceElement,\r
-                       onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){\r
+                       onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){\r
                        /*\r
                         * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。\r
                         */                                     \r
@@ -3166,7 +2660,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                ELM_CONTAINER.style.left        = _panelX +'px';\r
                                ELM_CONTAINER.style.top         = _panelY +'px';\r
                        },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
+                       onMouseMove: function( _mouseX, _mouseY ){\r
                                var l = COMIC_ELEMENT_ARRAY.length,\r
                                        _x = _mouseX -panelX,\r
                                        _y = _mouseY -panelY,\r
@@ -3174,12 +2668,12 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        \r
                                if( _elm !== null){\r
                                        currentLockTest = currentLockTest === true && _x === 0 && _y === 0;\r
-                                       if( _elm.busy() === true){\r
+                                       if( _elm.busy() === true ){\r
                                                _elm.onMouseMove( _x, _y);\r
                                                return true;\r
                                        }\r
-                                       if( _elm.hitTest( _x, _y) === true){\r
-                                               _elm.onMouseMove( _x, _y); // cursor\r
+                                       if( _elm.hitTest( _x, _y) === true ){\r
+                                               _elm.onMouseMove( _x, _y ); // cursor\r
                                                return true;\r
                                        }\r
                                        if( currentLock === true){\r
@@ -3188,18 +2682,19 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        }\r
                                }\r
                                for( var i=0; i<l; i++){\r
-                                       _elm = COMIC_ELEMENT_ARRAY[ i];\r
+                                       _elm = COMIC_ELEMENT_ARRAY[ i ];\r
                                        // hitTest\r
-                                       if( _elm.hitTest( _x, _y) === true){\r
-                                               _elm.onMouseMove( _x, _y); // cursor\r
+                                       if( _elm.hitTest( _x, _y ) === true ){\r
+                                               _elm.onMouseMove( _x, _y ); // cursor\r
                                                log.html( [ _x, _y, i].join( ','));\r
                                                currentElement = _elm;\r
                                                return true;\r
+                                       } else {\r
+                                               log.html( [ _elm.x, _elm.y, i].join( ','));\r
                                        }\r
                                }\r
                                currentElement = null;                                                  \r
                                COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
-                               log.html( [ _x, _y].join( ','));\r
                                return false;\r
                        },\r
                        onMouseUp: function( _mouseX, _mouseY){\r
@@ -3221,33 +2716,62 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        busy: function(){\r
                                return currentElement !== null;\r
                        },\r
-                       createImageElement: function( url, imagesetID, x, y, z, w, h){\r
-                               w = w || 200; //ActualWidth\r
-                               h = h || 150; //ActualHeight\r
-                               x = x || Math.floor( panelW /2 -w /2);\r
-                               y = y || Math.floor( panelH /2 -h /2);\r
-                               function onImageSelect( _url, _w, _h){\r
-                                       var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);\r
-                                       appendComicElement( _comicElement);\r
-                                       _comicElement.animate( undefined, undefined, _w, _h);\r
-                                       SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);                                      \r
-                               }\r
-                               IMAGE_GROUP_EXPROLER.show( onImageSelect);\r
-                       },\r
-                       createTextElement: function( type, angle, text, x, y, z, w, h){\r
-                               type = type || 0;\r
-                               angle = angle || 0;\r
-                               text = text || '';\r
-                               w = w || 200;\r
-                               h = h || 150;\r
-                               x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);\r
-                               y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);\r
-                               var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
-                               TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
-                                       appendComicElement( _comicElement);\r
-                                       SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
-                               });\r
-                       },\r
+                       createImageElement: function( data ){\r
+                               if( Type.isObject( data ) === false ){\r
+                                       pettanr.premiumSatge.bootInOverlay( 1, onImageSelect );\r
+                               } else {\r
+                                       onImageSelect( data, true );\r
+                               }\r
+                               function onImageSelect( data, isPanelPictureData ){\r
+                                       if( isPanelPictureData !== true ){\r
+                                               data = {\r
+                                                       resource_picture:data,\r
+                                                       x:               Math.floor( panelW /2 - data.width /2 ),\r
+                                                       y:               Math.floor( panelH /2 - data.height /2 ),\r
+                                                       z:               -1,\r
+                                                       t:               COMIC_ELEMENT_ARRAY.length,\r
+                                                       width:           data.width,\r
+                                                       height:          data.height\r
+                                               }\r
+                                       }\r
+                                       var _comicElement = new ImageElementClass( data );\r
+                                       _comicElement.init && _comicElement.init();\r
+                                       appendComicElement( _comicElement );\r
+                                       _comicElement.animate( undefined, undefined, data.width, data.height );\r
+                                       SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true );\r
+                               }\r
+                       },\r
+                       createTextElement: function( data ){\r
+                               if( Type.isObject( data ) === false ){\r
+                                       data = {\r
+                                               balloon_template_id:1,\r
+                                               size:               1,\r
+                                               tail:               0,\r
+                                               x:                                      Math.floor( panelW /2 - 100 +Math.random() *10 ),\r
+                                               y:                  Math.floor( panelH /2 - 100 +Math.random() *10 ),\r
+                                               z:                  -1,\r
+                                               t:                  COMIC_ELEMENT_ARRAY.length,\r
+                                               width:              200,\r
+                                               height:             200,\r
+                                               speaches_attributes: {\r
+                                                       text1: {\r
+                                                               content:    'Hello'\r
+                                                       }\r
+                                               }\r
+                                       }\r
+                                       var _comicElement = new TextElementClass( data );\r
+                                       _comicElement.init();\r
+                                       pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _comicElement, onTextInput );\r
+                               } else {\r
+                                       var _comicElement = new TextElementClass( data );\r
+                                       _comicElement.init();\r
+                                       onTextInput( _comicElement );\r
+                               }\r
+                               function onTextInput( _comicElement ){\r
+                                       appendComicElement( _comicElement );\r
+                                       SAVE( restoreComicElement, [ false, _comicElement ], [ true, _comicElement ], true );\r
+                               }\r
+                       },\r
                        getAsHTML: function( isAbsoluteUrl, isXHTML){\r
                                var HTML_ARRAY = [],\r
                                        l = COMIC_ELEMENT_ARRAY.length,\r
@@ -3297,7 +2821,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){\r
                                        _comicElement = getComicElementByTiming();\r
                                        if( _comicElement === null) break;\r
-                                       _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? \r
+                                       _comicElement.type === PANEL_ELEMENT_TYPE_IMAGE ? \r
                                                IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :\r
                                                BALLOON_ARRAY.push( _comicElement.getAsJsonString());\r
                                }\r
@@ -3354,7 +2878,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
                }\r
        }\r
        function centering(){\r
-               pettanr.editor.onWindowResize( windowW, windowH);\r
+               instance.onPaneResize( windowW, windowH);\r
        }       \r
        function mouseEventRellay( e){\r
                var _mouseX = e.pageX,\r
@@ -3399,13 +2923,6 @@ pettanr.editor = pettanr.view.createApplication( function(){
         * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す.\r
         */\r
                MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
-               \r
-               CONSOLE_CONTROLER.init();\r
-               \r
-               OUTPUT_CONSOLE.init();\r
-               TEXT_EDITOR_CONTROL.init();\r
-               IMAGE_GROUP_EXPROLER.init();\r
-\r
        /*\r
         * centering\r
         */\r
@@ -3423,10 +2940,14 @@ pettanr.editor = pettanr.view.createApplication( function(){
                        .mouseup( mouseEventRellay)\r
                        .mouseout( mouseEventRellay);\r
                \r
-               delete pettanr.editor.firstOpen;\r
+               delete instance.firstOpen;\r
        }\r
        this.onOpen = function( _w, _h, _file ){\r
-               var panelW, panelH, borderSize, fileData, _childFile;\r
+               var panelW, panelH,\r
+                       borderSize,\r
+                       fileData, panelElements, panelElm;\r
+               \r
+               \r
                if( pettanr.file.isFileInstance( _file ) === true ){\r
                        if( pettanr.driver.isPettanrFileInstance( _file ) === true ){\r
                                if( _file.getType() === pettanr.driver.FILE_TYPE.COMIC ){\r
@@ -3439,15 +2960,18 @@ pettanr.editor = pettanr.view.createApplication( function(){
                                        panelW = fileData.width;\r
                                        panelH = fileData.height;\r
                                        borderSize = fileData.border;\r
+                                       panelElements = fileData.panel_elements;\r
                                        \r
-                                       for( var i=0; i<_file.getChildFileLength(); ++i){\r
-                                               _childFile = _file.getChildFileAt( i );\r
-                                               if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL_PICTURE ){\r
-                                                       COMIC_ELEMENT_CONTROL.appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));\r
-                                               } else\r
-                                               if( _file.getType() === pettanr.driver.FILE_TYPE.BALLOON ){\r
-                                                       COMIC_ELEMENT_CONTROL.appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));\r
-                                               }\r
+                                       if( Type.isArray( panelElements ) === true ){\r
+                                               for( var i=0; i<panelElements.length; ++i){\r
+                                                       panelElm = panelElements[ i ];\r
+                                                       if( panelElm.resource_picture ){\r
+                                                               COMIC_ELEMENT_CONTROL.createImageElement( panelElm );\r
+                                                       } else\r
+                                                       if( panelElm.balloon_template_id ){\r
+                                                               COMIC_ELEMENT_CONTROL.createTextElement( panelElm );\r
+                                                       }\r
+                                               }                                               \r
                                        }\r
                                }\r
                        } else {\r
@@ -3465,15 +2989,15 @@ pettanr.editor = pettanr.view.createApplication( function(){
                \r
                COMIC_ELEMENT_OPERATION_MANAGER.open();\r
                COMIC_ELEMENT_CONTROL.open();\r
-\r
+               \r
+               instance.firstOpen !== undefined && instance.firstOpen();\r
+               \r
                // last\r
                MENU_BAR_CONTROL.open();\r
                \r
-               pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
-               \r
                windowW = _w;\r
                windowH = _h;\r
-               pettanr.editor.onPaneResize( _w, _h );\r
+               instance.onPaneResize( _w, _h );\r
        }\r
        this.onClose = function(){\r
                HISTORY_CONTROL.close();\r
@@ -3492,7 +3016,7 @@ pettanr.editor = pettanr.view.createApplication( function(){
        this.onPaneResize = function( _windowW, _windowH){\r
                windowW = _windowW || windowW;\r
                windowH = _windowH || windowH;\r
-               if( pettanr.editor.firstOpen) return;\r
+               if( instance.firstOpen) return;\r
                /*\r
                 * ieは +'px'が不要みたい\r
                 */\r
@@ -3505,731 +3029,693 @@ pettanr.editor = pettanr.view.createApplication( function(){
        }\r
 });\r
 \r
-pettanr.view.registerApplication( pettanr.editor );\r
 \r
+pettanr.comicConsole =pettanr.view.registerApplication( function(){\r
+       var jqWrap,\r
+               ID = 'comicConsole',\r
+               elmWrap = document.getElementById( 'comic-console-wrapper' ),\r
+               elmHeader = document.getElementById( 'comic-console-header' ),\r
+               elmProgress = document.getElementById( 'comic-console-progress' ),\r
+               inputTitle, inputW, inputH, inputVisible, inputEditable,\r
+               elmUploader = null,\r
+               elmScript = null\r
+               elmIframe = null,\r
+               elmForm = null,\r
+               timer = null,\r
+               isUploading = false,\r
+               instance = this;\r
+       //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
+       \r
+       function clickOK(){\r
+               if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+               // validate\r
+               isUploading = true;\r
+               elmProgress.innerHTML = '■';\r
+               copyAndSubmit();\r
+       }\r
 \r
-pettanr.comicConsole = ( function(){\r
-       var COMIC_CONSOLE = pettanr.view.createApplication( function(){\r
-               var jqWrap,\r
-                       ID = 'comicConsole',\r
-                       elmWrap = document.getElementById( 'comic-console-wrapper' ),\r
-                       elmHeader = document.getElementById( 'comic-console-header' ),\r
-                       elmProgress = document.getElementById( 'comic-console-progress' ),\r
-                       inputTitle, inputW, inputH, inputVisible, inputEditable,\r
-                       elmUploader = null,\r
-                       elmScript = null\r
-                       elmIframe = null,\r
-                       elmForm = null,\r
-                       timer = null,\r
-                       isUploading = false;\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function clickOK(){\r
-                       if( !elmForm || !elmIframe || isUploading === true ) return false;\r
-                       // validate\r
-                       isUploading = true;\r
-                       elmProgress.innerHTML = '■';\r
-                       copyAndSubmit();\r
-               }\r
-\r
-                       function copyAndSubmit(){\r
-                               var _inputList = elmForm.getElementsByTagName( 'input' ),\r
-                                       _input, _name;\r
-                               for( var i=0, l= _inputList.length; i<l; ++i){\r
-                                       _input = _inputList[ i ];\r
-                                       _name = _input.name;\r
-                                       if( _name === 'comic[title]'){\r
-                                               _input.value = inputTitle.value();\r
-                                       } else\r
-                                       if( _name === 'comic[width]'){\r
-                                               _input.value = inputW.value();\r
-                                       } else\r
-                                       if( _name === 'comic[height]'){\r
-                                               _input.value = inputH.value();\r
-                                       }\r
-                               }\r
-                               var _selectList = elmForm.getElementsByTagName( 'select' ),\r
-                                       _select, _name, _optionList;\r
-                               for( i=0, l= _selectList.length; i<l; ++i){\r
-                                       _select = _selectList[ i ];\r
-                                       _name = _select.name;\r
-                                       _optionList = _select.getElementsByTagName( 'option' )\r
-                                       if( _name === 'comic[visible]'){\r
-                                               _select.selectedIndex = 1;\r
-                                       } else\r
-                                       if( _name === 'comic[editable]'){\r
-                                               _select.selectedIndex = 0;\r
-                                       }\r
-                               }\r
-                               try {\r
-                                       elmForm.submit();\r
-                               } catch( e){\r
-                                       elmProgress.innerHTML = 'submit() err..';\r
-                                       isUploading = false;\r
-                                       setTimeout( clickCancel , 3000);\r
-                                       return;\r
-                               }\r
-                               if( pettanr.ua.isIE){\r
-                                       elmIframe.onreadystatechange = detectIframe;\r
-                               } else {\r
-                                       elmIframe.onload = onIframeUpdate;\r
+               function copyAndSubmit(){\r
+                       var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+                               _input, _name;\r
+                       for( var i=0, l= _inputList.length; i<l; ++i){\r
+                               _input = _inputList[ i ];\r
+                               _name = _input.name;\r
+                               if( _name === 'comic[title]'){\r
+                                       _input.value = inputTitle.value();\r
+                               } else\r
+                               if( _name === 'comic[width]'){\r
+                                       _input.value = inputW.value();\r
+                               } else\r
+                               if( _name === 'comic[height]'){\r
+                                       _input.value = inputH.value();\r
+                               }\r
+                       }\r
+                       var _selectList = elmForm.getElementsByTagName( 'select' ),\r
+                               _select, _name, _optionList;\r
+                       for( i=0, l= _selectList.length; i<l; ++i){\r
+                               _select = _selectList[ i ];\r
+                               _name = _select.name;\r
+                               _optionList = _select.getElementsByTagName( 'option' )\r
+                               if( _name === 'comic[visible]'){\r
+                                       _select.selectedIndex = 1;\r
+                               } else\r
+                               if( _name === 'comic[editable]'){\r
+                                       _select.selectedIndex = 0;\r
                                }\r
-                               elmProgress.innerHTML = 'uploading..';\r
                        }\r
-               /*\r
-                * ie の 場合、readyState をチェック.\r
-                */\r
-                               function detectIframe(){\r
-                           if ( elmIframe.readyState === 'complete') {\r
-                               elmIframe.onreadystatechange = new Function();\r
-                               elmIframe.onreadystatechange = null;\r
-                               onIframeUpdate();\r
-                           }\r
-                               }\r
-                                       function onIframeUpdate(){\r
-                                               elmIframe.onload = null;\r
-                                               ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
-                                               elmIframe = null;\r
-                                               elmProgress.innerHTML = 'success!';\r
-                                               setTimeout( clickCancel , 1000);\r
-                                               isUploading = false;\r
-                                       }\r
-                               \r
-               function clickCancel(){\r
-                       if( isUploading === true) return false;\r
-                       pettanr.overlay.hide();\r
-                       COMIC_CONSOLE.onClose();\r
-               }\r
-               function detectForm(){\r
-                       elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];\r
-                       if( elmForm){\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
-                               pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );\r
-                               elmProgress.innerHTML = 'create iframe';\r
+                       try {\r
+                               elmForm.submit();\r
+                       } catch( e){\r
+                               elmProgress.innerHTML = 'submit() err..';\r
+                               isUploading = false;\r
+                               setTimeout( clickCancel , 3000);\r
+                               return;\r
                        }\r
-               }\r
-               function onCreateIframe( _iframe ){\r
-                       elmUploader.appendChild( _iframe );\r
-                       elmIframe = _iframe;\r
-                       elmForm.target = _iframe.name;\r
-                       elmProgress.innerHTML = '';\r
-               }\r
-               \r
-               this.init = function(){\r
-                       this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
-                       $( '#comic-console-post-button').click( clickOK );\r
-                       $( '#comic-console-cancel-button').click( clickCancel );\r
-                       \r
-                       var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
-                       inputTitle    = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
-                       inputW        = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
-                       inputH        = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
-                       inputVisible  = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
-                       inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
-                       \r
-                       delete COMIC_CONSOLE.init;\r
-               }\r
-               this.jqWrap = null;\r
-               this.ID = ID;\r
-               this.show = function( w, h){\r
-                       jqWrap.show();\r
-\r
-                       pettanr.overlay.show( COMIC_CONSOLE );\r
-                       \r
-                       inputTitle.start();\r
-                       \r
-                       elmUploader = document.createElement( 'div');\r
-                       elmUploader.id = "newcomic";\r
-                       elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';\r
-                       elmWrap.appendChild( elmUploader);\r
-                       \r
-                       var elmScript = document.createElement( 'script');\r
-                       elmScript.type = 'text\/javascript';\r
-                       elmScript.src = pettanr.CONST.CREATE_COMIC_JS;\r
-                       elmWrap.appendChild( elmScript);\r
-                       \r
-                       elmProgress.innerHTML = 'loading form.';\r
-                       \r
-                       if( timer === null){\r
-                               timer = window.setInterval( detectForm, 250);\r
+                       if( pettanr.ua.isIE){\r
+                               elmIframe.onreadystatechange = detectIframe;\r
+                       } else {\r
+                               elmIframe.onload = onIframeUpdate;\r
                        }\r
-                       \r
-                       COMIC_CONSOLE.onWindowResize( w, h);\r
+                       elmProgress.innerHTML = 'uploading..';\r
                }\r
-               this.onWindowResize = function( _windowW, _windowH){\r
-                       jqWrap.css(\r
-                               {\r
-                                       left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
-                                       top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
+       /*\r
+        * ie の 場合、readyState をチェック.\r
+        */\r
+                       function detectIframe(){\r
+                   if ( elmIframe.readyState === 'complete') {\r
+                       elmIframe.onreadystatechange = new Function();\r
+                       elmIframe.onreadystatechange = null;\r
+                       onIframeUpdate();\r
+                   }\r
+                       }\r
+                               function onIframeUpdate(){\r
+                                       elmIframe.onload = null;\r
+                                       ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+                                       elmIframe = null;\r
+                                       elmProgress.innerHTML = 'success!';\r
+                                       setTimeout( clickCancel , 1000);\r
+                                       isUploading = false;\r
                                }\r
-                       );\r
-               }\r
-               this.onClose = function(){\r
-                       elmForm !== null && $( elmUploader ).remove();\r
-                       elmForm  = null;\r
-                       isUploading = false;\r
-                       \r
-                       if( elmScript !== null ){\r
-                               document.body.removeChild( elmScript);\r
-                               elmScript = null;                                       \r
-                       }\r
-                       if( timer !== null){\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
-                       }\r
                        \r
-                       jqWrap.hide();\r
-               }\r
-       });\r
-       \r
-       return {\r
-               init: function(){\r
-                       COMIC_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _w, _h, _file){\r
-                       if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
-                               // _data = _file.read();\r
-                       }\r
-               },\r
-               onClose: function(){\r
-                       \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       COMIC_CONSOLE.show( w, h);\r
+       function clickCancel(){\r
+               if( isUploading === true) return false;\r
+               pettanr.comicConsole.shutdown();\r
+       }\r
+       function detectForm(){\r
+               elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];\r
+               if( elmForm){\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+                       pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );\r
+                       elmProgress.innerHTML = 'create iframe';\r
                }\r
        }\r
-})();\r
+       function onCreateIframe( _iframe ){\r
+               elmUploader.appendChild( _iframe );\r
+               elmIframe = _iframe;\r
+               elmForm.target = _iframe.name;\r
+               elmProgress.innerHTML = '';\r
+       }\r
 \r
-pettanr.uploadConsole = ( function(){\r
-       var UPLOAD_CONSOLE = ( function(){\r
-               var jqWrap, windowW, windowH,\r
-                       ID = 'uploadConsole',\r
-                       TARGET_FRAME_NAME = 'targetFrame',\r
-                       elmContainer = document.getElementById( 'uploader'),\r
-                       elmProgress = document.getElementById( 'upload-console-progress'),\r
-                       timer = null,\r
-                       elmScript = null,\r
-                       elmForm = null,\r
-                       elmFile = null,\r
-                       elmIframe = null,\r
-                       isUploading = false;\r
-               /*\r
-                * upload ボタンが押されたらまず iframe をつくる.
-                */\r
-               function clickOK(){\r
-                       if( !elmForm || !elmIframe || isUploading === true ) return false;\r
-                       if( elmFile.value.length === 0) return false;\r
-                       elmProgress.innerHTML = 'uploading.';\r
-                       isUploading = true;\r
-                       submit();\r
-                       return false;\r
+       /* grobal method */\r
+       // this.rootElement = elmWrap;\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
+               $( '#comic-console-post-button').click( clickOK );\r
+               $( '#comic-console-cancel-button').click( clickCancel );\r
+               \r
+               var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
+               inputTitle    = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
+               inputW        = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
+               inputH        = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
+               inputVisible  = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
+               inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
+               \r
+               delete instance.init;\r
+       }\r
+       this.jqWrap = null;\r
+       this.onOpen = function( w, h ){\r
+               instance.init && instance.init();\r
+               \r
+               jqWrap.show();\r
+               \r
+               inputTitle.start();\r
+               \r
+               elmUploader = document.createElement( 'div');\r
+               elmUploader.id = "newcomic";\r
+               elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';\r
+               elmWrap.appendChild( elmUploader);\r
+               \r
+               var elmScript = document.createElement( 'script');\r
+               elmScript.type = 'text\/javascript';\r
+               elmScript.src = pettanr.CONST.CREATE_COMIC_JS;\r
+               elmWrap.appendChild( elmScript);\r
+               \r
+               elmProgress.innerHTML = 'loading form.';\r
+               \r
+               if( timer === null){\r
+                       timer = window.setInterval( detectForm, 250);\r
                }\r
-               /*\r
-                * form の target に iframe を指定したのち submit();
-                */\r
-                       function submit(){\r
-                               try {\r
-                                       elmForm.submit();\r
-                               } catch( e){\r
-                                       elmProgress.innerHTML = 'submit() err..';\r
-                                       isUploading = false;\r
-                                       setTimeout( clickCancel , 3000);\r
-                                       return;\r
-                               }\r
-                               \r
-                               if( pettanr.ua.isIE){\r
-                                       elmIframe.onreadystatechange = detectIframe;\r
-                               } else {\r
-                                       elmIframe.onload = onLoad;\r
-                               }\r
-                               elmProgress.innerHTML = 'uploading..';\r
-                       }\r
-               /*\r
-                * ie の 場合、readyState をチェック.
-                */\r
-                               function detectIframe(){\r
-                           if ( elmIframe.readyState === 'complete') {\r
-                               elmIframe.onreadystatechange = new Function();\r
-                               elmIframe.onreadystatechange = null;\r
-                               onLoad();\r
-                           }\r
-                               }\r
-                                       function onLoad(){\r
-                                               elmIframe.onload = null;\r
-                                               ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
-                                               elmProgress.innerHTML = 'success!';\r
-                                               setTimeout( clickCancel , 1000);\r
-                                               isUploading = false;\r
-                                       }\r
                \r
-               function detectForm(){\r
-                       elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
-                       if( elmForm){\r
-                               var _inputList = elmForm.getElementsByTagName( 'input' ),\r
-                                       _input;\r
-                               for( var i=0, l= _inputList.length; i<l; ++i){\r
-                                       _input = _inputList[ i ];\r
-                                       if( _input.type === 'file'){\r
-                                               elmFile = _input;\r
-                                       }\r
-                                       if( _input.type === 'submit'){\r
-                                               _input.style.display = 'none';\r
-                                       }\r
-                               }\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
-                               pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
-                               elmProgress.innerHTML = 'create iframe';\r
+               instance.onPaneResize( w, h );\r
+       }\r
+       this.onPaneResize = function( _windowW, _windowH){\r
+               jqWrap.css(\r
+                       {\r
+                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
+                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
                        }\r
+               );\r
+       }\r
+       this.onClose = function(){\r
+               elmForm !== null && $( elmUploader ).remove();\r
+               elmForm  = null;\r
+               isUploading = false;\r
+               \r
+               if( elmScript !== null ){\r
+                       document.body.removeChild( elmScript);\r
+                       elmScript = null;                                       \r
                }\r
-               function onCreateIframe( _iframe ){\r
-                       elmContainer.appendChild( _iframe );\r
-                       elmIframe = _iframe;\r
-                       elmForm.target = _iframe.name;\r
-                       elmProgress.innerHTML = '';\r
-                       UPLOAD_CONSOLE.onWindowResize( windowW, windowH );\r
-               }\r
-               /*\r
-                * 
-                */\r
-               function clickCancel(){\r
-                       if( isUploading === true) return false;\r
-                       pettanr.overlay.hide();\r
-                       UPLOAD_CONSOLE.onClose();\r
-                       return false;\r
+               if( timer !== null){\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
                }\r
                \r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();\r
-                               $( '#upload-console-post-button').click( clickOK );\r
-                               $( '#upload-console-cancel-button').click( clickCancel );\r
-\r
-                               delete UPLOAD_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( w, h){\r
-                               /*\r
-                                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.
-                                */                             \r
-                               elmScript = document.createElement( 'script');\r
-                               elmScript.type = 'text\/javascript';\r
-                               elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
-                               document.body.appendChild( elmScript);\r
-                               \r
-                               jqWrap.show();\r
-                               pettanr.overlay.show( UPLOAD_CONSOLE );\r
+               jqWrap.hide();\r
+       }\r
+});\r
 \r
-                               if( timer === null){\r
-                                       timer = window.setInterval( detectForm, 250);\r
-                               }\r
-                               \r
-                               elmProgress.innerHTML = 'loading form.';\r
-                               \r
-                               UPLOAD_CONSOLE.onWindowResize( w, h);\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               windowW = _windowW;\r
-                               windowH = _windowH;\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );\r
-                       },\r
-                       onClose: function(){\r
-                               elmForm !== null && $( elmContainer.children ).remove();\r
-                               elmForm = elmFile = elmIframe = null;\r
+pettanr.uploadConsole = pettanr.view.registerApplication( function(){\r
+       var jqWrap, windowW, windowH,\r
+               ID = 'uploadConsole',\r
+               TARGET_FRAME_NAME = 'targetFrame',\r
+               elmContainer = document.getElementById( 'uploader'),\r
+               elmProgress = document.getElementById( 'upload-console-progress'),\r
+               timer = null,\r
+               elmScript = null,\r
+               elmForm = null,\r
+               elmFile = null,\r
+               elmIframe = null,\r
+               isUploading = false,\r
+               instance = this;\r
+       /*\r
+        * upload ボタンが押されたらまず iframe をつくる.
+        */\r
+       function clickOK(){\r
+               if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+               if( elmFile.value.length === 0) return false;\r
+               elmProgress.innerHTML = 'uploading.';\r
+               isUploading = true;\r
+               submit();\r
+               return false;\r
+       }\r
+       /*\r
+        * form の target に iframe を指定したのち submit();
+        */\r
+               function submit(){\r
+                       try {\r
+                               elmForm.submit();\r
+                       } catch( e){\r
+                               elmProgress.innerHTML = 'submit() err..';\r
                                isUploading = false;\r
-                               \r
-                               if( elmScript !== null ){\r
-                                       document.body.removeChild( elmScript);\r
-                                       elmScript = null;                                       \r
-                               }\r
-                               if( timer !== null){\r
-                                       window.clearInterval( timer);\r
-                                       timer = null;\r
-                               }\r
-                               jqWrap.hide();\r
-                       },\r
-                       ID: ID\r
-               }\r
-       })();\r
-       \r
-       return {\r
-               init: function(){\r
-                       UPLOAD_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _w, _h, _file){\r
-                       if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
-                               // _data = _file.read();\r
+                               setTimeout( clickCancel , 3000);\r
+                               return;\r
                        }\r
-               },\r
-               onClose: function(){\r
                        \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       UPLOAD_CONSOLE.show( w, h);\r
-               }\r
-       }\r
-})();\r
-\r
-pettanr.panelConsole = ( function(){\r
-       var PANEL_CONSOLE = ( function(){\r
-               var jqWrap, windowW, windowH,\r
-                       ID = 'panelConsole',\r
-                       TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',\r
-                       elmContainer = document.getElementById( 'newpanel'),\r
-                       elmProgress = document.getElementById( 'panel-console-progress'),\r
-                       timer = null,\r
-                       elmScript = null,\r
-                       elmForm = null,\r
-                       elmIframe = null,\r
-                       isUploading = false;\r
-               /*\r
-                * upload ボタンが押されたらまず iframe をつくる.\r
-                */\r
-               function clickOK(){\r
-                       if( !elmForm || !elmIframe || isUploading === true ) return false;\r
-                       elmProgress.innerHTML = 'uploading.';\r
-                       isUploading = true;\r
-                       submit();\r
-                       return false;\r
+                       if( pettanr.ua.isIE){\r
+                               elmIframe.onreadystatechange = detectIframe;\r
+                       } else {\r
+                               elmIframe.onload = onLoad;\r
+                       }\r
+                       elmProgress.innerHTML = 'uploading..';\r
                }\r
-               /*\r
-                * form の target に iframe を指定したのち submit();\r
-                */\r
-                       function submit(){\r
-                               try {\r
-                                       elmForm.submit();\r
-                               } catch( e){\r
-                                       elmProgress.innerHTML = 'submit() err..';\r
+       /*\r
+        * ie の 場合、readyState をチェック.
+        */\r
+                       function detectIframe(){\r
+                   if ( elmIframe.readyState === 'complete') {\r
+                       elmIframe.onreadystatechange = new Function();\r
+                       elmIframe.onreadystatechange = null;\r
+                       onLoad();\r
+                   }\r
+                       }\r
+                               function onLoad(){\r
+                                       elmIframe.onload = null;\r
+                                       ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+                                       elmProgress.innerHTML = 'success!';\r
+                                       setTimeout( clickCancel , 1000);\r
                                        isUploading = false;\r
-                                       setTimeout( clickCancel , 3000);\r
-                                       return;\r
-                               }\r
-                               \r
-                               if( pettanr.ua.isIE){\r
-                                       elmIframe.onreadystatechange = detectIframe;\r
-                               } else {\r
-                                       elmIframe.onload = onLoad;\r
                                }\r
-                               elmProgress.innerHTML = 'uploading..';\r
-                       }\r
-               /*\r
-                * ie の 場合、readyState をチェック.\r
-                */\r
-                               function detectIframe(){\r
-                           if ( elmIframe.readyState === 'complete') {\r
-                               elmIframe.onreadystatechange = new Function();\r
-                               elmIframe.onreadystatechange = null;\r
-                               onLoad();\r
-                           }\r
+       \r
+       function detectForm(){\r
+               elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+               if( elmForm){\r
+                       var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+                               _input;\r
+                       for( var i=0, l= _inputList.length; i<l; ++i){\r
+                               _input = _inputList[ i ];\r
+                               if( _input.type === 'file'){\r
+                                       elmFile = _input;\r
                                }\r
-                                       function onLoad(){\r
-                                               elmIframe.onload = null;\r
-                                               ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
-                                               elmProgress.innerHTML = 'success!';\r
-                                               setTimeout( clickCancel , 1000);\r
-                                               isUploading = false;\r
-                                       }\r
-               \r
-               function detectForm(){\r
-                       elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
-                       if( elmForm){\r
-                               var _inputList = elmForm.getElementsByTagName( 'input' ),\r
-                                       _input;\r
-                               for( var i=0, l= _inputList.length; i<l; ++i){\r
-                                       _input = _inputList[ i ];\r
-                                       if( _input.type === 'submit'){\r
-                                               _input.style.display = 'none';\r
-                                       }\r
+                               if( _input.type === 'submit'){\r
+                                       _input.style.display = 'none';\r
                                }\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
-                               pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
-                               elmProgress.innerHTML = 'create iframe';\r
                        }\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+                       pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+                       elmProgress.innerHTML = 'create iframe';\r
                }\r
-               function onCreateIframe( _iframe ){\r
-                       elmContainer.appendChild( _iframe );\r
-                       elmIframe = _iframe;\r
-                       elmForm.target = _iframe.name;\r
-                       elmProgress.innerHTML = '';\r
-                       PANEL_CONSOLE.onWindowResize( windowW, windowH );\r
-               }\r
+       }\r
+       function onCreateIframe( _iframe ){\r
+               elmContainer.appendChild( _iframe );\r
+               elmIframe = _iframe;\r
+               elmForm.target = _iframe.name;\r
+               elmProgress.innerHTML = '';\r
+               instance.onPaneResize( windowW, windowH );\r
+       }\r
+       /*\r
+        * 
+        */\r
+       function clickCancel(){\r
+               if( isUploading === true) return false;\r
+               pettanr.uploadConsole.shutdown();\r
+               return false;\r
+       }\r
+\r
+       /* grobal method */\r
+       // this.rootElement = elmWrap;\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();\r
+               $( '#upload-console-post-button').click( clickOK );\r
+               $( '#upload-console-cancel-button').click( clickCancel );\r
+\r
+               delete instance.init;\r
+       }\r
+       this.jqWrap = null;\r
+       this.onOpen = function( w, h){\r
+               instance.init && instance.init();\r
                /*\r
-                * \r
-                */\r
-               function clickCancel(){\r
-                       if( isUploading === true) return false;\r
-                       pettanr.overlay.hide();\r
-                       PANEL_CONSOLE.onClose();\r
-                       return false;\r
-               }\r
+                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.
+                */                             \r
+               elmScript = document.createElement( 'script');\r
+               elmScript.type = 'text\/javascript';\r
+               elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
+               document.body.appendChild( elmScript);\r
                \r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#panel-console-wrapper').hide();\r
-                               $( '#panel-console-post-button').click( clickOK );\r
-                               $( '#panel-console-cancel-button').click( clickCancel );\r
+               jqWrap.show();\r
 \r
-                               delete PANEL_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( w, h){\r
-                               /*\r
-                                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.\r
-                                */                             \r
-                               elmScript = document.createElement( 'script');\r
-                               elmScript.type = 'text\/javascript';\r
-                               elmScript.src = pettanr.CONST.CREATE_PANEL_JS;\r
-                               document.body.appendChild( elmScript);\r
-                               \r
-                               jqWrap.show();\r
-                               pettanr.overlay.show( PANEL_CONSOLE );\r
+               if( timer === null){\r
+                       timer = window.setInterval( detectForm, 250);\r
+               }\r
+               \r
+               elmProgress.innerHTML = 'loading form.';\r
+               \r
+               instance.onPaneResize( w, h);\r
+       }\r
+       this.onPaneResize = function( _windowW, _windowH){\r
+               windowW = _windowW;\r
+               windowH = _windowH;\r
+               jqWrap.css(\r
+                       {\r
+                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
+                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
+                       }\r
+               );\r
+       }\r
+       this.onClose = function(){\r
+               elmForm !== null && $( elmContainer.children ).remove();\r
+               elmForm = elmFile = elmIframe = null;\r
+               isUploading = false;\r
+               \r
+               if( elmScript !== null ){\r
+                       document.body.removeChild( elmScript);\r
+                       elmScript = null;                                       \r
+               }\r
+               if( timer !== null){\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+               }\r
+               jqWrap.hide();\r
+       }\r
+});\r
 \r
-                               if( timer === null){\r
-                                       timer = window.setInterval( detectForm, 250 );\r
-                               }\r
-                               \r
-                               elmProgress.innerHTML = 'loading form.';\r
-                               \r
-                               PANEL_CONSOLE.onWindowResize( w, h );\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               windowW = _windowW;\r
-                               windowH = _windowH;\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );\r
-                       },\r
-                       onClose: function(){\r
-                               elmForm !== null && $( elmContainer.children ).remove();\r
-                               elmForm = elmIframe = null;\r
+pettanr.panelConsole = pettanr.view.registerApplication( function(){\r
+       var jqWrap, windowW, windowH,\r
+               ID = 'panelConsole',\r
+               TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',\r
+               elmContainer = document.getElementById( 'newpanel'),\r
+               elmProgress = document.getElementById( 'panel-console-progress'),\r
+               timer = null,\r
+               elmScript = null,\r
+               elmForm = null,\r
+               elmIframe = null,\r
+               isUploading = false,\r
+               instance = this;\r
+       /*\r
+        * upload ボタンが押されたらまず iframe をつくる.\r
+        */\r
+       function clickOK(){\r
+               if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+               elmProgress.innerHTML = 'uploading.';\r
+               isUploading = true;\r
+               submit();\r
+               return false;\r
+       }\r
+       /*\r
+        * form の target に iframe を指定したのち submit();\r
+        */\r
+               function submit(){\r
+                       try {\r
+                               elmForm.submit();\r
+                       } catch( e){\r
+                               elmProgress.innerHTML = 'submit() err..';\r
                                isUploading = false;\r
-                               \r
-                               if( elmScript !== null ){\r
-                                       document.body.removeChild( elmScript);\r
-                                       elmScript = null;                                       \r
-                               }\r
-                               if( timer !== null){\r
-                                       window.clearInterval( timer);\r
-                                       timer = null;\r
-                               }\r
-                               jqWrap.hide();\r
-                       },\r
-                       ID: ID\r
+                               setTimeout( clickCancel , 3000);\r
+                               return;\r
+                       }\r
+                       \r
+                       if( pettanr.ua.isIE){\r
+                               elmIframe.onreadystatechange = detectIframe;\r
+                       } else {\r
+                               elmIframe.onload = onLoad;\r
+                       }\r
+                       elmProgress.innerHTML = 'uploading..';\r
                }\r
-       })();\r
+       /*\r
+        * ie の 場合、readyState をチェック.\r
+        */\r
+                       function detectIframe(){\r
+                   if ( elmIframe.readyState === 'complete') {\r
+                       elmIframe.onreadystatechange = new Function();\r
+                       elmIframe.onreadystatechange = null;\r
+                       onLoad();\r
+                   }\r
+                       }\r
+                               function onLoad(){\r
+                                       elmIframe.onload = null;\r
+                                       ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+                                       elmProgress.innerHTML = 'success!';\r
+                                       setTimeout( clickCancel , 1000);\r
+                                       isUploading = false;\r
+                               }\r
        \r
-       return {\r
-               init: function(){\r
-                       PANEL_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _w, _h, _file ){\r
-                       \r
-               },\r
-               onClose: function(){\r
-                       \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       PANEL_CONSOLE.show( w, h);\r
+       function detectForm(){\r
+               elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+               if( elmForm){\r
+                       var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+                               _input;\r
+                       for( var i=0, l= _inputList.length; i<l; ++i){\r
+                               _input = _inputList[ i ];\r
+                               if( _input.type === 'submit'){\r
+                                       _input.style.display = 'none';\r
+                               }\r
+                       }\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+                       pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+                       elmProgress.innerHTML = 'create iframe';\r
                }\r
        }\r
-})();\r
+       function onCreateIframe( _iframe ){\r
+               elmContainer.appendChild( _iframe );\r
+               elmIframe = _iframe;\r
+               elmForm.target = _iframe.name;\r
+               elmProgress.innerHTML = '';\r
+               instance.onPaneResize( windowW, windowH );\r
+       }\r
+       /*\r
+        * \r
+        */\r
+       function clickCancel(){\r
+               if( isUploading === true) return false;\r
+               pettanr.panelConsole.shutdown();\r
+               return false;\r
+       }\r
+\r
+       /* grobal method */\r
+       // this.rootElement = elmWrap;\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               instance.jqWrap = jqWrap = $( '#panel-console-wrapper').hide();\r
+               $( '#panel-console-post-button').click( clickOK );\r
+               $( '#panel-console-cancel-button').click( clickCancel );\r
 \r
-pettanr.artistConsole = ( function(){\r
-       var ARTIST_CONSOLE = pettanr.view.createApplication( function(){\r
-               var jqWrap, windowW, windowH,\r
-                       ID = 'artistConsole',\r
-                       TARGET_FRAME_NAME = 'targetFrameRegisterArtist',\r
-                       elmContainer = document.getElementById( 'register'),\r
-                       elmProgress = document.getElementById( 'artist-console-progress'),\r
-                       timer = null,\r
-                       elmScript = null,\r
-                       elmForm = null,\r
-                       elmIframe = null,\r
-                       isUploading = false;\r
+               delete instance.init;\r
+       }\r
+       this.jqWrap = null;\r
+       this.onOpen = function( w, h ){\r
+               instance.init && instance.init();\r
                /*\r
-                * upload ボタンが押されたらまず iframe をつくる.\r
-                */\r
-               function clickOK(){\r
-                       if( !elmForm || !elmIframe || isUploading === true ) return false;\r
-                       elmProgress.innerHTML = 'uploading.';\r
-                       isUploading = true;\r
-                       submit();\r
-                       return false;\r
+                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.\r
+                */                             \r
+               elmScript = document.createElement( 'script');\r
+               elmScript.type = 'text\/javascript';\r
+               elmScript.src = pettanr.CONST.CREATE_PANEL_JS;\r
+               document.body.appendChild( elmScript);\r
+               \r
+               jqWrap.show();\r
+\r
+               if( timer === null){\r
+                       timer = window.setInterval( detectForm, 250 );\r
                }\r
-               /*\r
-                * form の target に iframe を指定したのち submit();\r
-                */\r
-                       function submit(){\r
-                               try {\r
-                                       elmForm.submit();\r
-                               } catch( e){\r
-                                       elmProgress.innerHTML = 'submit() err..';\r
-                                       isUploading = false;\r
-                                       setTimeout( clickCancel , 3000);\r
-                                       return;\r
-                               }\r
-                               \r
-                               if( pettanr.ua.isIE){\r
-                                       elmIframe.onreadystatechange = detectIframe;\r
-                               } else {\r
-                                       elmIframe.onload = onLoad;\r
-                               }\r
-                               elmProgress.innerHTML = 'uploading..';\r
-                       }\r
-               /*\r
-                * ie の 場合、readyState をチェック.\r
-                */\r
-                               function detectIframe(){\r
-                           if ( elmIframe.readyState === 'complete') {\r
-                               elmIframe.onreadystatechange = new Function();\r
-                               elmIframe.onreadystatechange = null;\r
-                               onLoad();\r
-                           }\r
-                               }\r
-                                       function onLoad(){\r
-                                               elmIframe.onload = null;\r
-                                               ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
-                                               elmProgress.innerHTML = 'success!';\r
-                                               setTimeout( clickCancel , 1000);\r
-                                               isUploading = false;\r
-                                       }\r
                \r
-               function detectForm(){\r
-                       elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
-                       if( elmForm){\r
-                               var _inputList = elmForm.getElementsByTagName( 'input' ),\r
-                                       _input;\r
-                               for( var i=0, l= _inputList.length; i<l; ++i){\r
-                                       _input = _inputList[ i ];\r
-                                       if( _input.type === 'submit'){\r
-                                               _input.style.display = 'none';\r
-                                       }\r
-                               }\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
-                               pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
-                               elmProgress.innerHTML = 'create iframe';\r
+               elmProgress.innerHTML = 'loading form.';\r
+               \r
+               instance.onPaneResize( w, h );\r
+       }\r
+       this.onPaneResize = function( _windowW, _windowH ){\r
+               windowW = _windowW;\r
+               windowH = _windowH;\r
+               jqWrap.css(\r
+                       {\r
+                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
+                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
                        }\r
-               }\r
-               function onCreateIframe( _iframe ){\r
-                       elmContainer.appendChild( _iframe );\r
-                       elmIframe = _iframe;\r
-                       elmForm.target = _iframe.name;\r
-                       elmProgress.innerHTML = '';\r
-                       ARTIST_CONSOLE.onWindowResize( windowW, windowH );\r
-               }\r
-               /*\r
-                * \r
-                */\r
-               function clickCancel(){\r
-                       if( isUploading === true) return false;\r
-                       pettanr.overlay.hide();\r
-                       ARTIST_CONSOLE.onClose();\r
-                       return false;\r
-               }\r
+               );\r
+       }\r
+       this.onClose = function(){\r
+               elmForm !== null && $( elmContainer.children ).remove();\r
+               elmForm = elmIframe = null;\r
+               isUploading = false;\r
                \r
-               this.init = function(){\r
-                       this.jqWrap = jqWrap = $( '#artist-console-wrapper').hide();\r
-                       $( '#artist-console-post-button').click( clickOK );\r
-                       $( '#artist-console-cancel-button').click( clickCancel );\r
-\r
-                       delete ARTIST_CONSOLE.init;\r
+               if( elmScript !== null ){\r
+                       document.body.removeChild( elmScript);\r
+                       elmScript = null;                                       \r
                }\r
-               this.jqWrap = null;\r
-               this.ID = ID;\r
-               this.show = function( w, h){\r
-                       /*\r
-                        * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.\r
-                        */                             \r
-                       elmScript = document.createElement( 'script');\r
-                       elmScript.type = 'text\/javascript';\r
-                       elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;\r
-                       document.body.appendChild( elmScript);\r
-                       \r
-                       jqWrap.show();\r
-                       pettanr.overlay.show( ARTIST_CONSOLE );\r
+               if( timer !== null){\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+               }\r
+               jqWrap.hide();\r
+       }\r
+});\r
 \r
-                       if( timer === null){\r
-                               timer = window.setInterval( detectForm, 250 );\r
+pettanr.artistConsole = pettanr.view.registerApplication( function(){\r
+       var jqWrap, windowW, windowH,\r
+               ID = 'artistConsole',\r
+               TARGET_FRAME_NAME = 'targetFrameRegisterArtist',\r
+               elmContainer = document.getElementById( 'register'),\r
+               elmProgress = document.getElementById( 'artist-console-progress'),\r
+               timer = null,\r
+               elmScript = null,\r
+               elmForm = null,\r
+               elmIframe = null,\r
+               isUploading = false,\r
+               instance = this;\r
+       /*\r
+        * upload ボタンが押されたらまず iframe をつくる.\r
+        */\r
+       function clickOK(){\r
+               if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+               elmProgress.innerHTML = 'uploading.';\r
+               isUploading = true;\r
+               submit();\r
+               return false;\r
+       }\r
+       /*\r
+        * form の target に iframe を指定したのち submit();\r
+        */\r
+               function submit(){\r
+                       try {\r
+                               elmForm.submit();\r
+                       } catch( e){\r
+                               elmProgress.innerHTML = 'submit() err..';\r
+                               isUploading = false;\r
+                               setTimeout( clickCancel , 3000);\r
+                               return;\r
                        }\r
                        \r
-                       elmProgress.innerHTML = 'loading form.';\r
-                       \r
-                       ARTIST_CONSOLE.onWindowResize( w, h );\r
+                       if( pettanr.ua.isIE){\r
+                               elmIframe.onreadystatechange = detectIframe;\r
+                       } else {\r
+                               elmIframe.onload = onLoad;\r
+                       }\r
+                       elmProgress.innerHTML = 'uploading..';\r
                }\r
-               this.onWindowResize = function( _windowW, _windowH ){\r
-                       windowW = _windowW;\r
-                       windowH = _windowH;\r
-                       jqWrap.css(\r
-                               {\r
-                                       left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
-                                       top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
+       /*\r
+        * ie の 場合、readyState をチェック.\r
+        */\r
+                       function detectIframe(){\r
+                   if ( elmIframe.readyState === 'complete') {\r
+                       elmIframe.onreadystatechange = new Function();\r
+                       elmIframe.onreadystatechange = null;\r
+                       onLoad();\r
+                   }\r
+                       }\r
+                               function onLoad(){\r
+                                       elmIframe.onload = null;\r
+                                       ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+                                       elmProgress.innerHTML = 'success!';\r
+                                       setTimeout( clickCancel , 1000);\r
+                                       isUploading = false;\r
                                }\r
-                       );\r
+       \r
+       function detectForm(){\r
+               elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+               if( elmForm){\r
+                       var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+                               _input;\r
+                       for( var i=0, l= _inputList.length; i<l; ++i){\r
+                               _input = _inputList[ i ];\r
+                               if( _input.type === 'submit'){\r
+                                       _input.style.display = 'none';\r
+                               }\r
+                       }\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+                       pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+                       elmProgress.innerHTML = 'create iframe';\r
                }\r
-               this.onClose = function(){\r
-                       elmForm !== null && $( elmContainer.children ).remove();\r
-                       elmForm = elmIframe = null;\r
-                       isUploading = false;\r
-                       \r
-                       if( elmScript !== null ){\r
-                               document.body.removeChild( elmScript);\r
-                               elmScript = null;                                       \r
-                       }\r
-                       if( timer !== null){\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
+       }\r
+       function onCreateIframe( _iframe ){\r
+               elmContainer.appendChild( _iframe );\r
+               elmIframe = _iframe;\r
+               elmForm.target = _iframe.name;\r
+               elmProgress.innerHTML = '';\r
+               instance.onPaneResize( windowW, windowH );\r
+       }\r
+       /*\r
+        * \r
+        */\r
+       function clickCancel(){\r
+               if( isUploading === true) return false;\r
+               pettanr.artistConsole.shutdown();\r
+               return false;\r
+       }\r
+\r
+       /* grobal method */\r
+       // this.rootElement = elmWrap;\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               this.jqWrap = jqWrap = $( '#artist-console-wrapper').hide();\r
+               $( '#artist-console-post-button').click( clickOK );\r
+               $( '#artist-console-cancel-button').click( clickCancel );\r
+\r
+               delete instance.init;\r
+       }\r
+       this.jqWrap = null;\r
+       this.onOpen = function( w, h ){\r
+               instance.init && instance.init();\r
+               /*\r
+                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.\r
+                */                             \r
+               elmScript = document.createElement( 'script' );\r
+               elmScript.type = 'text\/javascript';\r
+               elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;\r
+               document.body.appendChild( elmScript );\r
+               \r
+               jqWrap.show();\r
+\r
+               if( timer === null){\r
+                       timer = window.setInterval( detectForm, 250 );\r
+               }\r
+               \r
+               elmProgress.innerHTML = 'loading form.';\r
+               \r
+               instance.onPaneResize( w, h );\r
+       }\r
+       this.onPaneResize = function( _windowW, _windowH ){\r
+               windowW = _windowW;\r
+               windowH = _windowH;\r
+               jqWrap.css(\r
+                       {\r
+                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
+                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
                        }\r
-                       jqWrap.hide();\r
+               );\r
+       }\r
+       this.onClose = function(){\r
+               elmForm !== null && $( elmContainer.children ).remove();\r
+               elmForm = elmIframe = null;\r
+               isUploading = false;\r
+               \r
+               if( elmScript !== null ){\r
+                       document.body.removeChild( elmScript);\r
+                       elmScript = null;                                       \r
                }\r
-       });\r
-       \r
-       return {\r
-               init: function(){\r
-                       ARTIST_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _w, _h, _option ){\r
-                       \r
-               },\r
-               onClose: function(){\r
-                       \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       ARTIST_CONSOLE.show( w, h);\r
+               if( timer !== null){\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
                }\r
+               jqWrap.hide();\r
+       }\r
+});\r
+\r
+pettanr.outputConsole = pettanr.view.registerApplication( function(){\r
+       var jqWrap, jqOutputArea,\r
+               ID = 'outputConsole',\r
+               instance = this;\r
+       //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
+       \r
+       function clickOK(){\r
+               pettanr.overlay.hide();\r
+               instance.onClose();\r
+       }\r
+       \r
+       /* grobal method */\r
+       // this.rootElement = elmWrap;\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
+               jqOutputArea = $( '#output-area');\r
+               delete instance.init;\r
+       }\r
+       this.jqWrap = null;\r
+       this.onOpen = function( _w, _h, _text ){\r
+               instance.init && instance.init();\r
+               \r
+               jqWrap.show();\r
+               instance.onWindowResize( _w, _h );\r
+               jqOutputArea.val( _text).focus();\r
        }\r
-})();
\ No newline at end of file
+       this.onWindowResize = function( _w, _h){\r
+               jqWrap.css(\r
+                       {\r
+                               left:   Math.floor( ( _w -jqWrap.width()) /2),\r
+                               top:    Math.floor( ( _h -jqWrap.height()) /2)\r
+                       }\r
+               );\r
+       }\r
+       this.onClose = function(){\r
+               jqWrap.hide();\r
+               jqOutputArea.val('');\r
+       }\r
+});\r