From 51dca152ebe7bcd2fe387ebacf1ba54a1ead5259 Mon Sep 17 00:00:00 2001
From: itozyun <itozyun@gmail.com>
Date: Fri, 31 Aug 2012 09:21:15 +0900
Subject: [PATCH] version 0.5.10, add folders: MyPanels, LatestPanel.

---
 Gemfile                               |    1 -
 Gemfile.lock                          |    3 -
 app/assets/javascripts/peta.apps.js   |   58 +-
 app/assets/javascripts/peta.common.js |  198 +-
 app/assets/javascripts/system.js      | 1042 +++++--
 public/assets/peta.apps.js            | 5088 ---------------------------------
 6 files changed, 809 insertions(+), 5581 deletions(-)
 delete mode 100644 public/assets/peta.apps.js

diff --git a/Gemfile b/Gemfile
index 258ae6df..49c23c16 100644
--- a/Gemfile
+++ b/Gemfile
@@ -9,7 +9,6 @@ gem "standard_licenses"
 gem "creative_commons_v30_licenses"
 gem 'pettan_commons_v01_licenses'
 gem 'pettan_protected_v01_licenses'
-gem 'pettan_public_v01_licenses'
 gem 'public_domain_v01_licenses'
 gem 'unknown_v01_licenses'
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 34911c79..6d848711 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -103,8 +103,6 @@ GEM
       rails (~> 3.1.1)
     pettan_protected_v01_licenses (0.0.5)
       rails (~> 3.1.1)
-    pettan_public_v01_licenses (0.0.5)
-      rails (~> 3.1.1)
     pg (0.14.0-x86-mingw32)
     polyglot (0.3.3)
     public_domain_v01_licenses (0.0.5)
@@ -217,7 +215,6 @@ DEPENDENCIES
   moro-miso
   pettan_commons_v01_licenses
   pettan_protected_v01_licenses
-  pettan_public_v01_licenses
   pg
   public_domain_v01_licenses
   rails (= 3.1.1)
diff --git a/app/assets/javascripts/peta.apps.js b/app/assets/javascripts/peta.apps.js
index 3622d1a8..73403522 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.8
+ *   version 0.5.10
  *   
  * author:
  *   itozyun
@@ -8,8 +8,7 @@
  *   3-clause BSD
  */
 
-( function( pettanr, gOS, window, undefined ){
-
+( function( pettanr, gOS, window, document, undefined ){
 /*
  * PettanR service driver.
  */
@@ -31,9 +30,9 @@
 				
 				if( Type.isArray( _json ) === true ){
 					l = _json.length;
-					if( l === 0) return;
+					if( l === 0 ) return;
 					for( var i=0; i<l; ++i ){
-						buildFileData( _json[ i], _data);
+						buildFileData( _json[ i ], _data );
 					};
 				} else
 				if( _json.id ){
@@ -50,7 +49,7 @@
 			function buildFileData( _data, _parent ){
 				var _array, i, l;
 				// Panel
-				if( _parent === FILE_DATA_PANELS_ROOT ){
+				if( _parent === FILE_DATA_PANELS_ROOT || _parent === FILE_DATA_MY_PANELS_ROOT ){
 					_data.type = FILE_TYPE.PANEL;
 					_array = PANEL_ARRAY;
 				} else
@@ -101,14 +100,14 @@
 				};
 				
 				_data.driver = Driver;
-				
+				// alert( ' _array ' + _data.id + Type.isNumber( _data.id ) );
 				// _array に _data を格納 または 上書き
-				if( typeof _data.id === 'number' && _data.id > 0 ){
-					var _id = _data.id - 1,
-						__data = _array[ _id ],
+				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){
+						for( var key in _data ){
 							if( _reserved.indexOf( key ) === -1 ){
 								__data[ key ] = _data[ key ];
 							};
@@ -118,7 +117,7 @@
 						_array[ _id ] = _data;
 					};
 				} else {
-					alert( 'error' );
+					// alert( 'error' + _parent.name + ' ' + _data.id );
 				};
 		
 				// Author
@@ -130,7 +129,7 @@
 				if( _parent.type === FILE_TYPE.COMIC || _parent === FILE_DATA_COMICS_ROOT ){
 					var _panels = _data.stories,
 						_panel;
-					if( _panels && Type.isArray( _panels ) === true ){
+					if( Type.isArray( _panels ) === true ){
 						
 						for( i=0, l=_panels.length; i<l; ++i ){
 							_panel = buildFileData( _panels[ i ], FILE_DATA_PANELS_ROOT );
@@ -155,19 +154,22 @@
 						_author.id === MyAuthorID && addChildData( FILE_DATA_MY_COMICS_ROOT, _data );
 					};
 					if( _parent === FILE_DATA_COMICS_ROOT ){
-						addChildData( FILE_DATA_LATEST_COMICS, _data);
+						addChildData( FILE_DATA_LATEST_COMICS, _data );
 					};
 				} else
 				// Panel
-				if( _parent === FILE_DATA_PANELS_ROOT ){
-					_data.comic = getResource( COMIC_ARRAY, _data.comic_id );
+				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 );
-		
+					
 					// picture data をファイルに取り出し
 					var _elements = _data.panel_elements,
 						_elm;
 					if( Type.isArray( _elements ) === true ){
-						for( i=0, l=_elements.length; i<l; ++i){
+						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 ); // 上記参照切れに備えてここで上書き
@@ -176,6 +178,7 @@
 							};
 						};
 					};
+					addChildData( _data.author_id === MyAuthorID ? FILE_DATA_MY_PANELS_ROOT : FILE_DATA_LATEST_PANELS, _data );
 				} else
 				// Picture
 				if( _data.type == FILE_TYPE.PICTURE ){
@@ -193,7 +196,7 @@
 				return _data;
 			};
 			function addChildData( _parent, _child ){
-				if( Type.isArray( _parent.children ) === false){
+				if( Type.isArray( _parent.children ) === false ){
 					_parent.children = [];
 				};
 				Util.getIndex( _parent.children, _child ) === -1 && _parent.children.push( _child );
@@ -231,7 +234,7 @@
 					return [ _data.id, _data.ext ].join( '.' );
 				} else
 				if( _type === FILE_TYPE.PANEL ){
-					return [ _data.t, ':', _data.comic.title ].join( '' );
+					return [ _data.t, ':', _data.comic ? _data.comic.title : 'free panel' ].join( '' );
 				} else
 				if( _type === FILE_TYPE.COMIC ){
 					return _data.title;
@@ -415,6 +418,18 @@
 			type:		FILE_TYPE.FOLDER,
 			children:	[]
 		},
+		FILE_DATA_LATEST_PANELS = {
+			name:		'Latest Panels',
+			type:		FILE_TYPE.FOLDER,
+			children:	[]
+		},
+		FILE_DATA_MY_PANELS_ROOT = {
+			name:		'My Panels',
+			type:		FILE_TYPE.FOLDER,
+			children:	[],
+			driver:		Driver,
+			json:		pettanr.CONST.URL_MY_PANELS_JSON
+		},
 		FILE_DATA_MY_PICTURES_ROOT = {
 			name:		'My Pictures',
 			type:		FILE_TYPE.FOLDER,
@@ -453,6 +468,7 @@
 		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_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 );
 	
 	FileAPI.createFolderUnderRoot( FILE_DATA_SERVICE_ROOT );
@@ -5139,4 +5155,4 @@ var PanelConsole = gOS.registerApplication( function(){
 }, true, true, 'Panel Console', 'panelConsole', null, '#603CBA' );
 
 
-})( pettanr, gOS, window );
+})( pettanr, gOS, window, document );
diff --git a/app/assets/javascripts/peta.common.js b/app/assets/javascripts/peta.common.js
index 32a922bc..c248e82c 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.6
+ *   version 0.5.10
  * 
  *   author:
  *     itozyun
@@ -40,7 +40,7 @@ var pettanr = ( function(){
 		})(),
 		IS_DEBUG = Type.isBoolean( URL_PARAMS.debug ) ? URL_PARAMS.debug : IS_LOCAL === true;
 	return {
-		version: '0.5.5',
+		version: '0.5.8',
 		URL_PARAMS: URL_PARAMS,
 		LOCAL: IS_LOCAL,
 		DEBUG: IS_DEBUG,
@@ -89,6 +89,7 @@ pettanr.CONST = ( function(){
 		URL_RESOURCE_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'resource_pictures.json',
 		URL_COMICS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'comics.json',
 		URL_PANELS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'panels.json',
+		URL_MY_PANELS_JSON:			( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/panel.json',
 		NS_PETTANR_COMIC:			'pettanr-comic',
 		RESOURCE_PICTURE_PATH:		( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'resource_pictures\/',
 		SYSTEM_PICTURE_PATH:		( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'system_pictures\/',
@@ -844,199 +845,6 @@ pettanr.bind = ( function(){
 	}
 })();
 
-var VisualEffect = ( function(){
-	
-	var ANIMATION_TICKET_ARRAY = [],
-		fpms = 50,
-		TIMER = null,
-		FILTER = 'filter',
-		OPACITY = 'opacity',
-		REG_ALPHA = /alpha\([^)]*\)/i,
-		CORON = ':',
-		EMPTY = '',
-		SEMICORON = ';';
-	
-	function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames){
-		var _ticket;
-		for( var i=0, l=ANIMATION_TICKET_ARRAY.length; i<l; ++i){
-			_ticket = ANIMATION_TICKET_ARRAY[ i];
-			if( _ticket.elm === _elm) {
-				_ticket.destroy();
-				break;
-			}
-		}
-		//  coputedStyle と _cssObject を比較して , 一致及び非数は削除しつつ コピー
-		//  filter opacity の追加 REG_ALPHA.test( _value ) ? _value.replace( REG_ALPHA, opacity ) : _value + " " + opacity
-		/*
-		 * cssObject をまわす
-		 * 非数は削除
-		 * cssText と一致も削除
-		 * coputedStyle と一致も削除
-		 * updateTraget ととして記録
-		 * 初期値を cssObject としてセット
-		 * cssTest にセット zoom もセット
-		 */
-		
-		//
-		/*
-			var style = elem.style,
-				currentStyle = elem.currentStyle,
-				opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
-				filter = currentStyle && currentStyle.filter || style.filter || "";
-
-			// IE has trouble with opacity if it does not have layout
-			// Force it by setting the zoom level
-			style.zoom = 1;
-		 */
-		
-		var _currentParameters = [],
-			_offsetParameters = [],
-			_endParameters = [],
-			_targetAttributes = [];
-		
-		ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(
-			_elm,
-			_currentParameters, _offsetParameters, _endParameters, _targetAttributes,
-			typeof _onComplete === 'function' ? _onComplete : null,
-			typeof _onEnterFrame === 'function' ? _onEnterFrame : null,
-			_numFrames
-		));
-		
-		if( TIMER === null){
-			TIMER = window.setInterval( onEnterFrame, fpms);
-		}
-	}
-	function onEnterFrame(){
-		var _ticket,
-			i = 0;
-		while( i<ANIMATION_TICKET_ARRAY.length){
-			_ticket = ANIMATION_TICKET_ARRAY[ i];
-			if( _ticket.onEnterFrame() === true){
-				_ticket.destroy();
-				ANIMATION_TICKET_ARRAY.splice( i, 1);
-			} else {
-				++i;
-			}
-		}
-		if( ANIMATION_TICKET_ARRAY.length === 0){
-			window.clearInterval( TIMER);
-			TIMER = null;
-		}
-	}
-	function updateCss( _elm, _updateParameters, _targetAttributes, _numAttributes){
-		if( _numAttributes > 1){
-			var _cssTexts = _elm.style.cssText.split( ';'), _css,
-				_separate,
-				_cssObject = {}, _target, _value, _number, _px,
-				j;
-			for(var i=0, l=_cssTexts.length; i<l; ++i){
-				_css = _cssTexts[ i];
-				_separate = _css.indexOf( ':');
-				if( _separate >= 3){
-					_target = _css.substr( 0, _separate +1);
-					_value = _css.substr( _separate +1);
-					/*
-					 * ie filter
-					 */
-					if( _target === FILTER){
-						for( j=0; j<_numAttributes; ++j){
-							if( _targetAttributes[ j] === OPACITY){
-								_cssTexts[ i] = [
-										_target, ':',
-										_value.replace( REG_ALPHA, "alpha(opacity=" + _updateParameters[ j] * 100 + ")")
-									].join( '');
-								break;
-							}
-						}
-					/*
-					 * other
-					 */
-					} else {
-						_number = '' + parseFloat( _value);
-						_px = _value.indexOf( _number);
-						_px = _px > 0 ? _value.substr( _px + _number.length) : '';
-						for( j=0; j<_numAttributes; ++j){
-							if( _targetAttributes[ j] === _target){
-								_cssTexts[ i] = [ _target, ':', _updateParameters[ j], _px].join( '');
-								break;
-							}
-						}						
-					}
-				}
-			}
-			_elm.style.cssText = _cssTexts.join( ';');
-			return;	
-		}
-		/*
-		 * 一度に update する Attributes が少ない場合、cssText は使用しない.
-		 */
-	}
-	
-	var AnimationTaskClass = function( ELM, currentParameters, offsetParameters, endParameters, targetAttributes, onComplete, onEnterFrame, numFrames){
-		var l = targetAttributes.length;
-		return {
-			elm:	ELM,
-			onEnterFrame: function(){
-				var _updateCss = {}, i;
-				if( numFrames === 1){
-					for( i=0; i<l; ++i){
-						_updateCss[ targetAttributes[ i]] = endParameters[ i];
-						++i;
-					}
-					updateCss( ELM, currentParameters, targetAttributes, l);
-					onComplete !== null && onComplete();
-				} else {
-					for( i=0; i<l; ++i){
-						_updateCss[ targetAttributes[ i]] = currentParameters[ i] = Math.floor( currentParameters[ i] + offsetParameters[ i]);
-						++i;
-					}
-					updateCss( ELM, currentParameters, targetAttributes, l);
-					onEnterFrame !== null && onEnterFrame( _updateCss);
-				}
-				--numFrames;
-				return numFrames === 0;
-			},
-			destroy: function(){
-				ELM = onComplete = onEnterFrame = null;
-			}
-		}
-	}
-	
-	var VisualEffectClass = function( ELM){
-		var isHtmlElement;
-		
-		function registerAnime( _cssObject, _onComplete, _onEnterFrame, _time){
-			var _numFrames = Math.floor( _time / fpms);
-			startAnimation( ELM, _cssObject, _onComplete, _onEnterFrame, _numFrames);
-		}
-		function startFadeIn(){
-			
-		}
-		function startFadeOut(){
-			
-		}
-		function update( _x, _y, _w, _h){
-			var _cssText = ELM.style.cssText;
-			
-		}
-		
-		this.anime = registerAnime;
-		this.fadeIn = startFadeIn;
-		this.fadeOut = startFadeOut;
-		this.update = update;
-	}
-	
-	return {
-		createVisualEffect: function( _elm){
-			return new VisualEffectClass( _elm);
-		},
-		isInstanceOfVisualEffect: function( _instance){
-			return _instance instanceof VisualEffectClass;
-		}
-	}
-})();
-
-
 
 /*
  *  Google Analytics
diff --git a/app/assets/javascripts/system.js b/app/assets/javascripts/system.js
index 38fbb84e..463c4376 100644
--- a/app/assets/javascripts/system.js
+++ b/app/assets/javascripts/system.js
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.5.8
+ *   version 0.5.9
  * 
  * 
  * Type
@@ -84,6 +84,131 @@
 		}
 	};
 
+/*
+ * UA
+ * 
+ *   detect userAgent
+ *   detect plug in
+ */
+	var UA = ( function(){
+		var ua = (function(){
+				var acme = {};
+				
+				var n    = navigator;
+				var dua  = n.userAgent;
+				var dav  = n.appVersion;
+				var tv   = parseFloat(dav);
+				acme.isOpera  = (dua.indexOf("Opera") >= 0) ? tv: undefined;
+				acme.isKhtml  = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;
+				acme.isWebKit = parseFloat(dua.split("WebKit\/")[1]) || undefined;
+				acme.isChrome = parseFloat(dua.split("Chrome\/")[1]) || undefined;
+				acme.isGecko  = (dua.indexOf("Gecko\/") >= 0) ? parseFloat(dua.split("rv:")[1].replace( /^(\d*\.\d*)\.(\d*)/, '$1$2' )) : undefined;
+				var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);
+				if(index && !acme.isChrome){
+					acme.isSafari = parseFloat(dav.split("Version/")[1]);
+					if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){
+						acme.isSafari = 2;
+					}
+				}
+				if(document.all && !acme.isOpera){
+					acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;
+				}
+				
+				return acme;
+			})(),
+			isIE = navigator.userAgent.toLowerCase().indexOf( 'msie') !== -1,
+			ieVersion = isIE === true ? parseInt( navigator.appVersion.toLowerCase().replace( /.*msie[ ]/, '').match( /^[0-9]+/)) : 0,
+			ieRenderingVersion = ieVersion === 8 ? document.documentMode : ieVersion,
+			isStanderdMode = document.compatMode === 'CSS1Compat',
+			ActiveX = ( function(){
+				if( isIE === false || ieVersion > 8 ) return false;
+				var	b = document.body,
+					c = b.className || '',
+					x,
+					ret = undefined, //pettanr.URL_PARAMS.ActiveX,
+					ns = 'pettanr-ActiveX-',
+					enabled = 'enabled',
+					disabled = 'disabled';
+				if( ret !== true && ret !== false){
+					if( b.className.indexOf( ns + enabled ) !== -1 )  return true;
+					if( b.className.indexOf( ns + disabled ) !== -1 ) return false;
+					x = document.createElement( 'div' );
+					b.appendChild(x);
+					x.style.cssText = 'width:1px;height:1px;line-height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';
+					ret = x.offsetHeight > 1;
+					b.removeChild(x);
+				}
+				b.className += [ c !== '' ? ' ' : c, ns, ret === true ? enabled : disabled ].join( '');
+				return ret;
+			})(),
+			VML = ( function(){
+				if( ActiveX === false || isIE === false || ieVersion > 8) return false;
+				var globalObjectName = 'detect_activex',//Util.createGlobalUniqueName(),
+					script,
+					id = 'detectVML';
+				document.write( [ '<!--[if gte vml 1]><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
+				if( window[ globalObjectName ] === 1 ){
+					script = document.getElementById( id );
+					script.parentNode.removeChild( script );
+					window[ globalObjectName ] = null;
+					return true;
+				}
+				return false;
+			})(),
+			isStandAloneMode = ( function(){
+				if( isIE === false) return false;
+				if( VML === true) return false;
+				var globalObjectName = 'detect_standalone', //Util.createGlobalUniqueName(),
+					script,
+					id = 'detectStandAlone';
+				document.write( [ '<!--[if IE ', Math.floor( ieVersion ), ']><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
+				if( window[globalObjectName] === 1){
+					script = document.getElementById( id);
+					script.parentNode.removeChild( script);
+					window[globalObjectName] = null;
+					return false;
+				}
+				return true;
+			})();
+		return {
+			IE:					ua.isIE,
+			GECKO:				ua.isGecko,
+			OPERA:				ua.isOpera,
+			KHTML:				ua.isKhtml,
+			WEBKIT:				ua.isWebKit,
+			CHROME:				ua.isChrome,
+			isIE:				isIE,
+			ieVersion:			ieVersion,
+			ieRenderingVersion:	ieRenderingVersion,
+			isStanderdMode:		isStanderdMode,
+			ACTIVEX:            ActiveX,
+			VML:                VML,
+			STANDALONE:         isStandAloneMode,
+			VENDER_PREFIX: ( function() {
+				var ua = navigator.userAgent.toLowerCase();
+				if ( ua.indexOf('opera') !== -1 ){
+					return 'O';
+				} else if ( ua.indexOf('msie') !== -1 ){
+					return 'ms';
+				} else if ( ua.indexOf('webkit') !== -1 ){
+					return 'webkit';
+				} else if ( navigator.product === 'Gecko' ){
+					return 'Moz';
+				}
+				return '';
+			})(),
+			startVML: function(){
+				delete UA.startVML;
+				if( UA.VML !== true) return false;
+				if (!document.namespaces["v"]) {
+			        document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
+			    }
+			    document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";
+			}
+		}
+	})();
+
+
 /* ----------------------------------------------------
  * Util
  * 
@@ -104,50 +229,153 @@
 				var ret = doc.createElement( 'DIV' );
 				body.appendChild( ret );
 				
-				ret.id         = 'elmSizeGetter';
-				ret.style.cssText  = 'position:absolute;left:0;top:-9999px;visibility:hidden';
+				ret.id            = 'elmSizeGetter';
+				ret.style.cssText = 'position:absolute;left:0;top:-9999px;visibility:hidden';
 				
 				body.removeChild( ret );
 				return ret;
 			})(),
 			CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ',' );
 		
-		/* clean comment node */
-		cleanCommnetNode();
+		var UNIT_RATIO = ( function( elm ){
+				var ret = {},
+					unit,
+					units = 'px,cm,mm,in,pt,pc'.split( ',' );
+				
+				body.appendChild( elm );
+				
+				for( var i=units.length; i; ){
+					unit = units[ --i ];
+					elm.style.width = 1000 + unit;
+					ret[ unit ] = elm.offsetWidth / 1000;
+				};
+				body.removeChild( elm );
+				elm.style.cssText = '';
+				
+				return ret;
+			})( ELM_SIZE_GETTER );
+			
+		var FONT_SIZE_RATIO = ( function( elm ){
+				var ret = {},
+					size,
+					list = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );
+				
+				body.appendChild( elm );
+				elm.style.cssText = 'font-size:100px;line-height:1em;';
+				elm.appendChild( document.createTextNode( 'X' ) );
+				
+				base = elm.offsetHeight;
+				
+				for( var i = list.length; i; ){
+					size = list[ --i ];
+					elm.style.fontSize = size;
+					ret[ size ] = elm.offsetHeight;// / base;
+				};
+				body.removeChild( elm );
+				elm.style.cssText = '';
+				elm.removeChild( elm.firstChild );
+				
+				return ret;
+			})( ELM_SIZE_GETTER );
 		
-		/* clean noscript */
-		( function(){
-			var nodeNoscript = doc.getElementsByTagName( 'noscript' ),
-				noscript;
-			for( var i=0; i<nodeNoscript.length; ++i ){
-				noscript = nodeNoscript[i];
-				noscript.parentNode && noscript.parentNode.removeChild( noscript );
+		var SPECIAL = ( function(){
+			var ret = {};
+			if( UA.isIE === true && UA.ieVersion < 9 ){
+				if( UA.ACTIVEX === true ){
+					// ret.opacity    = 'ActiveXOpacity';
+					ret.getFilters = function( style ){
+						var filters = ( style.filter || '' ).split( ') ' ),
+							ret     = {},
+							i       = filters.length,
+							filter, name, props, prop, j, l, key, v;
+						for( ; i; ){
+							filter   = filters[ --i ].split( ' ' ).join( '' ).split( '(' );
+							if( filter.length !== 2 ) continue;
+							name     = filter[ 0 ].split( '.' ); // progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9)
+							props    = filter[ 1 ].split( ',' ); // 
+							filter   = {};
+							for( j = 0, l = props.length; j < l; ++j ){
+								prop = props[ j ].split( '=' );
+								key  = prop[ 0 ].toLowerCase();
+								v    = prop[ 1 ];
+								filter[ key ] = v; //v.charAt( 0 ) === '#' ? v : parseInt( v );
+							};
+							ret[ name[ name.length - 1 ] ] = filter;
+						};
+						return ret;
+					};
+				} else {
+					ret.opacity = null;
+				};
+			} else {
+				var style = document.documentElement.style;
+				ret.opacity =	style.opacity             !== undefined ? 'opacity' : 
+								style.MozOpacity          !== undefined ? 'MozOpacity' :
+								style.KhtmlOpacity        !== undefined ? 'KhtmlOpacity' :
+								style[ '-khtml-opacity' ] !== undefined ? 'KhtmlOpacity' : null;
 			};
+					
+			return ret;
 		})();
-	
-		function cleanCommnetNode( _targetElm ){
-			search( _targetElm || body );
-			
-			function search( _elm ){
-				if( !_elm ) return;
-				if( _elm.nodeType === 8 ){
-					_elm.parentNode.removeChild( _elm );
-					return;
+		
+		function cssToObject( css ){
+			var ret = {}, i, nv, n, v, parse = Util.parse, isNumber = Type.isNumber;
+			if( Type.isString( css ) === true ){
+				css = css.split( ';' );
+				for( i = css.length; i; ){
+					nv    = css[ --i ].split( ':' ); // filter の場合, progid: がくる
+					n     = nv.shift();
+					if( isNumber( parse( n ) ) === true ) continue;
+					v     = nv.join( '' );
+					while( v.charAt( 0 ) === ' ' ) v = v.substr( 1 );
+					ret[ Util.camelize( n ) ] = parse( v );
 				};
-				var i, l, _children = _elm.childNodes, _array = [];
-				if( _children && typeof _children.length === 'number' ){
-					// liveNode > array
-					for( i=0, l=_children.length; i<l; ++i ){
-						_array.push( _children[ i ] );
-					};
-					while( _array.length !== 0 ){
-						search( _array.shift() );
-					};
+			} else {
+				for( n in css ){
+					if( Type.isNumber( parse( n ) ) === false ) ret[ n ] = parse( css[ n ] );
 				};
 			};
-		};
+			
+			if( SPECIAL.getFilters ){
+				var f = SPECIAL.getFilters( ret );
+				ret.filter  = f;
+				ret.opacity = f.alpha && f.alpha.opacity ? f.alpha.opacity / 100 : 1;
+			} else {
+				ret.opacity = SPECIAL.opacity !== null ? ret[ SPECIAL.opacity ] : 1;
+			}
+			
+			return ret;
+		};	
+		
+		/* clean comment node */
+		window.setTimeout( function(){
+			Util.cleanCommnetNode();
+			
+			/* clean noscript */
+
+			var noscripts = doc.getElementsByTagName( 'noscript' ),
+				ns;
+			for( var i = noscripts.length; i; ){
+				ns = noscripts[ --i ];
+				ns.parentNode && ns.parentNode.removeChild( ns );
+			};
+		}, 0 );
 		
 		return {
+			parse: function( v ){
+				if( Type.isString( v ) === true ){
+					if( v === 'true' )      return true;
+					if( v === 'false' )     return false;
+					if( v === 'null' )      return null;
+					if( v === 'undefined' ) return undefined;
+					if( v === 'NaN' )       return NaN;
+					if( v === '' )          return v;
+					var _v = v.split( ' ' ).join( '' ),
+						n = _v - 0;
+					if( '' + n === _v || '' + n === '0' + _v  ) return n - 0;
+				};
+				return v;
+			},
 			extend: function( baseInstance, extend ){
 				for( var key in extend ){
 					if( Type.isUndefined( baseInstance[ key ] ) === true ){
@@ -157,32 +385,100 @@
 						baseInstance[ key ] = extend[ key ];
 					} else {
 						alert( 'extend error' );
-					}
-				}
+					};
+				};
 				return baseInstance;
 			},	
-			cleanCommnetNode: cleanCommnetNode,
+			cleanCommnetNode: function ( _targetElm ){
+				search( _targetElm || body );
+				
+				function search( _elm ){
+					if( !_elm ) return;
+					if( _elm.nodeType === 8 ){
+						_elm.parentNode.removeChild( _elm );
+						return;
+					};
+					if( _elm.nodeType === 1 ){
+						var _array = Util.copyArray( _elm.childNodes ); // liveNode > array
+						while( _array.length > 0 ) search( _array.shift() );
+					};
+				};
+			},
 			cleanElement: function( _targetElm ){
-				var _nodes, _elm, _array, j, m;
-				for( var i=0, l=CLEAN_TARGET_ELEMENT.length; i<l; ++i){
-					_nodes = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);
-					_array = [];
-					for( j=0, m = _nodes.length; j<m; ++j){
-						_array.push( _nodes[ j]);
-					}
-					for( j=0, m = _array.length; j<m; ++j){
-						_elm = _nodes[ j];
-						_elm.parentNode && _elm.parentNode.removeChild( _elm);
-					}
-				}
-				cleanCommnetNode( _targetElm );
+				var _array, _elm, j, _css;
+				for( var i = CLEAN_TARGET_ELEMENT.length; i; ){
+					_array = Util.copyArray( _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ --i ] ) );
+					for( j = _array.length; j; ){
+						_elm = _nodes[ --j ];
+						_elm.parentNode && _elm.parentNode.removeChild( _elm );
+					};
+				};
+				Util.cleanCommnetNode( _targetElm );
+				
 				if( UA.isIE === false ) return;
-				_nodes = _targetElm.all || _targetElm.getElementsByName( '*' );
-				for( i=0, l = _nodes.length; i<l; ++i){
-					_elm = _nodes[ i ];
-					_elm.style.filter = '';
-					_elm.style.behavior = '';
-				}
+				_nodes = _targetElm.all || _targetElm.getElementsByTagName( '*' );
+				for( i = _nodes.length; i; ){
+					_elm = _nodes[ --i ];
+					_css = Util.getInlineStyle( _elm );
+					_css.filter   = null;
+					_css.behavior = null;
+					_elm.style.cssText = Util.toCssText( _css );
+				};
+			},
+			getInlineStyle: function( _elm ){
+				return cssToObject( _elm.style.cssText );
+			},
+			getComputedStyle: function( elm ){
+				/* if( window.getComputedStyle ){
+			        Util.getComputedStyle = function( elm ){
+			        	return cssToObject( window.getComputedStyle( elm, '' ) );
+			        };
+			  	} else */
+			    if( document.defaultView && document.defaultView.getComputedStyle ){
+			        Util.getComputedStyle = function( elm ){
+			        	var obj = document.defaultView.getComputedStyle( elm, '' );
+			        	return cssToObject( obj.cssText || obj );
+			        };
+			    } else {
+			        Util.getComputedStyle = function( elm ){
+			        	return cssToObject( elm.currentStyle );
+			        };
+			    };
+			    return Util.getComputedStyle( elm );
+			},
+			camelize: function( cssProp ){
+			    var parts = cssProp.split( ' ' ).join( '' ).split( '-' ),
+			    	l     = parts.length;
+			    if( l === 1 ) return parts[ 0 ];
+			
+			    var camelized = cssProp.charAt(0) === '-'
+			      ? parts[ 0 ].charAt( 0 ).toUpperCase() + parts[ 0 ].substring( 1 )
+			      : parts[ 0 ];
+			
+			    for( var i = 1; i < l; ++i ){
+			    	camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
+			    };
+			    return camelized;
+			},
+			uncamelize: function( str ){
+				return str.split( ' ' ).join( '' ).replace( /[A-Z]/g, '-$&' ).toLowerCase();
+			},
+			toCssText: function( _css ){
+				var ret = [], v;
+				for( var p in _css ){
+					v = _css[ p ];
+					v && ret.push( [ p, v ].join( ':' ) );
+				};
+				return ret.join( ';' );
+			},
+			pxTo: function( _px, _unit ){
+				return _px / ( UNIT_RATIO[ _unit ] || 1 );
+			},
+			toPx: function( x, _unit ){
+				return x * ( UNIT_RATIO[ _unit ] || 1 );
+			},
+			absoluteFontSizeToPx: function( fontsize ){
+				return FONT_SIZE_RATIO[ fontsize ] || 0;
 			},
 			getElementSize: function( _elm ){
 				if( Type.isHTMLElement( _elm ) === false ){
@@ -284,10 +580,12 @@
 				
 				return size;
 			},
-			getAbsolutePath: function( path) {
-				var e = document.createElement("div");
-				e.innerHTML = '<a href=\"' + path + '\" />';
-				return e.firstChild.href;
+			getAbsolutePath: function( path ){
+				var elm = document.createElement('div');
+				body.appendChild( elm );
+				elm.innerHTML = '<a href=\"' + path + '\" />';
+				body.removeChild( elm );
+				return elm.firstChild.href;
 			},
 			getAbsolutePosition: function( _elm ){
 				// Find the destination's position
@@ -308,24 +606,36 @@
 			},
 			pullHtmlAsTemplete: function( html ){
 				var elm = document.createElement( 'div' );
+				body.appendChild( elm );
 				elm.innerHTML = html;
+				body.removeChild( elm );
 				return elm.firstChild;
 			},
-			getElementsByClassName: function( _elm, _className, opt_tagName){
-				var _all = !opt_tagName || opt_tagName === '*',
-					_nodes = _all === true ? ( _elm.all || _elm.getElementsByTagName( '*')) : _elm.getElementsByTagName( opt_tagName),
-					_node, _classes, ret = [];
-				for( var i=0, l = _nodes.length; i<l; ++i){
-					_node = _nodes[ i];
-					_node.nodeType === 1 && this.hasClassName( _node, _className) === true && ret.push( _node);
-				}
-				return ret;
+			getElementsByClassName: function( _elm, _className, opt_tagName ){
+				var _all       = !opt_tagName || opt_tagName === '*',
+					_livenodes = _all === true ? ( _elm.all || _elm.getElementsByTagName( '*' )) : _elm.getElementsByTagName( opt_tagName ),
+					sp         = ' ',
+					_cnames    = _className.replace( /\s+/g, sp ).split( sp ),
+					_cname,
+					_nodes     = Util.copyArray( _livenodes );
+				
+				for( var i = _cnames.length; i; ){
+					_cname = _cnames[ --i ];
+					for( var j = 0; j < _nodes.length; ){
+						_node = _nodes[ j ];
+						if( _node.nodeType !== 1 || Util.hasClassName( _node, _cname ) === false ){
+							_nodes.splice( j, 1 );
+						} else {
+							++j;
+						};
+					};
+				};
+				return _nodes;
 			},
 			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;
+				var _children = _parent.getElementsByTagName( _child.tagName );
+				for( var i = _children.length; i; ){
+					if( _children[ --i ] === _child ) return i;
 				};
 				return -1;
 			},
@@ -363,24 +673,25 @@
 					_node.parentNode && _node.parentNode.removeChild( _node);
 				}
 			},
-			getIndex: function( _array, _element){
+			getIndex: function( _array, _element ){
 				if( Array.prototype.indexof ){
 					Util.getIndex = function( _array, _element){
 						return _array.indexof( _element);
-					}
+					};
 				} else {
 					Util.getIndex = function( _array, _element){
-						for( var i=0, l = _array.length; i<l; ++i){
-							if( _array[ i] === _element) return i;
-						}
-						return -1;					
-					}
-				}
-				return Util.getIndex( _array, _element);
+						for( var i = _array.length; i; ){
+							if( _array[ --i ] === _element ) return i;
+						};
+						return -1;
+					};
+				};
+				return Util.getIndex( _array, _element );
 			},
 			copyArray: function( _array ){
-				var ret = new Array( l );
-				for( var i=0, l = _array.length; i<l; ++i ){
+				var l = _array.length,
+					ret = new Array( l );
+				for( var i=0; i<l; ++i ){
 					ret[ i ] = _array[ i ];
 				}
 				return ret;
@@ -390,7 +701,7 @@
 			 */
 			createGlobalUniqueName: function(){
 				var randomKey = null;
-				while(true) {
+				while( true ){
 					randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');
 					if( typeof window[randomKey] === 'undefined'){
 						break;
@@ -435,132 +746,7 @@
 					callback( el );
 				};
 			}
-		}
-	})();
-
-
-/*
- * UA
- * 
- *   detect userAgent
- *   detect plug in
- */
-	var UA = ( function(){
-		var ua = (function(){
-				var acme = {};
-				
-				var n    = navigator;
-				var dua  = n.userAgent;
-				var dav  = n.appVersion;
-				var tv   = parseFloat(dav);
-				acme.isOpera  = (dua.indexOf("Opera") >= 0) ? tv: undefined;
-				acme.isKhtml  = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;
-				acme.isWebKit = parseFloat(dua.split("WebKit\/")[1]) || undefined;
-				acme.isChrome = parseFloat(dua.split("Chrome\/")[1]) || undefined;
-				acme.isGecko  = (dua.indexOf("Gecko\/") >= 0) ? parseFloat(dua.split("rv:")[1].replace( /^(\d*\.\d*)\.(\d*)/, '$1$2' )) : undefined;
-				var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);
-				if(index && !acme.isChrome){
-					acme.isSafari = parseFloat(dav.split("Version/")[1]);
-					if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){
-						acme.isSafari = 2;
-					}
-				}
-				if(document.all && !acme.isOpera){
-					acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;
-				}
-				
-				return acme;
-			})(),
-			isIE = navigator.userAgent.toLowerCase().indexOf( 'msie') !== -1,
-			ieVersion = isIE === true ? parseInt( navigator.appVersion.toLowerCase().replace( /.*msie[ ]/, '').match( /^[0-9]+/)) : 0,
-			ieRenderingVersion = ieVersion === 8 ? document.documentMode : ieVersion,
-			isStanderdMode = document.compatMode === 'CSS1Compat',
-			ActiveX = ( function(){
-				if( isIE === false || ieVersion > 8 ) return false;
-				var	b = document.body,
-					c = b.className || '',
-					x,
-					ret = undefined, //pettanr.URL_PARAMS.ActiveX,
-					ns = 'pettanr-ActiveX-',
-					enabled = 'enabled',
-					disabled = 'disabled';
-				if( ret !== true && ret !== false){
-					if( Util.hasClassName( b, ns + enabled) === true )  return true;
-					if( Util.hasClassName( b, ns + disabled) === true ) return false;
-					x = document.createElement( 'div' );
-					b.appendChild(x);
-					x.style.cssText = 'width:1px;height:1px;line-height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';
-					ret = x.offsetHeight > 1;
-					b.removeChild(x);
-				}
-				b.className += [ c !== '' ? ' ' : c, ns, ret === true ? enabled : disabled ].join( '');
-				return ret;
-			})(),
-			VML = ( function(){
-				if( ActiveX === false || isIE === false || ieVersion > 8) return false;
-				var globalObjectName = Util.createGlobalUniqueName(),
-					script,
-					id = 'detectVML';
-				document.write( [ '<!--[if gte vml 1]><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
-				if( window[globalObjectName] === 1){
-					script = document.getElementById( id);
-					script.parentNode.removeChild( script);
-					window[globalObjectName] = null;
-					return true;
-				}
-				return false;
-			})(),
-			isStandAloneMode = ( function(){
-				if( isIE === false) return false;
-				if( VML === true) return false;
-				var globalObjectName = Util.createGlobalUniqueName(),
-					script,
-					id = 'detectStandAlone';
-				document.write( [ '<!--[if IE ', Math.floor( ieVersion ), ']><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));
-				if( window[globalObjectName] === 1){
-					script = document.getElementById( id);
-					script.parentNode.removeChild( script);
-					window[globalObjectName] = null;
-					return false;
-				}
-				return true;
-			})();
-		return {
-			IE:					ua.isIE,
-			GECKO:				ua.isGecko,
-			OPERA:				ua.isOpera,
-			KHTML:				ua.isKhtml,
-			WEBKIT:				ua.isWebKit,
-			CHROME:				ua.isChrome,
-			isIE:				isIE,
-			ieVersion:			ieVersion,
-			ieRenderingVersion:	ieRenderingVersion,
-			isStanderdMode:		isStanderdMode,
-			ACTIVEX:            ActiveX,
-			VML:                VML,
-			STANDALONE:         isStandAloneMode,
-			VENDER_PREFIX: ( function() {
-				var ua = navigator.userAgent.toLowerCase();
-				if ( ua.indexOf('opera') !== -1 ){
-					return 'O';
-				} else if ( ua.indexOf('msie') !== -1 ){
-					return 'ms';
-				} else if ( ua.indexOf('webkit') !== -1 ){
-					return 'webkit';
-				} else if ( navigator.product === 'Gecko' ){
-					return 'Moz';
-				}
-				return '';
-			})(),
-			startVML: function(){
-				delete UA.startVML;
-				if( UA.VML !== true) return false;
-				if (!document.namespaces["v"]) {
-			        document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
-			    }
-			    document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";
-			}
-		}
+		};
 	})();
 
 
@@ -570,7 +756,7 @@
  * 
  */	
 
-( function( window, undefined ){
+( function( window, document, undefined ){
 	
 	var doc            = window.document;
 	var body           = doc.getElementsByTagName( 'body' )[ 0 ]; //( doc.compatMode || '' ) !== 'CSS1Compat' ? doc.body : doc.documentElement;// 
@@ -988,13 +1174,13 @@ var File = ( function(){
 		getFileUID: function( FILEDATAorFILE ){
 			if( FILEDATAorFILE instanceof FileClass ){
 				return FILEDATAorFILE.getUID();
-			}
+			};
 			
 			var uid = Util.getIndex( FILEDATA_RESITER, FILEDATAorFILE );
 			if( uid === -1 ){
 				uid = FILEDATA_RESITER.length;
 				FILEDATA_RESITER.push( FILEDATAorFILE );
-			}
+			};
 			return uid;
 		},
 		getFileDataAccess: function( UIDorFILEorFILEDATA ){
@@ -1016,7 +1202,7 @@ var File = ( function(){
 			} else
 			if( Util.getIndex( FILEDATA_RESITER, UIDorFILEorFILEDATA ) !== -1 ){
 				return UIDorFILEorFILEDATA;
-			}
+			};
 			return null;
 		},
 		getChildren: function( UIDorFILEorFILEDATA ){
@@ -1060,8 +1246,8 @@ var File = ( function(){
 				if( _ticket.fileUID === _uid && _ticket.eventType === _eventType && _ticket.callBack === _callback ){
 					EVENT_LISTENER_REGISTER.splice( i, 1 );
 					_ticket.kill();
-				}
-			}
+				};
+			};
 		},
 		getTreeAccess: function(){
 			
@@ -1081,11 +1267,11 @@ var File = ( function(){
 					if( FILE_CONTROLER.getFileData( _tree.getCurrentFile() ) === _data ){
 						_treeAccess = TREE_ACCESS_ARRAY[ _tree.getUID() ];
 						_treeAccess && _treeAccess.dispatchFileEvent( _event );
-					}
-				}
-			}
+					};
+				};
+			};
 		}
-	}
+	};
 	
 	var TreeClass = function( apiuser, rootFileData ){
 		var PARENT_FILE_RESITER = [],
@@ -1116,9 +1302,9 @@ var File = ( function(){
 				if( _type === Const.TREE.EVENT.UPDATE && _eventType === Const.FILE.EVENT.GET_SEQENTIAL_FILES ){
 					//_callback( _eventType, _targetFile );
 					AsyncCall.add( apiuser, _callback, [ _eventType, _targetFile ] );
-				}
-			}
-		}
+				};
+			};
+		};
 		
 		this.getUID = function(){
 			return Util.getIndex( TREE_ACCESS_ARRAY, ACCESS );
@@ -1179,12 +1365,12 @@ var File = ( function(){
 			while( PARENT_FILE_RESITER.length > 0 ){
 				_currentFile = PARENT_FILE_RESITER.shift();
 				_currentFile.destroy();
-			}
+			};
 			
 			AsyncCall.remove( apiuser );
 			instance = apiuser = null;
 			return true;
-		}
+		};
 	};
 
 	var FileEventTicketClass = function( _uid, _eventType, _callback ){
@@ -2163,10 +2349,10 @@ var Application = ( function(){
 				this.screenX       = e.screenX;
 				this.screenY       = e.screenY;
 				
+				this.charCode      = e.keyCode;
 				this.altKey        = e.altKey;
 				this.ctrlKey       = e.ctrlKey;
 				this.shiftKey      = e.shiftKey;
-				this.charCode      = e.keyCode;
 				
 				this.wheelDelta    = e.wheelDelta;
 				
@@ -2349,55 +2535,52 @@ var Application = ( function(){
 	};
 
 var ReadyEvent = ( function(){
-	var timer  = null,
-		script = null,
-		ticketReady,
+	var ticketReady,
 		ticketLoad;
 
-	function detect(){
+	function webkitDetect(){
 		var state = document.readyState;
 		if( state === 'loaded' || state === 'complete' ){
-			timer && window.clearInterval( timer );
+			SystemTimer.remove( SUPER_USER_KEY, webkitDetect );
 			timer = null;
 			onReady();
-		}
-	}
+		};
+	};
 	function ieDetect(){
-		if( this.readyState === 'loaded' || this.readyState === 'complete' ){
+		if( this.readyState === 'complete' ){ // this.readyState === 'loaded' || 
 			this.onreadystatechange = new Function();
 			this.onreadystatechange = null;
 			this.parentNode.removeChild( this );
-			script = null;
 			onReady();
-		}
-	}
-	
+		};
+	};
+		
 	function onReady(){
+		ticketReady && ticketReady.destroy();
+		ticketLoad  && ticketLoad.destroy();
+		ticketReady = ticketLoad = null;
 		Page.onReady();
 		if( Page.registered() === true ){
 			Page.boot();
 		} else {
 			Home.boot();
-		}
-		ticketReady && ticketReady.destroy();
-		ticketLoad  && ticketLoad.destroy();
-		ticketReady = ticketLoad = null;
-	}
+		};
+	};
 	
 	// Apple WebKit (Safari, OmniWeb, ...)
 	if( doc.readyState && !!UA.WEBKIT ){
-		timer = window.setInterval( detect, 50 );
+		SystemTimer.add( SUPER_USER_KEY, webkitDetect, 50 );
 	} else
+	/*
 	if( document.readyState && UA.isIE && UA.ieVersion < 9 ){
-		document.write('<script type="text/javascript" defer="defer" id="ieDOMContentLoaded" src="' +
-			( ( window.location.protocol === 'https:' ) ? '://0' : 'javascript:void(0)' ) +
+		document.write('<script type="text\/javascript" defer="defer" id="ieDOMContentLoaded" src="' +
+			( ( window.location.protocol === 'https:' ) ? ':\/\/0' : 'javascript:void(0)' ) +
 			'"><\/script>');
-		script = document.getElementById( 'ieDOMContentLoaded' );
-		script.onreadystatechange = ieDetect;
-	} else {
-		ticketReady = new EventTicketClass( doc, 'DOMContentLoaded', onReady );
-		ticketLoad  = new EventTicketClass( doc, 'load', onReady );
-	}
+		document.getElementById( 'ieDOMContentLoaded' ).onreadystatechange = ieDetect;
+	} else */ {
+		ticketReady = new EventTicketClass( document, 'DOMContentLoaded', onReady );
+		ticketLoad  = new EventTicketClass( window, 'load', onReady );
+	};
 })();
 
 
@@ -2712,6 +2895,8 @@ var ResizeEvent = ( function(){
  */
 var KeyEvent = ( function(){
 	var EVENT_LIST_MAP = [],
+		LOCK_UP      = [],
+		LOCK_DOWN    = [],
 		application    = null,
 		currentList    = null;
 
@@ -2722,24 +2907,32 @@ var KeyEvent = ( function(){
 		keyupTicket    = null,
 		keyPress       = null,
 		keypressTicket = null;
-
+	
+	function unlock( lock, key ){
+		lock.splice( Util.getIndex( lock, key ), 1 );
+	};
+	
 	function onKeyChange( e ){
 		var cancel         = false,
 			type           = e.type,
-			key            = e.keyCode || e.charCode || e.which,
+			key            = e.charCode || e.which,
 			shift          = Type.isBoolean( e.shiftKey ) === true ? e.shiftKey : ( e.modifiers & Event.SHIFT_MASK ),
 			ctrl           = Type.isBoolean( e.ctrlKey  ) === true ? e.ctrlKey  : ( e.modifiers & Event.CONTROL_MASK ),
-			t;
-
+			lock           = type === 'keyup' ? LOCK_UP : LOCK_DOWN;
+		// block chattering
+		if( Util.getIndex( lock, key ) !== -1 ) return false;
+		lock.push( key );
+		AsyncCall.add( SUPER_USER_KEY, unlock, [ lock, key ] );
+		
 		if( key === 16 || shift === true ){
 			KeyEvent.shiftEnabled = type !== 'keyup';
 		};
 		if( key === 17 || ctrl === true ){
 			KeyEvent.ctrlEnabled  = type !== 'keyup';
 		};
-
-		for( var i=currentList.length; t = currentList[ --i ]; ){
+		for( var i=currentList.length, t; t = currentList[ --i ]; ){
 			if( Type.isFunction( t[ type ] ) === true && t.keyCode === key && ( t.shift === undefined || t.shift === shift ) && ( t.ctrl === undefined || t.ctrl === ctrl )){
+				
 				AsyncCall.add( t.apiuser, t[ type ], e );
 				cancel = true;
 			};
@@ -2778,8 +2971,8 @@ var KeyEvent = ( function(){
 					if( _handler !== this.keydown ) return false;
 				} else {
 					if( _handler !== this.keyup )   return false;
-				}
-			}
+				};
+			};
 			if( _keyCode  && _keyCode  !== this.keyCode ) return false;
 			if( _shift    && _shift    !== this.shift )   return false;
 			if( _ctrl     && _ctrl     !== this.ctrl )    return false;
@@ -2794,7 +2987,7 @@ var KeyEvent = ( function(){
 			
 			return true;
 		}
-	}
+	};
 	
 	function registerEvent( _apiuser, _type, _onKeydown, _onKeyup, _keyCode, _shift, _ctrl ){
 		var _uid  = _apiuser.getUID(),
@@ -2823,7 +3016,7 @@ var KeyEvent = ( function(){
 			} else
 			if( _type === 'cursol' ){
 				
-			}
+			};
 		},
 		remove: function( _apiuser, _type, _handler, _keyCode, _shift, _ctrl ){
 			var _list = EVENT_LIST_MAP[ _apiuser.getUID() ],
@@ -3245,7 +3438,7 @@ var UI = ( function(){
 			elmA.innerHTML     = _newValue;
 			elmA.style.display = 'block';
 			
-			onUpdate && _newValue !== value && onUpdate( _newValue, value );
+			onUpdate && _newValue !== value && AsyncCall.add( apiuser, onUpdate, [ _newValue, value ] );
 			
 			value = _newValue;
 			focus = false;
@@ -3270,7 +3463,7 @@ var UI = ( function(){
 		};
 		instance.value( value );
 		MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
-	}
+	};
 	
 	var ButtonClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){
 		var instance  = this,
@@ -3281,7 +3474,8 @@ var UI = ( function(){
 		
 		function onClick(){
 			focus = true;
-			onUpdate();
+			// onUpdate();
+			AsyncCall.add( apiuser, onUpdate );
 			return false;
 		};
 		this.focus = function(){
@@ -3313,7 +3507,7 @@ var UI = ( function(){
 			MouseEvent.remove( apiuser, elmWrapper );
 			apiuser = uiGroup = elmWrapper = onUpdate = instance = null;
 		};
-	}
+	};
 
 	var FileInputClass = function( apiuser, uiGroup, elmWrapper, onUpdate, validater, elmFileInput ){
 		var elmFilePath = Util.getElementsByClassName( elmWrapper, 'file-path' )[ 0 ],
@@ -3412,11 +3606,11 @@ var UI = ( function(){
 						if( focus === true ){
 							OptionControl.update( instance, _value );
 						};
-						Type.isFunction( onUpdate ) === true && onUpdate( _value );
+						Type.isFunction( onUpdate ) === true && AsyncCall.add( apiuser, onUpdate, [ _value ] );
 						break;
-					}
-				}
-			}
+					};
+				};
+			};
 			return value;
 		};
 		this.selectIndex = function(){
@@ -3714,12 +3908,12 @@ var UI = ( function(){
 			KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );
 			KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );
 			KeyEvent.updateCurrentListener( _apiuser );
-		}
-	}
+		};
+	};
 
 	function onKeyDown( e ){
 		if( currentItem === null ) return true;
-		var keyCode = e.keyCode,
+		var keyCode = e.charCode,
 			_index  = Util.getIndex( currentList, currentItem );
 		if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt
 			keyCode === 9  && tabShift( _index, e.shiftKey === true ? -1 : 1 );
@@ -3728,7 +3922,7 @@ var UI = ( function(){
 			currentItem && currentItem.blur( keyCode );
 		};
 		return false;
-	}
+	};
 
 	function tabShift( _index, _way ){
 		var l = currentList.length,
@@ -4187,6 +4381,308 @@ var Finder = ( function(){
 })();
 
 
+/*
+ * -- len, %
+ * marginBottom, marginLeft, marginRight, marginTop, margin
+ * padding, paddingBottom, paddingLeft, paddingRight, paddingTop
+ * fontSize, textIndent
+ * height, width
+ * bottom, left, right, top			(len, %)
+ *
+ * -- len
+ * borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderWidth,
+ * letterSpacing
+ *
+ * -- color
+ * backgroundColor
+ * borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, borderColor
+ * color
+ *
+ * -- special
+ * clip			rect(0px, 40px, 40px, 0px);
+ * backgroundPosition	(len, %)
+ * opacity
+ * lineHeight		(len, %, num)
+ * zIndex			( order )
+ */
+
+var VisualEffect = ( function(){
+	
+	var ANIMATION_TICKET_ARRAY = [],
+		fpms                   = 50,
+		FILTER                 = 'filter',
+		OPACITY                = 'opacity',
+		REG_ALPHA              = /alpha\([^)]*\)/i,
+		CORON                  = ':',
+		EMPTY                  = '',
+		SEMICORON              = ';';
+		UNITS                  = 'px,cm,mm,in,pt,pc,em,%'.split( ',' );
+		
+		PARAMS = ( function(){
+			ret = { size: {}, color: {}, special: {}, unit: {}, region: {} };
+			register( ret.size, 'marginBottom,marginLeft,marginRight,marginTop,margin,padding,paddingBottom,paddingLeft,paddingRight,paddingTop,borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,borderWidth,fontSize,textIndent,height,width,bottom,left,right,top' );
+			register( ret.color, 'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,borderColor,color' );
+			register( ret.special, 'clip,backgroundPosition,opacity,lineHeight,zIndex,letterSpacing' );
+			
+			register( ret.unit, 'px,cm,mm,in,pt,pc,em,%' );
+			register( ret.region, 'margin,padding,border,clip,backgroundPosition,borderColor' )
+			
+			function register( obj, params ){
+				params = params.split( ',' );
+				for( var i=params.length; i; ) obj[ params[ --i ] ] = true;
+			};
+			return ret;
+		})();
+		
+	function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames ){
+		var _ticket, i = ANIMATION_TICKET_ARRAY.length;
+		for( ; i; ){
+			_ticket = ANIMATION_TICKET_ARRAY[ --i ];
+			if( _ticket.elm === _elm ){
+				_ticket.destroy();
+				break;
+			};
+		};
+		
+		var _currentParameters = [],
+			_offsetParameters  = [],
+			_endParameters     = [],
+			_targetAttributes  = [],
+			_units             = [];
+		
+		//  coputedStyle と _cssObject を比較して , 一致及び非数は削除しつつ コピー
+		//  filter opacity の追加 REG_ALPHA.test( _value ) ? _value.replace( REG_ALPHA, opacity ) : _value + " " + opacity
+		/*
+		 * cssObject をまわす
+		 * 非数は削除
+		 * computtedStyle と一致も削除
+		 * updateTraget として記録
+		 * 初期値を cssObject としてセット
+		 * cssTest にセット zoom もセット
+		 */
+		var x, v, _v, u,
+			empty          = EMPTY,
+			px             = 'px',
+			$1             = '$1',
+			isString       = Type.isString,
+			isNumber       = Type.isNumber,
+			inlineStyle    = Util.getInlineStyle( _elm ),
+			computtedStyle = Util.getComputedStyle( _elm ),
+			REG_UINIT      = /.*\d(\w{1,2})?/;
+		for( var p in _cssObject ){
+			x = _cssObject[ p ];
+			if( PARAMS.size[ p ] === true ){
+				/*
+				 * size
+				 */
+				if( isString( x ) === true ){
+					v = parseInt( x );
+					if( ( empty + v ).length < x.length ){
+						u = x.replace( REG_UINIT, $1 );
+						if( PARAMS.unit[ u ] === false ) u = px;
+					} else {
+						u = px;
+					};
+				} else
+				if( isNumber( x ) === true ){
+					v = x;
+					_unit = px; // 'px'
+				} else {
+					continue;
+				};
+			} else
+			if( PARAMS.color[ p ] === true ){
+				/*
+				 * color
+				 */
+				if( isString( x ) === true ){
+					/* #rrggbb
+					 * "aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow"
+					 * #rgb
+					 * rgb(r%, g%, b%)
+					 * rgb(r, g, b)
+					 */
+				} else
+				if( isNumber( x ) === true ){
+					v = x;
+					_unit = px; // 'px'
+				} else {
+					continue;
+				};
+			} else
+			if( PARAMS.special[ p ] === true ){
+				
+			} else {
+				continue;
+			}
+			
+			/*
+			 * ここまでで、新しい値 v と 単位 u が判明．
+			 */
+			_v = computtedStyle[ p ];
+			/**
+			 * _v を u を合わせて変換して v と比較．
+			 * em の場合は comS.fontSize を元に
+			 */
+			if( v === _v ) continue;
+			_currentParameters.push( _v );
+			_offsetParameters.push( _v - v );
+			_endParameters.push( v );
+			_targetAttributes.push( p );
+			_units.push( _unit );
+			inlineStyle[ p ] = _v;
+		};
+		elm.style.cssText = Util.toCssText( inlineStyle );
+		//
+		/*
+			var style = elem.style,
+				currentStyle = elem.currentStyle,
+				opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
+				filter = currentStyle && currentStyle.filter || style.filter || "";
+
+			// IE has trouble with opacity if it does not have layout
+			// Force it by setting the zoom level
+			style.zoom = 1;
+		 */
+		
+		ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(
+			_elm,
+			_currentParameters, _offsetParameters, _endParameters, _targetAttributes, _units,
+			Type.isFunction( _onComplete ) === true   ? _onComplete   : null,
+			Type.isFunction( _onEnterFrame ) === true ? _onEnterFrame : null,
+			_numFrames
+		) );
+		
+		SystemTimer.add( SUPER_USER_KEY, onEnterFrame, 1000 / fpms );
+	};
+	
+	function onEnterFrame(){
+		var _ticket,
+			i = 0;
+		while( i < ANIMATION_TICKET_ARRAY.length ){
+			_ticket = ANIMATION_TICKET_ARRAY[ i ];
+			if( _ticket.onEnterFrame() === true ){
+				_ticket.destroy();
+				ANIMATION_TICKET_ARRAY.splice( i, 1 );
+			} else {
+				++i;
+			};
+		};
+		if( ANIMATION_TICKET_ARRAY.length === 0 ){
+			SystemTimer.remove( SUPER_USER_KEY, onEnterFrame );
+		};
+	};
+	function updateCss( _elm, _updateParameters, _targetAttributes, _numAttributes ){
+		if( _numAttributes > 0 ){
+			var _cssTexts = _elm.style.cssText.split( ';' ), _css,
+				_separate, _target, _value, _number, _unit,
+				i = _cssTexts.length, j;
+			for( ; i; ){
+				_css      = _cssTexts[ --i ];
+				_separate = _css.indexOf( ':' );
+				if( _separate >= 3 ){
+					_target = _css.substr( 0, _separate + 1 );
+					_value  = _css.substr( _separate + 1 );
+					/*
+					 * ie filter
+					 */
+					if( _target === FILTER ){
+						for( j = _numAttributes; j; ){
+							if( _targetAttributes[ --j ] === OPACITY ){
+								_cssTexts[ i ] = [
+									_target, ':',
+									_value.replace( REG_ALPHA, 'alpha(opacity=' + _updateParameters[ j ] * 100 + ')' )
+								].join( '');
+								break;
+							};
+						};
+					/*
+					 * other
+					 */
+					} else {
+						_number = '' + parseFloat( _value );
+						_unit   = _value.indexOf( _number );
+						_unit   = _unit > 0 ? _value.substr( _unit + _number.length ) : '';
+						for( j = _numAttributes; j; ){
+							if( _targetAttributes[ --j ] === _target ){
+								_cssTexts[ i ] = [ _target, ':', _updateParameters[ j ], _unit ].join( '' );
+								break;
+							};
+						};
+					};
+				};
+			};
+			_elm.style.cssText = _cssTexts.join( ';' );
+			return;	
+		};
+		/*
+		 * 一度に update する Attributes が少ない場合、cssText は使用しない.
+		 */
+	};
+	
+	var AnimationTaskClass = function( elm, currentParameters, offsetParameters, endParameters, targetAttributes, units, onComplete, onEnterFrame, numFrames ){
+		var l = targetAttributes.length;
+		this.elm          = elm;
+		this.onEnterFrame = function(){
+			var _updateCss = {}, i = l;
+			if( numFrames === 1 ){
+				for( ; i; ){
+					--i;
+					_updateCss[ targetAttributes[ i ] ] = endParameters[ i ];
+				};
+				updateCss( elm, currentParameters, targetAttributes, l );
+				onComplete !== null && onComplete();
+			} else {
+				for( ; i; ){
+					--i;
+					_updateCss[ targetAttributes[ i ] ] = currentParameters[ i ] = Math.floor( currentParameters[ i ] + offsetParameters[ i ] );
+				};
+				updateCss( elm, currentParameters, targetAttributes, l );
+				onEnterFrame !== null && onEnterFrame( _updateCss );
+			}
+			--numFrames;
+			return numFrames === 0;
+		};
+		this.destroy = function(){
+			elm = onComplete = onEnterFrame = null;
+		};
+	};
+	
+	var VisualEffectClass = function( elm ){
+		var isHtmlElement;
+		
+		function registerAnime( _cssObject, _onComplete, _onEnterFrame, _time ){
+			var _numFrames = Math.floor( _time / fpms);
+			startAnimation( elm, _cssObject, _onComplete, _onEnterFrame, _numFrames );
+		};
+		function startFadeIn(){
+			
+		};
+		function startFadeOut(){
+			
+		};
+		function update( _x, _y, _w, _h){
+			var _cssText = elm.style.cssText;
+			
+		};
+		
+		this.anime   = registerAnime;
+		this.fadeIn  = startFadeIn;
+		this.fadeOut = startFadeOut;
+		this.update  = update;
+	}
+	
+	return {
+		createVisualEffect: function( _elm){
+			return new VisualEffectClass( _elm);
+		},
+		isInstanceOfVisualEffect: function( _instance){
+			return _instance instanceof VisualEffectClass;
+		}
+	}
+})();
+
+
 /* --------------------------------------------
  * 
  */
@@ -4213,4 +4709,4 @@ var Finder = ( function(){
 	gOS.registerApplication = Application.register;
 	gOS.registerDriver      = File.registerDriver;
 	
-})( window );
+})( window, document );
diff --git a/public/assets/peta.apps.js b/public/assets/peta.apps.js
deleted file mode 100644
index 0fd69fdb..00000000
--- a/public/assets/peta.apps.js
+++ /dev/null
@@ -1,5088 +0,0 @@
-/*
- * pettanR peta.apps.js
- *   version 0.5.5
- *   
- * author:
- *   itozyun
- * licence:
- *   3-clause BSD
- */
-
-( function( pettanr, gOS, window, undefined ){
-
-/*
- * PettanR service driver.
- */
-	var MyAuthorID = 'current_author' in window ? current_author.id : ( pettanr.CONST.SERVER_SUPPORT === false ? 1 : -1 ),
-		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;
-			
-			function onLoadJson( _file, _json ){
-				var _access = FileAPI.getFileDataAccess( _file ),
-					_data = _access !== null ? _access.DATA : null,
-					l;
-				if( _data === null ){
-					onErrorJson( _file);
-					return;
-				}
-				_data.state = Const.FILE.STATE.OK;
-				
-				if( Type.isArray( _json ) === true ){
-					l = _json.length;
-					if( l === 0) return;
-					for( var i=0; i<l; ++i ){
-						buildFileData( _json[ i], _data);
-					}			
-				} else
-				if( _json.id ){
-					buildFileData( _json, _data );
-				}
-				_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 buildFileData( _data, _parent ){
-				var _array, i, l;
-				// Panel
-				if( _parent === FILE_DATA_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 );
-							}
-						}
-						_data.license = _bits;
-					}
-				} else {
-					alert( 'error' );
-				}
-				
-				_data.driver = Driver;
-				
-				// _array に _data を格納 または 上書き
-				if( typeof _data.id === 'number' && _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 ];
-							};
-						};
-						_data = __data; // このタイミングで参照が切れるので注意！！
-					} else {
-						_array[ _id ] = _data;
-					};
-				} else {
-					alert( 'error' );
-				};
-		
-				// 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.panels,
-						_panel;
-					if( _panels && 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.panels;
-					} else {
-						if( _data.json !== null ){
-							_data.json = true;
-						};
-						if( Type.isArray( _data.children ) === false ){
-							_data.children = [];
-						};
-					};
-					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 );
-					};
-					if( _parent === FILE_DATA_COMICS_ROOT ){
-						addChildData( FILE_DATA_LATEST_COMICS, _data);
-					};
-				} else
-				// Panel
-				if( _parent === FILE_DATA_PANELS_ROOT ){
-					_data.comic = getResource( COMIC_ARRAY, _data.comic_id );
-					_data.author = getResource( AUTHOR_ARRAY, _data.author_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.resource_picture_id );
-							};
-						};
-					};
-				} 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;
-						};
-					};
-				};
-				return _data;
-			}
-			function addChildData( _parent, _child ){
-				if( Type.isArray( _parent.children ) === false){
-					_parent.children = [];
-				};
-				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 ] = {};
-				};
-				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 ){
-					if( pettanr.CONST.SERVER_SUPPORT === false ){
-						_json = [ 'json\/comics_', _data.id, '.json' ].join( '' );
-					} else {
-						_json = [ pettanr.CONST.PETTANR_ROOT_PATH, 'comics\/', _data.id, '.json\/play\/' ].join( '' );
-					}
-				}
-				if( typeof _json === 'string' ){
-					FileAPI.getJson( _file, _json, onLoadJson, onErrorJson );
-					_data.state = Const.FILE.STATE.LOADING;
-					_data.json  = null;
-					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 [ _data.t, ':', _data.comic.title ].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( '' );
-				};
-				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.RESOURCE_PICTURE_PATH, 'thumbnail/', _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' };
-				}
-				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';
-				}
-				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.panels = _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.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.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 ];
-				}
-				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 ];
-				}
-				return [];
-			}
-		}),
-		Const = FileAPI.getConst(),
-		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()
-			}
-		),
-		FILE_DATA_SERVICE_ROOT = {
-			name:		'PettanR root',
-			type:		FILE_TYPE.FOLDER,
-			children:	[]
-		},
-		FILE_DATA_COMICS_ROOT = {
-			name:		'Comics',
-			type:		FILE_TYPE.FOLDER,
-			children:	[],
-			driver:		Driver,
-			json:		pettanr.CONST.URL_COMICS_JSON
-		},
-		FILE_DATA_PANELS_ROOT = {
-			name:		'Panels',
-			type:		FILE_TYPE.FOLDER,
-			children:	[],
-			driver:		Driver,
-			json:		pettanr.CONST.URL_PANELS_JSON
-		},
-		FILE_DATA_PICTURE_ROOT = {
-			name:		'Picutures',
-			type:		FILE_TYPE.FOLDER,
-			children:	[],
-			driver:		Driver,
-			json:		pettanr.CONST.URL_RESOURCE_PICTURES_JSON
-		},
-		FILE_DATA_MY_COMICS_ROOT = {
-			name:		'My Comics',
-			type:		FILE_TYPE.FOLDER,
-			children:	[],
-			driver:		Driver,
-			id:			MyAuthorID
-		},
-		FILE_DATA_LATEST_COMICS = {
-			name:		'Latest Comics',
-			type:		FILE_TYPE.FOLDER,
-			children:	[]
-		},
-		FILE_DATA_MY_PICTURES_ROOT = {
-			name:		'My Pictures',
-			type:		FILE_TYPE.FOLDER,
-			children:	[],
-			driver:		Driver,
-			json:		pettanr.CONST.URL_ORIGINAL_PICTURES_JSON,
-			id:			MyArtistID
-		},
-		FILE_DATA_AUTHOR_ROOT = {
-			name:		'Authors',
-			type:		FILE_TYPE.FOLDER,
-			children:	[]
-		},
-		FILE_DATA_ARTIST_ROOT = {
-			name:		'Artists',
-			type:		FILE_TYPE.FOLDER,
-			children:	[]
-		},
-		FILE_DATA_LISENCE_ROOT = {
-			name:		'Original Lisences',
-			type:		FILE_TYPE.FOLDER,
-			children:	[]
-		},
-		FILE_DATA_BALLOON_ROOT = {
-			name:		'Balloon templetes',
-			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_PICTURE_ROOT.children.push( FILE_DATA_MY_PICTURES_ROOT, FILE_DATA_ARTIST_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()
-			return _data !== null && _data.driver === Driver;
-		}
-		return false;
-	};
-
-var Cabinet = gOS.registerApplication( function(){
-	var self         = this,
-		finder       = null,
-		tree         = null,
-		headerH      = 0;
-
-	this.bgColor     = '#FFFFFF';
-	this.MIN_WIDTH   = 500;
-	this.MIN_HEIGHT  = 300;
-	this.onInit = function(){
-		self.rootElement.id = 'cabinet-root';
-		self.rootElement.innerHTML = [
-			'<div id="cabinet-header">Cabinet<div id="cabinet-close-button">x</div></div>',
-			'<div id="cabinet-container" class="finder-container"></div>'
-		].join( '' );
-		
-		self.fetchCSS( '/assets/peta.apps.css' );
-		
-		tree   = FileAPI.createTree( FILE_DATA_SERVICE_ROOT );
-		
-		delete self.onInit;
-	};
-	this.onOpen = function( _w, _h ){
-		headerH = Util.getElementSize( document.getElementById( 'cabinet-header' ) ).height;
-		
-		self.addMouseEventListener( document.getElementById( 'cabinet-close-button' ), 'click', Cabinet.shutdown );
-		
-		finder = self.createFinder( self.rootElement, tree );
-		self.onPaneResize( _w, _h );
-	};
-	this.onClose = function(){
-		finder.destroy();
-		tree.destroy();
-		finder = tree = null;
-	};
-	this.onPaneResize = function( _w, _h ){
-		finder.resize( _w, _h - headerH );
-	};
-}, false, true, 'Cabinet', 'cabinet', null, '#1C1C1C' );
-
-var Gallery = gOS.registerApplication( function(){
-	var self         = this,
-		finder       = null,
-		tree         = null,
-		headerH      = 0;
-
-	this.bgColor     = '#FFFFFF';
-	this.MIN_WIDTH   = 500;
-	this.MIN_HEIGHT  = 300;
-	this.onInit = function(){
-		self.rootElement.id        = 'gallery-root';
-		self.rootElement.innerHTML = [
-			'<div id="gallery-header">Cabinet<div id="gallery-close-button">x</div></div>',
-			'<div id="gallery-container" class="finder-container"></div>'
-		].join( '' );
-		
-		self.fetchCSS( '/assets/peta.apps.css' );
-		
-		tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
-		var	_root  = tree.getRootFile(),
-			_myPic = _root.getChildFileByIndex( 0 ),
-			_pic   = _root.getChildFileByIndex( 1 );
-		_myPic.getSeqentialFiles();
-		_pic.getSeqentialFiles();
-		_myPic.destroy();
-		_pic.destroy();
-	};
-	this.onOpen = function( _w, _h ){
-		headerH = Util.getElementSize( document.getElementById( 'gallery-header' ) ).height;
-		
-		self.addMouseEventListener( document.getElementById( 'gallery-close-button' ), 'click', Gallery.shutdown );
-		
-		finder = self.createFinder( self.rootElement, tree );
-		self.onPaneResize( _w, _h );
-	};
-	this.onClose = function(){
-		finder.destroy();
-		tree.destroy();
-		finder = tree = null;
-	};
-	this.onPaneResize = function( _w, _h ){
-		finder.resize( _w, _h - headerH );
-	};
-}, false, true, 'Gallery', 'gallery', null, '#01A31C' );
-
-var Backyard = gOS.registerApplication( function(){
-	var self         = this;
-	
-	this.bgColor     = '#FFFFFF';
-	this.MIN_WIDTH   = 500;
-	this.MIN_HEIGHT  = 300;
-	this.onInit = function(){
-	};
-	this.onOpen = function( _w, _h, _option ){
-	}
-	this.onClose = function(){
-	}
-	this.onPaneResize = function( _w, _h){
-	}
-}, false, false, 'Settings', 'settings', null, '#DDDDDD' );
-
-if( pettanr.DEBUG === true){
-	var Debug = gOS.registerApplication( function(){
-		var self = this,
-			elmDl,
-			data = ( function(){
-				var data = {
-					pettanR:       pettanr.version,
-					ua:            navigator.userAgent,
-					platform:      navigator.platform,
-					appVersion:    navigator.appVersion,
-					appCodeName:   navigator.appCodeName,
-					appName:       navigator.appName,
-					language:      navigator.browserLanguage || navigator.language,
-					ActiveX:       UA.ACTIVEX,
-					RenderingMode: UA.isStanderdMode === true ? 'Standerd' : 'Quirks'
-				};
-				if( UA.IE ){
-					data.version = UA.IE;
-					if( UA.ieVersion >= 8 ) data.RenderingVersion = UA.ieRenderingVersion;
-					data.browserType = UA.STANDALONE === true ? 'Standalone' : 'bundle';
-					if( UA.ieVersion < 9 ) {
-						data.vml = UA.VML;
-					} else {
-						data.svg = UA.SVG;
-					}
-				};
-				return data;
-			})();
-
-		this.bgColor     = '#FFFFFF';
-		this.MIN_WIDTH   = 500;
-		this.MIN_HEIGHT  = 300;
-		this.onInit = function(){
-			self.rootElement.id = 'debug-root';
-			self.rootElement.innerHTML = '<dl id="useragent" class="dl-table clearfix"></dl>';
-		};
-		this.onOpen = function( _w, _h, _option ){
-			elmDl = document.getElementById( 'useragent' );
-			var elmDt, elmDd;
-			for( var key in data ){
-				elmDt = document.createElement( 'dt' );
-				elmDt.innerHTML = key;
-				elmDd = document.createElement( 'dd' );
-				elmDd.innerHTML = '' + data[ key];
-				if( !data[ key ] ) elmDd.style.color = 'red';
-				elmDl.appendChild( elmDt );
-				elmDl.appendChild( elmDd );
-			}
-		}
-		this.onClose = function(){
-			
-		}
-		this.onPaneResize = function( _w, _h ){
-			
-		}
-	}, false, true, 'Debug', 'debug', null, '#01A31C' );
-}
-
-/* ----------------------------------------
- * Image Group Exproler
- *  - overlay
- */
-var PremiumSatge = gOS.registerApplication( function(){
-	var BASE_PATH      = pettanr.CONST.RESOURCE_PICTURE_PATH,
-		THUMB_PATH     = BASE_PATH, // + 'thumbnail/',
-		LIMIT_FILESIZE = 1024 * 10,
-		ICON_ARRAY     = [];
-		
-	var self             = this,
-		tree, rootFile,
-		winW, winH, wrapX,
-		elmContainer, elmIconOrigin, elmName, elmButton,
-		containerW, containerH,	
-		itemW, itemH, buttonW,
-		onUpdate        = null,
-		onUpdateData    = null,
-		artistID        = -1;
-
-	var ImageGroupIconClass = function( index, data ){
-		var elmIconWrap     = elmIconOrigin.cloneNode( true ),
-			elmIconTitle    = Util.getElementsByClassName( elmIconWrap, 'image-group-item-title' )[ 0 ],
-			SRC             = [ BASE_PATH, data.id, '.', data.ext ].join( ''),
-			LOW_SRC         = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext ].join( '') : null,
-			reversibleImage = null,
-			timer           = null,
-			onEnterFlag     = false,
-			instance        = this;
-		elmContainer.appendChild( elmIconWrap );
-		elmIconWrap.style.left = ( index * itemW ) + 'px';
-		elmIconTitle.appendChild( document.createTextNode( data.filesize + 'bytes' ) );
-		
-		function onImageLoad( url, _imgW, _imgH ){
-			data.width  = _imgW = _imgW || data.width  || 64;
-			data.height = _imgH = _imgH || data.height || 64;
-			elmIconTitle.firstChild.data = _imgW + 'x' + _imgH;
-			var zoom = 128 /( _imgW > _imgH ? _imgW : _imgH ),
-				MATH_FLOOR = Math.floor,
-				h = MATH_FLOOR( _imgH * zoom ),
-				w = MATH_FLOOR( _imgW * zoom );
-			reversibleImage.elm.style.cssText = [
-				'width:',  w, 'px;',
-				'height:', h, 'px;',
-				'margin:', MATH_FLOOR( itemH / 2 - h / 2 ), 'px ', MATH_FLOOR( itemW / 2 - w / 2 ), 'px 0'
-			].join('');
-			reversibleImage.resize( w, h );
-			self.addMouseEventListener( elmIconWrap, 'click', onClick );
-		};
-		
-		function onClick(){
-			onUpdateData = data;
-			PremiumSatge.shutdown();
-		};
-		
-		function asyncDraw(){
-			reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad );
-			elmIconWrap.appendChild( reversibleImage.elm );
-			onEnterFlag = true;
-			timer = null;
-		};
-		
-		this.onEnter = function( delay ){
-			self.addTimer( asyncDraw, delay, true );
-			delete instance.onEnter;
-		};
-		this.destroy = function(){
-			delete instance.destroy;
-			// timer && window.clearTimeout( timer );
-			self.removeTimer( asyncDraw );
-			self.removeMouseEventListener( elmIconWrap );
-			reversibleImage !== null && reversibleImage.destroy();
-			// Util.removeAllChildren( elmIconWrap );
-			// elmContainer.removeChild( elmIconWrap );
-			reversibleImage = elmIconWrap = elmIconTitle = data = timer = null;
-		};
-	};
-	
-	function onEnterShowImage(){
-		var l = ICON_ARRAY.length,
-			_start = -wrapX /itemW -1,
-			_end = _start + winW /itemW +1,
-			_icon;
-		for( var i=0, c = 0; i<l; ++i){
-			_icon = ICON_ARRAY[ i ];
-			if( _start < i && i < _end && _icon.onEnter ){
-				_icon.onEnter( c * 100 );
-				c++;
-			}
-		}
-		//onEnterInterval !== null && window.clearTimeout( onEnterInterval );
-		//onEnterInterval = null;
-		self.removeTimer( onEnterShowImage );
-	};
-	function clickClose(){
-		PremiumSatge.shutdown();
-	};
-	function onMouseWheel( e ){
-		if( winW < containerW ){
-			wrapX += e.wheelDelta / 2;
-			wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
-			elmContainer.style.left = wrapX + 'px';
-			
-			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
-			})[ 0 ],
-			_artistFile = rootFile.getChildFileByIndex( _index ),
-			_file;
-		if( _artistFile !== null ){
-			for(var i=0, l=_artistFile.getChildFileLength(); i<l; ++i ){
-				_file = _artistFile.getChildFileByIndex( 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( onUpdateData );
-		onUpdate = onUpdateData = null;
-		PremiumSatge.shutdown();
-	}
-	
-	
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-			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( '/assets/peta.apps.css' );
-			
-			tree      = FileAPI.createTree( FILE_DATA_ARTIST_ROOT );
-			rootFile  = tree.getRootFile();
-	};
-	this.onOpen = function( _windowW, _windowH, _ARTISTIDorFILE, _onUpdate ){
-		elmContainer  = document.getElementById( 'image-group-icon-container' );
-		containerH    = Util.getElementSize( elmContainer ).height;
-		
-		elmIconOrigin = ( function(){
-			var ret  = document.createElement( 'div' ),
-				data = document.createElement( 'div' );
-			ret.appendChild( data );
-			ret.className  = 'image-group-item';
-			data.className = 'image-group-item-title';
-			return ret;
-		})();
-
-		var size      = Util.getElementSize( elmIconOrigin );
-		itemW         = size.width;
-		itemH         = size.height;
-
-		elmName       = document.getElementById( 'image-group-name' );
-		elmButton     = document.getElementById( 'image-group-button' );
-		
-		buttonW       = Util.getElementSize( elmButton ).width;
-		
-		self.addMouseEventListener( elmContainer, 'mousewheel', onMouseWheel );
-		self.addMouseEventListener( elmButton, 'click', clickClose );
-		tree.addTreeEventListener( Const.TREE.EVENT.UPDATE, drawIcons );
-		
-		if( Driver.isPettanrFileInstance( _ARTISTIDorFILE ) === true ){
-			var _data = FileAPI.getFileData( _ARTISTIDorFILE );
-			if( _ARTISTIDorFILE.getType() === FILE_TYPE.ARTIST || FILE_DATA_MY_PICTURES_ROOT === _data ){
-				artistID = _data.id || -1;
-			}
-		} else
-		if( Type.isNumber( _ARTISTIDorFILE ) === true ){
-			artistID = _ARTISTIDorFILE;
-		}
-		
-		onUpdate = _onUpdate || null;
-		onUpdateData = null;
-		
-		drawIcons();
-		
-		wrapX = 0;
-		containerW = ICON_ARRAY.length * itemW;
-		
-		winW = _windowW;
-		winH = _windowH;
-		var w = winW > containerW ? winW : containerW,
-			h = _windowH > containerH ? containerH : _windowH,
-			MATH_FLOOR = Math.floor;
-
-		$( elmContainer ).css( {
-			width:		w,
-			height:		0,
-			left:		0,
-			top:		MATH_FLOOR( _windowH /2 )
-		}).stop().animate( {
-			height: 	h,
-			top:		MATH_FLOOR( _windowH /2 - h /2 )
-		}, onEnterShowImage );
-		
-		elmButton.style.cssText = [
-			'left:', MATH_FLOOR( _windowW /2 - buttonW /2 ), 'px;',
-			'top:',  MATH_FLOOR( _windowH /2 + containerH /2 +10 ), 'px'
-		].join('');
-	}
-	this.onPaneResize = function( _windowW, _windowH ){
-		var w = _windowW > containerW ? _windowW : containerW,
-			h = _windowH > containerH ? containerH : _windowH,
-			MATH_FLOOR = Math.floor,
-			offsetW = MATH_FLOOR( _windowW /2 -winW /2 );
-			
-		winW = _windowW;
-		winH = _windowH;
-		if( offsetW <= 0 ){ // smaller
-			$( elmContainer ).stop().css( {
-				left:				offsetW,
-				width:				w
-			}).animate( {
-				left:				0,
-				top:				MATH_FLOOR( _windowH /2 -h /2 )
-			});					
-		} else {
-			$( elmContainer ).stop().css( { // bigger
-				left:				0,
-				width:				w,
-				borderLeftWidth:	offsetW
-			}).animate( {
-				top:				MATH_FLOOR( _windowH /2 -h /2 ),
-				borderLeftWidth:	0
-			});
-		}
-		elmButton.style.cssText = [
-			'left:', MATH_FLOOR( _windowW /2 -buttonW /2 ), 'px;',
-			'top:',  MATH_FLOOR( _windowH /2 +containerH /2 + 10 ), 'px'
-		].join('');
-		onEnterShowImage();
-	}
-	this.onClose = function(){
-		if( tree === null ) return true;
-		$( elmContainer ).stop().animate( {
-				height:	0,
-				top:	Math.floor( winH /2 )
-			}, onFadeout );
-		// onEnterInterval !== null && window.clearTimeout( onEnterInterval );
-		// onEnterInterval = null;
-		self.removeTimer();
-		
-		tree.removeTreeEventListener( Const.TREE.EVENT.UPDATE, drawIcons );
-		tree.destroy();
-		tree = rootFile = null;
-		
-		return false;
-	}
-}, true, true, 'Premium Stage', 'premiumStage', null, '#C3325F' );
-
-
-/* ----------------------------------------
- * Text Editor
- *  - overlay
- */
-var TextEditor = gOS.registerApplication( function(){
-	var elmTextarea, elmButton,
-		textElement, onUpdate,
-		ID = 'textEditor',
-		panelX, panelY,
-		self = this;
-	
-	function clickOK(){
-		textElement && textElement.text( elmTextarea.value );
-		self.addAsyncCall( asyncCallback );
-	}
-	
-	function asyncCallback(){
-		onUpdate && onUpdate( textElement );
-		onUpdate = textElement = null;
-		TextEditor.shutdown();
-	}
-	
-
-	function textareaFitHeight(){
-		var rows = 0;
-		while( elmTextarea.offsetHeight < textElement.h ){
-			rows++;
-			elmTextarea.rows = rows;
-		}
-		if( rows > 1 ) elmTextarea.rows = --rows;
-	}
-	
-	/* grobal method */
-	
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		self.rootElement.id        = 'speach-editor-wrapper';
-		self.rootElement.innerHTML = '<textarea id="speach-editor"></textarea><div id="speach-edit-complete-button" class="button">OK</div>';
-	};
-	this.onOpen = function( _w, _h, _panelX, _panelY, _textElement, _onUpdate ){
-		elmTextarea = document.getElementById( 'speach-editor' );
-		elmButton   = document.getElementById( 'speach-edit-complete-button' );
-		
-		self.addKeyEventListener( 'keydown', new Function( 'return false' ), 69, false, true );
-		self.addMouseEventListener( elmButton, 'click', clickOK );
-		
-		panelX = _panelX;
-		panelY = _panelY;
-		textElement = _textElement;
-		onUpdate = _onUpdate || null;
-		
-		self.onPaneResize( _w, _h );
-		elmTextarea.value = _textElement.text()
-		elmTextarea.focus();
-		
-		/*
-		 * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。
-		 */
-		UA.isIE === true && UA.ieVersion <= 7 && self.addAsyncCall( textareaFitHeight );
-	};
-	this.onPaneResize = function( _w, _h ){
-		self.rootElement.style.cssText = [
-			'left:', textElement.x + panelX, 'px;',
-			'top:',  textElement.y + panelY, 'px;',
-			'width:', textElement.w, 'px;',
-			'height:', textElement.h, 'px;'
-		].join( '' );
-	};
-	this.onClose = function(){
-		self.removeKeyEventListener();
-		self.removeMouseEventListener( elmButton );
-		
-		elmTextarea = elmButton = onUpdate = textElement = self = null;
-	};
-}, true, false, 'Tetxt Editor', 'texteditor', null, '#DDDDDD' );
-
-
-var Reader = gOS.registerApplication( function(){
-	var windowW, windowH,
-		headerH,
-		consoleH,
-		panelMargin,
-		elmContainer, elmTitle, elmAuthor, elmBackButton, elmNextButton,
-		bindWorker    = null,
-		currentFile   = null,
-		comicData     = null,
-		currentPanel  = null,
-		currentIndex  = 0,
-		numPanel      = 0,
-		self          = this;
-
-	function onBackClick(){
-		currentIndex -= ( currentIndex > 0 ? 1 : 0 );
-		slide();
-		return false;
-	}
-	function onNextClick(){
-		currentIndex += ( currentIndex < numPanel - 1 ? 1 : 0 );
-		slide();
-		return false;
-	}
-	function slide(){
-		var elm    = elmContainer.childNodes[ currentIndex ],
-			h      = windowH - headerH - consoleH,
-			top    = headerH;
-		if( elm ){
-			top =  headerH - elm.offsetTop + Math.floor( ( h - elm.offsetHeight ) / 2 );
-		}
-		
-		$( elmContainer ).stop().animate( {
-			top:	top
-		});
-	}
-	function getCurrentTopPosition(){
-
-	}
-	function draw(){
-		var fileData, title, author;
-		
-		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;
-			}
-		} else {
-			
-		};
-
-		if( comicData !== null ){
-			elmTitle.data  = title;
-			elmAuthor.data = author;
-			bindWorker.json( comicData );
-			self.addAsyncCall( asyncResize );
-		};
-	}
-	function asyncResize(){
-		self.onPaneResize( windowW, windowH );
-	};
-	
-	/* grobal method */
-	
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		self.rootElement.id = 'comic-reader-wrapper';
-		self.rootElement.innerHTML = [
-			'<div id="comic-reader-panel-container"></div>',
-			'<div class="comic-reader-shadow" style="top:0;height:40px;"></div>',
-			'<div id="comic-reader-header">',
-				'<div id="comic-reader-header-content">',
-					'<span id="comic-reader-title">NO DATA...</span>',
-					'<span id="comic-reader-author">NO DATA...</span>',
-				'</div>',
-			'</div>',
-			'<div class="comic-reader-shadow" style="bottom:0;height:100px;"></div>',
-			'<div id="comic-reader-console">',
-				'<div id="comic-reader-button-centering">',
-					'<a href="#" id="comic-reader-back-button">▲</da>',
-					'<a href="#" id="comic-reader-forward-button">▼</a>',
-				'</div>',
-			'</div>'
-		].join( '' );
-		
-		self.fetchCSS( '/assets/peta.apps.css' );
-		
-	};
-	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' );
-		elmTitle      = document.getElementById( 'comic-reader-title' ).firstChild;
-		elmAuthor     = document.getElementById( 'comic-reader-author' ).firstChild;
-		elmBackButton = document.getElementById( 'comic-reader-back-button' );
-		elmNextButton = document.getElementById( 'comic-reader-forward-button' );
-
-		bindWorker = pettanr.bind.createBindWorker( elmContainer, null, false, false );
-		
-		self.addMouseEventListener( elmBackButton, 'click', onBackClick );
-		self.addMouseEventListener( elmNextButton, 'click', onNextClick );
-		
-		numPanel = currentIndex = 0;
-		
-		elmContainer.style.cssText = 'left:' + ( _w / 2 )  + 'px;' + 'top:' + _h + 'px;';
-		
-		windowW = _w;
-		windowH = _h;
-		if( FileAPI.isFileInstance( _file ) === true ){
-			currentFile = _file;
-			_file.addEventListener( Const.FILE.EVENT.GET_SEQENTIAL_FILES, draw );
-			_file.getSeqentialFiles();
-			draw();
-		};
-	};
-	this.onPaneResize = function( _windowW, _windowH ){
-		windowW = _windowW;
-		windowH = _windowH;
-		var panelH = elmContainer.offsetHeight,
-			panelW = elmContainer.offsetWidth,
-			h      = _windowH - headerH - consoleH;
-		$( elmContainer ).stop().animate(
-			{
-				left:	Math.floor( ( _windowW - panelW ) / 2 ),
-				top:	headerH + ( panelH < h ? Math.floor( ( h - panelH ) / 2 ) : 0 )
-			}
-		);
-	};
-	this.onClose = function(){
-		self.removeMouseEventListener( elmBackButton );
-		self.removeMouseEventListener( elmNextButton );
-		
-		bindWorker.destroy();
-		bindWorker = null;
-		
-		currentFile && currentFile.removeEventListener( Const.FILE.EVENT.GET_SEQENTIAL_FILES, draw );
-		currentFile = comicData = currentPanel = null;
-		
-		elmContainer = elmTitle = elmAuthor = elmBackButton = elmNextButton = null;
-	};
-}, true, true, 'Comic Reader', 'comicreader', null, '#01A31C' );
-
-
-var Editor = gOS.registerApplication( function(){
-
-	var PANEL_ELEMENT_TYPE_IMAGE = 0,
-		PANEL_ELEMENT_TYPE_TEXT  = 1,
-		MODULE_ARRAY             = [],
-		MOUSE_LISTENER_ARRAY     = [],
-		PANEL_ELEMENT_ARRAY      = [],
-		MIN_PANEL_HEIGHT         = 20,
-		MIN_ELEMENT_SIZE         = 19,
-		MOUSE_HIT_AREA           = 10,
-		elmMouseEventChatcher,
-		jqMouseEventChacher,
-		jqEditor,
-		windowW, windowH,
-		currentListener          = null,
-		currentCursor            = '',
-		self                     = this,
-		app                      = self,
-		option,
-		comicID                  = -1,
-		panelID                  = -1,
-		panelTimming             = -1,
-		phase                    = -1,
-		log;
-
-	var kill = function(){
-		var o = this, v;
-		for( var p in o ){
-			if( o.hasOwnProperty && !o.hasOwnProperty( p ) ) continue;
-			v = o[ p ];
-			delete o[ p ];
-		};
-	};
-	
-	var Module = {
-		abstractModule: {
-			init: function(){
-				
-			},
-			open: function(){
-				
-			},
-			close: function(){
-				
-			},
-			destroy: function(){
-				this.kill = kill;
-				this.kill();
-			}
-		},
-		register: function( _class ){
-			_class.prototype = TMP.abstractModule;
-			var ret = _class();
-			MODULE_ARRAY.push( ret );
-			return ret;
-		}
-	}
-/* ----------------------------------------
- * MENU BAR
- *  - mouseEventListener
- *  - controler
- * 
- * div
- *   div.title
- *   ul
- *     li
- *        a
- *          span
- *          kbd shortcut
- */
-	var MENU_BAR_CONTROL = ( function(){
-		var ELM_ITEM_CLASSNAME = 'menu-bar-item',
-			itemList           = [],
-			elmRoot, elmBar,
-			elmItemOrigin, elmSelectionOrigin,
-			barH, itemW, selectionW;
-
-		var MenubarOptionClass = function( callback, separateAfter ){
-			this.callback      = callback;
-			this.separateAfter = separateAfter;
-		};
-		MenubarOptionClass.prototype = {
-			elm: null,
-			elmTitle: null,
-			title: function( _title ){
-				if( Type.isString( _title ) === true ){
-					this.elmTitle.innerHTML = _title;
-				};
-				return this.elmTitle.innerHTML;
-			},
-			_visible: false,
-			visible: function( _visible ){
-				if( Type.isBoolean( _visible ) === true && this._visible !== _visible ){
-					this._visible = _visible;
-					this.elm.className = _visible === true ? '' : 'disabled';
-				};
-				return this._visible;
-			},
-			_init: function( elmParent, _title, _shortcut, _visible ){
-				this.elm      = elmSelectionOrigin.cloneNode( true );
-				this.elmTitle = this.elm.getElementsByTagName( 'span' )[ 0 ];
-				
-				elmParent.appendChild( this.elm );
-				
-				this.title( _title );
-				this.visible( !!_visible );
-				
-				var elmShortcut = this.elm.getElementsByTagName( 'kbd' )[ 0 ];
-				if( _shortcut ){
-					elmShortcut.innerHTML = _shortcut;
-				} else {
-					elmShortcut.parentNode.removeChild( elmShortcut );
-				};
-			},
-			_kill: kill
-		};
-
-		var MenuBarItemClass = function( title ){
-			this.elm          = elmItemOrigin.cloneNode( true );
-			elmBar.appendChild( this.elm );
-			this.elm.style.left = ( itemW * itemList.length ) + 'px';
-			
-			this.elm.getElementsByTagName( 'div' )[ 0 ].innerHTML = title;
-			
-			this.elmUl        = this.elm.getElementsByTagName( 'ul' )[ 0 ];
-			this.optionList   = [];
-			this.visible      = false;
-			
-			var optionList    = this.optionList;
-			
-			this.onClick = function( e ){
-				var i = Util.getChildIndex( this.parentNode, this );
-				i !== -1 && this.className !== 'disabled' && optionList[ i ].callback( i );
-				return false;
-			};
-			this._onClose = function(){
-				optionList = null;
-			};
-		};
-		MenuBarItemClass.prototype = {
-			show: function(){
-				if( this.visible === true ) return;
-				elmRoot.appendChild( this.elm );
-				this.elm.className = ELM_ITEM_CLASSNAME + '-focus';
-				this.onShow && app.addAsyncCall( this.onShow );
-				this.visible = true;
-			},
-			hide: function(){
-				if( this.visible === false ) return;
-				elmBar.appendChild( this.elm );
-				this.elm.className = ELM_ITEM_CLASSNAME;
-				this.onHide && app.addAsyncCall( this.onHide );
-				this.visible = false;
-			},
-			createOption: function( title, shortcut, callback, visible, separateBefore, separateAfter ){
-				var ret    = new MenubarOptionClass( callback, separateAfter ),
-					before = this.optionList[ this.optionList.length -1 ];
-				ret._init( this.elmUl, title, shortcut, visible );
-				
-				this.optionList.push( ret );
-				if( before && ( separateBefore === true || before.separateAfter === true )){
-					ret.elm.style.borderTop = '1px solid #ccc';
-				}
-				return ret;
-			},
-			_open: function(){
-				for( var lis = this.optionList, i = lis.length; i; ){
-					app.addMouseEventListener( lis[ --i ].elm, 'click', this.onClick );
-				};
-			},			
-			_close: function(){
-				this._onClose();
-				var o;
-				while( o = this.optionList.shift() ) o._kill();
-				this._kill = kill;
-				this._kill();
-			}
-		};
-		
-		function createMenubarItem( title ){
-			itemList.push( new MenuBarItemClass( title ) );
-			return itemList[ itemList.length - 1 ];
-		}
-		return {
-			init: function(){
-				elmRoot = app.rootElement;
-				elmBar  = document.getElementById( 'menu-bar' );
-				elmItemOrigin    = ( function(){
-					var ret = document.createElement( 'div' ),
-						div = document.createElement( 'div' ),
-						ul  = document.createElement( 'ul' );
-					ret.className = ELM_ITEM_CLASSNAME;
-					ret.appendChild( div );
-					ret.appendChild( ul );
-					return ret;
-				})();
-				elmSelectionOrigin = ( function(){
-					var ret  = document.createElement( 'li' ),
-						a    = document.createElement( 'a' ),
-						span = document.createElement( 'span' ),
-						key  = document.createElement( 'kbd' );
-					a.appendChild( span );
-					a.appendChild( key );
-					ret.appendChild( a );
-					a.href = '#';
-					return ret;
-				})();
-				barH       = Util.getElementSize( elmBar ).height;
-				MENU_BAR_CONTROL.h = barH;
-				itemW      = Util.getElementSize( elmItemOrigin ).width;
-				selectionW = Util.getElementSize( elmItemOrigin.getElementsByTagName( 'ul' )[ 0 ] ).width;
-				
-				MENU_BAR_CONTROL.QUIT   = createMenubarItem( 'Quit' );
-				MENU_BAR_CONTROL.EDIT   = createMenubarItem( 'Edit' );
-				MENU_BAR_CONTROL.WINDOW = createMenubarItem( 'Window' );
-				MENU_BAR_CONTROL.HELP   = Util.extend(
-					createMenubarItem( 'Help' ),
-					{
-						createAjaxSelection: function( callback ){
-							var elmLoading   = document.createElement( 'li' ),
-								that         = this;
-							this.elmUl.appendChild( elmLoading );
-							elmLoading.className    = 'loading';
-							elmLoading.style.height = '90px';							
-		
-							this.onShow = callback;
-							callback    = null;
-							
-							delete this.createAjaxSelection;
-							return function(){
-								that.elmUl.removeChild( elmLoading );
-								that._open();
-								delete that.onShow;
-								elmLoading = that = null;
-							};
-						},
-						onShow: null
-					}
-				);
-				
-				elmBar.style.top = ( -barH ) + 'px';
-				$( elmBar ).animate( { top: 0 });
-
-				delete MENU_BAR_CONTROL.init;
-			},
-			open: function(){
-				for( var i = itemList.length; i; ) itemList[ --i ]._open();
-				delete MENU_BAR_CONTROL.open;
-			},
-			close: function(){
-				var s;
-				while( s = itemList.shift() ) s._close();
-				itemList = elmRoot = elmBar = elmItemOrigin = elmSelectionOrigin = null;
-				MENU_BAR_CONTROL.kill = kill;
-				MENU_BAR_CONTROL.kill();
-			},
-			h: 0,
-			mousemove: function( _mouseX, _mouseY ){
-				if( barH >= _mouseY ) return true;
-				
-				for( var i = itemList.length; i; ) itemList[ --i ].hide();
-				return false;
-			},
-			mouseup: function( _mouseX, _mouseY ){
-				return false;
-			},
-			mousedown: function( _mouseX, _mouseY ){
-				var l = itemList.length;
-				if( barH < _mouseY || itemW * l < _mouseX ) return false;
-				for( ; l; ){
-					--l;
-					itemList[ l ][ l * itemW <= _mouseX && _mouseX < ( l + 1 ) * itemW ? 'show' : 'hide' ]();
-				};
-				return true;
-			},
-			busy: function( _busy ){
-				return false;
-			},
-			onWindowResize: function( _windowW, _windowH ){
-				
-			},
-			QUIT:   null,
-			EDIT:   null,
-			WINDOW: null,
-			HELP:   null
-		}
-	})();
-
-
-/* ----------------------------------------
- * HISTORY_CONTROL
- *  - controler
- */
-	var HISTORY_CONTROL = ( function() {
-		var	stackBack    = [],
-			stackForward = [],
-			menubarBack,
-			menubarForward;
-
-		function back(){
-			/*
-			 * currentを控えてstackForward.push(current)
-			 * stackBack.pop()を実行してcurrentに
-			 */
-			if( stackBack.length === 0 ) return;
-
-			var s = stackBack.pop();
-			s.fn( s.argBack );
-			menubarBack.visible( stackBack.length !== 0 );
-			SAVE_CONTROL.panelUpdated( stackBack.length !== 0 );
-			
-			stackForward.push( s );
-			menubarForward.visible( true );
-		};
-		function forward(){
-			if( stackForward.length === 0 ) return;
-			
-			var s = stackForward.pop();
-			s.fn( s.argForword );
-			menubarForward.visible( stackForward.length !== 0 );
-			
-			stackBack.push( s );
-			menubarBack.visible( true );
-			SAVE_CONTROL.panelUpdated( true );
-		};
-		var StackClass = function( _function, _argBack, _argForword, _destroy ){
-			this.fn         = _function;
-			this.argBack    = _argBack;
-			this.argForword = _argForword;
-			this.destroy    = _destroy;
-		};
-		StackClass.prototype.kill = function( _callDestroy ){
-			var	_argBack    = this.argBack,
-				_argForword = this.argForword,
-				v;
-			this._kill = kill;
-			this._kill();
-			
-			if( _callDestroy !== true ) return;
-			
-			if( Type.isArray( _argBack ) === true ){ // isArray
-				while( v = _argBack.shift() ){
-					_callDestroy === true && Type.isFunction( v.destroy ) === true && v.destroy();
-				};
-			};
-			if( Type.isArray( _argForword ) === true ){
-				while( v = _argForword.shift() ){
-					_callDestroy === true && Type.isFunction( v.destroy ) === true && v.destroy();
-				};
-			};
-		};
-		return {
-			init: function(){
-				app.addKeyEventListener( 'keydown', back,    90, false, true );	// ctrl + Z
-				app.addKeyEventListener( 'keydown', forward, 90, true,  true );	// ctrl + shift + Z
-				app.addKeyEventListener( 'keydown', forward, 89, false, true ); // ctrl + Y
-				
-				delete HISTORY_CONTROL.init;
-			},
-			open: function(){
-				menubarBack    = MENU_BAR_CONTROL.EDIT.createOption( 'back',    'ctrl + z', back, false );
-				menubarForward = MENU_BAR_CONTROL.EDIT.createOption( 'forward', 'ctrl + y', forward, false, false, true );				
-				
-				delete HISTORY_CONTROL.open;
-			},
-			close: function(){
-				var s;
-		       	while( s = stackBack.shift() )    s.kill( true );
-		       	while( s = stackForward.shift() ) s.kill( true );
-		       	menubarBack = menubarForward = stackBack = stackForward = null;
-			},
-		    saveState: function( _function, _argBack, _argForword, _destroy ){
-		        stackBack.push( new StackClass( _function, _argBack, _argForword, _destroy ));
-		        menubarBack.visible( true );
-				SAVE_CONTROL.panelUpdated( true );
-				
-				var s;
-		       	while( s = stackForward.shift() ) s.kill( s.destroy );
-				menubarForward.visible( false );
-		    }		
-		}
-	})();
-
-/* ----------------------------------------
- * SAVE_CONTROL
- *  - controler
- */
-	var SAVE_CONTROL = ( function(){
-		var save, saveQuit, eXport, quit,
-			updated  = false;
-		
-		function quit(){
-			Editor.shutdown();
-		}
-		function onExport(){
-			OutputConsole.boot(
-				comicID, panelID, panelTimming,
-				PANEL_CONTROL.w, PANEL_CONTROL.h,
-				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 );
-				eXport   = MENU_BAR_CONTROL.QUIT.createOption( 'export', null, onExport, true, false, true );
-				quit     = MENU_BAR_CONTROL.QUIT.createOption( 'quit', null, quit, true, true );				
-				
-				delete SAVE_CONTROL.open;
-			},
-			close: function(){
-				save = saveQuit = eXport = quit = null;
-				SAVE_CONTROL.kill = kill;
-				SAVE_CONTROL.kill();
-			},
-			quit: quit,
-			panelUpdated: function( _updated ){
-				if( Type.isBoolean( _updated ) === true ){
-					save.visible( _updated );
-					saveQuit.visible( _updated );
-					updated = _updated;
-				}
-				return updated;
-			},
-			save: function(){
-				
-			}
-		}
-	})();
-
-/* ----------------------------------------
- * WINDOWS_CONTROL
- *  - contloler
- *  - mouseEventListener
- */	
-	var WINDOWS_CONTROL = ( function(){
-		/*
-		 *  表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。
-		 */
-		var DEFAULT_MIN_WINDOW_WIDTH  = 200,
-			DEFAULT_MIN_WINDOW_HEIGHT = 200,
-			WINDOW_ARRAY              = [],
-			WINDOW_BODY_BODER_SIZE    = 1,
-			currentWindowIndex        = -1,
-			currentWindow,
-			elmRoot,
-			elmWindowOrigin,
-			closeButtonWidth;
-			
-		var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH ){
-			var menubarOption,
-				elmHeader, elmFooter = null,
-				elmBody, elmBodyStyle,
-				startX, startY, startW, startH,
-				offsetX, offsetY,
-				headerH, bodyH, footerH = 0,
-				isDragging = false,
-				isResizing = false,
-				bodyIsTachable = false,
-				self = this;
-
-			function update( _x, _y, _w, _h ){
-				_x = _x !== undefined ? _x : x;
-				_y = _y !== undefined ? _y : y;
-				_y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;
-				_w = _w !== undefined ? _w : w;
-				_h = _h !== undefined ? _h : h;
-				self.elm.style.cssText = [
-					'left:',   _x, 'px;',
-					'top:',    _y, 'px;',
-					'width:',  _w, 'px;',
-					'height:', _h, 'px;'
-				].join( '' );
-				bodyH = _h - headerH - footerH;
-				elmBodyStyle.height = bodyH + 'px';
-				( w !== _w || h !== _h) && self.onResize && self.onResize( _w, bodyH );
-				x = _x;
-				y = _y;
-				w = _w;
-				h = _h;
-			};
-			function bodyBackOrForward( isBack ){
-				if( !self ) return;
-				if( bodyIsTachable === !isBack ) return;
-				elmBodyStyle.position =	isBack === true ? 'relative' : 'absolute';
-				elmBodyStyle.left =		isBack === true ? 0  : x +'px';
-				elmBodyStyle.top =		isBack === true ? 0  : y + headerH + 'px';
-				elmBodyStyle.width =	isBack === true ? '' : ( w - WINDOW_BODY_BODER_SIZE * 2 ) + 'px';
-				bodyIsTachable === isBack && isBack === true ? elmHeader.parentNode.insertBefore( elmBody, elmHeader.nextSibling ) : app.rootElement.appendChild( elmBody );
-				bodyIsTachable = !isBack;
-			};
-
-			this.init = function(){
-				self.elm      = elmWindowOrigin.cloneNode( true );
-				menubarOption = MENU_BAR_CONTROL.WINDOW.createOption( 
-					( visible !== true ? 'show ' : 'hide ' ) + title,
-					null, function(){ visible === true ? self.close() : self.open(); }, true
-				);
-				elmHeader     = Util.getElementsByClassName( self.elm, 'window-header' )[ 0 ];
-				elmHeader.innerHTML = title;
-				headerH       = Util.getElementSize( elmHeader ).height;
-				elmBody       = Util.getElementsByClassName( self.elm, 'window-body' )[ 0 ];
-				elmBodyStyle  = elmBody.style;
-				
-				self.onInit && self.onInit();
-				delete self.init;
-			};
-			this.x = function(){ return x;};
-			this.y = function(){ return y;};
-			this.w = function(){ return w;};
-			this.h = function(){ return h;};
-			this.title = function( _title ){
-				if( Type.isString( _title ) === true ){
-					jqHeader.html( _title );
-					title = _title;
-				}
-				return title;
-			};
-			this.visible   = visible;
-			this.firstOpen = function(){
-				var elmReplace = Util.getElementsByClassName( self.elm, 'window-body-insert-position' )[ 0 ];
-
-				if( bodyTempleteID ){
-					elmReplace.parentNode.replaceChild( document.getElementById( bodyTempleteID ), elmReplace );
-				} else {
-					elmReplace.parentNode.removeChild( elmReplace );
-				};
-				
-				if( CLOSE_BUTTON_ENABLED !== true ){
-					var elmClose = Util.getElementsByClassName( self.elm, 'window-close-button' )[ 0 ];
-					elmClose.parentNode.removeChild( elmClose );
-				};				
-				
-				
-				var elmFooter = Util.getElementsByClassName( self.elm, 'window-footer' )[ 0 ];
-				if( RESIZE_BUTTON_ENABLED === true ){
-					footerH = Util.getElementSize( elmFooter ).height;
-				} else {
-					elmFooter.parentNode.removeChild( elmFooter );
-				}
-				self.onFirstOpen && self.onFirstOpen( w, h - headerH - footerH );
-				
-				update( x, y, w, h );
-				
-				delete self.firstOpen;
-			};
-			this.open = function(){
-				if( visible === true )return;
-				self.visible = visible = true;
-				openWindow( self );
-				menubarOption.title( 'hide ' + title );
-				
-				for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i ){
-					if( WINDOW_ARRAY[ i ] === self ){
-						WINDOW_ARRAY.splice( i, 1 );
-						WINDOW_ARRAY.unshift( self );
-						currentWindow      = null;
-						currentWindowIndex = -1;
-					};
-				};
-			};
-			this.onFadeIn = function(){
-				self.firstOpen && self.firstOpen();
-				self.onOpen && self.onOpen( w, bodyH );
-			};
-			this.onFadeOut = function(){
-				self.elm.parentNode.removeChild( self.elm );
-				self.onClose &&  app.addAsyncCall( self.onClose );
-			};
-			this.close = function(){
-				if( visible === false) return;
-				self.visible = visible = false;
-				$( self.elm ).fadeOut( self.onFadeOut );
-				menubarOption.title( 'show ' + title );
-			};
-			this.bodyBackOrForward = bodyBackOrForward;
-			this.mousedown = function( _mouseX, _mouseY ){
-				if( RESIZE_BUTTON_ENABLED === true && x + w -20 <= _mouseX && _mouseX < x + w && y + headerH + bodyH < _mouseY && _mouseY <= y + h ){
-					bodyBackOrForward( true);
-					isResizing = true;
-					startX = x;
-					startY = y;
-					startW = w;
-					startH = h;
-					offsetX = _mouseX;
-					offsetY = _mouseY;
-					updateMouseCursor( 'nw-resize');
-					return;
-				}
-				
-				if( x > _mouseX || y > _mouseY || x + w < _mouseX || y + headerH < _mouseY ) return;
-				if( CLOSE_BUTTON_ENABLED === true && x + w - closeButtonWidth < _mouseX){
-					self.close();
-					return;
-				}
-				
-				isDragging = true;
-				updateMouseCursor( 'move');				
-				startX = x;
-				startY = y;
-				startW = w;
-				startH = h;
-				offsetX = _mouseX;
-				offsetY = _mouseY;
-			};
-			this.mouseup = function( _mouseX, _mouseY ){
-				isDragging = isResizing = false;
-				updateMouseCursor( '');
-			};
-			this.mousemove = function( _mouseX, _mouseY ){
-				var _updateX = _mouseX - offsetX,
-					_updateY = _mouseY - offsetY;
-				
-				if( isResizing === true){
-					var _w = startW +_updateX,
-						_h = startH +_updateY;
-					update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h );
-					return;
-				} else
-				if( isDragging === true) {
-					update( startX + _updateX, startY + _updateY);
-					return;
-				} else
-				if( x > _mouseX || x + w < _mouseX ) return;
-
-				( y <= _mouseY && y +headerH >= _mouseY ) ?
-					updateMouseCursor( 'pointer') :	// hit to header
-					updateMouseCursor( '');
-				bodyBackOrForward( y + headerH > _mouseY || y + headerH + bodyH < _mouseY);
-			};
-			this.onMouseOut = function( _mouseX, _mouseY ){
-				bodyIsTachable === true && bodyBackOrForward( true );
-				isDragging = false;
-				updateMouseCursor( '' );
-			};
-			this.busy = function(){
-				return isDragging === true || isResizing === true;
-			};
-		};
-		
-		function getCurrentIndex( _mouseX, _mouseY ){
-			if( currentWindow && currentWindow.busy() === true ) return currentWindowIndex;
-			var l = WINDOW_ARRAY.length,
-				_currentWindow = null,
-				_win, _x, _y;
-			currentWindowIndex = -1;
-			for( var i=0; i<l; i++){
-				_win = WINDOW_ARRAY[ i];
-				if( _win.visible !== true ) continue;
-				_x = _win.x();
-				_y = _win.y();
-				if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){
-					_currentWindow = _win;
-					currentWindowIndex = i;
-					break;
-				}
-			}
-			currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);
-			currentWindow = _currentWindow;
-			return currentWindowIndex;
-		}
-		function openWindow( _window ){
-			if( _window.visible !== true ) return;
-			elmRoot.appendChild( _window.elm );// appendした後に fadeIn() しないと ie で filterが適用されない．
-			$( _window.elm ).fadeIn( _window.onFadeIn );
-			return;
-		}
-		
-		return {
-			init: function(){
-				elmRoot          = document.getElementById( 'window-container' );
-				elmWindowOrigin  = app.fetchHTMLElement( 'windowTemplete' );
-				closeButtonWidth = Util.getElementSize( Util.getElementsByClassName( elmWindowOrigin, 'window-close-button' )[ 0 ] ).width;
-				
-				delete WINDOWS_CONTROL.init;
-			},
-			open: function(){
-				for( var i = WINDOW_ARRAY.length, _window; i; ){
-					_window = WINDOW_ARRAY[ --i ];
-					_window.init && _window.init();
-					_window.visible === true && openWindow( _window );
-				};
-				
-				delete WINDOWS_CONTROL.open;
-			},
-			close: function(){
-			},
-			mousemove: function( _mouseX, _mouseY ){
-				var _index = getCurrentIndex( _mouseX, _mouseY );
-				if( _index === 0 ){
-					currentWindow.mousemove( _mouseX, _mouseY );
-					return true;
-				} else
-				if( _index > 0 ){ // 先頭のクリックでない場合
-				// Array を前に
-					WINDOW_ARRAY.splice( currentWindowIndex, 1 );
-					WINDOW_ARRAY.unshift( currentWindow );
-				// Domを最後に
-					elmRoot.appendChild( currentWindow.elm );
-					currentWindowIndex = 0;
-					return true;
-				}
-				return false;
-			},
-			mouseup: function( _mouseX, _mouseY ){
-				if( getCurrentIndex( _mouseX, _mouseY) === 0){
-					currentWindow.mouseup( _mouseX, _mouseY);
-					return true;
-				}
-				return false;
-			},
-			mousedown: function( _mouseX, _mouseY ){
-				if( getCurrentIndex( _mouseX, _mouseY) === 0){
-					currentWindow.mousedown( _mouseX, _mouseY);
-					return true;
-				}
-				return false;
-			},
-			busy: function(){
-				return currentWindow !== null;
-			},
-			onWindowResize: function( _windowW, _windowH ){
-				/*
-				 * 画面外に出るwindowの移動
-				 */
-			},
-			createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ){
-				opt_visible = opt_visible !== false;
-				opt_closeButtonEnabled = opt_closeButtonEnabled === true;
-				opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;
-				opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH ) ? w : DEFAULT_MIN_WINDOW_WIDTH;
-				opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT ) ? h : DEFAULT_MIN_WINDOW_HEIGHT;
-				
-				var _window = new WindowClass( bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH );
-				for( var key in EXTENDS ){
-					_window[ key ] = EXTENDS[ key ];
-				}
-				WINDOW_ARRAY.unshift( _window );
-				if( Type.isUndefined( WINDOWS_CONTROL.init ) === true ){
-					_window.init();
-					openWindow( _window );
-				}
-				return _window;
-			}
-		}
-	})();
-
-/* ----------------------------------------
- * TOOL_BOX_WINDOW
- * - window
- */
-	var TOOL_BOX_WINDOW = ( function(){
-			
-		app.addKeyEventListener( 'keydown', addImage,   73, false, true );
-		app.addKeyEventListener( 'keydown', addText,    84, false, true );
-		app.addKeyEventListener( 'keydown', switchGrid, 71, false, true );
-
-		function addImage(){
-			IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);
-			TOOL_BOX_WINDOW.bodyBackOrForward( true );
-		};
-		function addText(){
-			app.addAsyncCall( PANEL_ELEMENT_CONTROL.createTextElement );
-		};
-		function switchGrid(){
-			app.addAsyncCall( GRID_CONTROL.update );
-		};
-		function popupHelp(){
-			TOOL_BOX_WINDOW.bodyBackOrForward( true );
-			app.addAsyncCall( HELP_DOCUMENTS_WINDOW.open );
-		};
-		function editBG( e ){
-			TOOL_BOX_WINDOW.bodyBackOrForward( true );
-			app.addAsyncCall( INFOMATION_WINDOW.open );
-		};
-		
-		return WINDOWS_CONTROL.createWindow(
-			{
-				onInit: function(){
-					MENU_BAR_CONTROL.EDIT.createOption( 'Add Image', 'ctrl + I', addImage, true, true, false);
-					MENU_BAR_CONTROL.EDIT.createOption( 'Add Text', 'ctrl + T',  addText, true, false, true);
-					MENU_BAR_CONTROL.EDIT.createOption( 'show Grid', 'ctrl + G', switchGrid, true, true, true);
-					
-					delete TOOL_BOX_WINDOW.onInit;
-				},
-				onFirstOpen: function(){
-					app.addMouseEventListener( document.getElementById( 'toolbox-add-image-button'), 'click', addImage );
-					app.addMouseEventListener( document.getElementById( 'toolbox-add-text-button'), 'click', addText );
-					app.addMouseEventListener( document.getElementById( 'toolbox-edit-bg-button'), 'click', editBG );
-					app.addMouseEventListener( document.getElementById( 'toolbox-switch-grid'), 'click', switchGrid );
-					app.addMouseEventListener( document.getElementById( 'toolbox-popup-help-button'), 'click', popupHelp );
-					
-					// postButton = $( '#toolbox-post-button');
-					
-					delete TOOL_BOX_WINDOW.onFirstOpen;
-				}
-			},
-			'toolbox-window', 'Tool box', 0, 215, 110, 290, true
-		);
-	})();
-	
-	
-/* ----------------------------------------
- * IMAGE_EXPROLER
- *  - window
- */
-	var IMAGE_EXPLORER_WINDOW = ( function(){
-		var tree, finder;
-		
-		function onFileSelect( _file ){
-			// 他の image ファイルも許可する？
-			if( Driver.isPettanrFileInstance( _file ) === true ){
-				if( _file.getType() === FILE_TYPE.PICTURE ){
-					PANEL_ELEMENT_CONTROL.onImageSelect( FileAPI.getFileData( _file ) );
-				}
-			}
-		}
-		
-		return WINDOWS_CONTROL.createWindow(
-			{
-				onInit: function(){
-					delete IMAGE_EXPLORER_WINDOW.onInit;
-				},
-				onFirstOpen: function( _w, _h ){
-					tree = FileAPI.createTree( FILE_DATA_PICTURE_ROOT );
-					var	_root  = tree.getRootFile(),
-						_myPic = _root.getChildFileByIndex( 0 ),
-						_pic   = _root.getChildFileByIndex( 1 );
-					_myPic.getSeqentialFiles();
-					_pic.getSeqentialFiles();
-					_myPic.destroy();
-					_pic.destroy();	
-					
-					finder = app.createFinder(
-						document.getElementById( 'image-exproler-container' ),
-						tree,
-						null, null,
-						onFileSelect,
-						PANEL_ELEMENT_CONTROL.onImageSelect
-					);
-					
-					delete IMAGE_EXPLORER_WINDOW.onFirstOpen;
-				},
-				onOpen: function( _w, _h ){
-					finder.resize( _w, _h );
-				},
-				onResize: function( _w, _h ){
-					finder.resize( _w, _h );
-				}
-			},
-			'image-exproler', 'Album', 0, 215, 600, 350, false, true, true, 300, 300
-		);
-	})();
-	
-	
-/* ----------------------------------------
- * INFOMATION_WINDOW
- *  - window
- */			
-	var INFOMATION_WINDOW = ( function(){
-		var FADE_EFFECT_ENABLED = true, //UA.isIE === false || UA.ieVersion >= 8,
-			FADE_IN_EFFECT      = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
-			FADE_OUT_EFFECT     = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
-			backgroundInfomationElm,
-			jqPanelElementInformation,
-			ui, inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
-			inputPercentW, inputPercentH,
-			currentPanelElement = null,
-			currentElementType = -1,
-			currentLock = false;
-
-		return WINDOWS_CONTROL.createWindow(
-			{
-				onFirstOpen: function( _w, _h ){
-					backgroundInfomationElm = $( '#panel-background-information');
-					
-					jqPanelElementInformation = $( '#comic-element-infomation').hide().css( {
-						height:		_h
-					});
-					ui               = app.createUIGroup();
-					inputX           = ui.createInputText( document.getElementById( 'comic-element-x' ), null );
-					inputY           = ui.createInputText( document.getElementById( 'comic-element-y' ), null );
-					inputZ           = ui.createInputText( document.getElementById( 'comic-element-z' ), null );
-					inputA           = ui.createInputText( document.getElementById( 'comic-element-a' ), null );
-					inputW           = ui.createInputText( document.getElementById( 'comic-element-w' ), null );
-					inputH           = ui.createInputText( document.getElementById( 'comic-element-h' ), null );
-					inputPercentW    = ui.createInputText( document.getElementById( 'comic-element-w-percent' ), null );
-					inputPercentH    = ui.createInputText( document.getElementById( 'comic-element-h-percent' ), null );
-					inputAspectRatio = $( '#comic-element-keep-aspect' );
-					delete INFOMATION_WINDOW.onFirstOpen;
-				},
-				onResize: function(  _w, _h ){
-					jqPanelElementInformation.css( {
-						height: _h
-					});
-				},
-				update: function( currentElement ){
-					
-					if( currentLock === true && currentElement === null) return;
-					
-					var _elementType = currentElement === null ? -1 : currentElement.type,
-						x = currentElement !== null ? currentElement.x : 0,
-						y = currentElement !== null ? currentElement.y : 0,
-						z = currentElement !== null ? currentElement.z : 0,
-						a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle() ) : 0,
-						w = currentElement !== null ? currentElement.w : 0,
-						h = currentElement !== null ? currentElement.h : 0,
-						actualW = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
-						actualH = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
-						wPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100 ) : 0,
-						hPercent = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100 ) : 0,
-						keepAspect = currentElement !== null && currentElement.keepAspect === true;
-					
-					if( currentElementType !== _elementType ){
-						if( _elementType !== -1 ){
-							if( _elementType === 1 ){
-								inputA.visible( true );
-								inputPercentW.visible( false );
-								inputPercentH.visible( false );
-								inputAspectRatio.hide();
-							} else {
-								inputA.visible( false );
-								inputPercentW.visible( true );
-								inputPercentH.visible( true );
-								inputAspectRatio.show();
-							}
-							currentElementType === -1 && jqPanelElementInformation.stop().css( {
-								filter:		'',
-								opacity:	''
-							})[ FADE_IN_EFFECT ]();
-						} else {
-							currentElementType !== -1 && jqPanelElementInformation.stop().css({
-								filter:		'',
-								opacity:	''
-							})[ FADE_OUT_EFFECT ]();
-						}
-						currentElementType = _elementType;
-					}
-					if( currentElementType !== -1){
-						inputX.value( x );
-						inputY.value( y );
-						inputZ.value( z );
-						_elementType === 1 && inputA.value( a );
-						inputW.value( w );
-						inputH.value( h );
-						_elementType === 0 && inputPercentW.value( wPercent );
-						_elementType === 0 && inputPercentH.value( hPercent );
-					} else {
-						
-					}
-				},
-				lock: function( _currentLock ){
-					currentLock = !!_currentLock;
-					INFOMATION_WINDOW.bodyBackOrForward( !currentLock );
-				}
-			},
-			'infomation-window', 'Infomation', 0, 30, 200, 180, true
-		);
-	})();
-
-/* ----------------------------------------
- * HELP_WINDOW
- *  - window
- */
-	var HELP_DOCUMENTS_WINDOW = ( function(){
-		var visible          = true,
-			jqAjaxContents,
-			jqNaviItems,
-			jqPages,
-			currentPageIndex = 0,
-			numPage          = 0,
-			help             = null,
-			onLoadFunction   = null;
-
-		function onAjaxStart( _pageIndex ){
-			currentPageIndex = _pageIndex || currentPageIndex;
-			if( onHelpLoad !== null ){
-				$.ajax({
-					url:		'help/jp.xml',
-					dataType:	'xml',
-					success:	onHelpLoad
-				});
-				onHelpLoad = null;
-			}
-			onAjaxStart = new Function;
-		}
-		var onHelpLoad = function( _xml ){
-			var jqXML          = $( _xml ),
-				helpTitle      = jqXML.find( 'pages' ).eq( 0 ).attr( 'title' ),
-				elmNavi        = document.createElement( 'div' ),
-				elmItemOrigin  = document.createElement( 'a' ),
-				elmPages       = document.createElement( 'div' ),
-				elmPageOrigin  = document.createElement( 'div' ),
-				elmTitleOrigin = document.createElement( 'h2' ),
-				elmPage;
-			elmNavi.className       = 'sidenavi';
-			elmItemOrigin.className = 'sidenavi-item';
-			elmItemOrigin.href      = '#';
-			elmPages.className      = 'page-contents';
-			elmPageOrigin.className = 'page-content main';
-			elmPageOrigin.appendChild( elmTitleOrigin);
-			
-			jqXML.find( 'page' ).each( function(){
-				var xmlPage = $( this ),
-					title = xmlPage.attr( 'title' ),
-					content = xmlPage.text();
-				
-				elmItemOrigin.innerHTML = title;
-				elmNavi.appendChild( elmItemOrigin.cloneNode( true ));
-				
-				elmTitleOrigin.innerHTML = title;
-				
-				elmPage = elmPageOrigin.cloneNode( true );
-				elmPage.innerHTML = content;
-				
-				Util.cleanElement( elmPage);
-				
-				if( elmPage.childNodes.length > 0 ){
-					elmPage.insertBefore( elmTitleOrigin.cloneNode( true ), elmPage.childNodes[0]);
-				} else {
-					elmPage.appendChild( elmTitleOrigin.cloneNode( true ));
-				}
-				elmPages.appendChild( elmPage );
-				
-				help.createOption( title, null, onSelectionClick, true );
-				++numPage;
-			});
-			onLoadFunction();
-			onLoadFunction = null;
-			
-			jqAjaxContents.removeClass( 'loading' ).append( elmNavi, elmPages );
-			
-			jqNaviItems = jqAjaxContents.find( 'a.' + elmItemOrigin.className ).click( onNaviClick );
-			jqPages     = jqAjaxContents.find( '.page-content' );
-			jqPages.find( 'a' ).click( onInnerLinkClick );
-			
-			app.addAsyncCall( jumpPage );
-		}
-		function onSelectionClick( _pageIndex ){
-			HELP_DOCUMENTS_WINDOW.open();
-			jumpPage( _pageIndex );
-		}
-		function jumpPage( _index ){
-			if( Type.isNumber( _index ) === true && 0 <= _index && _index < numPage && currentPageIndex !== _index ){
-				currentPageIndex = _index;
-			}
-			jqNaviItems.removeClass( 'current' ).eq( currentPageIndex).addClass( 'current' );
-			jqPages.hide().eq( currentPageIndex ).show();
-		}
-		function onNaviClick( e ){
-			// this は <a>
-			jumpPage( Util.getChildIndex( this.parentNode, this ));
-			return false;
-		}
-		function onInnerLinkClick( e ){
-			var jump = ( this.href || '' ).split( '#jump' ),
-				n = jump[ 1 ];
-			if( !n ) return;
-			jumpPage( '' + parseFloat( n ) === n ? parseFloat( n ) : -1 );
-			return false;				
-		}
-		return WINDOWS_CONTROL.createWindow(
-			{
-				onInit: function(){
-					help           = MENU_BAR_CONTROL.HELP;
-					onLoadFunction = help.createAjaxSelection( onAjaxStart );
-					jqAjaxContents = $( HELP_DOCUMENTS_WINDOW.elm ).find( '.window-body' ).addClass( 'loading' ).css( { overflow: 'auto' } );
-					delete HELP_DOCUMENTS_WINDOW.onInit;
-				},
-				onFirstOpen: function( _w, _h ){
-					jqAjaxContents.css( { height: _h } );
-					onAjaxStart();
-					delete HELP_DOCUMENTS_WINDOW.onFirstOpen;
-				},
-				onResize: function( _w, _h ){
-					jqAjaxContents && jqAjaxContents.css( { height: _h });
-				}
-			},
-			null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300
-		);
-	})();
-
-/* ----------------------------------------
- * GRID_CONTROL
- *  - control
- *  - panelResizeListener
- */
-	var GRID_CONTROL = ( function(){
-		var elmGrid,
-			urlBG = "url('images/grid.gif')",
-			visible = false;
-
-		return {
-			init: function(){
-				elmGrid = document.getElementById( 'grid' );
-				delete GRID_CONTROL.init;
-			},
-			open: function(){
-				delete GRID_CONTROL.open;
-			},
-			close: function(){
-				
-			},
-			onPanelResize: function( _panelX, _panelY ){
-				elmGrid.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px' ].join( '' );
-				elmGrid.style.height = windowH +'px';
-			},
-			enabled: function(){
-				return visible;
-			},
-			update: function(){
-				$( elmGrid ).stop().css( {
-					opacity:	'',
-					fliter:		''
-				})[ visible === true ? 'fadeOut' : 'fadeIn' ]();
-				
-				visible = !visible;
-				
-				if( visible === true && urlBG !== null ){
-					elmGrid.style.backgroundImage = urlBG;
-					urlBG = null;
-				}
-				return visible;
-			}
-		}
-	})();
-		
-/* ----------------------------------------
- * WHITE_GLASS_CONTROL
- *  - panelResizeListener
- */
-	var WHITE_GLASS_CONTROL = ( function(){
-		var styleTop, styleLeft, styleRight, styleBottom;
-
-		return {
-			init: function(){
-				styleTop    = document.getElementById( 'whiteGlass-top' ).style;
-				styleLeft   = document.getElementById( 'whiteGlass-left' ).style;
-				styleRight  = document.getElementById( 'whiteGlass-right' ).style;
-				styleBottom = document.getElementById( 'whiteGlass-bottom' ).style;
-				delete WHITE_GLASS_CONTROL.init;
-			},
-			onPanelResize: function( _panelX, _panelY, _panelW, _panelH ){
-				var	_w             = _panelW,
-					_h             = _panelH,
-					marginTop      = _panelY,
-					marginBottom   = windowH -_h -marginTop,
-					marginX        = _panelX,
-					rightWidth     = windowW -_w -marginX;
-				
-				styleTop.height    = ( marginTop < 0 ? 0 : marginTop ) + 'px';
-				
-				styleLeft.top      = marginTop + 'px';
-				styleLeft.width    = ( marginX < 0 ? 0 : marginX ) + 'px';
-				styleLeft.height   = ( _h + marginBottom ) + 'px';
-				
-				styleRight.top     = marginTop + 'px';
-				styleRight.left    = _w +marginX + 'px';
-				styleRight.width   = ( rightWidth < 0 ? 0 : rightWidth ) + 'px';
-				styleRight.height  = ( _h + marginBottom ) + 'px';
-				
-				styleBottom.top    = ( _h +marginTop ) + 'px';
-				styleBottom.left   = marginX + 'px';
-				styleBottom.width  = _w + 'px';
-				styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom ) + 'px';
-			}
-		}
-	})();
-
-
-/* --------------------------------------------------------------------------------------------
- * PanelResizerClass
- *  - mouseEventListener
- */
-	var PanelResizerClass = function( id, isTop ){
-		var style          = document.getElementById( id ).style,
-			BORDER_WIDTH   = 2,
-			RESIZER_HEIGHT = 30,
-			x              = -BORDER_WIDTH / 2,
-			y              = isTop === true ? ( -5 - RESIZER_HEIGHT - BORDER_WIDTH ) : 0,
-			w,
-			h = RESIZER_HEIGHT,
-			panelX, panelY, panelW, panelH,
-			offsetY, startY, startH,
-			isDragging = false;
-			
-		function restoreState( arg ){
-			if( arg && arg.length > 3){
-				PANEL_CONTROL.resize( isTop, arg[ 0 ] || panelX, arg[ 1 ] || panelY, arg[ 2 ] || panelW, arg[ 3 ] || panelH );
-			};
-		};
-			
-		this.mousedown = function( _mouseX, _mouseY ){
-			var _x = _mouseX -panelX,
-				_y = _mouseY -panelY;
-			if( _x < x || x + w < _x || _y < y || y + h < _y) return false;
-			offsetY = _y;
-			startY = panelY;
-			startH = panelH;
-			isDragging = true;
-			updateMouseCursor( 'n-resize' );
-			return true;
-		};
-		this.mousemove = function( _mouseX, _mouseY ){
-			var _x = _mouseX - panelX,
-				_y = _mouseY - panelY;
-			if( isDragging !== true ){
-				if( _x < x || x + w < _x || _y < y || y + h < _y ) return false;
-				PANEL_ELEMENT_OPERATION_MANAGER.hide();
-				updateMouseCursor( 'pointer' );
-				return true;
-			} else {
-				var move = _y -offsetY;
-				if( isTop === true){
-					if( panelH - move < MIN_PANEL_HEIGHT ){
-						move = panelH -MIN_PANEL_HEIGHT;
-					};
-					PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move );
-				} else {
-					var _h = startH + move;
-					if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH ){
-						PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h );
-					};
-				};
-			};
-			return true;
-		};
-		this.mouseup = function( _mouseX, _mouseY ){
-			if( isDragging !== true ) return;
-			( startY !== panelY || startH !== panelH ) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH ] );
-			isDragging = false;
-			updateMouseCursor( '');
-		};
-		this.busy = function(){
-			return isDragging;
-		};
-		this.onPanelResize = function( _x, _y, _w, _h ){
-			panelX = _x;
-			panelY = _y;
-			if( panelW !== _w ){
-				style.width = ( _w + 2 ) + 'px';
-				panelW = _w;
-			}
-			panelH = _h;
-			y = isTop === true ? y : ( panelH + 5 + BORDER_WIDTH );
-			w = panelW + 2;
-		};
-	};
-	var	PANEL_RESIZER_TOP,
-		PANEL_RESIZER_BOTTOM;
-
-/* ----------------------------------------
- * PANEL_CONTROL
- *  - controler
- *  - mouseEventListener
- * 
- * panel-border の表示と onPanelResize の通知．
- * panel drag.
- * 
- */
-	var PANEL_CONTROL = ( function(){
-		var elmPanel, stylePanel,
-			DEFAULT_PANEL_WIDTH  = 400,
-			DEFAULT_PANEL_HEIGHT = 300,
-			borderSize = 2,
-			offsetX, offsetY, startX, startY,
-			isDragging = false,
-			isDraggable = false;
-		
-		app.addKeyEventListener( 'keychange', onSpaceUpdate, 32, false, false );
-		
-		function onSpaceUpdate( e ){
-			if( e.type === 'keyup' ){
-				currentListener === null && updateMouseCursor( '' );
-				isDraggable = false;
-			} else {
-				currentListener === null && updateMouseCursor( 'move' );
-				isDraggable = true;
-			};
-			return false;
-		};
-		
-		return {
-			x: 0,
-			y: 0,
-			w: 0,
-			h: 0,			
-			init: function(){
-				elmPanel   = document.getElementById( 'panel-tools-container' );
-				stylePanel = elmPanel.style;
-				
-				PANEL_RESIZER_TOP    = new PanelResizerClass( 'panel-resizer-top',    true );
-				PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false );
-				PanelResizerClass    = null;
-				
-				delete PANEL_CONTROL.init;
-			},
-			open: function( _panelW, _panelH, _borderSize ){
-				PANEL_CONTROL.w = Type.isFinite( _panelW ) === true ? _panelW : DEFAULT_PANEL_WIDTH;
-				PANEL_CONTROL.h = Type.isFinite( _panelH ) === true ? _panelH : DEFAULT_PANEL_HEIGHT;
-				borderSize      = Type.isFinite( _borderSize ) === true ? _borderSize : borderSize;
-				
-				delete PANEL_CONTROL.open;
-			},
-			close: function(){
-				
-			},
-			resize: function( isResizerTopAction, _x, _y, _w, _h ){
-				PANEL_CONTROL.x = _x = _x !== undefined ? _x : PANEL_CONTROL.x;
-				PANEL_CONTROL.y = _y = _y !== undefined ? _y : PANEL_CONTROL.y;
-				PANEL_CONTROL.w = _w = _w !== undefined ? _w : PANEL_CONTROL.w;
-				PANEL_CONTROL.h = _h = _h !== undefined ? _h : PANEL_CONTROL.h;
-				
-				stylePanel.left   = ( _x - borderSize ) + 'px';
-				stylePanel.top    = ( _y - borderSize ) + 'px';
-				stylePanel.width  = _w + 'px';
-				stylePanel.height = _h + 'px';
-				
-				PANEL_RESIZER_TOP.onPanelResize( _x, _y, _w, _h );
-				PANEL_RESIZER_BOTTOM.onPanelResize( _x, _y, _w, _h );
-				GRID_CONTROL.onPanelResize( _x, _y );
-				WHITE_GLASS_CONTROL.onPanelResize( _x, _y, _w, _h );
-				PANEL_ELEMENT_CONTROL.onPanelResize( _x, _y, _w, _h, isResizerTopAction === true );
-			},
-			onWindowResize: function( _windowW, _windowH ){
-				PANEL_CONTROL.x = Math.floor( ( _windowW - PANEL_CONTROL.w ) / 2 );
-				PANEL_CONTROL.y = Math.floor( ( _windowH - PANEL_CONTROL.h ) / 2 );
-				PANEL_CONTROL.resize();
-			},
-			mousemove: function( _mouseX, _mouseY ){
-				if( isDraggable === true && isDragging === true ){
-					PANEL_CONTROL.resize( false, startX + _mouseX - offsetX, startY + _mouseY - offsetY );
-				}
-			},
-			mouseup: function( _mouseX, _mouseY ){
-				if( isDraggable === true ){
-					isDragging = false;
-					updateMouseCursor( '' );
-				}
-			},
-			mousedown: function( _mouseX, _mouseY ){
-				if( isDraggable === true ){
-					offsetX    = _mouseX;
-					offsetY    = _mouseY;
-					startX     = PANEL_CONTROL.x;
-					startY     = PANEL_CONTROL.y;
-					isDragging = true;
-					updateMouseCursor( 'move' );
-					return true;
-				}
-			},
-			busy: function(){
-				return isDragging === true;
-			}				
-		}
-	})();
-
-
-/* --------------------------------------------------------------------------------------------
- * CONSOLE_CONTROLER
- */
-	var CONSOLE_CONTROLER = ( function(){
-		var LAYER_BACK_BUTTON, LAYER_FORWARD_BUTTON, DELETE_BUTTON, EDIT_BUTTON, CHANGE_BUTTON,
-			elmConsoleWrapper, styleConsoleWrapper,
-			elmConsoleParent,
-			styleImgConsole, styleTextConsole,
-			currentElement  = null,
-			currentType     = -1,
-			visible         = false,
-			imgConsoleWidth, imgConsoleHeight,
-			textConsoleWidth, textConsoleHeight,
-			tailSize        = 10,
-			buttonClickable = false;
-		
-		function buttonBackOrForward( isBack ){
-			var	offset = Util.getAbsolutePosition( elmConsoleWrapper );
-			styleConsoleWrapper.position = isBack === true ? '' : 'absolute';
-			styleConsoleWrapper.left     = ( isBack === true ? CONSOLE_CONTROLER.x  : offset.x ) + 'px';
-			styleConsoleWrapper.top      = ( isBack === true ? CONSOLE_CONTROLER.y  : offset.y ) + 'px';
-			buttonClickable === isBack && ( isBack === true ? elmConsoleParent : app.rootElement ).appendChild( elmConsoleWrapper );
-			buttonClickable = !isBack;
-		};
-		function layerBack(){
-			if( currentElement === null) return;
-			if( PANEL_ELEMENT_CONTROL.replace( currentElement, false) === false ) return;
-			INFOMATION_WINDOW.update( currentElement );
-			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restoreReplace, [ currentElement, true ], [ currentElement, false ]);
-			var _z = currentElement.z;
-			LAYER_BACK_BUTTON.visible( _z > 0 );
-			LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1 );
-		};
-		function layerForward(){
-			if( currentElement === null) return;
-			if( PANEL_ELEMENT_CONTROL.replace( currentElement, true) === false) return;
-			INFOMATION_WINDOW.update( currentElement);
-			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);
-			var _z = currentElement.z;
-			LAYER_BACK_BUTTON.visible( _z > 0);
-			LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length -1);
-		};
-		function del(){
-			if( currentElement === null) return;
-			buttonBackOrForward( true);
-			PANEL_ELEMENT_CONTROL.remove( currentElement);
-			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);
-			PANEL_ELEMENT_OPERATION_MANAGER.hide();
-		};
-		function edit(){
-			if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT) return;
-			TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, currentElement );
-			buttonBackOrForward( true );
-		};
-		function change(){
-			if( currentElement === null) return;
-			buttonBackOrForward( true);
-			PremiumSatge.boot( currentElement.getArtistID(), currentElement.resourcePicture );
-		};
-		function onImageSelect( resourcePicture ){
-			currentElement.resourcePicture( resourcePicture );
-		};
-		return {
-			x: 0,
-			y: 0,
-			w: 0,
-			h: 0,
-			init: function(){
-				app.addKeyEventListener( 'keydown', layerBack, 66, false, true );
-				app.addKeyEventListener( 'keydown', layerForward, 70, false, true );
-				app.addKeyEventListener( 'keydown', del, 68, false, true );
-				app.addKeyEventListener( 'keydown', edit, 69, false, true );
-				app.addKeyEventListener( 'keydown', change, 85, false, true );
-				
-				var elmImgConsole  = document.getElementById( 'image-element-consol' ),
-					imgConsoleSize = Util.getElementSize( elmImgConsole );
-				imgConsoleWidth    = imgConsoleSize.width;
-				imgConsoleHeight   = imgConsoleSize.height;
-				styleImgConsole    = elmImgConsole.style;
-				elmImgConsole.style.display = 'none';
-				
-				var elmTextConsole  = document.getElementById( 'text-element-consol' ),
-					textConsoleSize = Util.getElementSize( elmTextConsole );
-				textConsoleWidth    = textConsoleSize.width;
-				textConsoleHeight   = textConsoleSize.height;
-				styleTextConsole    = elmTextConsole.style;
-				styleTextConsole.display = 'none';
-				
-				elmConsoleWrapper   = document.getElementById( 'comic-element-consol-wrapper' );
-				styleConsoleWrapper = elmConsoleWrapper.style;
-				elmConsoleParent    = elmConsoleWrapper.parentNode;
-				styleConsoleWrapper.display = 'none';
-				
-				app.addMouseEventListener( document.getElementById( 'edit-text-button' ),     'click', edit );
-				app.addMouseEventListener( document.getElementById( 'delete-image-button' ),  'click', del );
-				app.addMouseEventListener( document.getElementById( 'delete-text-button' ),   'click', del );
-				app.addMouseEventListener( document.getElementById( 'change-image-button' ),  'click', change );
-				app.addMouseEventListener( document.getElementById( 'layer-forward-button' ), 'click', layerForward );
-				app.addMouseEventListener( document.getElementById( 'forward-text-button' ),  'click', layerForward );
-				app.addMouseEventListener( document.getElementById( 'layer-back-button' ),    'click', layerBack );
-				app.addMouseEventListener( document.getElementById( 'back-text-button' ),     'click', layerBack );
-											
-				delete CONSOLE_CONTROLER.init;
-			},
-			open: function(){
-				LAYER_BACK_BUTTON    = MENU_BAR_CONTROL.EDIT.createOption( 'layer back', 'ctrl + B', layerBack, false, true, false );
-				LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'layer forward', 'ctrl + F', layerForward, false, false, false );
-				DELETE_BUTTON        = MENU_BAR_CONTROL.EDIT.createOption( 'delete', 'ctrl + D', del, false, true, true );
-				EDIT_BUTTON          = MENU_BAR_CONTROL.EDIT.createOption( 'Edit Text', 'ctrl + E', edit, false, true, false );
-				CHANGE_BUTTON        = MENU_BAR_CONTROL.EDIT.createOption( 'change', 'ctrl + U', change, false, false, true );
-				
-				delete CONSOLE_CONTROLER.open;
-			},
-			show: function( _currentElement, _w, _h ){
-				if( visible === false ) styleConsoleWrapper.display = '';
-				visible = true;
-				currentElement = _currentElement;
-				var _currentType = _currentElement.type,
-					_z = _currentElement.z;
-				if( currentType !== _currentType ){
-					currentType = _currentType;
-					styleImgConsole.display  = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? '' : 'none';
-					styleTextConsole.display = _currentType === PANEL_ELEMENT_TYPE_TEXT  ? '' : 'none';
-					CONSOLE_CONTROLER.w = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
-					CONSOLE_CONTROLER.h = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
-				}
-				CONSOLE_CONTROLER.x = Math.floor( ( _w - CONSOLE_CONTROLER.w ) / 2 );
-				
-				LAYER_BACK_BUTTON.visible( _z > 0 );
-				LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
-				DELETE_BUTTON.visible( true);
-				EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT );
-				CHANGE_BUTTON.visible( false);
-				
-				if( _w > CONSOLE_CONTROLER.w * 1.5 && _h > CONSOLE_CONTROLER.h * 1.5 ){
-					CONSOLE_CONTROLER.y = Math.floor( ( _h - CONSOLE_CONTROLER.h ) / 2 );
-					elmConsoleWrapper.className = '';
-				} else {
-					CONSOLE_CONTROLER.y = _h + tailSize;
-					elmConsoleWrapper.className = 'console-out';
-				};
-				styleConsoleWrapper.left = CONSOLE_CONTROLER.x + 'px';
-				styleConsoleWrapper.top  = CONSOLE_CONTROLER.y + 'px';
-			},
-			hide: function(){
-				if( visible === true ) styleConsoleWrapper.display = 'none';
-				visible = false;
-				currentElement = null;
-				LAYER_BACK_BUTTON.visible( false);
-				LAYER_FORWARD_BUTTON.visible( false);
-				DELETE_BUTTON.visible( false);
-				EDIT_BUTTON.visible( false);
-				CHANGE_BUTTON.visible( false);
-			},
-			mousemove: function( _mouseX, _mouseY ){
-				if( CONSOLE_CONTROLER.x > _mouseX || CONSOLE_CONTROLER.y > _mouseY || CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w < _mouseX || CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h < _mouseY ){
-					buttonClickable === true && buttonBackOrForward( true );
-					return false;
-				}
-				buttonClickable === false && buttonBackOrForward( false );
-				return true;
-			}
-		}
-	})();
-
-/* --------------------------------------------------------------------------------------------
- * TAIL_OPERATOR
- *  - panelElementOperator
- */
-	var TAIL_OPERATOR = ( function(){
-		var	styleMover,
-			SIZE,
-			SIN          = Math.sin,
-			COS          = Math.cos,
-			ATAN         = Math.atan,
-			FLOOR        = Math.floor,
-			DEG_TO_RAD   = Math.PI / 180,
-			RAD_TO_DEG   = 1 / DEG_TO_RAD,
-			currentText  = null,
-			tailX, tailY,
-			x, y, w, h,
-			balloonW, balloonH, balloonA, radA,
-			visible = false,
-			startA;
-		
-		return {
-			init: function(){
-				var elm    = document.getElementById( 'balloon-tail-mover' );
-				SIZE       = Util.getElementSize( elm ).width;
-				styleMover = elm.style;
-				delete TAIL_OPERATOR.init;
-			},
-			update: function ( _w, _h, _a ){
-				balloonW = _w !== undefined ? _w : balloonW;
-				balloonH = _h !== undefined ? _h : balloonH;
-				balloonA = _a !== undefined ? _a : balloonA;
-				radA = ( balloonA - 90 ) * DEG_TO_RAD;
-				tailX = FLOOR( ( ( COS( radA ) / 2 + 0.5 ) * ( balloonW + SIZE )) - SIZE / 2 );
-				tailY = FLOOR( ( ( SIN( radA ) / 2 + 0.5 ) * ( balloonH + SIZE )) - SIZE / 2 );
-				styleMover.left = tailX +'px';
-				styleMover.top = tailY +'px';
-				//log.html( [ balloonW, balloonH, balloonA].join());
-			},
-			show: function( _currentText ){
-				/*
-				 * visibilityのほうがいい, display:none だと ie で描画が狂う
-				 */
-				styleMover.visibility = '';
-				TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.angle() );
-				currentText = _currentText;
-			},
-			hitTest: function( _mouseX, _mouseY ){
-				var _x = tailX -SIZE / 2,
-					_y = tailY -SIZE / 2;
-					ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;
-				ret === true && updateMouseCursor( 'move' );
-				return ret;
-			},
-			hide: function(){
-				styleMover.visibility = 'hidden';
-				currentText = null;
-			},
-			onStart: function( _currentText, _mouseX, _mouseY ){
-				if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;
-				x = _currentText.x;
-				y = _currentText.y;
-				if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true){
-					w = _currentText.w;
-					h = _currentText.h;
-					currentText = _currentText;
-					startA = _currentText.angle();
-					return true;
-				}
-				return false;
-			},
-			onDrag: function( _mouseX, _mouseY ){
-				_mouseX = _mouseX - x - w / 2;
-				_mouseY = _mouseY - y - h / 2; //Balloonの中心を0,0とする座標系に変換
-				TAIL_OPERATOR.update( w, h,
-					_mouseX !== 0 ?
-						ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) :
-						_mouseY > 0 ? 180 : 0
-				);
-				currentText && currentText.angle( FLOOR( balloonA + 0.5 ));
-				INFOMATION_WINDOW.update( currentText );
-			},
-			onFinish: function(){
-				startA !== currentText.angle() && PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA );
-				startA !== currentText.angle() && PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle() );
-				currentText = null;
-			},
-			onCancel: function(){
-				currentText.angle( startA);
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA );
-				currentText = null;
-			}
-		}
-	})();
-
-/* --------------------------------------------------------------------------------------------
- * RESIZE_OPERATOR
- *  - panelElementOperator
- */
-	var RESIZE_OPERATOR = ( function(){
-		var	HIT_AREA        = MOUSE_HIT_AREA,
-			POSITION_ARRAY  = [],
-			FLOOR           = Math.floor,
-			CURSOR_AND_FLIP = [
-				{ cursor:	'n-resize',		v: 3 },
-				{ cursor:	'e-resize',		h: 2 },
-				{ cursor:	'e-resize',		h: 1 },
-				{ cursor:	'n-resize',		v: 0 },
-				{ cursor:	'nw-resize',	h: 5, v: 6, vh: 7 },
-				{ cursor:	'ne-resize',	h: 4, v: 7, vh: 6 },
-				{ cursor:	'ne-resize',	h: 7, v: 4, vh: 5 },
-				{ cursor:	'nw-resize',	h: 6, v: 5, vh: 4 }
-			],
-			elmResizerContainer,
-			elmResizerContainerStyle,
-			elmResizerTopStyle,
-			elmResizerLeftStyle,
-			elmResizerRightStyle,
-			elmResizerBottomStyle,
-			x, y, w, h,
-			currentIndex = -1,
-			currentElement,
-			currentIsTextElement = false;
-		
-		var RESIZE_WORK_ARRAY = [
-				{ x:	0, w:	 0, y:	1, h:	-1}, //top
-				{ x:	1, w:	-1, y:	0, h:	 0}, //left
-				{ x:	0, w:	 1, y:	0, h:	 0}, //right
-				{ x:	0, w:	 0, y:	0, h:	 1}, //bottom
-				{ x:	1, w:	-1, y:	1, h:	-1}, //top-left
-				{ x:	0, w:	 1, y:	1, h:	-1}, //top-right
-				{ 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,
-			baseX, baseY, baseW, baseH,
-			currentX, currentY, currentW, currentH,
-			offsetX, offsetY,
-			lock  = false,
-			error = 0;
-		
-		function draw( _x, _y, _w, _h ){
-			x = _x = _x !== undefined ? _x : x;
-			y = _y = _y !== undefined ? _y : y;
-			w = _w = _w !== undefined ? _w : w;
-			h = _h = _h !== undefined ? _h : h;
-			try {
-				elmResizerContainerStyle.left   = _x + 'px';
-				elmResizerContainerStyle.top    = _y + 'px';
-				elmResizerContainerStyle.width  = _w + 'px';
-				elmResizerContainerStyle.height = _h + 'px';
-				elmResizerTopStyle.left = elmResizerBottomStyle.left = FLOOR( _w / 2 - 5 ) + 'px';
-				elmResizerLeftStyle.top = elmResizerRightStyle.top   = FLOOR( _h / 2 - 5 ) + 'px';
-			} catch(e){
-				alert( [x, y, w, h].join( ','));
-				return;
-			}
-			
-			POSITION_ARRAY.splice( 0, POSITION_ARRAY.length );
-			POSITION_ARRAY.push(
-				{x:	_x +5,					y:	_y -HIT_AREA,		w:	_w -5 *2,		h:	HIT_AREA +5},
-				{x: _x -HIT_AREA,			y:	_y +HIT_AREA +5,	w:	HIT_AREA +5,	h:	_h -5 *2},
-				{x: _x + _w -5,				y:	_y +HIT_AREA +5,	w:	HIT_AREA +5,	h:	_h -5 *2},
-				{x:	_x +5,					y:	_y +_h -5,			w:	_w -5 *2,		h:	HIT_AREA +5},
-				{x:	_x -HIT_AREA,			y:	_y -HIT_AREA,		w:	HIT_AREA +5,	h:	HIT_AREA +5},
-				{x: _x + _w -HIT_AREA,		y:	_y -HIT_AREA,		w:	HIT_AREA +5,	h:	HIT_AREA +5},
-				{x:	_x -HIT_AREA,			y:	_y +_h -5,			w:	HIT_AREA +5,	h:	HIT_AREA +5},
-				{x:	_x +_w -5,				y:	_y +_h -5,			w:	HIT_AREA +5,	h:	HIT_AREA +5}
-			);
-		}
-		
-		function update( _x, _y, _w, _h ){
-			var __w, __h;
-			_x = _x !== undefined ? _x : currentX;
-			_y = _y !== undefined ? _y : currentY;
-			_w = _w !== undefined ? _w : currentW;
-			_h = _h !== undefined ? _h : currentH;
-			
-			if( currentIsTextElement === false && currentIndex > 3 && app.shiftEnabled() === true){
-				if( startAspect >= 1 ){
-					__w = _w;
-					_w = FLOOR( startAspect * _h );
-					_x = _x +( currentIndex % 2 === 0 ? __w - _w : 0);
-				} else {
-					__h = _h;
-					_h = FLOOR( _w / startAspect );
-					_y = _y + ( currentIndex <= 5 ? __h - _h : 0);
-				}
-			}
-			draw( x = _x, y = _y, w = _w, h = _h );
-			currentElement.resize( _x, _y, _w, _h );
-			currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h );
-			CONSOLE_CONTROLER.show( currentElement, _w, _h );
-			INFOMATION_WINDOW.update( currentElement);
-		}
-		
-		function flip( _flipH, _flipV ){
-			var p = CURSOR_AND_FLIP[ currentIndex ];
-			currentIndex = _flipH === true || _flipV === true ? p[
-					_flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v' )
-				] : currentIndex;
-			updateMouseCursor( CURSOR_AND_FLIP[ currentIndex ].cursor );
-			elmResizerContainer.className = 'current-resizer-is-' + currentIndex;
-			currentElement.flip( _flipH, _flipV );
-		}
-		return {
-			init: function(){
-				elmResizerContainer      = document.getElementById( 'comic-element-resizer-container');
-				elmResizerContainerStyle = elmResizerContainer.style;
-				elmResizerContainerStyle.display = 'none';
-				
-				elmResizerTopStyle       = document.getElementById( 'comic-element-resizer-top').style;
-				elmResizerLeftStyle      = document.getElementById( 'comic-element-resizer-left').style;
-				elmResizerRightStyle     = document.getElementById( 'comic-element-resizer-right').style;
-				elmResizerBottomStyle    = document.getElementById( 'comic-element-resizer-bottom').style;
-				
-				delete RESIZE_OPERATOR.init;
-			},
-			update: draw,
-			index: function( _mouseX, _mouseY ){
-				var	p, i;
-				for( i=4; i<8; i++ ){
-					p = POSITION_ARRAY[ i ];
-					if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY ){
-						updateMouseCursor( CURSOR_AND_FLIP[ i].cursor);
-						elmResizerContainer.className = 'current-resizer-is-' +i;
-						return currentIndex = i;
-					}
-				}
-				for( i=0; i<4; i++ ){
-					p = POSITION_ARRAY[ i ];
-					if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
-						updateMouseCursor( CURSOR_AND_FLIP[ i].cursor);
-						elmResizerContainer.className = 'current-resizer-is-' +i;
-						return currentIndex = i;
-					}
-				}
-				updateMouseCursor( '' );
-				elmResizerContainer.className = '';
-				return -1;
-			},
-			show: function( _currentElement ){
-				currentElement = _currentElement;
-				currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
-				elmResizerContainerStyle.display = '';
-			},
-			hide: function(){
-				currentElement = null;
-				elmResizerContainerStyle.display = 'none';
-			},
-			onStart: function( _currentElement, _mouseX, _mouseY ){
-				currentElement = _currentElement;
-				currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
-				if( _currentElement.keepSize === true) return false;
-				currentIndex = this.index( _mouseX, _mouseY);
-				if( currentIndex === -1) return false;
-				offsetX = _mouseX;
-				offsetY = _mouseY;
-				startX = baseX = _currentElement.x;
-				startY = baseY = _currentElement.y;
-				startW = baseW = _currentElement.w;
-				startH = baseH = _currentElement.h;
-				if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){
-					startFilpV = _currentElement.flipV();
-					startFilpH = _currentElement.flipH();							
-				}
-				startAspect = startW /startH;
-				return true;
-			},
-			onDrag: function( _mouseX, _mouseY ){
-				var com = RESIZE_WORK_ARRAY[ currentIndex],
-					moveX = _mouseX -offsetX,
-					moveY = _mouseY -offsetY,
-					_updated = moveX !== 0 || moveY !== 0,
-					_x, _y, _w, _h,
-					_thisError = 0;
-					
-				var _memoryX = 0,
-					_memoryY = 0,
-					_momoryW = 0,
-					_momoryH = 0;
-				/*
-				 * Opera 11+ often forget values, why ??
-				 */
-				while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
-					_x = _x !== undefined ? _x : baseX +moveX *com.x;
-					_y = _y !== undefined ? _y : baseY +moveY *com.y;
-					_w = _w !== undefined ? _w : baseW +moveX *com.w;
-					_h = _h !== undefined ? _h : baseH +moveY *com.h;
-					error += _thisError === 0 ? 0 : 1;
-					++_thisError;
-					if( _thisError > 9999){
-						++error
-						//alert( 'opera error' +error);
-						this.onCancel;
-						return;
-					}
-				}
-				
-				if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
-					
-				} else 
-				if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){
-					//return;
-					if( _w < MIN_ELEMENT_SIZE){
-						//_x += Math.abs( MIN_ELEMENT_SIZE -_w);
-						_x = currentX;
-						_w = MIN_ELEMENT_SIZE;
-					}
-					if( _h < MIN_ELEMENT_SIZE){
-						//_y += Math.abs( MIN_ELEMENT_SIZE -_h);
-						_y = currentY;
-						_h = MIN_ELEMENT_SIZE;
-					}
-				} else 
-				if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){
-					return;
-				} else 
-				if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
-
-					if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){
-					// flipH
-						_memoryX = _x;
-						baseX = _x = _x +_w;
-						baseY = _y;
-						baseW = _w = _memoryX -_x;
-						baseH = _h;
-						flip( true, false);
-						flipV = currentElement.flipV();
-					} else 
-					if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){
-					// flipV
-						_memoryY = _y;
-						baseX = _x;
-						baseY = _y = _y +_h;
-						baseW = _w;
-						baseH = _h = _memoryY -_y;
-						flip( false, true);
-						flipH = currentElement.flipH();
-					} else {
-					// flipVH
-						_memoryX = _x;
-						_memoryY = _y;
-						baseX = _x = _x +_w;
-						baseY = _y = _y +_h;
-						baseW = _w = _memoryX -_x;
-						baseH = _h = _memoryY -_y;
-						flip( true, true);
-						flipV = currentElement.flipV();
-						flipH = currentElement.flipH();
-					}
-					_updated = true;
-					offsetX = _mouseX;
-					offsetY = _mouseY;	
-				}
-				currentX = _x;
-				currentY = _y;
-				currentW = _w;
-				currentH = _h;
-				_updated === true && update( _x, _y, _w, _h );
-				/*
-				log.html( [
-						'currentIndex:', currentIndex, 
-						'baseW', baseW, 'baseH', baseH,'<br>',
-						'mouse', _mouseX, _mouseY,'<br>',
-						'move', moveX, moveY,'<br>',
-						'xy', _x, _y, 'wh',_w, _h,'<br>',
-						'com.w', com.w, 'com.h', com.h,'<br>',
-						'current',currentW, currentH,'<br>',
-						'result', y, h,
-						'err', error
-				].join( ' , ')); */
-			},
-			onFinish: function(){
-				updateMouseCursor( '');
-				if( w === startW && h === startH && x === startX && y === startY) return;
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);
-				currentElement.resize( x, y, w, h);
-				PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);
-			},
-			onCancel: function(){
-				updateMouseCursor( '');
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);
-				currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
-					currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
-					currentElement.animate( startX, startY, startW, startH, angle);
-			},
-			lock: function( _lock ){
-				if( _lock !== undefined){
-					elmResizerContainerStyle.borderColor = _lock === true ? 'blue' : '';
-					lock = _lock;
-				}
-				return lock;
-			},
-			onShiftUpdate: update,
-			onCtrlUpdate: update
-		}
-	})();
-
-/* --------------------------------------------------------------------------------------------
- * POSITION_OPERATOR
- *  - panelElementOperator
- */
-	var POSITION_OPERATOR = ( function(){
-		var currentElement,
-			startX, startY,
-			x, y,
-			offsetX, offsetY,
-			isCopy = false;
-		function update( _x, _y ){
-			x = _x !== undefined ? _x : x;
-			y = _y !== undefined ? _y : y;
-			RESIZE_OPERATOR.update( x, y );
-			currentElement.resize( x, y );
-			INFOMATION_WINDOW.update( currentElement );
-		};
-		return {
-			init: function(){
-				delete POSITION_OPERATOR.init;
-			},
-			onStart: function( _currentElement, _mouseX, _mouseY ){
-				currentElement = _currentElement;
-				offsetX = _mouseX;
-				offsetY = _mouseY;
-				startX  = x = _currentElement.x;
-				startY  = y = _currentElement.y;
-				updateMouseCursor( 'move' );
-			},
-			onDrag: function( _mouseX, _mouseY ){
-				var moveX = _mouseX - offsetX,
-					moveY = _mouseY - offsetY,
-					_x    = startX + moveX,
-					_y    = startY + moveY;
-				if( GRID_CONTROL.enabled() === true ){
-					_x = Math.floor( _x / 10 ) * 10;
-					_y = Math.floor( _y / 10 ) * 10;
-				};
-				update( _x, _y );
-			},
-			onFinish: function(){
-				updateMouseCursor( '' );
-				if( x === startX && y === startY ) return;
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y );
-				currentElement.resize( x, y );
-				PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY );
-			},
-			onCancel: function(){
-				updateMouseCursor( '' );
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY );
-				currentElement.animate( startX, startY );
-			},
-			onShiftUpdate: update,
-			onCtrlUpdate: update
-		}
-	})();
-
-
-/* --------------------------------------------------------------------------------------------
- * PANEL_ELEMENT_OPERATION_MANAGER
- */
-	var PANEL_ELEMENT_OPERATION_MANAGER = ( function(){
-		var	HIT_AREA             = MOUSE_HIT_AREA,
-			currentIsTextElement = false,
-			currentOperator      = null,
-			currentElement       = null,
-			currentX, currentY, currentW, currentH, angle, flipV, flipH;
-
-			function resize( _x, _y, _w, _h, _angle ){
-				currentX = _x = _x !== undefined ? _x : currentX;
-				currentY = _y = _y !== undefined ? _y : currentY;
-				currentW = _w = _w !== undefined ? _w : currentW;
-				currentH = _h = _h !== undefined ? _h : currentH;
-				angle = _angle = _angle !== undefined ? _angle : angle;
-
-				RESIZE_OPERATOR.update( _x, _y, _w, _h );
-				currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h, angle );
-				CONSOLE_CONTROLER.show( currentElement, _w, _h );
-				INFOMATION_WINDOW.update( currentElement );
-			};
-			function show( _currentElement ){
-				currentElement === null && RESIZE_OPERATOR.show( _currentElement );
-				if( currentElement !== _currentElement ){
-					currentElement = _currentElement;
-					
-					currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT );
-					currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement ) : TAIL_OPERATOR.hide();
-					
-					flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;
-					flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;
-					
-					resize(
-						_currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,
-						currentIsTextElement === true ? _currentElement.angle() : 0
-					);
-				};
-			};
-			
-		return {
-			init: function(){
-				TAIL_OPERATOR.init();
-				RESIZE_OPERATOR.init();
-				POSITION_OPERATOR.init();
-				
-				app.addKeyEventListener( 'keychange', function( e ){
-					currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();
-					return false;
-				}, 16 );
-				app.addKeyEventListener( 'keychange', function( e ){
-					currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();
-					return false;
-				}, 17 );
-				app.addKeyEventListener( 'keydown', function( e ){
-					currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
-					currentOperator = null;
-					return false;
-				}, 27, false, false );
-				
-				delete PANEL_ELEMENT_OPERATION_MANAGER.init;
-			},
-			open: function(){
-				PANEL_ELEMENT_OPERATION_MANAGER.hide();
-				
-				delete PANEL_ELEMENT_OPERATION_MANAGER.open;
-			},
-			close: function(){
-				
-			},
-			hide: function(){
-				currentElement !== null && RESIZE_OPERATOR.hide();
-				currentElement = null;
-				updateMouseCursor( '' );
-				TAIL_OPERATOR.hide();
-				CONSOLE_CONTROLER.hide();
-				INFOMATION_WINDOW.update( null );
-			},
-			resize: resize,
-			restoreState: function( arg ){
-				if( arg && arg.length !== 8 ) return;
-				var _currentElement = arg[ 0 ],
-					_x = arg[ 1 ], _y = arg[ 2 ], _w = arg[ 3 ], _h = arg[ 4 ],
-					_a = arg[ 5 ],
-					_flipV = arg[ 6 ], _flipH = arg[ 7 ];
-				if( !_currentElement && !currentOperator ) return;
-				_currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
-					_currentElement.animate( _x, _y, _w, _h, _flipV, _flipH ) :
-					_currentElement.animate( _x, _y, _w, _h, _a );
-				currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
-				currentOperator = null;
-				currentElement === _currentElement ? resize( _x, _y, _w, _h, _a ) : show( _currentElement );
-			},
-			saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH ){
-				startX = startX !== undefined ? startX : currentX;
-				startY = startY !== undefined ? startY : currentY;
-				startW = startW !== undefined ? startW : currentW;
-				startH = startH !== undefined ? startH : currentH;
-				startA = startA !== undefined ? startA : angle;
-				startFilpV = startFilpV !== undefined ? startFilpV : flipV;
-				startFilpH = startFilpH !== undefined ? startFilpH : flipH;
-				currentElement && HISTORY_CONTROL.saveState( PANEL_ELEMENT_OPERATION_MANAGER.restoreState,
-					[ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],
-					[ currentElement, currentX, currentY, currentW, currentH, angle, flipV, flipH]
-				);
-			},
-			busy: function(){
-				return currentOperator !== null;
-			},
-			hitTest: function( _mouseX, _mouseY, _panelElement ){
-				var _x, _y, _w, _h;
-				if( _panelElement === currentElement ){
-					var _consoleX = CONSOLE_CONTROLER.x;
-					_x = currentX +( _consoleX < 0 ? _consoleX : 0 ) - HIT_AREA;
-					_y = currentY - HIT_AREA;
-					var _consoleW = CONSOLE_CONTROLER.w;
-					_w = ( _consoleW < currentW ? currentW : _consoleW ) + HIT_AREA * 2;
-					var _consoleY = CONSOLE_CONTROLER.y;
-					_h = ( _consoleY < currentH ? currentH : _consoleY + CONSOLE_CONTROLER.h ) + HIT_AREA * 2;
-				} else {
-					_x = _panelElement.x - HIT_AREA;
-					_y = _panelElement.y - HIT_AREA;
-					_w = _panelElement.w + HIT_AREA *2;
-					_h = _panelElement.h + HIT_AREA *2;
-				}
-				return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
-			},
-			mousedown: function( _currentElement, _mouseX, _mouseY ){
-				//show( _currentElement);
-				if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
-					currentOperator = TAIL_OPERATOR;
-				} else
-				if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
-					currentOperator = RESIZE_OPERATOR;
-				} else {
-					POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)
-					currentOperator = POSITION_OPERATOR;
-				}
-			},
-			mousemove: function( _currentElement, _mouseX, _mouseY ){
-				show( _currentElement);
-				if( currentOperator !== null){
-					currentOperator.onDrag( _mouseX, _mouseY );
-				} else
-				if( currentElement !== null){
-					CONSOLE_CONTROLER.mousemove( _mouseX - currentX, _mouseY - currentY );
-					if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentX, _mouseY -currentY) === false){
-						RESIZE_OPERATOR.index( _mouseX, _mouseY);
-					}
-				}
-			},
-			mouseup: function( _currentElement, _mouseX, _mouseY ){
-				currentOperator !== null && currentOperator.onFinish();
-				currentOperator = null;
-			}
-		}
-	})();
-	/*
-	 *  // PANEL_ELEMENT_OPERATION_MANAGER
-	 */
-
-	var AbstractPanelElement = function( COMIC_ELM_TYPE ){
-		this.type = COMIC_ELM_TYPE;
-		this.hitTest = function( _mouseX, _mouseY ){
-			return PANEL_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );
-		}
-		this.shift = function( _shiftX, _shiftY ){
-			this.resize( this.x + _shiftX, this.y + _shiftY);
-		}
-		this.busy = function(){
-			return PANEL_ELEMENT_OPERATION_MANAGER.busy();
-		}
-		this.mousemove = function( _mouseX, _mouseY ){
-			PANEL_ELEMENT_OPERATION_MANAGER.mousemove( this, _mouseX, _mouseY );
-		}
-		this.mouseup = function( _mouseX, _mouseY ){
-			PANEL_ELEMENT_OPERATION_MANAGER.mouseup( this, _mouseX, _mouseY );
-		}
-		this.mousedown = function( _mouseX, _mouseY ){
-			PANEL_ELEMENT_OPERATION_MANAGER.mousedown( this, _mouseX, _mouseY );
-		}
-	};
-
-/* --------------------------------------------------------------------------------------------
- * ImageElementClass
- */
-	var	jqImageElementOrigin;
-	var ImageElementClass = function( data ){
-		jqImageElementOrigin = jqImageElementOrigin || $( app.fetchHTMLElement( 'imgElementTemplete' ) );
-		
-		var jqWrap          = jqImageElementOrigin.clone( true ),
-			flipH           = data.width  < 0 ? -1 : 1,
-			flipV           = data.height < 0 ? -1 : 1,
-			resourcePicture = data.resource_picture,
-			actualW         = data.resource_picture.width,
-			actualH         = data.resource_picture.height,
-			reversibleImage = null,
-			self            = this,
-			x, y, z, w, h;
-		function flipReversibleImage(){
-			reversibleImage && reversibleImage.resize( flipH * w, flipV * h );
-		};
-		function updateResourcePicture( _resourcePicture ){
-			resourcePicture = _resourcePicture;
-			
-			actualW = _resourcePicture.width;
-			actualH = _resourcePicture.height;
-			
-			var _reversibleImage = pettanr.image.createReversibleImage( 
-					[ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),
-					flipH * w, flipV * h
-				);
-			if( reversibleImage !== null ){
-				jqWrap.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );
-				reversibleImage.destroy();
-			} else {
-				jqWrap.append( _reversibleImage.elm );
-			}
-			reversibleImage = _reversibleImage;
-		};
-		/* global methods */
-		this.$ = jqWrap;
-		//this.x = x;
-		//this.y = y;
-		//this.w = w;
-		//this.h = h;
-		this.z = data.z;
-		this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
-		this.keepSize = false;
-		this.init = function(){
-			updateResourcePicture( data.resource_picture );
-			self.resize( data.x, data.y, Math.abs( data.width ), Math.abs( data.height ) );
-			delete self.init;
-		};
-		this.flip = function( _updateH, _updateV ){
-			if( _updateH !== true && _updateV !== true ) return;
-			flipH = _updateH === true ? -flipH : flipH;
-			flipV = _updateV === true ? -flipV : flipV;
-			reversibleImage.resize( flipH * w, flipV * h );
-		};
-		this.flipV = function(){ return flipV;}
-		this.flipH = function(){ return flipH;}
-		this.resourcePicture = function( _resourcePicture ){
-			if( _resourcePicture && _resourcePicture !== resourcePicture ){
-				HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );
-				updateResourcePicture( _resourcePicture );
-			};
-			return resourcePicture;
-		};
-		this.getArtistID = function(){
-			return resourcePicture.artist_id || resourcePicture.artist.id || -1;
-		};
-		this.actualW = function(){ return actualW;}
-		this.actualH = function(){ return actualH;}
-		this.resize = function( _x, _y, _w, _h, animate ){
-			self.x = x = Type.isFinite( _x ) === true ? _x : x;
-			self.y = y = Type.isFinite( _y ) === true ? _y : y;
-			self.w = w = Type.isFinite( _w ) === true ? _w : w;
-			self.h = h = Type.isFinite( _h ) === true ? _h : h;
-			jqWrap[ animate === true ? 'animate' : 'css' ]( { 
-				left:	x,
-				top:	y,
-				width:	w,
-				height:	h
-			}, 250,  flipReversibleImage );
-			animate !== true && flipReversibleImage();
-		};
-		this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){
-			flipH = _flipH !== undefined ? _flipH : flipH;
-			flipV = _flipV !== undefined ? _flipV : flipV;
-			self.resize( _x, _y, _w, _h, true );
-		};
-		this.destroy = function(){
-			delete self.destroy;
-			
-			reversibleImage.destroy();
-			jqWrap.stop().remove();
-			jqWrap = reversibleImage = resourcePicture = data = self = null;
-		};
-	};
-	ImageElementClass.prototype = new AbstractPanelElement( PANEL_ELEMENT_TYPE_IMAGE );
-/*
- * / ImageElementClass
- * --------------------------------------------------------------------------------------------
- */
-
-
-/* --------------------------------------------------------------------------------------------
- * TextElementClass
- * 
- * type
- * 0.none
- * 1.speach balloon
- * 2.think
- * 3.bom
- * 4.black-box( dq style)
- * 5.blue-box( ff style)
- * 
- */
-	var jqTextElementOrigin;
-	var TextElementClass = function( data ){
-		jqTextElementOrigin = jqTextElementOrigin || ( function(){
-			var _OLD_IE = $( app.fetchHTMLElement( 'textElementTempleteForOldIE' ) ),
-				_MODERN = $( app.fetchHTMLElement( 'textElementTemplete' ) );
-			return UA.isIE === true && UA.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;
-		})();
-		
-		var JQ_WRAPPER = jqTextElementOrigin.clone( true ),
-			elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ),
-			type     = data.balloon_template_id,
-			text     = ( function(){
-				var _speachs = data.speeches_attributes;
-				for( var k in _speachs ){
-					return _speachs[ k ].content || '';
-				}
-				return '';
-			})(),
-			balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),
-			x, y, w, h, a,
-			self = this;
-		
-		JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm );
-		
-		function updateType( _type ){
-			if( type !== _type ){
-				type = _type || type;
-				balloon.type( type );
-			}
-		}
-		function updateAngle( _a ){
-			if( _a !== undefined && a !== _a ){
-				a = _a !== undefined ? _a : a;
-				balloon.angle( a );
-			}
-		}
-		function updateText( _text ){
-			text = _text || text || '';
-			elmText.firstChild.data = text;
-		}
-		function resizeBalloon(){
-			balloon && balloon.resize( a, w, h );
-		}
-		
-		/* global methods */
-		this.$ = JQ_WRAPPER;
-		//this.x = x;
-		//this.y = y;
-		//this.w = w;
-		//this.h = h;
-		this.z = data.z;
-		this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
-		this.init = function(){
-			updateText();
-			self.resize( data.x, data.y, data.width, data.height, data.tail );
-			delete self.init;
-		};
-		this.angle = function( _a ){
-			_a !== undefined && self.resize( x, y, w, h, _a );
-			return a;
-		};
-		this.text = function( _text ){
-			if( _text && text !== _text) {
-				HISTORY_CONTROL.saveState( updateText, text || '', _text );
-				updateText( _text );
-			}
-			return text;
-		};
-		this.resize = function( _x, _y, _w, _h, _a, animate ){
-			self.x = x = _x !== undefined ? _x : x;
-			self.y = y = _y !== undefined ? _y : y;
-			self.w = w = _w !== undefined ? _w : w;
-			self.h = h = _h !== undefined ? _h : h;
-			a = _a !== undefined ? _a : a;
-			
-			JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
-					left:		x,
-					top:		y,
-					width:		w,
-					height:		h
-				}, 250, resizeBalloon
-			);		
-			animate !== true && resizeBalloon();
-		};
-		this.animate = function ( _x, _y, _w, _h, _a ){
-			self.resize( _x, _y, _w, _h, _a, true );
-		};
-		this.destroy = function(){
-			delete self.destroy;
-			
-			JQ_WRAPPER.stop().remove();
-			balloon.destroy();
-			JQ_WRAPPER = elmText = data = balloon = self = null;
-		};
-	}
-	TextElementClass.prototype = new AbstractPanelElement( PANEL_ELEMENT_TYPE_TEXT );
-
-/* --------------------------------------------------------------------------------------------
- * PANEL_ELEMENT_CONTROL
- *  - mouseEventListener
- */
-	var PANEL_ELEMENT_CONTROL = ( function(){
-		var	elmContainer,
-			currentElement  = null,
-			currentLockTest = false,
-			currentLock     = false,
-			panelX, panelY, panelW, panelH,
-			startX, startY;
-	/*
-	 * append, remove, replace
-	 * 
-	 * panelElement には、z-position と dom-index がある。
-	 *   z-position は 表示上の位置。大きいほど前に表示される（ z-index）
-	 *   dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。
-	 * 
-	 * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。
-	 * dom-index は、数値のみ保持して、投稿時にpanelElementを適宜に並び替える。
-	 * 
-	 * append panelElement
-	 * 1. 新しい panelElement の z-position を得る
-	 * 2. ｚ の同じ panelElementを見つけ、その前に加える。または一番先頭へ。（PANEL_ELEMENT_ARRAY）
-	 *    zが大きいほど、PANEL_ELEMENT_ARRAYの先頭へ。
-	 * 3. dom位置は、PANEL_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。
-	 * 
-	 * 
-	 * remove panelElement
-	 * 1. remove
-	 * 2. renumber z
-	 */
-		function appendPanelElement( _panelElement ) {
-			var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,
-				l = PANEL_ELEMENT_ARRAY.length,
-				_jqElm = _panelElement.$.stop().css( {
-					filter:		'',
-					opacity:	''
-				});
-			if( z < 0 ){
-				PANEL_ELEMENT_ARRAY.unshift( _panelElement );
-			} else {
-				for( var i = 0; i < l; ++i ){
-					if( PANEL_ELEMENT_ARRAY[ i ].z < z ) break;
-				};
-				if( i === l ){
-					PANEL_ELEMENT_ARRAY.push( _panelElement );
-				} else {
-					PANEL_ELEMENT_ARRAY.splice( i, 0, _panelElement );
-				};
-			};
-			renumber();
-			_jqElm.fadeIn();			
-		};
-
-		function onFadeOut(){
-			this.parentNode.removeChild( this );
-		};
-		/*
-		 * PANEL_ELEMENT_ARRAY の順番を基準に、zの再計算
-		 * jqElmの並び替え。
-		 */
-		function renumber(){
-			var _panelElement, jqElm, jqNext;
-			for( var i = 0, l = PANEL_ELEMENT_ARRAY.length; i < l; ++i ){
-				_panelElement = PANEL_ELEMENT_ARRAY[ i ];
-				jqElm = _panelElement.$;
-				i === 0 && elmContainer.appendChild( jqElm.get( 0 ) );
-				jqNext && jqNext.before( jqElm );
-				if( phase === 1 ) _panelElement.z = l - i - 1;
-				jqNext = jqElm;
-			};
-		};
-		function onTextInput( _panelElement ){
-			appendPanelElement( _panelElement );
-			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement ], [ true, _panelElement ], true );
-		};
-	
-		return {
-			init: function(){
-				elmContainer = document.getElementById( 'comic-element-container' );
-				delete PANEL_ELEMENT_CONTROL.init;
-			},
-			open: function(){
-
-			},
-			close: function(){
-				var _comicElm;
-				while( PANEL_ELEMENT_ARRAY.length > 0 ){
-					_comicElm = PANEL_ELEMENT_ARRAY.shift();
-					_comicElm.destroy && _comicElm.destroy();
-				}
-			},
-			remove: function( _panelElement ){
-				var l = PANEL_ELEMENT_ARRAY.length;
-				for( var i=0; i<l; ++i ){
-					if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){
-						PANEL_ELEMENT_ARRAY.splice( i, 1 );
-						renumber();
-						_panelElement.$.stop().css( {
-							filter:		'',
-							opacity:	''
-						}).fadeOut( onFadeOut );
-						currentElement = currentElement === _panelElement ? null : currentElement;
-						return;
-					};
-				};
-			},
-			restore: function( arg ){
-				var isAppend = arg[ 0 ],
-					panelElement = arg[ 1 ];
-				isAppend === true ? appendPanelElement( panelElement ) :  PANEL_ELEMENT_CONTROL.remove( panelElement );
-			},
-			replace: function( _panelElement, goForward ){
-				// PANEL_ELEMENT_ARRAYの再構築
-				var l = PANEL_ELEMENT_ARRAY.length,
-					i = -1;
-				for( var j = 0; j < l; ++j ){
-					if( PANEL_ELEMENT_ARRAY[ j ] === _panelElement ){
-						i = j;
-						break;
-					};
-				}
-				if( i === -1) return false;
-				if( goForward === true ){
-					if( i === 0 ) return false;
-					PANEL_ELEMENT_ARRAY.splice( i, 1 );
-					PANEL_ELEMENT_ARRAY.splice( i - 1, 0, _panelElement );
-				} else {
-					if( i === l - 1 ) return false;
-					PANEL_ELEMENT_ARRAY.splice( i, 1 );
-					PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
-				}
-				renumber( true );
-				return true;
-			},
-			restoreReplace: function( arg ){
-				PANEL_ELEMENT_CONTROL.replace( arg[ 0 ], arg[ 1 ] );
-			},
-			onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction ){
-			/*
-			 * リサイズが、ResizerTopによって行われた場合、panelElementのyを動かして見かけ上動かないようにする。
-			 */					
-				if( isResizerTopAction === true){
-					var	_shiftX = _panelW - panelW,
-						_shiftY = _panelH - panelH;
-					for( var i = PANEL_ELEMENT_ARRAY.length; i; ){
-						PANEL_ELEMENT_ARRAY[ --i ].shift( _shiftX, _shiftY );
-					};
-				};
-				elmContainer.style.cssText = [
-					'width:',  panelW = _panelW, 'px;',
-					'height:', panelH = _panelH, 'px;',
-					'left:',   panelX = _panelX, 'px;',
-					'top:',    panelY = _panelY, 'px'
-				].join( '' );
-			},
-			mousemove: function( _mouseX, _mouseY ){
-				var l    = PANEL_ELEMENT_ARRAY.length,
-					_x   = _mouseX - panelX,
-					_y   = _mouseY - panelY,
-					_elm = currentElement;
-					
-				if( _elm !== null ){
-					currentLockTest = currentLockTest === true && _x === 0 && _y === 0;
-					if( _elm.busy() === true ){
-						_elm.mousemove( _x, _y );
-						return true;
-					}
-					if( _elm.hitTest( _x, _y ) === true ){
-						_elm.mousemove( _x, _y ); // cursor
-						return true;
-					}
-					if( currentLock === true ){
-						currentLockTest = true;
-						return true;
-					}
-				};
-				for( var i=0; i<l; ++i ){
-					_elm = PANEL_ELEMENT_ARRAY[ i ];
-					// hitTest
-					if( _elm.hitTest( _x, _y ) === true ){
-						_elm.mousemove( _x, _y ); // cursor
-						currentElement = _elm;
-						return true;
-					};
-				};
-				currentElement = null;							
-				PANEL_ELEMENT_OPERATION_MANAGER.hide();
-				return false;
-			},
-			mouseup: function( _mouseX, _mouseY ){
-				var ret = currentElement !== null && currentElement.busy() === true;
-				ret === true && currentElement.mouseup( _mouseX -startX || panelX, _mouseY -startY || panelY );
-				currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY ) === true;
-				RESIZE_OPERATOR.lock( currentLock );
-				INFOMATION_WINDOW.lock( currentLock );
-				return ret;
-			},
-			mousedown: function( _mouseX, _mouseY ){
-				startX = panelX;
-				startY = panelY;
-				if( currentElement === null) return false
-				currentElement.mousedown( _mouseX -startX, _mouseY -startY);
-				currentLockTest = true;
-				return true;
-			},
-			busy: function(){
-				return currentElement !== null;
-			},
-			createImageElement: function( data ){
-				if( Type.isObject( data ) === false ){
-					PremiumSatge.boot( 1, PANEL_ELEMENT_CONTROL.onImageSelect );
-				} else {
-					PANEL_ELEMENT_CONTROL.onImageSelect( data, true );
-				}
-			},
-			onImageSelect: function( data, isPanelPictureData ){
-				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
-					});
-					_panelElement.init();
-					appendPanelElement( _panelElement );
-					_panelElement.animate( undefined, undefined, Math.abs( data.width ), Math.abs( data.height ) );
-				} else {
-					_panelElement = new ImageElementClass( data );
-					_panelElement.init();
-					appendPanelElement( _panelElement );
-				}
-				HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement], [ true, _panelElement ], true );
-			},
-			createTextElement: function( data ){
-				var _panelElement;
-				if( Type.isObject( data ) === false ){
-					data = {
-						balloon_template_id:1,
-						size:               1,
-						tail:               90,
-						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,
-						width:              200,
-						height:             200,
-						speeches_attributes: {
-							text1: {
-								content:    'Hello'
-							}
-						}
-					}
-					_panelElement = new TextElementClass( data );
-					_panelElement.init();
-					TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, _panelElement, onTextInput );
-				} else {
-					_panelElement = new TextElementClass( data );
-					_panelElement.init();
-					onTextInput( _panelElement );
-				}
-			}
-		}
-	})();
-
-	/*
-	 * end of PANEL_ELEMENT_CONTROL
-	 */
-
-	function updateMouseCursor( _cursor ){
-		if( currentCursor !== _cursor ){
-			currentCursor = _cursor;
-			self.addAsyncCall( update );
-		};
-		function update(){
-			elmMouseEventChatcher.style.cursor = currentCursor;
-		};
-	};
-	function centering(){
-		self.onPaneResize( windowW, windowH );
-	};
-	function mouseEventRellay( e ){
-		var _mouseX = e.clientX,
-			_mouseY = e.clientY,
-			rellayMethod = e.type === 'mouseout' ? 'mouseup' : e.type;
-		if( currentListener !== null && currentListener.busy() === true ){
-			currentListener[ rellayMethod ]( _mouseX, _mouseY );
-		} else {
-			currentListener = null;
-			var l = MOUSE_LISTENER_ARRAY.length,
-				_listener;
-			for( var i=0; i<l; ++i ){
-				_listener = MOUSE_LISTENER_ARRAY[ i ];
-				if( _listener[ rellayMethod ]( _mouseX, _mouseY ) === true ){
-					currentListener = _listener;
-					break;
-				};
-			};
-		};
-		// 文字選択の禁止
-		//!document.selection && window.getSelection().removeAllRanges();
-		return false;
-	};
-
-	/* grobal method */
-	
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		app.rootElement.id = 'editor';
-		app.rootElement.innerHTML = [
-			'<div id="grid" style="display:none;"></div>',
-			'<div id="comic-element-container"></div>',
-			'<div id="whiteGlass-container">',
-				'<div id="whiteGlass-top"></div>',
-				'<div id="whiteGlass-left"></div>',
-				'<div id="whiteGlass-right"></div>',
-				'<div id="whiteGlass-bottom"></div>',
-			'</div>',
-			'<div id="panel-tools-container">',
-			'<div id="panel-resizer-top">▲</div>',
-				'<div id="panel-resizer-bottom">▼</div>',
-				'<div id="comic-element-resizer-container">',
-					'<div class="comic-element-resizer" id="comic-element-resizer-top"></div>',
-					'<div class="comic-element-resizer" id="comic-element-resizer-left"></div>',
-					'<div class="comic-element-resizer" id="comic-element-resizer-right"></div>',
-					'<div class="comic-element-resizer" id="comic-element-resizer-bottom"></div>',
-					'<div class="comic-element-resizer" id="comic-element-resizer-top-left"></div>',
-					'<div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>',
-					'<div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>',
-					'<div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>',
-					'<div id="balloon-tail-mover"></div>',
-					'<div id="comic-element-consol-wrapper">',
-						'<div id="comic-element-consol-tail"></div>',
-						'<div id="comic-element-consol-wrapper-when-out">',
-							'<div id="image-element-consol">',
-								'<div id="change-image-button"></div>',
-								'<div id="layer-back-button"></div>',
-								'<div id="delete-image-button"></div>',
-								'<div id="layer-forward-button"></div>',
-							'</div>',
-							'<div id="text-element-consol">',
-								'<div id="edit-text-button"></div>',
-								'<div id="change-text-style-button"></div>',
-								'<div id="back-text-button"></div>',
-								'<div id="delete-text-button"></div>',
-								'<div id="hide-text-tail-button"></div>',
-								'<div id="forward-text-button"></div>',
-							'</div>',
-						'</div>',
-					'</div>',
-				'</div>',
-			'</div>',
-			'<div id="window-container"></div>',
-			'<div id="menu-bar"></div>',
-			'<div id="mouse-operation-catcher" unselectable="on"></div>',
-			
-			'<div id="templete-container" style="display: none;">',
-			
-				'<div id="imgElementTemplete" class="comic-element-wrapper image-element"></div>',
-				
-				'<div id="textElementTemplete" class="comic-element-wrapper text-element">',
-					'<img>',
-					'<div class="speach">',
-						'<div class="speach-inner">&nbsp;</div>',
-					'</div>',
-				'</div>',
-				
-				'<div id="textElementTempleteForOldIE" class="comic-element-wrapper text-element">',
-					'<img>',
-					'<div class="speach">',
-						'<table><tr><td>&nbsp;</td></tr></table>',
-					'</div>',
-				'</div>',
-				
-				'<div id="imageGroupItemTemplete" class="image-group-item">',
-					'<div class="image-group-item-title">img-title</div>',
-				'</div>',
-				
-				'<div id="windowTemplete" class="window-wrapper">',
-					'<div class="window-header">window title</div>',
-					'<div class="window-close-button">x</div>',
-					'<div class="window-body clearfix">',
-						'<div class="window-body-insert-position"></div>',
-					'</div>',
-					'<div class="window-footer">',
-						'<div class="window-resize-button">／</div>',
-					'</div>',
-				'</div>',
-				
-				'<div id="infomation-window">',
-					'<div id="panel-background-information">',
-						'<div id="bg-pattern"></div>',
-						'<div id="select-bg-pattern-button">pattern</div>',
-						'<div id="reset-bg-pattern-button">x</div>',
-						'<div id="bg-color"></div>',
-						'<div id="select-bg-color-button">color</div>',
-						'<div id="reset-bg-color-button">x</div>',
-						'<!-- <div id="bg-pattern-x"></div>',
-						'<div id="bg-pattern-y"></div>',
-						'<div id="bg-pattern-repeat-x"></div>',
-						'<div id="bg-pattern-repeat-y"></div> -->',
-					'</div>',
-					
-					'<div id="comic-element-infomation">',
-						'<div id="comic-element-x">',
-							'<span class="comic-element-attribute-label">x:</span>',
-							'<span id="comic-element-x-value" class="comic-element-attribute-value editable-value">0</span>',
-						'</div>',
-						'<div id="comic-element-y">',
-							'<span class="comic-element-attribute-label">y:</span>',
-							'<span id="comic-element-y-value" class="comic-element-attribute-value editable-value">0</span>',
-						'</div>',
-						'<div id="comic-element-z">',
-							'<span class="comic-element-attribute-label">z:</span>',
-							'<span id="comic-element-z-value" class="comic-element-attribute-value editable-value">0</span>',
-						'</div>',
-						'<div id="comic-element-a">',
-							'<span id="comic-element-a-value" class="comic-element-attribute-value editable-value">0</span>',
-							'<span class="comic-element-attribute-label">°</span>',
-						'</div>',
-						'<div id="comic-element-w">',
-							'<span class="comic-element-attribute-label">w:</span>',
-							'<span id="comic-element-w-value" class="comic-element-attribute-value editable-value">0</span>',
-						'</div>',
-						'<div id="comic-element-h">',
-							'<span class="comic-element-attribute-label">h:</span>',
-							'<span id="comic-element-h-value" class="comic-element-attribute-value editable-value">0</span>',
-						'</div>',
-						'<div id="comic-element-w-percent">',
-							'<span id="comic-element-w-percent-value" class="comic-element-attribute-value editable-value">0</span>',
-							'<span class="comic-element-attribute-label">%</span>',
-						'</div>',
-						'<div id="comic-element-h-percent">',
-							'<span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>',
-							'<span class="comic-element-attribute-label">%</span>',
-						'</div>',
-		                '<div id="comic-element-keep-aspect"></div>',
-					'</div>',
-				'</div>',
-				
-				'<div id="toolbox-window">',
-					'<div id="toolbox-add-image-button">add image</div>',
-					'<div id="toolbox-add-text-button">add text</div>',
-					'<div id="toolbox-edit-bg-button">edit bg</div>',
-					'<div id="toolbox-switch-grid">grid</div>',
-					'<div id="toolbox-popup-help-button">?</div>',
-					'<div id="toolbox-post-button">post</div>',
-				'</div>',
-				
-				'<div id="image-exproler"><div id="image-exproler-container"></div></div>',
-			
-			'</div>'
-		].join( '' );
-		
-		app.fetchCSS( '/assets/peta.apps.css' );
-		
-		delete app.onInit;
-	};
-	this.onOpen = function( _w, _h, _file ){
-		elmMouseEventChatcher = document.getElementById( 'mouse-operation-catcher' );
-		
-		MENU_BAR_CONTROL.init();
-		HISTORY_CONTROL.init();
-		SAVE_CONTROL.init();
-		WINDOWS_CONTROL.init();
-		GRID_CONTROL.init();
-		WHITE_GLASS_CONTROL.init();
-		PANEL_CONTROL.init();
-		CONSOLE_CONTROLER.init();
-		PANEL_ELEMENT_OPERATION_MANAGER.init();
-		PANEL_ELEMENT_CONTROL.init();
-		
-		/*
-		 * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初
-		 * MENU_BAR_CONTROL,
-		 * WINDOW_CONTROL,
-		 * PANEL_ELEMENT_CONTROL,
-		 * PANEL_CONTROL
-		 * .busy() === true なら、そのままmousemove()にイベントを流す．
-		 * mousemove()に流してみて、false が帰れば、次のリスナーにも流す．
-		 */
-		MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, PANEL_ELEMENT_CONTROL, PANEL_CONTROL );		
-		
-		comicID      = -1;
-		panelID      = -1;
-		panelTimming = -1;
-		phase        = 0;
-		
-		var panelW, panelH,
-			borderSize,
-			fileData, panelElements, panelElm;
-
-		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();
-					panelW        = fileData.width;
-					panelH        = fileData.height;
-					borderSize    = fileData.border;
-					panelElements = fileData.panel_elements;
-					comicID       = fileData.comic ? fileData.comic.id || -1 : -1;
-					panelID       = fileData.id || -1;
-					panelTimming  = fileData.t  || -1;
-				};
-			} else {
-			};
-		} else {
-		};
-		
-		HISTORY_CONTROL.open();
-		SAVE_CONTROL.open();
-		WINDOWS_CONTROL.open();
-		
-		GRID_CONTROL.open();
-		PANEL_CONTROL.open( panelW, panelH, borderSize );
-		CONSOLE_CONTROLER.open();
-		PANEL_ELEMENT_OPERATION_MANAGER.open();
-		PANEL_ELEMENT_CONTROL.open();
-		
-		// last
-		MENU_BAR_CONTROL.open();
-		
-		windowW = _w;
-		windowH = _h;
-		self.onPaneResize( _w, _h );
-		
-
-		if( Type.isArray( panelElements ) === true ){
-			for( var i=0; i<panelElements.length; ++i ){
-				panelElm = panelElements[ i ];
-				if( panelElm.resource_picture ){
-					PANEL_ELEMENT_CONTROL.createImageElement( panelElm );
-				} else
-				if( panelElm.balloon_template_id ){
-					PANEL_ELEMENT_CONTROL.createTextElement( panelElm );
-				};
-			};
-		};
-		
-	/*
-	 * centering
-	 */
-		self.addKeyEventListener( 'keydown', centering, 96, false, true );	// ctrl + 0
-		self.addKeyEventListener( 'krydown', centering, 48, false, true );	// ctrl + 0
-		MENU_BAR_CONTROL.EDIT.createOption( 'centering', 'ctrl + 0', centering, true, true, true);
-	/*
-	 * jqMouseEventChacher は透明な要素で、
-	 * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事
-	 * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。
-	 */
-		self.addMouseEventListener( elmMouseEventChatcher, 'mousemove', mouseEventRellay );
-		self.addMouseEventListener( elmMouseEventChatcher, 'mousedown', mouseEventRellay );
-		self.addMouseEventListener( elmMouseEventChatcher, 'mouseup',   mouseEventRellay );
-		//self.addMouseEventListener( elmMouseEventChatcher, 'mouseout',  mouseEventRellay );
-		
-		phase   = 1;
-		
-		delete app.onOpen;
-	};
-	this.onClose = function(){
-		phase   = 2;
-		HISTORY_CONTROL.close();
-		
-		WINDOWS_CONTROL.close();
-		
-		GRID_CONTROL.close();
-		PANEL_CONTROL.close();
-		
-		PANEL_ELEMENT_OPERATION_MANAGER.close();
-		PANEL_ELEMENT_CONTROL.close();
-		
-		// last
-		MENU_BAR_CONTROL.close();
-		
-		phase = -1;
-	};
-	this.onPaneResize = function( _windowW, _windowH ){
-		windowW = _windowW || windowW;
-		windowH = _windowH || windowH;
-		/*
-		 * ieは +'px'が不要みたい
-		 */
-		self.rootElement.style.height = _windowH + 'px';
-		elmMouseEventChatcher.style.height = _windowH + 'px';
-		
-		WINDOWS_CONTROL.onWindowResize( _windowW, _windowH );
-		MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH );
-		PANEL_CONTROL.onWindowResize( _windowW, _windowH );
-	};
-}, false, true, 'Panel Editor', 'paneleditor', null, '#2D89F0' );
-
-
-var ComicConsole = gOS.registerApplication( function(){
-	var elmHeader, elmProgress,
-		winW, winH,
-		inputTitle, inputW, inputH,
-		comboboxVisible, // comboboxEditable,
-		buttonSubmit, buttonCancel,
-		elmUploader = null,
-		elmScript   = null,
-		elmIframe   = null,
-		elmForm     = null,
-		isUploading = false,
-		instance    = this;
-	//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
-	
-	function clickOK(){
-		if( !elmForm || !elmIframe || isUploading === true ) return false;
-		// validate
-		isUploading = true;
-		elmProgress.innerHTML = '■';
-		copyAndSubmit();
-	};
-
-		function copyAndSubmit(){
-			var _inputList = elmForm.getElementsByTagName( 'input' ),
-				_input, _name;
-			for( var i = _inputList.length; i; ){
-				_input = _inputList[ --i ];
-				_name = _input.name;
-				if( _name === 'comic[title]'){
-					_input.value = inputTitle.value();
-				} else
-				if( _name === 'comic[width]'){
-					_input.value = inputW.value();
-				} else
-				if( _name === 'comic[height]'){
-					_input.value = inputH.value();
-				};
-			};
-			var _selectList = elmForm.getElementsByTagName( 'select' ),
-				_select, _optionList;
-			for( i = _selectList.length; i; ){
-				_select = _selectList[ --i ];
-				_name = _select.name;
-				_optionList = _select.getElementsByTagName( 'option' )
-				if( _name === 'comic[visible]'){
-					_select.selectedIndex = comboboxVisible.selectIndex();
-				} else
-				if( _name === 'comic[editable]'){
-					// _select.selectedIndex = comboboxEditable.selectIndex();
-				};
-			};
-			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 = onIframeUpdate;
-			};
-			elmProgress.innerHTML = 'uploading..';
-		};
-	/*
-	 * ie の 場合、readyState をチェック．
-	 */
-			function detectIframe(){
-	            if ( elmIframe.readyState === 'complete' ){
-	                elmIframe.onreadystatechange = new Function();
-	                elmIframe.onreadystatechange = null;
-	                onIframeUpdate();
-	            };
-			};
-				function onIframeUpdate(){
-					elmIframe.onload = null;
-					try {
-						console.log( ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).document.body.innerHTML );
-					} catch(e){
-						
-					}
-					
-					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-					elmIframe = null;
-					elmProgress.innerHTML = 'success!';
-					instance.addTimer( clickCancel , 1000 );
-					isUploading = false;
-				};
-			
-	function clickCancel(){
-		if( isUploading === true ) return false;
-		ComicConsole.shutdown();
-	};
-	function detectForm(){
-		elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];
-		if( elmForm ){
-			var selectList = elmForm.getElementsByTagName( 'select' ),
-				select,
-				j, m,
-				optionList, option;
-			for( var i=0, l=selectList.length; i<l; ++i ){
-				select = selectList[ i ];
-				optionList = select.getElementsByTagName( 'option' );
-				for( j=0, m=optionList.length; j<m; ++j ){
-					option = optionList[ j ];
-					if( select.name === 'comic[visible]' ){
-						comboboxVisible.createOption( option.innerHTML, option.value, option.selected );
-					} else
-					if( select.name === 'comic[editable]' ){
-						// comboboxEditable.createOption( option.innerHTML, option.value, option.selected );
-					};
-				};
-			};
-			
-			instance.removeTimer( detectForm );
-			Util.createIframe( 'targetFrameCreateComic', onCreateIframe );
-			elmProgress.innerHTML = 'create iframe';
-			
-			instance.onPaneResize( winW, winH );
-			inputTitle.focus();
-		};
-	};
-	function onCreateIframe( _iframe ){
-		elmUploader.appendChild( _iframe );
-		elmIframe             = _iframe;
-		elmForm.target        = _iframe.name;
-		elmProgress.innerHTML = '';
-	};
-
-	/* grobal method */
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		instance.rootElement.id = 'comic-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
-			'<div id="comic-console-header" class="console-header">Create New Comic</div>',
-			'<div id="comic-console" class="console-inner">',
-				'<div id="comic-console-title" class="field">',
-					'<span class="field-label">Title:</span>',
-					'<span id="comic-console-title-value" class="comic-console-value editable-value">No Title</span>',
-				'</div>',
-				'<div id="comic-console-width" class="field">',
-					'<span class="field-label">Default Width:</span>',
-					'<span id="comic-console-width-value" class="comic-console-value editable-value">300</span>',
-				'</div>',
-				'<div id="comic-console-height" class="field">',
-					'<span class="field-label">Default Height:</span>',
-					'<span id="comic-console-height-value" class="comic-console-value editable-value">200</span>',
-				'</div>',
-				'<div id="comic-console-visible" class="field">',
-					'<span class="field-label">Visible:</span>',
-					'<span id="comic-console-visible-value" class="comic-console-value combobox"></span>',
-				'</div>',
-				//'<div id="comic-console-editable" class="field">',
-				//	'<span class="field-label">Editable:</span>',
-				//	'<span id="comic-console-editable-value" class="comic-console-value combobox"></span>',
-				//'</div>',
-				'<div class="console-button-container">',
-					'<div id="comic-console-post-button" class="button console-submit-button">create</div>',
-					'<div id="comic-console-cancel-button" class="button console-cancel-button">cancel</div>',
-				'</div>',
-				'<div id="comic-console-progress" class="console-progress">&nbsp;</div>',
-			'</div>'
-		].join( '' );
-		
-		instance.fetchCSS( '/assets/peta.apps.css' );
-		
-		delete instance.onInit;
-	};
-	this.onOpen = function( w, h ){
-		var ui           = instance.createUIGroup();
-		
-		inputTitle       = ui.createInputText( document.getElementById( 'comic-console-title') );
-		inputW           = ui.createInputText( document.getElementById( 'comic-console-width') );
-		inputH           = ui.createInputText( document.getElementById( 'comic-console-height') );
-		comboboxVisible  = ui.createCombobox( document.getElementById( 'comic-console-visible') );
-		// comboboxEditable = ui.createCombobox( document.getElementById( 'comic-console-editable') );
-		buttonSubmit     = ui.createButton( document.getElementById( 'comic-console-post-button'), clickOK );
-		buttonCancel     = ui.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel );
-		
-		elmHeader        = document.getElementById( 'comic-console-header' );
-		elmProgress      = document.getElementById( 'comic-console-progress' );
-		
-		elmUploader      = document.createElement( 'div' );
-		instance.rootElement.appendChild( elmUploader );
-		elmUploader.id   = 'newcomic';
-		elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;overflow:hidden;';
-		
-		elmScript        = document.createElement( 'script' );
-		document.body.appendChild( elmScript );
-		elmScript.type   = 'text\/javascript';
-		elmScript.src    = pettanr.CONST.CREATE_COMIC_JS;
-		
-		elmProgress.innerHTML = 'loading form.';
-		
-		instance.addTimer( detectForm, 250 );
-		instance.onPaneResize( w, h );
-		
-		delete instance.onOpen;
-	};
-	this.onPaneResize = function( _w, _h ){
-		winW = _w;
-		winH = _h;
-		instance.rootElement.style.cssText = [
-			'left:', Math.floor( ( _w - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-			'top:',  Math.floor( ( _h- instance.rootElement.offsetHeight ) /2 ), 'px;'
-		].join( '' );
-	};
-	this.onClose = function(){
-		elmHeader = elmProgress = elmForm  = elmUploader = instance = null;
-		isUploading = false;
-	};
-}, true, true, 'Comic Console', 'comicConsole', null, '#D44A26' );
-
-var UploadConsole = gOS.registerApplication( function(){
-	var windowW, windowH,
-		TARGET_FRAME_NAME = 'targetFrame',
-		elmContainer,
-		elmProgress,
-		elmScript   = null,
-		elmForm     = null,
-		elmFile     = null,
-		elmIframe   = null,
-		isUploading = false,
-		instance    = this;
-	/*
-	 * upload ボタンが押されたらまず iframe をつくる．
-	 */
-	function clickOK(){
-		if( !elmForm || !elmIframe || isUploading === true ) return false;
-		if( elmFile.value.length === 0 ) return false;
-		elmProgress.innerHTML = 'uploading.';
-		isUploading = true;
-		submit();
-		return false;
-	};
-	/*
-	 * form の target に iframe を指定したのち submit();
-	 */
-		function submit(){
-			try {
-				elmForm.submit();
-			} catch( e){
-				elmProgress.innerHTML = 'submit() err..';
-				isUploading = false;
-				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(){
-					elmIframe.onload = null;
-					( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();
-					elmProgress.innerHTML = 'success!';
-					instance.addTimer( clickCancel , 1000 );
-					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 === 'file' ){
-					elmFile = _input;
-				};
-				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;
-		UploadConsole.shutdown();
-		return false;
-	};
-
-	/* grobal method */
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		instance.rootElement.id = 'upload-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
-			'<div id="upload-console-header" class="console-header">Upload Picture</div>',
-			'<div id="upload-console" class="console-inner">',
-				'<div id="uploader"></div>',
-				'<div class="console-button-container">',
-					'<div id="upload-console-post-button" class="button console-submit-button">upload</div>',
-					'<div id="upload-console-cancel-button" class="button console-cancel-button">cancel</div>',
-				'</div>',
-				'<div id="upload-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( 'uploader' );
-		elmProgress  = document.getElementById( 'upload-console-progress' );
-		
-		instance.addMouseEventListener( document.getElementById( 'upload-console-post-button' ), 'click', clickOK );
-		instance.addMouseEventListener( document.getElementById( 'upload-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.UPLOAD_PICTURE_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, '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',
-		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(){
-					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;
-		ArtistConsole.shutdown();
-		return false;
-	}
-
-	/* grobal method */
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		instance.rootElement.id = 'artist-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
-			'<div id="artist-console-header" class="console-header">Register Artist</div>',
-			'<div id="artist-console" class="console-inner">',
-				'<div id="register"></div>',
-				'<div class="console-button-container">',
-					'<div id="artist-console-post-button" class="button console-submit-button">register</div>',
-					'<div id="artist-console-cancel-button" class="button console-cancel-button">cancel</div>',
-				'</div>',
-				'<div id="artist-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( 'register');
-		elmProgress  = document.getElementById( 'artist-console-progress');
-		
-		instance.addMouseEventListener( document.getElementById( 'artist-console-post-button' ), 'click', clickOK );
-		instance.addMouseEventListener( document.getElementById( 'artist-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.REGISTER_ARTIST_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, '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 ));
-		};
-
-		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 ){
-				url = [ pettanr.CONST.RESOURCE_PICTURE_PATH, _panelElement.resourcePicture().id, '.', _panelElement.resourcePicture().ext ].join( '' );
-				return [
-					'<img ',
-						'src="',        isAbsoluteUrl !== true ? url : Util.getAbsolutePath( url ), '" ',
-						'width="',      _panelElement.w, '" ',
-						'height="',     _panelElement.h, '" ',
-						'style="',
-							'left:',    _panelElement.x, 'px;',
-							'top:',     _panelElement.y, 'px;',
-							'z-index:', _panelElement.z, ';',
-						'"',
-					isXHTML !== true ? '>' : ' \/>'
-				].join( '');				
-			} else {
-				url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.angle() );
-				return [
-					'<img ',
-						'src="',        isAbsoluteUrl !== true ? url : Util.getAbsolutePath( url ), '" ',
-						'width="',      _panelElement.w, '" ',
-						'height="',     _panelElement.h, '" ',
-						'style="',									
-							'left:',    _panelElement.x, 'px;',
-							'top:',     _panelElement.y, 'px;',
-							'z-index:', _panelElement.z, ';',
-						'"',
-					isXHTML !== true ? '>' : ' \/>',
-					pettanr.LINE_FEED_CODE_TEXTAREA,
-					'<div class="balloon" style="',
-						'left:',        _panelElement.x, 'px;',
-						'top:',         _panelElement.y, 'px;',
-						'width:',       _panelElement.w, 'px;',
-						'height:',      _panelElement.h, 'px;',
-						'z-index:',     _panelElement.z,
-					'"><span>', _panelElement.text(), '<\/span>', '<\/div>'
-						
-				].join( '');				
-			};
-		};
-	
-	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 [
-				'{', cr,
-					'"resource_picture": {', cr,
-						'"id": ',              _imageElement.resourcePicture().id, ',', cr,
-						'"ext": ',             '"',_imageElement.resourcePicture().ext, '"', cr,
-					'},', cr,
-					'"x": ',                   _imageElement.x, ',', cr,
-					'"y": ',                   _imageElement.y, ',', cr,
-					'"z": ',                   _imageElement.z, ',', cr,
-					'"width": ',               _imageElement.flipH() * _imageElement.w, ',', cr,
-					'"height": ',              _imageElement.flipV() * _imageElement.h, ',', cr,
-					'"t": ',                   timing, cr,
-				'}'
-			].join( '');
-		};
-	
-	function 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,
-				'}'
-			].join( '');
-		};
-
-		function balloonToJson( _textElement ){
-			var cr = pettanr.LINE_FEED_CODE_TEXTAREA;
-			return [
-				'{', cr,
-					'"balloon_template_id": ', 1, ',', cr,
-					'"system_picture_id": ',   1, ',', cr,
-					'"size": ',                1, ',', cr,
-					'"tail": ',                _textElement.angle(), ',', cr,
-					'"x": ',                   _textElement.x, ',', cr,
-					'"y": ',                   _textElement.y, ',', cr,
-					'"z": ',                   _textElement.z, ',', cr,
-					'"t": ',                   timing, ',', cr,
-					'"width": ',               _textElement.w, ',', cr,
-					'"height": ',              _textElement.h, ',', cr,
-					'"speeches_attributes": {', cr,
-						'"newf', timing, '": {', cr,
-    						'"content": "', _textElement.text(), '",', cr,
-							'"x": ',        _textElement.x, ',', cr,
-							'"y": ',        _textElement.y, ',', cr,
-							'"t": ',        timing, ',', cr,
-							'"width": ',    _textElement.w, ',', cr,
-							'"height": ',   _textElement.h, cr,
-						'}', cr,
-					'}', cr,
-				'}'
-			].join( '');
-		};
-	
-	function clickGenerate(){
-		var i = comboboxFormat.selectIndex(),
-			text = 'sorry...';
-		if( i === 0 ){
-			text = getJsonPostString();
-		} else
-		if( i === 1 ){
-			text = getJsonGetString();
-		} else
-		if( i === 3 ){
-			text = getAsHtmlString( false, false );
-		} else {
-			
-		};
-		elmOutputArea.value = text;
-	};
-	function clickClose(){
-		OutputConsole.shutdown();
-		return false;
-	};
-	
-	/* grobal method */
-	this.MIN_WIDTH   = 320;
-	this.MIN_HEIGHT  = 320;
-	this.onInit = function(){
-		instance.rootElement.id = 'output-console-wrapper';
-		instance.rootElement.className = 'console-wrapper';
-		instance.rootElement.innerHTML = [
-			'<div id="output-console-header" class="console-header">Output Console</div>',
-			'<div id="output-console" class="console-inner">',
-				'<div id="output-console-format" class="field">',
-					'<span class="field-label">Format:</span>',
-					'<span id="output-console-format-value" class="output-console-value combobox"></span>',
-				'</div>',
-				'<div id="output-console-option" class="field">',
-					'<span class="field-label">Options:</span>',
-					'<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-close-button" class="button console-cancel-button">close</div>',
-				'</div>',
-				'<textarea id="output-area" readonly></textarea>',
-			'</div>'
-		].join( '' );
-
-		instance.fetchCSS( '/assets/peta.apps.css' );
-
-		delete instance.onInit;
-	};
-	this.onOpen = function( _w, _h, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElementArray ){
-		elmOutputArea = document.getElementById( 'output-area' );
-		
-		var ui = instance.createUIGroup();
-		comboboxFormat = ui.createCombobox( document.getElementById( 'output-console-format' ), clickGenerate );
-		
-		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 );
-		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;
-		
-		clickGenerate();
-	};
-	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(){
-		elmOutputArea.value = '';
-		elmOutputArea = comboboxFormat = inputOption = buttonGenerate = buttonClose = panelElementArray = instance = null;
-	};
-}, true, false, 'Output Console', 'outputConsole', null, '#2D89F0' );
-
-})( pettanr, gOS, window );
-- 
2.11.0