OSDN Git Service

fixed overlay.hide()
[pettanr/pettanr.git] / public / assets / work.js
index 1cdf898..8433a9a 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR work.js\r
- *   version 0.4.6\r
+ *   version 0.4.21\r
  *   \r
  * author:\r
  *   itozyun\r
@@ -37,8 +37,6 @@
  *    - MENU_BAR_CONTROL\r
  *    - HISTORY_CONTROL\r
  *    - SAVE_CONTROL\r
- *    - TEXT_EDITOR_CONTROL\r
- *    - IMAGE_GROUP_EXPROLER\r
  *    - WINDOW_CONTROL\r
  *       - WindowClass\r
  *    - INFOMATION_WINDOW\r
  * \r
  * \r
  */\r
-pettanr.editor = ( function(){\r
+pettanr.editor = pettanr.view.registerApplication( function(){\r
 \r
-       var COMIC_ELEMENT_TYPE_IMAGE = 0,\r
-               COMIC_ELEMENT_TYPE_TEXT = 1,\r
+       var PANEL_ELEMENT_TYPE_IMAGE = 0,\r
+               PANEL_ELEMENT_TYPE_TEXT = 1,\r
                MOUSE_LISTENER_ARRAY = [],\r
                COMIC_ELEMENT_ARRAY = [],\r
                ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
@@ -82,6 +80,7 @@ pettanr.editor = ( function(){
                windowW, windowH,\r
                currentListener = null,\r
                currentCursor = '',\r
+               instance = this,\r
                option,\r
                log;\r
 \r
@@ -358,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
@@ -409,58 +408,6 @@ pettanr.editor = ( function(){
                }\r
        })();\r
 \r
-\r
-/* ----------------------------------------\r
- * OUTPUT_CONSOLE\r
- *  - overlay\r
- */\r
-       var OUTPUT_CONSOLE = ( function(){\r
-               var jqWrap, jqOutputArea,\r
-                       ID = 'outputConsole';\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function close(){\r
-                       jqWrap.hide();\r
-                       jqOutputArea.val('');\r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\r
-                       close();                        \r
-               }\r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
-                               jqOutputArea = $( '#output-area');\r
-                               delete OUTPUT_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _text){\r
-                               jqWrap.show();\r
-\r
-                               \r
-                               pettanr.overlay.show( this);\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );                              \r
-                               \r
-                               jqOutputArea.val( _text).focus();\r
-                       },\r
-                       onWindowResize: function(){\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );\r
-                       },\r
-                       onClose: close,\r
-                       ID: 'textEditor'\r
-               }\r
-       })();\r
-\r
 /* ----------------------------------------\r
  * SAVE_CONTROL\r
  *  - controler\r
@@ -475,23 +422,23 @@ pettanr.editor = ( function(){
                \r
                function quit(){\r
                        // 本来は os.application.close();\r
-                       pettanr.view.show( 'entrance');\r
+                       pettanr.editor.shutdown();\r
                }\r
                \r
                function outputAsHtml(){\r
-                       OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
+                       pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
                }\r
                function outputAsJsonString(){\r
-                       OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
+                       pettanr.outputConsole.bootInOverlay( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
                }\r
                return {\r
                        open: function(){},\r
                        close: function(){},\r
                        quit: quit,\r
                        panelUpdated: function( _updated){\r
-                               if( _updated !== undefined && updated !== _updated){\r
-                                       SAVE.visible( !!_updated);\r
-                                       SAVE_AND_QUIT.visible( !!_updated);\r
+                               if( _updated !== undefined && updated !== _updated ){\r
+                                       SAVE.visible( !!_updated );\r
+                                       SAVE_AND_QUIT.visible( !!_updated );\r
                                        updated = !!_updated;\r
                                }\r
                                return updated;\r
@@ -503,469 +450,6 @@ pettanr.editor = ( function(){
        })();\r
 \r
 /* ----------------------------------------\r
- * Text Editor\r
- *  - overlay\r
- */\r
-       var TEXT_EDITOR_CONTROL = ( function(){\r
-               var jqWrap, jqTextarea, jqButton,\r
-                       textElement, onUpdateFunction,\r
-                       ID = 'textEditor';\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function close(){\r
-                       jqWrap.hide();\r
-                       textElement = onUpdateFunction = null;          \r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\r
-                       textElement && textElement.text( jqTextarea.val());\r
-                       onUpdateFunction && onUpdateFunction( textElement);\r
-                       close();                        \r
-               }\r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
-                               jqTextarea = $( '#speach-editor').keydown( function( e){\r
-                                       if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
-                                               clickOK();\r
-                                               e.preventDefault();\r
-                                       e.keyCode = 0;\r
-                                       e.cancelBubble = true;\r
-                                       e.returnValue = false;\r
-                                               return false;\r
-                                       }\r
-                               });\r
-                               jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
-                               delete TEXT_EDITOR_CONTROL.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _textElement, _onUpdateFunction){\r
-                               textElement = _textElement;\r
-                               onUpdateFunction = _onUpdateFunction || null;\r
-                               pettanr.overlay.show( this);\r
-                               var h = _textElement.h;\r
-                               jqWrap.show().css( {\r
-                                       left:                   _textElement.x +PANEL_CONTROL.x(),\r
-                                       top:                    _textElement.y +PANEL_CONTROL.y(),\r
-                                       width:                  _textElement.w,\r
-                                       height:                 h\r
-                               });\r
-                               jqTextarea.val( _textElement.text()).focus();\r
-                               \r
-                               /*\r
-                                * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。\r
-                                */\r
-                               pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){\r
-                                       var rows = 0;\r
-                                       while( jqTextarea.height() < h){\r
-                                               rows++;\r
-                                               jqTextarea.attr( 'rows', rows);\r
-                                       }\r
-                                       rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
-                               }, 0);\r
-                       },\r
-                       onWindowResize: function(){\r
-                               textElement && this.show( textElement);\r
-                       },\r
-                       onClose: close,\r
-                       ID: ID\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * Image Group Exproler\r
- *  - overlay\r
- */\r
-       var IMAGE_GROUP_EXPROLER = ( function(){\r
-               var ICON_ARRAY = [],\r
-                       WHEEL_DELTA = 64,\r
-                       containerW, containerH, wrapX,\r
-                       jqWrap, jqContainer, jqItemOrigin,\r
-                       itemW, itemH,\r
-                       jqName, jqButton, buttonW,\r
-                       //onUpdateFunction,\r
-                       _g_onUpdateFunction,\r
-                       winW,\r
-                       onEnterInterval = null;\r
-               \r
-               var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',\r
-                       THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
-                       LIMIT_FILESIZE = 1024 * 10; // 10KB\r
-               var IMAGE_DATA = {\r
-                               pen001: [\r
-                                   {\r
-                                       "created_at": "2011-11-13T08:57:39Z", \r
-                                       "ext": "png", \r
-                                       "filesize": 9969, \r
-                                       "height": 463, \r
-                                       "id": 1, \r
-                                       "updated_at": "2011-11-13T08:57:39Z", \r
-                                       "width": 441\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:57:54Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 5418, \r
-                                       "height": 500, \r
-                                       "id": 2, \r
-                                       "updated_at": "2011-11-13T08:57:54Z", \r
-                                       "width": 500\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:06Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 8758, \r
-                                       "height": 464, \r
-                                       "id": 3, \r
-                                       "updated_at": "2011-11-13T08:58:06Z", \r
-                                       "width": 366\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:23Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 9383, \r
-                                       "height": 480, \r
-                                       "id": 4, \r
-                                       "updated_at": "2011-11-13T08:58:23Z", \r
-                                       "width": 392\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:33Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 11061, \r
-                                       "height": 500, \r
-                                       "id": 5, \r
-                                       "updated_at": "2011-11-13T08:58:33Z", \r
-                                       "width": 500\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T09:50:43Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 1131, \r
-                                       "height": 126, \r
-                                       "id": 6, \r
-                                       "updated_at": "2011-11-20T09:50:43Z", \r
-                                       "width": 259\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T09:50:55Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 1125, \r
-                                       "height": 126, \r
-                                       "id": 7, \r
-                                       "updated_at": "2011-11-20T09:50:55Z", \r
-                                       "width": 259\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 8, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 9, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 10, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 11, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-22T09:17:20Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 9055, \r
-                                       "height": 473, \r
-                                       "id": 12, \r
-                                       "updated_at": "2011-11-22T09:17:20Z", \r
-                                       "width": 405\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-22T10:11:07Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 8758, \r
-                                       "height": 464, \r
-                                       "id": 13, \r
-                                       "updated_at": "2011-11-22T10:11:07Z", \r
-                                       "width": 366\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-24T09:05:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 6431, \r
-                                       "height": 386, \r
-                                       "id": 16, \r
-                                       "updated_at": "2011-11-24T09:05:12Z", \r
-                                       "width": 453\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 17, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 18, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 19, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 20, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 21, \r
-                                       "updated_at": "2011-11-26T04:52:12Z",\r
-                                       "width": 306\r
-                                   }\r
-                               ]\r
-                       }\r
-               \r
-               var ImageGroupIconClass = function( INDEX, data){\r
-                       var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
-                               SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
-                               LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
-                               reversibleImage = null,\r
-                               onEnterFlag = false,\r
-                               imgW, imgH;\r
-                       JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
-                       jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
-                       \r
-                       function onImageLoad( url, _imgW, _imgH){\r
-                               if( reversibleImage === null) {\r
-                                       alert( url);\r
-                                       return;\r
-                               }\r
-                               imgW = _imgW || data.width || 64;\r
-                               imgH = _imgH || data.height || 64;\r
-                               JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
-                               var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
-                                       h = Math.floor( imgH *zoom),\r
-                                       w = Math.floor( imgW *zoom);\r
-                               reversibleImage.elm.style.width = w +'px';\r
-                               reversibleImage.elm.style.height = h +'px';\r
-                               reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
-                               reversibleImage.resize( w, h);\r
-                               JQ_ICON_WRAP.click( onClick);\r
-                       }\r
-                       \r
-                       function onClick( e){\r
-                               pettanr.overlay.hide();\r
-                               if( _g_onUpdateFunction) {\r
-                                       if( LOW_SRC === null){\r
-                                               window[ _g_onUpdateFunction]( SRC, imgW, imgH);\r
-                                               window[ _g_onUpdateFunction] = null;\r
-                                       } else {\r
-                                               var _onLoad = pettanr.util.createGlobalFunc( [\r
-                                                               'function( url, w, h){',\r
-                                                                       'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',\r
-                                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
-                                                               '}'\r
-                                                       ].join( '')),\r
-                                                       _onError = pettanr.util.createGlobalFunc( [\r
-                                                               'function( url){',\r
-                                                                       'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',\r
-                                                                       'window["', _g_onUpdateFunction, '"] = null;',\r
-                                                               '}'\r
-                                                       ].join( ''));\r
-                                               pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);\r
-                                               window[ _onLoad] = window[ _onError] = undefined;\r
-                                       }\r
-                               }\r
-                               close();\r
-                       }\r
-                       \r
-                       return {\r
-                               onEnter: function(){\r
-                                       if( onEnterFlag === true) return;\r
-                                       reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);\r
-                                       JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
-                                       onEnterFlag = true;                                             \r
-                               },\r
-                               destroy: function(){\r
-                                       reversibleImage && reversibleImage.destroy();\r
-                                       JQ_ICON_WRAP.remove();\r
-                                       reversibleImage = JQ_ICON_WRAP = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               }\r
-               \r
-               function close(){\r
-                       jqContainer.stop().animate( {\r
-                                       height: 0,\r
-                                       top:    Math.floor( windowH /2)\r
-                               }, function(){\r
-                                       jqWrap.hide()\r
-                               });\r
-                       while( ICON_ARRAY.length > 0){\r
-                               ICON_ARRAY.shift().destroy();\r
-                       }\r
-                       onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                       onEnterInterval = _g_onUpdateFunction = null;\r
-               }\r
-               function onEnterShowImage(){\r
-                       var l = ICON_ARRAY.length,\r
-                               _start = -wrapX /itemW -1,\r
-                               _end = _start + winW /itemW +1;\r
-                       for( var i=0; i<l; ++i){\r
-                               _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
-                       }\r
-                       onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                       onEnterInterval = null;\r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\r
-                       close();\r
-               }\r
-               function onMouseWheel( e, delta){\r
-                       if( winW < containerW){\r
-                               wrapX += delta *WHEEL_DELTA;\r
-                               wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
-                               jqContainer.css( { left: wrapX});\r
-                               \r
-                               onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                               onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
-                       }\r
-                       //e.stopPropagation();\r
-                       return false;                   \r
-               }\r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
-                               jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);\r
-                               containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;\r
-                               jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
-                               var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));\r
-                               itemW = itemSize.width;\r
-                               itemH = itemSize.height;\r
-                               jqName = $( '#gruop-name-display');\r
-                               jqButton = $( '#image-gruop-button').click( clickOK);\r
-                               buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
-                               \r
-                               delete IMAGE_GROUP_EXPROLER.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _onUpdateFunction){\r
-                               //onUpdateFunction = _onUpdateFunction;\r
-                               if( _onUpdateFunction){\r
-                                       _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);\r
-                               } else {\r
-                                       _g_onUpdateFunction = null;\r
-                               }\r
-                               pettanr.overlay.show( this);\r
-                               \r
-                               var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
-                                       l = CURRENT_GROUP_ARRAY.length;\r
-                               for( var i=0; i<l; ++i){\r
-                                       ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));\r
-                               }\r
-                               wrapX = 0;\r
-                               containerW = l * itemW;\r
-                               \r
-                               winW = windowW;\r
-                               var w = winW > containerW ? winW : containerW,\r
-                                       h = windowH > containerH ? containerH : windowH;\r
-                               \r
-                               jqWrap.show();\r
-                               jqContainer.css( {\r
-                                       width:          w,\r
-                                       height:         0,\r
-                                       left:           0,\r
-                                       top:            Math.floor( windowH /2)\r
-                               }).stop().animate( {\r
-                                       height:         h,\r
-                                       top:            Math.floor( windowH /2 -h /2)\r
-                               });\r
-                               \r
-                               jqButton.css( {\r
-                                       left:           Math.floor( winW /2 -buttonW /2),\r
-                                       top:            Math.floor( windowH /2 +containerH /2 +10)\r
-                               });\r
-                               \r
-                               onEnterShowImage();\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               var w = _windowW > containerW ? _windowW : containerW,\r
-                                       h = _windowH > containerH ? containerH : _windowH,\r
-                                       offsetW = Math.floor( _windowW /2 -winW /2);\r
-                               winW = _windowW;\r
-                               if( offsetW <= 0){ // smaller\r
-                                       jqContainer.css( {\r
-                                               left:                           offsetW,\r
-                                               width:                          w\r
-                                       }).animate( {\r
-                                               left:                           0,\r
-                                               top:                            Math.floor( _windowH /2 -h /2)\r
-                                       });                                     \r
-                               } else {\r
-                                       jqContainer.css( { // bigger\r
-                                               left:                           0,\r
-                                               width:                          w,\r
-                                               borderLeftWidth:        offsetW\r
-                                       }).animate( {\r
-                                               top:                            Math.floor( _windowH /2 -h /2),\r
-                                               borderLeftWidth:        0\r
-                                       });\r
-                               }\r
-                               jqButton.css( {\r
-                                       left:           Math.floor( _windowW /2 -buttonW /2),\r
-                                       top:            Math.floor( _windowH /2 +containerH /2 +10)\r
-                               });\r
-                               onEnterShowImage();\r
-                       },\r
-                       onClose: close,\r
-                       ID: 'imageGroupExproler'\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
  * WINDOWS_CONTROL\r
  *  - contloler\r
  *  - mouseEventListener\r
@@ -1396,15 +880,12 @@ pettanr.editor = ( function(){
                                        instance = this;\r
                                        delete this.onInit;\r
                                },\r
-                               onFirstOpen: function( _w, _h){\r
-                                       finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
-                                       delete this.onFirstOpen;\r
-                               },\r
                                onOpen: function( _w, _h){\r
-                                       finder.onOpen( _w, _h);\r
+                                       finder = finder || pettanr.finder.createFinder( 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
@@ -1462,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
@@ -1762,12 +1243,12 @@ pettanr.editor = ( function(){
                }\r
                \r
                return {\r
-                       open: function( _panelW, _panelH, _borderSize){\r
-                               panelW = _panelW || DEFAULT_PANEL_WIDTH;\r
-                               panelH = _panelH || DEFAULT_PANEL_HEIGHT;\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 = _borderSize !== undefined ? _borderSize : borderSize;\r
+                               borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;\r
                                \r
                                //setTimeout( PANEL_CONTROL.resize, 0);\r
                        },\r
@@ -1853,66 +1334,64 @@ pettanr.editor = ( function(){
                        }\r
                }\r
                        \r
-               return {\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               var _x = _mouseX -panelX,\r
-                                       _y = _mouseY -panelY;\r
+               this.onMouseDown = function( _mouseX, _mouseY){\r
+                       var _x = _mouseX -panelX,\r
+                               _y = _mouseY -panelY;\r
+                       if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
+                       offsetY = _y;\r
+                       startY = panelY;\r
+                       startH = panelH;\r
+                       isDragging = true;\r
+                       MOUSE_CURSOR( 'n-resize');\r
+                       return true;\r
+               }\r
+               this.onMouseMove = function( _mouseX, _mouseY){\r
+                       var _x = _mouseX -panelX,\r
+                               _y = _mouseY -panelY;\r
+                       if( isDragging !== true){\r
                                if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
-                               offsetY = _y;\r
-                               startY = panelY;\r
-                               startH = panelH;\r
-                               isDragging = true;\r
-                               MOUSE_CURSOR( 'n-resize');\r
+                               COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
+                               MOUSE_CURSOR( 'pointer');\r
                                return true;\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               var _x = _mouseX -panelX,\r
-                                       _y = _mouseY -panelY;\r
-                               if( isDragging !== true){\r
-                                       if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
-                                       COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
-                                       MOUSE_CURSOR( 'pointer');\r
-                                       return true;\r
+                       } else {\r
+                               var move = _y -offsetY;\r
+                               if( isTop === true){\r
+                                       if( panelH - move < MIN_PANEL_HEIGHT){\r
+                                               move = panelH -MIN_PANEL_HEIGHT;\r
+                                       }\r
+                                       PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
                                } else {\r
-                                       var move = _y -offsetY;\r
-                                       if( isTop === true){\r
-                                               if( panelH - move < MIN_PANEL_HEIGHT){\r
-                                                       move = panelH -MIN_PANEL_HEIGHT;\r
-                                               }\r
-                                               PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
-                                       } else {\r
-                                               var _h = startH +move;\r
-                                               if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
-                                                       PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
-                                               }\r
+                                       var _h = startH +move;\r
+                                       if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
+                                               PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
                                        }\r
                                }\r
-                               return true;\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               if( isDragging !== true) return;\r
-                               ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
-                               isDragging = false;\r
-                               MOUSE_CURSOR( '');\r
-                       },\r
-                       busy: function(){\r
-                               return isDragging\r
-                       },\r
-                       onPanelResize: function( _x, _y, _w, _h){\r
-                               panelX = _x;\r
-                               panelY = _y;\r
-                               if( panelW !== _w){\r
-                                       ELM.style.width = ( _w +2) +'px';\r
-                                       panelW = _w;\r
-                               }\r
-                               panelH = _h;\r
-                               y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
-                               w = panelW +2;\r
                        }\r
+                       return true;\r
+               }\r
+               this.onMouseUp = function( _mouseX, _mouseY){\r
+                       if( isDragging !== true) return;\r
+                       ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
+                       isDragging = false;\r
+                       MOUSE_CURSOR( '');\r
+               }\r
+               this.busy = function(){\r
+                       return isDragging\r
+               }\r
+               this.onPanelResize = function( _x, _y, _w, _h){\r
+                       panelX = _x;\r
+                       panelY = _y;\r
+                       if( panelW !== _w){\r
+                               ELM.style.width = ( _w +2) +'px';\r
+                               panelW = _w;\r
+                       }\r
+                       panelH = _h;\r
+                       y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
+                       w = panelW +2;\r
                }\r
        };\r
-       var     PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),\r
-               PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);\r
+       var     PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ),\r
+               PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );\r
                \r
        PanelResizerClass = undefined;\r
 \r
@@ -1984,14 +1463,17 @@ pettanr.editor = ( function(){
                        COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
                }\r
                function edit(){\r
-                       if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;\r
-                       TEXT_EDITOR_CONTROL.show( currentElement);\r
+                       if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;\r
+                       pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), currentElement );\r
                        buttonBackOrForward( true);\r
                }\r
                function change(){\r
                        if( currentElement === null) return;\r
                        buttonBackOrForward( true);\r
-                       IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
+                       pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture );\r
+               }\r
+               function onImageSelect( resourcePicture ){\r
+                       currentElement.resourcePicture( resourcePicture );\r
                }\r
                return {\r
                        init: function(){\r
@@ -2018,7 +1500,9 @@ pettanr.editor = ( function(){
                                                                                        \r
                                delete CONSOLE_CONTROLER.init;\r
                        },\r
-                       show: function( _currentElement, _w, _h){\r
+                       show: function( _currentElement, _w, _h ){\r
+                               CONSOLE_CONTROLER.init && CONSOLE_CONTROLER.init();\r
+                               \r
                                visible === false && jqConsoleWrapper.show();\r
                                visible = true;\r
                                currentElement = _currentElement;\r
@@ -2026,17 +1510,17 @@ pettanr.editor = ( function(){
                                        _z = _currentElement.z;\r
                                if( currentType !== _currentType){\r
                                        currentType = _currentType;\r
-                                       jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
-                                       jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
-                                       consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
-                                       consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
+                                       jqImgConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_IMAGE);\r
+                                       jqTextConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_TEXT);\r
+                                       consoleWidth = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
+                                       consoleHeight = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
                                }\r
                                consoleX = Math.floor( ( _w -consoleWidth) /2);\r
                                \r
                                LAYER_BACK_BUTTON.visible( _z > 0);\r
                                LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
                                DELETE_BUTTON.visible( true);\r
-                               EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
+                               EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT);\r
                                CHANGE_BUTTON.visible( false);\r
                                \r
                                if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
@@ -2134,7 +1618,7 @@ pettanr.editor = ( 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
@@ -2291,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
@@ -2300,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
@@ -2314,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
@@ -2323,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
@@ -2333,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
@@ -2386,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
@@ -2454,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
@@ -2560,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
@@ -2606,7 +2090,7 @@ pettanr.editor = ( function(){
                                        _a = arg[ 5],\r
                                        _flipV = arg[ 6], _flipH = arg[ 7];\r
                                if( !_currentElement && !currentOperator) return;\r
-                               _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
+                               _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?\r
                                        _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
                                        _currentElement.animate( _x, _y, _w, _h, _a);\r
                                currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
@@ -2629,7 +2113,7 @@ pettanr.editor = ( function(){
                        busy: function(){\r
                                return currentOperator !== null;\r
                        },\r
-                       hitTest: function( _mouseX, _mouseY, _comicElement){\r
+                       hitTest: function( _mouseX, _mouseY, _comicElement ){\r
                                var _x, _y, _w, _h;\r
                                if( _comicElement === currentElement){\r
                                        var _consoleX = CONSOLE_CONTROLER.x();\r
@@ -2645,6 +2129,7 @@ pettanr.editor = ( function(){
                                        _w = _comicElement.w +HIT_AREA *2;\r
                                        _h = _comicElement.h +HIT_AREA *2;\r
                                }\r
+                               log.html( [ _x, _y, _w, _h ].join( ' ') );\r
                                return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;\r
                        },\r
                        onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
@@ -2681,33 +2166,25 @@ pettanr.editor = ( function(){
         *  // COMIC_ELEMENT_OPERATION_MANAGER\r
         */\r
 \r
-       var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
-               var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;\r
-               return {\r
-                       $: JQ_WAPPER,\r
-                       type: COMIC_ELM_TYPE,\r
-                       x: x,\r
-                       y: y,\r
-                       w: w,\r
-                       h: h,                                   \r
-                       z: z,\r
-                       timing: timing,\r
-                       hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest(  _mouseX, _mouseY, this);},\r
-                       shift: function( _shiftX, _shiftY){\r
-                               update( this.x +_shiftX, this.y +_shiftY);\r
-                       },\r
-                       busy: function(){\r
-                               return OPERATOR.busy();\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
-                       },\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
-                       }\r
+       var AbstractComicElement = function( COMIC_ELM_TYPE ){\r
+               this.type = COMIC_ELM_TYPE;\r
+               this.hitTest = function( _mouseX, _mouseY ){\r
+                       return COMIC_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );\r
+               }\r
+               this.shift = function( _shiftX, _shiftY ){\r
+                       this.resize( this.x + _shiftX, this.y + _shiftY);\r
+               }\r
+               this.busy = function(){\r
+                       return COMIC_ELEMENT_OPERATION_MANAGER.busy();\r
+               }\r
+               this.onMouseMove = function( _mouseX, _mouseY ){\r
+                       COMIC_ELEMENT_OPERATION_MANAGER.onMouseMove( this, _mouseX, _mouseY );\r
+               }\r
+               this.onMouseUp = function( _mouseX, _mouseY ){\r
+                       COMIC_ELEMENT_OPERATION_MANAGER.onMouseUp( this, _mouseX, _mouseY );\r
+               }\r
+               this.onMouseDown = function( _mouseX, _mouseY ){\r
+                       COMIC_ELEMENT_OPERATION_MANAGER.onMouseDown( this, _mouseX, _mouseY );\r
                }\r
        };\r
 \r
@@ -2715,131 +2192,140 @@ pettanr.editor = ( function(){
  * ImageElementClass\r
  */\r
        var     jqImageElementOrigin;\r
-       var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){\r
+       var ImageElementClass = function( data ){\r
                jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
                \r
-               var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
-                       OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
+               var JQ_WRAPPER = jqImageElementOrigin.clone( true ),\r
                        SAVE = HISTORY_CONTROL.saveState,\r
                        HIT_AREA = MOUSE_HIT_AREA,\r
-                       reversibleImage = null,\r
-                       actualW = 0, actualH = 0,\r
+                       w = data.width,\r
+                       h = data.height,\r
+                       x, y, z, timing,\r
                        flipH = w < 0 ? -1 : 1,\r
                        flipV = h < 0 ? -1 : 1,\r
-                       instance;\r
-               w = Math.floor( w);\r
-               h = Math.floor( h);\r
-               \r
-               function update( _x, _y, _w, _h, animate){\r
+                       resourcePicture,\r
+                       actualW,\r
+                       actualH,\r
+                       reversibleImage = null,\r
+                       instance = this;\r
+               w = Math.floor( w );\r
+               h = Math.floor( h );\r
+\r
+               function onAnimeComplete(){\r
+                       reversibleImage.resize( flipH * w, flipV * h );\r
+               }\r
+               function updateResourcePicture( _resourcePicture ){\r
+                       resourcePicture = _resourcePicture;\r
+                       \r
+                       actualW = _resourcePicture.width;\r
+                       actualH = _resourcePicture.height;\r
+                       \r
+                       var _reversibleImage = pettanr.image.createReversibleImage( \r
+                               [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),\r
+                               flipH * w, flipV * h\r
+                       );\r
+                       if( reversibleImage !== null){\r
+                               JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );\r
+                               reversibleImage.destroy();\r
+                       } else {\r
+                               JQ_WRAPPER.append( _reversibleImage.elm );\r
+                       }\r
+                       reversibleImage = _reversibleImage;\r
+               }\r
+               /* global methods */\r
+               this.$ = JQ_WRAPPER;\r
+               //this.x = x;\r
+               //this.y = y;\r
+               //this.w = w;\r
+               //this.h = h;                                   \r
+               this.z = data.z;\r
+               this.timing = timing;\r
+               this.init = function(){\r
+                       updateResourcePicture( data.resource_picture );\r
+                       instance.resize( data.x, data.y, data.width, data.height );\r
+                       delete instance.init;\r
+               }\r
+               this.flip = function( _updateH, _updateV ){\r
+                       if( _updateH !== true && _updateV !== true ) return;\r
+                       flipH = _updateH === true ? -flipH : flipH;\r
+                       flipV = _updateV === true ? -flipV : flipV;\r
+                       reversibleImage.resize( flipH * w, flipV * h );\r
+               }\r
+               this.flipV = function(){\r
+                       return flipV;\r
+               }\r
+               this.flipH = function(){\r
+                       return flipH;\r
+               }\r
+               this.resourcePicture = function( _resourcePicture ){\r
+                       if( _resourcePicture && _resourcePicture !== resourcePicture ){\r
+                               SAVE( updateResourcePicture, resourcePicture, _resourcePicture );\r
+                               updateResourcePicture( _resourcePicture );\r
+                       }\r
+                       return resourcePicture;\r
+               }\r
+               this.getArtistID = function(){\r
+                       return resourcePicture.artist_id || resourcePicture.artist.id || -1;\r
+               }\r
+               this.actualW = function(){ return actualW;}\r
+               this.actualH = function(){ return actualH;}\r
+               this.keepSize = false;\r
+               this.resize = function( _x, _y, _w, _h, animate ){\r
                        instance.x = x = _x !== undefined ? _x : x;\r
                        instance.y = y = _y !== undefined ? _y : y;\r
                        instance.w = w = _w !== undefined ? _w : w;\r
                        instance.h = h = _h !== undefined ? _h : h;\r
-                       JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { \r
+                       JQ_WRAPPER[ animate === true ? 'animate' : 'css' ]( { \r
                                left:   x,\r
                                top:    y,\r
                                width:  w,\r
                                height: h\r
-                       }, 250, onAnimeComplete);\r
+                       }, 250, onAnimeComplete );\r
                        animate !== true && onAnimeComplete();\r
                }\r
-               function onAnimeComplete(){\r
-                       reversibleImage.resize( flipH * w, flipV * h);\r
-               }\r
-               \r
-               function updateUrl( _url){\r
-                       if( url === _url) return;\r
-                       url = _url || url;\r
-                       var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
-                               actualW = _actualW;\r
-                               actualH = _actualH;\r
-                       });\r
-                       if( reversibleImage !== null){\r
-                               JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
-                               reversibleImage.destroy();\r
-                       } else {\r
-                               JQ_WRAPPER.append( _reversibleImage.elm);\r
-                       }\r
-                       reversibleImage = _reversibleImage;\r
+               this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){\r
+                       flipH = _flipH !== undefined ? _flipH : flipH;\r
+                       flipV = _flipV !== undefined ? _flipV : flipV;\r
+                       instance.resize( _x, _y, _w, _h, true);\r
+               }\r
+               this.getAsHTML = function( isAbsoluteUrl, isXHTML ){\r
+                       return [\r
+                               '<img ',\r
+                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
+                                       'width="', w, '" ',\r
+                                       'height="', h, '" ',\r
+                                       'style="',                                                                      \r
+                                               'left:', x, 'px;',\r
+                                               'top:', y, 'px;',\r
+                                               'z-index:', this.z, ';',\r
+                                       '"',\r
+                               isXHTML !== true ? '>' : ' \/>'\r
+                       ].join( '');\r
+               }\r
+               this.getAsJsonString = function(){\r
+                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+                       return [\r
+                               '"new', this.timing, '": {', cr,\r
+                                       '"resource_picture_id": 1,', cr,\r
+                                       '"x": ', x, ',', cr,\r
+                                       '"y": ', y, ',', cr,\r
+                                       '"z": ', this.z, ',', cr,\r
+                                       '"width": ', w, ',', cr,\r
+                                       '"height": ', h, ',', cr,\r
+                                       '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
+                                       '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
+                                       '"t": ', this.timing, cr,\r
+                               '}'\r
+                       ].join( '');\r
+               }\r
+               this.destroy = function(){\r
+                       reversibleImage.destroy();\r
+                       JQ_WRAPPER.remove();\r
+                       JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = SAVE = null;\r
+                       delete this.destroy;\r
                }\r
-               return pettanr.util.extend(\r
-                       new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),\r
-                       {\r
-                               init: function(){\r
-                                       instance = this;\r
-                                       updateUrl();\r
-                                       update();\r
-                                       delete this.init;\r
-                               },\r
-                               flip: function( _flipH, _flipV){\r
-                                       if( _flipH !== true && _flipV !== true) return;\r
-                                       flipH = _flipH === true ? -flipH : flipH;\r
-                                       flipV = _flipV === true ? -flipV : flipV;\r
-                                       reversibleImage.resize( flipH * w, flipV * h);\r
-                               },\r
-                               flipV: function(){\r
-                                       return flipV;\r
-                               },\r
-                               flipH: function(){\r
-                                       return flipH;\r
-                               },\r
-                               url: function( _url, _actualW, _actualH){\r
-                                       if( _url && _url !== url){\r
-                                               SAVE( updateUrl, url, _url);\r
-                                               actualW = _actualW;\r
-                                               actualH = _actualH;\r
-                                               updateUrl( _url);\r
-                                       }\r
-                                       return url;\r
-                               },\r
-                               actualW: function(){ return actualW;},\r
-                               actualH: function(){ return actualH;},\r
-                               keepSize: false,\r
-                               resize: update,\r
-                               animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
-                                       flipH = _flipH !== undefined ? _flipH : flipH;\r
-                                       flipV = _flipV !== undefined ? _flipV : flipV;\r
-                                       update( _x, _y, _w, _h, true);\r
-                               },\r
-                               getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                                       return [\r
-                                               '<img ',\r
-                                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                                       'width="', w, '" ',\r
-                                                       'height="', h, '" ',\r
-                                                       'style="',                                                                      \r
-                                                               'left:', x, 'px;',\r
-                                                               'top:', y, 'px;',\r
-                                                               'z-index:', this.z, ';',\r
-                                                       '"',\r
-                                               isXHTML !== true ? '>' : ' \/>'\r
-                                       ].join( '');\r
-                               },\r
-                               getAsJsonString: function(){\r
-                                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       return [\r
-                                               '"new', this.timing, '": {', cr,\r
-                                                       '"resource_picture_id": 1,', cr,\r
-                                                       '"x": ', x, ',', cr,\r
-                                                       '"y": ', y, ',', cr,\r
-                                                       '"z": ', this.z, ',', cr,\r
-                                                       '"width": ', w, ',', cr,\r
-                                                       '"height": ', h, ',', cr,\r
-                                                       '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
-                                                       '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
-                                                       '"t": ', this.timing, cr,\r
-                                               '}'\r
-                                       ].join( '');\r
-                               },\r
-                               destroy: function(){\r
-                                       reversibleImage.destroy();\r
-                                       JQ_WRAPPER.remove();\r
-                                       JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               );\r
        }\r
+       ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );\r
 /*\r
  * / ImageElementClass\r
  * --------------------------------------------------------------------------------------------\r
@@ -2859,24 +2345,73 @@ pettanr.editor = ( function(){
  * \r
  */\r
        var jqTextElementOrigin;\r
-       var TextElementClass = function( type, a, text, x, y, z, w, h, timing){\r
+       var TextElementClass = function( data ){\r
                jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
                        var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
                                _MODERN = $( $( '#textElementTemplete').remove().html());\r
                        return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
                })();\r
                \r
-               var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
-                       XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),\r
+               var JQ_WRAPPER = jqTextElementOrigin.clone( true ),\r
                        TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
-                       OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
                        HIT_AREA = MOUSE_HIT_AREA,\r
-                       SAVE = HISTORY_CONTROL.saveState,\r
-                       instance;\r
-                       \r
-               JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
+                       SAVE     = HISTORY_CONTROL.saveState,\r
+                       type     = data.balloon_template_id,\r
+                       text     = ( function(){\r
+                               var _speachs = data.speaches_attributes;\r
+                               for( var k in _speachs ){\r
+                                       return _speachs[ k ].content || '';\r
+                               }\r
+                               return '';\r
+                       }),\r
+                       balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),\r
+                       x, y, w, h, a,\r
+                       instance = this;\r
+               \r
+               JQ_WRAPPER.find( 'img').eq( 0).replaceWith( balloon.elm );\r
+               \r
+               function updateType( _type ){\r
+                       if( type !== _type ){\r
+                               type = _type || type;\r
+                               balloon.type( type );\r
+                       }\r
+               }\r
+               function updateAngle( _a){\r
+                       if( _a !== undefined && a !== _a ){\r
+                               a = _a !== undefined ? _a : a;\r
+                               balloon.angle( a );\r
+                       }\r
+               }\r
+               function updateText( _text){\r
+                       text = _text || text || '';\r
+                       TEXT_ELM.html( text );\r
+               }\r
                \r
-               function update( _x, _y, _w, _h, _a, animate){\r
+               /* global methods */\r
+               this.$ = JQ_WRAPPER;\r
+               //this.x = x;\r
+               //this.y = y;\r
+               //this.w = w;\r
+               //this.h = h;\r
+               this.z = data.z;\r
+               this.timing = data.t;\r
+               this.init = function(){\r
+                       updateText();\r
+                       instance.resize( data.x, data.y, data.width, data.height, data.tail );\r
+                       delete instance.init;\r
+               }\r
+               this.angle = function( _a){\r
+                       _a !== undefined && instance.resize( undefined, undefined, undefined, undefined, _a);\r
+                       return a;\r
+               }\r
+               this.text = function( _text){\r
+                       if( _text && text !== _text) {\r
+                               SAVE( updateText, text || '', _text);\r
+                               updateText( _text);\r
+                       }\r
+                       return text;\r
+               }\r
+               this.resize = function( _x, _y, _w, _h, _a, animate ){\r
                        instance.x = x = _x !== undefined ? _x : x;\r
                        instance.y = y = _y !== undefined ? _y : y;\r
                        instance.w = w = _w !== undefined ? _w : w;\r
@@ -2890,117 +2425,77 @@ pettanr.editor = ( function(){
                                        height:         h\r
                                }, 250,\r
                                function(){\r
-                                       XBROWSER_BALLOON.resize( a, w, h);\r
+                                       balloon.resize( a, w, h);\r
                                }\r
                        );              \r
-                       animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
+                       animate !== true && balloon.resize( a, w, h);\r
                }\r
-               \r
-               function updateType( _type){\r
-                       if( type !== _type){\r
-                               type = _type || type;\r
-                               XBROWSER_BALLOON.type( type);\r
-                       }\r
+               this.animate = function ( _x, _y, _w, _h, _a ){\r
+                       instance.resize( _x, _y, _w, _h, _a, true);\r
                }\r
-               function updateAngle( _a){\r
-                       if( _a !== undefined && a !== _a){\r
-                               a = _a !== undefined ? _a : a;\r
-                               XBROWSER_BALLOON.angle( a);\r
-                       }\r
+               this.destroy = function(){\r
+                       JQ_WRAPPER.remove();\r
+                       balloon.destroy();\r
+                       balloon = null;\r
+                       delete instance.destroy;\r
                }\r
-               function updateText( _text){\r
-                       text = _text || text || '';\r
-                       TEXT_ELM.html( text);\r
+               this.getAsJSON = function(){\r
+                       \r
                }\r
-               \r
-               return pettanr.util.extend(\r
-                       new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),\r
-                       {\r
-                               init: function(){\r
-                                       instance = this;\r
-                                       updateText();\r
-                                       update();\r
-                                       delete this.init;\r
-                               },\r
-                               angle: function( _a){\r
-                                       _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
-                                       return a;\r
-                               },\r
-                               text: function( _text){\r
-                                       if( _text && text !== _text) {\r
-                                               SAVE( updateText, text || '', _text);\r
-                                               updateText( _text);\r
-                                       }\r
-                                       return text;\r
-                               },\r
-                               resize: update,\r
-                               animate: function ( _x, _y, _w, _h, _a){\r
-                                       update( _x, _y, _w, _h, _a, true);\r
-                               },\r
-                               destroy: function(){\r
-                                       JQ_WRAPPER.remove();\r
-                                       XBROWSER_BALLOON.destroy();\r
-                                       OPERATOR = null;\r
-                                       delete this.destroy;\r
-                               },\r
-                               getAsJSON: function(){\r
-                                       \r
-                               },\r
-                               getAsJsonString: function(){\r
-                                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       return [\r
-                                               '"new', this.timing, '": {', cr,\r
-                                                       '"balloon_template_id": ', 1, ',', cr,\r
-                                                       '"system_picture_id": ', 1, ',', cr,\r
-                                                       '"size": ', 1, ',', cr,\r
-                                                       '"tail": ', a, ',', cr,\r
+               this.getAsJsonString = function(){\r
+                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
+                       return [\r
+                               '"new', this.timing, '": {', cr,\r
+                                       '"balloon_template_id": ', 1, ',', cr,\r
+                                       '"system_picture_id": ', 1, ',', cr,\r
+                                       '"size": ', 1, ',', cr,\r
+                                       '"tail": ', a, ',', cr,\r
+                                       '"x": ', x, ',', cr,\r
+                                       '"y": ', y, ',', cr,\r
+                                       '"z": ', this.z, ',', cr,\r
+                                       '"t": ', this.timing, ',', cr,\r
+                                       '"width": ', w, ',', cr,\r
+                                       '"height": ', h, ',', cr,\r
+                                       '"speaches_attributes": {', cr,\r
+                                               '"newf', this.timing, '": {', cr,\r
+                                               '"content": "', text, '",', cr,\r
                                                        '"x": ', x, ',', cr,\r
                                                        '"y": ', y, ',', cr,\r
-                                                       '"z": ', this.z, ',', cr,\r
-                                                       '"t": ', this.timing, ',', cr,\r
+                                                       '"t": ', 0, ',', cr,\r
                                                        '"width": ', w, ',', cr,\r
-                                                       '"height": ', h, ',', cr,\r
-                                                       '"speaches_attributes": {', cr,\r
-                                                       '"newf', this.timing, '": {', cr,\r
-                                                       '"content": "', text, '",', cr,\r
-                                                                       '"x": ', x, ',', cr,\r
-                                                                       '"y": ', y, ',', cr,\r
-                                                                       '"t": ', 0, ',', cr,\r
-                                                                       '"width": ', w, ',', cr,\r
-                                                                       '"height": ', h, cr,\r
-                                                               '}', cr,\r
-                                                       '}', cr,\r
-                                               '}'\r
-                                       ].join( '');\r
-                               },\r
-                               getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                                       var url = XBROWSER_BALLOON.getURL();\r
-                                       return [\r
-                                               '<img ',\r
-                                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                                       'width="', w, '" ',\r
-                                                       'height="', h, '" ',\r
-                                                       'style="',                                                                      \r
-                                                               'left:', x, 'px;',\r
-                                                               'top:', y, 'px;',\r
-                                                               'z-index:', this.z, ';',\r
-                                                       '"',\r
-                                               isXHTML !== true ? '>' : ' \/>',\r
-                                               pettanr.LINE_FEED_CODE_TEXTAREA,\r
-                                               '<div class="balloon" style="',\r
-                                                       'left:', x, 'px;',\r
-                                                       'top:', y, 'px;',\r
-                                                       'width:', w, 'px;',\r
-                                                       'height:', h, 'px;',\r
-                                                       'z-index:', this.z,\r
-                                               '"><span>', text, '<\/span>', '<\/div>'\r
-                                                       \r
-                                       ].join( '');\r
-                               },\r
-                               getAsXML: function(){}\r
-                       }\r
-               );\r
+                                                       '"height": ', h, cr,\r
+                                               '}', cr,\r
+                                       '}', cr,\r
+                               '}'\r
+                       ].join( '');\r
+               }\r
+               this.getAsHTML = function( isAbsoluteUrl, isXHTML){\r
+                       var url = balloon.getURL();\r
+                       return [\r
+                               '<img ',\r
+                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
+                                       'width="', w, '" ',\r
+                                       'height="', h, '" ',\r
+                                       'style="',                                                                      \r
+                                               'left:', x, 'px;',\r
+                                               'top:', y, 'px;',\r
+                                               'z-index:', this.z, ';',\r
+                                       '"',\r
+                               isXHTML !== true ? '>' : ' \/>',\r
+                               pettanr.LINE_FEED_CODE_TEXTAREA,\r
+                               '<div class="balloon" style="',\r
+                                       'left:', x, 'px;',\r
+                                       'top:', y, 'px;',\r
+                                       'width:', w, 'px;',\r
+                                       'height:', h, 'px;',\r
+                                       'z-index:', this.z,\r
+                               '"><span>', text, '<\/span>', '<\/div>'\r
+                                       \r
+                       ].join( '');\r
+               }\r
+               this.getAsXML = function(){}\r
        }\r
+       TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );\r
 \r
 /* --------------------------------------------------------------------------------------------\r
  * COMIC_ELEMENT_CONTROL\r
@@ -3035,53 +2530,52 @@ pettanr.editor = ( function(){
         * 1. remove\r
         * 2. renumber z\r
         */\r
-               function appendComicElement( _comicElement) {\r
-                       _comicElement.init && _comicElement.init();\r
+               function appendComicElement( _comicElement ) {\r
                        var z = _comicElement.z,\r
                                l = COMIC_ELEMENT_ARRAY.length,\r
                                _jqElm = _comicElement.$.stop().css( {\r
                                        filter:         '',\r
                                        opacity:        ''\r
                                });\r
-                       if( typeof z !== 'number' || z < 0 || z >= l){\r
-                               COMIC_ELEMENT_ARRAY.unshift( _comicElement);\r
-                               ELM_CONTAINER.appendChild( _jqElm.get( 0));\r
+                       if( typeof z !== 'number' || z < 0 || z >= l ){\r
+                               COMIC_ELEMENT_ARRAY.unshift( _comicElement );\r
+                               ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
                                _jqElm.fadeIn();\r
                        } else {\r
                                var insertIndex = 0;\r
-                               for( var i = 0; i < l; ++i){\r
-                                       if( COMIC_ELEMENT_ARRAY[ i].z <= z){\r
+                               for( var i = 0; i < l; ++i ){\r
+                                       if( COMIC_ELEMENT_ARRAY[ i ].z <= z ){\r
                                                insertIndex = i;\r
                                                break;\r
                                        }\r
                                }\r
-                               COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());\r
-                               COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
+                               COMIC_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );\r
+                               COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement );\r
                        }\r
                        renumber();\r
                }\r
-               function removeComicElement( _comicElement) {\r
+               function removeComicElement( _comicElement ) {\r
                        var l = COMIC_ELEMENT_ARRAY.length;\r
                        for( var i=0; i<l; ++i){\r
-                               if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){\r
-                                       COMIC_ELEMENT_ARRAY.splice( i, 1);\r
+                               if( COMIC_ELEMENT_ARRAY[ i ] === _comicElement ){\r
+                                       COMIC_ELEMENT_ARRAY.splice( i, 1 );\r
                                        renumber();\r
                                        _comicElement.$.stop().css( {\r
                                                filter:         '',\r
                                                opacity:        ''\r
-                                       }).fadeOut( onFadeOut);\r
+                                       }).fadeOut( onFadeOut );\r
                                        currentElement = currentElement === _comicElement ? null : currentElement;\r
                                        return;\r
                                }\r
                        }\r
                        function onFadeOut(){\r
-                               this.parentNode.removeChild( this);\r
+                               this.parentNode.removeChild( this );\r
                        }\r
                }\r
-               function restoreComicElement( arg){\r
-                       var isAppend = arg[ 0],\r
-                               comicElement = arg[ 1];\r
-                       isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
+               function restoreComicElement( arg ){\r
+                       var isAppend = arg[ 0 ],\r
+                               comicElement = arg[ 1 ];\r
+                       isAppend === true ? appendComicElement( comicElement ) : removeComicElement( comicElement );\r
                }\r
                /*\r
                 * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
@@ -3091,19 +2585,19 @@ pettanr.editor = ( 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
@@ -3126,12 +2620,6 @@ 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
@@ -3140,15 +2628,17 @@ pettanr.editor = ( function(){
                                COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();\r
                        },\r
                        close: function(){\r
+                               var _comicElm;\r
                                while( COMIC_ELEMENT_ARRAY.length > 0){\r
-                                       COMIC_ELEMENT_ARRAY.shift().destroy();\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
@@ -3170,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
@@ -3178,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
@@ -3192,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
@@ -3225,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
@@ -3301,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
@@ -3358,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
@@ -3386,512 +2907,812 @@ pettanr.editor = ( function(){
                return false;\r
        }\r
 \r
-       return {\r
-               init: function( _option){\r
-                       option = _option;\r
-                       \r
-               },\r
-               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
-                       CONSOLE_CONTROLER.init();\r
-                       \r
-                       OUTPUT_CONSOLE.init();\r
-                       TEXT_EDITOR_CONTROL.init();\r
-                       IMAGE_GROUP_EXPROLER.init();\r
-\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
+       /* 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
-                * 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 pettanr.editor.firstOpen;\r
-               },\r
-               onOpen: function( _file){\r
-                       if( pettanr.file.isFileInstance( _file) === true){\r
-                               // pettanr.file.isPettanFileInstance( _file) === true\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();\r
-                       \r
-                       COMIC_ELEMENT_OPERATION_MANAGER.open();\r
-                       COMIC_ELEMENT_CONTROL.open();\r
-                       \r
-                       // last\r
-                       MENU_BAR_CONTROL.open();\r
-                       \r
-                       pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
-               },\r
-               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
-               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
-                       \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
+                * ieは +'px'が不要みたい\r
+                */\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
-// create hidden iframe\r
-// write script\r
-// setInterval\r
-pettanr.proxy = ( function(){\r
+});\r
+\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 FormProxy( formJsUrl, callback){\r
-               var timer = null,\r
-                       iWin, idoc;\r
-\r
-               pettanr.util.createIframe( 'id00000', onCreateIframe);\r
-               \r
-               function onCreateIframe( _iframe){\r
-                       iWin = _iframe.contentWindow;\r
-                       idoc = _iframe.contentWindow.document;\r
-\r
-                       idoc.open();\r
-                       idoc.write( '<body>');\r
-                       idoc.writeln( '<script type="text\/javascript" src="' + pettanr.CONST.JQUERY_URL+ '"><\/script>');\r
-                       idoc.close();\r
+       function clickOK(){\r
+               if( !elmForm || !elmIframe || isUploading === true ) return false;\r
+               // validate\r
+               isUploading = true;\r
+               elmProgress.innerHTML = '■';\r
+               copyAndSubmit();\r
+       }\r
 \r
-                       timer = window.setInterval( detect, 250 );\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
-               function detect(){\r
-                       if( iWin.jQuery){\r
-                               window.clearInterval( timer );\r
-                               //callback( idoc);\r
-                               iWin.jQuery( iWin).ready( onJQueryReady );\r
+       /*\r
+        * ie の 場合、readyState をチェック.\r
+        */\r
+                       function detectIframe(){\r
+                   if ( elmIframe.readyState === 'complete') {\r
+                       elmIframe.onreadystatechange = new Function();\r
+                       elmIframe.onreadystatechange = null;\r
+                       onIframeUpdate();\r
+                   }\r
                        }\r
+                               function onIframeUpdate(){\r
+                                       elmIframe.onload = null;\r
+                                       ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+                                       elmIframe = null;\r
+                                       elmProgress.innerHTML = 'success!';\r
+                                       setTimeout( clickCancel , 1000);\r
+                                       isUploading = false;\r
+                               }\r
+                       \r
+       function clickCancel(){\r
+               if( isUploading === true) return false;\r
+               pettanr.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
-               function onJQueryReady(){\r
-                       callback( idoc);\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
-       \r
-       return {\r
-               createFormProxy: function( _formJsUrl, _callback){\r
-                       new FormProxy( _formJsUrl, _callback);\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
-\r
-\r
-pettanr.comicConsole = ( function(){\r
-       var COMIC_CONSOLE = ( function(){\r
-               var jqWrap,\r
-                       ID = 'comicConsole',\r
-                       elmWrap = document.getElementById( 'comic-console-wrapper' ),\r
-                       elmProgress = document.getElementById( 'comic-console-progress' ),\r
-                       inputTitle, inputW, inputH, inputVisible, inputEditable,\r
-                       elmUploader = null,\r
-                       elmScript = null\r
-                       elmIframe = null,\r
-                       elmForm = null,\r
-                       timer = null,\r
-                       isUploading = false;\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function clickOK(){\r
-                       if( !elmForm) return false;\r
-                       // validate\r
-                       isUploading = true;\r
-                       pettanr.util.createIframe( 'targetFrameCreateComic', copyAndSubmit);\r
-                       elmProgress.innerHTML = '■';\r
-               }\r
-\r
-                       function copyAndSubmit( _iframe){\r
-                               elmUploader.appendChild( _iframe );\r
-                               elmIframe = _iframe;\r
-                               elmForm.target = elmIframe.name;\r
-                               \r
-                               var _inputList = elmForm.getElementsByTagName( 'input' ),\r
-                                       _input, _name;\r
-                               for( var i=0, l= _inputList.length; i<l; ++i){\r
-                                       _input = _inputList[ i ];\r
-                                       _name = _input.name;\r
-                                       if( _name === 'comic[title]'){\r
-                                               _input.value = inputTitle.value();\r
-                                       } else\r
-                                       if( _name === 'comic[width]'){\r
-                                               _input.value = inputW.value();\r
-                                       } else\r
-                                       if( _name === 'comic[height]'){\r
-                                               _input.value = inputH.value();\r
-                                       }\r
-                               }\r
-                               var _selectList = elmForm.getElementsByTagName( 'select' ),\r
-                                       _select, _name, _optionList;\r
-                               for( i=0, l= _selectList.length; i<l; ++i){\r
-                                       _select = _selectList[ i ];\r
-                                       _name = _select.name;\r
-                                       _optionList = _select.getElementsByTagName( 'option' )\r
-                                       if( _name === 'comic[visible]'){\r
-                                               \r
-                                       } else\r
-                                       if( _name === 'comic[editable]'){\r
-                                               \r
-                                       }\r
-                               }\r
-                               try {\r
-                                       elmForm.submit();\r
-                               } catch( e){\r
-                                       elmProgress.innerHTML = 'submit() err..';\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
+                       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
-                                       setTimeout( clickCancel , 3000);\r
-                                       return;\r
                                }\r
-                               if( pettanr.ua.isIE){\r
-                                       elmIframe.onreadystatechange = detectIframe;\r
-                               } else {\r
-                                       elmIframe.onload = onIframeUpdate;\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
-                               elmProgress.innerHTML = 'uploading..';\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
-                * ie の 場合、readyState をチェック.\r
-                */\r
-                               function detectIframe(){\r
-                           if ( elmIframe.readyState === 'complete') {\r
-                               elmIframe.onreadystatechange = new Function();\r
-                               elmIframe.onreadystatechange = null;\r
-                               onIframeUpdate();\r
-                           }\r
-                               }\r
-                                       function onIframeUpdate(){\r
-                                               elmIframe.onload = null;\r
-                                               ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
-                                               elmIframe = null;\r
-                                               elmProgress.innerHTML = 'success!';\r
-                                               setTimeout( clickCancel , 1000);\r
-                                               isUploading = false;\r
-                                       }\r
-                               \r
-               function clickCancel(){\r
-                       if( isUploading === true) return false;\r
-                       pettanr.overlay.hide();\r
-                       COMIC_CONSOLE.onClose();\r
+                * 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
-               function detectForm(){\r
-                       elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];\r
-                       if( elmForm){\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
-                               copyAndSubmit();\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
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
-                               $( '#comic-console-post-button').click( clickOK );\r
-                               $( '#comic-console-cancel-button').click( clickCancel );\r
-                               \r
-                               var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
-                               inputTitle    = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
-                               inputW        = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
-                               inputH        = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
-                               inputVisible  = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
-                               inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
-                               \r
-                               delete COMIC_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( w, h){\r
-                               jqWrap.show();\r
-\r
-                               pettanr.overlay.show( COMIC_CONSOLE );\r
-                               \r
-                               inputTitle.start();\r
-                               \r
-                               elmUploader = document.createElement( 'div');\r
-                               elmUploader.id = "newcomic";\r
-                               elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;';\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 = '';\r
-                               \r
-                               if( timer === null){\r
-                                       timer = window.setInterval( detectForm, 250);\r
-                               }\r
-                               \r
-                               COMIC_CONSOLE.onWindowResize( w, h);\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );\r
-                       },\r
-                       onClose: function(){\r
-                               elmForm !== null && $( elmUploader ).remove();\r
-                               elmForm  = null;\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
-                               \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
-                       ID: ID\r
+                               setTimeout( clickCancel , 3000);\r
+                               return;\r
+                       }\r
+                       \r
+                       if( pettanr.ua.isIE){\r
+                               elmIframe.onreadystatechange = detectIframe;\r
+                       } else {\r
+                               elmIframe.onload = onLoad;\r
+                       }\r
+                       elmProgress.innerHTML = 'uploading..';\r
                }\r
-       })();\r
+       /*\r
+        * ie の 場合、readyState をチェック.\r
+        */\r
+                       function detectIframe(){\r
+                   if ( elmIframe.readyState === 'complete') {\r
+                       elmIframe.onreadystatechange = new Function();\r
+                       elmIframe.onreadystatechange = null;\r
+                       onLoad();\r
+                   }\r
+                       }\r
+                               function onLoad(){\r
+                                       elmIframe.onload = null;\r
+                                       ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
+                                       elmProgress.innerHTML = 'success!';\r
+                                       setTimeout( clickCancel , 1000);\r
+                                       isUploading = false;\r
+                               }\r
        \r
-       return {\r
-               init: function(){\r
-                       COMIC_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _file){\r
-                       if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
-                               // _data = _file.read();\r
-                       }\r
-               },\r
-               onClose: function(){\r
-                       \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       COMIC_CONSOLE.show( w, h);\r
+       function detectForm(){\r
+               elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
+               if( elmForm){\r
+                       var _inputList = elmForm.getElementsByTagName( 'input' ),\r
+                               _input;\r
+                       for( var i=0, l= _inputList.length; i<l; ++i){\r
+                               _input = _inputList[ i ];\r
+                               if( _input.type === 'submit'){\r
+                                       _input.style.display = 'none';\r
+                               }\r
+                       }\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
+                       pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
+                       elmProgress.innerHTML = 'create iframe';\r
                }\r
        }\r
-})();\r
-\r
-pettanr.uploadConsole = ( function(){\r
-       var UPLOAD_CONSOLE = ( function(){\r
-               var jqWrap,\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
+       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
-                * upload ボタンが押されたらまず iframe をつくる.
-                */\r
-               function clickOK(){\r
-                       if( !elmForm || elmFile.value.length === 0) return false;\r
-                       pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
-                       elmProgress.innerHTML = 'uploading.';\r
-                       isUploading = true;\r
-                       return false;\r
+                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.\r
+                */                             \r
+               elmScript = document.createElement( 'script');\r
+               elmScript.type = 'text\/javascript';\r
+               elmScript.src = pettanr.CONST.CREATE_PANEL_JS;\r
+               document.body.appendChild( elmScript);\r
+               \r
+               jqWrap.show();\r
+\r
+               if( timer === null){\r
+                       timer = window.setInterval( detectForm, 250 );\r
                }\r
-               /*\r
-                * form の target に iframe を指定したのち submit();
-                */\r
-                       function onCreateIframe( _iframe ){\r
-                               elmContainer.appendChild( _iframe );\r
-                               elmForm.target = _iframe.name;\r
-                               \r
-                               try {\r
-                                       elmForm.submit();\r
-                               } catch( e){\r
-                                       elmProgress.innerHTML = 'submit() err..';\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
+                       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
-                                       setTimeout( clickCancel , 3000);\r
-                                       return;\r
                                }\r
-                               \r
-                               if( pettanr.ua.isIE){\r
-                                       _iframe.onreadystatechange = detectIframe;\r
-                               } else {\r
-                                       _iframe.onload = onIframeUpdate;\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
-                               elmIframe = _iframe;\r
-                               elmProgress.innerHTML = 'uploading..';\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 の 場合、readyState をチェック.
-                */\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
+                * 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
-               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
+               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
-               /*\r
-                * 
-                */\r
-               function clickCancel(){\r
-                       if( isUploading === true) return false;\r
-                       pettanr.overlay.hide();\r
-                       UPLOAD_CONSOLE.onClose();\r
-                       return false;\r
+               if( timer !== null){\r
+                       window.clearInterval( timer);\r
+                       timer = null;\r
                }\r
-               \r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();\r
-                               $( '#upload-console-post-button').click( clickOK );\r
-                               $( '#upload-console-cancel-button').click( clickCancel );\r
-\r
-                               delete UPLOAD_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( w, h){\r
-                               /*\r
-                                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.
-                                */                             \r
-                               elmScript = document.createElement( 'script');\r
-                               elmScript.type = 'text\/javascript';\r
-                               elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
-                               document.body.appendChild( elmScript);\r
-                               \r
-                               jqWrap.show();\r
-                               pettanr.overlay.show( UPLOAD_CONSOLE );\r
+               jqWrap.hide();\r
+       }\r
+});\r
 \r
-                               if( timer === null){\r
-                                       timer = window.setInterval( detectForm, 250);\r
-                               }\r
-                               \r
-                               elmProgress.innerHTML = '';\r
-                               \r
-                               UPLOAD_CONSOLE.onWindowResize( w, h);\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               jqWrap.css(\r
-                                       {\r
-                                               left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
-                                               top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
-                                       }\r
-                               );\r
-                       },\r
-                       onClose: function(){\r
-                               elmForm !== null && $( elmContainer.children ).remove();\r
-                               elmForm = elmFile = 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
-                       ID: ID\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
-       return {\r
-               init: function(){\r
-                       UPLOAD_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _file){\r
-                       if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
-                               // _data = _file.read();\r
-                       }\r
-               },\r
-               onClose: function(){\r
-                       \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       UPLOAD_CONSOLE.show( w, h);\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
-})();
\ No newline at end of file
+});\r