From 635b016f22fb996f73877c4a7db9befbe11fd3bb Mon Sep 17 00:00:00 2001
From: itozyun <itozyun@gmail.com>
Date: Thu, 9 Aug 2012 07:01:23 +0900
Subject: [PATCH] client is versiion 0.5.6, post panel on panel editor.

---
 .project                              |   8 +-
 Gemfile.lock                          |   2 +-
 app/assets/javascripts/peta.apps.js   | 689 ++++++++++++++++++----------------
 app/assets/javascripts/peta.common.js |  72 ++--
 app/assets/javascripts/system.js      |  97 +++--
 app/views/layouts/test.html.erb       |   1 -
 6 files changed, 453 insertions(+), 416 deletions(-)

diff --git a/.project b/.project
index 04f21bb8..18d5dda6 100644
--- a/.project
+++ b/.project
@@ -6,19 +6,13 @@
 	</projects>
 	<buildSpec>
 		<buildCommand>
-			<name>org.rubypeople.rdt.core.rubybuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-		<buildCommand>
 			<name>com.aptana.ide.core.unifiedBuilder</name>
 			<arguments>
 			</arguments>
 		</buildCommand>
 	</buildSpec>
 	<natures>
-		<nature>com.aptana.ide.project.nature.web</nature>
-		<nature>org.rubypeople.rdt.core.rubynature</nature>
 		<nature>org.radrails.rails.core.railsnature</nature>
+		<nature>com.aptana.ruby.core.rubynature</nature>
 	</natures>
 </projectDescription>
diff --git a/Gemfile.lock b/Gemfile.lock
index a971c4c4..5158c6c7 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -165,7 +165,7 @@ GEM
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
     sqlite3 (1.3.6-x86-mingw32)
-    standard_licenses (0.0.1)
+    standard_licenses (0.0.6)
       rails (~> 3.1.1)
     therubyracer-heroku (0.8.1.pre3)
     thor (0.14.6)
diff --git a/app/assets/javascripts/peta.apps.js b/app/assets/javascripts/peta.apps.js
index 304fbf66..e4887948 100644
--- a/app/assets/javascripts/peta.apps.js
+++ b/app/assets/javascripts/peta.apps.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.5
+ *   version 0.5.6
  *   
  * author:
  *   itozyun
@@ -172,7 +172,7 @@
 							if( _elm.resource_picture ){
 								_elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT ); // 上記参照切れに備えてここで上書き
 							} else {
-								_elm.resource_picture = getResource( RESOURCE_PICTURE_ARRAY, _elm.resource_picture_id );
+								_elm.resource_picture = getResource( RESOURCE_PICTURE_ARRAY, _elm.picture_id );
 							};
 						};
 					};
@@ -481,7 +481,7 @@ var Cabinet = gOS.registerApplication( function(){
 			'<div id="cabinet-container" class="finder-container"></div>'
 		].join( '' );
 		
-		self.fetchCSS( '/assets/peta.apps.css' );
+		self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 		tree   = FileAPI.createTree( FILE_DATA_SERVICE_ROOT );
 		
@@ -521,7 +521,7 @@ var Gallery = gOS.registerApplication( function(){
 			'<div id="gallery-container" class="finder-container"></div>'
 		].join( '' );
 		
-		self.fetchCSS( '/assets/peta.apps.css' );
+		self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 		tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
 		var	_root  = tree.getRootFile(),
@@ -775,7 +775,7 @@ var PremiumSatge = gOS.registerApplication( function(){
 				'<div id="image-group-button" class="button">close</div>'
 			].join( '' );
 			
-			self.fetchCSS( '/assets/peta.apps.css' );
+			self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 			
 			tree      = FileAPI.createTree( FILE_DATA_ARTIST_ROOT );
 			rootFile  = tree.getRootFile();
@@ -1069,7 +1069,7 @@ var Reader = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		self.fetchCSS( '/assets/peta.apps.css' );
+		self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 	};
 	this.onOpen = function( _w, _h, _file ){
@@ -1520,7 +1520,24 @@ var Editor = gOS.registerApplication( function(){
 		
 		function quit(){
 			Editor.shutdown();
-		}
+		};
+		function onSave(){
+			var model = Model.createPanel( {
+				comicID           : comicID,
+				panelID           : panelID,
+				panelTimming      : panelTimming,
+				panelW            : PANEL_CONTROL.w,
+				panelH            : PANEL_CONTROL.h,
+				borderSize        : 2,
+				panelElementArray : PANEL_ELEMENT_ARRAY
+			} );
+			PanelConsole.boot( model.getJsonPostString().replace( /\n/g, '' ) );
+			model.destroy();
+		};
+		function onSaveQuit(){
+			// Editor.shutdown();
+			onSave();
+		};
 		function onExport(){
 			OutputConsole.boot(
 				comicID, panelID, panelTimming,
@@ -1528,14 +1545,14 @@ var Editor = gOS.registerApplication( function(){
 				2, // border, BackgroundImage
 				PANEL_ELEMENT_ARRAY
 			);
-		}
+		};
 		return {
 			init: function(){
 				delete SAVE_CONTROL.init;
 			},
 			open: function(){
-				save     = MENU_BAR_CONTROL.QUIT.createOption( 'save', 'ctrl + S', quit, false );
-				saveQuit = MENU_BAR_CONTROL.QUIT.createOption( 'save & quit', null, quit, false, false, true );
+				save     = MENU_BAR_CONTROL.QUIT.createOption( 'save', 'ctrl + S', onSave, false );
+				saveQuit = MENU_BAR_CONTROL.QUIT.createOption( 'save & quit', null, onSaveQuit, false, false, true );
 				eXport   = MENU_BAR_CONTROL.QUIT.createOption( 'export', null, onExport, true, false, true );
 				quit     = MENU_BAR_CONTROL.QUIT.createOption( 'quit', null, quit, true, true );				
 				
@@ -3966,7 +3983,7 @@ var Editor = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		app.fetchCSS( '/assets/peta.apps.css' );
+		app.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 		delete app.onInit;
 	};
@@ -4278,7 +4295,7 @@ var ComicConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		instance.fetchCSS( '/assets/peta.apps.css' );
+		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 		delete instance.onInit;
 	};
@@ -4437,7 +4454,7 @@ var UploadConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		instance.fetchCSS( '/assets/peta.apps.css' );
+		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 		delete instance.onInit;
 	}
@@ -4474,152 +4491,6 @@ var UploadConsole = gOS.registerApplication( function(){
 	}
 }, true, true, 'Upload Console', 'uploadConsole', null, '#01A31C' );
 
-var PanelConsole = gOS.registerApplication( function(){
-	var windowW, windowH,
-		TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',
-		elmContainer, elmProgress,
-		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;
-				instance.addTimer( clickCancel , 3000, true );
-				return;
-			}
-			
-			if( 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(){
-					try {
-						console.log( ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).document.body.innerHTML );
-					} catch(e){
-						
-					}
-					elmIframe.onload = null;
-					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-					elmProgress.innerHTML = 'success!';
-					instance.addTimer( clickCancel , 1000, true );
-					isUploading = false;
-				};
-	
-	function detectForm(){
-		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
-		if( elmForm){
-			var _inputList = elmForm.getElementsByTagName( 'input' ),
-				_input;
-			for( var i = _inputList.length; i; ){
-				_input = _inputList[ --i ];
-				if( _input.type === 'submit' ){
-					_input.style.display = 'none';
-				};
-			};
-			instance.removeTimer( detectForm );
-			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;
-		PanelConsole.shutdown();
-		return false;
-	};
-
-	/* grobal method */
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		instance.rootElement.id = 'panel-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
-			'<div id="panel-console-header" class="console-header">Create New Panel (dev)</div>',
-			'<div id="panel-console" class="console-inner">',
-				'<div id="newpanel"></div>',
-				'<div class="console-button-container">',
-					'<div id="panel-console-post-button" class="button console-submit-button">post</div>',
-					'<div id="panel-console-cancel-button" class="button console-cancel-button">cancel</div>',
-				'</div>',
-				'<div id="panel-console-progress" class="console-progress">&nbsp;</div>',
-			'</div>'
-		].join( '' );
-
-		instance.fetchCSS( '/assets/peta.apps.css' );
-
-		delete instance.onInit;
-	}
-	this.onOpen = function( w, h ){
-		elmContainer = document.getElementById( 'newpanel' );
-		elmProgress  = document.getElementById( 'panel-console-progress' );
-		
-		instance.addMouseEventListener( document.getElementById( 'panel-console-post-button' ), 'click', clickOK );
-		instance.addMouseEventListener( document.getElementById( 'panel-console-cancel-button' ), 'click', clickCancel );
-		/*
-		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
-		 */				
-		elmScript = document.createElement( 'script' );
-		document.body.appendChild( elmScript );
-		elmScript.type = 'text\/javascript';
-		elmScript.src  = pettanr.CONST.CREATE_PANEL_JS;
-
-		instance.addTimer( detectForm, 250 );
-		instance.onPaneResize( w, h );
-		
-		elmProgress.innerHTML = 'loading form.';
-	};
-	this.onPaneResize = function( _windowW, _windowH ){
-		windowW = _windowW;
-		windowH = _windowH;
-		instance.rootElement.style.cssText = [
-			'left:', Math.floor( ( _windowW - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-			'top:',  Math.floor( ( _windowH - instance.rootElement.offsetHeight ) /2 ), 'px;'
-		].join( '' );
-	};
-	this.onClose = function(){
-		elmHeader = elmProgress = elmForm  = elmUploader = instance = null;
-		isUploading = false;
-	};
-}, true, true, 'Panel Console', 'panelConsole', null, '#603CBA' );
-
 var ArtistConsole = gOS.registerApplication( function(){
 	var windowW, windowH,
 		TARGET_FRAME_NAME = 'targetFrameRegisterArtist',
@@ -4724,7 +4595,7 @@ var ArtistConsole = gOS.registerApplication( function(){
 			'</div>'
 		].join( '' );
 		
-		instance.fetchCSS( '/assets/peta.apps.css' );
+		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 		delete instance.onInit;
 	};
@@ -4761,63 +4632,32 @@ var ArtistConsole = gOS.registerApplication( function(){
 	};
 }, true, true, 'Artist Console', 'artistConsole', null, '#FFC40D' );
 
-var OutputConsole = gOS.registerApplication( function(){
-	var FORMAT_LIST = [ 'json[POST]', 'json[GET]', 'XML', 'HTML', 'XHTML', 'MT export', 'Blogger ATOM' ];
-	var elmOutputArea,
-		comboboxFormat, inputOption,
-		buttonGenerate, buttonClose,
-		windowW, windowH,
-		timing = 0,
-		comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,
-		instance = this;
-	//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
-	
-	function clickOK(){
-		OutputConsole.shutdown();
-	};
-
-	function getPanelElementByTiming(){
-		var i, l = panelElementArray.length;
-		while( timing < l * 2){
-			for( i=0; i<l; ++i ){
-				if( timing === panelElementArray[ i ].timing ){
-					++timing;
-					return panelElementArray[ i ];
-				}
-			}
-			++timing;
-		}
-		return null;
-	};
-
-	function getAsHtmlString( isAbsoluteUrl, isXHTML ){
-		timing = 0;
-		
-		var HTML_ARRAY = [],
-			l = panelElementArray.length,
-			_panelElement;
 
-		while( HTML_ARRAY.length < l ){
-			_panelElement = getPanelElementByTiming();
-			if( _panelElement === null) break;
-			HTML_ARRAY.push( panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ));
+var Model = ( function(){
+	
+	var PanelModelClass = function( panel ){
+		var comicID           = panel.comicID,
+			panelID           = panel.panelID,
+			panelTimming      = panel.panelTimming,
+			panelW            = panel.panelW,
+			panelH            = panel.panelH,
+			borderSize        = panel.borderSize,
+			panelElementArray = panel.panelElementArray,
+			timing            = 0;
+			
+		function getPanelElementByTiming(){
+			var i, l = panelElementArray.length;
+			while( timing < l * 2){
+				for( i=0; i<l; ++i ){
+					if( timing === panelElementArray[ i ].timing ){
+						++timing;
+						return panelElementArray[ 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);
-	};
-
 		function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){
 			var url;
 			if( _panelElement.type === 0 ){
@@ -4859,42 +4699,6 @@ var OutputConsole = gOS.registerApplication( function(){
 				].join( '');				
 			};
 		};
-	
-	function getJsonGetString(){
-		timing = 0;
-		
-		var JSON_STRING_ARRAY = [],
-			ELEMENT_ARRAY     = [],
-			l                 = panelElementArray.length,
-			cr                = pettanr.LINE_FEED_CODE_TEXTAREA,
-			_panelElement;
-
-		while( ELEMENT_ARRAY.length <= l){
-			_panelElement = getPanelElementByTiming();
-			if( _panelElement === null ) break;
-			 
-			ELEMENT_ARRAY.push( _panelElement.type === 0 ? getImageJsonGET( _panelElement ) : balloonToJson( _panelElement ));
-		};
-		return [
-			'{', cr,
-				'"panel": {', cr,
-					'"id": ',               panelID, ',', cr,
-				    '"border": ',           borderSize, ',', 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_elements": [', cr,
-				    	ELEMENT_ARRAY.join( ',' + cr ), cr,
-				    ']', cr,
-				'}', cr,
-			'}'
-		].join( '' );
-	};
 		function getImageJsonGET( _imageElement ){
 			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
 			return [
@@ -4912,58 +4716,17 @@ var OutputConsole = gOS.registerApplication( function(){
 				'}'
 			].join( '');
 		};
-	
-	function getJsonPostString(){
-		timing = 0;
-		
-		var JSON_STRING_ARRAY = [],
-			IMAGE_ARRAY = [],
-			BALLOON_ARRAY = [],
-			l = panelElementArray.length,
-			_panelElement,
-			cr = pettanr.LINE_FEED_CODE_TEXTAREA;
-
-		while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){
-			_panelElement = getPanelElementByTiming();
-			if( _panelElement === null) break;
-			_panelElement.type === 0 ? 
-				IMAGE_ARRAY.push( [ '"new', timing, '": ', imageToJson( _panelElement ) ].join( '' )) :
-				BALLOON_ARRAY.push( [ '"new', timing, '": ', balloonToJson( _panelElement ) ].join( '' ) );
-		};
-		return [
-			'{', cr,
-				'"panel": {', cr,
-					'"id": ',               panelID, ',', cr,
-				    '"border": ',           borderSize, ',', cr,
-				    '"comic_id": ',         comicID, ',', cr,
-				    '"resource_picture_id": 1,', cr,
-					'"x": ',                0, ',', cr,
-					'"y": ',                0, ',', cr,
-					'"z": ',                0, ',', cr,
-					'"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 [
 				'{', 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,
+					'"picture_id": ', _imageElement.resourcePicture().id, ',', cr,
+					'"x": ',          _imageElement.x, ',', cr,
+					'"y": ',          _imageElement.y, ',', cr,
+					'"z": ',          _imageElement.z, ',', cr,
+					'"t": ',          timing, ',', cr,
+					'"width": ',      _imageElement.flipH() * _imageElement.w, ',', cr,
+					'"height": ',     _imageElement.flipV() * _imageElement.h, cr,
 				'}'
 			].join( '');
 		};
@@ -4995,18 +4758,150 @@ var OutputConsole = gOS.registerApplication( function(){
 				'}'
 			].join( '');
 		};
+			
+		this.getJsonPostString = function(){
+			timing = 0;
+			
+			var JSON_STRING_ARRAY = [],
+				IMAGE_ARRAY       = [],
+				BALLOON_ARRAY     = [],
+				l = panelElementArray.length,
+				_panelElement,
+				cr = pettanr.LINE_FEED_CODE_TEXTAREA;
 	
-	function clickGenerate(){
+			while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l ){
+				_panelElement = getPanelElementByTiming();
+				if( _panelElement === null) break;
+				_panelElement.type === 0 ? 
+					IMAGE_ARRAY.push( [ '"new', timing, '": ', imageToJson( _panelElement ) ].join( '' ) ) :
+					BALLOON_ARRAY.push( [ '"new', timing, '": ', balloonToJson( _panelElement ) ].join( '' ) );
+			};
+			return [
+				'{', cr,
+					//'"panel": {', cr,
+						//'"id": ',               panelID, ',', cr,
+					    '"width": ',            panelW, ',', cr,
+					    '"height": ',           panelH, ',', cr,
+					    '"border": ',           borderSize, ',', cr,
+					    // '"comic_id": ',         comicID, ',', cr,
+					    // '"picture_id": 1,', cr,
+						'"x": ',                0, ',', cr,
+						'"y": ',                0, ',', cr,
+						'"z": ',                0, ',', cr,
+						// '"t": ',				panelTimming, ',', cr,
+					    '"panel_pictures_attributes": {', cr,
+					    	IMAGE_ARRAY.join( ',' + cr ), cr,
+					    '},', cr,
+					    '"speech_balloons_attributes": {', cr,
+					    	BALLOON_ARRAY.join( ',' + cr ), cr,
+					    '}', cr,
+					//'}', cr,
+				'}'
+			].join( '' );
+		};
+		this.getJsonGetString = function(){
+			timing = 0;
+			
+			var JSON_STRING_ARRAY = [],
+				ELEMENT_ARRAY     = [],
+				l                 = panelElementArray.length,
+				cr                = pettanr.LINE_FEED_CODE_TEXTAREA,
+				_panelElement;
+	
+			while( ELEMENT_ARRAY.length <= l){
+				_panelElement = getPanelElementByTiming();
+				if( _panelElement === null ) break;
+				 
+				ELEMENT_ARRAY.push( _panelElement.type === 0 ? getImageJsonGET( _panelElement ) : balloonToJson( _panelElement ));
+			};
+			return [
+				'{', cr,
+					//'"panel": {', cr,
+						//'"id": ',               panelID, ',', cr,
+					    '"border": ',           borderSize, ',', cr,
+					    // '"comic_id": ',         comicID, ',', cr,
+					    // '"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_elements": [', cr,
+					    	ELEMENT_ARRAY.join( ',' + cr ), cr,
+					    ']', cr,
+					//'}', cr,
+				'}'
+			].join( '' );
+		};
+		this.getAsHtmlString = function( isAbsoluteUrl, isXHTML ){
+			timing = 0;
+			
+			var HTML_ARRAY = [],
+				l = panelElementArray.length,
+				_panelElement;
+	
+			while( HTML_ARRAY.length < l ){
+				_panelElement = getPanelElementByTiming();
+				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 );
+		};
+		this.destroy = function(){
+			panel = panelElementArray = null;
+		};
+	};
+	
+	return {
+		createPanel: function( panelData ){
+			return new PanelModelClass( panelData );
+		}
+	};
+} )();
+
+
+var OutputConsole = gOS.registerApplication( function(){
+	var FORMAT_LIST = [ 'json[POST]', 'json[GET]', 'XML', 'HTML', 'XHTML', 'MT export', 'Blogger ATOM' ];
+	var elmOutputArea,
+		comboboxFormat, inputOption,
+		buttonPost, buttonClose,
+		windowW, windowH,
+		timing   = 0,
+		comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,
+		instance = this,
+		model    = null;
+	
+	function clickOK(){
+		OutputConsole.shutdown();
+	};
+
+	function formatUpdate(){
 		var i = comboboxFormat.selectIndex(),
 			text = 'sorry...';
+		// buttonPost.enabled( false );
 		if( i === 0 ){
-			text = getJsonPostString();
+			text = model.getJsonPostString();
+			// buttonPost.enabled( true );
 		} else
 		if( i === 1 ){
-			text = getJsonGetString();
+			text = model.getJsonGetString();
 		} else
 		if( i === 3 ){
-			text = getAsHtmlString( false, false );
+			text = model.getAsHtmlString( false, false );
 		} else {
 			
 		};
@@ -5017,6 +4912,11 @@ var OutputConsole = gOS.registerApplication( function(){
 		return false;
 	};
 	
+	function clickPost(){
+		// PanelConsole.boot( elmOutputArea.value );
+		return false;
+	}
+	
 	/* grobal method */
 	this.MIN_WIDTH   = 320;
 	this.MIN_HEIGHT  = 320;
@@ -5035,14 +4935,14 @@ var OutputConsole = gOS.registerApplication( function(){
 					'<span id="output-console-option-value" class="output-console-value editable-value">absolute-path</span>',
 				'</div>',
 				'<div id="output-console-button-container" class="clearfix">',
-					'<div id="output-console-generate-button" class="button console-submit-button">generate</div>',
+					// '<div id="output-console-post-button" class="button console-submit-button">post</div>',
 					'<div id="output-console-close-button" class="button console-cancel-button">close</div>',
 				'</div>',
 				'<textarea id="output-area" readonly></textarea>',
 			'</div>'
 		].join( '' );
 
-		instance.fetchCSS( '/assets/peta.apps.css' );
+		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 
 		delete instance.onInit;
 	};
@@ -5050,25 +4950,27 @@ var OutputConsole = gOS.registerApplication( function(){
 		elmOutputArea = document.getElementById( 'output-area' );
 		
 		var ui = instance.createUIGroup();
-		comboboxFormat = ui.createCombobox( document.getElementById( 'output-console-format' ), clickGenerate );
+		comboboxFormat = ui.createCombobox( document.getElementById( 'output-console-format' ), formatUpdate );
 		
 		for( var i=0; FORMAT_LIST[ 0 ]; ++i ){
 			comboboxFormat.createOption( FORMAT_LIST.shift(), null, i === 0 );
 		};
 		inputOption    = ui.createInputText( document.getElementById( 'output-console-option' ), null );
-		buttonGenerate = ui.createButton( document.getElementById( 'output-console-generate-button' ), clickGenerate );
+		// buttonPost     = ui.createButton( document.getElementById( 'output-console-post-button' ), clickPost );
 		buttonClose    = ui.createButton( document.getElementById( 'output-console-close-button' ), clickClose );
 		instance.onPaneResize( _w, _h );
 		
-		comicID           = _comicID;
-		panelID           = _panelID;
-		panelTimming      = _panelTimming;
-		panelW            = _panelW;
-		panelH            = _panelH;
-		borderSize        = _borderSize;
-		panelElementArray = _panelElementArray;
+		model = Model.createPanel( {
+			comicID           : _comicID,
+			panelID           : _panelID,
+			panelTimming      : _panelTimming,
+			panelW            : _panelW,
+			panelH            : _panelH,
+			borderSize        : _borderSize,
+			panelElementArray : _panelElementArray
+		} );
 		
-		clickGenerate();
+		formatUpdate();
 	};
 	this.onPaneResize = function( _windowW, _windowH ){
 		windowW = _windowW;
@@ -5080,8 +4982,163 @@ var OutputConsole = gOS.registerApplication( function(){
 	};
 	this.onClose = function(){
 		elmOutputArea.value = '';
-		elmOutputArea = comboboxFormat = inputOption = buttonGenerate = buttonClose = panelElementArray = instance = null;
+		model.destroy();
+		elmOutputArea = comboboxFormat = inputOption = buttonPost = buttonClose = panelElementArray = instance = model = null;
 	};
 }, true, false, 'Output Console', 'outputConsole', null, '#2D89F0' );
 
+
+var PanelConsole = gOS.registerApplication( function(){
+	var windowW, windowH,
+		TARGET_FRAME_NAME = 'targetFrameCreateNewPanel',
+		elmContainer, elmProgress,
+		elmScript = null,
+		elmForm = null,
+		elmIframe = null,
+		isUploading = false,
+		instance = this,
+		json;
+	/*
+	 * 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;
+				instance.addTimer( clickCancel , 3000, true );
+				return;
+			}
+			
+			if( 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(){
+					try {
+						console.log( ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).document.body.innerHTML );
+					} catch(e){
+						
+					}
+					elmIframe.onload = null;
+					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
+					elmProgress.innerHTML = 'success!';
+					instance.addTimer( clickCancel , 1000, true );
+					isUploading = false;
+				};
+	
+	function detectForm(){
+		elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];
+		if( elmForm){
+			var _inputList = elmForm.getElementsByTagName( 'input' ),
+				_input;
+			for( var i = _inputList.length; i; ){
+				_input = _inputList[ --i ];
+				if( _input.type === 'submit' ){
+					_input.style.display = 'none';
+				};
+				if( _input.name === 'json' && Type.isString( json ) === true ){
+					_input.value = json;
+				};
+			};
+			instance.removeTimer( detectForm );
+			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;
+		PanelConsole.shutdown();
+		return false;
+	};
+
+	/* grobal method */
+	this.MIN_WIDTH   = 320;
+	this.MIN_HEIGHT  = 320;
+	this.onInit = function(){
+		instance.rootElement.id = 'panel-console-wrapper';
+		instance.rootElement.className = 'console-wrapper';
+		instance.rootElement.innerHTML = [
+			'<div id="panel-console-header" class="console-header">Create New Panel (dev)</div>',
+			'<div id="panel-console" class="console-inner">',
+				'<div id="newpanel"></div>',
+				'<div class="console-button-container">',
+					'<div id="panel-console-post-button" class="button console-submit-button">post</div>',
+					'<div id="panel-console-cancel-button" class="button console-cancel-button">cancel</div>',
+				'</div>',
+				'<div id="panel-console-progress" class="console-progress">&nbsp;</div>',
+			'</div>'
+		].join( '' );
+
+		instance.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+
+		delete instance.onInit;
+	}
+	this.onOpen = function( w, h, _json ){
+		elmContainer = document.getElementById( 'newpanel' );
+		elmProgress  = document.getElementById( 'panel-console-progress' );
+		
+		instance.addMouseEventListener( document.getElementById( 'panel-console-post-button' ), 'click', clickOK );
+		instance.addMouseEventListener( document.getElementById( 'panel-console-cancel-button' ), 'click', clickCancel );
+		/*
+		 * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
+		 */				
+		elmScript = document.createElement( 'script' );
+		document.body.appendChild( elmScript );
+		elmScript.type = 'text\/javascript';
+		elmScript.src  = pettanr.CONST.CREATE_PANEL_JS;
+
+		instance.addTimer( detectForm, 250 );
+		instance.onPaneResize( w, h );
+		
+		json = _json;
+		
+		elmProgress.innerHTML = 'loading form.';
+	};
+	this.onPaneResize = function( _windowW, _windowH ){
+		windowW = _windowW;
+		windowH = _windowH;
+		instance.rootElement.style.cssText = [
+			'left:', Math.floor( ( _windowW - instance.rootElement.offsetWidth  ) /2 ), 'px;',
+			'top:',  Math.floor( ( _windowH - instance.rootElement.offsetHeight ) /2 ), 'px;'
+		].join( '' );
+	};
+	this.onClose = function(){
+		elmHeader = elmProgress = elmForm  = elmUploader = instance = null;
+		isUploading = false;
+	};
+}, true, true, 'Panel Console', 'panelConsole', null, '#603CBA' );
+
+
 })( pettanr, gOS, window );
diff --git a/app/assets/javascripts/peta.common.js b/app/assets/javascripts/peta.common.js
index dc9217b2..32a922bc 100644
--- a/app/assets/javascripts/peta.common.js
+++ b/app/assets/javascripts/peta.common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.common.js
- *   version 0.5.4
+ *   version 0.5.6
  * 
  *   author:
  *     itozyun
@@ -67,7 +67,7 @@ pettanr.CONST = ( function(){
 					return a ? a.href : '';
 				}
 				return '';
-			}
+			};
 			var loc = document.location;
 			return [ loc.protocol, '\/\/', loc.host, '\/' ].join( '' );
 		})(),
@@ -79,7 +79,7 @@ pettanr.CONST = ( function(){
 				l    = path.split( '\/' ).length - PETTANR_ROOT_PATH.split( '\/' ).length;
 			for( var i=0; i<l; ++i ){
 				ret += '..\/';
-			}
+			};
 			return ret;
 		})();
 		
@@ -96,8 +96,8 @@ pettanr.CONST = ( function(){
 		CREATE_PANEL_JS:			SERVER_SUPPORT === false ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',
 		UPLOAD_PICTURE_JS:			SERVER_SUPPORT === false ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',
 		REGISTER_ARTIST_JS:			SERVER_SUPPORT === false ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',
-		JQUERY_URL:					SERVER_SUPPORT === false ? 'javascripts\/jquery-1.6.2.min.js' : PETTANR_ROOT_PATH + 'assets\/jquery-162_min.js',
-		SERVER_SUPPORT:				SERVER_SUPPORT
+		SERVER_SUPPORT:				SERVER_SUPPORT,
+		URL_PETA_APPS_CSS:			( SERVER_SUPPORT === false ? 'stylesheets' : '\/assets' ) + '\/peta.apps.css'
 	}
 })();
 
@@ -645,29 +645,29 @@ pettanr.bind = ( function(){
 			_ieroot = _quirks ? "body" : "documentElement";
 			_root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);
 
-		function getInnerSize() {
+		function getInnerSize(){
 			return {
 				w: _root.innerWidth  || _root.clientWidth,
 				h: _root.innerHeight || _root.clientHeight
 			};
-		}
+		};
 
-		function loop() {
+		function loop(){
 			if (!_globalLock++) {
 				var size = getInnerSize();
 				if (_size.w !== size.w || _size.h !== size.h) { // resized
 					_size = size; // update
 					onResizeFunction( _size );
-				}
+				};
 				setTimeout( unlock, 0); // delay unlock
-			}
+			};
 			setTimeout(loop, 500);
-		}
+		};
 		function unlock(){
 			_globalLock = 0;
-		}
+		};
 		loop();
-	}
+	};
 	
 	
 	var ElementBuilderClass = function( elmTarget, noClassnameMode ){
@@ -676,7 +676,7 @@ pettanr.bind = ( function(){
 		
 		function buildComicElement(){
 			
-		}
+		};
 		
 		function buildPanelElement( json, zoom ){
 			var _elmPanel = document.createElement( 'div' ),
@@ -723,7 +723,7 @@ pettanr.bind = ( function(){
 					} else {
 						_elmImg.style.width  = Math.abs( _comicElement.width ) + 'px';
 						_elmImg.style.height = Math.abs( _comicElement.height ) + 'px';
-					}
+					};
 					
 					RIMG_ARRAY.push( _rImg );
 				} else {
@@ -751,24 +751,24 @@ pettanr.bind = ( function(){
 					if( _speechesAttributes ){
 						for( _key in _speechesAttributes ){
 							_text += _speechesAttributes[ _key ] && _speechesAttributes[ _key ].content ? _speechesAttributes[ _key ].content : '';
-						}
-					}
+						};
+					};
 					_elmText.firstChild.appendChild( document.createTextNode( _text ));
 					BALLOON_ARRAY.push( _balloon );
-				}
-			}
-		}
+				};
+			};
+		};
 		
 		function clean(){
 			// clean elmTarget
 			while( RIMG_ARRAY.length > 0 ){
 				RIMG_ARRAY.shift().destroy();
-			}
+			};
 			while( BALLOON_ARRAY.length > 0 ){
 				BALLOON_ARRAY.shift().destroy();
-			}
+			};
 			Util.removeAllChildren( elmTarget );		
-		}
+		};
 		
 		this.build = function( json, zoom ){
 			clean();
@@ -787,13 +787,13 @@ pettanr.bind = ( function(){
 			} else {
 				// invalid json
 			};
-		}
+		};
 		this.zoom = function(){
 			
-		}
+		};
 		this.destroy = function(){
 			clean();
-		}
+		};
 	};
 	
 	var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode ){
@@ -801,36 +801,36 @@ pettanr.bind = ( function(){
 		var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false );
 		var resizer    = null;
 		
-		if( zoomSelfEnabled === true){
+		if( zoomSelfEnabled === true ){
 			elmTarget.parentNode.insertBefore( elmDetectW, elmTarget );
 			resizer = new ResizeAgentClass( onResize, elmDetectW );
-		}
+		};
 		function onResize(){
 			
-		}
+		};
 		json && typeof json === 'object' && builder.build( json );
 		
 		this.init = function(){
 				
-		}
+		};
 		this.zoom = function(){
 			builder.zoom();
-		}
+		};
 		this.json = function( _json ){
 			json = _json;
 			builder.build( _json );
-		}
+		};
 		this.targetElement = function(){
 				
-		}
+		};
 		this.layout = function(){
 				
-		}
+		};
 		this.destroy = function(){
 			builder.destroy();
 			elmTarget = json = builder = null;
-		}
-	}
+		};
+	};
 	
 	return {
 		createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode ){
diff --git a/app/assets/javascripts/system.js b/app/assets/javascripts/system.js
index 97993313..b34240a6 100644
--- a/app/assets/javascripts/system.js
+++ b/app/assets/javascripts/system.js
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.5.5
+ *   version 0.5.6
  * 
  * 
  * Type
@@ -324,17 +324,33 @@
 			getChildIndex: function( _parent, _child ){
 				var _children = _parent.getElementsByTagName( _child.tagName ),
 					l = _children.length;
-				for(var i=0; i<l; ++i){
-					if( _children[ i] === _child) return i;
-				}
+				for( var i=0; i<l; ++i ){
+					if( _children[ i ] === _child ) return i;
+				};
 				return -1;
 			},
-			hasClassName: function( _elm, _className){
-				var _classes = ( _elm.className || '').split( ' ');
-				for( var i=0, l=_classes.length; i<l; ++i){
-					if( _classes[ i] === _className) return true;
-				}
-				return false;
+			hasClassName: function( _elm, _className ){
+				return Util.getIndex( ( _elm.className || '' ).split( ' ' ), _className ) !== -1;
+			},
+			addClass: function( _elm, _className ){
+				if( Util.hasClassName( _elm, _className ) === false ){
+					var sp = ' ';
+					var _array = ( _elm.className || '' ).replace( /\s+/g, sp ).split( sp );
+					_array.push( _className );
+					_elm.className = _array.join( sp );
+				};
+			},
+			removeClass: function( _elm, _className ){
+				var sp     = ' ',
+					_array = _elm.className.replace( /\s+/g, sp ).split( sp ),
+					i      = Util.getIndex( _array, _className );
+				if( i !== -1 ){
+					_array.splice( i, 1 );
+					_elm.className = _array.join( sp );
+				};
+			},
+			toggleClass: function( _elm, _className ){
+				Util.hasClassName( _elm, _className ) === false ? Util.addClass( _elm, _className ) : Util.removeClass( _elm, _className );
 			},
 			removeAllChildren: function ( _elm){
 				while( _elm.firstChild){
@@ -372,40 +388,6 @@
 			/*
 			 * 
 			 */
-			createGlobalFunction: function( _func ){
-				var randomKey = null;
-				while( true) {
-					randomKey = '_glovalFunction_' + ( '' + Math.random()).replace( /\./,'');
-					if( eval( 'typeof '+randomKey) === 'undefined') {
-						break;
-					}
-				}
-				window[ randomKey ] = _func;
-				return randomKey;
-			},
-			createGlobalFunc: function( func){
-				var randomKey = null;
-				while(true) {
-					randomKey = 'hogeGlovalFunc_'+(''+Math.random()).replace(/\./,'');
-					if(eval('typeof '+randomKey) == 'undefined') {
-						break;
-					}
-				}
-				eval(randomKey+'='+((typeof func=='string') ? func : func.toString()));
-				return randomKey;
-			},
-			createGlobalVar: function( obj){
-				var randomKey = null;
-				while(true) {
-					randomKey = 'hogeGlovalVar_'+(''+Math.random()).replace(/\./,'');
-					if(eval('typeof '+randomKey+'') == 'undefined') {
-						break;
-					}
-				}
-				var globalObj = eval(randomKey+'={}');
-				globalObj.value = obj;
-				return randomKey;
-			},
 			createGlobalUniqueName: function(){
 				var randomKey = null;
 				while(true) {
@@ -1692,6 +1674,8 @@ var AbstractApplication = function( displayName, appClass, isOverlay ){
 		};
 		
 		function onOpen(){
+			self.rootElement.style.display = '';
+			
 			if( self.MIN_WIDTH > _w || self.MIN_HEIGHT > _h ){
 				if( Type.isHTMLElement( self.rootElement ) === true ){
 					// 小さすぎる！、と表示
@@ -1881,7 +1865,7 @@ var Application = ( function(){
 			if( currentApplication ){
 				if( currentApplication.getUID() === uid ) return null;
 				if( isOverlay === false && currentApplication.close() === false ) return null;
-			}
+			};
 
 			appClass.prototype = new AbstractApplication( displayName, appClass, isOverlay );
 			var application = new appClass(); // new は boot で
@@ -1894,6 +1878,7 @@ var Application = ( function(){
 				body.style.backgroundColor = application.bgColor;
 				
 				body.appendChild( application.rootElement );
+				application.rootElement.style.display = 'none';
 				application.init();
 
 				application.addAsyncCall( asyncOpen, arg );
@@ -3089,9 +3074,8 @@ var Overlay = ( function(){
 		
 		//body.appendChild( application.rootElement );
 		elmContainer.insertBefore( application.rootElement, elmCloseButton );
+		application.rootElement.style.display = 'none';
 		application.init();
-		
-		
 	};
 	function asyncOpen( /* arguments */ ){
 		
@@ -3288,11 +3272,10 @@ var UI = ( function(){
 	}
 	
 	var ButtonClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){
-		var className = elmWrapper.className || '',
-			instance = this,
-			focus = false,
-			visible = true,
-			enabled = true;
+		var instance  = this,
+			focus     = false,
+			visible   = true,
+			enabled   = true;
 		MouseEvent.add( apiuser, elmWrapper, 'click', onClick );
 		
 		function onClick(){
@@ -3302,16 +3285,20 @@ var UI = ( function(){
 		};
 		this.focus = function(){
 			focus = true;
-			elmWrapper.className = className + ' button-has-focus';
+			Util.addClass( elmWrapper, 'button-has-focus' );
 			start( apiuser, uiGroup, instance );
 		};
 		this.blur = function( keyCode ){
 			keyCode === 13 && onClick();
-			elmWrapper.className = className;
+			Util.removeClass( elmWrapper, 'button-has-focus' );
 			focus = false;
 			finish( apiuser, uiGroup, instance );
 		};
-		this.enabled = function(){
+		this.enabled = function( _enabled ){
+			if( Type.isBoolean( _enabled ) === true && enabled !== _enabled ){
+				_enabled === true ? Util.removeClass( elmWrapper, 'button-disabled' ) : Util.addClass( elmWrapper, 'button-disabled' );
+				enabled = _enabled;
+			};
 			return enabled;
 		};
 		this.visible = function( _visible ){
diff --git a/app/views/layouts/test.html.erb b/app/views/layouts/test.html.erb
index 773cbb1d..0c1a06ec 100644
--- a/app/views/layouts/test.html.erb
+++ b/app/views/layouts/test.html.erb
@@ -3,7 +3,6 @@
 <head>
   <title>Pettanr</title>
   <%= stylesheet_link_tag    "application" %>
-  <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
 </head>
 <body>
-- 
2.11.0