OSDN Git Service

fixed overlay.hide()
[pettanr/pettanr.git] / public / assets / work.js
index 1dffaec..8433a9a 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR work.js\r
- *   version 0.4.2\r
+ *   version 0.4.21\r
  *   \r
  * author:\r
  *   itozyun\r
 /* ----------------------------------------\r
  *   pettanr.editor\r
  *    - MENU_BAR_CONTROL\r
- *    - HISTORY\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 = ( 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,11 +80,15 @@ pettanr.editor = ( function(){
                windowW, windowH,\r
                currentListener = null,\r
                currentCursor = '',\r
+               instance = this,\r
                option,\r
                log;\r
 \r
 /* ----------------------------------------\r
  * MENU BAR\r
+ *  - mouseEventListener\r
+ *  - controler\r
+ * \r
  * div\r
  *   div.title\r
  *   ul\r
@@ -180,15 +182,7 @@ pettanr.editor = ( function(){
                        \r
                        function onClick( e){\r
                                var that = this,\r
-                                       i = ( function(){\r
-                                               var parent = that.parentNode,\r
-                                                       children = parent.getElementsByTagName( 'li'),\r
-                                                       l = children.length;\r
-                                               for(var i=0; i<l; ++i){\r
-                                                       if( children[ i] === that) return i;\r
-                                               }\r
-                                               return -1;\r
-                                       })();\r
+                                       i = pettanr.util.getChildIndex( this.parentNode, this);\r
                                i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);\r
                                e.stopPropagation();\r
                                return false;\r
@@ -317,9 +311,10 @@ pettanr.editor = ( function(){
 \r
 \r
 /* ----------------------------------------\r
- * HISTORY\r
+ * HISTORY_CONTROL\r
+ *  - controler\r
  */\r
-       var HISTORY = ( function() {\r
+       var HISTORY_CONTROL = ( function() {\r
                var     STACK_BACK = [],\r
                        STACK_FORWARD = [],\r
                        MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),\r
@@ -362,13 +357,13 @@ pettanr.editor = ( 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
@@ -378,10 +373,10 @@ pettanr.editor = ( function(){
                return {\r
                        init: function(){\r
                                log = $( '#history-log');\r
-                               delete HISTORY.init;\r
+                               delete HISTORY_CONTROL.init;\r
                        },\r
                        open: function(){\r
-                               HISTORY.init && HISTORY.init();\r
+                               HISTORY_CONTROL.init && HISTORY_CONTROL.init();\r
                        },\r
                        close: function(){\r
                                MENUBAR_BACK.visible( false);\r
@@ -413,86 +408,37 @@ pettanr.editor = ( function(){
                }\r
        })();\r
 \r
-\r
 /* ----------------------------------------\r
- *     Save Control\r
+ * SAVE_CONTROL\r
+ *  - controler\r
  */\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
        var SAVE_CONTROL = ( function(){\r
                var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),\r
                        SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),\r
                        SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),\r
                        SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),\r
-                       OUTPUT = MENU_BAR_CONTROL.QUIT.createSelection( 'output', null, onOutputClick, true, false, true),\r
                        QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
                        updated = false;\r
                \r
                function quit(){\r
-               }\r
-               \r
-               function onOutputClick(){\r
-                       // OUTPUT_CONSOLE.show();\r
+                       // 本来は os.application.close();\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
@@ -504,483 +450,9 @@ pettanr.editor = ( function(){
        })();\r
 \r
 /* ----------------------------------------\r
- *     Text Editor (Overlay)\r
- */\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 (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
-                                               ( function( onUpdate){\r
-                                                       pettanr.util.loadImage( SRC,\r
-                                                               function( _abspath, imgW, imgH){\r
-                                                                       onUpdate( SRC, imgW, imgH);\r
-                                                                       onUpdate = null;\r
-                                                               },\r
-                                                               function( _abspath){\r
-                                                                       onUpdate( SRC, data.width || 64, data.height || 64);\r
-                                                                       onUpdate = null;\r
-                                                               }\r
-                                                       );                                                                              \r
-                                               })( onUpdateFunction);*/ // close()で値が消えるので、クロージャに保持\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 = null;// onUpdateFunction = \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
-                       // onUpdateFunction && onUpdateFunction( textElement);\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
  */    \r
        var WINDOWS_CONTROL = ( function(){\r
                /*\r
@@ -1217,7 +689,7 @@ pettanr.editor = ( function(){
                        }\r
                };\r
                \r
-               function getCurrentWindow( _mouseX, _mouseY){\r
+               function getCurrentIndex( _mouseX, _mouseY){\r
                        if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
                        var l = WINDOW_ARRAY.length,\r
                                _currentWindow = null,\r
@@ -1261,13 +733,19 @@ pettanr.editor = ( function(){
                                \r
                                delete WINDOWS_CONTROL.init;\r
                        },\r
+                       open: function(){\r
+                               WINDOWS_CONTROL.init && WINDOWS_CONTROL.init();\r
+                       },\r
+                       close: function(){\r
+                               \r
+                       },\r
                        onMouseMove: function( _mouseX, _mouseY){\r
-                               var _index = getCurrentWindow( _mouseX, _mouseY);\r
+                               var _index = getCurrentIndex( _mouseX, _mouseY);\r
                                if( _index === 0){\r
                                        currentWindow.onMouseMove( _mouseX, _mouseY);\r
                                        return true;\r
                                } else\r
-                               if( _index !== -1){ // 先頭のクリックでない場合\r
+                               if( _index > 0){ // 先頭のクリックでない場合\r
                                // Array を前に\r
                                        WINDOW_ARRAY.splice( currentWindowIndex, 1);\r
                                        WINDOW_ARRAY.unshift( currentWindow);\r
@@ -1279,14 +757,14 @@ pettanr.editor = ( function(){
                                return false;\r
                        },\r
                        onMouseUp: function( _mouseX, _mouseY){\r
-                               if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
+                               if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
                                        currentWindow.onMouseUp( _mouseX, _mouseY);\r
                                        return true;\r
                                }\r
                                return false;\r
                        },\r
                        onMouseDown: function( _mouseX, _mouseY){\r
-                               if( getCurrentWindow( _mouseX, _mouseY) === 0){\r
+                               if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
                                        currentWindow.onMouseDown( _mouseX, _mouseY);\r
                                        return true;\r
                                }\r
@@ -1300,7 +778,7 @@ pettanr.editor = ( function(){
                                 * 画面外に出るwindowの移動\r
                                 */\r
                        },\r
-                       createWindow: function( scope, EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
+                       createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
                                opt_visible = opt_visible !== false;\r
                                opt_closeButtonEnabled = opt_closeButtonEnabled === true;\r
                                opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;\r
@@ -1308,7 +786,9 @@ pettanr.editor = ( function(){
                                opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
                                \r
                                var _window = pettanr.util.extend(\r
-                                       WindowClass.apply( scope, [ bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH]),\r
+                                       new WindowClass(\r
+                                               bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH\r
+                                       ),\r
                                        EXTENDS\r
                                );\r
                                WINDOW_ARRAY.unshift( _window);\r
@@ -1321,6 +801,7 @@ pettanr.editor = ( function(){
 \r
 /* ----------------------------------------\r
  * TOOL_BOX_WINDOW\r
+ * - window\r
  */\r
        var TOOL_BOX_WINDOW = ( function(){\r
                var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,\r
@@ -1337,34 +818,33 @@ pettanr.editor = ( function(){
 \r
                function addImage( e){\r
                        setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0);\r
-                       e && e.preventDefault();\r
+                       e && e.preventDefault && e.preventDefault();\r
                        return false;\r
                }\r
                function addText( e){\r
                        setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0);\r
-                       e && e.preventDefault();\r
+                       e && e.preventDefault && e.preventDefault();\r
                        return false;\r
                }\r
                function switchGrid( e){\r
                        setTimeout( GRID_CONTROL.update, 0);\r
-                       e && e.preventDefault();\r
+                       e && e.preventDefault && e.preventDefault();\r
                        return false;\r
                }\r
                function popupHelp( e){\r
                        instance.bodyBackOrForward( true);\r
                        setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);\r
-                       e && e.preventDefault();\r
+                       e && e.preventDefault && e.preventDefault();\r
                        return false;\r
                }\r
                function editBG( e){\r
                        instance.bodyBackOrForward( true);\r
                        setTimeout( INFOMATION_WINDOW.open, 0); \r
-                       e && e.preventDefault();\r
+                       e && e.preventDefault && e.preventDefault();\r
                        return false;\r
                }\r
                \r
                return WINDOWS_CONTROL.createWindow(\r
-                       this,\r
                        {\r
                                onInit: function(){\r
                                        instance = this;\r
@@ -1389,26 +869,23 @@ pettanr.editor = ( function(){
        \r
 /* ----------------------------------------\r
  * IMAGE_EXPROLER\r
+ *  - window\r
  */\r
        var IMAGE_EXPLORER_WINDOW = ( function(){\r
                var instance, finder;\r
                \r
                return WINDOWS_CONTROL.createWindow(\r
-                       this,\r
                        {\r
                                onInit: function(){\r
                                        instance = this;\r
                                        delete this.onInit;\r
                                },\r
-                               onFirstOpen: function( _w, _h){\r
-                                       finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE);\r
-                                       delete this.onFirstOpen;\r
-                               },\r
                                onOpen: function( _w, _h){\r
-                                       finder.onOpen( _w, _h);\r
+                                       finder = finder || pettanr.finder.createFinder( pettanr.editor, document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
+                                       finder.resize( _w, _h );\r
                                },\r
-                               onResize: function( _w, _h){\r
-                                       finder.onWindowResize( _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
@@ -1418,6 +895,7 @@ pettanr.editor = ( function(){
        \r
 /* ----------------------------------------\r
  * INFOMATION_WINDOW\r
+ *  - window\r
  */                    \r
        var INFOMATION_WINDOW = ( function(){\r
                var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,\r
@@ -1432,7 +910,6 @@ pettanr.editor = ( function(){
                        currentLock = false;\r
 \r
                return WINDOWS_CONTROL.createWindow(\r
-                       this,\r
                        {\r
                                onFirstOpen: function( _w, _h){\r
                                        backgroundInfomationElm = $( '#panel-background-information');\r
@@ -1466,13 +943,13 @@ pettanr.editor = ( 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
@@ -1501,14 +978,14 @@ pettanr.editor = ( function(){
                                                currentElementType = _elementType;\r
                                        }\r
                                        if( currentElementType !== -1){\r
-                                               inputX.update( x);\r
-                                               inputY.update( y);\r
-                                               inputZ.update( z);\r
-                                               _elementType === 1 && inputA.update( a);\r
-                                               inputW.update( w);\r
-                                               inputH.update( h);\r
-                                               _elementType === 0 && inputPercentW.update( wPercent);\r
-                                               _elementType === 0 && inputPercentH.update( hPercent);                                  \r
+                                               inputX.value( x);\r
+                                               inputY.value( y);\r
+                                               inputZ.value( z);\r
+                                               _elementType === 1 && inputA.value( a);\r
+                                               inputW.value( w);\r
+                                               inputH.value( h);\r
+                                               _elementType === 0 && inputPercentW.value( wPercent);\r
+                                               _elementType === 0 && inputPercentH.value( hPercent);                                   \r
                                        } else {\r
                                                \r
                                        }\r
@@ -1524,6 +1001,7 @@ pettanr.editor = ( function(){
 \r
 /* ----------------------------------------\r
  * HELP_WINDOW\r
+ *  - window\r
  */\r
        var HELP_DOCUMENTS_WINDOW = ( function(){\r
                var visible = true,\r
@@ -1531,22 +1009,12 @@ pettanr.editor = ( function(){
                        jqNaviItems,\r
                        jqPages,\r
                        currentPageIndex = 0,\r
+                       numPage = 0,\r
                        HELP = MENU_BAR_CONTROL.HELP,\r
-                       onLoadFunction = HELP.createAjaxSelection( onFirstOpen),\r
+                       onLoadFunction = HELP.createAjaxSelection( onAjaxStart),\r
                        instance;\r
-               function jumpPage( _index){\r
-                       \r
-               }\r
-               function onSelectionClick( _pageIndex){\r
-                       currentPageIndex = _pageIndex || currentPageIndex;\r
-                       HELP_DOCUMENTS_WINDOW.open();\r
-                       onOpen();\r
-               }\r
-               function onOpen(){\r
-                       jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
-                       jqPages.hide().eq( currentPageIndex).show();\r
-               }\r
-               function onFirstOpen( _pageIndex){\r
+\r
+               function onAjaxStart( _pageIndex){\r
                        currentPageIndex = _pageIndex || currentPageIndex;\r
                        if( onHelpLoad !== null){\r
                                $.ajax({\r
@@ -1556,6 +1024,7 @@ pettanr.editor = ( function(){
                                });\r
                                onHelpLoad = null;\r
                        }\r
+                       onAjaxStart = new Function;\r
                }\r
                var onHelpLoad = function( _xml){\r
                        var jqXML = $( _xml),\r
@@ -1565,8 +1034,7 @@ pettanr.editor = ( function(){
                                elmPages = document.createElement( 'div'),\r
                                elmPageOrigin = document.createElement( 'div'),\r
                                elmTitleOrigin = document.createElement( 'h2'),\r
-                               elmPage,\r
-                               numPage = 0;\r
+                               elmPage;\r
                        elmNavi.className = 'sidenavi';\r
                        elmItemOrigin.className = 'sidenavi-item';\r
                        elmItemOrigin.href = '#';\r
@@ -1574,7 +1042,7 @@ pettanr.editor = ( function(){
                        elmPageOrigin.className = 'page-content main';\r
                        elmPageOrigin.appendChild( elmTitleOrigin);\r
                        \r
-                       // helpTitle && instance.title( helpTitle);\r
+                       //helpTitle && instance.title( helpTitle);\r
                        \r
                        jqXML.find( 'page').each( function(){\r
                                var xmlPage = $( this),\r
@@ -1585,6 +1053,7 @@ pettanr.editor = ( function(){
                                elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
                                \r
                                elmTitleOrigin.innerHTML = title;\r
+                               \r
                                elmPage = elmPageOrigin.cloneNode( true);\r
                                elmPage.innerHTML = content;\r
                                \r
@@ -1606,51 +1075,50 @@ pettanr.editor = ( function(){
                        jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
                        \r
                        jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);\r
-                       jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a').click( onInnerLinkClick);\r
                        jqPages = jqAjaxContents.find( '.page-content');\r
-                       setTimeout( onOpen, 0);\r
+                       jqPages.find( 'a').click( onInnerLinkClick);\r
+                       \r
+                       setTimeout( jumpPage, 0);\r
+               }\r
+               function onSelectionClick( _pageIndex){\r
+                       HELP_DOCUMENTS_WINDOW.open();\r
+                       jumpPage( _pageIndex);\r
+               }\r
+               function jumpPage( _index){\r
+                       if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index){\r
+                               currentPageIndex = _index;\r
+                       }\r
+                       jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
+                       jqPages.hide().eq( currentPageIndex).show();\r
                }\r
                function onNaviClick( e){\r
                        // this は <a>\r
-                       var children = this.parentNode.getElementsByTagName( 'a'),\r
-                               l = children.length;\r
-                       for( var i=0; i<l; ++i){\r
-                               if( children[ i] === this) break;\r
-                       }\r
+                       jumpPage( pettanr.util.getChildIndex( this.parentNode, this));\r
                        e.stopPropagation();\r
-                       if( i === l) return false;\r
-                       jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
-                       jqPages.hide().eq( i).show();\r
                        return false;\r
                }\r
                function onInnerLinkClick( e){\r
-                       var jump = this.href.split( '#jump'),\r
-                               n = jump[1],\r
-                               i = ( n && '' +parseFloat( n) === n) ? parseFloat( n) : -1;\r
+                       var jump = ( this.href || '').split( '#jump'),\r
+                               n = jump[1];\r
+                       if( !n) return;\r
+                       jumpPage( '' + parseFloat( n) === n ? parseFloat( n) : -1);\r
                        e.stopPropagation();\r
-                       if( i === -1) return false;\r
-                       jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');\r
-                       jqPages.hide().eq( i).show();\r
-                       currentPageIndex = i;\r
                        return false;                           \r
                }\r
                return WINDOWS_CONTROL.createWindow(\r
-                       this,\r
                        {\r
                                onInit: function(){\r
                                        instance = this;\r
-                                       jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});\r
+                                       jqAjaxContents = this.$.find( '.window-body').addClass( 'loading');\r
                                        delete this.onInit;\r
                                },\r
-                               onFirstOpen: function(){\r
-                                       onFirstOpen();\r
-                               },\r
-                               onResize: function( w, h){\r
-                                       jqAjaxContents && jqAjaxContents.css( { height: h});\r
+                               onFirstOpen: function( _w, _h){\r
+                                       jqAjaxContents.css( { height: _h});\r
+                                       onAjaxStart();\r
+                                       delete this.onFirstOpen;\r
                                },\r
-                               setAjaxContent: function( html){\r
-                                       \r
-                                       delete this.onLoadAjaxContent;\r
+                               onResize: function( _w, _h){\r
+                                       jqAjaxContents && jqAjaxContents.css( { height: _h});\r
                                }\r
                        },\r
                        null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300\r
@@ -1659,9 +1127,12 @@ pettanr.editor = ( function(){
 \r
 /* ----------------------------------------\r
  * GRID_CONTROL\r
+ *  - control\r
+ *  - panelResizeListener\r
  */\r
        var GRID_CONTROL = ( function(){\r
                var ELM_GRID = document.getElementById( 'grid'),\r
+                       BG_URL = "url('images/grid.gif')",\r
                        jqGrid,\r
                        visible = false;\r
 \r
@@ -1670,6 +1141,12 @@ pettanr.editor = ( function(){
                                jqGrid = $( ELM_GRID);\r
                                delete GRID_CONTROL.init;\r
                        },\r
+                       open: function(){\r
+                               GRID_CONTROL.init && GRID_CONTROL.init();\r
+                       },\r
+                       close: function(){\r
+                               \r
+                       },\r
                        onPanelResize: function( _panelX, _panelY){\r
                                ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');\r
                                ELM_GRID.style.height = windowH +'px';\r
@@ -1685,17 +1162,19 @@ pettanr.editor = ( function(){
                                \r
                                visible = !visible;\r
                                \r
-                               if( visible === true && !ELM_GRID.style.backgroundImage){\r
-                                       ELM_GRID.style.backgroundImage = "url('images/grid.gif')";\r
+                               if( visible === true && BG_URL !== null){\r
+                                       ELM_GRID.style.backgroundImage = BG_URL;\r
+                                       BG_URL = null;\r
                                }\r
                                return visible;                         \r
                        }\r
                }\r
        })();\r
                \r
-       /*\r
-        *      WHITE_GLASS_CONTROL\r
-        */     \r
+/* ----------------------------------------\r
+ * WHITE_GLASS_CONTROL\r
+ *  - panelResizeListener\r
+ */\r
        var WHITE_GLASS_CONTROL = ( function(){\r
                var styleTop = document.getElementById( 'whiteGlass-top').style,\r
                        styleLeft = document.getElementById( 'whiteGlass-left').style,\r
@@ -1731,8 +1210,11 @@ pettanr.editor = ( function(){
        })();\r
 \r
 \r
-/*\r
+/* ----------------------------------------\r
  * PANEL_CONTROL\r
+ *  - controler\r
+ *  - mouseEventListener\r
+ * \r
  * panel-border の表示と onPanelResize の通知.\r
  * panel drag.\r
  * \r
@@ -1748,6 +1230,8 @@ pettanr.editor = ( function(){
                        isDragging = false,\r
                        isDraggable = false;\r
                \r
+               pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);\r
+               \r
                function onSpaceUpdate(e){\r
                        if( e.type === 'keyup'){\r
                                currentListener === null && updateMouseCursor( '');\r
@@ -1759,18 +1243,17 @@ pettanr.editor = ( function(){
                }\r
                \r
                return {\r
-                       init: function( _panelW, _panelH, _borderSize){\r
-                               panelW = _panelW || DEFAULT_PANEL_WIDTH;\r
-                               panelH = _panelH || DEFAULT_PANEL_HEIGHT;\r
-                               panelX = Math.floor( ( windowW -panelW) /2);\r
-                               panelY = Math.floor( ( windowH -panelH) /2);\r
-                               borderSize = _borderSize !== undefined ? _borderSize : borderSize;\r
-                               \r
-                               pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);\r
+                       open: function( _panelW, _panelH, _borderSize ){\r
+                               panelW = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH;\r
+                               panelH = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT;\r
+                               //panelX = Math.floor( ( windowW -panelW) /2);\r
+                               //panelY = Math.floor( ( windowH -panelH) /2);\r
+                               borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;\r
                                \r
-                               setTimeout( PANEL_CONTROL.resize, 0);\r
+                               //setTimeout( PANEL_CONTROL.resize, 0);\r
+                       },\r
+                       close: function(){\r
                                \r
-                               delete PANEL_CONTROL.init;\r
                        },\r
                        x: function(){\r
                                return panelX;\r
@@ -1828,9 +1311,9 @@ pettanr.editor = ( function(){
                }\r
        })();\r
 \r
-/*\r
- * --------------------------------------------------------------------------------------------\r
- * panel resizer\r
+/* --------------------------------------------------------------------------------------------\r
+ * PanelResizerClass\r
+ *  - mouseEventListener\r
  */\r
        var PanelResizerClass = function( ID, isTop){\r
                var ELM = document.getElementById( ID),\r
@@ -1851,80 +1334,77 @@ pettanr.editor = ( function(){
                        }\r
                }\r
                        \r
-               return {\r
-                       busy: function(){\r
-                               return isDragging;\r
-                       },\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.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
-\r
+/* --------------------------------------------------------------------------------------------\r
+ * CONSOLE_CONTROLER\r
+ */\r
        var CONSOLE_CONTROLER = ( function(){\r
                var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
                        LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
                        DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
                        EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
                        CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
-                       SAVE = HISTORY.saveState,\r
+                       SAVE = HISTORY_CONTROL.saveState,\r
                        jqStage,\r
                        jqConsoleParent,\r
                        jqConsoleWrapper,\r
@@ -1983,14 +1463,17 @@ pettanr.editor = ( 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
@@ -2017,7 +1500,9 @@ pettanr.editor = ( 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
@@ -2025,17 +1510,17 @@ pettanr.editor = ( 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
@@ -2080,7 +1565,10 @@ pettanr.editor = ( function(){
                }\r
        })();\r
 \r
-\r
+/* --------------------------------------------------------------------------------------------\r
+ * TAIL_OPERATOR\r
+ *  - comicElementOperator\r
+ */\r
        var TAIL_OPERATOR = ( function(){\r
                var     MOUSE_CURSOR = updateMouseCursor,\r
                        ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
@@ -2130,7 +1618,7 @@ pettanr.editor = ( 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
@@ -2166,7 +1654,11 @@ pettanr.editor = ( function(){
                        }\r
                }\r
        })();\r
-       \r
+\r
+/* --------------------------------------------------------------------------------------------\r
+ * RESIZE_OPERATOR\r
+ *  - comicElementOperator\r
+ */\r
        var RESIZE_OPERATOR = ( function(){\r
                var     MOUSE_CURSOR = updateMouseCursor,\r
                        GRID_ENABLED = GRID_CONTROL.enabled;\r
@@ -2283,8 +1775,8 @@ pettanr.editor = ( function(){
                return {\r
                        update: draw,\r
                        index: function( _mouseX, _mouseY){\r
-                               var     p;\r
-                               for( var i=4; i<8; i++){\r
+                               var     p, i;\r
+                               for( i=4; i<8; i++){\r
                                        p = POSITION_ARRAY[ i];\r
                                        if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
                                                MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
@@ -2292,7 +1784,7 @@ pettanr.editor = ( function(){
                                                return currentIndex = i;\r
                                        }\r
                                }\r
-                               for( var i=0; i<4; i++){\r
+                               for( i=0; i<4; i++){\r
                                        p = POSITION_ARRAY[ i];\r
                                        if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
                                                MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
@@ -2306,7 +1798,7 @@ pettanr.editor = ( 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
@@ -2315,7 +1807,7 @@ pettanr.editor = ( 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
@@ -2325,7 +1817,7 @@ pettanr.editor = ( 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
@@ -2378,7 +1870,7 @@ pettanr.editor = ( 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
@@ -2446,7 +1938,7 @@ pettanr.editor = ( 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
@@ -2461,7 +1953,11 @@ pettanr.editor = ( function(){
                        onCtrlUpdate: update\r
                }\r
        })();\r
-       \r
+\r
+/* --------------------------------------------------------------------------------------------\r
+ * POSITION_OPERATOR\r
+ *  - comicElementOperator\r
+ */\r
        var POSITION_OPERATOR = ( function(){\r
                var     MOUSE_CURSOR = updateMouseCursor,\r
                        GRID_ENABLED = GRID_CONTROL.enabled;\r
@@ -2518,13 +2014,12 @@ pettanr.editor = ( function(){
        })();\r
 \r
 \r
-/*\r
- * --------------------------------------------------------------------------------------------\r
+/* --------------------------------------------------------------------------------------------\r
  * COMIC_ELEMENT_OPERATION_MANAGER\r
  */\r
        var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){\r
                var     MOUSE_CURSOR = updateMouseCursor,\r
-                       SAVE = HISTORY.saveState,\r
+                       SAVE = HISTORY_CONTROL.saveState,\r
                        GRID_ENABLED = GRID_CONTROL.enabled,\r
                        HIT_AREA = MOUSE_HIT_AREA,\r
                        currentIsTextElement = false,\r
@@ -2549,7 +2044,7 @@ pettanr.editor = ( 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
@@ -2561,29 +2056,48 @@ pettanr.editor = ( function(){
                                        );\r
                                }\r
                        }\r
-                       function hide(){\r
+\r
+                       pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){\r
+                               currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();\r
+                       });\r
+                       pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){\r
+                               currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();\r
+                       });\r
+                       pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){\r
+                               currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
+                               currentOperator = null;\r
+                       });\r
+               return {\r
+                       open: function(){\r
+                               this.hide();\r
+                       },\r
+                       close: function(){\r
+                               \r
+                       },\r
+                       hide: function(){\r
                                currentElement !== null && RESIZE_OPERATOR.hide();\r
                                currentElement = null;\r
                                MOUSE_CURSOR( '');\r
                                TAIL_OPERATOR.hide();\r
                                CONSOLE_CONTROLER.hide();\r
                                INFOMATION_WINDOW.update( null);\r
-                       }\r
-                       function restoreState( arg){\r
+                       },\r
+                       resize: resize,\r
+                       restoreState: function( arg){\r
                                if( arg && arg.length !== 8) return;\r
                                var _currentElement = arg[ 0],\r
                                        _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],\r
                                        _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
                                currentOperator = null;\r
                                currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
-                       }\r
-                       function saveComicElementStatus( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
+                       },\r
+                       saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
                                startX = startX !== undefined ? startX : currentx;\r
                                startY = startY !== undefined ? startY : currenty;\r
                                startW = startW !== undefined ? startW : currentw;\r
@@ -2591,34 +2105,15 @@ pettanr.editor = ( function(){
                                startA = startA !== undefined ? startA : angle;\r
                                startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
                                startFilpH = startFilpH !== undefined ? startFilpH : flipH;\r
-                               currentElement && SAVE( restoreState,\r
+                               currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState,\r
                                        [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],\r
                                        [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH]\r
                                );\r
-                       }\r
-                       pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){\r
-                               currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();\r
-                       });\r
-                       pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function(){\r
-                               currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();\r
-                       });\r
-                       pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function(){\r
-                               currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
-                               currentOperator = null;\r
-                       });\r
-               return {\r
-                       init: function(){\r
-                               hide();\r
-                               delete COMIC_ELEMENT_OPERATION_MANAGER.init;\r
                        },\r
-                       hide: hide,\r
-                       resize: resize,\r
-                       restoreState: restoreState,\r
-                       saveStatus: saveComicElementStatus,\r
                        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
@@ -2634,6 +2129,7 @@ pettanr.editor = ( 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
@@ -2670,177 +2166,175 @@ pettanr.editor = ( 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
- * --------------------------------------------------------------------------------------------\r
+\r
+/* --------------------------------------------------------------------------------------------\r
  * 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
-                       SAVE = HISTORY.saveState,\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
-                       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
-                               left:   x,\r
-                               top:    y,\r
-                               width:  w,\r
-                               height: h\r
-                       }, 250, onAnimeComplete);\r
-                       animate !== true && onAnimeComplete();\r
-               }\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
+                       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
+               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
+                               JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );\r
                                reversibleImage.destroy();\r
                        } else {\r
-                               JQ_WRAPPER.append( _reversibleImage.elm);\r
+                               JQ_WRAPPER.append( _reversibleImage.elm );\r
                        }\r
                        reversibleImage = _reversibleImage;\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
+               /* 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
-               );\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
+                               left:   x,\r
+                               top:    y,\r
+                               width:  w,\r
+                               height: h\r
+                       }, 250, onAnimeComplete );\r
+                       animate !== true && onAnimeComplete();\r
+               }\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
        }\r
+       ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );\r
 /*\r
  * / ImageElementClass\r
  * --------------------------------------------------------------------------------------------\r
  */\r
 \r
 \r
-/*\r
- * --------------------------------------------------------------------------------------------\r
+/* --------------------------------------------------------------------------------------------\r
  * TextElementClass\r
  * \r
- * ELM はpettanr.domで書き出したものを突っ込むcreateの場合\r
- * \r
  * type\r
  * 0.none\r
  * 1.speach balloon\r
@@ -2851,24 +2345,73 @@ pettanr.editor = ( 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.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
@@ -2882,129 +2425,90 @@ pettanr.editor = ( 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
-               );\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
+/* --------------------------------------------------------------------------------------------\r
+ * COMIC_ELEMENT_CONTROL\r
+ *  - mouseEventListener\r
+ */\r
        var COMIC_ELEMENT_CONTROL = ( function(){\r
-               var     SAVE = HISTORY.saveState,\r
+               var     SAVE = HISTORY_CONTROL.saveState,\r
                        ELM_CONTAINER = document.getElementById( 'comic-element-container'),\r
                        currentElement = null,\r
                        currentLockTest = false,\r
                        currentLock = false,\r
                        panelX, panelY, panelW, panelH,\r
                        startX, startY;\r
-       \r
        /*\r
         * append, remove, replace\r
         * \r
@@ -3026,53 +2530,52 @@ pettanr.editor = ( 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
@@ -3082,19 +2585,19 @@ pettanr.editor = ( 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
@@ -3117,21 +2620,25 @@ pettanr.editor = ( function(){
                \r
                return {\r
                        init: function(){\r
-                               \r
-                               appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));\r
-                               appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));\r
-                       /*\r
-                        * \r
-                        */\r
                                log = $( '#operation-catcher-log');\r
                                \r
                                delete COMIC_ELEMENT_CONTROL.init;\r
                        },\r
+                       open: function(){\r
+                               COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();\r
+                       },\r
+                       close: function(){\r
+                               var _comicElm;\r
+                               while( COMIC_ELEMENT_ARRAY.length > 0){\r
+                                       _comicElm = COMIC_ELEMENT_ARRAY.shift();\r
+                                       _comicElm.destroy && _comicElm.destroy();\r
+                               }\r
+                       },\r
                        remove: removeComicElement,\r
                        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
@@ -3153,7 +2660,7 @@ pettanr.editor = ( 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
@@ -3161,12 +2668,12 @@ pettanr.editor = ( 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
@@ -3175,18 +2682,19 @@ pettanr.editor = ( 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
@@ -3208,32 +2716,62 @@ pettanr.editor = ( 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
+                       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
+                               var _comicElement;\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
+                                       _comicElement = new TextElementClass( data );\r
+                                       _comicElement.init();\r
+                                       pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _comicElement, onTextInput );\r
+                               } else {\r
+                                       _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
@@ -3284,7 +2822,7 @@ pettanr.editor = ( 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
@@ -3341,7 +2879,7 @@ pettanr.editor = ( 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
@@ -3369,91 +2907,812 @@ pettanr.editor = ( function(){
                return false;\r
        }\r
 \r
-       return {\r
-               init: function( _option){\r
-                       option = _option;\r
-               },\r
-               firstOpen: function(){\r
-                       var jqWindow = pettanr.jqWindow();\r
-                       windowW = jqWindow.width();\r
-                       windowH = jqWindow.height();\r
-                       \r
-                       jqEditor = $( '#editor');\r
-\r
+       /* grobal method */\r
+       this.rootElement = document.getElementById( 'editor' );\r
+       this.displayName = pettanr.view.EDITOR;\r
+       this.ID          = pettanr.view.EDITOR;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.firstOpen = function(){\r
+       /*\r
+        * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初\r
+        * MENU_BAR_CONTROL,\r
+        * WINDOW_CONTROL,\r
+        * COMIC_ELEMENT_CONTROL,\r
+        * PANEL_CONTROL\r
+        * .busy() === true なら、そのままonMouseMove()にイベントを流す.\r
+        * 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
+        * centering\r
+        */\r
+               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);  // ctrl + 0\r
+               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);  // ctrl + 0\r
+               MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
+       /*\r
+        * jqMouseEventChacher は透明な要素で、\r
+        * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
+        * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。\r
+        */                     \r
+               jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)\r
+                       .mousemove( mouseEventRellay)\r
+                       .mousedown( mouseEventRellay)\r
+                       .mouseup( mouseEventRellay)\r
+                       .mouseout( mouseEventRellay);\r
+               \r
+               delete instance.firstOpen;\r
+       }\r
+       this.onOpen = function( _w, _h, _file ){\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
+                                       fileData = _file.read();\r
+                                       panelW = fileData.width;\r
+                                       panelH = fileData.height;\r
+                               } else\r
+                               if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL ){\r
+                                       fileData = _file.read();\r
+                                       panelW = fileData.width;\r
+                                       panelH = fileData.height;\r
+                                       borderSize = fileData.border;\r
+                                       panelElements = fileData.panel_elements;\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
+                               \r
+                       }\r
+               }\r
+               jqEditor = jqEditor || $( '#editor');\r
+               \r
+               HISTORY_CONTROL.open();\r
+               \r
+               WINDOWS_CONTROL.open();\r
+               \r
+               GRID_CONTROL.open();\r
+               PANEL_CONTROL.open( panelW, panelH, borderSize );\r
+               \r
+               COMIC_ELEMENT_OPERATION_MANAGER.open();\r
+               COMIC_ELEMENT_CONTROL.open();\r
+               \r
+               instance.firstOpen !== undefined && instance.firstOpen();\r
+               \r
+               // last\r
+               MENU_BAR_CONTROL.open();\r
+               \r
+               windowW = _w;\r
+               windowH = _h;\r
+               instance.onPaneResize( _w, _h );\r
+       }\r
+       this.onClose = function(){\r
+               HISTORY_CONTROL.close();\r
+               \r
+               WINDOWS_CONTROL.close();\r
+               \r
+               GRID_CONTROL.close();\r
+               PANEL_CONTROL.close();\r
+               \r
+               COMIC_ELEMENT_OPERATION_MANAGER.close();\r
+               COMIC_ELEMENT_CONTROL.close();\r
+               \r
+               // last\r
+               MENU_BAR_CONTROL.open();\r
+       }\r
+       this.onPaneResize = function( _windowW, _windowH){\r
+               windowW = _windowW || windowW;\r
+               windowH = _windowH || windowH;\r
+               if( instance.firstOpen) return;\r
                /*\r
-                * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初\r
-                * MENU_BAR_CONTROL,\r
-                * WINDOW_CONTROL,\r
-                * COMIC_ELEMENT_CONTROL,\r
-                * PANEL_CONTROL\r
-                * .busy() === true なら、そのままonMouseMove()にイベントを流す.これはArrayの後ろから、奥の表示要素から\r
-                * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す.\r
+                * ieは +'px'が不要みたい\r
                 */\r
-                       MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
+               jqEditor.get( 0).style.height = _windowH +'px';\r
+               ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
+               \r
+               WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
+               MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
+               PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
+       }\r
+});\r
 \r
-                       HISTORY.init();\r
-                       \r
-                       WINDOWS_CONTROL.init();\r
-                       \r
-                       GRID_CONTROL.init();\r
-                       PANEL_CONTROL.init();\r
-                       CONSOLE_CONTROLER.init();\r
-                       COMIC_ELEMENT_OPERATION_MANAGER.init();\r
-                       COMIC_ELEMENT_CONTROL.init();\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
+               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, _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
+                       }\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
-                       // last\r
-                       MENU_BAR_CONTROL.init();\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
+       function onCreateIframe( _iframe ){\r
+               elmUploader.appendChild( _iframe );\r
+               elmIframe = _iframe;\r
+               elmForm.target = _iframe.name;\r
+               elmProgress.innerHTML = '';\r
+       }\r
+\r
+       /* grobal method */\r
+       this.rootElement = document.getElementById( 'comic-console-wrapper' );\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               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.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
+               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
+               if( timer !== null){\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+               }\r
+               \r
+               jqWrap.hide();\r
+       }\r
+});\r
+\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
+                               setTimeout( clickCancel , 3000);\r
+                               return;\r
+                       }\r
                        \r
-                       OUTPUT_CONSOLE.init();\r
-                       TEXT_EDITOR_CONTROL.init();\r
-                       IMAGE_GROUP_EXPROLER.init();\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
+               }\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 = document.getElementById( 'upload-console-wrapper' );\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               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.onOpen = function( w, h){\r
+               instance.init && instance.init();\r
                /*\r
-                * centering\r
-                */\r
-                       pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);  // ctrl + 0\r
-                       pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);  // ctrl + 0\r
-                       MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
-               /*\r
-                * jqMouseEventChacher は透明な要素で、\r
-                * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
-                * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。\r
-                */                     \r
-                       jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)\r
-                               .mousemove( mouseEventRellay)\r
-                               .mousedown( mouseEventRellay)\r
-                               .mouseup( mouseEventRellay)\r
-                               .mouseout( mouseEventRellay);\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
+\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
+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
+                               setTimeout( clickCancel , 3000);\r
+                               return;\r
+                       }\r
                        \r
-                       delete pettanr.editor.firstOpen;\r
-               },\r
-               onOpen: function( _option){\r
-                       pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
-\r
-                       // HISTORY.onOpen();\r
-                       // WINDOWS_CONTROL.onOpen();\r
-                       // COMIC_ELEMENT_CONTROL.onOpen();\r
-                       // MENU_BAR_CONTROL.onOpen();\r
-                       // TEXT_EDITOR_CONTROL.onOpen();\r
-                       // IMAGE_GROUP_EXPROLER.onOpen();\r
-               },\r
-               onClose: function(){\r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-                       windowW = _windowW;\r
-                       windowH = _windowH;\r
-                       if( pettanr.editor.firstOpen) return;\r
-                       /*\r
-                        * ieは +'px'が不要みたい\r
-                        */\r
-                       jqEditor.get( 0).style.height = _windowH +'px';\r
-                       ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\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
+               }\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 = document.getElementById( 'panel-console-wrapper' );\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               jqWrap = $( '#panel-console-wrapper').hide();\r
+               $( '#panel-console-post-button').click( clickOK );\r
+               $( '#panel-console-cancel-button').click( clickCancel );\r
+\r
+               delete instance.init;\r
+       }\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.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
+               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 = 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
+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
-                       WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
-                       MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
-                       PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
-               },\r
-               MIN_WIDTH:      320,\r
-               MIN_HEIGHT:     320\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
+               }\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 = document.getElementById( 'artist-console-wrapper' );\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               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.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
+               );\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
+               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
+               pettanr.outputConsole.shutdown();\r
+       }\r
+       \r
+       /* grobal method */\r
+       this.rootElement = document.getElementById( 'output-console-wrapper' );\r
+       this.displayName = ID;\r
+       this.ID          = ID;\r
+       \r
+       this.MIN_WIDTH   = 320;\r
+       this.MIN_HEIGHT  = 320;\r
+       this.init = function(){\r
+               jqWrap = $( '#output-console-wrapper').hide();\r
+               jqOutputArea = $( '#output-area');\r
+               delete instance.init;\r
+       }\r
+       this.onOpen = function( _w, _h, _text ){\r
+               instance.init && instance.init();\r
+               \r
+               jqWrap.show();\r
+               instance.onPaneResize( _w, _h );\r
+               jqOutputArea.val( _text).focus();\r
+       }\r
+       this.onPaneResize = 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
+});\r