X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.4.x%2Fjavascripts%2Fwork.js;h=8565e27d39a6119e2d8b3234ec3d50b96af3aa5f;hb=fbc8e8aa4dc1607d4b8812dd8e923bc22b50e723;hp=25d3256be66037fcd59030588f7c7aa64487d3ad;hpb=080ecdb578eb49a116464aefc6b86bd5b6f6da38;p=pettanr%2FclientJs.git

diff --git a/0.4.x/javascripts/work.js b/0.4.x/javascripts/work.js
index 25d3256..8565e27 100644
--- a/0.4.x/javascripts/work.js
+++ b/0.4.x/javascripts/work.js
@@ -1,6 +1,6 @@
 /*
  * pettanR work.js
- *   version 0.4.12
+ *   version 0.4.28
  *   
  * author:
  *   itozyun
@@ -37,8 +37,6 @@
  *    - MENU_BAR_CONTROL
  *    - HISTORY_CONTROL
  *    - SAVE_CONTROL
- *    - TEXT_EDITOR_CONTROL
- *    - IMAGE_GROUP_EXPROLER
  *    - WINDOW_CONTROL
  *       - WindowClass
  *    - INFOMATION_WINDOW
@@ -67,12 +65,12 @@
  * 
  * 
  */
-pettanr.editor = ( function(){
+pettanr.editor = pettanr.view.registerApplication( function(){
 
-	var COMIC_ELEMENT_TYPE_IMAGE = 0,
-		COMIC_ELEMENT_TYPE_TEXT = 1,
+	var PANEL_ELEMENT_TYPE_IMAGE = 0,
+		PANEL_ELEMENT_TYPE_TEXT = 1,
 		MOUSE_LISTENER_ARRAY = [],
-		COMIC_ELEMENT_ARRAY = [],
+		PANEL_ELEMENT_ARRAY = [],
 		ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),
 		MIN_PANEL_HEIGHT = 20,
 		MIN_ELEMENT_SIZE = 19,
@@ -82,7 +80,11 @@ pettanr.editor = ( function(){
 		windowW, windowH,
 		currentListener = null,
 		currentCursor = '',
+		instance = this,
 		option,
+		comicID = -1,
+		panelID = -1,
+		panelTimming = -1,
 		log;
 
 /* ----------------------------------------
@@ -128,7 +130,7 @@ pettanr.editor = ( function(){
 			jqStage, jqBar;
 		ELM_BAR.style.top = ( -barH) +'px';
 
-		var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){
+		var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter ){
 			var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),
 				ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],
 				elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];
@@ -182,8 +184,7 @@ pettanr.editor = ( function(){
 			ELM_BAR.appendChild( ELM_WRAPPER);
 			
 			function onClick( e){
-				var that = this,
-					i = pettanr.util.getChildIndex( this.parentNode, this);
+				var i = pettanr.util.getChildIndex( this.parentNode, this);
 				i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);
 				e.stopPropagation();
 				return false;
@@ -358,16 +359,16 @@ pettanr.editor = ( function(){
 			var	_argBack = _stack.argBack,
 				_argForword = _stack.argForword,
 				_value;
-			if( typeof _argBack.length === 'number'){ // isArray
+			if( Type.isArray( _argBack ) === true ){ // isArray
 				while( _argBack.length > 0){
 					_value = _argBack.shift();
-					_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
+					_destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy();
 				}
 			}
-			if( typeof _argForword.length === 'number'){
+			if( Type.isArray( _argForword ) === true ){
 				while( _argForword.length > 0){
 					_value = _argForword.shift();
-					_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
+					_destroy === true && Type.isFunction( _value.destroy ) === true && _value.destroy();
 				}						
 			}			
 		}
@@ -383,10 +384,10 @@ pettanr.editor = ( function(){
 				MENUBAR_BACK.visible( false);
 				MENUBAR_FORWARD.visible( false);
 		       	while( STACK_BACK.length > 0){
-					destroyStack( STACK_BACK.shift(), true);
+					destroyStack( STACK_BACK.shift(), true );
 				}
 		       	while( STACK_FORWARD.length > 0){
-					destroyStack( STACK_FORWARD.shift(), true);
+					destroyStack( STACK_FORWARD.shift(), true );
 				}
 			},
 		    saveState: function( _function, _argBack, _argForword, _destroy) {
@@ -402,65 +403,13 @@ pettanr.editor = ( function(){
 				var _stack;
 		       	while( STACK_FORWARD.length > 0){
 					_stack = STACK_FORWARD.shift();
-					destroyStack( _stack, _stack.destroy);
+					destroyStack( _stack, _stack.destroy );
 				}
 				MENUBAR_FORWARD.visible( false);
 		    }		
 		}
 	})();
 
-
-/* ----------------------------------------
- * OUTPUT_CONSOLE
- *  - overlay
- */
-	var OUTPUT_CONSOLE = ( function(){
-		var jqWrap, jqOutputArea,
-			ID = 'outputConsole';
-		//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
-		
-		function close(){
-			jqWrap.hide();
-			jqOutputArea.val('');
-		}
-		function clickOK(){
-			pettanr.overlay.hide();
-			close();			
-		}
-		return {
-			init: function(){
-				this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();
-				jqOutputArea = $( '#output-area');
-				delete OUTPUT_CONSOLE.init;
-			},
-			jqWrap: null,
-			show: function( _text){
-				jqWrap.show();
-
-				
-				pettanr.overlay.show( this);
-				jqWrap.css(
-					{
-						left:	Math.floor( ( windowW -jqWrap.width()) /2),
-						top:	Math.floor( ( windowH -jqWrap.height()) /2)
-					}
-				);				
-				
-				jqOutputArea.val( _text).focus();
-			},
-			onWindowResize: function(){
-				jqWrap.css(
-					{
-						left:	Math.floor( ( windowW -jqWrap.width()) /2),
-						top:	Math.floor( ( windowH -jqWrap.height()) /2)
-					}
-				);
-			},
-			onClose: close,
-			ID: 'textEditor'
-		}
-	})();
-
 /* ----------------------------------------
  * SAVE_CONTROL
  *  - controler
@@ -474,24 +423,35 @@ pettanr.editor = ( function(){
 			updated = false;
 		
 		function quit(){
-			// 本来は os.application.close();
-			pettanr.view.show( 'entrance');
+			pettanr.editor.shutdown();
 		}
 		
 		function outputAsHtml(){
-			OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));
+			pettanr.outputConsole.bootInOverlay(
+				pettanr.outputConsole.HTML,
+				comicID, panelID, panelTimming,
+				PANEL_CONTROL.w(), PANEL_CONTROL.h(),
+				1, // border, BackgroundImage
+				PANEL_ELEMENT_ARRAY
+			);
 		}
 		function outputAsJsonString(){
-			OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());
+			pettanr.outputConsole.bootInOverlay(
+				pettanr.outputConsole.JSON,
+				comicID, panelID, panelTimming,
+				PANEL_CONTROL.w(), PANEL_CONTROL.h(),
+				1, // border, BackgroundImage
+				PANEL_ELEMENT_ARRAY
+			);
 		}
 		return {
 			open: function(){},
 			close: function(){},
 			quit: quit,
 			panelUpdated: function( _updated){
-				if( _updated !== undefined && updated !== _updated){
-					SAVE.visible( !!_updated);
-					SAVE_AND_QUIT.visible( !!_updated);
+				if( _updated !== undefined && updated !== _updated ){
+					SAVE.visible( !!_updated );
+					SAVE_AND_QUIT.visible( !!_updated );
 					updated = !!_updated;
 				}
 				return updated;
@@ -503,469 +463,6 @@ pettanr.editor = ( function(){
 	})();
 
 /* ----------------------------------------
- * Text Editor
- *  - overlay
- */
-	var TEXT_EDITOR_CONTROL = ( function(){
-		var jqWrap, jqTextarea, jqButton,
-			textElement, onUpdateFunction,
-			ID = 'textEditor';
-		//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
-		
-		function close(){
-			jqWrap.hide();
-			textElement = onUpdateFunction = null;		
-		}
-		function clickOK(){
-			pettanr.overlay.hide();
-			textElement && textElement.text( jqTextarea.val());
-			onUpdateFunction && onUpdateFunction( textElement);
-			close();			
-		}
-		return {
-			init: function(){
-				this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();
-				jqTextarea = $( '#speach-editor').keydown( function( e){
-					if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){
-						clickOK();
-						e.preventDefault();
-				        e.keyCode = 0;
-				        e.cancelBubble = true;
-				        e.returnValue = false;
-						return false;
-					}
-				});
-				jqButton = $( '#speach-edit-complete-button').click( clickOK);
-				delete TEXT_EDITOR_CONTROL.init;
-			},
-			jqWrap: null,
-			show: function( _textElement, _onUpdateFunction){
-				textElement = _textElement;
-				onUpdateFunction = _onUpdateFunction || null;
-				pettanr.overlay.show( this);
-				var h = _textElement.h;
-				jqWrap.show().css( {
-					left:			_textElement.x +PANEL_CONTROL.x(),
-					top:			_textElement.y +PANEL_CONTROL.y(),
-					width:			_textElement.w,
-					height:			h
-				});
-				jqTextarea.val( _textElement.text()).focus();
-				
-				/*
-				 * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
-				 */
-				pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){
-					var rows = 0;
-					while( jqTextarea.height() < h){
-						rows++;
-						jqTextarea.attr( 'rows', rows);
-					}
-					rows > 1 && jqTextarea.attr( 'rows', rows -1);
-				}, 0);
-			},
-			onWindowResize: function(){
-				textElement && this.show( textElement);
-			},
-			onClose: close,
-			ID: ID
-		}
-	})();
-
-/* ----------------------------------------
- * Image Group Exproler
- *  - overlay
- */
-	var IMAGE_GROUP_EXPROLER = ( function(){
-		var ICON_ARRAY = [],
-			WHEEL_DELTA = 64,
-			containerW, containerH, wrapX,
-			jqWrap, jqContainer, jqItemOrigin,
-			itemW, itemH,
-			jqName, jqButton, buttonW,
-			//onUpdateFunction,
-			_g_onUpdateFunction,
-			winW,
-			onEnterInterval = null;
-		
-		var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',
-			THUMB_PATH = BASE_PATH, // + 'thumbnail/',
-			LIMIT_FILESIZE = 1024 * 10; // 10KB
-		var IMAGE_DATA = {
-				pen001: [
-				    {
-				        "created_at": "2011-11-13T08:57:39Z", 
-				        "ext": "png", 
-				        "filesize": 9969, 
-				        "height": 463, 
-				        "id": 1, 
-				        "updated_at": "2011-11-13T08:57:39Z", 
-				        "width": 441
-				    }, 
-				    {
-				        "created_at": "2011-11-13T08:57:54Z", 
-				        "ext": "gif", 
-				        "filesize": 5418, 
-				        "height": 500, 
-				        "id": 2, 
-				        "updated_at": "2011-11-13T08:57:54Z", 
-				        "width": 500
-				    }, 
-				    {
-				        "created_at": "2011-11-13T08:58:06Z", 
-				        "ext": "gif", 
-				        "filesize": 8758, 
-				        "height": 464, 
-				        "id": 3, 
-				        "updated_at": "2011-11-13T08:58:06Z", 
-				        "width": 366
-				    }, 
-				    {
-				        "created_at": "2011-11-13T08:58:23Z", 
-				        "ext": "gif", 
-				        "filesize": 9383, 
-				        "height": 480, 
-				        "id": 4, 
-				        "updated_at": "2011-11-13T08:58:23Z", 
-				        "width": 392
-				    }, 
-				    {
-				        "created_at": "2011-11-13T08:58:33Z", 
-				        "ext": "gif", 
-				        "filesize": 11061, 
-				        "height": 500, 
-				        "id": 5, 
-				        "updated_at": "2011-11-13T08:58:33Z", 
-				        "width": 500
-				    }, 
-				    {
-				        "created_at": "2011-11-20T09:50:43Z", 
-				        "ext": "gif", 
-				        "filesize": 1131, 
-				        "height": 126, 
-				        "id": 6, 
-				        "updated_at": "2011-11-20T09:50:43Z", 
-				        "width": 259
-				    }, 
-				    {
-				        "created_at": "2011-11-20T09:50:55Z", 
-				        "ext": "gif", 
-				        "filesize": 1125, 
-				        "height": 126, 
-				        "id": 7, 
-				        "updated_at": "2011-11-20T09:50:55Z", 
-				        "width": 259
-				    }, 
-				    {
-				        "created_at": "2011-11-20T11:33:12Z", 
-				        "ext": "gif", 
-				        "filesize": 17919, 
-				        "height": 600, 
-				        "id": 8, 
-				        "updated_at": "2011-11-20T11:33:12Z", 
-				        "width": 800
-				    },
-				    {
-				        "created_at": "2011-11-20T11:33:12Z", 
-				        "ext": "gif", 
-				        "filesize": 17919, 
-				        "height": 600, 
-				        "id": 9, 
-				        "updated_at": "2011-11-20T11:33:12Z", 
-				        "width": 800
-				    },
-				    {
-				        "created_at": "2011-11-20T11:33:12Z", 
-				        "ext": "gif", 
-				        "filesize": 17919, 
-				        "height": 600, 
-				        "id": 10, 
-				        "updated_at": "2011-11-20T11:33:12Z", 
-				        "width": 800
-				    },
-				    {
-				        "created_at": "2011-11-20T11:33:12Z", 
-				        "ext": "gif", 
-				        "filesize": 17919, 
-				        "height": 600, 
-				        "id": 11, 
-				        "updated_at": "2011-11-20T11:33:12Z", 
-				        "width": 800
-				    },
-				    {
-				        "created_at": "2011-11-22T09:17:20Z", 
-				        "ext": "gif", 
-				        "filesize": 9055, 
-				        "height": 473, 
-				        "id": 12, 
-				        "updated_at": "2011-11-22T09:17:20Z", 
-				        "width": 405
-				    }, 
-				    {
-				        "created_at": "2011-11-22T10:11:07Z", 
-				        "ext": "gif", 
-				        "filesize": 8758, 
-				        "height": 464, 
-				        "id": 13, 
-				        "updated_at": "2011-11-22T10:11:07Z", 
-				        "width": 366
-				    }, 
-				    {
-				        "created_at": "2011-11-24T09:05:12Z", 
-				        "ext": "gif", 
-				        "filesize": 6431, 
-				        "height": 386, 
-				        "id": 16, 
-				        "updated_at": "2011-11-24T09:05:12Z", 
-				        "width": 453
-				    }, 
-				    {
-				        "created_at": "2011-11-26T04:52:12Z",
-				        "ext": "gif", 
-				        "filesize": 6421, 
-				        "height": 426, 
-				        "id": 17, 
-				        "updated_at": "2011-11-26T04:52:12Z", 
-				        "width": 306
-				    }, 
-				    {
-				        "created_at": "2011-11-26T04:52:12Z",
-				        "ext": "gif", 
-				        "filesize": 6421, 
-				        "height": 426, 
-				        "id": 18, 
-				        "updated_at": "2011-11-26T04:52:12Z", 
-				        "width": 306
-				    }, 
-				    {
-				        "created_at": "2011-11-26T04:52:12Z",
-				        "ext": "gif", 
-				        "filesize": 6421, 
-				        "height": 426, 
-				        "id": 19, 
-				        "updated_at": "2011-11-26T04:52:12Z", 
-				        "width": 306
-				    }, 
-				    {
-				        "created_at": "2011-11-26T04:52:12Z",
-				        "ext": "gif", 
-				        "filesize": 6421, 
-				        "height": 426, 
-				        "id": 20, 
-				        "updated_at": "2011-11-26T04:52:12Z", 
-				        "width": 306
-				    }, 
-				    {
-				        "created_at": "2011-11-26T04:52:12Z",
-				        "ext": "gif", 
-				        "filesize": 6421, 
-				        "height": 426, 
-				        "id": 21, 
-				        "updated_at": "2011-11-26T04:52:12Z",
-				        "width": 306
-				    }
-				]
-			}
-		
-		var ImageGroupIconClass = function( INDEX, data){
-			var JQ_ICON_WRAP = jqItemOrigin.clone( true),
-				SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),
-				LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,
-				reversibleImage = null,
-				onEnterFlag = false,
-				imgW, imgH;
-			JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');
-			jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));
-			
-			function onImageLoad( url, _imgW, _imgH){
-				if( reversibleImage === null) {
-					alert( url);
-					return;
-				}
-				imgW = _imgW || data.width || 64;
-				imgH = _imgH || data.height || 64;
-				JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
-				var zoom = 128 /( imgW > imgH ? imgW : imgH),
-					h = Math.floor( imgH *zoom),
-					w = Math.floor( imgW *zoom);
-				reversibleImage.elm.style.width = w +'px';
-				reversibleImage.elm.style.height = h +'px';
-				reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
-				reversibleImage.resize( w, h);
-				JQ_ICON_WRAP.click( onClick);
-			}
-			
-			function onClick( e){
-				pettanr.overlay.hide();
-				if( _g_onUpdateFunction) {
-					if( LOW_SRC === null){
-						window[ _g_onUpdateFunction]( SRC, imgW, imgH);
-						window[ _g_onUpdateFunction] = null;
-					} else {
-						var _onLoad = pettanr.util.createGlobalFunc( [
-								'function( url, w, h){',
-									'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',
-									'window["', _g_onUpdateFunction, '"] = null;',
-								'}'
-							].join( '')),
-							_onError = pettanr.util.createGlobalFunc( [
-								'function( url){',
-									'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',
-									'window["', _g_onUpdateFunction, '"] = null;',
-								'}'
-							].join( ''));
-						pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);
-						window[ _onLoad] = window[ _onError] = undefined;
-					}
-				}
-				close();
-			}
-			
-			return {
-				onEnter: function(){
-					if( onEnterFlag === true) return;
-					reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);
-					JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);
-					onEnterFlag = true;						
-				},
-				destroy: function(){
-					reversibleImage && reversibleImage.destroy();
-					JQ_ICON_WRAP.remove();
-					reversibleImage = JQ_ICON_WRAP = null;
-					delete this.destroy;
-				}
-			}
-		}
-		
-		function close(){
-			jqContainer.stop().animate( {
-					height:	0,
-					top:	Math.floor( windowH /2)
-				}, function(){
-					jqWrap.hide()
-				});
-			while( ICON_ARRAY.length > 0){
-				ICON_ARRAY.shift().destroy();
-			}
-			onEnterInterval !== null && window.clearTimeout( onEnterInterval);
-			onEnterInterval = _g_onUpdateFunction = null;
-		}
-		function onEnterShowImage(){
-			var l = ICON_ARRAY.length,
-				_start = -wrapX /itemW -1,
-				_end = _start + winW /itemW +1;
-			for( var i=0; i<l; ++i){
-				_start < i && i < _end && ICON_ARRAY[ i].onEnter();
-			}
-			onEnterInterval !== null && window.clearTimeout( onEnterInterval);
-			onEnterInterval = null;
-		}
-		function clickOK(){
-			pettanr.overlay.hide();
-			close();
-		}
-		function onMouseWheel( e, delta){
-			if( winW < containerW){
-				wrapX += delta *WHEEL_DELTA;
-				wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
-				jqContainer.css( { left: wrapX});
-				
-				onEnterInterval !== null && window.clearTimeout( onEnterInterval);
-				onEnterInterval = window.setTimeout( onEnterShowImage, 500);
-			}
-			//e.stopPropagation();
-			return false;			
-		}
-		return {
-			init: function(){
-				this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();
-				jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);
-				containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;
-				jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());
-				var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));
-				itemW = itemSize.width;
-				itemH = itemSize.height;
-				jqName = $( '#gruop-name-display');
-				jqButton = $( '#image-gruop-button').click( clickOK);
-				buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;
-				
-				delete IMAGE_GROUP_EXPROLER.init;
-			},
-			jqWrap: null,
-			show: function( _onUpdateFunction){
-				//onUpdateFunction = _onUpdateFunction;
-				if( _onUpdateFunction){
-					_g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);
-				} else {
-					_g_onUpdateFunction = null;
-				}
-				pettanr.overlay.show( this);
-				
-				var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],
-					l = CURRENT_GROUP_ARRAY.length;
-				for( var i=0; i<l; ++i){
-					ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));
-				}
-				wrapX = 0;
-				containerW = l * itemW;
-				
-				winW = windowW;
-				var w = winW > containerW ? winW : containerW,
-					h = windowH > containerH ? containerH : windowH;
-				
-				jqWrap.show();
-				jqContainer.css( {
-					width:		w,
-					height:		0,
-					left:		0,
-					top:		Math.floor( windowH /2)
-				}).stop().animate( {
-					height: 	h,
-					top:		Math.floor( windowH /2 -h /2)
-				});
-				
-				jqButton.css( {
-					left:		Math.floor( winW /2 -buttonW /2),
-					top:		Math.floor( windowH /2 +containerH /2 +10)
-				});
-				
-				onEnterShowImage();
-			},
-			onWindowResize: function( _windowW, _windowH){
-				var w = _windowW > containerW ? _windowW : containerW,
-					h = _windowH > containerH ? containerH : _windowH,
-					offsetW = Math.floor( _windowW /2 -winW /2);
-				winW = _windowW;
-				if( offsetW <= 0){ // smaller
-					jqContainer.css( {
-						left:				offsetW,
-						width:				w
-					}).animate( {
-						left:				0,
-						top:				Math.floor( _windowH /2 -h /2)
-					});					
-				} else {
-					jqContainer.css( { // bigger
-						left:				0,
-						width:				w,
-						borderLeftWidth:	offsetW
-					}).animate( {
-						top:				Math.floor( _windowH /2 -h /2),
-						borderLeftWidth:	0
-					});
-				}
-				jqButton.css( {
-					left:		Math.floor( _windowW /2 -buttonW /2),
-					top:		Math.floor( _windowH /2 +containerH /2 +10)
-				});
-				onEnterShowImage();
-			},
-			onClose: close,
-			ID: 'imageGroupExproler'
-		}
-	})();
-
-/* ----------------------------------------
  * WINDOWS_CONTROL
  *  - contloler
  *  - mouseEventListener
@@ -1396,15 +893,12 @@ pettanr.editor = ( function(){
 					instance = this;
 					delete this.onInit;
 				},
-				onFirstOpen: function( _w, _h){
-					finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());
-					delete this.onFirstOpen;
-				},
 				onOpen: function( _w, _h){
-					finder.onOpen( _w, _h);
+					finder = finder || pettanr.finder.createFinder( pettanr.editor, document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());
+					finder.resize( _w, _h );
 				},
-				onResize: function( _w, _h){
-					finder.onWindowResize( _w, _h);
+				onResize: function( _w, _h ){
+					finder.resize( _w, _h );
 				}
 			},
 			'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300
@@ -1462,13 +956,13 @@ pettanr.editor = ( function(){
 						x = currentElement !== null ? currentElement.x : 0,
 						y = currentElement !== null ? currentElement.y : 0,
 						z = currentElement !== null ? currentElement.z : 0,
-						a = _elementType === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,
+						a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,
 						w = currentElement !== null ? currentElement.w : 0,
 						h = currentElement !== null ? currentElement.h : 0,
-						actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
-						actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
-						wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,
-						hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,
+						actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
+						actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
+						wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,
+						hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,
 						keepAspect = currentElement !== null && currentElement.keepAspect === true;
 					
 					if( currentElementType !== _elementType){
@@ -1762,12 +1256,12 @@ pettanr.editor = ( function(){
 		}
 		
 		return {
-			open: function( _panelW, _panelH, _borderSize){
-				panelW = _panelW || DEFAULT_PANEL_WIDTH;
-				panelH = _panelH || DEFAULT_PANEL_HEIGHT;
+			open: function( _panelW, _panelH, _borderSize ){
+				panelW = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH;
+				panelH = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT;
 				//panelX = Math.floor( ( windowW -panelW) /2);
 				//panelY = Math.floor( ( windowH -panelH) /2);
-				borderSize = _borderSize !== undefined ? _borderSize : borderSize;
+				borderSize = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;
 				
 				//setTimeout( PANEL_CONTROL.resize, 0);
 			},
@@ -1780,6 +1274,12 @@ pettanr.editor = ( function(){
 			y: function(){
 				return panelY;
 			},
+			w: function(){
+				return panelW;
+			},
+			h: function(){
+				return panelH;
+			},
 			resize: function( isResizerTopAction, _x, _y, _w, _h){
 				panelX = _x !== undefined ? _x : panelX;
 				panelY = _y !== undefined ? _y : panelY;
@@ -1853,66 +1353,64 @@ pettanr.editor = ( function(){
 			}
 		}
 			
-		return {
-			onMouseDown: function( _mouseX, _mouseY){
-				var _x = _mouseX -panelX,
-					_y = _mouseY -panelY;
+		this.onMouseDown = function( _mouseX, _mouseY){
+			var _x = _mouseX -panelX,
+				_y = _mouseY -panelY;
+			if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
+			offsetY = _y;
+			startY = panelY;
+			startH = panelH;
+			isDragging = true;
+			MOUSE_CURSOR( 'n-resize');
+			return true;
+		}
+		this.onMouseMove = function( _mouseX, _mouseY){
+			var _x = _mouseX -panelX,
+				_y = _mouseY -panelY;
+			if( isDragging !== true){
 				if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
-				offsetY = _y;
-				startY = panelY;
-				startH = panelH;
-				isDragging = true;
-				MOUSE_CURSOR( 'n-resize');
+				COMIC_ELEMENT_OPERATION_MANAGER.hide();
+				MOUSE_CURSOR( 'pointer');
 				return true;
-			},
-			onMouseMove: function( _mouseX, _mouseY){
-				var _x = _mouseX -panelX,
-					_y = _mouseY -panelY;
-				if( isDragging !== true){
-					if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
-					COMIC_ELEMENT_OPERATION_MANAGER.hide();
-					MOUSE_CURSOR( 'pointer');
-					return true;
+			} else {
+				var move = _y -offsetY;
+				if( isTop === true){
+					if( panelH - move < MIN_PANEL_HEIGHT){
+						move = panelH -MIN_PANEL_HEIGHT;
+					}
+					PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);
 				} else {
-					var move = _y -offsetY;
-					if( isTop === true){
-						if( panelH - move < MIN_PANEL_HEIGHT){
-							move = panelH -MIN_PANEL_HEIGHT;
-						}
-						PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);
-					} else {
-						var _h = startH +move;
-						if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){
-							PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);
-						}
+					var _h = startH +move;
+					if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){
+						PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);
 					}
 				}
-				return true;
-			},
-			onMouseUp: function( _mouseX, _mouseY){
-				if( isDragging !== true) return;
-				( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);
-				isDragging = false;
-				MOUSE_CURSOR( '');
-			},
-			busy: function(){
-				return isDragging
-			},
-			onPanelResize: function( _x, _y, _w, _h){
-				panelX = _x;
-				panelY = _y;
-				if( panelW !== _w){
-					ELM.style.width = ( _w +2) +'px';
-					panelW = _w;
-				}
-				panelH = _h;
-				y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);
-				w = panelW +2;
 			}
+			return true;
+		}
+		this.onMouseUp = function( _mouseX, _mouseY){
+			if( isDragging !== true) return;
+			( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);
+			isDragging = false;
+			MOUSE_CURSOR( '');
+		}
+		this.busy = function(){
+			return isDragging
+		}
+		this.onPanelResize = function( _x, _y, _w, _h){
+			panelX = _x;
+			panelY = _y;
+			if( panelW !== _w){
+				ELM.style.width = ( _w +2) +'px';
+				panelW = _w;
+			}
+			panelH = _h;
+			y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);
+			w = panelW +2;
 		}
 	};
-	var	PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),
-		PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);
+	var	PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true ),
+		PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );
 		
 	PanelResizerClass = undefined;
 
@@ -1965,7 +1463,7 @@ pettanr.editor = ( function(){
 			SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);
 			var _z = currentElement.z;
 			LAYER_BACK_BUTTON.visible( _z > 0);
-			LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
+			LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
 		}
 		function layerForward(){
 			if( currentElement === null) return;
@@ -1974,7 +1472,7 @@ pettanr.editor = ( function(){
 			SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);
 			var _z = currentElement.z;
 			LAYER_BACK_BUTTON.visible( _z > 0);
-			LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
+			LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
 		}
 		function del(){
 			if( currentElement === null) return;
@@ -1984,14 +1482,17 @@ pettanr.editor = ( function(){
 			COMIC_ELEMENT_OPERATION_MANAGER.hide();
 		}
 		function edit(){
-			if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;
-			TEXT_EDITOR_CONTROL.show( currentElement);
-			buttonBackOrForward( true);
+			if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;
+			pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), currentElement );
+			buttonBackOrForward( true );
 		}
 		function change(){
 			if( currentElement === null) return;
 			buttonBackOrForward( true);
-			IMAGE_GROUP_EXPROLER.show( currentElement.url);
+			pettanr.premiumSatge.bootInOverlay( currentElement.getArtistID(), currentElement.resourcePicture );
+		}
+		function onImageSelect( resourcePicture ){
+			currentElement.resourcePicture( resourcePicture );
 		}
 		return {
 			init: function(){
@@ -2018,7 +1519,9 @@ pettanr.editor = ( function(){
 											
 				delete CONSOLE_CONTROLER.init;
 			},
-			show: function( _currentElement, _w, _h){
+			show: function( _currentElement, _w, _h ){
+				CONSOLE_CONTROLER.init && CONSOLE_CONTROLER.init();
+				
 				visible === false && jqConsoleWrapper.show();
 				visible = true;
 				currentElement = _currentElement;
@@ -2026,17 +1529,17 @@ pettanr.editor = ( function(){
 					_z = _currentElement.z;
 				if( currentType !== _currentType){
 					currentType = _currentType;
-					jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);
-					jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);
-					consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
-					consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
+					jqImgConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_IMAGE);
+					jqTextConsole.toggle( _currentType === PANEL_ELEMENT_TYPE_TEXT);
+					consoleWidth = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
+					consoleHeight = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
 				}
 				consoleX = Math.floor( ( _w -consoleWidth) /2);
 				
 				LAYER_BACK_BUTTON.visible( _z > 0);
-				LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
+				LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
 				DELETE_BUTTON.visible( true);
-				EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);
+				EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT);
 				CHANGE_BUTTON.visible( false);
 				
 				if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){
@@ -2134,7 +1637,7 @@ pettanr.editor = ( function(){
 				currentText = null;
 			},
 			onStart: function( _currentText, _mouseX, _mouseY){
-				if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;
+				if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT) return false;
 				x = _currentText.x;
 				y = _currentText.y;
 				if( this.hitTest( _mouseX -x, _mouseY -y) === true){
@@ -2291,8 +1794,8 @@ pettanr.editor = ( function(){
 		return {
 			update: draw,
 			index: function( _mouseX, _mouseY){
-				var	p;
-				for( var i=4; i<8; i++){
+				var	p, i;
+				for( i=4; i<8; i++){
 					p = POSITION_ARRAY[ i];
 					if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
 						MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
@@ -2300,7 +1803,7 @@ pettanr.editor = ( function(){
 						return currentIndex = i;
 					}
 				}
-				for( var i=0; i<4; i++){
+				for( i=0; i<4; i++){
 					p = POSITION_ARRAY[ i];
 					if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
 						MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);
@@ -2314,7 +1817,7 @@ pettanr.editor = ( function(){
 			},
 			show: function( _currentElement){
 				currentElement = _currentElement;
-				currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;
+				currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
 				elmResizerContainerStyle.display = '';
 			},
 			hide: function(){
@@ -2323,7 +1826,7 @@ pettanr.editor = ( function(){
 			},
 			onStart: function( _currentElement, _mouseX, _mouseY){
 				currentElement = _currentElement;
-				currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;
+				currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
 				if( _currentElement.keepSize === true) return false;
 				currentIndex = this.index( _mouseX, _mouseY);
 				if( currentIndex === -1) return false;
@@ -2333,7 +1836,7 @@ pettanr.editor = ( function(){
 				startY = baseY = _currentElement.y;
 				startW = baseW = _currentElement.w;
 				startH = baseH = _currentElement.h;
-				if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){
+				if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){
 					startFilpV = _currentElement.flipV();
 					startFilpH = _currentElement.flipH();							
 				}
@@ -2386,7 +1889,7 @@ pettanr.editor = ( function(){
 						_h = MIN_ELEMENT_SIZE;
 					}
 				} else 
-				if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){
+				if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){
 					return;
 				} else 
 				if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
@@ -2454,7 +1957,7 @@ pettanr.editor = ( function(){
 			onCancel: function(){
 				MOUSE_CURSOR( '');
 				COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);
-				currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
+				currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
 					currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
 					currentElement.animate( startX, startY, startW, startH, angle);
 			},
@@ -2560,7 +2063,7 @@ pettanr.editor = ( function(){
 				if( currentElement !== _currentElement){
 					currentElement = _currentElement;
 					
-					currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);
+					currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT);
 					currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();
 					
 					flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;
@@ -2606,7 +2109,7 @@ pettanr.editor = ( function(){
 					_a = arg[ 5],
 					_flipV = arg[ 6], _flipH = arg[ 7];
 				if( !_currentElement && !currentOperator) return;
-				_currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?
+				_currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
 					_currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :
 					_currentElement.animate( _x, _y, _w, _h, _a);
 				currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
@@ -2629,9 +2132,9 @@ pettanr.editor = ( function(){
 			busy: function(){
 				return currentOperator !== null;
 			},
-			hitTest: function( _mouseX, _mouseY, _comicElement){
+			hitTest: function( _mouseX, _mouseY, _panelElement ){
 				var _x, _y, _w, _h;
-				if( _comicElement === currentElement){
+				if( _panelElement === currentElement){
 					var _consoleX = CONSOLE_CONTROLER.x();
 					_x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
 					_y = currenty -HIT_AREA;
@@ -2640,11 +2143,12 @@ pettanr.editor = ( function(){
 					var _consoleY = CONSOLE_CONTROLER.y();
 					_h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
 				} else {
-					_x = _comicElement.x -HIT_AREA;
-					_y = _comicElement.y -HIT_AREA;
-					_w = _comicElement.w +HIT_AREA *2;
-					_h = _comicElement.h +HIT_AREA *2;
+					_x = _panelElement.x -HIT_AREA;
+					_y = _panelElement.y -HIT_AREA;
+					_w = _panelElement.w +HIT_AREA *2;
+					_h = _panelElement.h +HIT_AREA *2;
 				}
+				log.html( [ _x, _y, _w, _h ].join( ' ') );
 				return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
 			},
 			onMouseDown: function( _currentElement, _mouseX, _mouseY){
@@ -2681,33 +2185,25 @@ pettanr.editor = ( function(){
 	 *  // COMIC_ELEMENT_OPERATION_MANAGER
 	 */
 
-	var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){
-		var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;
-		return {
-			$: JQ_WAPPER,
-			type: COMIC_ELM_TYPE,
-			x: x,
-			y: y,
-			w: w,
-			h: h,					
-			z: z,
-			timing: timing,
-			hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest(  _mouseX, _mouseY, this);},
-			shift: function( _shiftX, _shiftY){
-				update( this.x +_shiftX, this.y +_shiftY);
-			},
-			busy: function(){
-				return OPERATOR.busy();
-			},
-			onMouseMove: function( _mouseX, _mouseY){
-				OPERATOR.onMouseMove( this, _mouseX, _mouseY);
-			},
-			onMouseUp: function( _mouseX, _mouseY){
-				OPERATOR.onMouseUp( this, _mouseX, _mouseY);
-			},
-			onMouseDown: function( _mouseX, _mouseY){
-				OPERATOR.onMouseDown( this, _mouseX, _mouseY);
-			}
+	var AbstractComicElement = function( COMIC_ELM_TYPE ){
+		this.type = COMIC_ELM_TYPE;
+		this.hitTest = function( _mouseX, _mouseY ){
+			return COMIC_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );
+		}
+		this.shift = function( _shiftX, _shiftY ){
+			this.resize( this.x + _shiftX, this.y + _shiftY);
+		}
+		this.busy = function(){
+			return COMIC_ELEMENT_OPERATION_MANAGER.busy();
+		}
+		this.onMouseMove = function( _mouseX, _mouseY ){
+			COMIC_ELEMENT_OPERATION_MANAGER.onMouseMove( this, _mouseX, _mouseY );
+		}
+		this.onMouseUp = function( _mouseX, _mouseY ){
+			COMIC_ELEMENT_OPERATION_MANAGER.onMouseUp( this, _mouseX, _mouseY );
+		}
+		this.onMouseDown = function( _mouseX, _mouseY ){
+			COMIC_ELEMENT_OPERATION_MANAGER.onMouseDown( this, _mouseX, _mouseY );
 		}
 	};
 
@@ -2715,131 +2211,109 @@ pettanr.editor = ( function(){
  * ImageElementClass
  */
 	var	jqImageElementOrigin;
-	var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){
+	var ImageElementClass = function( data ){
 		jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());
 		
-		var JQ_WRAPPER = jqImageElementOrigin.clone( true),
-			OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,
-			SAVE = HISTORY_CONTROL.saveState,
-			HIT_AREA = MOUSE_HIT_AREA,
-			reversibleImage = null,
-			actualW = 0, actualH = 0,
+		var JQ_WRAPPER = jqImageElementOrigin.clone( true ),
+			w = data.width,
+			h = data.height,
+			x, y, z,
 			flipH = w < 0 ? -1 : 1,
 			flipV = h < 0 ? -1 : 1,
-			instance;
-		w = Math.floor( w);
-		h = Math.floor( h);
-		
-		function update( _x, _y, _w, _h, animate){
+			resourcePicture = data.resource_picture,
+			actualW = data.resource_picture.width,
+			actualH = data.resource_picture.height,
+			reversibleImage = null,
+			instance = this;
+		w = Math.floor( w );
+		h = Math.floor( h );
+
+		function onAnimeComplete(){
+			reversibleImage && reversibleImage.resize( flipH * w, flipV * h );
+		}
+		function updateResourcePicture( _resourcePicture ){
+			resourcePicture = _resourcePicture;
+			
+			actualW = _resourcePicture.width;
+			actualH = _resourcePicture.height;
+			
+			var _reversibleImage = pettanr.image.createReversibleImage( 
+					[ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),
+					flipH * w, flipV * h
+				);
+			if( reversibleImage !== null){
+				JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );
+				reversibleImage.destroy();
+			} else {
+				JQ_WRAPPER.append( _reversibleImage.elm );
+			}
+			reversibleImage = _reversibleImage;
+		}
+		/* global methods */
+		this.$ = JQ_WRAPPER;
+		//this.x = x;
+		//this.y = y;
+		//this.w = w;
+		//this.h = h;					
+		this.z = data.z;
+		this.timing = data.t;
+		this.init = function(){
+			updateResourcePicture( data.resource_picture );
+			instance.resize( data.x, data.y, data.width, data.height );
+			delete instance.init;
+		}
+		this.flip = function( _updateH, _updateV ){
+			if( _updateH !== true && _updateV !== true ) return;
+			flipH = _updateH === true ? -flipH : flipH;
+			flipV = _updateV === true ? -flipV : flipV;
+			reversibleImage.resize( flipH * w, flipV * h );
+		}
+		this.flipV = function(){
+			return flipV;
+		}
+		this.flipH = function(){
+			return flipH;
+		}
+		this.resourcePicture = function( _resourcePicture ){
+			if( _resourcePicture && _resourcePicture !== resourcePicture ){
+				HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );
+				updateResourcePicture( _resourcePicture );
+			}
+			return resourcePicture;
+		}
+		this.getArtistID = function(){
+			return resourcePicture.artist_id || resourcePicture.artist.id || -1;
+		}
+		this.actualW = function(){ return actualW;}
+		this.actualH = function(){ return actualH;}
+		this.keepSize = false;
+		this.resize = function( _x, _y, _w, _h, animate ){
 			instance.x = x = _x !== undefined ? _x : x;
 			instance.y = y = _y !== undefined ? _y : y;
 			instance.w = w = _w !== undefined ? _w : w;
 			instance.h = h = _h !== undefined ? _h : h;
-			JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { 
+			JQ_WRAPPER[ animate === true ? 'animate' : 'css' ]( { 
 				left:	x,
 				top:	y,
 				width:	w,
 				height:	h
-			}, 250, onAnimeComplete);
+			}, 250, onAnimeComplete );
 			animate !== true && onAnimeComplete();
 		}
-		function onAnimeComplete(){
-			reversibleImage.resize( flipH * w, flipV * h);
+		this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){
+			flipH = _flipH !== undefined ? _flipH : flipH;
+			flipV = _flipV !== undefined ? _flipV : flipV;
+			instance.resize( _x, _y, _w, _h, true );
 		}
-		
-		function updateUrl( _url){
-			if( url === _url) return;
-			url = _url || url;
-			var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){
-				actualW = _actualW;
-				actualH = _actualH;
-			});
-			if( reversibleImage !== null){
-				JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);
-				reversibleImage.destroy();
-			} else {
-				JQ_WRAPPER.append( _reversibleImage.elm);
-			}
-			reversibleImage = _reversibleImage;
+		this.destroy = function(){
+			delete instance.destroy;
+			
+			reversibleImage.destroy();
+			JQ_WRAPPER.stop().remove();
+			JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = null;
 		}
-		return pettanr.util.extend(
-			new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),
-			{
-				init: function(){
-					instance = this;
-					updateUrl();
-					update();
-					delete this.init;
-				},
-				flip: function( _flipH, _flipV){
-					if( _flipH !== true && _flipV !== true) return;
-					flipH = _flipH === true ? -flipH : flipH;
-					flipV = _flipV === true ? -flipV : flipV;
-					reversibleImage.resize( flipH * w, flipV * h);
-				},
-				flipV: function(){
-					return flipV;
-				},
-				flipH: function(){
-					return flipH;
-				},
-				url: function( _url, _actualW, _actualH){
-					if( _url && _url !== url){
-						SAVE( updateUrl, url, _url);
-						actualW = _actualW;
-						actualH = _actualH;
-						updateUrl( _url);
-					}
-					return url;
-				},
-				actualW: function(){ return actualW;},
-				actualH: function(){ return actualH;},
-				keepSize: false,
-				resize: update,
-				animate: function ( _x, _y, _w, _h, _flipH, _flipV){
-					flipH = _flipH !== undefined ? _flipH : flipH;
-					flipV = _flipV !== undefined ? _flipV : flipV;
-					update( _x, _y, _w, _h, true);
-				},
-				getAsHTML: function( isAbsoluteUrl, isXHTML){
-					return [
-						'<img ',
-							'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',
-							'width="', w, '" ',
-							'height="', h, '" ',
-							'style="',									
-								'left:', x, 'px;',
-								'top:', y, 'px;',
-								'z-index:', this.z, ';',
-							'"',
-						isXHTML !== true ? '>' : ' \/>'
-					].join( '');
-				},
-				getAsJsonString: function(){
-					var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
-					return [
-						'"new', this.timing, '": {', cr,
-							'"resource_picture_id": 1,', cr,
-							'"x": ', x, ',', cr,
-							'"y": ', y, ',', cr,
-							'"z": ', this.z, ',', cr,
-							'"width": ', w, ',', cr,
-							'"height": ', h, ',', cr,
-							'"flipv": ', flipV === true ? 1 : 0, ',', cr,
-							'"fliph": ', flipH === true ? 1 : 0, ',', cr,
-							'"t": ', this.timing, cr,
-						'}'
-					].join( '');
-				},
-				destroy: function(){
-					reversibleImage.destroy();
-					JQ_WRAPPER.remove();
-					JQ_WRAPPER = reversibleImage = OPERATOR = null;
-					delete this.destroy;
-				}
-			}
-		);
 	}
+	ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );
 /*
  * / ImageElementClass
  * --------------------------------------------------------------------------------------------
@@ -2859,24 +2333,77 @@ pettanr.editor = ( function(){
  * 
  */
 	var jqTextElementOrigin;
-	var TextElementClass = function( type, a, text, x, y, z, w, h, timing){
+	var TextElementClass = function( data ){
 		jqTextElementOrigin = jqTextElementOrigin || ( function(){
 			var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),
 				_MODERN = $( $( '#textElementTemplete').remove().html());
 			return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;
 		})();
 		
-		var JQ_WRAPPER = jqTextElementOrigin.clone( true),
-			XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),
-			TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),
-			OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,
-			HIT_AREA = MOUSE_HIT_AREA,
-			SAVE = HISTORY_CONTROL.saveState,
-			instance;
-			
-		JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);
+		var JQ_WRAPPER = jqTextElementOrigin.clone( true ),
+			elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ),
+			type     = data.balloon_template_id,
+			text     = ( function(){
+				var _speachs = data.speaches_attributes;
+				for( var k in _speachs ){
+					return _speachs[ k ].content || '';
+				}
+				return '';
+			})(),
+			balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),
+			x, y, w, h, a,
+			instance = this;
+		
+		JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm );
+		
+		function updateType( _type ){
+			if( type !== _type ){
+				type = _type || type;
+				balloon.type( type );
+			}
+		}
+		function updateAngle( _a ){
+			if( _a !== undefined && a !== _a ){
+				a = _a !== undefined ? _a : a;
+				balloon.angle( a );
+			}
+		}
+		function updateText( _text ){
+			text = _text || text || '';
+			elmText.firstChild.data = text;
+		}
+		function resizeBalloon(){
+			balloon && balloon.resize( a, w, h );
+		}
 		
-		function update( _x, _y, _w, _h, _a, animate){
+		/* global methods */
+		this.$ = JQ_WRAPPER;
+		//this.x = x;
+		//this.y = y;
+		//this.w = w;
+		//this.h = h;
+		this.z = data.z;
+		this.timing = data.t;
+		this.init = function(){
+			updateText();
+			instance.resize( data.x, data.y, data.width, data.height, data.tail );
+			delete instance.init;
+		}
+		this.angle = function( _a ){
+			_a !== undefined && instance.resize( x, y, w, h, _a );
+			return a;
+		}
+		this.text = function( _text ){
+			if( _text && text !== _text) {
+				HISTORY_CONTROL.saveState( updateText, text || '', _text );
+				updateText( _text );
+			}
+			return text;
+		}
+		this.getBalloonURL = function(){
+			return balloon.getURL();
+		}
+		this.resize = function( _x, _y, _w, _h, _a, animate ){
 			instance.x = x = _x !== undefined ? _x : x;
 			instance.y = y = _y !== undefined ? _y : y;
 			instance.w = w = _w !== undefined ? _w : w;
@@ -2888,119 +2415,22 @@ pettanr.editor = ( function(){
 					top:		y,
 					width:		w,
 					height:		h
-				}, 250,
-				function(){
-					XBROWSER_BALLOON.resize( a, w, h);
-				}
+				}, 250, resizeBalloon
 			);		
-			animate !== true && XBROWSER_BALLOON.resize( a, w, h);
-		}
-		
-		function updateType( _type){
-			if( type !== _type){
-				type = _type || type;
-				XBROWSER_BALLOON.type( type);
-			}
+			animate !== true && resizeBalloon();
 		}
-		function updateAngle( _a){
-			if( _a !== undefined && a !== _a){
-				a = _a !== undefined ? _a : a;
-				XBROWSER_BALLOON.angle( a);
-			}
+		this.animate = function ( _x, _y, _w, _h, _a ){
+			instance.resize( _x, _y, _w, _h, _a, true );
 		}
-		function updateText( _text){
-			text = _text || text || '';
-			TEXT_ELM.html( text);
+		this.destroy = function(){
+			delete instance.destroy;
+			
+			JQ_WRAPPER.stop().remove();
+			balloon.destroy();
+			JQ_WRAPPER = elmText = data = balloon = instance = null;
 		}
-		
-		return pettanr.util.extend(
-			new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),
-			{
-				init: function(){
-					instance = this;
-					updateText();
-					update();
-					delete this.init;
-				},
-				angle: function( _a){
-					_a !== undefined && update( undefined, undefined, undefined, undefined, _a);
-					return a;
-				},
-				text: function( _text){
-					if( _text && text !== _text) {
-						SAVE( updateText, text || '', _text);
-						updateText( _text);
-					}
-					return text;
-				},
-				resize: update,
-				animate: function ( _x, _y, _w, _h, _a){
-					update( _x, _y, _w, _h, _a, true);
-				},
-				destroy: function(){
-					JQ_WRAPPER.remove();
-					XBROWSER_BALLOON.destroy();
-					OPERATOR = null;
-					delete this.destroy;
-				},
-				getAsJSON: function(){
-					
-				},
-				getAsJsonString: function(){
-					var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
-					return [
-						'"new', this.timing, '": {', cr,
-							'"balloon_template_id": ', 1, ',', cr,
-							'"system_picture_id": ', 1, ',', cr,
-							'"size": ', 1, ',', cr,
-							'"tail": ', a, ',', cr,
-							'"x": ', x, ',', cr,
-							'"y": ', y, ',', cr,
-							'"z": ', this.z, ',', cr,
-							'"t": ', this.timing, ',', cr,
-							'"width": ', w, ',', cr,
-							'"height": ', h, ',', cr,
-							'"speaches_attributes": {', cr,
-      							'"newf', this.timing, '": {', cr,
-            						'"content": "', text, '",', cr,
-									'"x": ', x, ',', cr,
-									'"y": ', y, ',', cr,
-									'"t": ', 0, ',', cr,
-									'"width": ', w, ',', cr,
-									'"height": ', h, cr,
-								'}', cr,
-							'}', cr,
-						'}'
-					].join( '');
-				},
-				getAsHTML: function( isAbsoluteUrl, isXHTML){
-					var url = XBROWSER_BALLOON.getURL();
-					return [
-						'<img ',
-							'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',
-							'width="', w, '" ',
-							'height="', h, '" ',
-							'style="',									
-								'left:', x, 'px;',
-								'top:', y, 'px;',
-								'z-index:', this.z, ';',
-							'"',
-						isXHTML !== true ? '>' : ' \/>',
-						pettanr.LINE_FEED_CODE_TEXTAREA,
-						'<div class="balloon" style="',
-							'left:', x, 'px;',
-							'top:', y, 'px;',
-							'width:', w, 'px;',
-							'height:', h, 'px;',
-							'z-index:', this.z,
-						'"><span>', text, '<\/span>', '<\/div>'
-							
-					].join( '');
-				},
-				getAsXML: function(){}
-			}
-		);
 	}
+	TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );
 
 /* --------------------------------------------------------------------------------------------
  * COMIC_ELEMENT_CONTROL
@@ -3026,96 +2456,99 @@ pettanr.editor = ( function(){
 	 * 
 	 * append comicElement
 	 * 1. 新しい comicElement の z-position を得る
-	 * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（COMIC_ELEMENT_ARRAY）
-	 *    zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。
-	 * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。
+	 * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（PANEL_ELEMENT_ARRAY）
+	 *    zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。
+	 * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。
 	 * 
 	 * 
 	 * remove comicElement
 	 * 1. remove
 	 * 2. renumber z
 	 */
-		function appendComicElement( _comicElement) {
-			_comicElement.init && _comicElement.init();
-			var z = _comicElement.z,
-				l = COMIC_ELEMENT_ARRAY.length,
-				_jqElm = _comicElement.$.stop().css( {
+		function appendComicElement( _panelElement ) {
+			var z = _panelElement.z,
+				l = PANEL_ELEMENT_ARRAY.length,
+				_jqElm = _panelElement.$.stop().css( {
 					filter:		'',
 					opacity:	''
 				});
-			if( typeof z !== 'number' || z < 0 || z >= l){
-				COMIC_ELEMENT_ARRAY.unshift( _comicElement);
-				ELM_CONTAINER.appendChild( _jqElm.get( 0));
+			if( typeof z !== 'number' || z < 0 || z >= l ){
+				PANEL_ELEMENT_ARRAY.unshift( _panelElement );
+				ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
 				_jqElm.fadeIn();
+			} else
+			if( l === 0 ){
+				PANEL_ELEMENT_ARRAY.push( _panelElement );
+				ELM_CONTAINER.appendChild( _jqElm.get( 0 ));
 			} else {
 				var insertIndex = 0;
-				for( var i = 0; i < l; ++i){
-					if( COMIC_ELEMENT_ARRAY[ i].z <= z){
+				for( var i = 0; i < l; ++i ){
+					if( PANEL_ELEMENT_ARRAY[ i ].z <= z ){
 						insertIndex = i;
 						break;
 					}
 				}
-				COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());
-				COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);
+				PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );
+				PANEL_ELEMENT_ARRAY.splice( insertIndex, 0, _panelElement );
 			}
 			renumber();
 		}
-		function removeComicElement( _comicElement) {
-			var l = COMIC_ELEMENT_ARRAY.length;
+		function removeComicElement( _panelElement ) {
+			var l = PANEL_ELEMENT_ARRAY.length;
 			for( var i=0; i<l; ++i){
-				if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){
-					COMIC_ELEMENT_ARRAY.splice( i, 1);
+				if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){
+					PANEL_ELEMENT_ARRAY.splice( i, 1 );
 					renumber();
-					_comicElement.$.stop().css( {
+					_panelElement.$.stop().css( {
 						filter:		'',
 						opacity:	''
-					}).fadeOut( onFadeOut);
-					currentElement = currentElement === _comicElement ? null : currentElement;
+					}).fadeOut( onFadeOut );
+					currentElement = currentElement === _panelElement ? null : currentElement;
 					return;
 				}
 			}
 			function onFadeOut(){
-				this.parentNode.removeChild( this);
+				this.parentNode.removeChild( this );
 			}
 		}
-		function restoreComicElement( arg){
-			var isAppend = arg[ 0],
-				comicElement = arg[ 1];
-			isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);
+		function restoreComicElement( arg ){
+			var isAppend = arg[ 0 ],
+				comicElement = arg[ 1 ];
+			isAppend === true ? appendComicElement( comicElement ) : removeComicElement( comicElement );
 		}
 		/*
-		 * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算
+		 * PANEL_ELEMENT_ARRAY の順番を基準に、zの再計算
 		 * jqElmの並び替え。
 		 */
 		function renumber(){
-			var l = COMIC_ELEMENT_ARRAY.length,
-				_comicElement, jqElm, jqNext;
+			var l = PANEL_ELEMENT_ARRAY.length,
+				_panelElement, jqElm, jqNext;
 			for( var i=0; i < l; ++i){
-				_comicElement = COMIC_ELEMENT_ARRAY[ i];
-				jqElm = _comicElement.$;
-				jqNext && jqNext.before( jqElm);
-				_comicElement.z = l -i -1;
+				_panelElement = PANEL_ELEMENT_ARRAY[ i ];
+				jqElm = _panelElement.$;
+				jqNext && jqNext.before( jqElm );
+				_panelElement.z = l -i -1;
 				jqNext = jqElm;
 			}
 		}
-		function replaceComicElement( _comicElement, goForward){
-			// COMIC_ELEMENT_ARRAYの再構築
-			var l = COMIC_ELEMENT_ARRAY.length,
+		function replaceComicElement( _panelElement, goForward ){
+			// PANEL_ELEMENT_ARRAYの再構築
+			var l = PANEL_ELEMENT_ARRAY.length,
 				i = ( function(){
-					for( var ret = 0; ret < l; ++ret){
-						if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;
+					for( var ret = 0; ret < l; ++ret ){
+						if( PANEL_ELEMENT_ARRAY[ ret] === _panelElement ) return ret;
 					}
 					return -1;
 				})();
 			if( i === -1) return false;
 			if( goForward === true){
 				if( i === 0) return false;
-				COMIC_ELEMENT_ARRAY.splice( i, 1);
-				COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);
+				PANEL_ELEMENT_ARRAY.splice( i, 1);
+				PANEL_ELEMENT_ARRAY.splice( i -1, 0, _panelElement);
 			} else {
 				if( i === l -1) return false;
-				COMIC_ELEMENT_ARRAY.splice( i, 1);
-				COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);
+				PANEL_ELEMENT_ARRAY.splice( i, 1);
+				PANEL_ELEMENT_ARRAY.splice( i +1, 0, _panelElement);
 			}
 			renumber();
 			return true;
@@ -3123,15 +2556,32 @@ pettanr.editor = ( function(){
 		function restoreReplaceElement( arg){
 			replaceComicElement( arg[ 0], arg[ 1]);
 		}
-		
+
+		function onImageSelect( data, isPanelPictureData ){
+			if( isPanelPictureData !== true ){
+				data = {
+					resource_picture:data,
+					x:               Math.floor( panelW /2 - data.width /2 ),
+					y:               Math.floor( panelH /2 - data.height /2 ),
+					z:               -1,
+					t:               PANEL_ELEMENT_ARRAY.length,
+					width:           data.width,
+					height:          data.height
+				}
+			}
+			var _panelElement = new ImageElementClass( data );
+			_panelElement.init && _panelElement.init();
+			appendComicElement( _panelElement );
+			_panelElement.animate( undefined, undefined, data.width, data.height );
+			SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement], true );
+		}
+		function onTextInput( _panelElement ){
+			appendComicElement( _panelElement );
+			SAVE( restoreComicElement, [ false, _panelElement ], [ true, _panelElement ], true );
+		}
+	
 		return {
 			init: function(){
-				
-				appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));
-				appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));
-			/*
-			 * 
-			 */
 				log = $( '#operation-catcher-log');
 				
 				delete COMIC_ELEMENT_CONTROL.init;
@@ -3140,24 +2590,26 @@ pettanr.editor = ( function(){
 				COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();
 			},
 			close: function(){
-				while( COMIC_ELEMENT_ARRAY.length > 0){
-					COMIC_ELEMENT_ARRAY.shift().destroy();
+				var _comicElm;
+				while( PANEL_ELEMENT_ARRAY.length > 0){
+					_comicElm = PANEL_ELEMENT_ARRAY.shift();
+					_comicElm.destroy && _comicElm.destroy();
 				}
 			},
 			remove: removeComicElement,
 			restore: restoreComicElement,
 			replace: replaceComicElement,
 			restoreReplace: restoreReplaceElement,
-			onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){
+			onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){
 			/*
 			 * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。
 			 */					
 				if( isResizerTopAction === true){
 					var	_shiftX = _panelW -panelW,
 						_shiftY = _panelH -panelH,
-						l = COMIC_ELEMENT_ARRAY.length;
+						l = PANEL_ELEMENT_ARRAY.length;
 					for( var i = 0; i < l; i++){
-						COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);
+						PANEL_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);
 					}
 				}
 				panelX = _panelX;
@@ -3170,20 +2622,20 @@ pettanr.editor = ( function(){
 				ELM_CONTAINER.style.left	= _panelX +'px';
 				ELM_CONTAINER.style.top		= _panelY +'px';
 			},
-			onMouseMove: function( _mouseX, _mouseY){
-				var l = COMIC_ELEMENT_ARRAY.length,
+			onMouseMove: function( _mouseX, _mouseY ){
+				var l = PANEL_ELEMENT_ARRAY.length,
 					_x = _mouseX -panelX,
 					_y = _mouseY -panelY,
 					_elm = currentElement;
 					
 				if( _elm !== null){
 					currentLockTest = currentLockTest === true && _x === 0 && _y === 0;
-					if( _elm.busy() === true){
+					if( _elm.busy() === true ){
 						_elm.onMouseMove( _x, _y);
 						return true;
 					}
-					if( _elm.hitTest( _x, _y) === true){
-						_elm.onMouseMove( _x, _y); // cursor
+					if( _elm.hitTest( _x, _y) === true ){
+						_elm.onMouseMove( _x, _y ); // cursor
 						return true;
 					}
 					if( currentLock === true){
@@ -3192,18 +2644,19 @@ pettanr.editor = ( function(){
 					}
 				}
 				for( var i=0; i<l; i++){
-					_elm = COMIC_ELEMENT_ARRAY[ i];
+					_elm = PANEL_ELEMENT_ARRAY[ i ];
 					// hitTest
-					if( _elm.hitTest( _x, _y) === true){
-						_elm.onMouseMove( _x, _y); // cursor
+					if( _elm.hitTest( _x, _y ) === true ){
+						_elm.onMouseMove( _x, _y ); // cursor
 						log.html( [ _x, _y, i].join( ','));
 						currentElement = _elm;
 						return true;
+					} else {
+						log.html( [ _elm.x, _elm.y, i].join( ','));
 					}
 				}
 				currentElement = null;							
 				COMIC_ELEMENT_OPERATION_MANAGER.hide();
-				log.html( [ _x, _y].join( ','));
 				return false;
 			},
 			onMouseUp: function( _mouseX, _mouseY){
@@ -3225,123 +2678,44 @@ pettanr.editor = ( function(){
 			busy: function(){
 				return currentElement !== null;
 			},
-			createImageElement: function( url, imagesetID, x, y, z, w, h){
-				w = w || 200; //ActualWidth
-				h = h || 150; //ActualHeight
-				x = x || Math.floor( panelW /2 -w /2);
-				y = y || Math.floor( panelH /2 -h /2);
-				function onImageSelect( _url, _w, _h){
-					var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);
-					appendComicElement( _comicElement);
-					_comicElement.animate( undefined, undefined, _w, _h);
-					SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);					
-				}
-				IMAGE_GROUP_EXPROLER.show( onImageSelect);
-			},
-			createTextElement: function( type, angle, text, x, y, z, w, h){
-				type = type || 0;
-				angle = angle || 0;
-				text = text || '';
-				w = w || 200;
-				h = h || 150;
-				x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);
-				y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);
-				var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);
-				TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){
-					appendComicElement( _comicElement);
-					SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);
-				});
-			},
-			getAsHTML: function( isAbsoluteUrl, isXHTML){
-				var HTML_ARRAY = [],
-					l = COMIC_ELEMENT_ARRAY.length,
-					_timing = 0,
-					_comicElement;
-
-				while( HTML_ARRAY.length < l){
-					_comicElement = getComicElementByTiming();
-					if( _comicElement === null) break;
-					HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));
-				}
-				function getComicElementByTiming(){
-					while( _timing < l *2){
-						for(var i=0; i<l; ++i){
-							if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){
-								++_timing;
-								return COMIC_ELEMENT_ARRAY[ i];
-							}
-						}
-						++_timing;
-					}
-					return null;
-				}
-				HTML_ARRAY.unshift(
-					[
-						'<div class="panel" ',
-							'style="',
-								'height:', panelH, 'px;',
-								'background-color:', ';',
-							'"',
-						'>'
-					].join( '')
-				);		
-				HTML_ARRAY.push( '</div>');
-				
-				return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);
-			},
-			getAsJsonString: function(){
-				var JSON_STRING_ARRAY = [],
-					IMAGE_ARRAY = [],
-					BALLOON_ARRAY = [],
-					l = COMIC_ELEMENT_ARRAY.length,
-					_timing = 0,
-					_comicElement,
-					cr = pettanr.LINE_FEED_CODE_TEXTAREA;
-					
-				while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){
-					_comicElement = getComicElementByTiming();
-					if( _comicElement === null) break;
-					_comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? 
-						IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :
-						BALLOON_ARRAY.push( _comicElement.getAsJsonString());
-				}
-				function getComicElementByTiming(){
-					while( _timing < l *2){
-						for(var i=0; i<l; ++i){
-							if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){
-								++_timing;
-								return COMIC_ELEMENT_ARRAY[ i];
+			createImageElement: function( data ){
+				if( Type.isObject( data ) === false ){
+					pettanr.premiumSatge.bootInOverlay( 1, onImageSelect );
+				} else {
+					onImageSelect( data, true );
+				}
+			},
+			createTextElement: function( data ){
+				var _panelElement;
+				if( Type.isObject( data ) === false ){
+					data = {
+						balloon_template_id:1,
+						size:               1,
+						tail:               0,
+						x:					Math.floor( panelW /2 - 100 +Math.random() *10 ),
+						y:                  Math.floor( panelH /2 - 100 +Math.random() *10 ),
+						z:                  -1,
+						t:                  PANEL_ELEMENT_ARRAY.length,
+						width:              200,
+						height:             200,
+						speaches_attributes: {
+							text1: {
+								content:    'Hello'
 							}
 						}
-						++_timing;
 					}
-					return null;
+					_panelElement = new TextElementClass( data );
+					_panelElement.init();
+					pettanr.textEditor.bootInOverlay( PANEL_CONTROL.x(), PANEL_CONTROL.y(), _panelElement, onTextInput );
+				} else {
+					_panelElement = new TextElementClass( data );
+					_panelElement.init();
+					onTextInput( _panelElement );
 				}
-				return [
-					'{', cr,
-						'"panel": {', cr,
-						    '"border": 1,', cr,
-						    '"comic_id": 5,', cr,
-						    '"resource_picture_id": 1,', cr,
-							'"x": ', 0, ',', cr,
-							'"y": ', 0, ',', cr,
-							'"z": ', 0, ',', cr,
-							'"t": ', 0, ',', cr,
-						    '"width": ', panelW, ',', cr,
-						    '"height": ', panelH, ',', cr,
-						    '"panel_pictures_attributes": {', cr,
-						    	IMAGE_ARRAY.join( ',' +cr), cr,
-						    '},', cr,
-						    '"balloons_attributes": {', cr,
-						    	BALLOON_ARRAY.join( ',' +cr), cr,
-						    '}', cr,
-						'}', cr,
-					'}'
-				].join( '');
 			}
 		}
 	})();
-	
+
 	/*
 	 * end of COMIC_ELEMENT_CONTROL
 	 */
@@ -3358,7 +2732,7 @@ pettanr.editor = ( function(){
 		}
 	}
 	function centering(){
-		pettanr.editor.onWindowResize( windowW, windowH);
+		instance.onPaneResize( windowW, windowH);
 	}	
 	function mouseEventRellay( e){
 		var _mouseX = e.pageX,
@@ -3386,863 +2760,1015 @@ pettanr.editor = ( function(){
 		return false;
 	}
 
-	return {
-		init: function( _option){
-			option = _option;
-			
-		},
-		firstOpen: function(){
-		/*
-		 * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初
-		 * MENU_BAR_CONTROL,
-		 * WINDOW_CONTROL,
-		 * COMIC_ELEMENT_CONTROL,
-		 * PANEL_CONTROL
-		 * .busy() === true なら、そのままonMouseMove()にイベントを流す．
-		 * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．
-		 */
-			MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);
-			
-			CONSOLE_CONTROLER.init();
-			
-			OUTPUT_CONSOLE.init();
-			TEXT_EDITOR_CONTROL.init();
-			IMAGE_GROUP_EXPROLER.init();
-
-		/*
-		 * centering
-		 */
-			pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);	// ctrl + 0
-			pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);	// ctrl + 0
-			MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);
-		/*
-		 * jqMouseEventChacher は透明な要素で、
-		 * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
-		 * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
-		 */			
-			jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)
-				.mousemove( mouseEventRellay)
-				.mousedown( mouseEventRellay)
-				.mouseup( mouseEventRellay)
-				.mouseout( mouseEventRellay);
-			
-			delete pettanr.editor.firstOpen;
-		},
-		onOpen: function( _file){
-			if( pettanr.file.isFileInstance( _file) === true){
-				// pettanr.file.isPettanFileInstance( _file) === true
-				// 
-			}
-			jqEditor = jqEditor || $( '#editor');
-			
-			HISTORY_CONTROL.open();
-			
-			WINDOWS_CONTROL.open();
-			
-			GRID_CONTROL.open();
-			PANEL_CONTROL.open();
-			
-			COMIC_ELEMENT_OPERATION_MANAGER.open();
-			COMIC_ELEMENT_CONTROL.open();
-			
-			// last
-			MENU_BAR_CONTROL.open();
-			
-			pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();
-		},
-		onClose: function(){
-			HISTORY_CONTROL.close();
-			
-			WINDOWS_CONTROL.close();
-			
-			GRID_CONTROL.close();
-			PANEL_CONTROL.close();
-			
-			COMIC_ELEMENT_OPERATION_MANAGER.close();
-			COMIC_ELEMENT_CONTROL.close();
-			
-			// last
-			MENU_BAR_CONTROL.open();
-		},
-		onWindowResize: function( _windowW, _windowH){
-			windowW = _windowW;
-			windowH = _windowH;
-			if( pettanr.editor.firstOpen) return;
-			/*
-			 * ieは +'px'が不要みたい
-			 */
-			jqEditor.get( 0).style.height = _windowH +'px';
-			ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';
-			
-			WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);
-			MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);
-			PANEL_CONTROL.onWindowResize( _windowW, _windowH);
-		},
-		MIN_WIDTH:	320,
-		MIN_HEIGHT:	320
+	/* grobal method */
+	this.rootElement = document.getElementById( 'editor' );
+	this.displayName = pettanr.view.EDITOR;
+	this.ID          = pettanr.view.EDITOR;
+	this.MIN_WIDTH   = 320;
+	this.MIN_HEIGHT  = 320;
+	this.firstOpen = function(){
+	/*
+	 * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初
+	 * MENU_BAR_CONTROL,
+	 * WINDOW_CONTROL,
+	 * COMIC_ELEMENT_CONTROL,
+	 * PANEL_CONTROL
+	 * .busy() === true なら、そのままonMouseMove()にイベントを流す．
+	 * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．
+	 */
+		MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);
+	/*
+	 * centering
+	 */
+		pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);	// ctrl + 0
+		pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);	// ctrl + 0
+		MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);
+	/*
+	 * jqMouseEventChacher は透明な要素で、
+	 * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
+	 * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
+	 */			
+		jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)
+			.mousemove( mouseEventRellay)
+			.mousedown( mouseEventRellay)
+			.mouseup( mouseEventRellay)
+			.mouseout( mouseEventRellay);
+		
+		delete instance.firstOpen;
 	}
-})();
-
-// create hidden iframe
-// write script
-// setInterval
-pettanr.proxy = ( function(){
-	
-	function FormProxy( formJsUrl, callback){
-		var timer = null,
-			iWin, idoc;
-
-		pettanr.util.createIframe( 'id00000', onCreateIframe);
+	this.onOpen = function( _w, _h, _file ){
+		comicID = -1;
+		panelID = -1;
+		panelTimming = -1;
 		
-		function onCreateIframe( _iframe){
-			iWin = _iframe.contentWindow;
-			idoc = _iframe.contentWindow.document;
-
-			idoc.open();
-			idoc.write( '<body>');
-			idoc.writeln( '<script type="text\/javascript" src="' + pettanr.CONST.JQUERY_URL+ '"><\/script>');
-			idoc.close();
-
-			timer = window.setInterval( detect, 250 );
-		}
-		function detect(){
-			if( iWin.jQuery){
-				window.clearInterval( timer );
-				//callback( idoc);
-				iWin.jQuery( iWin).ready( onJQueryReady );
+		var panelW, panelH,
+			borderSize,
+			fileData, panelElements, panelElm;
+		
+		if( pettanr.file.isFileInstance( _file ) === true ){
+			if( pettanr.driver.isPettanrFileInstance( _file ) === true ){
+				if( _file.getType() === pettanr.driver.FILE_TYPE.COMIC ){
+					fileData = _file.read();
+					panelW = fileData.width;
+					panelH = fileData.height;
+					comicID = fileData.id || -1;
+				} else
+				if( _file.getType() === pettanr.driver.FILE_TYPE.PANEL ){
+					fileData = _file.read();
+					panelW = fileData.width;
+					panelH = fileData.height;
+					borderSize = fileData.border;
+					panelElements = fileData.panel_elements;
+					comicID = fileData.comic ? fileData.comic.id || -1 : -1;
+					panelID = fileData.id || -1;
+					panelTimming = fileData.t || -1;
+					if( Type.isArray( panelElements ) === true ){
+						for( var i=0; i<panelElements.length; ++i){
+							panelElm = panelElements[ i ];
+							if( panelElm.resource_picture ){
+								COMIC_ELEMENT_CONTROL.createImageElement( panelElm );
+							} else
+							if( panelElm.balloon_template_id ){
+								COMIC_ELEMENT_CONTROL.createTextElement( panelElm );
+							}
+						}						
+					}
+				}
+			} else {
+				
 			}
 		}
-		function onJQueryReady(){
-			callback( idoc);
-		}
+		jqEditor = jqEditor || $( '#editor');
+		
+		HISTORY_CONTROL.open();
+		
+		WINDOWS_CONTROL.open();
+		
+		GRID_CONTROL.open();
+		PANEL_CONTROL.open( panelW, panelH, borderSize );
+		
+		COMIC_ELEMENT_OPERATION_MANAGER.open();
+		COMIC_ELEMENT_CONTROL.open();
+		
+		instance.firstOpen !== undefined && instance.firstOpen();
+		
+		// last
+		MENU_BAR_CONTROL.open();
+		
+		windowW = _w;
+		windowH = _h;
+		instance.onPaneResize( _w, _h );
 	}
-	
-	return {
-		createFormProxy: function( _formJsUrl, _callback){
-			new FormProxy( _formJsUrl, _callback);
-		}
+	this.onClose = function(){
+		HISTORY_CONTROL.close();
+		
+		WINDOWS_CONTROL.close();
+		
+		GRID_CONTROL.close();
+		PANEL_CONTROL.close();
+		
+		COMIC_ELEMENT_OPERATION_MANAGER.close();
+		COMIC_ELEMENT_CONTROL.close();
+		
+		// last
+		MENU_BAR_CONTROL.open();
 	}
-	
-})();
-
-
-pettanr.comicConsole = ( function(){
-	var COMIC_CONSOLE = ( function(){
-		var jqWrap,
-			ID = 'comicConsole',
-			elmWrap = document.getElementById( 'comic-console-wrapper' ),
-			elmHeader = document.getElementById( 'comic-console-header' ),
-			elmProgress = document.getElementById( 'comic-console-progress' ),
-			inputTitle, inputW, inputH, inputVisible, inputEditable,
-			elmUploader = null,
-			elmScript = null
-			elmIframe = null,
-			elmForm = null,
-			timer = null,
-			isUploading = false;
-		//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
+	this.onPaneResize = function( _windowW, _windowH){
+		windowW = _windowW || windowW;
+		windowH = _windowH || windowH;
+		/*
+		 * ieは +'px'が不要みたい
+		 */
+		jqEditor.get( 0).style.height = _windowH +'px';
+		ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';
 		
-		function clickOK(){
-			if( !elmForm || !elmIframe || isUploading === true ) return false;
-			// validate
-			isUploading = true;
-			elmProgress.innerHTML = '■';
-			copyAndSubmit();
-		}
+		WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);
+		MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);
+		PANEL_CONTROL.onWindowResize( _windowW, _windowH);
+	}
+});
+
+
+pettanr.comicConsole = pettanr.view.registerApplication( function(){
+	var jqWrap,
+		ID = 'comicConsole',
+		elmWrap = document.getElementById( 'comic-console-wrapper' ),
+		elmHeader = document.getElementById( 'comic-console-header' ),
+		elmProgress = document.getElementById( 'comic-console-progress' ),
+		inputTitle, inputW, inputH,
+		comboboxVisible, comboboxEditable,
+		buttonSubmit, buttonCancel,
+		elmUploader = null,
+		elmScript = null,
+		elmIframe = null,
+		elmForm = null,
+		timer = null,
+		isUploading = false,
+		instance = this;
+	//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
+	
+	function clickOK(){
+		if( !elmForm || !elmIframe || isUploading === true ) return false;
+		// validate
+		isUploading = true;
+		elmProgress.innerHTML = '■';
+		copyAndSubmit();
+	}
 
-			function copyAndSubmit(){
-				var _inputList = elmForm.getElementsByTagName( 'input' ),
-					_input, _name;
-				for( var i=0, l= _inputList.length; i<l; ++i){
-					_input = _inputList[ i ];
-					_name = _input.name;
-					if( _name === 'comic[title]'){
-						_input.value = inputTitle.value();
-					} else
-					if( _name === 'comic[width]'){
-						_input.value = inputW.value();
-					} else
-					if( _name === 'comic[height]'){
-						_input.value = inputH.value();
-					}
-				}
-				var _selectList = elmForm.getElementsByTagName( 'select' ),
-					_select, _name, _optionList;
-				for( i=0, l= _selectList.length; i<l; ++i){
-					_select = _selectList[ i ];
-					_name = _select.name;
-					_optionList = _select.getElementsByTagName( 'option' )
-					if( _name === 'comic[visible]'){
-						_select.selectedIndex = 1;
-					} else
-					if( _name === 'comic[editable]'){
-						_select.selectedIndex = 0;
-					}
-				}
-				try {
-					elmForm.submit();
-				} catch( e){
-					elmProgress.innerHTML = 'submit() err..';
-					isUploading = false;
-					setTimeout( clickCancel , 3000);
-					return;
-				}
-				if( pettanr.ua.isIE){
-					elmIframe.onreadystatechange = detectIframe;
-				} else {
-					elmIframe.onload = onIframeUpdate;
+		function copyAndSubmit(){
+			var _inputList = elmForm.getElementsByTagName( 'input' ),
+				_input, _name;
+			for( var i=0, l= _inputList.length; i<l; ++i){
+				_input = _inputList[ i ];
+				_name = _input.name;
+				if( _name === 'comic[title]'){
+					_input.value = inputTitle.value();
+				} else
+				if( _name === 'comic[width]'){
+					_input.value = inputW.value();
+				} else
+				if( _name === 'comic[height]'){
+					_input.value = inputH.value();
 				}
-				elmProgress.innerHTML = 'uploading..';
 			}
-		/*
-		 * ie の 場合、readyState をチェック．
-		 */
-				function detectIframe(){
-		            if ( elmIframe.readyState === 'complete') {
-		                elmIframe.onreadystatechange = new Function();
-		                elmIframe.onreadystatechange = null;
-		                onIframeUpdate();
-		            }
+			var _selectList = elmForm.getElementsByTagName( 'select' ),
+				_select, _optionList;
+			for( i=0, l= _selectList.length; i<l; ++i){
+				_select = _selectList[ i ];
+				_name = _select.name;
+				_optionList = _select.getElementsByTagName( 'option' )
+				if( _name === 'comic[visible]'){
+					_select.selectedIndex = comboboxVisible.selectIndex();
+				} else
+				if( _name === 'comic[editable]'){
+					_select.selectedIndex = comboboxEditable.selectIndex();
 				}
-					function onIframeUpdate(){
-						elmIframe.onload = null;
-						( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-						elmIframe = null;
-						elmProgress.innerHTML = 'success!';
-						setTimeout( clickCancel , 1000);
-						isUploading = false;
-					}
-				
-		function clickCancel(){
-			if( isUploading === true) return false;
-			pettanr.overlay.hide();
-			COMIC_CONSOLE.onClose();
-		}
-		function detectForm(){
-			elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];
-			if( elmForm){
-				window.clearInterval( timer);
-				timer = null;
-				pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );
-				elmProgress.innerHTML = 'create iframe';
 			}
+			try {
+				elmForm.submit();
+			} catch( e){
+				elmProgress.innerHTML = 'submit() err..';
+				isUploading = false;
+				setTimeout( clickCancel , 3000);
+				return;
+			}
+			if( pettanr.ua.isIE){
+				elmIframe.onreadystatechange = detectIframe;
+			} else {
+				elmIframe.onload = onIframeUpdate;
+			}
+			elmProgress.innerHTML = 'uploading..';
 		}
-		function onCreateIframe( _iframe ){
-			elmUploader.appendChild( _iframe );
-			elmIframe = _iframe;
-			elmForm.target = _iframe.name;
-			elmProgress.innerHTML = '';
-		}
-		
-		return {
-			init: function(){
-				this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();
-				$( '#comic-console-post-button').click( clickOK );
-				$( '#comic-console-cancel-button').click( clickCancel );
-				
-				var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;
-				inputTitle    = CREATER( document.getElementById( 'comic-console-title'), null, ID);
-				inputW        = CREATER( document.getElementById( 'comic-console-width'), null, ID);
-				inputH        = CREATER( document.getElementById( 'comic-console-height'), null, ID);
-				inputVisible  = CREATER( document.getElementById( 'comic-console-visible'), null, ID);
-				inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);
-				
-				delete COMIC_CONSOLE.init;
-			},
-			jqWrap: null,
-			show: function( w, h){
-				jqWrap.show();
-
-				pettanr.overlay.show( COMIC_CONSOLE );
-				
-				inputTitle.start();
-				
-				elmUploader = document.createElement( 'div');
-				elmUploader.id = "newcomic";
-				elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
-				elmWrap.appendChild( elmUploader);
-				
-				var elmScript = document.createElement( 'script');
-				elmScript.type = 'text\/javascript';
-				elmScript.src = pettanr.CONST.CREATE_COMIC_JS;
-				elmWrap.appendChild( elmScript);
-				
-				elmProgress.innerHTML = 'loading form.';
-				
-				if( timer === null){
-					timer = window.setInterval( detectForm, 250);
+	/*
+	 * ie の 場合、readyState をチェック．
+	 */
+			function detectIframe(){
+	            if ( elmIframe.readyState === 'complete') {
+	                elmIframe.onreadystatechange = new Function();
+	                elmIframe.onreadystatechange = null;
+	                onIframeUpdate();
+	            }
+			}
+				function onIframeUpdate(){
+					elmIframe.onload = null;
+					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
+					elmIframe = null;
+					elmProgress.innerHTML = 'success!';
+					setTimeout( clickCancel , 1000);
+					isUploading = false;
 				}
-				
-				COMIC_CONSOLE.onWindowResize( w, h);
-			},
-			onWindowResize: function( _windowW, _windowH){
-				jqWrap.css(
-					{
-						left:	Math.floor( ( _windowW -jqWrap.width()) /2),
-						top:	Math.floor( ( _windowH -jqWrap.height()) /2)
+			
+	function clickCancel(){
+		if( isUploading === true) return false;
+		pettanr.comicConsole.shutdown();
+	}
+	function detectForm(){
+		elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];
+		if( elmForm ){
+			var selectList = elmForm.getElementsByTagName( 'select' ),
+				select,
+				j, m,
+				optionList, option;
+			for( var i=0, l=selectList.length; i<l; ++i ){
+				select = selectList[ i ];
+				optionList = select.getElementsByTagName( 'option' );
+				for( j=0, m=optionList.length; j<m; ++j ){
+					option = optionList[ j ];
+					if( select.name === 'comic[visible]' ){
+						comboboxVisible.createOption( option.innerHTML, option.value, option.selected );
+					} else
+					if( select.name === 'comic[editable]' ){
+						comboboxEditable.createOption( option.innerHTML, option.value, option.selected );
 					}
-				);
-			},
-			onClose: function(){
-				elmForm !== null && $( elmUploader ).remove();
-				elmForm  = null;
-				isUploading = false;
-				
-				if( elmScript !== null ){
-					document.body.removeChild( elmScript);
-					elmScript = null;					
 				}
-				if( timer !== null){
-					window.clearInterval( timer);
-					timer = null;
-				}
-				
-				jqWrap.hide();
-			},
-			ID: ID
-		}
-	})();
-	
-	return {
-		init: function(){
-			COMIC_CONSOLE.init();
-			delete pettanr.comicConsole.init;
-		},
-		onOpen: function( _file){
-			if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){
-				// _data = _file.read();
 			}
-		},
-		onClose: function(){
 			
-		},
-		onWindowResize: function( _windowW, _windowH){
-		},
-		_quickAccessShow: function(){
-			jqWindow = pettanr.jqWindow();
-			var w = jqWindow.width(),
-				h = jqWindow.height();
-			COMIC_CONSOLE.show( w, h);
+			window.clearInterval( timer);
+			timer = null;
+			pettanr.util.createIframe( 'targetFrameCreateComic', onCreateIframe );
+			elmProgress.innerHTML = 'create iframe';
 		}
 	}
-})();
+	function onCreateIframe( _iframe ){
+		elmUploader.appendChild( _iframe );
+		elmIframe = _iframe;
+		elmForm.target = _iframe.name;
+		elmProgress.innerHTML = '';
+	}
 
-pettanr.uploadConsole = ( function(){
-	var UPLOAD_CONSOLE = ( function(){
-		var jqWrap,
-			ID = 'uploadConsole',
-			TARGET_FRAME_NAME = 'targetFrame',
-			elmContainer = document.getElementById( 'uploader'),
-			elmProgress = document.getElementById( 'upload-console-progress'),
-			timer = null,
-			elmScript = null,
-			elmForm = null,
-			elmFile = null,
-			elmIframe = null,
-			isUploading = false;
-		/*
-		 * upload ボタンが押されたらまず iframe をつくる．
-		 */
-		function clickOK(){
-			if( !elmForm || !elmIframe || isUploading === true ) return false;
-			if( elmFile.value.length === 0) return false;
-			elmProgress.innerHTML = 'uploading.';
-			isUploading = true;
-			submit();
-			return false;
+	/* grobal method */
+	this.rootElement = document.getElementById( 'comic-console-wrapper' );
+	this.displayName = ID;
+	this.ID          = ID;
+	this.MIN_WIDTH   = 320;
+	this.MIN_HEIGHT  = 320;
+	this.init = function(){
+		jqWrap = $( '#comic-console-wrapper').hide();
+		
+		inputTitle    = pettanr.form.createInputText( document.getElementById( 'comic-console-title'), null, ID);
+		inputW        = pettanr.form.createInputText( document.getElementById( 'comic-console-width'), null, ID);
+		inputH        = pettanr.form.createInputText( document.getElementById( 'comic-console-height'), null, ID);
+		comboboxVisible  = pettanr.form.createCombobox( document.getElementById( 'comic-console-visible'), null, ID);
+		comboboxEditable = pettanr.form.createCombobox( document.getElementById( 'comic-console-editable'), null, ID);
+		buttonSubmit  = pettanr.form.createButton( document.getElementById( 'comic-console-post-button'), clickOK, ID);
+		buttonCancel  = pettanr.form.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel, ID);
+		
+		delete instance.init;
+	}
+	this.onOpen = function( w, h ){
+		instance.init && instance.init();
+		
+		jqWrap.show();
+		
+		inputTitle.focus();
+		
+		elmUploader = document.createElement( 'div' );
+		elmUploader.id = 'newcomic';
+		elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
+		elmWrap.appendChild( elmUploader);
+		
+		var elmScript = document.createElement( 'script');
+		elmScript.type = 'text\/javascript';
+		elmScript.src = pettanr.CONST.CREATE_COMIC_JS;
+		elmWrap.appendChild( elmScript );
+		
+		elmProgress.innerHTML = 'loading form.';
+		
+		if( timer === null){
+			timer = window.setInterval( detectForm, 250);
 		}
-		/*
-		 * form の target に iframe を指定したのち submit();
-		 */
-			function submit(){
-				try {
-					elmForm.submit();
-				} catch( e){
-					elmProgress.innerHTML = 'submit() err..';
-					isUploading = false;
-					setTimeout( clickCancel , 3000);
-					return;
-				}
-				
-				if( pettanr.ua.isIE){
-					elmIframe.onreadystatechange = detectIframe;
-				} else {
-					elmIframe.onload = onLoad;
-				}
-				elmProgress.innerHTML = 'uploading..';
-			}
-		/*
-		 * ie の 場合、readyState をチェック．
-		 */
-				function detectIframe(){
-		            if ( elmIframe.readyState === 'complete') {
-		                elmIframe.onreadystatechange = new Function();
-		                elmIframe.onreadystatechange = null;
-		                onLoad();
-		            }
-				}
-					function onLoad(){
-						elmIframe.onload = null;
-						( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-						elmProgress.innerHTML = 'success!';
-						setTimeout( clickCancel , 1000);
-						isUploading = false;
-					}
 		
-		function detectForm(){
-			elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
-			if( elmForm){
-				var _inputList = elmForm.getElementsByTagName( 'input' ),
-					_input;
-				for( var i=0, l= _inputList.length; i<l; ++i){
-					_input = _inputList[ i ];
-					if( _input.type === 'file'){
-						elmFile = _input;
-					}
-					if( _input.type === 'submit'){
-						_input.style.display = 'none';
-					}
-				}
-				window.clearInterval( timer);
-				timer = null;
-				pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
-				elmProgress.innerHTML = 'create iframe';
+		instance.onPaneResize( w, h );
+	}
+	this.onPaneResize = function( _windowW, _windowH){
+		jqWrap.css(
+			{
+				left:	Math.floor( ( _windowW - jqWrap.width()) /2),
+				top:	Math.floor( ( _windowH - jqWrap.height()) /2)
 			}
+		);
+	}
+	this.onClose = function(){
+		elmForm !== null && $( elmUploader ).remove();
+		elmForm  = null;
+		isUploading = false;
+		
+		if( elmScript !== null ){
+			document.body.removeChild( elmScript);
+			elmScript = null;					
 		}
-		function onCreateIframe( _iframe ){
-			elmContainer.appendChild( _iframe );
-			elmIframe = _iframe;
-			elmForm.target = _iframe.name;
-			elmProgress.innerHTML = '';
-		}
-		/*
-		 * 
-		 */
-		function clickCancel(){
-			if( isUploading === true) return false;
-			pettanr.overlay.hide();
-			UPLOAD_CONSOLE.onClose();
-			return false;
+		if( timer !== null){
+			window.clearInterval( timer);
+			timer = null;
 		}
 		
-		return {
-			init: function(){
-				this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();
-				$( '#upload-console-post-button').click( clickOK );
-				$( '#upload-console-cancel-button').click( clickCancel );
-
-				delete UPLOAD_CONSOLE.init;
-			},
-			jqWrap: null,
-			show: function( w, h){
-				/*
-				 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
-				 */				
-				elmScript = document.createElement( 'script');
-				elmScript.type = 'text\/javascript';
-				elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;
-				document.body.appendChild( elmScript);
-				
-				jqWrap.show();
-				pettanr.overlay.show( UPLOAD_CONSOLE );
-
-				if( timer === null){
-					timer = window.setInterval( detectForm, 250);
-				}
-				
-				elmProgress.innerHTML = 'loading form.';
-				
-				UPLOAD_CONSOLE.onWindowResize( w, h);
-			},
-			onWindowResize: function( _windowW, _windowH){
-				jqWrap.css(
-					{
-						left:	Math.floor( ( _windowW -jqWrap.width()) /2),
-						top:	Math.floor( ( _windowH -jqWrap.height()) /2)
-					}
-				);
-			},
-			onClose: function(){
-				elmForm !== null && $( elmContainer.children ).remove();
-				elmForm = elmFile = elmIframe = null;
+		jqWrap.hide();
+	}
+});
+
+pettanr.uploadConsole = pettanr.view.registerApplication( function(){
+	var jqWrap, windowW, windowH,
+		ID = 'uploadConsole',
+		TARGET_FRAME_NAME = 'targetFrame',
+		elmContainer = document.getElementById( 'uploader'),
+		elmProgress = document.getElementById( 'upload-console-progress'),
+		timer = null,
+		elmScript = null,
+		elmForm = null,
+		elmFile = null,
+		elmIframe = null,
+		isUploading = false,
+		instance = this;
+	/*
+	 * upload ボタンが押されたらまず iframe をつくる．
+	 */
+	function clickOK(){
+		if( !elmForm || !elmIframe || isUploading === true ) return false;
+		if( elmFile.value.length === 0) return false;
+		elmProgress.innerHTML = 'uploading.';
+		isUploading = true;
+		submit();
+		return false;
+	}
+	/*
+	 * form の target に iframe を指定したのち submit();
+	 */
+		function submit(){
+			try {
+				elmForm.submit();
+			} catch( e){
+				elmProgress.innerHTML = 'submit() err..';
 				isUploading = false;
-				
-				if( elmScript !== null ){
-					document.body.removeChild( elmScript);
-					elmScript = null;					
-				}
-				if( timer !== null){
-					window.clearInterval( timer);
-					timer = null;
-				}
-				jqWrap.hide();
-			},
-			ID: ID
-		}
-	})();
-	
-	return {
-		init: function(){
-			UPLOAD_CONSOLE.init();
-			delete pettanr.comicConsole.init;
-		},
-		onOpen: function( _file){
-			if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){
-				// _data = _file.read();
+				setTimeout( clickCancel , 3000);
+				return;
 			}
-		},
-		onClose: function(){
 			
-		},
-		onWindowResize: function( _windowW, _windowH){
-		},
-		_quickAccessShow: function(){
-			jqWindow = pettanr.jqWindow();
-			var w = jqWindow.width(),
-				h = jqWindow.height();
-			UPLOAD_CONSOLE.show( w, h);
-		}
-	}
-})();
-
-pettanr.panelConsole = ( function(){
-	var PANEL_CONSOLE = ( function(){
-		var jqWrap,
-			ID = 'panelConsole',
-			TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',
-			elmContainer = document.getElementById( 'newpanel'),
-			elmProgress = document.getElementById( 'panel-console-progress'),
-			timer = null,
-			elmScript = null,
-			elmForm = null,
-			elmIframe = null,
-			isUploading = false;
-		/*
-		 * upload ボタンが押されたらまず iframe をつくる．
-		 */
-		function clickOK(){
-			if( !elmForm || !elmIframe || isUploading === true ) return false;
-			elmProgress.innerHTML = 'uploading.';
-			isUploading = true;
-			submit();
-			return false;
+			if( pettanr.ua.isIE){
+				elmIframe.onreadystatechange = detectIframe;
+			} else {
+				elmIframe.onload = onLoad;
+			}
+			elmProgress.innerHTML = 'uploading..';
 		}
-		/*
-		 * form の target に iframe を指定したのち submit();
-		 */
-			function submit(){
-				try {
-					elmForm.submit();
-				} catch( e){
-					elmProgress.innerHTML = 'submit() err..';
+	/*
+	 * ie の 場合、readyState をチェック．
+	 */
+			function detectIframe(){
+	            if ( elmIframe.readyState === 'complete') {
+	                elmIframe.onreadystatechange = new Function();
+	                elmIframe.onreadystatechange = null;
+	                onLoad();
+	            }
+			}
+				function onLoad(){
+					elmIframe.onload = null;
+					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
+					elmProgress.innerHTML = 'success!';
+					setTimeout( clickCancel , 1000);
 					isUploading = false;
-					setTimeout( clickCancel , 3000);
-					return;
 				}
-				
-				if( pettanr.ua.isIE){
-					elmIframe.onreadystatechange = detectIframe;
-				} else {
-					elmIframe.onload = onLoad;
+	
+	function detectForm(){
+		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
+		if( elmForm){
+			var _inputList = elmForm.getElementsByTagName( 'input' ),
+				_input;
+			for( var i=0, l= _inputList.length; i<l; ++i){
+				_input = _inputList[ i ];
+				if( _input.type === 'file'){
+					elmFile = _input;
+				}
+				if( _input.type === 'submit'){
+					_input.style.display = 'none';
 				}
-				elmProgress.innerHTML = 'uploading..';
 			}
+			window.clearInterval( timer);
+			timer = null;
+			pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
+			elmProgress.innerHTML = 'create iframe';
+		}
+	}
+	function onCreateIframe( _iframe ){
+		elmContainer.appendChild( _iframe );
+		elmIframe = _iframe;
+		elmForm.target = _iframe.name;
+		elmProgress.innerHTML = '';
+		instance.onPaneResize( windowW, windowH );
+	}
+	/*
+	 * 
+	 */
+	function clickCancel(){
+		if( isUploading === true) return false;
+		pettanr.uploadConsole.shutdown();
+		return false;
+	}
+
+	/* grobal method */
+	this.rootElement = document.getElementById( 'upload-console-wrapper' );
+	this.displayName = ID;
+	this.ID          = ID;
+	this.MIN_WIDTH   = 320;
+	this.MIN_HEIGHT  = 320;
+	this.init = function(){
+		jqWrap = $( '#upload-console-wrapper').hide();
+		$( '#upload-console-post-button').click( clickOK );
+		$( '#upload-console-cancel-button').click( clickCancel );
+
+		delete instance.init;
+	}
+	this.onOpen = function( w, h){
+		instance.init && instance.init();
 		/*
-		 * ie の 場合、readyState をチェック．
-		 */
-				function detectIframe(){
-		            if ( elmIframe.readyState === 'complete') {
-		                elmIframe.onreadystatechange = new Function();
-		                elmIframe.onreadystatechange = null;
-		                onLoad();
-		            }
-				}
-					function onLoad(){
-						elmIframe.onload = null;
-						( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-						elmProgress.innerHTML = 'success!';
-						setTimeout( clickCancel , 1000);
-						isUploading = false;
-					}
+		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
+		 */				
+		elmScript = document.createElement( 'script');
+		elmScript.type = 'text\/javascript';
+		elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;
+		document.body.appendChild( elmScript);
 		
-		function detectForm(){
-			elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
-			if( elmForm){
-				var _inputList = elmForm.getElementsByTagName( 'input' ),
-					_input;
-				for( var i=0, l= _inputList.length; i<l; ++i){
-					_input = _inputList[ i ];
-					if( _input.type === 'submit'){
-						_input.style.display = 'none';
-					}
-				}
-				window.clearInterval( timer);
-				timer = null;
-				pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
-				elmProgress.innerHTML = 'create iframe';
-			}
+		jqWrap.show();
+
+		if( timer === null){
+			timer = window.setInterval( detectForm, 250);
 		}
-		function onCreateIframe( _iframe ){
-			elmContainer.appendChild( _iframe );
-			elmIframe = _iframe;
-			elmForm.target = _iframe.name;
-			elmProgress.innerHTML = '';
+		
+		elmProgress.innerHTML = 'loading form.';
+		
+		instance.onPaneResize( w, h);
+	}
+	this.onPaneResize = function( _windowW, _windowH){
+		windowW = _windowW;
+		windowH = _windowH;
+		jqWrap.css(
+			{
+				left:	Math.floor( ( _windowW -jqWrap.width()) /2),
+				top:	Math.floor( ( _windowH -jqWrap.height()) /2)
+			}
+		);
+	}
+	this.onClose = function(){
+		elmForm !== null && $( elmContainer.children ).remove();
+		elmForm = elmFile = elmIframe = null;
+		isUploading = false;
+		
+		if( elmScript !== null ){
+			document.body.removeChild( elmScript);
+			elmScript = null;					
 		}
-		/*
-		 * 
-		 */
-		function clickCancel(){
-			if( isUploading === true) return false;
-			pettanr.overlay.hide();
-			PANEL_CONSOLE.onClose();
-			return false;
+		if( timer !== null){
+			window.clearInterval( timer);
+			timer = null;
 		}
-		
-		return {
-			init: function(){
-				this.jqWrap = jqWrap = $( '#panel-console-wrapper').hide();
-				$( '#panel-console-post-button').click( clickOK );
-				$( '#panel-console-cancel-button').click( clickCancel );
-
-				delete PANEL_CONSOLE.init;
-			},
-			jqWrap: null,
-			show: function( w, h){
-				/*
-				 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
-				 */				
-				elmScript = document.createElement( 'script');
-				elmScript.type = 'text\/javascript';
-				elmScript.src = pettanr.CONST.CREATE_PANEL_JS;
-				document.body.appendChild( elmScript);
-				
-				jqWrap.show();
-				pettanr.overlay.show( PANEL_CONSOLE );
-
-				if( timer === null){
-					timer = window.setInterval( detectForm, 250 );
-				}
-				
-				elmProgress.innerHTML = 'loading form.';
-				
-				PANEL_CONSOLE.onWindowResize( w, h );
-			},
-			onWindowResize: function( _windowW, _windowH){
-				jqWrap.css(
-					{
-						left:	Math.floor( ( _windowW -jqWrap.width()) /2),
-						top:	Math.floor( ( _windowH -jqWrap.height()) /2)
-					}
-				);
-			},
-			onClose: function(){
-				elmForm !== null && $( elmContainer.children ).remove();
-				elmForm = elmIframe = null;
+		jqWrap.hide();
+	}
+});
+
+pettanr.panelConsole = pettanr.view.registerApplication( function(){
+	var jqWrap, windowW, windowH,
+		ID = 'panelConsole',
+		TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',
+		elmContainer = document.getElementById( 'newpanel'),
+		elmProgress = document.getElementById( 'panel-console-progress'),
+		timer = null,
+		elmScript = null,
+		elmForm = null,
+		elmIframe = null,
+		isUploading = false,
+		instance = this;
+	/*
+	 * upload ボタンが押されたらまず iframe をつくる．
+	 */
+	function clickOK(){
+		if( !elmForm || !elmIframe || isUploading === true ) return false;
+		elmProgress.innerHTML = 'uploading.';
+		isUploading = true;
+		submit();
+		return false;
+	}
+	/*
+	 * form の target に iframe を指定したのち submit();
+	 */
+		function submit(){
+			try {
+				elmForm.submit();
+			} catch( e){
+				elmProgress.innerHTML = 'submit() err..';
 				isUploading = false;
-				
-				if( elmScript !== null ){
-					document.body.removeChild( elmScript);
-					elmScript = null;					
-				}
-				if( timer !== null){
-					window.clearInterval( timer);
-					timer = null;
-				}
-				jqWrap.hide();
-			},
-			ID: ID
+				setTimeout( clickCancel , 3000);
+				return;
+			}
+			
+			if( pettanr.ua.isIE){
+				elmIframe.onreadystatechange = detectIframe;
+			} else {
+				elmIframe.onload = onLoad;
+			}
+			elmProgress.innerHTML = 'uploading..';
 		}
-	})();
+	/*
+	 * ie の 場合、readyState をチェック．
+	 */
+			function detectIframe(){
+	            if ( elmIframe.readyState === 'complete') {
+	                elmIframe.onreadystatechange = new Function();
+	                elmIframe.onreadystatechange = null;
+	                onLoad();
+	            }
+			}
+				function onLoad(){
+					elmIframe.onload = null;
+					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
+					elmProgress.innerHTML = 'success!';
+					setTimeout( clickCancel , 1000);
+					isUploading = false;
+				}
 	
-	return {
-		init: function(){
-			PANEL_CONSOLE.init();
-			delete pettanr.comicConsole.init;
-		},
-		onOpen: function(){
-			
-		},
-		onClose: function(){
-			
-		},
-		onWindowResize: function( _windowW, _windowH){
-		},
-		_quickAccessShow: function(){
-			jqWindow = pettanr.jqWindow();
-			var w = jqWindow.width(),
-				h = jqWindow.height();
-			PANEL_CONSOLE.show( w, h);
+	function detectForm(){
+		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
+		if( elmForm){
+			var _inputList = elmForm.getElementsByTagName( 'input' ),
+				_input;
+			for( var i=0, l= _inputList.length; i<l; ++i){
+				_input = _inputList[ i ];
+				if( _input.type === 'submit'){
+					_input.style.display = 'none';
+				}
+			}
+			window.clearInterval( timer);
+			timer = null;
+			pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
+			elmProgress.innerHTML = 'create iframe';
 		}
 	}
-})();
+	function onCreateIframe( _iframe ){
+		elmContainer.appendChild( _iframe );
+		elmIframe = _iframe;
+		elmForm.target = _iframe.name;
+		elmProgress.innerHTML = '';
+		instance.onPaneResize( windowW, windowH );
+	}
+	/*
+	 * 
+	 */
+	function clickCancel(){
+		if( isUploading === true) return false;
+		pettanr.panelConsole.shutdown();
+		return false;
+	}
 
-pettanr.artistConsole = ( function(){
-	var ARTIST_CONSOLE = ( function(){
-		var jqWrap,
-			ID = 'artistConsole',
-			TARGET_FRAME_NAME = 'targetFrameResisterArtist',
-			elmContainer = document.getElementById( 'register'),
-			elmProgress = document.getElementById( 'artist-console-progress'),
-			timer = null,
-			elmScript = null,
-			elmForm = null,
-			elmIframe = null,
-			isUploading = false;
+	/* grobal method */
+	this.rootElement = document.getElementById( 'panel-console-wrapper' );
+	this.displayName = ID;
+	this.ID          = ID;
+	this.MIN_WIDTH   = 320;
+	this.MIN_HEIGHT  = 320;
+	this.init = function(){
+		jqWrap = $( '#panel-console-wrapper').hide();
+		$( '#panel-console-post-button').click( clickOK );
+		$( '#panel-console-cancel-button').click( clickCancel );
+
+		delete instance.init;
+	}
+	this.onOpen = function( w, h ){
+		instance.init && instance.init();
 		/*
-		 * upload ボタンが押されたらまず iframe をつくる．
-		 */
-		function clickOK(){
-			if( !elmForm || !elmIframe || isUploading === true ) return false;
-			elmProgress.innerHTML = 'uploading.';
-			isUploading = true;
-			submit();
-			return false;
+		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
+		 */				
+		elmScript = document.createElement( 'script');
+		elmScript.type = 'text\/javascript';
+		elmScript.src = pettanr.CONST.CREATE_PANEL_JS;
+		document.body.appendChild( elmScript);
+		
+		jqWrap.show();
+
+		if( timer === null){
+			timer = window.setInterval( detectForm, 250 );
 		}
-		/*
-		 * form の target に iframe を指定したのち submit();
-		 */
-			function submit(){
-				try {
-					elmForm.submit();
-				} catch( e){
-					elmProgress.innerHTML = 'submit() err..';
+		
+		elmProgress.innerHTML = 'loading form.';
+		
+		instance.onPaneResize( w, h );
+	}
+	this.onPaneResize = function( _windowW, _windowH ){
+		windowW = _windowW;
+		windowH = _windowH;
+		jqWrap.css(
+			{
+				left:	Math.floor( ( _windowW -jqWrap.width()) /2),
+				top:	Math.floor( ( _windowH -jqWrap.height()) /2)
+			}
+		);
+	}
+	this.onClose = function(){
+		elmForm !== null && $( elmContainer.children ).remove();
+		elmForm = elmIframe = null;
+		isUploading = false;
+		
+		if( elmScript !== null ){
+			document.body.removeChild( elmScript);
+			elmScript = null;					
+		}
+		if( timer !== null){
+			window.clearInterval( timer);
+			timer = null;
+		}
+		jqWrap.hide();
+	}
+});
+
+pettanr.artistConsole = pettanr.view.registerApplication( function(){
+	var jqWrap, windowW, windowH,
+		ID = 'artistConsole',
+		TARGET_FRAME_NAME = 'targetFrameRegisterArtist',
+		elmContainer = document.getElementById( 'register'),
+		elmProgress = document.getElementById( 'artist-console-progress'),
+		timer = null,
+		elmScript = null,
+		elmForm = null,
+		elmIframe = null,
+		isUploading = false,
+		instance = this;
+	/*
+	 * upload ボタンが押されたらまず iframe をつくる．
+	 */
+	function clickOK(){
+		if( !elmForm || !elmIframe || isUploading === true ) return false;
+		elmProgress.innerHTML = 'uploading.';
+		isUploading = true;
+		submit();
+		return false;
+	}
+	/*
+	 * form の target に iframe を指定したのち submit();
+	 */
+		function submit(){
+			try {
+				elmForm.submit();
+			} catch( e){
+				elmProgress.innerHTML = 'submit() err..';
+				isUploading = false;
+				setTimeout( clickCancel , 3000);
+				return;
+			}
+			
+			if( pettanr.ua.isIE){
+				elmIframe.onreadystatechange = detectIframe;
+			} else {
+				elmIframe.onload = onLoad;
+			}
+			elmProgress.innerHTML = 'uploading..';
+		}
+	/*
+	 * ie の 場合、readyState をチェック．
+	 */
+			function detectIframe(){
+	            if ( elmIframe.readyState === 'complete') {
+	                elmIframe.onreadystatechange = new Function();
+	                elmIframe.onreadystatechange = null;
+	                onLoad();
+	            }
+			}
+				function onLoad(){
+					elmIframe.onload = null;
+					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
+					elmProgress.innerHTML = 'success!';
+					setTimeout( clickCancel , 1000);
 					isUploading = false;
-					setTimeout( clickCancel , 3000);
-					return;
 				}
-				
-				if( pettanr.ua.isIE){
-					elmIframe.onreadystatechange = detectIframe;
-				} else {
-					elmIframe.onload = onLoad;
+	
+	function detectForm(){
+		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
+		if( elmForm){
+			var _inputList = elmForm.getElementsByTagName( 'input' ),
+				_input;
+			for( var i=0, l= _inputList.length; i<l; ++i){
+				_input = _inputList[ i ];
+				if( _input.type === 'submit'){
+					_input.style.display = 'none';
 				}
-				elmProgress.innerHTML = 'uploading..';
 			}
+			window.clearInterval( timer);
+			timer = null;
+			pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
+			elmProgress.innerHTML = 'create iframe';
+		}
+	}
+	function onCreateIframe( _iframe ){
+		elmContainer.appendChild( _iframe );
+		elmIframe = _iframe;
+		elmForm.target = _iframe.name;
+		elmProgress.innerHTML = '';
+		instance.onPaneResize( windowW, windowH );
+	}
+	/*
+	 * 
+	 */
+	function clickCancel(){
+		if( isUploading === true) return false;
+		pettanr.artistConsole.shutdown();
+		return false;
+	}
+
+	/* grobal method */
+	this.rootElement = document.getElementById( 'artist-console-wrapper' );
+	this.displayName = ID;
+	this.ID          = ID;
+	this.MIN_WIDTH   = 320;
+	this.MIN_HEIGHT  = 320;
+	this.init = function(){
+		jqWrap = $( '#artist-console-wrapper').hide();
+		$( '#artist-console-post-button').click( clickOK );
+		$( '#artist-console-cancel-button').click( clickCancel );
+
+		delete instance.init;
+	}
+	this.onOpen = function( w, h ){
+		instance.init && instance.init();
 		/*
-		 * ie の 場合、readyState をチェック．
-		 */
-				function detectIframe(){
-		            if ( elmIframe.readyState === 'complete') {
-		                elmIframe.onreadystatechange = new Function();
-		                elmIframe.onreadystatechange = null;
-		                onLoad();
-		            }
-				}
-					function onLoad(){
-						elmIframe.onload = null;
-						( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-						elmProgress.innerHTML = 'success!';
-						setTimeout( clickCancel , 1000);
-						isUploading = false;
-					}
+		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
+		 */				
+		elmScript = document.createElement( 'script' );
+		elmScript.type = 'text\/javascript';
+		elmScript.src = pettanr.CONST.REGISTER_ARTIST_JS;
+		document.body.appendChild( elmScript );
 		
-		function detectForm(){
-			elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
-			if( elmForm){
-				var _inputList = elmForm.getElementsByTagName( 'input' ),
-					_input;
-				for( var i=0, l= _inputList.length; i<l; ++i){
-					_input = _inputList[ i ];
-					if( _input.type === 'submit'){
-						_input.style.display = 'none';
-					}
-				}
-				window.clearInterval( timer);
-				timer = null;
-				pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);
-				elmProgress.innerHTML = 'create iframe';
+		jqWrap.show();
+
+		if( timer === null){
+			timer = window.setInterval( detectForm, 250 );
+		}
+		
+		elmProgress.innerHTML = 'loading form.';
+		
+		instance.onPaneResize( w, h );
+	}
+	this.onPaneResize = function( _windowW, _windowH ){
+		windowW = _windowW;
+		windowH = _windowH;
+		jqWrap.css(
+			{
+				left:	Math.floor( ( _windowW -jqWrap.width()) /2),
+				top:	Math.floor( ( _windowH -jqWrap.height()) /2)
 			}
+		);
+	}
+	this.onClose = function(){
+		elmForm !== null && $( elmContainer.children ).remove();
+		elmForm = elmIframe = null;
+		isUploading = false;
+		
+		if( elmScript !== null ){
+			document.body.removeChild( elmScript);
+			elmScript = null;					
 		}
-		function onCreateIframe( _iframe ){
-			elmContainer.appendChild( _iframe );
-			elmIframe = _iframe;
-			elmForm.target = _iframe.name;
-			elmProgress.innerHTML = '';
+		if( timer !== null){
+			window.clearInterval( timer);
+			timer = null;
 		}
-		/*
-		 * 
-		 */
-		function clickCancel(){
-			if( isUploading === true) return false;
-			pettanr.overlay.hide();
-			ARTIST_CONSOLE.onClose();
-			return false;
+		jqWrap.hide();
+	}
+});
+
+pettanr.outputConsole = pettanr.view.registerApplication( function(){
+	var jqWrap, jqOutputArea,
+		ID = 'outputConsole',
+		timing = 0,
+		instance = this;
+	//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
+	
+	function clickOK(){
+		pettanr.outputConsole.shutdown();
+	}
+
+	function getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l ){
+		while( timing < l * 2){
+			for(var i=0; i<l; ++i){
+				if( timing === PANEL_ELEMENT_ARRAY[ i ].timing ){
+					++timing;
+					return PANEL_ELEMENT_ARRAY[ i ];
+				}
+			}
+			++timing;
 		}
+		return null;
+	}
+
+	function getAsHtmlString( isAbsoluteUrl, isXHTML, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){
+		timing = 0;
 		
-		return {
-			init: function(){
-				this.jqWrap = jqWrap = $( '#artist-console-wrapper').hide();
-				$( '#artist-console-post-button').click( clickOK );
-				$( '#artist-console-cancel-button').click( clickCancel );
+		var HTML_ARRAY = [],
+			l = PANEL_ELEMENT_ARRAY.length,
+			_panelElement;
+
+		while( HTML_ARRAY.length < l ){
+			_panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );
+			if( _panelElement === null) break;
+			HTML_ARRAY.push( panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ));
+		}
+
+		HTML_ARRAY.unshift(
+			[
+				'<div class="panel" ',
+					'style="',
+						'height:', panelH, 'px;',
+						'background-color:', ';',
+					'"',
+				'>'
+			].join( '')
+		);		
+		HTML_ARRAY.push( '</div>');
+		
+		return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);
+	}
 
-				delete ARTIST_CONSOLE.init;
-			},
-			jqWrap: null,
-			show: function( w, h){
-				/*
-				 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
-				 */				
-				elmScript = document.createElement( 'script');
-				elmScript.type = 'text\/javascript';
-				elmScript.src = pettanr.CONST.RESISTER_ARTIST_JS;
-				document.body.appendChild( elmScript);
-				
-				jqWrap.show();
-				pettanr.overlay.show( ARTIST_CONSOLE );
+		function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){
+			var url;
+			if( _panelElement.type === 0 ){
+				url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );
+				return [
+					'<img ',
+						'src="',        isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',
+						'width="',      _panelElement.w, '" ',
+						'height="',     _panelElement.h, '" ',
+						'style="',
+							'left:',    _panelElement.x, 'px;',
+							'top:',     _panelElement.y, 'px;',
+							'z-index:', _panelElement.z, ';',
+						'"',
+					isXHTML !== true ? '>' : ' \/>'
+				].join( '');				
+			} else {
+				url = _panelElement.getBalloonURL();
+				return [
+					'<img ',
+						'src="',        isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',
+						'width="',      _panelElement.w, '" ',
+						'height="',     _panelElement.h, '" ',
+						'style="',									
+							'left:',    _panelElement.x, 'px;',
+							'top:',     _panelElement.y, 'px;',
+							'z-index:', _panelElement.z, ';',
+						'"',
+					isXHTML !== true ? '>' : ' \/>',
+					pettanr.LINE_FEED_CODE_TEXTAREA,
+					'<div class="balloon" style="',
+						'left:',        _panelElement.x, 'px;',
+						'top:',         _panelElement.y, 'px;',
+						'width:',       _panelElement.w, 'px;',
+						'height:',      _panelElement.h, 'px;',
+						'z-index:',     _panelElement.z,
+					'"><span>', _panelElement.text(), '<\/span>', '<\/div>'
+						
+				].join( '');				
+			}
+		}
 
-				if( timer === null){
-					timer = window.setInterval( detectForm, 250 );
-				}
-				
-				elmProgress.innerHTML = 'loading form.';
-				
-				ARTIST_CONSOLE.onWindowResize( w, h );
-			},
-			onWindowResize: function( _windowW, _windowH){
-				jqWrap.css(
-					{
-						left:	Math.floor( ( _windowW -jqWrap.width()) /2),
-						top:	Math.floor( ( _windowH -jqWrap.height()) /2)
-					}
-				);
-			},
-			onClose: function(){
-				elmForm !== null && $( elmContainer.children ).remove();
-				elmForm = elmIframe = null;
-				isUploading = false;
-				
-				if( elmScript !== null ){
-					document.body.removeChild( elmScript);
-					elmScript = null;					
-				}
-				if( timer !== null){
-					window.clearInterval( timer);
-					timer = null;
-				}
-				jqWrap.hide();
-			},
-			ID: ID
+	function getAsJsonString( comicID, panelID, panelTimming, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){
+		timing = 0;
+		
+		var JSON_STRING_ARRAY = [],
+			IMAGE_ARRAY = [],
+			BALLOON_ARRAY = [],
+			l = PANEL_ELEMENT_ARRAY.length,
+			_panelElement,
+			cr = pettanr.LINE_FEED_CODE_TEXTAREA;
+
+		while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){
+			_panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );
+			if( _panelElement === null) break;
+			_panelElement.type === 0 ? 
+				IMAGE_ARRAY.push( imageToJson( _panelElement )) :
+				BALLOON_ARRAY.push( balloonToJson( _panelElement ) );
+		}
+		return [
+			'{', cr,
+				'"panel": {', cr,
+					'"id": ',               panelID, ',', cr,
+				    '"border": ',           border, ',', cr,
+				    '"comic_id": ',         comicID, ',', cr,
+				    '"resource_picture_id": 1,', cr,
+					'"x": ',                0, ',', cr,
+					'"y": ',                0, ',', cr,
+					'"z": ',                0, ',', cr,
+					panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',
+				    '"width": ',            panelW, ',', cr,
+				    '"height": ',           panelH, ',', cr,
+				    '"panel_pictures_attributes": {', cr,
+				    	IMAGE_ARRAY.join( ',' + cr ), cr,
+				    '},', cr,
+				    '"balloons_attributes": {', cr,
+				    	BALLOON_ARRAY.join( ',' + cr ), cr,
+				    '}', cr,
+				'}', cr,
+			'}'
+		].join( '' );
+	}
+		function imageToJson( _imageElement ){
+			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
+			return [
+				'"new', timing, '": {', cr,
+					'"resource_picture_id": ', _imageElement.resourcePicture().id, ',', cr,
+					'"x": ',                   _imageElement.x, ',', cr,
+					'"y": ',                   _imageElement.y, ',', cr,
+					'"z": ',                   _imageElement.z, ',', cr,
+					'"width": ',               _imageElement.flipH() * _imageElement.w, ',', cr,
+					'"height": ',              _imageElement.flipV() * _imageElement.h, ',', cr,
+					'"t": ',                   timing, cr,
+				'}'
+			].join( '');
+		}
+
+		function balloonToJson( _textElement ){
+			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
+			return [
+				'"new', timing, '": {', cr,
+					'"balloon_template_id": ', 1, ',', cr,
+					'"system_picture_id": ',   1, ',', cr,
+					'"size": ',                1, ',', cr,
+					'"tail": ',                _textElement.angle(), ',', cr,
+					'"x": ',                   _textElement.x, ',', cr,
+					'"y": ',                   _textElement.y, ',', cr,
+					'"z": ',                   _textElement.z, ',', cr,
+					'"t": ',                   timing, ',', cr,
+					'"width": ',               _textElement.w, ',', cr,
+					'"height": ',              _textElement.h, ',', cr,
+					'"speaches_attributes": {', cr,
+						'"newf', timing, '": {', cr,
+    						'"content": "', _textElement.text(), '",', cr,
+							'"x": ',        _textElement.x, ',', cr,
+							'"y": ',        _textElement.y, ',', cr,
+							'"t": ',        timing, ',', cr,
+							'"width": ',    _textElement.w, ',', cr,
+							'"height": ',   _textElement.h, cr,
+						'}', cr,
+					'}', cr,
+				'}'
+			].join( '');
 		}
-	})();
+
+
+	/* grobal method */
+	this.rootElement = document.getElementById( 'output-console-wrapper' );
+	this.displayName = ID;
+	this.ID          = ID;
 	
-	return {
-		init: function(){
-			ARTIST_CONSOLE.init();
-			delete pettanr.comicConsole.init;
-		},
-		onOpen: function(){
-			
-		},
-		onClose: function(){
-			
-		},
-		onWindowResize: function( _windowW, _windowH){
-		},
-		_quickAccessShow: function(){
-			jqWindow = pettanr.jqWindow();
-			var w = jqWindow.width(),
-				h = jqWindow.height();
-			ARTIST_CONSOLE.show( w, h);
+	this.MIN_WIDTH   = 320;
+	this.MIN_HEIGHT  = 320;
+	this.init = function(){
+		jqWrap = $( '#output-console-wrapper').hide();
+		jqOutputArea = $( '#output-area');
+		delete instance.init;
+	}
+	this.onOpen = function( _w, _h, _dataType, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements ){
+		instance.init && instance.init();
+		
+		jqWrap.show();
+		instance.onPaneResize( _w, _h );
+		var text;
+		if( _dataType === pettanr.outputConsole.JSON ){
+			text = getAsJsonString( _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements );
+		} else {
+			text = getAsHtmlString( false, false, _panelW, _panelH, _borderSize, _panelElements );
 		}
+		jqOutputArea.val( text ).focus();
+	}
+	this.onPaneResize = function( _w, _h){
+		jqWrap.css(
+			{
+				left:	Math.floor( ( _w -jqWrap.width()) /2),
+				top:	Math.floor( ( _h -jqWrap.height()) /2)
+			}
+		);
+	}
+	this.onClose = function(){
+		jqWrap.hide();
+		jqOutputArea.val('');
 	}
-})();
\ No newline at end of file
+});
+pettanr.outputConsole.JSON          = 0;
+pettanr.outputConsole.HTML          = 1;
+pettanr.outputConsole.XML           = 2;
+pettanr.outputConsole.SHORT_URL     = 3;
+pettanr.outputConsole.MOVERBLE_TYPE = 4;
+pettanr.outputConsole.BLOGGER       = 5;