X-Git-Url: http://git.osdn.jp/view?a=blobdiff_plain;f=0.5.x%2Fjavascripts%2Fpeta-apps.js;h=16cabfe634a836ebc16269affd39ed410626ead7;hb=2621070c032954702155d4a315535b8b1aafd616;hp=c03b3c60fbc370f140b1a392f4b7c74c2aaaa9c7;hpb=b3105489eb5c3c994695642b80e8827d4bfe393a;p=pettanr%2FclientJs.git

diff --git a/0.5.x/javascripts/peta-apps.js b/0.5.x/javascripts/peta-apps.js
index c03b3c6..16cabfe 100644
--- a/0.5.x/javascripts/peta-apps.js
+++ b/0.5.x/javascripts/peta-apps.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.38
+ *   version 0.5.49
  *   
  * author:
  *   itozyun
@@ -16,353 +16,483 @@
 		MyArtistID = 'current_artist' in window ? current_artist.id : ( pettanr.CONST.SERVER_SUPPORT === false ? 1 : -1 ),
 		Driver     = null,
 		FileAPI    = gOS.registerDriver( function(){
-			var self = Driver = this;
+			var self = Driver = this,
+				unregisteredFileDataJsonList = [];
 			
-			function onLoadJson( _file, _json ){
-				var _access = FileAPI.getFileDataAccess( _file ),
-					_data   = _access !== null ? _access.DATA : null,
-					i, l;
-				if( _data === null ){
-					onErrorJson( _file );
+			function onLoadJson( file, json ){
+				var access = FileAPI.getFileDataAccess( file ),
+					data   = access !== null ? access.DATA : null,
+					i, l, args;
+				if( data === null ){
+					onErrorJson( file );
 					return;
 				};
-				_data.state = Const.FILE.STATE.OK;
-				
-				if( Type.isArray( _json ) === true ){
-					for( i = 0, l = _json.length; i < l; ++i ){
-						buildFileData( _json[ i ], _data );
+				data.state = Const.FILE.STATE.OK;
+				if( Type.isArray( json ) === true ){
+					for( i = 0, l = json.length; i < l; ++i ){
+						registerFileData( json[ i ], data );
 					};
 				} else
-				if( Type.isNumber( _json.id ) === true ){
-					buildFileData( _json, _data );
+				if( Type.isNumber( json.id ) === true ){
+					registerFileData( json, data );
+				};
+				while( 0 < unregisteredFileDataJsonList.length ){
+					args = unregisteredFileDataJsonList.shift();
+					registerFileData( args[ 0 ], args[ 1 ] );
+					//alert( unregisteredFileDataJsonList.length )
 				};
-				_file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, _file, 'children', null ) );
+				file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, file, 'children', null ) );
 			};
-			function onErrorJson( _file ){ 
-				var _data = FileAPI.getFileData( _file);
-				if( _data !== null){
-					_data.state = Const.FILE.STATE.ERROR;
+			function onErrorJson( file ){ 
+				var data = FileAPI.getFileData( file );
+				if( data !== null){
+					data.state = Const.FILE.STATE.ERROR;
 				};
-				_file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, _file, 'children', null ) );
+				file.dispatchEvent( FileAPI.createFileEvent( Const.FILE.EVENT.GET_SEQENTIAL_FILES, file, 'children', null ) );
 			};
-			function buildFileData( _data, _parent ){
-				var _array, i, l;
-				// Panel
-				if( _parent === FILE_DATA_PANELS_ROOT || _parent === FILE_DATA_MY_PANELS_ROOT ){
-					_data.type = FILE_TYPE.PANEL;
-					_array = PANEL_ARRAY;
-				} else
-				// Comic
-				if( _parent === FILE_DATA_COMICS_ROOT ){
-					_data.type = FILE_TYPE.COMIC;
-					_array = COMIC_ARRAY;
-				} else
-				if( _parent.type === FILE_TYPE.COMIC ){
-					_array = COMIC_ARRAY;
-				} else
-				// Lisence
-				if( _parent === FILE_DATA_LISENCE_ROOT ){
-					_data.type = FILE_TYPE.LICENSE;
-					_array = ORIGINAL_LICENSE_ARRAY;
-				} else
-				// Author
-				if( _parent === FILE_DATA_AUTHOR_ROOT ){
-					_data.type = FILE_TYPE.AUTHOR;
-					_array = AUTHOR_ARRAY;
-				} else
-				// Artist
-				if( _parent === FILE_DATA_ARTIST_ROOT ){
-					_data.type = FILE_TYPE.ARTIST;
-					_array = ARTIST_ARRAY;
-				} else		
-				// Picture
-				if( _parent === FILE_DATA_PICTURE_ROOT || _parent === FILE_DATA_MY_PICTURES_ROOT ){
-					_data.type = FILE_TYPE.PICTURE;
-					_array = RESOURCE_PICTURE_ARRAY;
-					// original_license を含まなければ、license object を削除して ビットデータ で保持
-					// original_license なら ファイルを作る buildFileData( _license, FILE_DATA_LISENCE_ROOT)
-					var _license = _data.license,
-						_rule,
-						_Math_pow = Math.pow,
-						_bits = 0;
-					if( typeof _license === 'object' ){
-						for( i=0, l=BASIC_LICENSES.length; i<l; ++i ){
-							_rule = _license[ BASIC_LICENSES[ i]];
-							if( typeof _rule === 'number' && _rule === 1 ){
-								_bits += _Math_pow( 2, i );
-							};
+			function registerFileData( json, parent ){
+				var data;
+				switch( parent ){
+					// Comic
+					case FILE_DATA_COMICS_ROOT    :
+					case FILE_DATA_MY_COMICS_ROOT :
+					case COMIC_ARRAY              :
+						json.type = FILE_TYPE.COMIC;
+						data = createFileData( json, COMIC_ARRAY, 'title' );
+						if( data.json !== null ) data.json = true;
+						if( data.author ){
+							addChildData( data.author, data );
+							data.author.id === MyAuthorID && addChildData( FILE_DATA_MY_COMICS_ROOT, data );
 						};
-						_data.license = _bits;
-					};
-				} else {
-					alert( 'error' );
-				};
+						parent === FILE_DATA_COMICS_ROOT && addChildData( FILE_DATA_LATEST_COMICS, data );
+						break;
+					
+					case STORY_ARRAY :
+						json.type = FILE_TYPE.STORY;
+						data = createFileData( json, STORY_ARRAY, 'x,y,z,t' );
+						addChildData( FILE_DATA_STORY_ROOT, data );
+						break;
+					
+					// Lisence
+					case FILE_DATA_LISENCE :
+					case LICENSE_ARRAY :
+						json.type = FILE_TYPE.LICENSE;
+						data = createFileData( json, LICENSE_ARRAY, 'name,caption,url,system_picture_id,settings,credit_pictures' );
+						addChildData( FILE_DATA_LISENCE, data );
+						break;
+					// License Group
+					case FILE_DATA_LISENCE_GROUP :
+					case LICENSE_GROUP_ARRAY     :
+						json.type = FILE_TYPE.LICENSE_GROUP;
+						data = createFileData( json, LICENSE_GROUP_ARRAY, 'name,caption,url,classname' );
+						addChildData( FILE_DATA_LISENCE_GROUP, data );
+						break;
+					
+					// Speech Balloon Templete
+					case FILE_DATA_BALLOON_ROOT :
+					case BALLOON_TEMPLETE_ARRAY :
+						json.type = FILE_TYPE.BALLOON_TEMPLETE;
+						// register pettanr.balloon
+						pettanr.newBalloon.register( json.settings );
+						data = createFileData( json, BALLOON_TEMPLETE_ARRAY, 'name,caption,classname,settings' );
+						addChildData( FILE_DATA_BALLOON_ROOT, data );
+						break;
+					
+					// Author
+					case FILE_DATA_AUTHOR_ROOT :
+					case AUTHOR_ARRAY          :
+						json.type = FILE_TYPE.AUTHOR;
+						data = createFileData( json, AUTHOR_ARRAY, 'name,email,homepage_url' );
+						addChildData( FILE_DATA_AUTHOR_ROOT, data );
+						break;
+					
+					// Artist
+					case FILE_DATA_ARTIST_ROOT :
+					case ARTIST_ARRAY          :
+						json.type = FILE_TYPE.ARTIST;
+						data = createFileData( json, ARTIST_ARRAY, 'name,email,homepage_url' );
+						addChildData( FILE_DATA_ARTIST_ROOT, data );
+						break;
+
+					case PICTURE_ARRAY :
+						json.type = FILE_TYPE.PICTURE;
+						data = createFileData( json, PICTURE_ARRAY, 'ext,revision,credit,settings' );
+						break;
 				
-				_data.driver = Driver;
-				// alert( ' _array ' + _data.id + Type.isNumber( _data.id ) );
-				// _array に _data を格納 または 上書き
-				if( Type.isNumber( _data.id ) === true && _data.id > 0 ){
-					var _id       = _data.id - 1,
-						__data    = _array[ _id ],
-						_reserved = Const.FILE.DATA_PROPERTY_RESERVED.join( ', ' );
-					if( __data ){
-						for( var key in _data ){
-							if( _reserved.indexOf( key ) === -1 ){
-								__data[ key ] = _data[ key ];
-							};
+					// Resource Picture
+					case FILE_DATA_RESOURCE_PICTURES_ROOT	 :
+					case FILE_DATA_MY_RESOURCE_PICTURES_ROOT :
+					case RESOURCE_PICTURE_ARRAY              :
+						json.type = FILE_TYPE.RESOURCE_PICTURE;
+						data = createFileData( json, RESOURCE_PICTURE_ARRAY, 'ext' );
+						if( data.artist ){
+							addChildData( data.artist, data );
+							data.artist.id === MyArtistID && addChildData( FILE_DATA_MY_RESOURCE_PICTURES_ROOT, data );
 						};
-						_data = __data; // このタイミングで参照が切れるので注意！！
-					} else {
-						_array[ _id ] = _data;
-					};
-				} else {
-					// alert( 'error' + _parent.name + ' ' + _data.id );
-				};
-		
-				// Author
-				// Artist
-				if( _parent === FILE_DATA_AUTHOR_ROOT || _parent === FILE_DATA_ARTIST_ROOT ){
-					addChildData( _parent, _data );
-				} else
-				// Comic + Panels
-				if( _parent.type === FILE_TYPE.COMIC || _parent === FILE_DATA_COMICS_ROOT ){
-					var _panels = _data.stories,
-						_panel;
-					if( Type.isArray( _panels ) === true ){
-						
-						for( i=0, l=_panels.length; i<l; ++i ){
-							_panel = buildFileData( _panels[ i ], FILE_DATA_PANELS_ROOT );
-							/*
-							 * 間違い！ t 順に格納
-							 */
-							addChildData( _data, _panel );
-						};
-						delete _data.stories;
-					} else {
-						if( _data.json !== null ){
-							_data.json = true;
+						break;
+
+					// Original Picture
+					case FILE_DATA_MY_ORIGINAL_PICTURES_ROOT :
+					case ORIGINAL_PICTURE_ARRAY              :
+						json.type = FILE_TYPE.ORIGINAL_PICTURE;
+						data = createFileData( json, ORIGINAL_PICTURE_ARRAY, 'ext,filesize,width,height,md5' );
+						if( data.artist ){
+							// addChildData( data.artist, data );
+							data.artist.id === MyArtistID && addChildData( FILE_DATA_MY_ORIGINAL_PICTURES_ROOT, data );
 						};
-						if( Type.isArray( _data.children ) === false ){
-							_data.children = [];
+						break;
+					// Panel
+					case FILE_DATA_PANELS_ROOT    :
+					case FILE_DATA_MY_PANELS_ROOT :
+					case PANEL_ARRAY              :
+							json.type = FILE_TYPE.PANEL;
+							data = createFileData( json, PANEL_ARRAY, 'border,publish,width,height' );
+							addChildData( FILE_DATA_LATEST_PANELS, data );
+							data.author.id === MyAuthorID && addChildData( FILE_DATA_MY_PANELS_ROOT, data );						
+						break;
+						
+					// Panel Element
+					case PANEL_ELEMENT_ARRAY :
+						json.type = FILE_TYPE.PANEL_ELEMENT;
+						data = createFileData( json, PANEL_ELEMENT_ARRAY, 'caption,url,width,height,x,y,z,t' ); // 画像の分
+						// 噴出しの分
+						// 景色の分
+						break;
+						
+					default :
+						if( parent.type === FILE_TYPE.COMIC ){
+							//alert( 'comicstory' )
+							data = registerFileData( json, STORY_ARRAY );
+							//addChildData( parent, data );
+							break;
 						};
+						throw new Error( 'build file error!' );	
+				};
+				return data;
+			};
+			/*
+			 * 1. すでに一度以上ファイルを取得している場合、そのオブジェクトを取得．または、新規に作成．
+			 * 2. オブジェクトに値をコピー・上書き
+			 * 3. 
+			 */
+			function createFileData( json, array, copyProps ){
+				copyProps = copyProps + ',id,type';
+				
+				var getIndex  = Util.getIndex,
+					id        = json.id,
+					data      = getResource( array, id ),
+					p, i, l,
+					histories, history,
+					stories, story,
+					elements;
+				
+				// Copy Props
+				copyProps = copyProps.split( ',' );
+				for( p in json ){
+					if( getIndex( copyProps, p ) !== -1 ) data[ p ] = json[ p ];
+				};
+				
+				// Common
+				data.driver = Driver;				
+				if( Type.isString( json.created_at ) === true ) data.created_at = Math.floor( new Date( json.created_at ).getTime() / 1000 );
+				if( Type.isString( json.updated_at ) === true ) data.updated_at = Math.floor( new Date( json.updated_at ).getTime() / 1000 );
+				
+				// 実素材履歴
+				histories = json.pictures;
+				if( Type.isArray( histories ) === true ){
+					for( i = 0, l = histories.length; i < l; ++i ){
+						history = getResource( PICTURE_ARRAY, histories[ i ] );
+						addChildData( data, history );
 					};
-					var _author = _data.author || getResource( AUTHOR_ARRAY, _data.author_id );
-					if( _author ){
-						_data.author = _author = buildFileData( _author, FILE_DATA_AUTHOR_ROOT );
-						addChildData( _author, _data );
-						_author.id === MyAuthorID && addChildData( FILE_DATA_MY_COMICS_ROOT, _data );
+					data.picture = history;
+				};				
+				
+				// ストーリー
+				stories = json.stories;
+				if( Type.isArray( stories ) === true ){
+					for( i = 0, l = stories.length; i < l; ++i ){
+						story = getResource( STORY_ARRAY, stories[ i ] );
+						/*
+						 * 間違い！ t 順に格納
+						 */
+						addChildData( data, story );
 					};
-					if( _parent === FILE_DATA_COMICS_ROOT ){
-						addChildData( FILE_DATA_LATEST_COMICS, _data );
+				};
+
+				// パネル要素
+				elements = json.elements;
+				if( Type.isArray( elements ) === true ){
+					for( i = 0, l = elements.length; i<l; ++i ){
+						/*
+						 * 間違い！ t 順に格納
+						 */
+						addChildData( data, getResource( PANEL_ELEMENT_ARRAY, elements[ i ] ) );
 					};
-				} else
-				// Panel
-				if( _parent === FILE_DATA_PANELS_ROOT || _parent === FILE_DATA_MY_PANELS_ROOT ){
-					 _data.comic && buildFileData( _data.comic, FILE_DATA_COMICS_ROOT );
-					_data.author && buildFileData( _data.author, FILE_DATA_AUTHOR_ROOT );
-					
-					_data.comic  = getResource( COMIC_ARRAY, _data.comic_id );
-					_data.author = getResource( AUTHOR_ARRAY, _data.author_id );
+				};
+				
+				// Artist
+				if( json.artist || json.artist_id ){
+					data.artist = getResource( ARTIST_ARRAY, json.artist || json.artist_id );
+				};
 					
-					// picture data をファイルに取り出し
-					var _elements = _data.panel_elements,
-						_elm;
-					if( Type.isArray( _elements ) === true ){
-						for( i=0, l=_elements.length; i<l; ++i ){
-							_elm = _elements[ i];
-							if( _elm.resource_picture ){
-								_elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT ); // 上記参照切れに備えてここで上書き
-							} else {
-								_elm.resource_picture = getResource( RESOURCE_PICTURE_ARRAY, _elm.picture_id );
-							};
-						};
-					};
-					_data.publish === 1 && addChildData( FILE_DATA_LATEST_PANELS, _data );
-					_data.author_id === MyAuthorID && addChildData( FILE_DATA_MY_PANELS_ROOT, _data );
-				} else
-				// Picture
-				if( _data.type == FILE_TYPE.PICTURE ){
-					var _artist = _data.artist || getResource( ARTIST_ARRAY, _data.artist_id );
-					if( _artist){
-						_data.artist = _artist = buildFileData( _artist, FILE_DATA_ARTIST_ROOT );
-						addChildData( _artist, _data );
-						if( _artist.id === MyArtistID ){
-							addChildData( FILE_DATA_MY_PICTURES_ROOT, _data );
-							//FILE_DATA_MY_PICTURES_ROOT.type = FILE_TYPE.ARTIST;
-							//FILE_DATA_MY_PICTURES_ROOT.id = MyArtistID;
-						};
-					};
+				// Author
+				if( json.author || json.author_id ){
+					data.author = getResource( AUTHOR_ARRAY, json.author || json.author_id );
+				};
+
+				// Comic
+				if( json.comic || json.comic_id ){
+					data.comic = getResource( COMIC_ARRAY, json.comic || json.comic_id );
+				};
+
+				// Panel
+				if( json.panel || json.panel_id ){
+					data.panel = getResource( PANEL_ARRAY, json.panel || json.panel_id );
+				};
+
+				// 実素材
+				if( json.picture || json.picture_id ){
+					data.picture = getResource( PICTURE_ARRAY, json.picture || json.picture_id );
+				};
+
+				// License
+				if( json.license || json.license_id ){
+					data.license = getResource( LICENSE_ARRAY, json.license || json.license_id );
+				};
+
+				// License Group
+				if( json.license_group || json.license_group_id ){
+					data.license_group = getResource( LICENSE_GROUP_ARRAY, json.license_group || json.license_group_id );
 				};
-				return _data;
+				
+				// 原画
+				if( json.original_picture || json.original_picture_id ){
+					data.original_picture = getResource( ORIGINAL_PICTURE_ARRAY, json.original_picture || {
+						id        : json.original_picture_id,
+						ext       : json.ext,
+						filesize  : json.filesize,
+						width     : json.width,
+						height    : json.height,
+						md5       : json.md5,
+						artist    : json.artist,
+						artist_id : json.artist_id
+					} );						
+				};
+				
+				return data;
 			};
-			function addChildData( _parent, _child ){
-				if( Type.isArray( _parent.children ) === false ){
-					_parent.children = [];
+			function addChildData( parent, child ){
+				if( Type.isArray( parent.children ) === false ){
+					parent.children = [ child ];
+					return;
 				};
-				Util.getIndex( _parent.children, _child ) === -1 && _parent.children.push( _child );
+				Util.getIndex( parent.children, child ) === -1 && parent.children.push( child );
 			};
-			function getResource( _array, _id ){
-				if( Type.isArray( _array ) === false || Type.isNumber( _id ) === false || _id < 1 ) return null;
-				var _data = _array[ _id - 1 ];
-				if( !_data ){
-					_data = _array[ _id - 1 ] = {};
+			function getResource( list, IDorOBJECT ){
+				var data, id, obj;
+				if( Type.isNumber( IDorOBJECT ) === true ){
+					id = IDorOBJECT;
+				} else
+				if( IDorOBJECT && Type.isNumber( IDorOBJECT.id ) === true ){
+					obj = IDorOBJECT;
+					id  = obj.id;
+					unregisteredFileDataJsonList.push( [ obj, list ] );
+				} else {
+					alert( 'getResource error' + IDorOBJECT.toString() );
+					return undefined;
 				};
-				return _data;
+				data = list[ id ];
+				if( !data ) data = list[ id ] = { id : id };
+				return data;
 			};
 			
-			this.getSeqentialFiles = function( _file ){
-				var _data = FileAPI.getFileData( _file ),
-					_json = _data !== null ? _data.json : null;
-				if( _json === true && _data.type === FILE_TYPE.COMIC ){
+			this.getSeqentialFiles = function( file ){
+				var data = FileAPI.getFileData( file ),
+					json = data.json || null;
+				if( data.type === FILE_TYPE.COMIC && json === true ){
 					if( pettanr.CONST.SERVER_SUPPORT === false ){
-						_json = [ 'json\/comics_', _data.id, '.json' ].join( '' );
+						json = [ 'json\/comics_', data.id, '.json' ].join( '' );
 					} else {
-						_json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'comics\/', _data.id, '.json' ].join( '' );
+						json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'stories\/', data.id, '\/comic.json' ].join( '' );
 					};
+					data.json = null;
 				};
-				if( typeof _json === 'string' ){
-					FileAPI.getJson( _file, _json, onLoadJson, onErrorJson );
-					_data.state = Const.FILE.STATE.LOADING;
-					_data.json  = null;
+				if( typeof json === 'string' ){
+					FileAPI.getJson( file, json, onLoadJson, onErrorJson );
+					data.state = Const.FILE.STATE.LOADING;
+					if( data.json !== null ) delete data.json;
 					return;
 				};
 			};
-			this.getName = function( _file ){
-				var _data = FileAPI.getFileData( _file ),
-					_type = _data !== null ? _data.type : null;
-				if( _type === FILE_TYPE.PICTURE ){
-					return [ _data.id, _data.ext ].join( '.' );
-				} else
-				if( _type === FILE_TYPE.PANEL ){
-					return [ 'id:' + _data.id + ', ' + ( _data.t || '' ) + ':', _data.comic ? _data.comic.title : 'no comic' ].join( '' );
-				} else
-				if( _type === FILE_TYPE.COMIC ){
-					return _data.title;
-				} else
-				if( _type === FILE_TYPE.ARTIST ){
-					return [ _data.name, '画伯' ].join( '' );
-				} else
-				if( _type === FILE_TYPE.AUTHOR ){
-					return [ _data.name, '先生' ].join( '' );
+			this.getName = function( file ){
+				var data = FileAPI.getFileData( file ),
+					type = data !== null ? data.type : null;
+				switch( type ){
+					case FILE_TYPE.BALLOON :
+						break;
+					case FILE_TYPE.PANEL_ELEMENT :
+						return 'パネル要素';
+					case FILE_TYPE.RESOURCE_PICTURE :
+						return [ '素材 ' + data.id, '.', data.ext ].join( '' );
+					case FILE_TYPE.PICTURE  :
+						return [ '実素材 ' + data.id, '.', data.ext ].join( '' );
+					case FILE_TYPE.ORIGINAL_PICTURE :
+						return [ '原画 ', data.id, '.', data.ext ].join( '' );
+					case FILE_TYPE.COMIC :
+						return data.title;
+					case FILE_TYPE.STORY :
+						return [ 'story id:', data.id, ' ', data.comic ? data.comic.title : 'no comic', ':', data.t ].join( '' );
+					case FILE_TYPE.PANEL :
+						return [ 'panel id:', data.id ].join( '' );
+					case FILE_TYPE.AUTHOR :
+						return [ data.name, '先生' ].join( '' );
+					case FILE_TYPE.ARTIST :
+						return [ data.name, '画伯' ].join( '' );
+					case FILE_TYPE.BALLOON_TEMPLETE :
+						return [ data.id, data.caption ].join( ':' );
+					case FILE_TYPE.FOLDER :
 				};
-				return _data.name;
+				return data.name;
 			};
-			this.getThumbnail = function( _file ){
-				var _data = FileAPI.getFileData( _file ),
-					_type = _data !== null ? _data.type : null;
-				if( _type === FILE_TYPE.PICTURE ){
-					return { image: [ pettanr.CONST.THUMBNAIL_PATH, _data.id, '.', _data.ext ].join( '' )};
-				};
-				if( _data === FILE_DATA_COMICS_ROOT ){
-					return { className: 'file-type-cabinet' };
-				};
-				if( _type === FILE_TYPE.COMIC ){
-					return { className: 'file-type-comic' };
-				};
-				if( _type === FILE_TYPE.PANEL ){
-					return { className: 'file-type-panel' };
-				};
-				if( _type === FILE_TYPE.AUTHOR ){
-					return { className: 'file-type-author' };
-				};
-				if( _type === FILE_TYPE.ARTIST ){
-					return { className: 'file-type-artist' };
-				};
-				if( _type === FILE_TYPE.FOLDER){
-					return { className: 'file-type-folder' };
+			this.getThumbnail = function( file ){
+				var data = FileAPI.getFileData( file ),
+					type = data !== null ? data.type : null;
+				if( data === FILE_DATA_COMICS_ROOT ) return { className: 'file-type-cabinet' };
+				switch( type ){
+					
+					case FILE_TYPE.PANEL_ELEMENT :
+						return { className: 'file-type-charactor' };
+					case FILE_TYPE.RESOURCE_PICTURE :
+						return { image: [ pettanr.CONST.THUMBNAIL_PATH, data.id, '.', data.ext ].join( '' )};
+					case FILE_TYPE.PICTURE  :
+						//data = data.original_picture;
+						return { image: [ pettanr.CONST.THUMBNAIL_PATH, data.id, '.', data.ext ].join( '' )};
+					case FILE_TYPE.ORIGINAL_PICTURE :
+						return { className: 'file-type-charactor' };			
+						// return { image: [ pettanr.CONST.THUMBNAIL_PATH, data.id, '.', data.ext ].join( '' )};
+					case FILE_TYPE.BALLOON :
+						break;
+					case FILE_TYPE.COMIC :
+						return { className: 'file-type-comic' };
+					case FILE_TYPE.STORY :
+						data = data.panel;
+					case FILE_TYPE.PANEL :
+						return { className: 'file-type-panel' };
+					case FILE_TYPE.AUTHOR :
+						return { className: 'file-type-author' };
+					case FILE_TYPE.ARTIST :
+						return { className: 'file-type-artist' };
+					case FILE_TYPE.BALLOON_TEMPLETE :
+						return { className: 'file-type-balloon' };
+					case FILE_TYPE.FOLDER :
+						return { className: 'file-type-folder' };
 				};
 				return { className: 'file-type-broken' };
 			};
-			this.getSummary = function( _file ){
-				var _data = FileAPI.getFileData( _file ),
-					_type = _data !== null ? _data.type : null;
-				if( _type === FILE_TYPE.PICTURE ){
-					return [ _data.width, 'x', _data.height, ', filesize:', _data.filesize, ', lisence:', _data.license ].join( '' );
-				};
-				if( _data === FILE_DATA_COMICS_ROOT ){
-					return 'cabinet file';
-				};
-				if( _type === FILE_TYPE.COMIC ){
-					return 'comic file, id:' + _data.id;
-				};
-				if( _type === FILE_TYPE.PANEL ){
-					return [ _data.width, 'x', _data.height ].join( '' );
-				};
-				if( _type === FILE_TYPE.AUTHOR ){
-					return 'author file, id:' + _data.id;
-				};
-				if( _type === FILE_TYPE.ARTIST ){
-					return [ 'id:', _data.id, ' Email:', _data.email || 'empty' , ', HP:', _data.homepage_url || 'empty' ].join( '' );
-				};
-				if( _type === FILE_TYPE.FOLDER ){
-					return 'pettanR folder';
+			this.getSummary = function( file ){
+				var data = FileAPI.getFileData( file ),
+					type = data !== null ? data.type : null;
+				if( data === FILE_DATA_COMICS_ROOT ) return 'cabinet file';
+				switch( type ){
+					case FILE_TYPE.BALLOON :
+						break;
+					case FILE_TYPE.PANEL_ELEMENT :
+						return 'caption:' + data.caption + ' url:' + data.url + ' ' + data.width + 'x' + data.height + ' x:' + data.x + ' y:' + data.y + ' z:' + data.z + ' t:' + data.t;
+					case FILE_TYPE.RESOURCE_PICTURE :
+						data = data.picture;
+					case FILE_TYPE.PICTURE :
+						return '実素材情報 revision:' + data.revision + ' ' + data.credit + ' ' + data.settings;
+					case FILE_TYPE.ORIGINAL_PICTURE :
+						return [ '原画情報 ', data.width, 'x', data.height, ', filesize:', data.filesize, ' md5', data.md5 ].join( '' );
+					case FILE_TYPE.COMIC :
+						return 'comic id:' + data.id;
+					case FILE_TYPE.STORY :
+						data = data.panel;
+					case FILE_TYPE.PANEL :
+						return [ 'panel id:', data.id, ', width:', data.width, ', height:', data.height, ', 枠線:', data.border, ', 公開:', data.publish ].join( '' );
+					case FILE_TYPE.AUTHOR :
+						return 'author id:' + data.id;
+					case FILE_TYPE.ARTIST :
+						return [ 'artist id:', data.id, ' Email:', data.email || 'empty' , ', HP:', data.homepage_url || 'empty' ].join( '' );
+					case FILE_TYPE.BALLOON_TEMPLETE :
+						return data.name + ', ' + data.settings;
+					case FILE_TYPE.FOLDER :
+						return 'pettanR folder';
 				};
 				return 'pettanR unknown file';
 			};
-			this.read = function( _file ){
-				var _data = FileAPI.getFileData( _file ),
-					_type = _data !== null ? _data.type : null,
-					ret;
-				if( _type === FILE_TYPE.COMIC ){
-					// children を panels に deepcopy
-					ret = {};
-					for( var key in _data ){
-						ret[ key ] = _data[ key ]
-					}
-					ret.stories = _data.children;
-					return ret;
-				}
-				if( _type === FILE_TYPE.PANEL ){
-				};
-				if( _type === FILE_TYPE.PANEL_PICTURE ){
-					
-				};
-				if( _type === FILE_TYPE.BALLOON ){
-				};
-				if( _type === FILE_TYPE.PICTURE ){
+			this.read = function( file ){
+				var data = FileAPI.getFileData( file ),
+					type = data !== null ? data.type : null,
+					ret, i, elm;
+				switch( type ){
+					case FILE_TYPE.COMIC :
+						ret = Util.copy( data );
+						ret.panels = ret.children;
+						if( Type.isArray( ret.panels ) === true ){
+							for( i = ret.panels.length; i; ){
+								elm = ret.panels[ --i ];
+								elm.elements = elm.children;
+							};
+						};
+						return ret;
+					case FILE_TYPE.STORY :
+						ret = Util.copy( data );
+						ret.panel.elements = ret.panel.children;
+						return ret;
+					case FILE_TYPE.PANEL :
+						ret = Util.copy( data );
+						ret.elements = ret.children;
+						return ret;
+					case FILE_TYPE.PANEL_ELEMENT :
+					case FILE_TYPE.BALLOON :
+					case FILE_TYPE.ORIGINAL_PICTURE :
 				};
 			};
-			this.write = function( _file, _newData, _onUpdate ){
-				var _data = FileAPI.getFileData( _file ),
-					_type = _data !== null ? _data.type : null;
-				if( _type === FILE_TYPE.COMIC ){
-				};
-				if( _type === FILE_TYPE.PANEL ){
-				};
-				if( _type === FILE_TYPE.PANEL_PICTURE ){
-					
-				};
-				if( _type === FILE_TYPE.BALLOON ){
-				};
-				if( _type === FILE_TYPE.PICTURE ){
+			this.write = function( file, newData, onUpdate ){
+				var data = FileAPI.getFileData( file ),
+					type = data !== null ? data.type : null;
+				switch( type ){
+					case FILE_TYPE.COMIC :
+					case FILE_TYPE.PANEL :
+					case FILE_TYPE.PANEL_ELEMENT :
+					case FILE_TYPE.BALLOON :
+					case FILE_TYPE.ORIGINAL_PICTURE :
 				};
 			};
-			this.viewerApplicationList = function( _file ){
-				var _data = FileAPI.getFileData( _file ),
-					_type = _data !== null ? _data.type : null;
-				if( _type === FILE_TYPE.PANEL ){
-					return [ Reader ];
-				};
-				if( _type === FILE_TYPE.COMIC ){
-					return [ Reader ];
-				};
-				if( _data === FILE_DATA_MY_PICTURES_ROOT ){
-					return [ PremiumSatge ];
-				};
-				if( _type === FILE_TYPE.ARTIST ){
-					return [ PremiumSatge ];
+			this.viewerApplicationList = function( file ){
+				var data = FileAPI.getFileData( file ),
+					type = data !== null ? data.type : null;
+				if( data === FILE_DATA_MY_ORIGINAL_PICTURES_ROOT ) return [ PremiumSatge ];
+				switch( type ){
+					case FILE_TYPE.COMIC :
+					case FILE_TYPE.PANEL :
+					case FILE_TYPE.STORY :
+						return [ Reader ];
+					case FILE_TYPE.PANEL_ELEMENT :
+					case FILE_TYPE.BALLOON :
+					case FILE_TYPE.ORIGINAL_PICTURE :
+						break;
+					case FILE_TYPE.ARTIST :
+						return [ PremiumSatge ];
+					default :						
 				};
 				return [];
 			};
-			this.editorApplicationList = function( _file ){
-				var _data = FileAPI.getFileData( _file ),
-					_type = _data !== null ? _data.type : null;
-				if( _type === FILE_TYPE.PANEL ){
-					return [ Editor ];
-				}
-				if( _type === FILE_TYPE.COMIC ){
-					return [ Editor, ComicConsole ];
-				}
+			this.editorApplicationList = function( file ){
+				var data = FileAPI.getFileData( file ),
+					type = data !== null ? data.type : null;
+				switch( type ){
+					case FILE_TYPE.COMIC :
+						return [ Editor, ComicConsole ];
+					case FILE_TYPE.PANEL :
+						return [ Editor ];
+					case FILE_TYPE.PANEL_ELEMENT :
+					case FILE_TYPE.BALLOON :
+					case FILE_TYPE.ORIGINAL_PICTURE :
+					case FILE_TYPE.ARTIST :
+					default :						
+				};
 				return [];
 			}
 		}),
@@ -370,16 +500,34 @@
 		FILE_TYPE = Util.extend(
 			Const.FILE.TYPE,
 			{
-				COMIC:				FileAPI.createFileTypeID(),
-				PANEL:				FileAPI.createFileTypeID(),
-				PICTURE:			FileAPI.createFileTypeID(),
-				PANEL_PICTURE:		FileAPI.createFileTypeID(),
-				BALLOON:			FileAPI.createFileTypeID(),
-				AUTHOR:				FileAPI.createFileTypeID(),
-				ARTIST:				FileAPI.createFileTypeID(),
-				LICENSE:			FileAPI.createFileTypeID()
+				COMIC            : FileAPI.createFileTypeID(),
+				STORY            : FileAPI.createFileTypeID(),
+				PANEL            : FileAPI.createFileTypeID(),
+				PANEL_ELEMENT    : FileAPI.createFileTypeID(),
+				BALLOON          : FileAPI.createFileTypeID(),
+				BALLOON_TEMPLETE : FileAPI.createFileTypeID(),	
+				ORIGINAL_PICTURE : FileAPI.createFileTypeID(),
+				RESOURCE_PICTURE : FileAPI.createFileTypeID(),
+				PICTURE          : FileAPI.createFileTypeID(),
+				AUTHOR           : FileAPI.createFileTypeID(),
+				ARTIST           : FileAPI.createFileTypeID(),
+				LICENSE          : FileAPI.createFileTypeID(),
+				LICENSE_GROUP    : FileAPI.createFileTypeID(),
 			}
 		),
+		AUTHOR_ARRAY  = [],
+		ARTIST_ARRAY  = [],
+		COMIC_ARRAY   = [],
+		STORY_ARRAY   = [],
+		PANEL_ARRAY   = [],
+		LICENSE_ARRAY = [],
+		PICTURE_ARRAY = [],
+		LICENSE_GROUP_ARRAY    = [],
+		PANEL_ELEMENT_ARRAY    = [],
+		ORIGINAL_PICTURE_ARRAY = [],
+		RESOURCE_PICTURE_ARRAY = [],
+		BALLOON_TEMPLETE_ARRAY = [],
+		BASIC_LICENSES = 'cc_by,cc_nc,cc_nd,cc_sa,keep_aspect_ratio,no_convert,no_flip,no_resize'.split( ','),
 		FILE_DATA_SERVICE_ROOT = {
 			name:		'PettanR root',
 			type:		FILE_TYPE.FOLDER,
@@ -399,25 +547,38 @@
 			driver:		Driver,
 			json:		pettanr.CONST.URL_PANELS_JSON
 		},
-		FILE_DATA_PICTURE_ROOT = {
-			name:		'Picutures',
+		FILE_DATA_RESOURCE_PICTURES_ROOT = {
+			name:		'素材',
 			type:		FILE_TYPE.FOLDER,
 			children:	[],
 			driver:		Driver,
 			json:		pettanr.CONST.URL_RESOURCE_PICTURES_JSON
 		},
+		FILE_DATA_ORIGINAL_PICTURES_ROOT = {
+			name:		'原画',
+			type:		FILE_TYPE.FOLDER,
+			children:	[],
+			driver:		Driver
+		},
 		FILE_DATA_MY_COMICS_ROOT = {
 			name:		'My Comics',
 			type:		FILE_TYPE.FOLDER,
 			children:	[],
 			driver:		Driver,
-			id:			MyAuthorID
+			id:			MyAuthorID,
+			json:       pettanr.CONST.URL_MY_COMICS_JSON
 		},
 		FILE_DATA_LATEST_COMICS = {
 			name:		'Latest Comics',
 			type:		FILE_TYPE.FOLDER,
 			children:	[]
 		},
+		FILE_DATA_STORY_ROOT = {
+			name:		'Stories',
+			type:		FILE_TYPE.FOLDER,
+			children:	[],
+			driver:		Driver
+		},
 		FILE_DATA_LATEST_PANELS = {
 			name:		'Latest Panels',
 			type:		FILE_TYPE.FOLDER,
@@ -430,12 +591,20 @@
 			driver:		Driver,
 			json:		pettanr.CONST.URL_MY_PANELS_JSON
 		},
-		FILE_DATA_MY_PICTURES_ROOT = {
-			name:		'My Pictures',
+		FILE_DATA_MY_RESOURCE_PICTURES_ROOT = {
+			name:		'My 素材画像',
+			type:		FILE_TYPE.FOLDER,
+			children:	[],
+			driver:		Driver,
+			// json:		pettanr.CONST.URL_RESOURCE_PICTURES_JSON,
+			id:			MyArtistID
+		},
+		FILE_DATA_MY_ORIGINAL_PICTURES_ROOT = {
+			name:		'My 原画',
 			type:		FILE_TYPE.FOLDER,
 			children:	[],
 			driver:		Driver,
-			json:		pettanr.CONST.URL_ORIGINAL_PICTURES_JSON,
+			json:		pettanr.CONST.URL_MY_ORIGINAL_PICTURES_JSON,
 			id:			MyArtistID
 		},
 		FILE_DATA_AUTHOR_ROOT = {
@@ -449,35 +618,41 @@
 			children:	[]
 		},
 		FILE_DATA_LISENCE_ROOT = {
-			name:		'Original Lisences',
+			name:		'Lisence Root',
 			type:		FILE_TYPE.FOLDER,
 			children:	[]
 		},
-		FILE_DATA_BALLOON_ROOT = {
-			name:		'Balloon templetes',
+		FILE_DATA_LISENCE = {
+			name:		'Lisence',
 			type:		FILE_TYPE.FOLDER,
 			children:	[]
 		},
-		AUTHOR_ARRAY = [],
-		ARTIST_ARRAY = [],
-		PANEL_ARRAY  = [],
-		COMIC_ARRAY  = [],
-		RESOURCE_PICTURE_ARRAY = [],
-		BALLOON_TEMPLETE_ARRAY = [],
-		ORIGINAL_LICENSE_ARRAY = [],
-		BASIC_LICENSES = 'cc_by,cc_nc,cc_nd,cc_sa,keep_aspect_ratio,no_convert,no_flip,no_resize'.split( ',');
-	FILE_DATA_SERVICE_ROOT.children.push( FILE_DATA_COMICS_ROOT, FILE_DATA_PICTURE_ROOT, FILE_DATA_PANELS_ROOT, FILE_DATA_LISENCE_ROOT, FILE_DATA_BALLOON_ROOT );
-	FILE_DATA_COMICS_ROOT.children.push( FILE_DATA_MY_COMICS_ROOT, FILE_DATA_LATEST_COMICS, FILE_DATA_AUTHOR_ROOT );
+		FILE_DATA_LISENCE_GROUP = {
+			name:		'Lisence Group',
+			type:		FILE_TYPE.FOLDER,
+			children:	[]
+		},
+		FILE_DATA_BALLOON_ROOT = {
+			name:		'Balloon Templetes',
+			type:		FILE_TYPE.FOLDER,
+			children:	[],
+			driver:		Driver,
+			json:		pettanr.CONST.SPEECH_BALOON_TEMPLETE
+		};
+	FILE_DATA_SERVICE_ROOT.children.push( FILE_DATA_COMICS_ROOT, FILE_DATA_RESOURCE_PICTURES_ROOT, FILE_DATA_ORIGINAL_PICTURES_ROOT, FILE_DATA_LISENCE_ROOT, FILE_DATA_BALLOON_ROOT );
+	FILE_DATA_COMICS_ROOT.children.push( FILE_DATA_MY_COMICS_ROOT, FILE_DATA_LATEST_COMICS, FILE_DATA_AUTHOR_ROOT, FILE_DATA_STORY_ROOT, FILE_DATA_PANELS_ROOT );
 	FILE_DATA_PANELS_ROOT.children.push( FILE_DATA_LATEST_PANELS, FILE_DATA_MY_PANELS_ROOT );
-	FILE_DATA_PICTURE_ROOT.children.push( FILE_DATA_MY_PICTURES_ROOT, FILE_DATA_ARTIST_ROOT );
+	FILE_DATA_RESOURCE_PICTURES_ROOT.children.push( FILE_DATA_MY_RESOURCE_PICTURES_ROOT, FILE_DATA_ARTIST_ROOT );
+	FILE_DATA_LISENCE_ROOT.children.push( FILE_DATA_LISENCE_GROUP, FILE_DATA_LISENCE );
+	FILE_DATA_ORIGINAL_PICTURES_ROOT.children.push( FILE_DATA_MY_ORIGINAL_PICTURES_ROOT );
 	
 	FileAPI.createFolderUnderRoot( FILE_DATA_SERVICE_ROOT );
 
-	Driver.isPettanrFileInstance = function( _file ){
-		if( FileAPI.isFileInstance( _file ) === true ){
-			var _data = FileAPI.getFileData( _file.getUID() );// _file でなく  _file.getUID()
+	Driver.isPettanrFileInstance = function( file ){
+		if( FileAPI.isFileInstance( file ) === true ){
+			var _data = FileAPI.getFileData( file.getUID() );// file でなく  file.getUID()
 			return _data !== null && _data.driver === Driver;
-		}
+		};
 		return false;
 	};
 
@@ -562,7 +737,7 @@ var Gallery = gOS.registerApplication( function(){
 		
 		self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
-		tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
+		tree = FileAPI.createTree( FILE_DATA_RESOURCE_PICTURES_ROOT );
 		var	_root  = tree.getRootFile(),
 			_myPic = _root.getChildFileAt( 0 ),
 			_pic   = _root.getChildFileAt( 1 );
@@ -695,19 +870,20 @@ var PremiumSatge = gOS.registerApplication( function(){
 	var ImageGroupIconClass = function( index, data ){
 		var elmIconWrap     = elmIconOrigin.cloneNode( true ),
 			elmIconTitle    = Util.getElementsByClassName( elmIconWrap, 'image-group-item-title' )[ 0 ],
+			originalPicture = data.original_picture || data,
 			SRC             = [ BASE_PATH, data.id, '.', data.ext ].join( ''),
-			LOW_SRC         = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext ].join( '') : null,
+			LOW_SRC         = originalPicture.filesize && originalPicture.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext ].join( '' ) : null,
 			reversibleImage = null,
 			timer           = null,
 			onEnterFlag     = false,
 			instance        = this;
 		elmContainer.appendChild( elmIconWrap );
 		elmIconWrap.style.left = ( index * itemW ) + 'px';
-		elmIconTitle.appendChild( document.createTextNode( data.filesize + 'bytes' ) );
+		elmIconTitle.appendChild( document.createTextNode( originalPicture.filesize + 'bytes' ) );
 		
 		function onImageLoad( url, _imgW, _imgH ){
-			data.width  = _imgW = _imgW || data.width  || 64;
-			data.height = _imgH = _imgH || data.height || 64;
+			data.width  = _imgW = _imgW || originalPicture.width  || 64;
+			data.height = _imgH = _imgH || originalPicture.height || 64;
 			elmIconTitle.firstChild.data = _imgW + 'x' + _imgH;
 			var zoom = 128 /( _imgW > _imgH ? _imgW : _imgH ),
 				MATH_FLOOR = Math.floor,
@@ -777,56 +953,56 @@ var PremiumSatge = gOS.registerApplication( function(){
 			
 			self.removeTimer( onEnterShowImage );
 			self.addTimer( onEnterShowImage, 500 );
-		}
+		};
 		return false;			
-	}
+	};
 	
 	function drawIcons(){
 		while( ICON_ARRAY.length > 0 ){
 			ICON_ARRAY.shift().destroy();
-		}
+		};
 		var _index = rootFile.search( {
-				id:   artistID,
-				type: FILE_TYPE.ARTIST
+				id   : artistID,
+				type : FILE_TYPE.ARTIST
 			})[ 0 ],
 			_artistFile = rootFile.getChildFileAt( _index ),
-			_file;
+			file;
 		if( _artistFile !== null ){
-			for(var i=0, l=_artistFile.getChildFileLength(); i<l; ++i ){
-				_file = _artistFile.getChildFileAt( i );
-				ICON_ARRAY.push( new ImageGroupIconClass( i, FileAPI.getFileData( _file ) ));
-				_file.destroy();
-			}
+			for( var i=0, l=_artistFile.getChildFileLength(); i<l; ++i ){
+				file = _artistFile.getChildFileAt( i );
+				ICON_ARRAY.push( new ImageGroupIconClass( i, FileAPI.getFileData( file ) ));
+				file.destroy();
+			};
 			elmName.firstChild.data = _artistFile.getName();
 			_artistFile.destroy();
-		}
-	}
+		};
+	};
 	
 	function onFadeout(){
 		while( ICON_ARRAY.length > 0 ){
 			ICON_ARRAY.shift().destroy();
-		}
+		};
 		onUpdate !== null && onUpdateData !== null && onUpdate.call( onUpdateContext, onUpdateData );
 		onUpdate = onUpdateData = onUpdateContext = null;
 		PremiumSatge.shutdown();
-	}
+	};
 	
 	
 	this.MIN_WIDTH   = 320;
 	this.MIN_HEIGHT  = 320;
 	this.onInit = function(){
-			self.rootElement.id = 'image-group-wrapper';
+		self.rootElement.id = 'image-group-wrapper';
 
-			self.rootElement.innerHTML = [
-				'<div id="image-group-icon-container"></div>',
-				'<div id="image-group-name">NO DATA...</div>',
-				'<div id="image-group-button" class="button">close</div>'
-			].join( '' );
-			
-			self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
-			
-			tree      = FileAPI.createTree( FILE_DATA_ARTIST_ROOT );
-			rootFile  = tree.getRootFile();
+		self.rootElement.innerHTML = [
+			'<div id="image-group-icon-container"></div>',
+			'<div id="image-group-name">NO DATA...</div>',
+			'<div id="image-group-button" class="button">close</div>'
+		].join( '' );
+		
+		self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
+		
+		tree      = FileAPI.createTree( FILE_DATA_ARTIST_ROOT );
+		rootFile  = tree.getRootFile();
 	};
 	this.onOpen = function( _windowW, _windowH, _ARTISTIDorFILE, _onUpdate, opt_thisObj ){
 		elmContainer  = document.getElementById( 'image-group-icon-container' );
@@ -855,11 +1031,13 @@ var PremiumSatge = gOS.registerApplication( function(){
 		tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, drawIcons );
 		
 		var data = FileAPI.getFileData( _ARTISTIDorFILE );
-		if( data.type === FILE_TYPE.ARTIST || FILE_DATA_MY_PICTURES_ROOT === data ){
+		if( !data ){
+			artistID = MyArtistID || -1;
+		} else
+		if( data.type === FILE_TYPE.ARTIST || FILE_DATA_MY_ORIGINAL_PICTURES_ROOT === data ){
 			artistID = data.id || -1;
 		} else
 		if( Type.isNumber( _ARTISTIDorFILE ) === true ){
-			alert( _ARTISTIDorFILE )
 			artistID = _ARTISTIDorFILE;
 		};
 		
@@ -1062,30 +1240,41 @@ var Reader = gOS.registerApplication( function(){
 
 	}
 	function draw(){
-		var fileData, title, author;
+		var fileData, title, author, story;
 		
 		if( Driver.isPettanrFileInstance( currentFile ) === true ){
-			if( currentFile.getType() === FILE_TYPE.COMIC ){
-				fileData    = currentFile.read();
-				title       = fileData.title;
-				author      = fileData.author.name;
-				comicData   = fileData;
-				numPanel    = currentFile.getChildFileLength();
-			} else
-			if( currentFile.getType() === FILE_TYPE.PANEL ){
-				fileData    = currentFile.read();
-				title       = fileData.comic.title;
-				author      = fileData.comic.author.name;
-				comicData   = fileData;
-				numPanel    = 1;
-			}
+			switch( currentFile.getType() ){
+				case FILE_TYPE.COMIC :
+					fileData    = currentFile.read();
+					title       = fileData.title;
+					author      = fileData.author.name;
+					comicData   = fileData;
+					numPanel    = currentFile.getChildFileLength();
+					break;
+				case FILE_TYPE.STORY :
+					story       = currentFile.read();
+					fileData    = story.panel;
+					title       = story.comic.title;
+					author      = fileData.author.name;
+					comicData   = fileData;
+					numPanel    = 1;
+					break;
+				case FILE_TYPE.PANEL :
+					fileData    = currentFile.read();
+					title       = 'No comic';
+					author      = fileData.author.name;
+					comicData   = fileData;
+					numPanel    = 1;
+					break;			
+			};
 		} else {
 			
 		};
 		if( comicData !== null ){
 			elmTitle.data  = title;
 			elmAuthor.data = author;
-			bindWorker.json( comicData );
+			// bindWorker.json( comicData );
+			bindWorker.file( currentFile );
 			self.addAsyncCall( asyncResize );
 		};
 	}
@@ -1120,7 +1309,7 @@ var Reader = gOS.registerApplication( function(){
 		self.fetchCSS( pettanr.CONST.URL_PETA_APPS_CSS );
 		
 	};
-	this.onOpen = function( _w, _h, _file ){
+	this.onOpen = function( _w, _h, file ){
 		headerH       = Util.getElementSize( document.getElementById( 'comic-reader-header' ) ).height;
 		consoleH      = Util.getElementSize( document.getElementById( 'comic-reader-console' ) ).height;
 		elmContainer  = document.getElementById( 'comic-reader-panel-container' );
@@ -1140,10 +1329,10 @@ var Reader = gOS.registerApplication( function(){
 		
 		windowW = _w;
 		windowH = _h;
-		if( FileAPI.isFileInstance( _file ) === true ){
-			currentFile = _file;
-			_file.addEventListener( Const.FILE.EVENT.GET_SEQENTIAL_FILES, draw );
-			_file.getSeqentialFiles();
+		if( FileAPI.isFileInstance( file ) === true ){
+			currentFile = file;
+			file.addEventListener( Const.FILE.EVENT.GET_SEQENTIAL_FILES, draw );
+			file.getSeqentialFiles();
 			draw();
 		};
 	};
@@ -1218,7 +1407,7 @@ var Editor = gOS.registerApplication( function(){
 		var ELM_ITEM_CLASSNAME = 'menubar-item',
 			currentMenu        = null,
 			elmBar, elmBox,
-			nodeBar, nodeBox,
+			nodeBar, nodeBox, layerBox,
 			barH, menuW;
 	/** -----------------------------------------
 	 *  PrivateOptionDataClass
@@ -1411,7 +1600,7 @@ var Editor = gOS.registerApplication( function(){
 		};
 		MenuClass.prototype = {
 			show: function(){
-				data = MenuPrivateDataClass.get( this );
+				var data = MenuPrivateDataClass.get( this );
 				if( data.visible === true ) return;
 				
 				data.elm.className = ELM_ITEM_CLASSNAME + '-focus';
@@ -1816,7 +2005,7 @@ var Editor = gOS.registerApplication( function(){
 			},
 			firstOpen : function(){
 				var win       = this.window,
-					elmHead   = this.elmHead = Util.getElementsByClassName( this.elm, 'window-header' )[ 0 ];
+					elmHead   = this.elmHead = Util.getElementsByClassName( this.elm, 'window-header' )[ 0 ],
 					elmBody   = this.elmBody = Util.getElementsByClassName( this.elm, 'window-body' )[ 0 ],
 					elmClose  = Util.getElementsByClassName( this.elm, 'window-close-button' )[ 0 ],
 					elmFoot   = Util.getElementsByClassName( this.elm, 'window-footer' )[ 0 ],
@@ -2141,11 +2330,11 @@ var Editor = gOS.registerApplication( function(){
 	var IMAGE_EXPLORER_WINDOW = ( function(){
 		var tree, finder;
 		
-		function onFileSelect( _file ){
+		function onFileSelect( file ){
 			// 他の image ファイルも許可する？
-			if( Driver.isPettanrFileInstance( _file ) === true ){
-				if( _file.getType() === FILE_TYPE.PICTURE ){
-					PANEL_ELEMENT_CONTROL.onImageSelect( FileAPI.getFileData( _file ) );
+			if( Driver.isPettanrFileInstance( file ) === true ){
+				if( file.getType() === FILE_TYPE.RESOURCE_PICTURE ){
+					PANEL_ELEMENT_CONTROL.onImageSelect( FileAPI.getFileData( file ) );
 				};
 			};
 		};
@@ -2154,7 +2343,7 @@ var Editor = gOS.registerApplication( function(){
 			{
 				onInit: function(){},
 				onFirstOpen: function( _w, _h, nodeBody ){
-					tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
+					tree = FileAPI.createTree( FILE_DATA_RESOURCE_PICTURES_ROOT );
 					var	_root  = tree.getRootFile(),
 						_myPic = _root.getChildFileAt( 0 ),
 						_pic   = _root.getChildFileAt( 1 );
@@ -2166,8 +2355,7 @@ var Editor = gOS.registerApplication( function(){
 					finder = app.createFinder(
 						nodeBody,
 						tree,
-						onFileSelect,
-						PANEL_ELEMENT_CONTROL.onImageSelect
+						onFileSelect
 					);
 					finder.createPath( IMAGE_EXPLORER_WINDOW.createHeaderItem() );
 				},
@@ -2778,7 +2966,8 @@ var Editor = gOS.registerApplication( function(){
 				{ x:	1, w:	-1, y:	0, h:	 1}, //bottom-left
 				{ x:	0, w:	 1, y:	0, h:	 1}  //bottom-right
 			],
-			startX, startY, startW, startH, startFilpV, startFilpH, startAspect,
+			startX, startY, startW, startH,
+            flipV, flipH, startFilpV, startFilpH, startAspect,
 			baseX, baseY, baseW, baseH,
 			currentX, currentY, currentW, currentH,
 			offsetX, offsetY,
@@ -3282,9 +3471,10 @@ var Editor = gOS.registerApplication( function(){
 			pushoutH        = 0,
 			pushout         = false,
 			currentType     = -1,
+            currentElement  = null,
 			visible         = false,
 			node            = null,
-			ui, inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
+			ui, inputX, inputY, inputZ, inputA, inputW, inputH, inputPercentW, inputPercentH, inputAspectRatio,
 			buttonBack, buttonForward, buttonDel, buttonEdit, butonChange;
 			
 		function layerBack(){
@@ -3317,7 +3507,7 @@ var Editor = gOS.registerApplication( function(){
 		};
 		function change(){
 			if( currentElement === null ) return;
-			PremiumSatge.boot( currentElement.artistID, currentElement.resourcePicture, currentElement );
+			PremiumSatge.boot( currentElement.artistID, currentElement.realPicture, currentElement );
 		};
 
 		return {
@@ -3509,12 +3699,11 @@ var Editor = gOS.registerApplication( function(){
 		this.$        = jqImageElementOrigin.clone( true );
 		this.data     = data;
 		this.z        = data.z;
-		this.timing   = data.t || PANEL_ELEMENT_ARRAY.length + 1;
+		this.timing   = data.t || PANEL_ELEMENT_ARRAY.length;
 		this.keepSize = false;
 		this.flipV    = data.height < 0 ? -1 : 1;
 		this.flipH    = data.width  < 0 ? -1 : 1;
-		this.rPicture = data.resource_picture;
-		this.artistID = this.rPicture.artist_id || this.rPicture.artist.id || -1;
+		this.rPicture = data.picture;
 		
 		var self = this;
 		function animeComplete(){
@@ -3540,7 +3729,7 @@ var Editor = gOS.registerApplication( function(){
 				this.flipV = updateV === true ? -this.flipV : this.flipV;
 				this.reversibleImage.resize( this.flipH * this.w, this.flipV * this.h );
 			},
-			resourcePicture : function( _rPicture ){
+			realPicture : function( _rPicture ){
 				if( _rPicture && _rPicture !== this.rPicture ){
 					HISTORY_CONTROL.saveState( this._updateResourcePicture, this.rPicture, _rPicture, this );
 					this._updateResourcePicture( _rPicture );
@@ -3578,12 +3767,14 @@ var Editor = gOS.registerApplication( function(){
 			},
 			_updateResourcePicture : function( _rPicture ){
 				this.rPicture = _rPicture;
-				
-				this.actualW = _rPicture.width;
-				this.actualH = _rPicture.height;
+				this.oPicture = this.rPicture.original_picture;
+				this.artistID = this.oPicture.artist.id || -1;
+
+				this.actualW = this.oPicture.width;
+				this.actualH = this.oPicture.height;
 				
 				var _reversibleImage = pettanr.image.createReversibleImage( 
-						[ pettanr.CONST.RESOURCE_PICTURE_PATH, _rPicture.id, '.', _rPicture.ext ].join(''),
+						[ pettanr.CONST.PICTURE_PATH, this.rPicture.id, '.', this.rPicture.ext ].join( '' ),
 						this.flipH * this.w, this.flipV * this.h
 					);
 				if( this.reversibleImage !== null ){
@@ -3640,7 +3831,7 @@ var Editor = gOS.registerApplication( function(){
 		})();
 		this.balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, this.type );
 		this.z       = data.z;
-		this.timing  = data.t || PANEL_ELEMENT_ARRAY.length + 1;
+		this.timing  = data.t || PANEL_ELEMENT_ARRAY.length;
 		
 		this.$.find( 'img' ).eq( 0 ).replaceWith( this.balloon.elm );
 		
@@ -3897,17 +4088,17 @@ var Editor = gOS.registerApplication( function(){
 				var _panelElement;
 				if( isPanelPictureData !== true ){
 					_panelElement = new ImageElementClass( {
-						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 + 1,
-						width:           1,
-						height:          1
+						picture : data.picture,
+						x       : Math.floor( panelW / 2 - data.width / 2 ),
+						y       : Math.floor( panelH / 2 - data.height / 2 ),
+						z       : -1,
+						t       : 0,
+						width   : 1,
+						height  : 1
 					});
 					_panelElement.init();
 					PANEL_ELEMENT_CONTROL.add( _panelElement );
-					_panelElement.animate( undefined, undefined, Math.abs( data.width ), Math.abs( data.height ) );
+					_panelElement.animate( undefined, undefined, Math.abs( data.picture.original_picture.width ), Math.abs( data.picture.original_picture.height ) );
 				} else {
 					_panelElement = new ImageElementClass( data );
 					_panelElement.init();
@@ -3925,7 +4116,7 @@ var Editor = gOS.registerApplication( function(){
 						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 + 1,
+						t:                  0,
 						width:              200,
 						height:             200,
 						speeches_attributes: {
@@ -4120,7 +4311,7 @@ var Editor = gOS.registerApplication( function(){
 		
 		delete app.onInit;
 	};
-	this.onOpen = function( _w, _h, _file ){
+	this.onOpen = function( _w, _h, file ){
 		// 表示奥の物から順に init() していく
 		PANEL_ELEMENT_CONTROL.init();
 		PANEL_CONTROL.init();
@@ -4145,20 +4336,20 @@ var Editor = gOS.registerApplication( function(){
 			borderSize,
 			fileData, panelElements, panelElm;
 
-		if( FileAPI.isFileInstance( _file ) === true ){
-			if( Driver.isPettanrFileInstance( _file ) === true ){
-				if( _file.getType() === FILE_TYPE.COMIC ){
-					fileData = _file.read();
+		if( FileAPI.isFileInstance( file ) === true ){
+			if( Driver.isPettanrFileInstance( file ) === true ){
+				if( file.getType() === FILE_TYPE.COMIC ){
+					fileData = file.read();
 					panelW   = fileData.width;
 					panelH   = fileData.height;
 					comicID  = fileData.id || -1;
 				} else
-				if( _file.getType() === FILE_TYPE.PANEL ){
-					fileData      = _file.read();
+				if( file.getType() === FILE_TYPE.PANEL ){
+					fileData      = file.read();
 					panelW        = fileData.width;
 					panelH        = fileData.height;
 					borderSize    = fileData.border;
-					panelElements = fileData.panel_elements;
+					panelElements = fileData.elements;
 					comicID       = fileData.comic ? fileData.comic.id || -1 : -1;
 					panelID       = fileData.id || -1;
 					panelTimming  = fileData.t  || -1;
@@ -4189,7 +4380,7 @@ var Editor = gOS.registerApplication( function(){
 		if( Type.isArray( panelElements ) === true ){
 			for( var i=0; i<panelElements.length; ++i ){
 				panelElm = panelElements[ i ];
-				if( panelElm.resource_picture ){
+				if( panelElm.picture ){
 					PANEL_ELEMENT_CONTROL.createImageElement( panelElm );
 				} else
 				if( panelElm.balloon_template_id ){
@@ -4867,7 +5058,7 @@ var Model = ( function(){
 		function getPanelElementByTiming(){
 			var i, l = panelElementArray.length;
 			while( timing < l * 2 ){
-				for( i=0; i<l; ++i ){
+				for( i = 0; i < l; ++i ){
 					if( timing === panelElementArray[ i ].timing ){
 						// console.log( timing + ' , ' + panelElementArray[ i ].timing );
 						++timing;
@@ -4879,9 +5070,10 @@ var Model = ( function(){
 			return null;
 		};
 		function panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ){
-			var url;
+			var rPic, url;
 			if( _panelElement.type === 0 ){
-				url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );
+				rPic = _panelElement.realPicture();
+				url  = [ pettanr.CONST.RESOURCE_PICTURE_PATH, rPic.id, '.', rPic.ext ].join( '' );
 				return [
 					'<img ',
 						'src="',        isAbsoluteUrl !== true ? url : Util.getAbsolutePath( url ), '" ',
@@ -4920,12 +5112,13 @@ var Model = ( function(){
 			};
 		};
 		function getImageJsonGET( _imageElement ){
-			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
+			var cr = pettanr.LINE_FEED_CODE_TEXTAREA,
+				rPic = _imageElement.realPicture();
 			return [
 				'{', cr,
 					'"resource_picture": {', cr,
-						'"id": ',              _imageElement.resourcePicture().id, ',', cr,
-						'"ext": ',             '"',_imageElement.resourcePicture().ext, '"', cr,
+						'"id": ',              rPic.id, ',', cr,
+						'"ext": ',             '"', rPic.ext, '"', cr,
 					'},', cr,
 					'"x": ',                   _imageElement.x, ',', cr,
 					'"y": ',                   _imageElement.y, ',', cr,
@@ -4936,44 +5129,48 @@ var Model = ( function(){
 				'}'
 			].join( '');
 		};
-		function imageToJson( _imageElement, _timing ){
+		function imageToJson( _imageElement, t ){
 			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
 			return [
 				'{', cr,
-					'"picture_id": ', _imageElement.resourcePicture().id, ',', cr,
+					'"picture_id": ', _imageElement.realPicture().id, ',', cr,
 					'"x": ',          _imageElement.x, ',', cr,
 					'"y": ',          _imageElement.y, ',', cr,
 					'"z": ',          _imageElement.z + 1, ',', cr,
-					'"t": ',          _timing, ',', cr,
+					'"t": ',          t, ',', cr,
 					'"width": ',      _imageElement.flipH * _imageElement.w, ',', cr,
 					'"height": ',     _imageElement.flipV * _imageElement.h, cr,
 				'}'
 			].join( '');
 		};
 
-		function balloonToJson( _textElement, _timing ){
+		function balloonToJson( _textElement, t ){
 			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
 			return [
 				'{', cr,
-					'"balloon_template_id": ', 1, ',', cr,
-					'"system_picture_id": ',   1, ',', cr,
-					'"size": ',                1, ',', cr,
-					'"tail": ',                _textElement.a, ',', cr,
-					'"x": ',                   _textElement.x, ',', cr,
-					'"y": ',                   _textElement.y, ',', cr,
-					'"z": ',                   _textElement.z + 1, ',', cr,
-					'"t": ',                   timing, ',', cr,
-					'"width": ',               _textElement.w, ',', cr,
-					'"height": ',              _textElement.h, ',', cr,
-					'"speeches_attributes": {', cr,
-						'"newf', timing, '": {', cr,
-    						'"content": "', _textElement.content, '",', cr,
+					'"speech_balloon_template_id": ', 1, ',', cr,
+					'"classname": "Square",',
+					'"z": ',                _textElement.z + 1, ',', cr,
+					'"t": ',                t, ',', cr,
+					'"settings": "{\'tail\':' + _textElement.a + '}",',
+		            '"balloons_attributes": {', cr,
+		                '"newb', t, '": {', cr,
+							'"system_picture_id": ',  2, ',', cr,
+    						'"caption": "alt text",', cr,
 							'"x": ',        _textElement.x, ',', cr,
 							'"y": ',        _textElement.y, ',', cr,
-							'"t": ',        timing, ',', cr,
 							'"width": ',    _textElement.w, ',', cr,
 							'"height": ',   _textElement.h, cr,
 						'}', cr,
+					'},', cr,
+					'"speeches_attributes": {', cr,
+						'"news', t, '": {', cr,
+    						'"content": "', _textElement.content, '",', cr,
+							'"x": ',        Math.floor( _textElement.w * 0.16 ), ',', cr,
+							'"y": ',        Math.floor( _textElement.w * 0.16 ), ',', cr,
+							'"width": ',    Math.floor( _textElement.w * 0.66 ), ',', cr,
+							'"height": ',   Math.floor( _textElement.h * 0.66 ), cr,
+						'}', cr,
 					'}', cr,
 				'}'
 			].join( '');
@@ -5048,7 +5245,7 @@ var Model = ( function(){
 						// panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',
 					    '"width": ',            panelW, ',', cr,
 					    '"height": ',           panelH, ',', cr,
-					    '"panel_elements": [', cr,
+					    '"elements": [', cr,
 					    	ELEMENT_ARRAY.join( ',' + cr ), cr,
 					    ']', cr,
 					//'}', cr,
@@ -5105,7 +5302,6 @@ var OutputConsole = gOS.registerApplication( function(){
 		comboboxFormat, inputOption,
 		buttonSubmit, buttonClose,
 		windowW, windowH,
-		timing   = 0,
 		comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,
 		app      = this,
 		model    = null;
@@ -5212,7 +5408,7 @@ var OutputConsole = gOS.registerApplication( function(){
 	this.onClose = function(){
 		elmOutputArea.value = '';
 		model.destroy();
-		elmOutputArea = comboboxFormat = inputOption = buttonSubmit = buttonClose = panelElementArray = instance = model = null;
+		elmOutputArea = comboboxFormat = inputOption = buttonSubmit = buttonClose = panelElementArray = model = null;
 	};
 }, true, false, 'Output Console', 'outputConsole', null, '#2D89F0' );