From b323f6811250f4ea930a3338fa88fc4ccca9e11e Mon Sep 17 00:00:00 2001
From: itozyun <itozyun@git.sourceforge.jp>
Date: Tue, 6 Mar 2012 19:42:40 +0900
Subject: [PATCH] fixed assets/ & views/layouts/

---
 .project                               |   24 +
 Gemfile.lock                           |    2 +-
 app/assets/javascripts/common.js       | 1058 +++++++++++++++++++++-----------
 app/assets/javascripts/system.js       |  267 ++++----
 app/assets/javascripts/work.js         |  918 +++++++++++++++------------
 app/assets/stylesheets/common.css      |  163 +++--
 app/assets/stylesheets/work.css        |  259 ++++----
 app/models/author.rb                   |    2 +-
 app/views/layouts/application.html.erb |   86 ++-
 db/schema.rb                           |   28 +-
 public/assets/assets.lnk               |  Bin 0 -> 440 bytes
 public/assets/common.js                | 1058 +++++++++++++++++++++-----------
 public/assets/system.js                |  267 ++++----
 public/assets/work.js                  |  918 +++++++++++++++------------
 14 files changed, 3037 insertions(+), 2013 deletions(-)
 create mode 100644 .project
 create mode 100644 public/assets/assets.lnk

diff --git a/.project b/.project
new file mode 100644
index 00000000..04f21bb8
--- /dev/null
+++ b/.project
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>pettanR.heroku</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.rubypeople.rdt.core.rubybuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.ide.project.nature.web</nature>
+		<nature>org.rubypeople.rdt.core.rubynature</nature>
+		<nature>org.radrails.rails.core.railsnature</nature>
+	</natures>
+</projectDescription>
diff --git a/Gemfile.lock b/Gemfile.lock
index 8c9ad925..30c6cd9a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -152,7 +152,7 @@ GEM
     sprockets (2.0.3)
       hike (~> 1.2)
       rack (~> 1.0)
-      tilt (!= 1.3.0, ~> 1.1)
+      tilt (~> 1.1, != 1.3.0)
     sqlite3 (1.3.5-x86-mingw32)
     term-ansicolor (1.0.7)
     therubyracer-heroku (0.8.1.pre3)
diff --git a/app/assets/javascripts/common.js b/app/assets/javascripts/common.js
index 5424edb6..c0f241cf 100644
--- a/app/assets/javascripts/common.js
+++ b/app/assets/javascripts/common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR common.js
- *   version 0.4.1
+ *   version 0.4.2
  * 
  * author: itozyun
  */
@@ -37,10 +37,10 @@ var pettanr = ( function(){
 		    }
 		    return {};
 		})(),
-		IS_DEBUG = IS_LOCAL === true || URL_PARAMS.debug === true,
+		IS_DEBUG = typeof URL_PARAMS.debug === 'boolean' ? URL_PARAMS.debug : IS_LOCAL === true,
 		jqWindow , jqDocument , jqBody;
 	return {
-		version: '0.4.1',
+		version: '0.4.2',
 		init: function(){
 			jqWindow = $( window);
 			jqDocument = $( document);
@@ -69,8 +69,32 @@ var pettanr = ( function(){
 			return jqBody;
 		},
 		URL_PARAMS: URL_PARAMS,
+		ROOT_PATH: ( function(){
+			// script と html の ドメインが一致
+			var _h1 = document.getElementsByTagName( 'h1')[ 0],
+				_a = _h1.getElementsByTagName( 'a')[ 0],
+				_root = _a.href.split( '\/'),
+				_current = document.location.href.split( '\/'),
+				ret = '.\/';
+			for( var i=0, l=_current.length - _root.length; i<l; ++i){
+				ret = '.' + ret;
+			}
+			return ret;
+			// script と html の ドメインが不一致
+		})(),
 		LOCAL: IS_LOCAL,
-		DEBUG: IS_DEBUG
+		DEBUG: IS_DEBUG,
+		LINE_FEED_CODE_TEXTAREA: ( function(){
+			var text = document.createElement('textarea');
+			text.value = '\n';
+			return text.value;
+		})(),
+		LINE_FEED_CODE_PRE: ( function(){
+			var pre = document.createElement('pre');
+			pre.appendChild( document.createTextNode('\n'));
+			return pre.firstChild.data;
+		})(),
+		IS_IFRAME: !!window.parent
 	}
 })();
 
@@ -119,56 +143,53 @@ pettanr.util = ( function(){
 	nodeNoscript = noscript = null;
 	
 	function cleanCommnetNode( _targetElm){
-		var _elms = ( _targetElm || document).getElementsByTagName( '*'),
-			_elm,
-			i = 0;
-		while( i < _elms.length){
-			_elm = _elms[ i];
-			if( _elm.nodeType === 8 && _elm.parentNode){
-				_elm.parentNode.removeChild( _elm);
-			} else {
-				++i;
-			}
+		_targetElm = _targetElm || document;
+		var _nodes = _targetElm.all || _targetElm.getElementsByTagName( '*'),
+			_array = [],
+			_elm;
+		for(var i=0, l = _nodes.length; i<l; ++i){
+			_array.push( _nodes[ i]);
+		}
+		for( i=0; i<l; ++i){
+			_elm = _array[ i];
+			_elm.nodeType === 8 && _elm.parentNode && _elm.parentNode.removeChild( _elm);
 		}
 	}
 	return {
 		extend: function( baseInstance, extend){
 			for( var key in extend){
-				baseInstance[ key] = extend[ key];
-			}
-			return baseInstance;
-		},
-		createGlobalUniqueName: function(){
-			var randomKey = null;
-			while(true) {
-				randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');
-				if( window[randomKey] === undefined){
-					break;
+				if( typeof baseInstance[ key] === 'undefined'){
+					baseInstance[ key] = extend[ key];
+				} else
+				if( typeof baseInstance[ key] === typeof extend[ key]){
+					baseInstance[ key] = extend[ key];
+				} else {
+					alert( 'extend error');
 				}
 			}
-			return randomKey;
+			return baseInstance;
 		},	
 		cleanCommnetNode: cleanCommnetNode,
 		cleanElement: function( _targetElm){
-			var l = CLEAN_TARGET_ELEMENT.length,
-				elms, elm, j;
-			for( var i=0; i<l; ++i){
-				elms = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);
-				if( elms.length > 0){
-					for( j=0; i<elms.length; ++j){
-						elm = elms[ 0];
-						elm.parentNode && elm.parentNode.removeChild( elm);
-					}
+			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);
 			if( pettanr.ua.isIE === false) return;
-			elms = document.getElementsByName( '*');
-			l = elms.length;
-			for(i=0; i<l; ++i){
-				elm = elms[ i];
-				elm.style.filter = '';
-				elm.style.behavior = '';
+			_nodes = _targetElm.all || _targetElm.getElementsByName( '*');
+			for( i=0, l = _nodes.length; i<l; ++i){
+				_elm = _nodes[ i];
+				_elm.style.filter = '';
+				_elm.style.behavior = '';
 			}
 		},
 		getElementSize: function( _elm){
@@ -294,27 +315,39 @@ pettanr.util = ( function(){
 			}
 			abstractPath = this.getAbsolutePath( src);
 			
-			loadImage( images, abstractPath,
-				function( abspath, actualW, actualH){
-					if( abstractPath !== abspath) return;
-					onLoad && setTimeout( function(){ // 一度読み込まれた画像は即座にonLoadされてしまうので遅延
-						onLoad( src, actualW, actualH);
-					}, 0);
-				},
-				function( abspath){
-					if( abstractPath !== abspath) return;
-					onError && setTimeout( function(){
-						onError( src);
-					}, 0);
-				}, delay, timeout
-			);
+			loadImage( images, abstractPath, onLoadAsync, onErrorAsync, delay, timeout);
+			
+			function onLoadAsync( abspath, actualW, actualH){
+				if( abstractPath !== abspath) return;
+				var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onLoad);
+					_onTimeout = pettanr.util.createGlobalFunc( [
+						'function(){',
+							'window["', _g_onUpdateFunction, '"]( "', abspath, '", ', actualW, ',  ', actualH, ');',
+							'window["', _g_onUpdateFunction, '"] = null;',
+						'}'
+					].join( ''));
+				onLoad && setTimeout( window[ _onTimeout], 0);
+				window[ _onTimeout] = null;
+			}
+			function onErrorAsync( abspath){
+				if( abstractPath !== abspath) return;
+				var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onError);
+					_onTimeout = pettanr.util.createGlobalFunc( [
+						'function(){',
+							'window["', _g_onUpdateFunction, '"]( "', abspath, '");',
+							'window["', _g_onUpdateFunction, '"] = null;',
+						'}'
+					].join( ''));
+				onError && setTimeout( window[ _onTimeout], 0);
+				window[ _onTimeout] = null;
+			}
 			
 		/*  LICENSE: MIT?
 		 *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631
 		 *  AUTHOR: uupaa.js@gmail.com
 		 * 
 		 *  fixed for ie6-8 by pettanr
-		 *   new Image -> document.createElement( 'IMG')
+		 *   new Image -> document.createElement( 'img')
 		 */
 			function loadImage( images, abspath, onLoad, onError, delay, timeout) {
 				images = images || document.images;
@@ -402,6 +435,89 @@ pettanr.util = ( function(){
 				IDorELM.id = '';
 			}
 			return IDorELM;
+		},
+		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];
+				if( _node.nodeType === 1){
+					_classes = _node.className.split( ' ');
+					for( var j=0, m=_classes.length; j<m; ++j){
+						if( _classes[ j] === _className){
+							ret.push( _node);
+							break;
+						}
+					}
+				}
+			}
+			return ret;
+		},
+		hasClassName: function( _elm, _className){
+			var _classes = _elm.className.split( ' ');
+			for( var i=0, l=_classes.length; i<l; ++i){
+				if( _classes[ i] === _className) return true;
+			}
+			return false;
+		},
+		removeAllChildren: function ( _elm){
+			while( _elm.firstChild){
+				remove( _elm.firstChild);
+			}
+			function remove( _node){
+				while( _node.firstChild){
+					remove( _node.firstChild);
+				}
+				_node.parentNode && _node.parentNode.removeChild( _node);
+			}
+		},
+		/*
+		 * 
+		 */
+		createGlobalFunction: function( _func) {
+			var randomKey = null;
+			while( true) {
+				randomKey = '_glovalFunction_' + ( '' + Math.random()).replace( /\./,'');
+				if( eval( 'typeof '+randomKey) === 'undefined') {
+					break;
+				}
+			}
+			window[ randomKey] = _func;
+			return randomKey;
+		},
+		createGlobalFunc: function( func){
+			var randomKey = null;
+			while(true) {
+				randomKey = 'hogeGlovalFunc_'+(''+Math.random()).replace(/\./,'');
+				if(eval('typeof '+randomKey) == 'undefined') {
+					break;
+				}
+			}
+			eval(randomKey+'='+((typeof func=='string') ? func : func.toString()));
+			return randomKey;
+		},
+		createGlobalVar: function( obj){
+			var randomKey = null;
+			while(true) {
+				randomKey = 'hogeGlovalVar_'+(''+Math.random()).replace(/\./,'');
+				if(eval('typeof '+randomKey+'') == 'undefined') {
+					break;
+				}
+			}
+			var globalObj = eval(randomKey+'={}');
+			globalObj.value = obj;
+			return randomKey;
+		},
+		createGlobalUniqueName: function(){
+			var randomKey = null;
+			while(true) {
+				randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');
+				if( typeof window[randomKey] === 'undefined'){
+					break;
+				}
+			}
+			return randomKey;
 		}
 	}
 })();
@@ -496,16 +612,21 @@ pettanr.ua = ( function(){
 		})(),
 		ACTIVEX: ( function(){
 			if( isIE === false || ieVersion > 8) return false;
-			var className = document.body.className,
-				test;
-			if( className && className.indexOf( 'pettanr-ActiveX-enabled') !== -1) return true;
-			if( className && className.indexOf( 'pettanr-ActiveX-disabled') !== -1) return false;
-			try {
-				test = new ActiveXObject('DXImageTransform.Microsoft.gradient');
-			} catch( e){
-				return false;
+			var	b = document.body,
+				c = b.className || '',
+				x,
+				ret = pettanr.URL_PARAMS.ActiveX;
+			if( ret === undefined){
+				if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-enabled') === true) return true;
+				if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-disabled') === true) return false;
+				x = document.createElement('div');
+				b.appendChild(x);
+				x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';
+				ret = x.offsetHeight > 1;
+				b.removeChild(x);
 			}
-			return !!test;
+			b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', ret === true ? 'enabled' : 'disabled'].join( '');
+			return ret;
 		})(),
 		VML: VML,
 		STANDALONE: isStandAloneMode,
@@ -522,10 +643,14 @@ pettanr.ua = ( function(){
 
 
 pettanr.CONST = ( function(){
-	var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false;
+	var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,
+		RETTANR_ROOOT_PATH = 'http:\/\/pettanr.heroku.com\/';
 	return {
-		URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : 'http:\/\/pettanr.heroku.com\/') + 'original_pictures.json',
-		URL_PANELS_JSON:			( isLocal === true ? 'json\/' : 'http:\/\/pettanr.heroku.com\/') + 'panels.json'
+		PETTANR_ROOT_PATH:			RETTANR_ROOOT_PATH,
+		URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'original_pictures.json',
+		URL_PANELS_JSON:			( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'panels.json',
+		NS_PETTANR_COMIC:			'pettanr-comic',
+		RESOURCE_PICTURE_PATH:		( isLocal === true ? pettanr.ROOT_PATH : RETTANR_ROOOT_PATH) + 'resource_pictures\/'
 	}
 })();
 
@@ -535,7 +660,7 @@ pettanr.view = ( function(){
 	var location = document.location.pathname,
 		isWorkPage = location.indexOf( '\/work.html') !== -1 || location.indexOf( '\work.html') !== -1,
 		deep =	location.indexOf( '\/diary\/') !== -1 ||
-				location.indexOf( '\/text\/') !== -1 ||
+				location.indexOf( '\/test\/') !== -1 ||
 				location.indexOf( '\/help\/') !== -1 ||
 				location.indexOf( '\/sitemap\/') !== -1 ||
 				location.indexOf( '\/wiki\/') !== -1,
@@ -570,7 +695,7 @@ pettanr.view = ( function(){
 					el.style.position = 'absolute';
 					el.style.left = el.style.top = '0px';
 					el.style.width = el.style.height ='100%';
-					el.style.overflow = 'hidden';
+					//el.style.overflow = 'hidden';
 					el.hspace = el.vspace = el.marginheight = el.marginwidth = 0;
 					
 					_body.appendChild(el);
@@ -655,55 +780,71 @@ pettanr.view = ( function(){
 		LoginUserNavi = ( function(){
 			return {
 				show: function(){
-					var index = ( function( a){
-						var node = a.parentNode.getElementsByTagName( 'a'),
-							l = node.length;
-						for( var i=0; i<l; ++i){
-							if( node[ i] === a) return i
+					var _nodes = this.parentNode.getElementsByTagName( 'a');
+					for( var i=0, l=_nodes.length; i<l; ++i){
+						if( _nodes[ i] === this){
+							pettanr.view.show( i);
+							break;
 						}
-						return -1;
-					})( this);
-					if( index === -1) return false;
-					
-					pettanr.view.show( index);
+					}
 					return false;
 				},
 				hide: function(){}
 			}
 		})();
-		
-		var elmDl = document.getElementById( 'useragent'),
-			elmDt, elmDd,
-			data = {
-				ua:			navigator.userAgent,
-				platform:	navigator.platform,
-				appVersion:	navigator.appVersion,
-				appCodeName:navigator.appCodeName,
-				appName:	navigator.appName,
-				language:	navigator.browserLanguage || navigator.language
-			},
-			ua = pettanr.ua;
-		if( ua.IE){
-			//data.ua = 'Internet Explorer';
-			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;
+
+		if( pettanr.IS_IFRAME === true){
+			var _nodes = document.getElementsByTagName( 'a'),
+				_a, _href;
+			for(var i=0, l = _nodes.length; i<l; i++){
+				_a = _nodes[ i];
+				_href = _a.href.split('?')[0].split('#')[0];
+				if( pettanr.util.getAbsolutePath( _href) !== location) _a.target = '_parent';
 			}
 		}
-		data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';
 		
-		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);
+		if( pettanr.DEBUG === true){
+			var elmDl = document.getElementById( 'useragent'),
+				elmDt, elmDd,
+				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:	pettanr.ua.ACTIVEX
+				},
+				ua = pettanr.ua;
+			if( ua.IE){
+				//data.ua = 'Internet Explorer';
+				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;
+				}
+			}
+			data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';
+			
+			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);
+			}
+		} else {
+			var _debug = document.getElementById( 'debug');
+			if( _debug){
+				pettanr.util.removeAllChildren( _debug);
+				_debug.parentNode.removeChild( _debug);
+			}
 		}
 	}
 
@@ -712,10 +853,7 @@ pettanr.view = ( function(){
 		origin = document.createElement('a'),
 		items = ( function(){
 			var ret = ['Home', 'Comic list', 'Picture', 'Setting'];
-			if( pettanr.DEBUG === true) {
-				ret.push( 'debug');
-				navi.style.width = '400px';
-			}			
+			pettanr.DEBUG === true && ret.push( 'debug');
 			return ret;
 		})(),
 		l = items.length,
@@ -727,6 +865,7 @@ pettanr.view = ( function(){
 		item.onclick = LoginUserNavi.show;
 		navi.appendChild( item);
 	}
+	navi.style.width = ( ( item.offsetWidth || 80) * l) +'px';
 	location = origin = item = null;
 	
 	/* debug info */
@@ -1065,7 +1204,7 @@ pettanr.overlay = ( function(){
 		}
 	})();
 	/*
-	 * 
+	 * 
 	 */
 
 	function close(){
@@ -1129,15 +1268,6 @@ pettanr.overlay = ( function(){
  * KEY
  * 
  *  - EDITABLE_TEXT_CONTROL
- *    - EditableTextClass
- *      .update: function,
- *      .show: function,
- *      .hide: function,
- *      .start: function,
- *      .finish: finish,
- *      .enabled: function,
- *      .index: function,
- *      .instance: function
  * 
  *    .SHIFT_DOWN_EVENT:	'shiftDown',
  *    .SHIFT_UP_EVENT:		'shiftUp',
@@ -1146,9 +1276,8 @@ pettanr.overlay = ( function(){
  *    .SPACE_DOWN_EVENT:	'spaceDown',
  *    .SPACE_UP_EVENT:		'spaceUp',
  *    .init:				function,
- *    .addKeyDownEvent:			function,
+ *    .addKeyDownEvent:		function,
  *    .keyEventDispatcher:	function,
- *    .createEditableText:	function,
  * 
  * ショートカットキーの監視とテキスト入力(input, textarea)、チェックボックスを管理する。
  * キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。
@@ -1162,171 +1291,6 @@ pettanr.key = ( function(){
 		shiftEnabled = false,
 		ctrlEnabled = false;
 	
-	var EDITABLE_TEXT_CONTROL = ( function(){
-		var	EDITABLE_TEXT_TABLE = {},
-			currentText = null;
-
-		var EditableTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-			var ELM = WRAPPER_ELM.children( '.editable-value').eq( 0),
-				value = ELM.html(),
-				jqInput,
-				index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,
-				instance,
-				enabled = true,
-				A = $( '<a href="#"></a>').html( value).click( function(e){
-					instance = instance || EDITABLE_TEXT_TABLE[ GROUP_ID][ index];
-					EDITABLE_TEXT_CONTROL.start( instance);								
-					A.hide();
-					jqInput = $( '<input type="text"/>').val( value);
-					ELM.append( jqInput);
-					jqInput.focus().select();
-					e.preventDefault();
-					return false;
-				});
-			ELM.addClass( 'editable-text').html( A);
-			
-			return {
-				update: function( _value){
-					value = _value !== undefined ? _value : value;
-					A.html( value);
-					jqInput && jqInput.val( value);
-					currentText === instance && this.finish();
-				},
-				show: function(){
-					enabled === false && WRAPPER_ELM.show();
-					enabled= true;
-				},
-				hide: function(){
-					enabled === true && WRAPPER_ELM.hide();
-					enabled = false;
-				},
-				start: function(){
-					!jqInput && A.click();
-				},
-				finish: function( keep){
-					var _newValue = keep === true ? value : jqInput.val();
-					A.html( _newValue).show();
-					jqInput.remove();
-					jqInput = null;
-					ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);
-					EDITABLE_TEXT_CONTROL.finish( instance);					
-				},
-				enabled: function(){
-					return enabled;
-				},
-				index : index,
-				groupID: GROUP_ID
-			}
-		}
-		var CheckboxClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-			var ELM = WRAPPER_ELM.children( '.checkbox-value').eq( 0),
-				value = ELM.html(),
-				jqInput,
-				index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,
-				instance,
-				enabled = true,
-				A = $( '<a href="#" onclick="return false;"></a>').html( value).click( function(e){
-					instance = instance || EDITABLE_TEXT_TABLE[ GROUP_ID][ index];
-					EDITABLE_TEXT_CONTROL.start( instance);								
-					A.hide();
-					jqInput = $( '<input type="text"/>').val( value);
-					ELM.append( jqInput);
-					jqInput.focus().select();
-					e.preventDefault();
-					return false;
-				});
-			ELM.addClass( 'editable-text').html( A);
-			
-			function finish(keep){
-				if(keep === true){
-
-				} else {
-					_finish( jqInput.val());
-				}
-				function _finish( VALUE_NEW){
-					value = VALUE_NEW;
-					A.html( VALUE_NEW).show();
-					jqInput.remove();
-					jqInput = null;
-					ON_UPDATE_FUNCTION && VALUE_NEW !== value && ON_UPDATE_FUNCTION( VALUE_NEW, value);
-					EDITABLE_TEXT_CONTROL.finish( instance);
-				}
-			}
-			return {
-				update: function( _value){
-					value = _value !== undefined ? _value : value;
-					A.html( value);
-					jqInput && jqInput.val( value);
-					currentText === instance && finish();
-				},
-				show: function(){
-					enabled === false && WRAPPER_ELM.show();
-					enabled= true;
-				},
-				hide: function(){
-					enabled === true && WRAPPER_ELM.hide();
-					enabled = false;
-				},
-				start: function(){
-					!jqInput && A.click();
-				},
-				finish: finish,
-				enabled: function(){
-					return enabled;
-				},
-				groupID: GROUP_ID
-			}
-		}
-		return {
-			createEditableText: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-				if( GROUP_ID && !EDITABLE_TEXT_TABLE[ GROUP_ID]) EDITABLE_TEXT_TABLE[ GROUP_ID] = [];
-				var ret = EditableTextClass.apply( {}, [ ELM, ON_UPDATE_FUNCTION, GROUP_ID]);
-				GROUP_ID && EDITABLE_TEXT_TABLE[ GROUP_ID].push( ret);
-				return ret;
-			},
-			createCheckbox: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-				
-			},
-			start: function( _currentText){
-				currentText !== _currentText && currentText && currentText.finish();
-				currentText = _currentText;
-			},
-			finish: function( _currentText){
-				if( currentText !== _currentText) return;
-				currentText = null 
-			},
-			keyEventRellay: function( e){
-				if( e.type === 'keyup') return false;
-				if( currentText === null) return false;
-				
-				var keyCode = e.keyCode;
-				if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt
-					var _groupID = currentText.groupID,
-						_index = currentText.index;
-					currentText.finish( keyCode === 27);
-					keyCode === 9 && _groupID && EDITABLE_TEXT_CONTROL.tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);
-					keyCode === 13 && _groupID && EDITABLE_TEXT_CONTROL.tabShift( _groupID, _index, 1);
-				}
-				return true;
-			},
-			tabShift: function( _groupID, _index, _way){
-				var GROUP_ARRAY = EDITABLE_TEXT_TABLE[ _groupID] || [],
-					l = GROUP_ARRAY.length,
-					i = _index +_way;
-				if( l < 2) return;
-				while( i !== _index){
-					i = i < 0 ?
-						l -1 :
-						i === l ? 0 : i; // 0 < i < l
-					if( GROUP_ARRAY[ i].enabled() === true) break;
-					i += _way;
-				}
-				if( i === _index) return;
-				setTimeout( function(){ GROUP_ARRAY[ i].start();}, 0);
-			}
-		}
-	})();
-	
 	function keyHit( e){
 		log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey, e.type].join( ','));
 		//keyOperationChatcher.val( '');
@@ -1336,7 +1300,7 @@ pettanr.key = ( function(){
 			overlayEnabled = pettanr.overlay.visible === true,
 			currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;
 		if( callback === 'keypress') callback = 'keydown';
-		if( EDITABLE_TEXT_CONTROL.keyEventRellay( e) === false){
+		if( pettanr.form.keyEventRellay( e) === false){
 			var shift = e.shiftKey,
 				ctrl = e.ctrlKey,
 				l = KEYEVENT_ARRAY.length,
@@ -1425,8 +1389,6 @@ pettanr.key = ( function(){
 		keyEventDispatcher: function(){
 			return keyOperationChatcher;
 		},
-		createEditableText: EDITABLE_TEXT_CONTROL.createEditableText,
-		createCheckbox: EDITABLE_TEXT_CONTROL.createCheckbox,
 		shiftEnabled: function(){
 			return shiftEnabled;
 		},
@@ -1441,52 +1403,55 @@ pettanr.key = ( function(){
  * 
  * keyEventRellay
  *  form -> overlay -> view
- * 
+ * 
  */
 pettanr.form = ( function(){
 	var	FORM_GROUP_TABLE = {},
 		currentID = null,
 		currentItem = null,
-		ELM_INPUT_TEXT = document.createElement( 'input');
-	ELM_INPUT_TEXT.type = 'text';
+		ELM_A_ORIGIN = ( function(){
+			var ret = document.createElement( 'a');
+			ret.href = '#';
+			return ret;
+		})(),
+		ELM_INPUT_TEXT = ( function(){
+			var ret = document.createElement( 'input');
+			ret.type = 'text';
+			return ret;
+		})();
 		
 	var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater){
 		validater = typeof validater === 'function' ? validater : null;
 		
-		var elmValue,
+		var elmValue = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value')[ 0],
 			value,
-			index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,
+			index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,
 			instance,
 			focus = false,
 			visible = true,
 			enabled = true,
-			elmA;
-		var _nodes = WRAPPER_ELM.getElementsByTagName('*'),
-			l = nodes.length,
-			_elm;
-		for(var i=0; i<l; ++i){
-			_elm = _nodes[ i];
-			if( _elm.nodeType === 1 && _elm.className.indexof('editable-value') !== -1){
-				elmValue = _elm;
-			}
-		}
+			elmA = ELM_A_ORIGIN.cloneNode( true);
+		
 		if( elmValue === undefined){
 			alert( 'error!');
 		}
 		value = elmValue.innerHTML;
+		elmValue.innerHTML = '';
 		elmValue.className += ' editable-text';
 		
-		elmA = elmAOrigin.cloneNode( true);
+		elmA.innerHTML = value;
 		elmValue.appendChild( elmA);
-		elmA.onclick = onClick;
+		WRAPPER_ELM.onclick = onClick;
 		
-		function onClick(){
+		function onClick( e){
+			focus = true;
 			start( instance);
 			elmA.style.display = 'none';
 			elmValue.appendChild( ELM_INPUT_TEXT);
 			ELM_INPUT_TEXT.value = value;
 			ELM_INPUT_TEXT.focus();
 			ELM_INPUT_TEXT.select();
+			e && e.preventDefault();
 			return false;
 		}
 		
@@ -1496,10 +1461,15 @@ pettanr.form = ( function(){
 				delete this.init;
 			},
 			update: function( _value){
-				value = _value !== undefined ? _value : value;
-				//A.html( value);
-				//jqInput && jqInput.val( value);
-				currentText === instance && this.finish();
+				if( _value !== undefined){
+					elmA.innerHTML = _value;
+					value = _value;
+					
+					if( focus === true){
+						ELM_INPUT_TEXT.value = value;
+					}
+				}
+				currentItem === instance && this.finish();
 			},
 			start: function(){
 				onClick();
@@ -1515,11 +1485,24 @@ pettanr.form = ( function(){
 				elmA.style.display = 'block';
 				
 				ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);
-				finish( instance);					
+				finish( instance);
+				
+				focus = false;
 			},
 			enabled: function(){
 				return enabled;
 			},
+			visible: function( _visible){
+				if( _visible === true){
+					WRAPPER_ELM.style.display = '';
+					visible = true;
+				} else
+				if( _visible === false){
+					WRAPPER_ELM.style.display = 'none';
+					visible = false;
+				}
+				return visible;
+			},
 			index : index,
 			groupID: GROUP_ID
 		}
@@ -1534,22 +1517,9 @@ pettanr.form = ( function(){
 		if( currentItem !== _currentItem) return;
 		currentItem = null;
 	}
-	function keyEventRellay( e){
-		if( e.type === 'keyup') return false;
-		if( currentItem === null) return false;
-		
-		var keyCode = e.keyCode;
-		if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt
-			var _groupID = currentItem.groupID,
-				_index = currentItem.index;
-			currentItem.finish( keyCode === 27);
-			keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);
-			keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);
-		}
-		return true;
-	}
+
 	function tabShift( _groupID, _index, _way){
-		var GROUP_ARRAY = EDITABLE_TEXT_TABLE[ _groupID] || [],
+		var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID] || [],
 			l = GROUP_ARRAY.length,
 			i = _index +_way;
 		if( l < 2) return;
@@ -1557,7 +1527,7 @@ pettanr.form = ( function(){
 			i = i < 0 ?
 				l -1 :
 				i === l ? 0 : i; // 0 < i < l
-			if( GROUP_ARRAY[ i].enabled() === true) break;
+			if( GROUP_ARRAY[ i].enabled() === true && GROUP_ARRAY[ i].visible() === true) break;
 			i += _way;
 		}
 		if( i === _index) return;
@@ -1569,8 +1539,22 @@ pettanr.form = ( function(){
 		focus: function(){
 			return currentItem !== null; 
 		},
+		keyEventRellay: function( e){
+			if( e.type === 'keyup') return false;
+			if( currentItem === null) return false;
+			
+			var keyCode = e.keyCode;
+			if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt
+				var _groupID = currentItem.groupID,
+					_index = currentItem.index;
+				currentItem.finish( keyCode === 27);
+				keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);
+				keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);
+			}
+			return true;
+		},
 		createInputText: function( _elm, _onUpdate, _groupID, _validater){
-			if( _groupID && !FORM_GROUP_TABLE[ _groupID]){
+			if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){
 				FORM_GROUP_TABLE[ _groupID] = [];
 			}
 			var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater);
@@ -1581,6 +1565,9 @@ pettanr.form = ( function(){
 		createCheckBox: function(){
 			
 		},
+		createRadio: function(){
+			
+		},
 		createButton: function(){
 			
 		},
@@ -1657,7 +1644,7 @@ pettanr.balloon = ( function() {
 	if( IS_VML === true && pettanr.ua.VML === false) vectorEnabled = false;
 
 	var XBROWSER_BALLOON_CLASS = function( w, h, a){
-		var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true) : document.createElement( 'IMG'), // pettanr.imageに変更
+		var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true) : document.createElement( 'img'), // pettanr.imageに変更
 			path = balloonElm.getElementsByTagName( 'path')[ 0],
 			shape = balloonElm.getElementsByTagName( 'shape')[ 0],
 			cos = Math.cos, sin = Math.sin,
@@ -1759,7 +1746,7 @@ pettanr.balloon = ( function() {
 		function balloonUrlBuilder( _a){
 			var d = 360 /NUM_BALLOON_IMAGE;
 			_a += 90 +d /2;
-			return [ 'balloon\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');
+			return [ 'system_pictures\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');
 		}
 		return {
 			elm: balloonElm,
@@ -1850,14 +1837,16 @@ pettanr.image = ( function(){
 			if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;
 			return IS_SERVER;
 		})(),
-		PNG_FIX = pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 6,
-		BACKEND_WHEN_PNG = PNG_FIX === false ? BACKEND : ( function(){
+		BACKEND_WHEN_PNG = ( function(){
+			if( pettanr.ua.isIE === false || pettanr.ua.ieVersion > 6) return BACKEND;
 			if( pettanr.ua.VML === true) return IS_VML;
 			if( pettanr.FLASH === true) return IS_FLASH;
 			if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;
 			if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX_SERVER;
 			return IS_SERVER;
-		})();
+		})(),
+		ReversibleImageClass,
+		ReversibleImageClassWithPingfix;
 	
 	var XBackendReversibleImageClass = ( function(){
 		var CLASS_NAME = 'reversible-image-container',
@@ -1899,7 +1888,7 @@ pettanr.image = ( function(){
 				w = _w !== undefined ? _w : w;
 				h = _h !== undefined ? _h : h;
 				if( loaded === false) return;
-				elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'v' : 'h'))) : '';
+				elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';
 			}
 			return {
 				elm : elmWrap,
@@ -1948,7 +1937,7 @@ pettanr.image = ( function(){
 				//if( flipH !== _flipH || flipV !== _flipV){
 					vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg);
 				//}
-					vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'v' : 'h'))) : '';
+					vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';
 					elmWrap.appendChild( vmlImg);
 			}
 			return {
@@ -2002,19 +1991,388 @@ pettanr.image = ( function(){
 	}
 })();
 
+/*
+ * bind : 出版
+ */
+pettanr.bind = ( function(){
+	var BIND_WORKER_ARRAY = [],
+		NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',
+		RESOURCE_PICTURE_PATH = pettanr.CONST.RESOURCE_PICTURE_PATH,
+		ELM_DETECT_WIDTH = ( function(){
+			var ret = document.createElement( 'div');
+			ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';
+			return ret;
+		})();
+
+	/*
+	 * original
+	 *   http://d.hatena.ne.jp/uupaa/20090720/1248097177
+	 */
+	var ResizeAgentClass = function( onResizeFunction, opt_elmCheck){
+		var	_globalLock = 0,
+			_size = { w: 0, h: 0 };
+			_ie = !!document.all,
+			_quirks = (document.compatMode || "") !== "CSS1Compat",
+			_ieroot = _quirks ? "body" : "documentElement";
+			_root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);
+
+		function getInnerSize() {
+			return {
+				w: _root.innerWidth  || _root.clientWidth,
+				h: _root.innerHeight || _root.clientHeight
+			};
+		}
+
+		function loop() {
+			if (!_globalLock++) {
+				var size = getInnerSize();
+				if (_size.w !== size.w || _size.h !== size.h) { // resized
+					_size = size; // update
+					onResizeFunction( _size);
+				}
+				setTimeout( unlock, 0); // delay unlock
+			}
+			setTimeout(loop, 500);
+		}
+		function unlock(){
+			_globalLock = 0;
+		}
+		loop();
+	}
+	
+	
+	var ElementBuilder = ( function(){
+		var ELM_TITLE_ORIGN = ( function(){
+				
+			})(),
+			ELM_TEXT_ORIGN = ( function(){
+				var _table = document.createElement( 'table'),
+					_tr = document.createElement( 'tr');
+				_table.appendChild( _tr);
+				_tr.appendChild( document.createElement( 'td'));
+				_table.cellspacing = '0';
+				return _table;
+			})();
+		
+		function buildComicElement(){
+			
+		}
+		
+		function buildPanelElement( elmTarget, json, noClassnameMode){
+			var _elmPanel = document.createElement( 'div'),
+				_style = {
+						"border-width":		typeof json.border === 'number' ? json.border + 'px' : 0,
+						width: 				json.width + 'px',
+						height:				json.height + 'px'
+				},
+				_cssText = [],
+				_comicElements = json.panel_elements || [],
+				_comicElement, _elmImgWrap, _rImg, _rPic, _balloon, _elmBalloonWrap, _elmText;
+			if( noClassnameMode === true){
+				
+			} else {
+				_elmPanel.className = NAMESPACE_CLASSNAME + 'panel';
+			}
+			for( var _key in _style){
+				_cssText.push( _key + ':' + _style[ _key]);
+			}
+			_elmPanel.style.cssText = _cssText.join( ';');
+			elmTarget.appendChild( _elmPanel);
+			
+			for( var i=0, l=_comicElements.length; i<l; ++i){
+				_comicElement = _comicElements[ i];
+				if( _comicElement.resource_picture){
+					_rPic = _comicElement.resource_picture || {};
+					_rImg = pettanr.image.createReversibleImage(
+							[ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext].join( ''),
+							_comicElement.width, _comicElement.height
+						);
+					_elmImgWrap = document.createElement( 'div');
+					_elmPanel.appendChild( _elmImgWrap);
+					_elmImgWrap.appendChild( _rImg.elm);
+					_elmImgWrap.className = NAMESPACE_CLASSNAME + 'image';
+					_elmImgWrap.style.cssText = [
+						'width:', Math.abs( _comicElement.width), 'px;',
+						'height:', Math.abs( _comicElement.height), 'px;',
+						'left:', _comicElement.x, 'px;',
+						'top:', _comicElement.y, 'px;',
+						'z-index:', _comicElement.z, ';'
+					].join( '');
+				} else {
+					_elmBalloonWrap = document.createElement( 'div');
+					_elmPanel.appendChild( _elmBalloonWrap);
+					_elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';
+					_elmBalloonWrap.style.cssText = [
+						'width:', _comicElement.width, 'px;',
+						'height:', _comicElement.height, 'px;',
+						'left:', _comicElement.x, 'px;',
+						'top:', _comicElement.y, 'px;',
+						'z-index:', _comicElement.z, ';'
+					].join( '');
+
+					_balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail);
+					_elmBalloonWrap.appendChild( _balloon.elm);
+					
+					_elmText = ELM_TEXT_ORIGN.cloneNode( true);
+					_elmBalloonWrap.appendChild( _elmText);
+					_elmText.className = NAMESPACE_CLASSNAME + 'speach';
+					_elmText.getElementsByTagName( 'td')[ 0].appendChild( document.createTextNode( 'hello'));
+				}
+			}
+		}
+		
+		return {
+			build: function( elmTarget, json, zoom, noClassnameMode){
+				// clean elmTarget
+				pettanr.util.removeAllChildren( elmTarget);
+				
+				// json is Comic ? Panel ?
+				if( json.panels){
+					// comic
+					
+				} else
+				if( json.panel_elements){
+					// panel
+					buildPanelElement( elmTarget, json, noClassnameMode);
+				} else {
+					// invalid json
+				}
+			}
+		}
+	})();
+	
+	var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode){
+		typeof json === 'object' && build( elmTarget, json);
+		
+		var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false)
+		
+		if( zoomSelfEnabled === true){
+			elmTarget.parentNode.insertBefore( elmDetectW, elmTarget);
+			new ResizeAgentClass( onResize, elmDetectW);
+		}
+		function onResize(){
+			
+		}
+		json && ElementBuilder.build( elmTarget, json, zoomSelfEnabled, noClassnameMode);
+		
+		return {
+			init: function(){
+				
+			},
+			zoom: function(){
+				
+			},
+			json: function( _json){
+				json = _json;
+				ElementBuilder.build( elmTarget, _json, zoomSelfEnabled, noClassnameMode);
+			},
+			targetElement: function(){
+				
+			},
+			layput: function(){
+				
+			},
+			destroy: function(){
+				
+			}
+		}
+	}
+	
+	return {
+		createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode){
+			var ret = new BindWorkerClass( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode);
+			BIND_WORKER_ARRAY.push( ret);
+			return ret;
+		},
+		isBindWorkerInstance: function( _bindWorker){
+			
+		}
+	}
+})();
+
+var VisualEffect = ( function(){
+	
+	var ANIMATION_TICKET_ARRAY = [],
+		fpms = 50,
+		TIMER = null,
+		FILTER = 'filter',
+		OPACITY = 'opacity',
+		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 を比較して , 一致及び非数は削除しつつ コピー
+		//
+		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, _type, _new,
+				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){
+								
+								
+								
+								break;
+							}
+						}
+					/*
+					 * other
+					 */
+					} else {
+						_number = '' + parseFloat( _value);
+						_type = _value.indexOf( _number);
+						_type = _type > 0 ? _value.substr( _type + _number.length) : '';
+						for( j=0; j<_numAttributes; ++j){
+							if( _targetAttributes[ j] === _target){
+								_cssTexts[ i] = [ _target, ':', _updateParameters[ j], _type].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 = {};
+				if( numFrames === 1){
+					for( var i=0; i<l; ++i){
+						_updateCss[ targetAttributes[ i]] = endParameters[ i];
+						++i;
+					}
+					updateCss( ELM, currentParameters, targetAttributes, l);
+					onComplete !== null && onComplete();
+				} else {
+					for( var 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 resisterAnime( _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 = resisterAnime;
+		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
+ *  Google Analytics
  */
 
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-28023955-1']);
-_gaq.push(['_trackPageview']);
-
-(function() {
-	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
\ No newline at end of file
+if( pettanr.LOCAL === false){
+	var _gaq = _gaq || [];
+	_gaq.push(['_setAccount', 'UA-28023955-1']);
+	_gaq.push(['_trackPageview']);
+	
+	(function() {
+		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+	})();	
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/system.js b/app/assets/javascripts/system.js
index 973291bc..88a4ac37 100644
--- a/app/assets/javascripts/system.js
+++ b/app/assets/javascripts/system.js
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.4.1
+ *   version 0.4.2
  *   
  * author:
  *   itozyun
@@ -58,19 +58,19 @@ pettanr.file = ( function(){
 		ROLE_IS_ARTIST = 2^1,
 		ROLE_IS_VISITOR = 2^0,
 		ROLE_IS_UNKROWN = 2^-1,
-		UPDATE_POLICY_SOCAV = 0x11111,// s: super user
-		UPDATE_POLICY_SOCA_ = 0x11110,// o: owner( comic || panel || picture )
-		UPDATE_POLICY_SOC__ = 0x11100,// c: creator
-		UPDATE_POLICY_SO_A_ = 0x11010,// a: artist
-		UPDATE_POLICY_SO___ = 0x11000,// v: visitor
-		UPDATE_POLICY__O___ = 0x01000,// l: lisence manager
-		UPDATE_POLICY_S____ = 0x10000,
-		UPDATE_POLICY______ = 0x00000,
-		FILEDATA_RESITER = [],
-		FILEDATA_HAS_rID_RESISTER = {},
-		FILEDATA_ACCESS = [],
+		UPDATE_POLICY_SOCAV = parseInt( '11111', 2),// s: super user
+		UPDATE_POLICY_SOCA_ = parseInt( '11110', 2),// o: owner( comic || panel || picture )
+		UPDATE_POLICY_SOC__ = parseInt( '11100', 2),// c: creator
+		UPDATE_POLICY_SO_A_ = parseInt( '11010', 2),// a: artist
+		UPDATE_POLICY_SO___ = parseInt( '11000', 2),// v: visitor
+		UPDATE_POLICY__O___ = parseInt( '01000', 2),// l: lisence manager
+		UPDATE_POLICY_S____ = parseInt( '10000', 2),
+		UPDATE_POLICY______ = parseInt( '00000', 2),
+		FILEDATA_RESITER = [],			// store all of fileData( json object )
+		FILEDATA_HAS_domainID_RESISTER = {},
+		FILEDATA_ACCESS = [],			// file operations for Kernel only ! hide from Out of pettanr.file
 		FILE_OBJECT_POOL = [];
-		
+	
 	var REQUEST_CONTROLER = ( function(){
 		var REQUEST_TICKET_RESISTER = [],
 			DATA_TYPE_ARRAY = 'json,xml,html,text'.split( ','),
@@ -240,11 +240,11 @@ pettanr.file = ( function(){
 			if( typeof UIDorFILEorFILEDATA === 'number'){
 				_data = FILEDATA_RESITER[ UIDorFILEorFILEDATA] || null;
 			} else
-			if( UIDorFILEorFILEDATA.getUID){
+			if( UIDorFILEorFILEDATA instanceof FileClass){
 				_uid = UIDorFILEorFILEDATA.getUID();
 				_data = FILEDATA_RESITER[ _uid] || null;
 			} else {
-				_data = UIDorFILEorFILEDATA;
+				_data = UIDorFILEorFILEDATA || null;
 			}
 			
 			if( _data === null || !_data) return null;
@@ -256,7 +256,7 @@ pettanr.file = ( function(){
 		}
 		function getChildren( UIDorFILE){
 			var _access = getFileDataAccess( UIDorFILE);
-			return  _access !== null ? _access.CHILDREN : null
+			return  _access !== null ? _access.DATA.CHILDREN : null
 		}
 		function onLoadJson( _file, _json){
 			var _access = getFileDataAccess( _file),
@@ -277,30 +277,32 @@ pettanr.file = ( function(){
 				_rFolderData,
 				_artistFolderData, _artistFolder,
 				_comicFolderData, _comicFolder,
-				_authorFolderData, _authorFolder;
+				_authorFolderData, _authorFolder,
+				_reaourceID = buildDomainID( _data.json, _childType);
 
 			for(var i=0; i<l; ++i){
-				_newData = buildFileData( _json[ i], _data.json, _childType);
-				if( _newData.rID){
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _data.json, _childType), _childType, _file);
+				_newData = buildFileData( _json[ i], _data.json, _data, _childType);
+
+				if( _reaourceID !== null){
+					_rFolderData = getDomainFolder( _reaourceID, _childType, _file);
 					_rFolderData.children.push( _newData);
 				}
 				if( _newData.artist){
-					_artistFolderData = _artistFolderData || getFolderDataByResourceID( buildResourceID( _data.json, 'artist'), 'Artists', _file);
+					_artistFolderData = _artistFolderData || getDomainFolder( buildDomainID( _data.json, 'artist'), 'Artists', _file);
 					_artistFolder = _artistFolder || new FileClass( SYSTEM_TREE, _file, _artistFolderData);
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _artistFolderData.rID, '' +_newData.artist.id), _newData.artist.name, _artistFolder);
+					_rFolderData = getDomainFolder( buildDomainID( _artistFolderData.rID, '' +_newData.artist.id), _newData.artist.name, _artistFolder);
 					_rFolderData.children.push( _newData);
 				}
 				if( _newData.comic){
-					_comicFolderData = _comicFolderData || getFolderDataByResourceID( buildResourceID( _data.json, 'comic'), 'Comics', _file);
+					_comicFolderData = _comicFolderData || getDomainFolder( buildDomainID( _data.json, 'comic'), 'Comics', _file);
 					_comicFolder = _comicFolder || new FileClass( SYSTEM_TREE, _file, _comicFolderData);
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _comicFolderData.rID, '' +_newData.comic.id), _newData.comic.title, _comicFolder);
+					_rFolderData = getDomainFolder( buildDomainID( _comicFolderData.rID, '' +_newData.comic.id), _newData.comic.title, _comicFolder);
 					_rFolderData.children.push( _newData);
 				}	
 				if( _newData.author){
-					_authorFolderData = _authorFolderData || getFolderDataByResourceID( buildResourceID( _data.json, 'author'), 'Author', _file);
+					_authorFolderData = _authorFolderData || getDomainFolder( buildDomainID( _data.json, 'author'), 'Author', _file);
 					_authorFolder = _authorFolder || new FileClass( SYSTEM_TREE, _file, _authorFolderData);
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _authorFolderData.rID, '' +_newData.author.id), _newData.author.name, _authorFolder);
+					_rFolderData = getDomainFolder( buildDomainID( _authorFolderData.rID, '' +_newData.author.id), _newData.author.name, _authorFolder);
 					_rFolderData.children.push( _newData);
 				}
 			}
@@ -317,29 +319,20 @@ pettanr.file = ( function(){
 				_data.state = FILE_STATE_IS_ERROR;
 			}
 		}
-		function buildFileData( _data, _url, _type){
-			if( !_data.name){
-				_data.name = [ _data.id, _data.ext].join( '.');
-			}
+		function buildFileData( _data, _url, _parent, _type){
 			_data.type = _type;
-			
-			if( _type === FILE_TYPE_IS_IMAGE){
-				_data.thumbnail = 'thumbnail/' + _data.name;
-			}
-			
-			var _rID = buildResourceID( _url, _type);
-			if( _rID !== null){
-				_data.rID = _rID + _data.id;
-				FILEDATA_HAS_rID_RESISTER[ _data.rID] = _data;
+
+			if( _type === FILE_TYPE_IS_PANEL){
+				_data.comicFileData = _parent;
 			}
-			
+
 			FILEDATA_RESITER.push( _data);
 			
 			return _data;
 		}
-		function buildResourceID( _url, _type){
-			if( _url === null) return null;
-			var _typeStr;
+		function buildDomainID( _url, _type){
+			if( !_url) return null;
+			var _typeStr = null;
 			
 			if( typeof _type !== 'number'){
 				_typeStr = _type
@@ -353,16 +346,18 @@ pettanr.file = ( function(){
 			if( _type === FILE_TYPE_IS_PANEL){
 				_typeStr = 'panel';
 			}
+			if( _typeStr === null) return null;
+			
 			return [ _url.replace(/https?:\/\/([^\/]*).*/, '$1'), _typeStr].join('_');
 		}
 	/**
-	 * getFileByResourceID( _rID, opt_name, opt_folder)
+	 * getFileByResourceID( _domainID, opt_name, opt_folder)
 	 * opt 指定で 新しいフォルダの作成
 	 * rID を持つ Object は {} にも格納．
 	 */
-		function getFolderDataByResourceID( _rID, opt_name, opt_folder){
-			if( FILEDATA_HAS_rID_RESISTER[ _rID]){
-				return FILEDATA_HAS_rID_RESISTER[ _rID];
+		function getDomainFolder( _domainID, opt_name, opt_folder){
+			if( FILEDATA_HAS_domainID_RESISTER[ _domainID]){
+				return FILEDATA_HAS_domainID_RESISTER[ _domainID];
 			}
 			if( !opt_name && !opt_folder) return;
 			
@@ -380,22 +375,22 @@ pettanr.file = ( function(){
 			if( opt_name === FILE_TYPE_IS_PANEL){
 				_fileName = 'Panels';
 			} else {
-				_fileName = opt_name.toString();
+				_fileName = typeof opt_name;
 			}
 			
 			var _newData = {
 				name: 		_fileName,
 				type:		FILE_TYPE_IS_FOLDER,
-				rID:		_rID,
+				rID:		_domainID,
 				children:	[]
 			};
 			FILEDATA_RESITER.push( _newData);
-			FILEDATA_HAS_rID_RESISTER[ _rID] = _newData;
+			FILEDATA_HAS_domainID_RESISTER[ _domainID] = _newData;
 			
 			if( opt_folder && opt_folder.isChildFile( _newData) === false){
 				var _access = getFileDataAccess( opt_folder),
 					_data = _access !== null ? _access.DATA : null;
-				_access === null && alert( _rID)
+				_access === null && alert( _domainID)
 				if( _data !== null){
 					_data.children.push( _newData);
 				}
@@ -507,6 +502,8 @@ pettanr.file = ( function(){
 			data.children = [];
 		}
 		var TYPE = data.type,
+			name = data.name || null,
+			thumbnail = null,
 			uid = FILE_CONTROLER.getUID( data),
 			CHILDREN = data.children,
 			instance;
@@ -521,16 +518,14 @@ pettanr.file = ( function(){
 			{
 				TYPE:				TYPE,
 				DATA:				data,
-				CHILDREN:			CHILDREN,
 				destroy:			destroy,
 				updateParent:		updateParent,
 				fileEventChatcher:	dispatchEvent
 			}
 		);
 		function destroy(){
-			CHILDREN.splice( 0, CHILDREN.length);
-			parentFile = data = CHILDREN = null;
-			delete this.destroy;			
+			name = thumbnail = parentFile = data = CHILDREN = null;
+			
 		}
 		function updateParent( _parent){
 			parentFile = _parent;
@@ -538,81 +533,86 @@ pettanr.file = ( function(){
 		function dispatchEvent( e){
 			FILE_CONTROLER.fileEventRellay( instance, TREE, e);
 		}
-		return {
-			init: function(){
-				instance = this;
-				delete this.init;
-			},
-			TYPE: function(){ return TYPE;},
-			getName: function(){
-				return data.name || 'no_name';
-			},
-			getThumbnail: function(){
-				return data.thumbnail || null;
-			},
-			getUID: function(){
-				return uid;
-			},
-			getState: function(){
-				return data.state !== undefined ? data.state : FILE_STATE_IS_OK;
-			},
-			getChildFileLength: function(){
-				return CHILDREN && typeof CHILDREN.length === 'number' ? CHILDREN.length : 0;
-			},
-			getChildFileByIndex: function( _index){
-				if( typeof _index !== 'number' || _index < 0 || typeof CHILDREN.length !== 'number' || _index >= CHILDREN.length) return null;
-				_file = new FileClass( TREE, this, CHILDREN[ _index]);
-				_file.init();
-				return _file;
-			},
-			getChildFileIndex: function( _FILEorFILEDATA){
-				if( !CHILDREN || typeof CHILDREN.length !== 'number') return -1;
-				var l = FILEDATA_RESITER.length,
-					_fileData = null;
-				for( var i=0; i<l; ++i){
-					if( _FILEorFILEDATA === FILEDATA_RESITER[ i]){
-						_fileData = _FILEorFILEDATA;
-						break;
-					};
-				}
-				if( _fileData === null){
-					_fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
-				}
-				if( _fileData === null) return -1;
-				
-				l = CHILDREN.length
-				for( var i=0; i<l; ++i){
-					if( CHILDREN[ i] === _fileData) return i;
-				}
-				return -1;
-			},
-			isChildFile: function( _FILEorFILEDATA){
-				return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
-			},			
-			getAttribute: function( KEYorKEYARRAY){
-				return FILE_CONTROLER.getFileAttribute( UID, KEYorKEYARRAY);
-			},
-			getSeqentialFiles: function(){
-				FILE_CONTROLER.getSeqentialFiles( this);
-			},
-			updateAttribute: function( key, value, opt_callback){
-				TREE.updateFileAttribute( UID, key, value, opt_callback);
-			},
-			move: function( _newFolder, _newIndex, opt_callback){
-				TREE.move( parentFile, UID, _newFolder, _newIndex, opt_callback);
-			},
-			replace: function( _newIndex, opt_callback){
-				TREE.replace( parentFile, UID, _newIndex, opt_callback);
-			},
-			addEventListener: function( _eventType, _callback){
-				FILE_CONTROLER.addEventListener( UID, _eventType, _callback);
-			},
-			removeEventListener: function( _eventType, _callback){
-				FILE_CONTROLER.removeEventListener( UID, _eventType, _callback);
-			},
-			collect: function(){
-				
+		
+		/* grobal Methods */
+		this.init = function(){
+			instance = this;
+			delete this.init;
+		}
+		this.TYPE = function(){
+			return TYPE;
+		}
+		this.getName = function(){
+			if( name !== null) return name;
+			if( data.name){
+				return data.name;
+			}
+			if( TYPE === FILE_TYPE_IS_IMAGE){
+				name = [ data.id, data.ext].join( '.');
+			} else
+			if( TYPE === FILE_TYPE_IS_PANEL){
+				name = data.comic.title + ' | ' +data.t;
+			}
+			return name || 'no_name';
+		}
+		this.getThumbnail = function(){
+			if( thumbnail !== null) return thumbnail;
+			if( TYPE === FILE_TYPE_IS_IMAGE){
+				thumbnail = [ 'thumbnail/', data.id, '.', data.ext].join( '');
+			}
+			return thumbnail || null;
+		}
+		this.getUID = function(){
+			return uid;
+		}
+		this.getState = function(){
+			return data.state !== undefined ? data.state : FILE_STATE_IS_OK;
+		}
+		this.getChildFileLength = function(){
+			return CHILDREN && typeof CHILDREN.length === 'number' ? CHILDREN.length : 0;
+		}
+		this.getChildFileByIndex = function( _index){
+			if( typeof _index !== 'number' || _index < 0 || typeof CHILDREN.length !== 'number' || _index >= CHILDREN.length) return null;
+			_file = new FileClass( TREE, this, CHILDREN[ _index]);
+			_file.init();
+			return _file;
+		}
+		this.getChildFileIndex = function( _FILEorFILEDATA){
+			if( !CHILDREN || typeof CHILDREN.length !== 'number') return -1;
+			var l = CHILDREN.length,
+				_fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
+			if( _fileData === null) return -1;
+			for(var i=0; i<l; ++i){
+				if( CHILDREN[ i] === _fileData) return i;
 			}
+			return -1;
+		}
+		this.isChildFile = function( _FILEorFILEDATA){
+			return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
+		}
+		this.getAttribute = function( KEYorKEYARRAY){
+			return FILE_CONTROLER.getFileAttribute( UID, KEYorKEYARRAY);
+		}
+		this.getSeqentialFiles = function(){
+			FILE_CONTROLER.getSeqentialFiles( this);
+		}
+		this.updateAttribute = function( key, value, opt_callback){
+			TREE.updateFileAttribute( UID, key, value, opt_callback);
+		}
+		this.move = function( _newFolder, _newIndex, opt_callback){
+			TREE.move( parentFile, UID, _newFolder, _newIndex, opt_callback);
+		}
+		this.replace = function( _newIndex, opt_callback){
+			TREE.replace( parentFile, UID, _newIndex, opt_callback);
+		}
+		this.addEventListener = function( _eventType, _callback){
+			FILE_CONTROLER.addEventListener( UID, _eventType, _callback);
+		}
+		this.removeEventListener = function( _eventType, _callback){
+			FILE_CONTROLER.removeEventListener( UID, _eventType, _callback);
+		}
+		this.collect = function(){
+			
 		}
 	};
 	function getFileObject( TREE, parentFile, data){
@@ -677,7 +677,7 @@ pettanr.file = ( function(){
 			var _rootFile;
 			if( _treeType === TREE_TYPE_IS_COMIC) _rootFile = COMIC_FILEDATA;
 			if( _treeType === TREE_TYPE_IS_IMAGE) _rootFile = IMAGE_FILEDATA;
-			if( _rootFile === undefined) return;
+			if( !_rootFile) return null;
 			return FILE_CONTROLER.createTree( _rootFile);
 		},
 		TREE_TYPE_IS_COMIC:		1,
@@ -703,8 +703,8 @@ pettanr.finder = ( function(){
 	var FinderIconClass = function(){
 		var elmContainer,
 			ELM_WRAPPER = ELM_ORIGIN_FINDER_ICON.cloneNode( true),
-			ELM_THUMBNAIL = ELM_WRAPPER.getElementsByTagName( 'div')[0],
-			ELM_FILENAME = ELM_WRAPPER.getElementsByTagName( 'div')[1],
+			ELM_THUMBNAIL = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-thumbnail', 'div')[0],
+			ELM_FILENAME = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-filename', 'div')[0],
 			file, w, index, style, instansce, callback;
 		
 		ELM_WRAPPER.onclick = onClick;
@@ -712,7 +712,6 @@ pettanr.finder = ( function(){
 			callback( index);
 		}
 
-		
 		function draw(){
 			var _thumb = file.getThumbnail();
 			if( _thumb !== null){
@@ -765,7 +764,7 @@ pettanr.finder = ( function(){
 			collect: function(){
 				elmContainer.removeChild( ELM_WRAPPER);
 				file = elmContainer = null;
-				FINDER_ICON_POOL.push( this);
+				FINDER_ICON_POOL.push( instansce);
 			}
 		}
 	}
diff --git a/app/assets/javascripts/work.js b/app/assets/javascripts/work.js
index 99e0025f..1dffaecc 100644
--- a/app/assets/javascripts/work.js
+++ b/app/assets/javascripts/work.js
@@ -1,6 +1,6 @@
 /*
  * pettanR work.js
- *   version 0.4.1
+ *   version 0.4.2
  *   
  * author:
  *   itozyun
@@ -31,17 +31,6 @@
  * 
  */
 
-		pettanr.LINE_FEED_CODE_TEXTAREA = ( function(){
-			var text = document.getElementById( 'shadowTxtarea'),
-				form = text.parentNode;
-			form.parentNode.removeChild( form);
-			return text.value;
-		})();
-		pettanr.LINE_FEED_CODE_PRE = ( function(){
-			var pre = document.getElementById( 'shadowPre');
-			pre.parentNode.removeChild( pre);
-			return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ??				
-		})();
 
 /* ----------------------------------------
  *   pettanr.editor
@@ -86,7 +75,7 @@ pettanr.editor = ( function(){
 		COMIC_ELEMENT_ARRAY = [],
 		ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),
 		MIN_PANEL_HEIGHT = 20,
-		MIN_OBJECT_SIZE = 19,
+		MIN_ELEMENT_SIZE = 19,
 		MOUSE_HIT_AREA = 10,
 		jqMouseEventChacher,
 		jqEditor,
@@ -129,7 +118,6 @@ pettanr.editor = ( function(){
 				a.href = '#';
 				return ret;
 			})(),
-			EMPTY_FUNCTION = new Function,
 			ITEM_ARRAY = [],
 			barH = pettanr.util.getElementSize( ELM_BAR).height,
 			itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,
@@ -177,12 +165,12 @@ pettanr.editor = ( function(){
 			}
 		}
 
-		var MenuBarItemClass = function( title, opt_callbackArray){
+		var MenuBarItemClass = function( title){
 			var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),
 				ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],
 				ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],
 				INDEX = ITEM_ARRAY.length,
-				SELECTION_CALLBACK_ARRAY = opt_callbackArray || [],
+				SELECTION_CALLBACK_ARRAY = [],
 				numSelection = 0,
 				visible = false;
 			ELM_TITLE.innerHTML = title;
@@ -201,9 +189,9 @@ pettanr.editor = ( function(){
 						}
 						return -1;
 					})();
-				i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]();
+				i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);
 				e.stopPropagation();
-				return false;				
+				return false;
 			}
 			return {
 				elm: ELM_WRAPPER,
@@ -240,7 +228,7 @@ pettanr.editor = ( function(){
 
 		
 		function createMenubarItem( title){
-			var _item = MenuBarItemClass.apply( {}, [ title]);
+			var _item = new MenuBarItemClass( title);
 			ITEM_ARRAY.push( _item);
 			return _item;
 		}
@@ -256,6 +244,17 @@ pettanr.editor = ( function(){
 
 				delete MENU_BAR_CONTROL.init;
 			},
+			open: function(){
+				MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init();
+				// ELM_BAR.style.top = ( -barH) +'px';
+				// anime
+			},
+			close: function(){
+				var l = ITEM_ARRAY.length;
+				for( var i=0; i<l; ++i){
+					ITEM_ARRAY[ i].hide();
+				}
+			},
 			h: barH,
 			onMouseMove: function( _mouseX, _mouseY){
 				if( barH >= _mouseY){
@@ -357,12 +356,44 @@ pettanr.editor = ( function(){
 			MENUBAR_BACK.visible( true);
 			SAVE_CONTROL.panelUpdated( true);
 		}
+		function destroyStack( _stack, _destroy){
+			_stack.fn = null;
+			
+			var	_argBack = _stack.argBack,
+				_argForword = _stack.argForword,
+				_value;
+			if( typeof _argBack.length === 'number'){ // isArray
+				while( _argBack.length > 0){
+					_value = _argBack.shift();
+					_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
+				}
+			}
+			if( typeof _argForword.length === 'number'){
+				while( _argForword.length > 0){
+					_value = _argForword.shift();
+					_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
+				}						
+			}			
+		}
 		return {
 			init: function(){
 				log = $( '#history-log');
 				delete HISTORY.init;
 			},
-		    saveState: function( _function, _argBack, _argForword, _destory) {
+			open: function(){
+				HISTORY.init && HISTORY.init();
+			},
+			close: function(){
+				MENUBAR_BACK.visible( false);
+				MENUBAR_FORWARD.visible( false);
+		       	while( STACK_BACK.length > 0){
+					destroyStack( STACK_BACK.shift(), true);
+				}
+		       	while( STACK_FORWARD.length > 0){
+					destroyStack( STACK_FORWARD.shift(), true);
+				}
+			},
+		    saveState: function( _function, _argBack, _argForword, _destroy) {
 		        STACK_BACK.push( {
 		        	fn:			_function,
 		        	argBack:	_argBack,
@@ -371,26 +402,11 @@ pettanr.editor = ( function(){
 		        });
 		        MENUBAR_BACK.visible( true);
 				SAVE_CONTROL.panelUpdated( true);
-
+				
+				var _stack;
 		       	while( STACK_FORWARD.length > 0){
-					var _stack = STACK_FORWARD.shift(),
-						_destroy = _stack.destroy,
-						_value;
-					_argBack = _stack.argBack;
-					_argForword = _stack.argForword;
-					_stack.fn = null;
-					if( typeof _argBack === 'array'){
-						while( _argBack.length > 0){
-							_value = _argBack.shift();
-							_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
-						}
-					}
-					if( typeof _argForword === 'array'){
-						while( _argForword.length > 0){
-							_value = _argForword.shift();
-							_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
-						}						
-					}
+					_stack = STACK_FORWARD.shift();
+					destroyStack( _stack, _stack.destroy);
 				}
 				MENUBAR_FORWARD.visible( false);
 		    }		
@@ -402,22 +418,74 @@ pettanr.editor = ( function(){
  *     Save Control
  */
 
+	var OUTPUT_CONSOLE = ( function(){
+		var jqWrap, jqOutputArea,
+			ID = 'outputConsole';
+		//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
+		
+		function close(){
+			jqWrap.hide();
+			jqOutputArea.val('');
+		}
+		function clickOK(){
+			pettanr.overlay.hide();
+			close();			
+		}
+		return {
+			init: function(){
+				this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();
+				jqOutputArea = $( '#output-area');
+				delete OUTPUT_CONSOLE.init;
+			},
+			jqWrap: null,
+			show: function( _text){
+				jqWrap.show();
+
+				
+				pettanr.overlay.show( this);
+				jqWrap.css(
+					{
+						left:	Math.floor( ( windowW -jqWrap.width()) /2),
+						top:	Math.floor( ( windowH -jqWrap.height()) /2)
+					}
+				);				
+				
+				jqOutputArea.val( _text).focus();
+			},
+			onWindowResize: function(){
+				jqWrap.css(
+					{
+						left:	Math.floor( ( windowW -jqWrap.width()) /2),
+						top:	Math.floor( ( windowH -jqWrap.height()) /2)
+					}
+				);
+			},
+			onClose: close,
+			ID: 'textEditor'
+		}
+	})();
+
 	var SAVE_CONTROL = ( function(){
 		var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),
 			SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),
 			SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),
 			SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),
+			OUTPUT = MENU_BAR_CONTROL.QUIT.createSelection( 'output', null, onOutputClick, true, false, true),
 			QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),
 			updated = false;
 		
 		function quit(){
 		}
 		
+		function onOutputClick(){
+			// OUTPUT_CONSOLE.show();
+		}
+		
 		function outputAsHtml(){
-			alert( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));
+			OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));
 		}
 		function outputAsJsonString(){
-			alert( COMIC_ELEMENT_CONTROL.getAsJsonString());
+			OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());
 		}
 		return {
 			quit: quit,
@@ -441,9 +509,9 @@ pettanr.editor = ( function(){
 	
 	var TEXT_EDITOR_CONTROL = ( function(){
 		var jqWrap, jqTextarea, jqButton,
-			textElement, onUpdateFunction;
-		
-		pettanr.key.addKeyDownEvent( this.ID, 69, false, false, clickOK);
+			textElement, onUpdateFunction,
+			ID = 'textEditor';
+		//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
 		
 		function close(){
 			jqWrap.hide();
@@ -501,7 +569,7 @@ pettanr.editor = ( function(){
 				textElement && this.show( textElement);
 			},
 			onClose: close,
-			ID: 'textEditor'
+			ID: ID
 		}
 	})();
 
@@ -515,11 +583,12 @@ pettanr.editor = ( function(){
 			jqWrap, jqContainer, jqItemOrigin,
 			itemW, itemH,
 			jqName, jqButton, buttonW,
-			onUpdateFunction,
+			//onUpdateFunction,
+			_g_onUpdateFunction,
 			winW,
 			onEnterInterval = null;
 		
-		var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/images/' : 'images/',
+		var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',
 			THUMB_PATH = BASE_PATH, // + 'thumbnail/',
 			LIMIT_FILESIZE = 1024 * 10; // 10KB
 		var IMAGE_DATA = {
@@ -703,56 +772,74 @@ pettanr.editor = ( function(){
 				SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),
 				LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,
 				reversibleImage = null,
-				onEnterFlag = false;
+				onEnterFlag = false,
+				imgW, imgH;
 			JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');
 			jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));
 			
+			function onImageLoad( url, _imgW, _imgH){
+				if( reversibleImage === null) {
+					alert( url);
+					return;
+				}
+				imgW = _imgW || data.width || 64;
+				imgH = _imgH || data.height || 64;
+				JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
+				var zoom = 128 /( imgW > imgH ? imgW : imgH),
+					h = Math.floor( imgH *zoom),
+					w = Math.floor( imgW *zoom);
+				reversibleImage.elm.style.width = w +'px';
+				reversibleImage.elm.style.height = h +'px';
+				reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
+				reversibleImage.resize( w, h);
+				JQ_ICON_WRAP.click( onClick);
+			}
+			
+			function onClick( e){
+				pettanr.overlay.hide();
+				if( _g_onUpdateFunction) {
+					if( LOW_SRC === null){
+						window[ _g_onUpdateFunction]( SRC, imgW, imgH);
+						window[ _g_onUpdateFunction] = null;
+					} else {
+						var _onLoad = pettanr.util.createGlobalFunc( [
+								'function( url, w, h){',
+									'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',
+									'window["', _g_onUpdateFunction, '"] = null;',
+								'}'
+							].join( '')),
+							_onError = pettanr.util.createGlobalFunc( [
+								'function( url){',
+									'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',
+									'window["', _g_onUpdateFunction, '"] = null;',
+								'}'
+							].join( ''));
+						pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);
+						window[ _onLoad] = window[ _onError] = undefined;
+						/*
+						( function( onUpdate){
+							pettanr.util.loadImage( SRC,
+								function( _abspath, imgW, imgH){
+									onUpdate( SRC, imgW, imgH);
+									onUpdate = null;
+								},
+								function( _abspath){
+									onUpdate( SRC, data.width || 64, data.height || 64);
+									onUpdate = null;
+								}
+							);										
+						})( onUpdateFunction);*/ // close()で値が消えるので、クロージャに保持
+					}
+				}
+				close();
+			}
+			
 			return {
 				onEnter: function(){
 					if( onEnterFlag === true) return;
-					reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){
-						if( reversibleImage === null) {
-							alert( url);
-							return;
-						}
-						/*
-						 * ieでサイズが取れない、、、
-						 */
-						imgW = imgW || data.width || 64;
-						imgH = imgH || data.height || 64;
-						JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
-						var zoom = 128 /( imgW > imgH ? imgW : imgH),
-							h = Math.floor( imgH *zoom),
-							w = Math.floor( imgW *zoom);
-						reversibleImage.elm.style.width = w +'px';
-						reversibleImage.elm.style.height = h +'px';
-						reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
-						reversibleImage.resize( w, h);
-						JQ_ICON_WRAP.click( function( e){
-							pettanr.overlay.hide();
-							if (onUpdateFunction) {
-								if( LOW_SRC === null){
-									onUpdateFunction( SRC, imgW, imgH);
-								} else {
-									( function( onUpdate){
-										pettanr.util.loadImage( SRC,
-											function( _abspath, imgW, imgH){
-												onUpdate( SRC, imgW, imgH);
-												onUpdate = null;
-											},
-											function( _abspath){
-												onUpdate( SRC, data.width || 64, data.height || 64);
-												onUpdate = null;
-											}
-										);										
-									})( onUpdateFunction); // close()で値が消えるので、クロージャに保持
-								}
-							}
-							close();
-						});
-					});
+					reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);
 					JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);
-					onEnterFlag = true;				
+					onEnterFlag = true;						
 				},
 				destroy: function(){
 					reversibleImage && reversibleImage.destroy();
@@ -774,7 +861,7 @@ pettanr.editor = ( function(){
 				ICON_ARRAY.shift().destroy();
 			}
 			onEnterInterval !== null && window.clearTimeout( onEnterInterval);
-			onUpdateFunction = onEnterInterval = null;
+			onEnterInterval = null;// onUpdateFunction = 
 		}
 		function onEnterShowImage(){
 			var l = ICON_ARRAY.length,
@@ -791,22 +878,22 @@ pettanr.editor = ( function(){
 			// onUpdateFunction && onUpdateFunction( textElement);
 			close();
 		}
+		function onMouseWheel( e, delta){
+			if( winW < containerW){
+				wrapX += delta *WHEEL_DELTA;
+				wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
+				jqContainer.css( { left: wrapX});
+				
+				onEnterInterval !== null && window.clearTimeout( onEnterInterval);
+				onEnterInterval = window.setTimeout( onEnterShowImage, 500);
+			}
+			//e.stopPropagation();
+			return false;			
+		}
 		return {
 			init: function(){
 				this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();
-				jqContainer = $( '#image-icon-container').mousewheel(
-					function( e, delta){
-						if( winW < containerW){
-							wrapX += delta *WHEEL_DELTA;
-							wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
-							jqContainer.css( { left: wrapX});
-							
-							onEnterInterval !== null && window.clearTimeout( onEnterInterval);
-							onEnterInterval = window.setTimeout( onEnterShowImage, 500);
-						}
-						//e.stopPropagation();
-						return false;
-					});
+				jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);
 				containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;
 				jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());
 				var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));
@@ -820,7 +907,12 @@ pettanr.editor = ( function(){
 			},
 			jqWrap: null,
 			show: function( _onUpdateFunction){
-				onUpdateFunction = _onUpdateFunction;
+				//onUpdateFunction = _onUpdateFunction;
+				if( _onUpdateFunction){
+					_g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);
+				} else {
+					_g_onUpdateFunction = null;
+				}
 				pettanr.overlay.show( this);
 				
 				var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],
@@ -1017,9 +1109,9 @@ pettanr.editor = ( function(){
 					} else {
 						jqWrapper.find( '.window-footer').remove();
 					}
-					update( x, y, w, h);
+					this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);
 					
-					this.onFirstOpen && this.onFirstOpen();
+					update( x, y, w, h);
 					
 					delete this.firstOpen;
 				},
@@ -1038,11 +1130,22 @@ pettanr.editor = ( function(){
 						}
 					}
 				},
+				onFadeIn: function(){
+					instance.firstOpen && instance.firstOpen();
+					instance.onOpen && setTimeout( callOnOpen, 0);
+					function callOnOpen(){
+						instance.onOpen( w, bodyH);
+					}
+				},
+				onFadeOut: function(){
+					var elmWrapper = jqWrapper.get(0);
+					elmWrapper.parentNode.removeChild( elmWrapper);
+					instance.onClose && setTimeout( instance.onClose, 0);
+				},
 				close: function(){
 					if( visible === false) return;
 					instance.visible = visible = false;
-					instance.onClose && setTimeout( instance.onClose, 0);
-					closeWindow( instance);
+					jqWrapper.fadeOut( instance.onFadeOut);
 					MENUBAR_SELWCTION.title( 'show ' +title);
 				},
 				bodyBackOrForward: bodyBackOrForward,
@@ -1062,7 +1165,7 @@ pettanr.editor = ( function(){
 					
 					if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;
 					if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){
-						this.close();
+						instance.close();
 						return;
 					}
 					
@@ -1139,28 +1242,9 @@ pettanr.editor = ( function(){
 			if( _window.visible !== true) return;
 			var _jqWindow = _window.$;
 			jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない．
-			_jqWindow.fadeIn(
-				function(){
-					_window.firstOpen && _window.firstOpen();
-					_window.onOpen && setTimeout( _window.onOpen, 0);
-				}
-			);
+			_jqWindow.fadeIn( _window.onFadeIn);
 			return;
 		}
-		function closeWindow( _window){
-			if( _window.visible !== false) return;
-			var l = WINDOW_ARRAY.length;
-			for( var i=0; i<l; ++i){
-				if( WINDOW_ARRAY[ i] === _window){
-					//WINDOW_ARRAY.splice( i, 1);
-					//WINDOW_ARRAY.push( _window);
-					_window.$.stop().fadeOut( function(){
-						this.parentNode.removeChild( this);
-					});
-					return;
-				}
-			}
-		}
 		
 		return {
 			init: function(){
@@ -1316,12 +1400,12 @@ pettanr.editor = ( function(){
 					instance = this;
 					delete this.onInit;
 				},
-				onFirstOpen: function(){
+				onFirstOpen: function( _w, _h){
 					finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE);
 					delete this.onFirstOpen;
 				},
-				onOpen: function(){
-					finder.onOpen();
+				onOpen: function( _w, _h){
+					finder.onOpen( _w, _h);
 				},
 				onResize: function( _w, _h){
 					finder.onWindowResize( _w, _h);
@@ -1336,57 +1420,73 @@ pettanr.editor = ( function(){
  * INFOMATION_WINDOW
  */			
 	var INFOMATION_WINDOW = ( function(){
-		var FADE_EFFECT_ENABLED = pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,
+		var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,
 			FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
 			FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
 			backgroundInfomationElm,
 			jqComicElementInformation,
-			elmValueX, elmValueY, elmValueZ, elmValueA, elmValueW, elmValueH, elmAspect,
-			elmPercentW, elmPercentH,
+			inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
+			inputPercentW, inputPercentH,
 			currentComicElement = null,
-			currentElementType = -1;
+			currentElementType = -1,
+			currentLock = false;
 
 		return WINDOWS_CONTROL.createWindow(
 			this,
 			{
-				onFirstOpen: function(){
+				onFirstOpen: function( _w, _h){
 					backgroundInfomationElm = $( '#panel-background-information');
 					
 					jqComicElementInformation = $( '#comic-element-infomation').hide().css( {
-						height:		this.bodyHeight()
+						height:		_h
 					});
 					var TAB_GROUP_ID = 'comic-element-attribute';
-					var CREATER = pettanr.key.createEditableText;
-					elmValueX = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);
-					elmValueY = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);
-					elmValueZ = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);
-					elmValueA = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);
-					elmValueW = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);
-					elmValueH = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);
-					elmPercentW = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);
-					elmPercentH = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);
-					elmAspect = $( '#comic-element-keep-aspect');
+					var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;
+					inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID);
+					inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID);
+					inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID);
+					inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID);
+					inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID);
+					inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID);
+					inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);
+					inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);
+					inputAspectRatio = $( '#comic-element-keep-aspect');
 					delete this.onFirstOpen;
 				},
-				onResize: function( w, h){
-					jqComicElementInformation && jqComicElementInformation.css( {
-						height: h
+				onResize: function(  _w, _h){
+					jqComicElementInformation.css( {
+						height: _h
 					});
 				},
-				update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){
-					if( !backgroundInfomationElm) return; // なぜか !backgroundInfomationElm が必要
+				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 === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,
+						w = currentElement !== null ? currentElement.w : 0,
+						h = currentElement !== null ? currentElement.h : 0,
+						actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
+						actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
+						wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,
+						hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,
+						keepAspect = currentElement !== null && currentElement.keepAspect === true;
+					
 					if( currentElementType !== _elementType){
 						if( _elementType !== -1){
 							if( _elementType === 1){
-								elmValueA.show();
-								elmPercentW.hide();
-								elmPercentH.hide();
-								elmAspect.hide();
+								inputA.visible( true);
+								inputPercentW.visible( false);
+								inputPercentH.visible( false);
+								inputAspectRatio.hide();
 							} else {
-								elmValueA.hide();
-								elmPercentW.show();
-								elmPercentH.show();
-								elmAspect.show();
+								inputA.visible( false);
+								inputPercentW.visible( true);
+								inputPercentH.visible( true);
+								inputAspectRatio.show();
 							}
 							currentElementType === -1 && jqComicElementInformation.stop().css( {
 								filter:		'',
@@ -1401,17 +1501,21 @@ pettanr.editor = ( function(){
 						currentElementType = _elementType;
 					}
 					if( currentElementType !== -1){
-						elmValueX.update( x);
-						elmValueY.update( y);
-						elmValueZ.update( z);
-						_elementType === 1 && elmValueA.update( a);
-						elmValueW.update( w);
-						elmValueH.update( h);
-						_elementType === 0 && elmPercentW.update( wPercent);
-						_elementType === 0 && elmPercentH.update( hPercent);					
+						inputX.update( x);
+						inputY.update( y);
+						inputZ.update( z);
+						_elementType === 1 && inputA.update( a);
+						inputW.update( w);
+						inputH.update( h);
+						_elementType === 0 && inputPercentW.update( wPercent);
+						_elementType === 0 && inputPercentH.update( hPercent);					
 					} else {
 						
 					}
+				},
+				lock: function( _currentLock){
+					currentLock = !!_currentLock;
+					this.bodyBackOrForward( !currentLock);
 				}
 			},
 			'infomation-window', 'Infomation', 0, 30, 200, 180, true
@@ -1423,125 +1527,112 @@ pettanr.editor = ( function(){
  */
 	var HELP_DOCUMENTS_WINDOW = ( function(){
 		var visible = true,
-			hasAjaxContents = false,
 			jqAjaxContents,
 			jqNaviItems,
 			jqPages,
+			currentPageIndex = 0,
 			HELP = MENU_BAR_CONTROL.HELP,
 			onLoadFunction = HELP.createAjaxSelection( onFirstOpen),
 			instance;
 		function jumpPage( _index){
 			
 		}
+		function onSelectionClick( _pageIndex){
+			currentPageIndex = _pageIndex || currentPageIndex;
+			HELP_DOCUMENTS_WINDOW.open();
+			onOpen();
+		}
+		function onOpen(){
+			jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');
+			jqPages.hide().eq( currentPageIndex).show();
+		}
 		function onFirstOpen( _pageIndex){
-			_pageIndex = _pageIndex || 0;
-			if( hasAjaxContents === false){
+			currentPageIndex = _pageIndex || currentPageIndex;
+			if( onHelpLoad !== null){
 				$.ajax({
 					url:		'help/jp.xml',
 					dataType:	'xml',
-					success:	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,
-							numPage = 0;
-						elmNavi.className = 'sidenavi';
-						elmItemOrigin.className = 'sidenavi-item';
-						elmItemOrigin.href = '#';
-						elmPages.className = 'page-contents';
-						elmPageOrigin.className = 'page-content';
-						elmPageOrigin.appendChild( elmTitleOrigin);
-						
-						// helpTitle && instance.title( helpTitle);
-						
-						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;
-							
-							pettanr.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.createSelection( title, null, ( function( _pageIndex){
-								return function(){
-									HELP_DOCUMENTS_WINDOW.open();
-									onOpen( _pageIndex);									
-								}
-							})( numPage), true);
-							++numPage;
-						});
-						onLoadFunction();
-						onLoadFunction = null;
-						
-						jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);
-						
-						jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className)
-							.click( function( e){
-								var that = this,
-									parent = this.parentNode,
-									i = ( function(){
-										var children = parent.getElementsByTagName( 'a'),
-											l = children.length;
-										for( var i=0; i<l; ++i){
-											if( children[ i] === that) return i;
-										}
-										return -1;
-									})();
-								e.stopPropagation();
-								if( i === -1) return false;
-								jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
-								jqPages.hide().eq( i).show();
-								
-								return false;
-							});
-						jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a')
-							.click( function( e){
-								var that = this,
-									i = ( function(){
-										var href = that.href,
-											i = href.split( '#jump'),
-											n = i[1]
-										if( n && '' +parseFloat( n) === n){
-											return parseFloat( n)
-										}
-										return -1;
-									})();
-								e.stopPropagation();
-								if( i === -1) return false;
-								jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
-								jqPages.hide().eq( i).show();
-								
-								return false;
-							});
-						jqNaviItems.eq( _pageIndex).addClass( 'current');
-						jqPages = jqAjaxContents.find( '.page-content');
-						jqPages.eq( _pageIndex).show();
-					}
+					success:	onHelpLoad
 				});
-				hasAjaxContents = true;
+				onHelpLoad = null;
 			}
-			function onOpen( _pageIndex){
-				_pageIndex = _pageIndex || 0;
-				jqNaviItems.removeClass( 'current').eq( _pageIndex).addClass( 'current');
-				jqPages.hide().eq( _pageIndex).show();
+		}
+		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,
+				numPage = 0;
+			elmNavi.className = 'sidenavi';
+			elmItemOrigin.className = 'sidenavi-item';
+			elmItemOrigin.href = '#';
+			elmPages.className = 'page-contents';
+			elmPageOrigin.className = 'page-content main';
+			elmPageOrigin.appendChild( elmTitleOrigin);
+			
+			// helpTitle && instance.title( helpTitle);
+			
+			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;
+				
+				pettanr.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.createSelection( title, null, onSelectionClick, true);
+				++numPage;
+			});
+			onLoadFunction();
+			onLoadFunction = null;
+			
+			jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);
+			
+			jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);
+			jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a').click( onInnerLinkClick);
+			jqPages = jqAjaxContents.find( '.page-content');
+			setTimeout( onOpen, 0);
+		}
+		function onNaviClick( e){
+			// this は <a>
+			var children = this.parentNode.getElementsByTagName( 'a'),
+				l = children.length;
+			for( var i=0; i<l; ++i){
+				if( children[ i] === this) break;
 			}
+			e.stopPropagation();
+			if( i === l) return false;
+			jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
+			jqPages.hide().eq( i).show();
+			return false;
+		}
+		function onInnerLinkClick( e){
+			var jump = this.href.split( '#jump'),
+				n = jump[1],
+				i = ( n && '' +parseFloat( n) === n) ? parseFloat( n) : -1;
+			e.stopPropagation();
+			if( i === -1) return false;
+			jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
+			jqPages.hide().eq( i).show();
+			currentPageIndex = i;
+			return false;				
 		}
 		return WINDOWS_CONTROL.createWindow(
 			this,
@@ -1551,7 +1642,9 @@ pettanr.editor = ( function(){
 					jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});
 					delete this.onInit;
 				},
-				onFirstOpen: onFirstOpen,
+				onFirstOpen: function(){
+					onFirstOpen();
+				},
 				onResize: function( w, h){
 					jqAjaxContents && jqAjaxContents.css( { height: h});
 				},
@@ -1593,7 +1686,7 @@ pettanr.editor = ( function(){
 				visible = !visible;
 				
 				if( visible === true && !ELM_GRID.style.backgroundImage){
-					ELM_GRID.style.backgroundImage = "url('grid.gif')";
+					ELM_GRID.style.backgroundImage = "url('images/grid.gif')";
 				}
 				return visible;				
 			}
@@ -1641,6 +1734,7 @@ pettanr.editor = ( function(){
 /*
  * PANEL_CONTROL
  * panel-border の表示と onPanelResize の通知．
+ * panel drag.
  * 
  */
 	var PANEL_CONTROL = ( function(){
@@ -1818,8 +1912,8 @@ pettanr.editor = ( function(){
 			}
 		}
 	};
-	var	PANEL_RESIZER_TOP = PanelResizerClass.apply( {}, [ 'panel-resizer-top', true]),
-		PANEL_RESIZER_BOTTOM = PanelResizerClass.apply( {}, [ 'panel-resizer-bottom', false]);
+	var	PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),
+		PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);
 		
 	PanelResizerClass = undefined;
 
@@ -1865,18 +1959,18 @@ pettanr.editor = ( function(){
 		}
 		function layerBack(){
 			if( currentElement === null) return;
-			COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false);
-			updateInfomation();
-			SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]);
+			if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return;
+			INFOMATION_WINDOW.update( currentElement);
+			SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);
 			var _z = currentElement.z;
 			LAYER_BACK_BUTTON.visible( _z > 0);
 			LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
 		}
 		function layerForward(){
 			if( currentElement === null) return;
-			COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true);
-			updateInfomation();
-			SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]);
+			if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return;
+			INFOMATION_WINDOW.update( currentElement);
+			SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);
 			var _z = currentElement.z;
 			LAYER_BACK_BUTTON.visible( _z > 0);
 			LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
@@ -1884,8 +1978,8 @@ pettanr.editor = ( function(){
 		function del(){
 			if( currentElement === null) return;
 			buttonBackOrForward( true);
-			COMIC_ELEMENT_CONTROL.removeComicElement( currentElement);
-			SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true);
+			COMIC_ELEMENT_CONTROL.remove( currentElement);
+			SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);
 			COMIC_ELEMENT_OPERATION_MANAGER.hide();
 		}
 		function edit(){
@@ -2058,7 +2152,7 @@ pettanr.editor = ( function(){
 						_mouseY > 0 ? 90 : -90
 				);
 				currentText && currentText.angle( balloonA);
-				COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( undefined, undefined, undefined, balloonA);
+				INFOMATION_WINDOW.update( currentText);
 			},
 			onFinish: function(){
 				startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);
@@ -2071,8 +2165,9 @@ pettanr.editor = ( function(){
 				currentText = null;
 			}
 		}
-	})(),
-	RESIZE_OPERATOR = ( function(){
+	})();
+	
+	var RESIZE_OPERATOR = ( function(){
 		var	MOUSE_CURSOR = updateMouseCursor,
 			GRID_ENABLED = GRID_CONTROL.enabled;
 		
@@ -2116,6 +2211,7 @@ pettanr.editor = ( function(){
 			baseX, baseY, baseW, baseH,
 			currentX, currentY, currentW, currentH,
 			offsetX, offsetY,
+			lock = false,
 			error = 0;
 		
 		function draw( _x, _y, _w, _h){
@@ -2123,14 +2219,20 @@ pettanr.editor = ( function(){
 			y = _y !== undefined ? _y : y;
 			w = _w !== undefined ? _w : w;
 			h = _h !== undefined ? _h : h;
-			elmResizerContainerStyle.left = x +'px';
-			elmResizerContainerStyle.top = y +'px';
-			elmResizerContainerStyle.width = w +'px';
-			elmResizerContainerStyle.height = h +'px';
-			elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';
-			elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';
-			elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';
-			elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';
+			try {
+				elmResizerContainerStyle.left = x +'px';
+				elmResizerContainerStyle.top = y +'px';
+				elmResizerContainerStyle.width = w +'px';
+				elmResizerContainerStyle.height = h +'px';
+				elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';
+				elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';
+				elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';
+				elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';				
+			} catch(e){
+				alert( [x, y, w, h].join( ','));
+				return;
+			}
+
 			
 			POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);
 			POSITION_ARRAY.push(
@@ -2166,17 +2268,17 @@ pettanr.editor = ( function(){
 			currentElement.resize( x, y, w, h);
 			currentIsTextElement === true && TAIL_OPERATOR.update( w, h);
 			CONSOLE_CONTROLER.show( currentElement, w, h);
-			COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y, undefined, undefined, w, h);
+			INFOMATION_WINDOW.update( currentElement);
 		}
 		
-		function flip( _flipV, _flipH){
+		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;
 			MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);
 			elmResizerContainer.className = 'current-resizer-is-' +currentIndex;
-			currentElement.flip( _flipV, _flipH);
+			currentElement.flip( _flipH, _flipV);
 		}
 		return {
 			update: draw,
@@ -2234,24 +2336,23 @@ pettanr.editor = ( function(){
 				var com = RESIZE_WORK_ARRAY[ currentIndex],
 					moveX = _mouseX -offsetX,
 					moveY = _mouseY -offsetY,
+					_updated = moveX !== 0 || moveY !== 0,
 					_x, _y, _w, _h,
-					_updated,
 					_thisError = 0;
 					
 				var _memoryX = 0,
-					_memoryY = 0;
+					_memoryY = 0,
+					_momoryW = 0,
+					_momoryH = 0;
 				/*
-				 * Opera 11+ often forget values, why ??
+				 * Opera 11+ often forget values, why ??
 				 */
 				while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
-					com = RESIZE_WORK_ARRAY[ currentIndex];
-					moveX = _mouseX -offsetX;
-					moveY = _mouseY -offsetY;
-					_x = baseX +moveX *com.x;
-					_y = baseY +moveY *com.y;
-					_w = baseW +moveX *com.w;
-					_h = baseH +moveY *com.h;
-					_updated = moveX !== 0 || moveY !== 0;
+					_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
@@ -2261,39 +2362,45 @@ pettanr.editor = ( function(){
 					}
 				}
 				
-				if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){
+				if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
 					
 				} else 
-				if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){
+				if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){
 					//return;
-					_w = _w < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _w;
-					_h = _h < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _h;
-					_x = currentX;
-					_y = currentY;
+					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 === COMIC_ELEMENT_TYPE_TEXT){
 					return;
 				} else 
-				if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){
+				if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
 
-					if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_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( false, true);
+						flip( true, false);
 						flipV = currentElement.flipV();
 					} else 
-					if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){
+					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( true, false);
+						flip( false, true);
 						flipH = currentElement.flipH();
 					} else {
 					// flipVH
@@ -2343,11 +2450,19 @@ pettanr.editor = ( function(){
 					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 = ( function(){
+	})();
+	
+	var POSITION_OPERATOR = ( function(){
 		var	MOUSE_CURSOR = updateMouseCursor,
 			GRID_ENABLED = GRID_CONTROL.enabled;
 		
@@ -2362,7 +2477,7 @@ pettanr.editor = ( function(){
 			y = _y !== undefined ? _y : y;
 			RESIZE_OPERATOR.update( x, y);
 			currentElement.resize( x, y);
-			COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y);
+			INFOMATION_WINDOW.update( currentElement);
 		}
 		
 		return {
@@ -2427,23 +2542,7 @@ pettanr.editor = ( function(){
 				RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);
 				currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);
 				CONSOLE_CONTROLER.show( currentElement, currentw, currenth);
-				updateInfomation( currentx, currenty, currentElement.z, angle, currentw, currenth);
-			}
-			function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){
-				_w = _w !== undefined ? _w : currentw;
-				_h = _h !== undefined ? _h : currenth;
-				INFOMATION_WINDOW.update(
-					currentElement === null ? -1 : currentElement.type,
-					_x !== undefined ? _x : currentx,
-					_y !== undefined ? _y : currenty,
-					_z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z),
-					_a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'),
-					_w,
-					_h,
-					currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)),
-					currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)),
-					currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect
-				);
+				INFOMATION_WINDOW.update( currentElement);
 			}
 			function show( _currentElement){
 				currentElement === null && RESIZE_OPERATOR.show( _currentElement);
@@ -2468,7 +2567,7 @@ pettanr.editor = ( function(){
 				MOUSE_CURSOR( '');
 				TAIL_OPERATOR.hide();
 				CONSOLE_CONTROLER.hide();
-				updateInfomation();
+				INFOMATION_WINDOW.update( null);
 			}
 			function restoreState( arg){
 				if( arg && arg.length !== 8) return;
@@ -2515,34 +2614,27 @@ pettanr.editor = ( function(){
 			hide: hide,
 			resize: resize,
 			restoreState: restoreState,
-			updateInfomation: updateInfomation,
 			saveStatus: saveComicElementStatus,
 			busy: function(){
 				return currentOperator !== null;
 			},
-			hitareaX: function( _comicElement, _x){
+			hitTest: function( _mouseX, _mouseY, _comicElement){
+				var _x, _y, _w, _h;
 				if( _comicElement === currentElement){
 					var _consoleX = CONSOLE_CONTROLER.x();
-					return currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
-				}
-				return _x -HIT_AREA;
-			},
-			hitareaY: function( _comicElement, _y){
-				return _y -HIT_AREA;
-			},
-			hitareaW: function( _comicElement, _w){
-				if( _comicElement === currentElement){
+					_x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
+					_y = currenty -HIT_AREA;
 					var _consoleW = CONSOLE_CONTROLER.w();
-					return ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;
-				}
-				return _w +HIT_AREA *2;
-			},
-			hitareaH: function( _comicElement, _h){
-				if( _comicElement === currentElement){
+					_w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;
 					var _consoleY = CONSOLE_CONTROLER.y();
-					return ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
+					_h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
+				} else {
+					_x = _comicElement.x -HIT_AREA;
+					_y = _comicElement.y -HIT_AREA;
+					_w = _comicElement.w +HIT_AREA *2;
+					_h = _comicElement.h +HIT_AREA *2;
 				}
-				return _h +HIT_AREA *2;
+				return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
 			},
 			onMouseDown: function( _currentElement, _mouseX, _mouseY){
 				//show( _currentElement);
@@ -2589,10 +2681,7 @@ pettanr.editor = ( function(){
 			h: h,					
 			z: z,
 			timing: timing,
-			hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);},
-			hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);},
-			hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);},
-			hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);},
+			hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest(  _mouseX, _mouseY, this);},
 			shift: function( _shiftX, _shiftY){
 				update( this.x +_shiftX, this.y +_shiftY);
 			},
@@ -2640,8 +2729,11 @@ pettanr.editor = ( function(){
 				top:	y,
 				width:	w,
 				height:	h
-			}, 250, function(){ reversibleImage.resize( flipH * w, flipV * h);});
-			animate !== true && reversibleImage.resize( flipH * w, flipV * h);
+			}, 250, onAnimeComplete);
+			animate !== true && onAnimeComplete();
+		}
+		function onAnimeComplete(){
+			reversibleImage.resize( flipH * w, flipV * h);
 		}
 		
 		function updateUrl( _url){
@@ -2660,7 +2752,7 @@ pettanr.editor = ( function(){
 			reversibleImage = _reversibleImage;
 		}
 		return pettanr.util.extend(
-			AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing]),
+			new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),
 			{
 				init: function(){
 					instance = this;
@@ -2814,7 +2906,7 @@ pettanr.editor = ( function(){
 		}
 		
 		return pettanr.util.extend(
-			AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing]),
+			new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),
 			{
 				init: function(){
 					instance = this;
@@ -2908,6 +3000,8 @@ pettanr.editor = ( function(){
 		var	SAVE = HISTORY.saveState,
 			ELM_CONTAINER = document.getElementById( 'comic-element-container'),
 			currentElement = null,
+			currentLockTest = false,
+			currentLock = false,
 			panelX, panelY, panelW, panelH,
 			startX, startY;
 	
@@ -2955,14 +3049,14 @@ pettanr.editor = ( function(){
 				COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());
 				COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);
 			}
-			numberingComicElement();
+			renumber();
 		}
 		function removeComicElement( _comicElement) {
 			var l = COMIC_ELEMENT_ARRAY.length;
 			for( var i=0; i<l; ++i){
 				if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){
 					COMIC_ELEMENT_ARRAY.splice( i, 1);
-					numberingComicElement();
+					renumber();
 					_comicElement.$.stop().css( {
 						filter:		'',
 						opacity:	''
@@ -2984,7 +3078,7 @@ pettanr.editor = ( function(){
 		 * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算
 		 * jqElmの並び替え。
 		 */
-		function numberingComicElement(){
+		function renumber(){
 			var l = COMIC_ELEMENT_ARRAY.length,
 				_comicElement, jqElm, jqNext;
 			for( var i=0; i < l; ++i){
@@ -3004,26 +3098,27 @@ pettanr.editor = ( function(){
 					}
 					return -1;
 				})();
-			if( i === -1) return;
+			if( i === -1) return false;
 			if( goForward === true){
-				if( i === 0) return;
+				if( i === 0) return false;
 				COMIC_ELEMENT_ARRAY.splice( i, 1);
 				COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);
 			} else {
-				if( i === l -1) return;
+				if( i === l -1) return false;
 				COMIC_ELEMENT_ARRAY.splice( i, 1);
 				COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);
 			}
-			numberingComicElement();
+			renumber();
+			return true;
 		}
-		function restoreReplaceObject( arg){
+		function restoreReplaceElement( arg){
 			replaceComicElement( arg[ 0], arg[ 1]);
 		}
 		
 		return {
-			init: function( _x, _y, _w, _h){
+			init: function(){
 				
-				appendComicElement( ImageElementClass.apply( {}, [ 'images/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));
+				appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));
 				appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));
 			/*
 			 * 
@@ -3032,10 +3127,10 @@ pettanr.editor = ( function(){
 				
 				delete COMIC_ELEMENT_CONTROL.init;
 			},
-			removeComicElement: removeComicElement,
-			restoreComicElement: restoreComicElement,
-			replaceComicElement: replaceComicElement,
-			restoreReplaceObject: restoreReplaceObject,
+			remove: removeComicElement,
+			restore: restoreComicElement,
+			replace: replaceComicElement,
+			restoreReplace: restoreReplaceElement,
 			onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){
 			/*
 			 * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。
@@ -3060,50 +3155,55 @@ pettanr.editor = ( function(){
 			},
 			onMouseMove: function( _mouseX, _mouseY){
 				var l = COMIC_ELEMENT_ARRAY.length,
-					_X = _mouseX -panelX,
-					_Y = _mouseY -panelY,
-					_elm, _x, _y;
+					_x = _mouseX -panelX,
+					_y = _mouseY -panelY,
+					_elm = currentElement;
 					
-				if( currentElement !== null){
-					if( currentElement.busy() === true){
-						currentElement.onMouseMove( _X, _Y);
+				if( _elm !== null){
+					currentLockTest = currentLockTest === true && _x === 0 && _y === 0;
+					if( _elm.busy() === true){
+						_elm.onMouseMove( _x, _y);
 						return true;
 					}
-					_x = currentElement.hitareaX();
-					_y = currentElement.hitareaY();
-					if( _x <= _X && _y <= _Y && _x + currentElement.hitareaW() >= _X && _y +currentElement.hitareaH() >= _Y){
-						currentElement.onMouseMove( _X, _Y); // cursor
+					if( _elm.hitTest( _x, _y) === true){
+						_elm.onMouseMove( _x, _y); // cursor
+						return true;
+					}
+					if( currentLock === true){
+						currentLockTest = true;
 						return true;
 					}
 				}
 				for( var i=0; i<l; i++){
 					_elm = COMIC_ELEMENT_ARRAY[ i];
-					_x = _elm.hitareaX();
-					_y = _elm.hitareaY();
 					// hitTest
-					if( _x <= _X && _y <= _Y && _x + _elm.hitareaW() >= _X && _y +_elm.hitareaH() >= _Y){
+					if( _elm.hitTest( _x, _y) === true){
+						_elm.onMouseMove( _x, _y); // cursor
+						log.html( [ _x, _y, i].join( ','));
 						currentElement = _elm;
-						currentElement.onMouseMove( _X, _Y); // cursor
-						log.html( [ _X, _Y, _x, _y, i].join( ','));
 						return true;
 					}
 				}
 				currentElement = null;							
 				COMIC_ELEMENT_OPERATION_MANAGER.hide();
-				log.html( [ _X, _Y, _x, _y].join( ','));
+				log.html( [ _x, _y].join( ','));
 				return false;
 			},
 			onMouseUp: function( _mouseX, _mouseY){
 				var ret = currentElement !== null && currentElement.busy() === true;
 				ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);
-				startX = startY = NaN;
+				currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY) === true;
+				RESIZE_OPERATOR.lock( currentLock);
+				INFOMATION_WINDOW.lock( currentLock);
 				return ret;
 			},
 			onMouseDown: function( _mouseX, _mouseY){
 				startX = panelX;
 				startY = panelY;
-				currentElement !== null && currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);
-				return currentElement !== null;
+				if( currentElement === null) return false
+				currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);
+				currentLockTest = true;
+				return true;
 			},
 			busy: function(){
 				return currentElement !== null;
@@ -3113,12 +3213,13 @@ pettanr.editor = ( function(){
 				h = h || 150; //ActualHeight
 				x = x || Math.floor( panelW /2 -w /2);
 				y = y || Math.floor( panelH /2 -h /2);
-				IMAGE_GROUP_EXPROLER.show( function( _url, _w, _h){
-					var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);
+				function onImageSelect( _url, _w, _h){
+					var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);
 					appendComicElement( _comicElement);
 					_comicElement.animate( undefined, undefined, _w, _h);
-					SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);
-				});
+					SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);					
+				}
+				IMAGE_GROUP_EXPROLER.show( onImageSelect);
 			},
 			createTextElement: function( type, angle, text, x, y, z, w, h){
 				type = type || 0;
@@ -3303,11 +3404,12 @@ pettanr.editor = ( function(){
 			// last
 			MENU_BAR_CONTROL.init();
 			
+			OUTPUT_CONSOLE.init();
 			TEXT_EDITOR_CONTROL.init();
 			IMAGE_GROUP_EXPROLER.init();
 
 		/*
-		 * centering
+		 * centering
 		 */
 			pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);	// ctrl + 0
 			pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);	// ctrl + 0
@@ -3340,7 +3442,7 @@ pettanr.editor = ( function(){
 		onWindowResize: function( _windowW, _windowH){
 			windowW = _windowW;
 			windowH = _windowH;
-			
+			if( pettanr.editor.firstOpen) return;
 			/*
 			 * ieは +'px'が不要みたい
 			 */
diff --git a/app/assets/stylesheets/common.css b/app/assets/stylesheets/common.css
index b1cabcb0..3e075c58 100644
--- a/app/assets/stylesheets/common.css
+++ b/app/assets/stylesheets/common.css
@@ -68,9 +68,7 @@ version: 2.7.0
 	
 	pre, code, kbd, samp, tt {
 		font-family:		monospace;
-		line-height:		100%;
 		*font-size:			108%;
-		margin-bottom:		1em;
 	}
 
 	/* http://e2designer.seesaa.net/article/152168876.html */
@@ -98,18 +96,10 @@ version: 2.7.0
 		font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;
 	}
 
-	dt {
-		margin-left:	1em;
-		font-weight:	bold;
-	}
-	dd {
-		margin-left:	2em;
-	}
-
 /*  ClearFix
 --------------------------------------------------------------------------------------*/
 	/* for modern brouser */
-	claerfix:after {   
+	.claerfix:after {
 		content: ".";   
 		display: block;   
 		visibility: hidden;   
@@ -193,9 +183,6 @@ version: 2.7.0
 		margin-left:		2em;
 	}
 	
-	p, ul, ol, dl, blockquote, pre, table {
-		margin:				0 0 1em 2em;
-	}
 	blockquote, cite {}
 	em {}
 
@@ -215,11 +202,23 @@ version: 2.7.0
 		border-width:		0 0 1px 1px;
 	}
 
+/*  image layout
+--------------------------------------------------------------------------------------*/
+	.float-left {
+		float:				left;
+		margin:				0 1em 1em 0;
+	}
+	.float-right {
+		float:				right;
+		margin:				0 0 1em 1em;
+	}
+
 /*  Button
 --------------------------------------------------------------------------------------*/
 	.button {
-		border:					1px outset #ccc;
-		background-color:		#eee;
+		border:					1px solid;
+		background:				-moz-linear-gradient(center top , #F9F9F9, #E3E3E3) repeat scroll 0 0 transparent;
+		border-color:			#ccc #bbb #aaa;
 		color:					#666;
 		font-weight:			bold;
 		text-align:				center;
@@ -227,22 +226,22 @@ version: 2.7.0
 		overflow:				hidden;
 		height:					30px;
 		line-height:			30px;
-		border-radius:			5px;
-		-o-border-radius:		5px;
-		-ms-border-radius:		5px;
-		-moz-border-radius:		5px;
-		-webkit-border-radius:	5px;
+		border-radius:			3px;
+		-o-border-radius:		3px;
+		-ms-border-radius:		3px;
+		-moz-border-radius:		3px;
+		-webkit-border-radius:	3px;
 	}
 
 /*  Loading
 --------------------------------------------------------------------------------------*/
 	.loading {
-		background-image:		url( loading.gif);
+		background-image:		url( ../images/loading.gif);
 		background-position:	50% 50%;
 		background-repeat:		no-repeat;
 	}
 	.error {
-		background-image:		url( error.png);
+		background-image:		url( ../images/error.png);
 		background-position:	50% 50%;
 		background-repeat:		no-repeat;
 	}
@@ -291,7 +290,6 @@ version: 2.7.0
 		position:				absolute;
 		right:					0;
 		top:					0;
-		width:					320px;
 		text-align:				right;
 		height:					30px;
 		border-right:			1px solid #666;
@@ -355,15 +353,54 @@ version: 2.7.0
 	
 /*  main
 --------------------------------------------------------------------------------------*/
-	#main,
-	.main {
+	#main {
 		padding:				20px 10px;
 	}
 		#main p,
+		#main dl,
 		#main pre,
+		#main table,
+		#main blockquote,
 		.main p,
-		.main pre {
-			line-height:			1.6em;
+		.main dl,
+		.main pre,
+		.main table,
+		.main blockquote {
+			line-height:		1.6em;
+			margin:				0 0 1em 2em;
+		}
+		#main ul,
+		#main ol,		
+		.main ul,
+		.main ol {
+			line-height:		1.6em;
+			margin:				0 0 1em 2.8em;
+		}
+		
+		#main .block-element-item,
+		.main .block-element-item {
+			display:			block;
+			margin:				0 0 1em 2em;
+		}
+
+		pre,
+		blockquote {
+		    border:				1px solid;
+		    overflow:			auto;
+		    padding:			4px 0.5em;
+		    margin:				0.8em 0 1em 2em;
+		    line-height:		1.4em;
+		    white-space:		pre-wrap;
+		    word-wrap:			break-word;
+		    font-size:			12px;
+		}
+		pre {
+			border-color:		#ccc;
+		    background-color:	#f0f0f0;
+		}
+		blockquote {
+			border-color:		#e9f;
+		    background-color:	#ecf;
 		}
 
 /*  footer-content
@@ -421,8 +458,8 @@ version: 2.7.0
 	.dl-table-small dt {
 		clear:			left;
 		float:			left;
-		height:			1.8em;
-		line-height:	1.8em;
+		height:			1.6em;
+		line-height:	1.6em;
 		overflow:		hidden;
 		margin:			0;
 		padding:		0 0 0 0.2em;
@@ -430,7 +467,7 @@ version: 2.7.0
 	.dl-table dd,
 	.dl-table-small dd {
 		margin:			0 0 0.5em;
-		line-height:	1.8em;
+		line-height:	1.6em;
 		border-bottom:	1px solid #ccc;
 	}
 	.dl-table dt {
@@ -443,8 +480,9 @@ version: 2.7.0
 		width:			140px;
 	}
 	.dl-table-small dd {
-		padding:		0 0 0 150px;
+		padding:		0 0 0 160px;
 	}
+
 /*  Reversible Image
 --------------------------------------------------------------------------------------*/	
 	img.img-flip-v { /* 上下反転 */
@@ -453,10 +491,10 @@ version: 2.7.0
 		-ms-transform:			scale( 1, -1);
 		-moz-transform:			scale( 1, -1);
 		-webkit-transform:		scale( 1, -1);
-		/*filter:					progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);
-		-ms-filter:				progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);*/
+	}
+	.pettanr-ActiveX-enabled img.img-flip-v {
 		filter:					flipv();
-		-ms-filter:				flipv();
+		-ms-filter:				flipv();		
 	}
 	v\:image.img-flip-v {
 		flip:					y; /* vml */
@@ -468,8 +506,8 @@ version: 2.7.0
 		-ms-transform:			scale( -1, 1);
 		-moz-transform:			scale( -1, 1);
 		-webkit-transform:		scale( -1, 1);
-		/*filter:					progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);
-		-ms-filter:				progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);*/
+	}
+	.pettanr-ActiveX-enabled img.img-flip-h {
 		filter:					fliph();
 		-ms-filter:				fliph();
 	}
@@ -479,12 +517,12 @@ version: 2.7.0
 	
 	img.img-flip-vh { /* 上下左右反転 */
 		transform:				scale( -1, -1);
-		-o-transform:			scale( -1, -1);
+		-o-transform:			rotate(180deg);
 		-ms-transform:			scale( -1, -1);
 		-moz-transform:			scale( -1, -1);
 		-webkit-transform:		scale( -1, -1);
-		/*filter:					progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);
-		-ms-filter:				progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);*/
+	}
+	.pettanr-ActiveX-enabled img.img-flip-vh {
 		filter:					flipv() fliph();
 		-ms-filter:				flipv() fliph();
 	}
@@ -492,14 +530,43 @@ version: 2.7.0
 		rotation :				180; /* vml */
 	}
 
-/*  Reversible Image with png-fix
+/*  PettanR Comic
 --------------------------------------------------------------------------------------*/
-	.img-flip-v .img-flip-with-pngfix-v {
-		filter:					flipv();
+	.pettanr-comic-panel {
+		border-style:			solid;
+		border-color:			#111;
+		position:				relative;
+		margin:					1em auto;
+		overflow:				hidden;
 	}
-	.img-flip-h .img-flip-with-pngfix-h {
-		filter:					fliph();
+	.pettanr-comic-image,
+	.pettanr-comic-balloon {
+		position:				absolute;
 	}
-	.img-flip-vh .img-flip-with-pngfix-h {
-		filter:					flipv() fliph();
-	}
\ No newline at end of file
+		.pettanr-comic-image img {
+			position:			absolute;
+		    height:				100%;
+		    width:				100%;
+		    left:				0;
+		    top:				0;
+		}
+		.pettanr-comic-balloon .pettanr-comic-speach {
+			position:				absolute;
+			top:					0;
+			left:					0;
+		}
+			.pettanr-comic-speach,
+			.pettanr-comic-speach tbody,
+			.pettanr-comic-speach tr,
+			.pettanr-comic-speach td {
+				width:				100%;
+				height:				100%;
+				border:				0;
+				padding:			0;
+				margin:				0;
+				text-align:			center;
+				vertical-align:		middle;
+			}
+			.pettanr-comic-speach {
+				table-layout:		fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
+			}
\ No newline at end of file
diff --git a/app/assets/stylesheets/work.css b/app/assets/stylesheets/work.css
index 1c8f486f..bd5de55f 100644
--- a/app/assets/stylesheets/work.css
+++ b/app/assets/stylesheets/work.css
@@ -21,49 +21,71 @@
 			display:			none;
 		}
 	
-	/*  Overlay
-	--------------------------------------------------------------------------------------*/
-		#overlay-container,
+/*--------------------------------------------------------------------------------------
+ * 
+ *  overlay
+ *  
+ -------------------------------------------------------------------------------------*/
+	#overlay-container,
+	#overlay-shadow {
+		position:			absolute;
+		left:				0;
+		top:				0;
+		width:				100%;
+		height:				100%;
+		overflow:			hidden;
+	}
 		#overlay-shadow {
-			position:			absolute;
-			left:				0;
-			top:				0;
-			width:				100%;
-			height:				100%;
-			overflow:			hidden;
+			background-color:	#000;
+			opacity:			0.5;
+			-moz-opacity:		0.5;
+			-khtml-opacity:		0.5;
 		}
-			#overlay-shadow {
-				background-color:	#000;
-				opacity:			0.5;
-				-moz-opacity:		0.5;
-				filter:				alpha(opacity=50);
-				-ms-filter:			alpha(opacity=50);
-			}
-			.h2c-ActiveX-disabled #overlay-shadow {
-				
-			}
-			
-			#overlay-close-button {
-				border:					2px solid #f00;
-				color:					#f00;
-				font-weight:			bold;
-				font-size:				16px;
-				line-height:			16px;
-				text-align:				center;
-				cursor:					pointer;
-				overflow:				hidden;
-				width:					20px;
-				height:					20px;
-				padding:				2px;
+		.pettanr-ActiveX-Enabled #overlay-shadow {
+			filter:				alpha(opacity=50);
+			-ms-filter:			alpha(opacity=50);			
+		}
+		.pettanr-ActiveX-disabled #overlay-shadow {
+			background:			transparent url( black-50pct.png) repeat 0 0;
+			_background:		#000;
+		}
+		
+		#overlay-close-button {
+			border:					2px solid #f00;
+			color:					#f00;
+			font-weight:			bold;
+			font-size:				16px;
+			line-height:			16px;
+			text-align:				center;
+			cursor:					pointer;
+			overflow:				hidden;
+			width:					20px;
+			height:					20px;
+			padding:				2px;
+			position:				absolute;
+			top:					9px;
+			right:					9px;
+			border-radius:			5px;
+			-o-border-radius:		5px;
+			-ms-border-radius:		5px;
+			-moz-border-radius:		5px;
+			-webkit-border-radius:	5px;
+		}
+
+		/*  Output Console
+		--------------------------------------------------------------------------------------*/
+			#output-console-wrapper {
 				position:				absolute;
-				top:					9px;
-				right:					9px;
-				border-radius:			5px;
-				-o-border-radius:		5px;
-				-ms-border-radius:		5px;
-				-moz-border-radius:		5px;
-				-webkit-border-radius:	5px;
+				width:					80%;
+				height:					80%;
+				background-color:		#fff;
 			}
+				#output-area {
+					width:			100%;
+					height:			100%;
+					border:			1px outset #ccc;
+					outline:		1px;
+				}
 
 /*--------------------------------------------------------------------------------------
  * 
@@ -226,7 +248,7 @@
 							width:			200px;
 							height:			30px;
 							line-height:	30px;
-							*cursor:			pointer;
+							*cursor:		pointer;
 						}
 						.menu-bar-item-focus a:hover {
 							color:				#333;
@@ -255,7 +277,7 @@
 							}
 							.menu-bar-item-focus kbd {
 								position:		absolute;
-								top:			11px;
+								top:			0;
 								left:			140px;
 								display:		block;
 								font-size:		10px;
@@ -286,9 +308,17 @@
 				background-color:	#fff;
 				opacity:			0.7;
 				-moz-opacity:		0.7;
+				-khtml-opacity:		0.7;
+			}
+			.pettanr-ActiveX-disabled #whiteGlass-container div {
 				filter:				alpha(opacity=70);
-				-ms-filter:			alpha(opacity=70);
+				-ms-filter:			alpha(opacity=70);				
+			}
+			.pettanr-ActiveX-disabled #whiteGlass-container div {
+				background:			transparent url( white-70pct.png) repeat 0 0;
+				_background:		#fff;
 			}
+			
 			#whiteGlass-top {
 				top:		0;
 				left:		0;
@@ -328,20 +358,23 @@
 			top:				0;
 			left:				0;
 			width:				100%;
-			height:				100%; /* 100% don't work for ie6, so ie6 need to set height-'px' by js */
-			*background-color:	#fff;
-			filter:				alpha(opacity=0);
+			height:				100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */
+		}
+		.pettanr-ActiveX-enabled #mouse-operation-catcher {
+			background-color:	#fff;
+			filter:				alpha( opacity=0);
+			-ms-filter:			alpha( opacity=0);
 		}
-		html>/**/body #mouse-operation-catcher {  
-			background-color /***/:		#fff\9;  
-			-ms-filter /***/:			alpha(opacity=0)\9;
-		} 
 		/*
-		 * ieでは、背景を設定しないと、mouse-operation-catcherが働かない。
-		 * activeX有効の場合は背景を着色してfilterで透明に。
-		 * activeX無効の場合は透明gifを使用
+		 * ie では、背景を設定しないと、 mousemove が働かない。
+		 * activeX 有効の場合は背景を着色して filter で透明に。
+		 * activeX 無効の場合は透明 gif を使用
 		 * background:			url(4x4.gif) fixed repeat;
 		 */
+		.pettanr-ActiveX-disabled #mouse-operation-catcher {
+			background:			url( opacity0.gif) fixed repeat;
+		}
+	
 	
 	/*  comic-element
 	--------------------------------------------------------------------------------------*/
@@ -507,7 +540,7 @@
 					height:					25px;
 					line-height:			25px;
 					float:					left;
-					background-image:		url('sprite.gif');
+					background-image:		url('../images/sprite.gif');
 					background-repeat:		no-repeat;
 					background-position:	0 0;
 					cursor:					pointer;
@@ -659,7 +692,7 @@
 					position:				absolute;
 					top:					0;
 					right:					0;
-					background-image:		url('sprite.gif');
+					background-image:		url('../images/sprite.gif');
 					background-repeat:		no-repeat;
 					background-position:	-70px -60px;
 					width:					20px;
@@ -669,41 +702,37 @@
 					text-align:				center;
 					cursor:					pointer;
 				}
-			
-			/*
-			 * page contents
-			 */
-				.sidenavi {
-					width:				100px;
-					float:				left;
-				}
-					.sidenavi-item,
-					.sidenavi-item:link {
-						display:			block;
-						border-bottom:		1px solid #666;
-						padding:			1em;
-						text-decoration:	none;
-					}
-					.sidenavi-item:hover {
-						background-color:	#ccc;
-						text-decoration:	none;
-					}
-					.sidenavi .current {
-						background-color:	#666;
-						color:				#eee;
-					}
-				.page-contents {
-					_position:				relative; /* for ie6 */
-					margin-left:			100px;
-					padding:				1em 1em 2em 1em;
-				}
-					.page-content {
-						display:				none;
-					}
-						.page-content p,
-						.page-content pre {
-							line-height:			1.6em;
-						}
+
+	/*  page contents
+	--------------------------------------------------------------------------------------*/
+		.sidenavi {
+			width:				100px;
+			float:				left;
+		}
+			.sidenavi-item,
+			.sidenavi-item:link {
+				display:			block;
+				border-bottom:		1px solid #666;
+				padding:			1em;
+				text-decoration:	none;
+				zoom:				1;
+			}
+			.sidenavi-item:hover {
+				background-color:	#ccc;
+				text-decoration:	none;
+			}
+			.sidenavi .current {
+				background-color:	#666;
+				color:				#eee;
+			}
+		.page-contents {
+			_position:				relative; /* for ie6 */
+			margin-left:			100px;
+			padding:				1em 1em 2em 1em;
+		}
+			.page-content {
+				display:				none;
+			}
 	
 	/*  editable-text
 	--------------------------------------------------------------------------------------*/
@@ -785,9 +814,9 @@
 					display:			inline-block;
 					width:				14px;
 					line-height:		22px;
-					*line-height:		22px; /* ie用 input周りのサイズあわせ、よく分からない。 */
 					color:				#666;
 					text-align:			center;
+					cursor:				pointer;
 				}
 				.comic-element-attribute-value {
 					width:				40px;
@@ -822,9 +851,9 @@
 			#bg-color,
 			#select-bg-color-button,
 			#reset-bg-color-button {
-				position:		absolute;
-				text-align:		center;
-				cursor:			pointer;
+				position:			absolute;
+				text-align:			center;
+				cursor:				pointer;
 			}
 			
 			#bg-pattern,
@@ -836,25 +865,25 @@
 				top:				15px;
 			}
 			#bg-pattern {
-				left:			15px;
-				width:			100px;
+				left:				15px;
+				width:				100px;
 			}
 			#select-bg-pattern-button,
 			#reset-bg-pattern-button,
 			#select-bg-color-button,
 			#reset-bg-color-button {
-				border:			1px outset #666;
-				height:			20px;
-				top:			115px;
-				line-height:	20px;
+				border:				1px outset #666;
+				height:				20px;
+				top:				115px;
+				line-height:		20px;
 			}
 			#select-bg-pattern-button {
-				left:			15px;
-				width:			80px;
+				left:				15px;
+				width:				80px;
 			}
 			#reset-bg-pattern-button {
-				left:			95px;
-				width:			20px;
+				left:				95px;
+				width:				20px;
 			}
 			
 			#bg-color {
@@ -863,12 +892,12 @@
 				background-color:	#66f;
 			}
 			#select-bg-color-button {
-				left:			125px;
-				width:			40px;
+				left:				125px;
+				width:				40px;
 			}
 			#reset-bg-color-button {
-				left:			165px;
-				width:			20px;
+				left:				165px;
+				width:				20px;
 			}
 	
 	
@@ -946,7 +975,7 @@
  *  
  -------------------------------------------------------------------------------------*/
 	.finder-body {
-		position:relative;
+		position:				relative;
 	}
 
 	.finder-header {
@@ -1029,20 +1058,22 @@
 			background-repeat:			no-repeat;
 		}
 		.finder-icon .file-type-1 {
-			background-image:			url('folder_album.png');
+			background-image:			url('../images/folder_general.png');
 		}
 		.finder-icon .file-type-2 {
-			background-image:			url('folder_album.png');
+			background-image:			url('../images/folder_album.png');
 		}
 		.finder-icon .file-type-11 {
-			background-image:			url('folder_album.png');
-		}		
+			background-image:			url('../images/cabinet.png');
+		}
+		
 		.has-thumbnail {
-			background-image:			url('folder_album.png');
+			background-image:			url('../images/folder_album.png');
 		}
 		/*
 		 * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon
-		 * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon
+		 * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon
+		 * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon
 		 */
 		.finder-icon-filename {
 			position:					absolute;
diff --git a/app/models/author.rb b/app/models/author.rb
index 2341a9f3..a51c509c 100644
--- a/app/models/author.rb
+++ b/app/models/author.rb
@@ -7,7 +7,7 @@ class Author < ActiveRecord::Base
          :recoverable, :rememberable, :trackable, :token_authenticatable, :validatable#, :confirmable
 
   # Setup accessible (or protected) attributes for your model
-  attr_accessible :id, :name, :password, :password_confirmation, :remember_me #, :email
+  attr_accessible :id, :name, :password, :password_confirmation, :remember_me, :email
 
   before_save do |r|
     r.name = 'no name' if r.name.blank?
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 65d0e1a3..0b872d35 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,43 +1,20 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html xmlns:v="urn:schemas-microsoft-com:vml">
-<head>
+<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="Content-Language" content="ja">
   <meta http-equiv="Content-Script-Type" content="text/javascript">
   <meta http-equiv="Content-Style-Type" content="text/css">
   <meta http-equiv="imagetoolbar" content="no">
-  <title>Pettanr</title>
-  <%= stylesheet_link_tag    "common" %>
-  <%= stylesheet_link_tag    "work" %>
-  <%= csrf_meta_tags %>
-</head>
+  <title>Pettanr</title>
+  <%= stylesheet_link_tag    "common" %>
+  <%= stylesheet_link_tag    "work" %>
+  <%= csrf_meta_tags %>
+</head>
 <body>
-    	<!--[if lt IE 9]>
-    		<script type="text/javascript">
-				(function(){
-					var	b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),
-						x = (function(){
-							try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}
-							return 'pettanr-ActiveX-' +( t ? 'enabled' : 'disabled');
-						})();
-					if( !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') +x;
-				})();    			
-    		</script>
-    	<![endif]-->
-		
-		<!-- 改行コード 取得用 -->
-<form>
-<textarea id="shadowTxtarea" style="display:none;">
-
-</textarea>
-</form>
-<pre id="shadowPre" style="display:none;">
-
-</pre>
-
 		<div id="header">
 			<div class="base-content-width" style="position:relative;">
-				<h1>pettanR</h1>
+				<h1><a href="index.html">pettanR</a></h1>
 			<!-- global navi -->
 				<div id="global-navi">
 					<noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>
@@ -48,11 +25,8 @@
 		<div id="inner-wrapper" class="base-content-width">
 
 			<!-- home -->
-				<div id="entrance" class="console-page main">
-					<h2>Wellcome to pettanR!</h2>
-					<p>Hello, xxxxx.</p>
-					<p>This page is login user console.</p>
-					<a href="#" onclick="pettanr.view.show('editor')">boot editor</a>
+				<div id="entrance" class="console-page main" style="display:block;">
+					<%= yield %>
 				</div>
 				
 			<!-- setting -->
@@ -79,6 +53,12 @@
 						<dd><a href="work.html?view=editor&rimg=ActiveX">Backend is ActiveX</a></dd>
 						<dt>Balloon test</dt>
 						<dd><a href="work.html?view=editor&vector=false">Vector Disabled</a></dd>
+						<dt>ActiveX test</dt>
+						<dd><a href="work.html?ActiveX=true">ActiveX Enabled</a></dd>
+						<dd><a href="work.html?ActiveX=false">ActiveX Disabled</a></dd>
+						<dt>Debug mode</dt>
+						<dd><a href="work.html?debug=true">Debug Enabled</a></dd>
+						<dd><a href="work.html?debug=false">Debug Disabled</a></dd>
 					</dl>
 					
 					<h2>XML + XSLT pages</h2>
@@ -294,12 +274,17 @@
 				<div id="image-exproler-container" class="finder-container"></div>
 			</script>
 		</div>
-	<!-- Editor -->
+	<!-- / Editor -->
 		
 		
 	<!-- オーバーレイ -->
 		<div id="overlay-container" style="display: none;">
 			<div id="overlay-shadow"></div>
+		
+		<!-- アウトプットコンソール -->
+			<div id="output-console-wrapper">
+				<textarea id="output-area" readonly></textarea>
+			</div>
 			
 		<!-- テキスト エディタ -->
 			<div id="speach-editor-wrapper">
@@ -347,18 +332,17 @@
 			</div>
 			
 		</div>
-<%= yield %>
-  <%= javascript_include_tag "common" %>
-  <%= javascript_include_tag "system" %>
-<%if current_author %>
-  <script>
-    current_author = {
-      id: <%= current_author.id %>,
-      name: "<%= h current_author.name %>"
-    }
-  </script>
-<% end %>
-  <%= javascript_include_tag "work" %>
-
-  </body>
-</html>
+		<%= javascript_include_tag "common" %>
+		<%= javascript_include_tag "jquery-1.6.2.min" %>
+		<%if current_author %>
+		  <script>
+		    current_author = {
+		      id: <%= current_author.id %>,
+		      name: "<%= h current_author.name %>"
+		    }
+		  </script>
+		<% end %>
+		<%= javascript_include_tag "work" %>
+		<%= javascript_include_tag "system" %>
+	</body>
+</html>
diff --git a/db/schema.rb b/db/schema.rb
index 270ec85c..127b8d86 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -43,7 +43,7 @@ ActiveRecord::Schema.define(:version => 20120102071851) do
     t.string   "name"
     t.string   "homepage_url"
     t.string   "api_url"
-    t.integer  "default_lisence_id"
+    t.integer  "default_lisence_id", :default => 0, :null => false
     t.datetime "crowled_at"
     t.datetime "created_at"
     t.datetime "updated_at"
@@ -174,12 +174,12 @@ ActiveRecord::Schema.define(:version => 20120102071851) do
   end
 
   create_table "original_pictures", :force => true do |t|
-    t.string   "ext",        :null => false
-    t.integer  "width",      :null => false
-    t.integer  "height",     :null => false
-    t.integer  "filesize",   :null => false
-    t.integer  "artist_id"
-    t.integer  "lisence_id"
+    t.string   "ext",                       :null => false
+    t.integer  "width",                     :null => false
+    t.integer  "height",                    :null => false
+    t.integer  "filesize",                  :null => false
+    t.integer  "artist_id",  :default => 0, :null => false
+    t.integer  "lisence_id", :default => 0, :null => false
     t.datetime "created_at"
     t.datetime "updated_at"
   end
@@ -223,13 +223,13 @@ ActiveRecord::Schema.define(:version => 20120102071851) do
   add_index "panels", ["comic_id", "t"], :name => "panels_idt", :unique => true
 
   create_table "resource_pictures", :force => true do |t|
-    t.string   "ext",                 :null => false
-    t.integer  "width",               :null => false
-    t.integer  "height",              :null => false
-    t.integer  "filesize",            :null => false
-    t.integer  "artist_id"
-    t.integer  "lisence_id"
-    t.integer  "original_picture_id", :null => false
+    t.string   "ext",                                :null => false
+    t.integer  "width",                              :null => false
+    t.integer  "height",                             :null => false
+    t.integer  "filesize",                           :null => false
+    t.integer  "artist_id",           :default => 0, :null => false
+    t.integer  "lisence_id",          :default => 0, :null => false
+    t.integer  "original_picture_id",                :null => false
     t.datetime "created_at"
     t.datetime "updated_at"
   end
diff --git a/public/assets/assets.lnk b/public/assets/assets.lnk
new file mode 100644
index 0000000000000000000000000000000000000000..06fef09b63590a4b77a21c583bbff3ca84629413
GIT binary patch
literal 440
zcmZXQu}cFn7{y<#gLFFOtO$Zd#6{G)2p$e6N~e?ReoIboI4I?4Qs^i+`Y-6>A0qt&
z#Ov5aaCYfdijyyQNhz4{@<@0;zAs+{K=>;>fl+y){Y>|$$5}Mpn12XNo`ze$^v+9l
zuW}I9ooxyqySLw+aq}n0ytm034qL6)ZJb;MvCAy^8BWXFd05<eP?=5@_E5trrtjuW
zh8X%xC}hw`>41+5OC{lF-9w&gEqi?&SkAmYSS}}{xg~n&lWibau!Ug<NjJL(_7`kX
zcQtbikf6)T4E!UdQmJM;%cQF+*{3Qin|>SA4Yfm=aT!0N%!;UWsz!ayFR#tW!BLfy
Ri0#kfs>|4w6gW09`~iQYRJ{NI

literal 0
HcmV?d00001

diff --git a/public/assets/common.js b/public/assets/common.js
index 5424edb6..c0f241cf 100644
--- a/public/assets/common.js
+++ b/public/assets/common.js
@@ -1,6 +1,6 @@
 /*
  * pettanR common.js
- *   version 0.4.1
+ *   version 0.4.2
  * 
  * author: itozyun
  */
@@ -37,10 +37,10 @@ var pettanr = ( function(){
 		    }
 		    return {};
 		})(),
-		IS_DEBUG = IS_LOCAL === true || URL_PARAMS.debug === true,
+		IS_DEBUG = typeof URL_PARAMS.debug === 'boolean' ? URL_PARAMS.debug : IS_LOCAL === true,
 		jqWindow , jqDocument , jqBody;
 	return {
-		version: '0.4.1',
+		version: '0.4.2',
 		init: function(){
 			jqWindow = $( window);
 			jqDocument = $( document);
@@ -69,8 +69,32 @@ var pettanr = ( function(){
 			return jqBody;
 		},
 		URL_PARAMS: URL_PARAMS,
+		ROOT_PATH: ( function(){
+			// script と html の ドメインが一致
+			var _h1 = document.getElementsByTagName( 'h1')[ 0],
+				_a = _h1.getElementsByTagName( 'a')[ 0],
+				_root = _a.href.split( '\/'),
+				_current = document.location.href.split( '\/'),
+				ret = '.\/';
+			for( var i=0, l=_current.length - _root.length; i<l; ++i){
+				ret = '.' + ret;
+			}
+			return ret;
+			// script と html の ドメインが不一致
+		})(),
 		LOCAL: IS_LOCAL,
-		DEBUG: IS_DEBUG
+		DEBUG: IS_DEBUG,
+		LINE_FEED_CODE_TEXTAREA: ( function(){
+			var text = document.createElement('textarea');
+			text.value = '\n';
+			return text.value;
+		})(),
+		LINE_FEED_CODE_PRE: ( function(){
+			var pre = document.createElement('pre');
+			pre.appendChild( document.createTextNode('\n'));
+			return pre.firstChild.data;
+		})(),
+		IS_IFRAME: !!window.parent
 	}
 })();
 
@@ -119,56 +143,53 @@ pettanr.util = ( function(){
 	nodeNoscript = noscript = null;
 	
 	function cleanCommnetNode( _targetElm){
-		var _elms = ( _targetElm || document).getElementsByTagName( '*'),
-			_elm,
-			i = 0;
-		while( i < _elms.length){
-			_elm = _elms[ i];
-			if( _elm.nodeType === 8 && _elm.parentNode){
-				_elm.parentNode.removeChild( _elm);
-			} else {
-				++i;
-			}
+		_targetElm = _targetElm || document;
+		var _nodes = _targetElm.all || _targetElm.getElementsByTagName( '*'),
+			_array = [],
+			_elm;
+		for(var i=0, l = _nodes.length; i<l; ++i){
+			_array.push( _nodes[ i]);
+		}
+		for( i=0; i<l; ++i){
+			_elm = _array[ i];
+			_elm.nodeType === 8 && _elm.parentNode && _elm.parentNode.removeChild( _elm);
 		}
 	}
 	return {
 		extend: function( baseInstance, extend){
 			for( var key in extend){
-				baseInstance[ key] = extend[ key];
-			}
-			return baseInstance;
-		},
-		createGlobalUniqueName: function(){
-			var randomKey = null;
-			while(true) {
-				randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');
-				if( window[randomKey] === undefined){
-					break;
+				if( typeof baseInstance[ key] === 'undefined'){
+					baseInstance[ key] = extend[ key];
+				} else
+				if( typeof baseInstance[ key] === typeof extend[ key]){
+					baseInstance[ key] = extend[ key];
+				} else {
+					alert( 'extend error');
 				}
 			}
-			return randomKey;
+			return baseInstance;
 		},	
 		cleanCommnetNode: cleanCommnetNode,
 		cleanElement: function( _targetElm){
-			var l = CLEAN_TARGET_ELEMENT.length,
-				elms, elm, j;
-			for( var i=0; i<l; ++i){
-				elms = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);
-				if( elms.length > 0){
-					for( j=0; i<elms.length; ++j){
-						elm = elms[ 0];
-						elm.parentNode && elm.parentNode.removeChild( elm);
-					}
+			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);
 			if( pettanr.ua.isIE === false) return;
-			elms = document.getElementsByName( '*');
-			l = elms.length;
-			for(i=0; i<l; ++i){
-				elm = elms[ i];
-				elm.style.filter = '';
-				elm.style.behavior = '';
+			_nodes = _targetElm.all || _targetElm.getElementsByName( '*');
+			for( i=0, l = _nodes.length; i<l; ++i){
+				_elm = _nodes[ i];
+				_elm.style.filter = '';
+				_elm.style.behavior = '';
 			}
 		},
 		getElementSize: function( _elm){
@@ -294,27 +315,39 @@ pettanr.util = ( function(){
 			}
 			abstractPath = this.getAbsolutePath( src);
 			
-			loadImage( images, abstractPath,
-				function( abspath, actualW, actualH){
-					if( abstractPath !== abspath) return;
-					onLoad && setTimeout( function(){ // 一度読み込まれた画像は即座にonLoadされてしまうので遅延
-						onLoad( src, actualW, actualH);
-					}, 0);
-				},
-				function( abspath){
-					if( abstractPath !== abspath) return;
-					onError && setTimeout( function(){
-						onError( src);
-					}, 0);
-				}, delay, timeout
-			);
+			loadImage( images, abstractPath, onLoadAsync, onErrorAsync, delay, timeout);
+			
+			function onLoadAsync( abspath, actualW, actualH){
+				if( abstractPath !== abspath) return;
+				var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onLoad);
+					_onTimeout = pettanr.util.createGlobalFunc( [
+						'function(){',
+							'window["', _g_onUpdateFunction, '"]( "', abspath, '", ', actualW, ',  ', actualH, ');',
+							'window["', _g_onUpdateFunction, '"] = null;',
+						'}'
+					].join( ''));
+				onLoad && setTimeout( window[ _onTimeout], 0);
+				window[ _onTimeout] = null;
+			}
+			function onErrorAsync( abspath){
+				if( abstractPath !== abspath) return;
+				var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onError);
+					_onTimeout = pettanr.util.createGlobalFunc( [
+						'function(){',
+							'window["', _g_onUpdateFunction, '"]( "', abspath, '");',
+							'window["', _g_onUpdateFunction, '"] = null;',
+						'}'
+					].join( ''));
+				onError && setTimeout( window[ _onTimeout], 0);
+				window[ _onTimeout] = null;
+			}
 			
 		/*  LICENSE: MIT?
 		 *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631
 		 *  AUTHOR: uupaa.js@gmail.com
 		 * 
 		 *  fixed for ie6-8 by pettanr
-		 *   new Image -> document.createElement( 'IMG')
+		 *   new Image -> document.createElement( 'img')
 		 */
 			function loadImage( images, abspath, onLoad, onError, delay, timeout) {
 				images = images || document.images;
@@ -402,6 +435,89 @@ pettanr.util = ( function(){
 				IDorELM.id = '';
 			}
 			return IDorELM;
+		},
+		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];
+				if( _node.nodeType === 1){
+					_classes = _node.className.split( ' ');
+					for( var j=0, m=_classes.length; j<m; ++j){
+						if( _classes[ j] === _className){
+							ret.push( _node);
+							break;
+						}
+					}
+				}
+			}
+			return ret;
+		},
+		hasClassName: function( _elm, _className){
+			var _classes = _elm.className.split( ' ');
+			for( var i=0, l=_classes.length; i<l; ++i){
+				if( _classes[ i] === _className) return true;
+			}
+			return false;
+		},
+		removeAllChildren: function ( _elm){
+			while( _elm.firstChild){
+				remove( _elm.firstChild);
+			}
+			function remove( _node){
+				while( _node.firstChild){
+					remove( _node.firstChild);
+				}
+				_node.parentNode && _node.parentNode.removeChild( _node);
+			}
+		},
+		/*
+		 * 
+		 */
+		createGlobalFunction: function( _func) {
+			var randomKey = null;
+			while( true) {
+				randomKey = '_glovalFunction_' + ( '' + Math.random()).replace( /\./,'');
+				if( eval( 'typeof '+randomKey) === 'undefined') {
+					break;
+				}
+			}
+			window[ randomKey] = _func;
+			return randomKey;
+		},
+		createGlobalFunc: function( func){
+			var randomKey = null;
+			while(true) {
+				randomKey = 'hogeGlovalFunc_'+(''+Math.random()).replace(/\./,'');
+				if(eval('typeof '+randomKey) == 'undefined') {
+					break;
+				}
+			}
+			eval(randomKey+'='+((typeof func=='string') ? func : func.toString()));
+			return randomKey;
+		},
+		createGlobalVar: function( obj){
+			var randomKey = null;
+			while(true) {
+				randomKey = 'hogeGlovalVar_'+(''+Math.random()).replace(/\./,'');
+				if(eval('typeof '+randomKey+'') == 'undefined') {
+					break;
+				}
+			}
+			var globalObj = eval(randomKey+'={}');
+			globalObj.value = obj;
+			return randomKey;
+		},
+		createGlobalUniqueName: function(){
+			var randomKey = null;
+			while(true) {
+				randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');
+				if( typeof window[randomKey] === 'undefined'){
+					break;
+				}
+			}
+			return randomKey;
 		}
 	}
 })();
@@ -496,16 +612,21 @@ pettanr.ua = ( function(){
 		})(),
 		ACTIVEX: ( function(){
 			if( isIE === false || ieVersion > 8) return false;
-			var className = document.body.className,
-				test;
-			if( className && className.indexOf( 'pettanr-ActiveX-enabled') !== -1) return true;
-			if( className && className.indexOf( 'pettanr-ActiveX-disabled') !== -1) return false;
-			try {
-				test = new ActiveXObject('DXImageTransform.Microsoft.gradient');
-			} catch( e){
-				return false;
+			var	b = document.body,
+				c = b.className || '',
+				x,
+				ret = pettanr.URL_PARAMS.ActiveX;
+			if( ret === undefined){
+				if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-enabled') === true) return true;
+				if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-disabled') === true) return false;
+				x = document.createElement('div');
+				b.appendChild(x);
+				x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';
+				ret = x.offsetHeight > 1;
+				b.removeChild(x);
 			}
-			return !!test;
+			b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', ret === true ? 'enabled' : 'disabled'].join( '');
+			return ret;
 		})(),
 		VML: VML,
 		STANDALONE: isStandAloneMode,
@@ -522,10 +643,14 @@ pettanr.ua = ( function(){
 
 
 pettanr.CONST = ( function(){
-	var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false;
+	var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,
+		RETTANR_ROOOT_PATH = 'http:\/\/pettanr.heroku.com\/';
 	return {
-		URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : 'http:\/\/pettanr.heroku.com\/') + 'original_pictures.json',
-		URL_PANELS_JSON:			( isLocal === true ? 'json\/' : 'http:\/\/pettanr.heroku.com\/') + 'panels.json'
+		PETTANR_ROOT_PATH:			RETTANR_ROOOT_PATH,
+		URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'original_pictures.json',
+		URL_PANELS_JSON:			( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'panels.json',
+		NS_PETTANR_COMIC:			'pettanr-comic',
+		RESOURCE_PICTURE_PATH:		( isLocal === true ? pettanr.ROOT_PATH : RETTANR_ROOOT_PATH) + 'resource_pictures\/'
 	}
 })();
 
@@ -535,7 +660,7 @@ pettanr.view = ( function(){
 	var location = document.location.pathname,
 		isWorkPage = location.indexOf( '\/work.html') !== -1 || location.indexOf( '\work.html') !== -1,
 		deep =	location.indexOf( '\/diary\/') !== -1 ||
-				location.indexOf( '\/text\/') !== -1 ||
+				location.indexOf( '\/test\/') !== -1 ||
 				location.indexOf( '\/help\/') !== -1 ||
 				location.indexOf( '\/sitemap\/') !== -1 ||
 				location.indexOf( '\/wiki\/') !== -1,
@@ -570,7 +695,7 @@ pettanr.view = ( function(){
 					el.style.position = 'absolute';
 					el.style.left = el.style.top = '0px';
 					el.style.width = el.style.height ='100%';
-					el.style.overflow = 'hidden';
+					//el.style.overflow = 'hidden';
 					el.hspace = el.vspace = el.marginheight = el.marginwidth = 0;
 					
 					_body.appendChild(el);
@@ -655,55 +780,71 @@ pettanr.view = ( function(){
 		LoginUserNavi = ( function(){
 			return {
 				show: function(){
-					var index = ( function( a){
-						var node = a.parentNode.getElementsByTagName( 'a'),
-							l = node.length;
-						for( var i=0; i<l; ++i){
-							if( node[ i] === a) return i
+					var _nodes = this.parentNode.getElementsByTagName( 'a');
+					for( var i=0, l=_nodes.length; i<l; ++i){
+						if( _nodes[ i] === this){
+							pettanr.view.show( i);
+							break;
 						}
-						return -1;
-					})( this);
-					if( index === -1) return false;
-					
-					pettanr.view.show( index);
+					}
 					return false;
 				},
 				hide: function(){}
 			}
 		})();
-		
-		var elmDl = document.getElementById( 'useragent'),
-			elmDt, elmDd,
-			data = {
-				ua:			navigator.userAgent,
-				platform:	navigator.platform,
-				appVersion:	navigator.appVersion,
-				appCodeName:navigator.appCodeName,
-				appName:	navigator.appName,
-				language:	navigator.browserLanguage || navigator.language
-			},
-			ua = pettanr.ua;
-		if( ua.IE){
-			//data.ua = 'Internet Explorer';
-			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;
+
+		if( pettanr.IS_IFRAME === true){
+			var _nodes = document.getElementsByTagName( 'a'),
+				_a, _href;
+			for(var i=0, l = _nodes.length; i<l; i++){
+				_a = _nodes[ i];
+				_href = _a.href.split('?')[0].split('#')[0];
+				if( pettanr.util.getAbsolutePath( _href) !== location) _a.target = '_parent';
 			}
 		}
-		data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';
 		
-		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);
+		if( pettanr.DEBUG === true){
+			var elmDl = document.getElementById( 'useragent'),
+				elmDt, elmDd,
+				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:	pettanr.ua.ACTIVEX
+				},
+				ua = pettanr.ua;
+			if( ua.IE){
+				//data.ua = 'Internet Explorer';
+				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;
+				}
+			}
+			data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';
+			
+			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);
+			}
+		} else {
+			var _debug = document.getElementById( 'debug');
+			if( _debug){
+				pettanr.util.removeAllChildren( _debug);
+				_debug.parentNode.removeChild( _debug);
+			}
 		}
 	}
 
@@ -712,10 +853,7 @@ pettanr.view = ( function(){
 		origin = document.createElement('a'),
 		items = ( function(){
 			var ret = ['Home', 'Comic list', 'Picture', 'Setting'];
-			if( pettanr.DEBUG === true) {
-				ret.push( 'debug');
-				navi.style.width = '400px';
-			}			
+			pettanr.DEBUG === true && ret.push( 'debug');
 			return ret;
 		})(),
 		l = items.length,
@@ -727,6 +865,7 @@ pettanr.view = ( function(){
 		item.onclick = LoginUserNavi.show;
 		navi.appendChild( item);
 	}
+	navi.style.width = ( ( item.offsetWidth || 80) * l) +'px';
 	location = origin = item = null;
 	
 	/* debug info */
@@ -1065,7 +1204,7 @@ pettanr.overlay = ( function(){
 		}
 	})();
 	/*
-	 * 
+	 * 
 	 */
 
 	function close(){
@@ -1129,15 +1268,6 @@ pettanr.overlay = ( function(){
  * KEY
  * 
  *  - EDITABLE_TEXT_CONTROL
- *    - EditableTextClass
- *      .update: function,
- *      .show: function,
- *      .hide: function,
- *      .start: function,
- *      .finish: finish,
- *      .enabled: function,
- *      .index: function,
- *      .instance: function
  * 
  *    .SHIFT_DOWN_EVENT:	'shiftDown',
  *    .SHIFT_UP_EVENT:		'shiftUp',
@@ -1146,9 +1276,8 @@ pettanr.overlay = ( function(){
  *    .SPACE_DOWN_EVENT:	'spaceDown',
  *    .SPACE_UP_EVENT:		'spaceUp',
  *    .init:				function,
- *    .addKeyDownEvent:			function,
+ *    .addKeyDownEvent:		function,
  *    .keyEventDispatcher:	function,
- *    .createEditableText:	function,
  * 
  * ショートカットキーの監視とテキスト入力(input, textarea)、チェックボックスを管理する。
  * キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。
@@ -1162,171 +1291,6 @@ pettanr.key = ( function(){
 		shiftEnabled = false,
 		ctrlEnabled = false;
 	
-	var EDITABLE_TEXT_CONTROL = ( function(){
-		var	EDITABLE_TEXT_TABLE = {},
-			currentText = null;
-
-		var EditableTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-			var ELM = WRAPPER_ELM.children( '.editable-value').eq( 0),
-				value = ELM.html(),
-				jqInput,
-				index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,
-				instance,
-				enabled = true,
-				A = $( '<a href="#"></a>').html( value).click( function(e){
-					instance = instance || EDITABLE_TEXT_TABLE[ GROUP_ID][ index];
-					EDITABLE_TEXT_CONTROL.start( instance);								
-					A.hide();
-					jqInput = $( '<input type="text"/>').val( value);
-					ELM.append( jqInput);
-					jqInput.focus().select();
-					e.preventDefault();
-					return false;
-				});
-			ELM.addClass( 'editable-text').html( A);
-			
-			return {
-				update: function( _value){
-					value = _value !== undefined ? _value : value;
-					A.html( value);
-					jqInput && jqInput.val( value);
-					currentText === instance && this.finish();
-				},
-				show: function(){
-					enabled === false && WRAPPER_ELM.show();
-					enabled= true;
-				},
-				hide: function(){
-					enabled === true && WRAPPER_ELM.hide();
-					enabled = false;
-				},
-				start: function(){
-					!jqInput && A.click();
-				},
-				finish: function( keep){
-					var _newValue = keep === true ? value : jqInput.val();
-					A.html( _newValue).show();
-					jqInput.remove();
-					jqInput = null;
-					ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);
-					EDITABLE_TEXT_CONTROL.finish( instance);					
-				},
-				enabled: function(){
-					return enabled;
-				},
-				index : index,
-				groupID: GROUP_ID
-			}
-		}
-		var CheckboxClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-			var ELM = WRAPPER_ELM.children( '.checkbox-value').eq( 0),
-				value = ELM.html(),
-				jqInput,
-				index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,
-				instance,
-				enabled = true,
-				A = $( '<a href="#" onclick="return false;"></a>').html( value).click( function(e){
-					instance = instance || EDITABLE_TEXT_TABLE[ GROUP_ID][ index];
-					EDITABLE_TEXT_CONTROL.start( instance);								
-					A.hide();
-					jqInput = $( '<input type="text"/>').val( value);
-					ELM.append( jqInput);
-					jqInput.focus().select();
-					e.preventDefault();
-					return false;
-				});
-			ELM.addClass( 'editable-text').html( A);
-			
-			function finish(keep){
-				if(keep === true){
-
-				} else {
-					_finish( jqInput.val());
-				}
-				function _finish( VALUE_NEW){
-					value = VALUE_NEW;
-					A.html( VALUE_NEW).show();
-					jqInput.remove();
-					jqInput = null;
-					ON_UPDATE_FUNCTION && VALUE_NEW !== value && ON_UPDATE_FUNCTION( VALUE_NEW, value);
-					EDITABLE_TEXT_CONTROL.finish( instance);
-				}
-			}
-			return {
-				update: function( _value){
-					value = _value !== undefined ? _value : value;
-					A.html( value);
-					jqInput && jqInput.val( value);
-					currentText === instance && finish();
-				},
-				show: function(){
-					enabled === false && WRAPPER_ELM.show();
-					enabled= true;
-				},
-				hide: function(){
-					enabled === true && WRAPPER_ELM.hide();
-					enabled = false;
-				},
-				start: function(){
-					!jqInput && A.click();
-				},
-				finish: finish,
-				enabled: function(){
-					return enabled;
-				},
-				groupID: GROUP_ID
-			}
-		}
-		return {
-			createEditableText: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-				if( GROUP_ID && !EDITABLE_TEXT_TABLE[ GROUP_ID]) EDITABLE_TEXT_TABLE[ GROUP_ID] = [];
-				var ret = EditableTextClass.apply( {}, [ ELM, ON_UPDATE_FUNCTION, GROUP_ID]);
-				GROUP_ID && EDITABLE_TEXT_TABLE[ GROUP_ID].push( ret);
-				return ret;
-			},
-			createCheckbox: function( ELM, ON_UPDATE_FUNCTION, GROUP_ID){
-				
-			},
-			start: function( _currentText){
-				currentText !== _currentText && currentText && currentText.finish();
-				currentText = _currentText;
-			},
-			finish: function( _currentText){
-				if( currentText !== _currentText) return;
-				currentText = null 
-			},
-			keyEventRellay: function( e){
-				if( e.type === 'keyup') return false;
-				if( currentText === null) return false;
-				
-				var keyCode = e.keyCode;
-				if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt
-					var _groupID = currentText.groupID,
-						_index = currentText.index;
-					currentText.finish( keyCode === 27);
-					keyCode === 9 && _groupID && EDITABLE_TEXT_CONTROL.tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);
-					keyCode === 13 && _groupID && EDITABLE_TEXT_CONTROL.tabShift( _groupID, _index, 1);
-				}
-				return true;
-			},
-			tabShift: function( _groupID, _index, _way){
-				var GROUP_ARRAY = EDITABLE_TEXT_TABLE[ _groupID] || [],
-					l = GROUP_ARRAY.length,
-					i = _index +_way;
-				if( l < 2) return;
-				while( i !== _index){
-					i = i < 0 ?
-						l -1 :
-						i === l ? 0 : i; // 0 < i < l
-					if( GROUP_ARRAY[ i].enabled() === true) break;
-					i += _way;
-				}
-				if( i === _index) return;
-				setTimeout( function(){ GROUP_ARRAY[ i].start();}, 0);
-			}
-		}
-	})();
-	
 	function keyHit( e){
 		log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey, e.type].join( ','));
 		//keyOperationChatcher.val( '');
@@ -1336,7 +1300,7 @@ pettanr.key = ( function(){
 			overlayEnabled = pettanr.overlay.visible === true,
 			currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;
 		if( callback === 'keypress') callback = 'keydown';
-		if( EDITABLE_TEXT_CONTROL.keyEventRellay( e) === false){
+		if( pettanr.form.keyEventRellay( e) === false){
 			var shift = e.shiftKey,
 				ctrl = e.ctrlKey,
 				l = KEYEVENT_ARRAY.length,
@@ -1425,8 +1389,6 @@ pettanr.key = ( function(){
 		keyEventDispatcher: function(){
 			return keyOperationChatcher;
 		},
-		createEditableText: EDITABLE_TEXT_CONTROL.createEditableText,
-		createCheckbox: EDITABLE_TEXT_CONTROL.createCheckbox,
 		shiftEnabled: function(){
 			return shiftEnabled;
 		},
@@ -1441,52 +1403,55 @@ pettanr.key = ( function(){
  * 
  * keyEventRellay
  *  form -> overlay -> view
- * 
+ * 
  */
 pettanr.form = ( function(){
 	var	FORM_GROUP_TABLE = {},
 		currentID = null,
 		currentItem = null,
-		ELM_INPUT_TEXT = document.createElement( 'input');
-	ELM_INPUT_TEXT.type = 'text';
+		ELM_A_ORIGIN = ( function(){
+			var ret = document.createElement( 'a');
+			ret.href = '#';
+			return ret;
+		})(),
+		ELM_INPUT_TEXT = ( function(){
+			var ret = document.createElement( 'input');
+			ret.type = 'text';
+			return ret;
+		})();
 		
 	var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater){
 		validater = typeof validater === 'function' ? validater : null;
 		
-		var elmValue,
+		var elmValue = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value')[ 0],
 			value,
-			index = EDITABLE_TEXT_TABLE[ GROUP_ID].length,
+			index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,
 			instance,
 			focus = false,
 			visible = true,
 			enabled = true,
-			elmA;
-		var _nodes = WRAPPER_ELM.getElementsByTagName('*'),
-			l = nodes.length,
-			_elm;
-		for(var i=0; i<l; ++i){
-			_elm = _nodes[ i];
-			if( _elm.nodeType === 1 && _elm.className.indexof('editable-value') !== -1){
-				elmValue = _elm;
-			}
-		}
+			elmA = ELM_A_ORIGIN.cloneNode( true);
+		
 		if( elmValue === undefined){
 			alert( 'error!');
 		}
 		value = elmValue.innerHTML;
+		elmValue.innerHTML = '';
 		elmValue.className += ' editable-text';
 		
-		elmA = elmAOrigin.cloneNode( true);
+		elmA.innerHTML = value;
 		elmValue.appendChild( elmA);
-		elmA.onclick = onClick;
+		WRAPPER_ELM.onclick = onClick;
 		
-		function onClick(){
+		function onClick( e){
+			focus = true;
 			start( instance);
 			elmA.style.display = 'none';
 			elmValue.appendChild( ELM_INPUT_TEXT);
 			ELM_INPUT_TEXT.value = value;
 			ELM_INPUT_TEXT.focus();
 			ELM_INPUT_TEXT.select();
+			e && e.preventDefault();
 			return false;
 		}
 		
@@ -1496,10 +1461,15 @@ pettanr.form = ( function(){
 				delete this.init;
 			},
 			update: function( _value){
-				value = _value !== undefined ? _value : value;
-				//A.html( value);
-				//jqInput && jqInput.val( value);
-				currentText === instance && this.finish();
+				if( _value !== undefined){
+					elmA.innerHTML = _value;
+					value = _value;
+					
+					if( focus === true){
+						ELM_INPUT_TEXT.value = value;
+					}
+				}
+				currentItem === instance && this.finish();
 			},
 			start: function(){
 				onClick();
@@ -1515,11 +1485,24 @@ pettanr.form = ( function(){
 				elmA.style.display = 'block';
 				
 				ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);
-				finish( instance);					
+				finish( instance);
+				
+				focus = false;
 			},
 			enabled: function(){
 				return enabled;
 			},
+			visible: function( _visible){
+				if( _visible === true){
+					WRAPPER_ELM.style.display = '';
+					visible = true;
+				} else
+				if( _visible === false){
+					WRAPPER_ELM.style.display = 'none';
+					visible = false;
+				}
+				return visible;
+			},
 			index : index,
 			groupID: GROUP_ID
 		}
@@ -1534,22 +1517,9 @@ pettanr.form = ( function(){
 		if( currentItem !== _currentItem) return;
 		currentItem = null;
 	}
-	function keyEventRellay( e){
-		if( e.type === 'keyup') return false;
-		if( currentItem === null) return false;
-		
-		var keyCode = e.keyCode;
-		if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt
-			var _groupID = currentItem.groupID,
-				_index = currentItem.index;
-			currentItem.finish( keyCode === 27);
-			keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);
-			keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);
-		}
-		return true;
-	}
+
 	function tabShift( _groupID, _index, _way){
-		var GROUP_ARRAY = EDITABLE_TEXT_TABLE[ _groupID] || [],
+		var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID] || [],
 			l = GROUP_ARRAY.length,
 			i = _index +_way;
 		if( l < 2) return;
@@ -1557,7 +1527,7 @@ pettanr.form = ( function(){
 			i = i < 0 ?
 				l -1 :
 				i === l ? 0 : i; // 0 < i < l
-			if( GROUP_ARRAY[ i].enabled() === true) break;
+			if( GROUP_ARRAY[ i].enabled() === true && GROUP_ARRAY[ i].visible() === true) break;
 			i += _way;
 		}
 		if( i === _index) return;
@@ -1569,8 +1539,22 @@ pettanr.form = ( function(){
 		focus: function(){
 			return currentItem !== null; 
 		},
+		keyEventRellay: function( e){
+			if( e.type === 'keyup') return false;
+			if( currentItem === null) return false;
+			
+			var keyCode = e.keyCode;
+			if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt
+				var _groupID = currentItem.groupID,
+					_index = currentItem.index;
+				currentItem.finish( keyCode === 27);
+				keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);
+				keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);
+			}
+			return true;
+		},
 		createInputText: function( _elm, _onUpdate, _groupID, _validater){
-			if( _groupID && !FORM_GROUP_TABLE[ _groupID]){
+			if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){
 				FORM_GROUP_TABLE[ _groupID] = [];
 			}
 			var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater);
@@ -1581,6 +1565,9 @@ pettanr.form = ( function(){
 		createCheckBox: function(){
 			
 		},
+		createRadio: function(){
+			
+		},
 		createButton: function(){
 			
 		},
@@ -1657,7 +1644,7 @@ pettanr.balloon = ( function() {
 	if( IS_VML === true && pettanr.ua.VML === false) vectorEnabled = false;
 
 	var XBROWSER_BALLOON_CLASS = function( w, h, a){
-		var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true) : document.createElement( 'IMG'), // pettanr.imageに変更
+		var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true) : document.createElement( 'img'), // pettanr.imageに変更
 			path = balloonElm.getElementsByTagName( 'path')[ 0],
 			shape = balloonElm.getElementsByTagName( 'shape')[ 0],
 			cos = Math.cos, sin = Math.sin,
@@ -1759,7 +1746,7 @@ pettanr.balloon = ( function() {
 		function balloonUrlBuilder( _a){
 			var d = 360 /NUM_BALLOON_IMAGE;
 			_a += 90 +d /2;
-			return [ 'balloon\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');
+			return [ 'system_pictures\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');
 		}
 		return {
 			elm: balloonElm,
@@ -1850,14 +1837,16 @@ pettanr.image = ( function(){
 			if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;
 			return IS_SERVER;
 		})(),
-		PNG_FIX = pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 6,
-		BACKEND_WHEN_PNG = PNG_FIX === false ? BACKEND : ( function(){
+		BACKEND_WHEN_PNG = ( function(){
+			if( pettanr.ua.isIE === false || pettanr.ua.ieVersion > 6) return BACKEND;
 			if( pettanr.ua.VML === true) return IS_VML;
 			if( pettanr.FLASH === true) return IS_FLASH;
 			if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;
 			if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX_SERVER;
 			return IS_SERVER;
-		})();
+		})(),
+		ReversibleImageClass,
+		ReversibleImageClassWithPingfix;
 	
 	var XBackendReversibleImageClass = ( function(){
 		var CLASS_NAME = 'reversible-image-container',
@@ -1899,7 +1888,7 @@ pettanr.image = ( function(){
 				w = _w !== undefined ? _w : w;
 				h = _h !== undefined ? _h : h;
 				if( loaded === false) return;
-				elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'v' : 'h'))) : '';
+				elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';
 			}
 			return {
 				elm : elmWrap,
@@ -1948,7 +1937,7 @@ pettanr.image = ( function(){
 				//if( flipH !== _flipH || flipV !== _flipV){
 					vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg);
 				//}
-					vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'v' : 'h'))) : '';
+					vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';
 					elmWrap.appendChild( vmlImg);
 			}
 			return {
@@ -2002,19 +1991,388 @@ pettanr.image = ( function(){
 	}
 })();
 
+/*
+ * bind : 出版
+ */
+pettanr.bind = ( function(){
+	var BIND_WORKER_ARRAY = [],
+		NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',
+		RESOURCE_PICTURE_PATH = pettanr.CONST.RESOURCE_PICTURE_PATH,
+		ELM_DETECT_WIDTH = ( function(){
+			var ret = document.createElement( 'div');
+			ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';
+			return ret;
+		})();
+
+	/*
+	 * original
+	 *   http://d.hatena.ne.jp/uupaa/20090720/1248097177
+	 */
+	var ResizeAgentClass = function( onResizeFunction, opt_elmCheck){
+		var	_globalLock = 0,
+			_size = { w: 0, h: 0 };
+			_ie = !!document.all,
+			_quirks = (document.compatMode || "") !== "CSS1Compat",
+			_ieroot = _quirks ? "body" : "documentElement";
+			_root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);
+
+		function getInnerSize() {
+			return {
+				w: _root.innerWidth  || _root.clientWidth,
+				h: _root.innerHeight || _root.clientHeight
+			};
+		}
+
+		function loop() {
+			if (!_globalLock++) {
+				var size = getInnerSize();
+				if (_size.w !== size.w || _size.h !== size.h) { // resized
+					_size = size; // update
+					onResizeFunction( _size);
+				}
+				setTimeout( unlock, 0); // delay unlock
+			}
+			setTimeout(loop, 500);
+		}
+		function unlock(){
+			_globalLock = 0;
+		}
+		loop();
+	}
+	
+	
+	var ElementBuilder = ( function(){
+		var ELM_TITLE_ORIGN = ( function(){
+				
+			})(),
+			ELM_TEXT_ORIGN = ( function(){
+				var _table = document.createElement( 'table'),
+					_tr = document.createElement( 'tr');
+				_table.appendChild( _tr);
+				_tr.appendChild( document.createElement( 'td'));
+				_table.cellspacing = '0';
+				return _table;
+			})();
+		
+		function buildComicElement(){
+			
+		}
+		
+		function buildPanelElement( elmTarget, json, noClassnameMode){
+			var _elmPanel = document.createElement( 'div'),
+				_style = {
+						"border-width":		typeof json.border === 'number' ? json.border + 'px' : 0,
+						width: 				json.width + 'px',
+						height:				json.height + 'px'
+				},
+				_cssText = [],
+				_comicElements = json.panel_elements || [],
+				_comicElement, _elmImgWrap, _rImg, _rPic, _balloon, _elmBalloonWrap, _elmText;
+			if( noClassnameMode === true){
+				
+			} else {
+				_elmPanel.className = NAMESPACE_CLASSNAME + 'panel';
+			}
+			for( var _key in _style){
+				_cssText.push( _key + ':' + _style[ _key]);
+			}
+			_elmPanel.style.cssText = _cssText.join( ';');
+			elmTarget.appendChild( _elmPanel);
+			
+			for( var i=0, l=_comicElements.length; i<l; ++i){
+				_comicElement = _comicElements[ i];
+				if( _comicElement.resource_picture){
+					_rPic = _comicElement.resource_picture || {};
+					_rImg = pettanr.image.createReversibleImage(
+							[ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext].join( ''),
+							_comicElement.width, _comicElement.height
+						);
+					_elmImgWrap = document.createElement( 'div');
+					_elmPanel.appendChild( _elmImgWrap);
+					_elmImgWrap.appendChild( _rImg.elm);
+					_elmImgWrap.className = NAMESPACE_CLASSNAME + 'image';
+					_elmImgWrap.style.cssText = [
+						'width:', Math.abs( _comicElement.width), 'px;',
+						'height:', Math.abs( _comicElement.height), 'px;',
+						'left:', _comicElement.x, 'px;',
+						'top:', _comicElement.y, 'px;',
+						'z-index:', _comicElement.z, ';'
+					].join( '');
+				} else {
+					_elmBalloonWrap = document.createElement( 'div');
+					_elmPanel.appendChild( _elmBalloonWrap);
+					_elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';
+					_elmBalloonWrap.style.cssText = [
+						'width:', _comicElement.width, 'px;',
+						'height:', _comicElement.height, 'px;',
+						'left:', _comicElement.x, 'px;',
+						'top:', _comicElement.y, 'px;',
+						'z-index:', _comicElement.z, ';'
+					].join( '');
+
+					_balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail);
+					_elmBalloonWrap.appendChild( _balloon.elm);
+					
+					_elmText = ELM_TEXT_ORIGN.cloneNode( true);
+					_elmBalloonWrap.appendChild( _elmText);
+					_elmText.className = NAMESPACE_CLASSNAME + 'speach';
+					_elmText.getElementsByTagName( 'td')[ 0].appendChild( document.createTextNode( 'hello'));
+				}
+			}
+		}
+		
+		return {
+			build: function( elmTarget, json, zoom, noClassnameMode){
+				// clean elmTarget
+				pettanr.util.removeAllChildren( elmTarget);
+				
+				// json is Comic ? Panel ?
+				if( json.panels){
+					// comic
+					
+				} else
+				if( json.panel_elements){
+					// panel
+					buildPanelElement( elmTarget, json, noClassnameMode);
+				} else {
+					// invalid json
+				}
+			}
+		}
+	})();
+	
+	var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode){
+		typeof json === 'object' && build( elmTarget, json);
+		
+		var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false)
+		
+		if( zoomSelfEnabled === true){
+			elmTarget.parentNode.insertBefore( elmDetectW, elmTarget);
+			new ResizeAgentClass( onResize, elmDetectW);
+		}
+		function onResize(){
+			
+		}
+		json && ElementBuilder.build( elmTarget, json, zoomSelfEnabled, noClassnameMode);
+		
+		return {
+			init: function(){
+				
+			},
+			zoom: function(){
+				
+			},
+			json: function( _json){
+				json = _json;
+				ElementBuilder.build( elmTarget, _json, zoomSelfEnabled, noClassnameMode);
+			},
+			targetElement: function(){
+				
+			},
+			layput: function(){
+				
+			},
+			destroy: function(){
+				
+			}
+		}
+	}
+	
+	return {
+		createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode){
+			var ret = new BindWorkerClass( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode);
+			BIND_WORKER_ARRAY.push( ret);
+			return ret;
+		},
+		isBindWorkerInstance: function( _bindWorker){
+			
+		}
+	}
+})();
+
+var VisualEffect = ( function(){
+	
+	var ANIMATION_TICKET_ARRAY = [],
+		fpms = 50,
+		TIMER = null,
+		FILTER = 'filter',
+		OPACITY = 'opacity',
+		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 を比較して , 一致及び非数は削除しつつ コピー
+		//
+		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, _type, _new,
+				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){
+								
+								
+								
+								break;
+							}
+						}
+					/*
+					 * other
+					 */
+					} else {
+						_number = '' + parseFloat( _value);
+						_type = _value.indexOf( _number);
+						_type = _type > 0 ? _value.substr( _type + _number.length) : '';
+						for( j=0; j<_numAttributes; ++j){
+							if( _targetAttributes[ j] === _target){
+								_cssTexts[ i] = [ _target, ':', _updateParameters[ j], _type].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 = {};
+				if( numFrames === 1){
+					for( var i=0; i<l; ++i){
+						_updateCss[ targetAttributes[ i]] = endParameters[ i];
+						++i;
+					}
+					updateCss( ELM, currentParameters, targetAttributes, l);
+					onComplete !== null && onComplete();
+				} else {
+					for( var 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 resisterAnime( _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 = resisterAnime;
+		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
+ *  Google Analytics
  */
 
-var _gaq = _gaq || [];
-_gaq.push(['_setAccount', 'UA-28023955-1']);
-_gaq.push(['_trackPageview']);
-
-(function() {
-	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-})();
\ No newline at end of file
+if( pettanr.LOCAL === false){
+	var _gaq = _gaq || [];
+	_gaq.push(['_setAccount', 'UA-28023955-1']);
+	_gaq.push(['_trackPageview']);
+	
+	(function() {
+		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+	})();	
+}
\ No newline at end of file
diff --git a/public/assets/system.js b/public/assets/system.js
index 973291bc..88a4ac37 100644
--- a/public/assets/system.js
+++ b/public/assets/system.js
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.4.1
+ *   version 0.4.2
  *   
  * author:
  *   itozyun
@@ -58,19 +58,19 @@ pettanr.file = ( function(){
 		ROLE_IS_ARTIST = 2^1,
 		ROLE_IS_VISITOR = 2^0,
 		ROLE_IS_UNKROWN = 2^-1,
-		UPDATE_POLICY_SOCAV = 0x11111,// s: super user
-		UPDATE_POLICY_SOCA_ = 0x11110,// o: owner( comic || panel || picture )
-		UPDATE_POLICY_SOC__ = 0x11100,// c: creator
-		UPDATE_POLICY_SO_A_ = 0x11010,// a: artist
-		UPDATE_POLICY_SO___ = 0x11000,// v: visitor
-		UPDATE_POLICY__O___ = 0x01000,// l: lisence manager
-		UPDATE_POLICY_S____ = 0x10000,
-		UPDATE_POLICY______ = 0x00000,
-		FILEDATA_RESITER = [],
-		FILEDATA_HAS_rID_RESISTER = {},
-		FILEDATA_ACCESS = [],
+		UPDATE_POLICY_SOCAV = parseInt( '11111', 2),// s: super user
+		UPDATE_POLICY_SOCA_ = parseInt( '11110', 2),// o: owner( comic || panel || picture )
+		UPDATE_POLICY_SOC__ = parseInt( '11100', 2),// c: creator
+		UPDATE_POLICY_SO_A_ = parseInt( '11010', 2),// a: artist
+		UPDATE_POLICY_SO___ = parseInt( '11000', 2),// v: visitor
+		UPDATE_POLICY__O___ = parseInt( '01000', 2),// l: lisence manager
+		UPDATE_POLICY_S____ = parseInt( '10000', 2),
+		UPDATE_POLICY______ = parseInt( '00000', 2),
+		FILEDATA_RESITER = [],			// store all of fileData( json object )
+		FILEDATA_HAS_domainID_RESISTER = {},
+		FILEDATA_ACCESS = [],			// file operations for Kernel only ! hide from Out of pettanr.file
 		FILE_OBJECT_POOL = [];
-		
+	
 	var REQUEST_CONTROLER = ( function(){
 		var REQUEST_TICKET_RESISTER = [],
 			DATA_TYPE_ARRAY = 'json,xml,html,text'.split( ','),
@@ -240,11 +240,11 @@ pettanr.file = ( function(){
 			if( typeof UIDorFILEorFILEDATA === 'number'){
 				_data = FILEDATA_RESITER[ UIDorFILEorFILEDATA] || null;
 			} else
-			if( UIDorFILEorFILEDATA.getUID){
+			if( UIDorFILEorFILEDATA instanceof FileClass){
 				_uid = UIDorFILEorFILEDATA.getUID();
 				_data = FILEDATA_RESITER[ _uid] || null;
 			} else {
-				_data = UIDorFILEorFILEDATA;
+				_data = UIDorFILEorFILEDATA || null;
 			}
 			
 			if( _data === null || !_data) return null;
@@ -256,7 +256,7 @@ pettanr.file = ( function(){
 		}
 		function getChildren( UIDorFILE){
 			var _access = getFileDataAccess( UIDorFILE);
-			return  _access !== null ? _access.CHILDREN : null
+			return  _access !== null ? _access.DATA.CHILDREN : null
 		}
 		function onLoadJson( _file, _json){
 			var _access = getFileDataAccess( _file),
@@ -277,30 +277,32 @@ pettanr.file = ( function(){
 				_rFolderData,
 				_artistFolderData, _artistFolder,
 				_comicFolderData, _comicFolder,
-				_authorFolderData, _authorFolder;
+				_authorFolderData, _authorFolder,
+				_reaourceID = buildDomainID( _data.json, _childType);
 
 			for(var i=0; i<l; ++i){
-				_newData = buildFileData( _json[ i], _data.json, _childType);
-				if( _newData.rID){
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _data.json, _childType), _childType, _file);
+				_newData = buildFileData( _json[ i], _data.json, _data, _childType);
+
+				if( _reaourceID !== null){
+					_rFolderData = getDomainFolder( _reaourceID, _childType, _file);
 					_rFolderData.children.push( _newData);
 				}
 				if( _newData.artist){
-					_artistFolderData = _artistFolderData || getFolderDataByResourceID( buildResourceID( _data.json, 'artist'), 'Artists', _file);
+					_artistFolderData = _artistFolderData || getDomainFolder( buildDomainID( _data.json, 'artist'), 'Artists', _file);
 					_artistFolder = _artistFolder || new FileClass( SYSTEM_TREE, _file, _artistFolderData);
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _artistFolderData.rID, '' +_newData.artist.id), _newData.artist.name, _artistFolder);
+					_rFolderData = getDomainFolder( buildDomainID( _artistFolderData.rID, '' +_newData.artist.id), _newData.artist.name, _artistFolder);
 					_rFolderData.children.push( _newData);
 				}
 				if( _newData.comic){
-					_comicFolderData = _comicFolderData || getFolderDataByResourceID( buildResourceID( _data.json, 'comic'), 'Comics', _file);
+					_comicFolderData = _comicFolderData || getDomainFolder( buildDomainID( _data.json, 'comic'), 'Comics', _file);
 					_comicFolder = _comicFolder || new FileClass( SYSTEM_TREE, _file, _comicFolderData);
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _comicFolderData.rID, '' +_newData.comic.id), _newData.comic.title, _comicFolder);
+					_rFolderData = getDomainFolder( buildDomainID( _comicFolderData.rID, '' +_newData.comic.id), _newData.comic.title, _comicFolder);
 					_rFolderData.children.push( _newData);
 				}	
 				if( _newData.author){
-					_authorFolderData = _authorFolderData || getFolderDataByResourceID( buildResourceID( _data.json, 'author'), 'Author', _file);
+					_authorFolderData = _authorFolderData || getDomainFolder( buildDomainID( _data.json, 'author'), 'Author', _file);
 					_authorFolder = _authorFolder || new FileClass( SYSTEM_TREE, _file, _authorFolderData);
-					_rFolderData = getFolderDataByResourceID( buildResourceID( _authorFolderData.rID, '' +_newData.author.id), _newData.author.name, _authorFolder);
+					_rFolderData = getDomainFolder( buildDomainID( _authorFolderData.rID, '' +_newData.author.id), _newData.author.name, _authorFolder);
 					_rFolderData.children.push( _newData);
 				}
 			}
@@ -317,29 +319,20 @@ pettanr.file = ( function(){
 				_data.state = FILE_STATE_IS_ERROR;
 			}
 		}
-		function buildFileData( _data, _url, _type){
-			if( !_data.name){
-				_data.name = [ _data.id, _data.ext].join( '.');
-			}
+		function buildFileData( _data, _url, _parent, _type){
 			_data.type = _type;
-			
-			if( _type === FILE_TYPE_IS_IMAGE){
-				_data.thumbnail = 'thumbnail/' + _data.name;
-			}
-			
-			var _rID = buildResourceID( _url, _type);
-			if( _rID !== null){
-				_data.rID = _rID + _data.id;
-				FILEDATA_HAS_rID_RESISTER[ _data.rID] = _data;
+
+			if( _type === FILE_TYPE_IS_PANEL){
+				_data.comicFileData = _parent;
 			}
-			
+
 			FILEDATA_RESITER.push( _data);
 			
 			return _data;
 		}
-		function buildResourceID( _url, _type){
-			if( _url === null) return null;
-			var _typeStr;
+		function buildDomainID( _url, _type){
+			if( !_url) return null;
+			var _typeStr = null;
 			
 			if( typeof _type !== 'number'){
 				_typeStr = _type
@@ -353,16 +346,18 @@ pettanr.file = ( function(){
 			if( _type === FILE_TYPE_IS_PANEL){
 				_typeStr = 'panel';
 			}
+			if( _typeStr === null) return null;
+			
 			return [ _url.replace(/https?:\/\/([^\/]*).*/, '$1'), _typeStr].join('_');
 		}
 	/**
-	 * getFileByResourceID( _rID, opt_name, opt_folder)
+	 * getFileByResourceID( _domainID, opt_name, opt_folder)
 	 * opt 指定で 新しいフォルダの作成
 	 * rID を持つ Object は {} にも格納．
 	 */
-		function getFolderDataByResourceID( _rID, opt_name, opt_folder){
-			if( FILEDATA_HAS_rID_RESISTER[ _rID]){
-				return FILEDATA_HAS_rID_RESISTER[ _rID];
+		function getDomainFolder( _domainID, opt_name, opt_folder){
+			if( FILEDATA_HAS_domainID_RESISTER[ _domainID]){
+				return FILEDATA_HAS_domainID_RESISTER[ _domainID];
 			}
 			if( !opt_name && !opt_folder) return;
 			
@@ -380,22 +375,22 @@ pettanr.file = ( function(){
 			if( opt_name === FILE_TYPE_IS_PANEL){
 				_fileName = 'Panels';
 			} else {
-				_fileName = opt_name.toString();
+				_fileName = typeof opt_name;
 			}
 			
 			var _newData = {
 				name: 		_fileName,
 				type:		FILE_TYPE_IS_FOLDER,
-				rID:		_rID,
+				rID:		_domainID,
 				children:	[]
 			};
 			FILEDATA_RESITER.push( _newData);
-			FILEDATA_HAS_rID_RESISTER[ _rID] = _newData;
+			FILEDATA_HAS_domainID_RESISTER[ _domainID] = _newData;
 			
 			if( opt_folder && opt_folder.isChildFile( _newData) === false){
 				var _access = getFileDataAccess( opt_folder),
 					_data = _access !== null ? _access.DATA : null;
-				_access === null && alert( _rID)
+				_access === null && alert( _domainID)
 				if( _data !== null){
 					_data.children.push( _newData);
 				}
@@ -507,6 +502,8 @@ pettanr.file = ( function(){
 			data.children = [];
 		}
 		var TYPE = data.type,
+			name = data.name || null,
+			thumbnail = null,
 			uid = FILE_CONTROLER.getUID( data),
 			CHILDREN = data.children,
 			instance;
@@ -521,16 +518,14 @@ pettanr.file = ( function(){
 			{
 				TYPE:				TYPE,
 				DATA:				data,
-				CHILDREN:			CHILDREN,
 				destroy:			destroy,
 				updateParent:		updateParent,
 				fileEventChatcher:	dispatchEvent
 			}
 		);
 		function destroy(){
-			CHILDREN.splice( 0, CHILDREN.length);
-			parentFile = data = CHILDREN = null;
-			delete this.destroy;			
+			name = thumbnail = parentFile = data = CHILDREN = null;
+			
 		}
 		function updateParent( _parent){
 			parentFile = _parent;
@@ -538,81 +533,86 @@ pettanr.file = ( function(){
 		function dispatchEvent( e){
 			FILE_CONTROLER.fileEventRellay( instance, TREE, e);
 		}
-		return {
-			init: function(){
-				instance = this;
-				delete this.init;
-			},
-			TYPE: function(){ return TYPE;},
-			getName: function(){
-				return data.name || 'no_name';
-			},
-			getThumbnail: function(){
-				return data.thumbnail || null;
-			},
-			getUID: function(){
-				return uid;
-			},
-			getState: function(){
-				return data.state !== undefined ? data.state : FILE_STATE_IS_OK;
-			},
-			getChildFileLength: function(){
-				return CHILDREN && typeof CHILDREN.length === 'number' ? CHILDREN.length : 0;
-			},
-			getChildFileByIndex: function( _index){
-				if( typeof _index !== 'number' || _index < 0 || typeof CHILDREN.length !== 'number' || _index >= CHILDREN.length) return null;
-				_file = new FileClass( TREE, this, CHILDREN[ _index]);
-				_file.init();
-				return _file;
-			},
-			getChildFileIndex: function( _FILEorFILEDATA){
-				if( !CHILDREN || typeof CHILDREN.length !== 'number') return -1;
-				var l = FILEDATA_RESITER.length,
-					_fileData = null;
-				for( var i=0; i<l; ++i){
-					if( _FILEorFILEDATA === FILEDATA_RESITER[ i]){
-						_fileData = _FILEorFILEDATA;
-						break;
-					};
-				}
-				if( _fileData === null){
-					_fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
-				}
-				if( _fileData === null) return -1;
-				
-				l = CHILDREN.length
-				for( var i=0; i<l; ++i){
-					if( CHILDREN[ i] === _fileData) return i;
-				}
-				return -1;
-			},
-			isChildFile: function( _FILEorFILEDATA){
-				return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
-			},			
-			getAttribute: function( KEYorKEYARRAY){
-				return FILE_CONTROLER.getFileAttribute( UID, KEYorKEYARRAY);
-			},
-			getSeqentialFiles: function(){
-				FILE_CONTROLER.getSeqentialFiles( this);
-			},
-			updateAttribute: function( key, value, opt_callback){
-				TREE.updateFileAttribute( UID, key, value, opt_callback);
-			},
-			move: function( _newFolder, _newIndex, opt_callback){
-				TREE.move( parentFile, UID, _newFolder, _newIndex, opt_callback);
-			},
-			replace: function( _newIndex, opt_callback){
-				TREE.replace( parentFile, UID, _newIndex, opt_callback);
-			},
-			addEventListener: function( _eventType, _callback){
-				FILE_CONTROLER.addEventListener( UID, _eventType, _callback);
-			},
-			removeEventListener: function( _eventType, _callback){
-				FILE_CONTROLER.removeEventListener( UID, _eventType, _callback);
-			},
-			collect: function(){
-				
+		
+		/* grobal Methods */
+		this.init = function(){
+			instance = this;
+			delete this.init;
+		}
+		this.TYPE = function(){
+			return TYPE;
+		}
+		this.getName = function(){
+			if( name !== null) return name;
+			if( data.name){
+				return data.name;
+			}
+			if( TYPE === FILE_TYPE_IS_IMAGE){
+				name = [ data.id, data.ext].join( '.');
+			} else
+			if( TYPE === FILE_TYPE_IS_PANEL){
+				name = data.comic.title + ' | ' +data.t;
+			}
+			return name || 'no_name';
+		}
+		this.getThumbnail = function(){
+			if( thumbnail !== null) return thumbnail;
+			if( TYPE === FILE_TYPE_IS_IMAGE){
+				thumbnail = [ 'thumbnail/', data.id, '.', data.ext].join( '');
+			}
+			return thumbnail || null;
+		}
+		this.getUID = function(){
+			return uid;
+		}
+		this.getState = function(){
+			return data.state !== undefined ? data.state : FILE_STATE_IS_OK;
+		}
+		this.getChildFileLength = function(){
+			return CHILDREN && typeof CHILDREN.length === 'number' ? CHILDREN.length : 0;
+		}
+		this.getChildFileByIndex = function( _index){
+			if( typeof _index !== 'number' || _index < 0 || typeof CHILDREN.length !== 'number' || _index >= CHILDREN.length) return null;
+			_file = new FileClass( TREE, this, CHILDREN[ _index]);
+			_file.init();
+			return _file;
+		}
+		this.getChildFileIndex = function( _FILEorFILEDATA){
+			if( !CHILDREN || typeof CHILDREN.length !== 'number') return -1;
+			var l = CHILDREN.length,
+				_fileData = FILE_CONTROLER.getFileData( _FILEorFILEDATA);
+			if( _fileData === null) return -1;
+			for(var i=0; i<l; ++i){
+				if( CHILDREN[ i] === _fileData) return i;
 			}
+			return -1;
+		}
+		this.isChildFile = function( _FILEorFILEDATA){
+			return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
+		}
+		this.getAttribute = function( KEYorKEYARRAY){
+			return FILE_CONTROLER.getFileAttribute( UID, KEYorKEYARRAY);
+		}
+		this.getSeqentialFiles = function(){
+			FILE_CONTROLER.getSeqentialFiles( this);
+		}
+		this.updateAttribute = function( key, value, opt_callback){
+			TREE.updateFileAttribute( UID, key, value, opt_callback);
+		}
+		this.move = function( _newFolder, _newIndex, opt_callback){
+			TREE.move( parentFile, UID, _newFolder, _newIndex, opt_callback);
+		}
+		this.replace = function( _newIndex, opt_callback){
+			TREE.replace( parentFile, UID, _newIndex, opt_callback);
+		}
+		this.addEventListener = function( _eventType, _callback){
+			FILE_CONTROLER.addEventListener( UID, _eventType, _callback);
+		}
+		this.removeEventListener = function( _eventType, _callback){
+			FILE_CONTROLER.removeEventListener( UID, _eventType, _callback);
+		}
+		this.collect = function(){
+			
 		}
 	};
 	function getFileObject( TREE, parentFile, data){
@@ -677,7 +677,7 @@ pettanr.file = ( function(){
 			var _rootFile;
 			if( _treeType === TREE_TYPE_IS_COMIC) _rootFile = COMIC_FILEDATA;
 			if( _treeType === TREE_TYPE_IS_IMAGE) _rootFile = IMAGE_FILEDATA;
-			if( _rootFile === undefined) return;
+			if( !_rootFile) return null;
 			return FILE_CONTROLER.createTree( _rootFile);
 		},
 		TREE_TYPE_IS_COMIC:		1,
@@ -703,8 +703,8 @@ pettanr.finder = ( function(){
 	var FinderIconClass = function(){
 		var elmContainer,
 			ELM_WRAPPER = ELM_ORIGIN_FINDER_ICON.cloneNode( true),
-			ELM_THUMBNAIL = ELM_WRAPPER.getElementsByTagName( 'div')[0],
-			ELM_FILENAME = ELM_WRAPPER.getElementsByTagName( 'div')[1],
+			ELM_THUMBNAIL = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-thumbnail', 'div')[0],
+			ELM_FILENAME = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-filename', 'div')[0],
 			file, w, index, style, instansce, callback;
 		
 		ELM_WRAPPER.onclick = onClick;
@@ -712,7 +712,6 @@ pettanr.finder = ( function(){
 			callback( index);
 		}
 
-		
 		function draw(){
 			var _thumb = file.getThumbnail();
 			if( _thumb !== null){
@@ -765,7 +764,7 @@ pettanr.finder = ( function(){
 			collect: function(){
 				elmContainer.removeChild( ELM_WRAPPER);
 				file = elmContainer = null;
-				FINDER_ICON_POOL.push( this);
+				FINDER_ICON_POOL.push( instansce);
 			}
 		}
 	}
diff --git a/public/assets/work.js b/public/assets/work.js
index 99e0025f..1dffaecc 100644
--- a/public/assets/work.js
+++ b/public/assets/work.js
@@ -1,6 +1,6 @@
 /*
  * pettanR work.js
- *   version 0.4.1
+ *   version 0.4.2
  *   
  * author:
  *   itozyun
@@ -31,17 +31,6 @@
  * 
  */
 
-		pettanr.LINE_FEED_CODE_TEXTAREA = ( function(){
-			var text = document.getElementById( 'shadowTxtarea'),
-				form = text.parentNode;
-			form.parentNode.removeChild( form);
-			return text.value;
-		})();
-		pettanr.LINE_FEED_CODE_PRE = ( function(){
-			var pre = document.getElementById( 'shadowPre');
-			pre.parentNode.removeChild( pre);
-			return pettanr.ua.isIE === true ? this.LINE_FEED_CODE_TEXTAREA : pre.innerHTML; // ie ??				
-		})();
 
 /* ----------------------------------------
  *   pettanr.editor
@@ -86,7 +75,7 @@ pettanr.editor = ( function(){
 		COMIC_ELEMENT_ARRAY = [],
 		ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),
 		MIN_PANEL_HEIGHT = 20,
-		MIN_OBJECT_SIZE = 19,
+		MIN_ELEMENT_SIZE = 19,
 		MOUSE_HIT_AREA = 10,
 		jqMouseEventChacher,
 		jqEditor,
@@ -129,7 +118,6 @@ pettanr.editor = ( function(){
 				a.href = '#';
 				return ret;
 			})(),
-			EMPTY_FUNCTION = new Function,
 			ITEM_ARRAY = [],
 			barH = pettanr.util.getElementSize( ELM_BAR).height,
 			itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,
@@ -177,12 +165,12 @@ pettanr.editor = ( function(){
 			}
 		}
 
-		var MenuBarItemClass = function( title, opt_callbackArray){
+		var MenuBarItemClass = function( title){
 			var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),
 				ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],
 				ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],
 				INDEX = ITEM_ARRAY.length,
-				SELECTION_CALLBACK_ARRAY = opt_callbackArray || [],
+				SELECTION_CALLBACK_ARRAY = [],
 				numSelection = 0,
 				visible = false;
 			ELM_TITLE.innerHTML = title;
@@ -201,9 +189,9 @@ pettanr.editor = ( function(){
 						}
 						return -1;
 					})();
-				i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]();
+				i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);
 				e.stopPropagation();
-				return false;				
+				return false;
 			}
 			return {
 				elm: ELM_WRAPPER,
@@ -240,7 +228,7 @@ pettanr.editor = ( function(){
 
 		
 		function createMenubarItem( title){
-			var _item = MenuBarItemClass.apply( {}, [ title]);
+			var _item = new MenuBarItemClass( title);
 			ITEM_ARRAY.push( _item);
 			return _item;
 		}
@@ -256,6 +244,17 @@ pettanr.editor = ( function(){
 
 				delete MENU_BAR_CONTROL.init;
 			},
+			open: function(){
+				MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init();
+				// ELM_BAR.style.top = ( -barH) +'px';
+				// anime
+			},
+			close: function(){
+				var l = ITEM_ARRAY.length;
+				for( var i=0; i<l; ++i){
+					ITEM_ARRAY[ i].hide();
+				}
+			},
 			h: barH,
 			onMouseMove: function( _mouseX, _mouseY){
 				if( barH >= _mouseY){
@@ -357,12 +356,44 @@ pettanr.editor = ( function(){
 			MENUBAR_BACK.visible( true);
 			SAVE_CONTROL.panelUpdated( true);
 		}
+		function destroyStack( _stack, _destroy){
+			_stack.fn = null;
+			
+			var	_argBack = _stack.argBack,
+				_argForword = _stack.argForword,
+				_value;
+			if( typeof _argBack.length === 'number'){ // isArray
+				while( _argBack.length > 0){
+					_value = _argBack.shift();
+					_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
+				}
+			}
+			if( typeof _argForword.length === 'number'){
+				while( _argForword.length > 0){
+					_value = _argForword.shift();
+					_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
+				}						
+			}			
+		}
 		return {
 			init: function(){
 				log = $( '#history-log');
 				delete HISTORY.init;
 			},
-		    saveState: function( _function, _argBack, _argForword, _destory) {
+			open: function(){
+				HISTORY.init && HISTORY.init();
+			},
+			close: function(){
+				MENUBAR_BACK.visible( false);
+				MENUBAR_FORWARD.visible( false);
+		       	while( STACK_BACK.length > 0){
+					destroyStack( STACK_BACK.shift(), true);
+				}
+		       	while( STACK_FORWARD.length > 0){
+					destroyStack( STACK_FORWARD.shift(), true);
+				}
+			},
+		    saveState: function( _function, _argBack, _argForword, _destroy) {
 		        STACK_BACK.push( {
 		        	fn:			_function,
 		        	argBack:	_argBack,
@@ -371,26 +402,11 @@ pettanr.editor = ( function(){
 		        });
 		        MENUBAR_BACK.visible( true);
 				SAVE_CONTROL.panelUpdated( true);
-
+				
+				var _stack;
 		       	while( STACK_FORWARD.length > 0){
-					var _stack = STACK_FORWARD.shift(),
-						_destroy = _stack.destroy,
-						_value;
-					_argBack = _stack.argBack;
-					_argForword = _stack.argForword;
-					_stack.fn = null;
-					if( typeof _argBack === 'array'){
-						while( _argBack.length > 0){
-							_value = _argBack.shift();
-							_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
-						}
-					}
-					if( typeof _argForword === 'array'){
-						while( _argForword.length > 0){
-							_value = _argForword.shift();
-							_destroy === true && typeof _value.destroy === 'function' && _value.destroy();
-						}						
-					}
+					_stack = STACK_FORWARD.shift();
+					destroyStack( _stack, _stack.destroy);
 				}
 				MENUBAR_FORWARD.visible( false);
 		    }		
@@ -402,22 +418,74 @@ pettanr.editor = ( function(){
  *     Save Control
  */
 
+	var OUTPUT_CONSOLE = ( function(){
+		var jqWrap, jqOutputArea,
+			ID = 'outputConsole';
+		//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
+		
+		function close(){
+			jqWrap.hide();
+			jqOutputArea.val('');
+		}
+		function clickOK(){
+			pettanr.overlay.hide();
+			close();			
+		}
+		return {
+			init: function(){
+				this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();
+				jqOutputArea = $( '#output-area');
+				delete OUTPUT_CONSOLE.init;
+			},
+			jqWrap: null,
+			show: function( _text){
+				jqWrap.show();
+
+				
+				pettanr.overlay.show( this);
+				jqWrap.css(
+					{
+						left:	Math.floor( ( windowW -jqWrap.width()) /2),
+						top:	Math.floor( ( windowH -jqWrap.height()) /2)
+					}
+				);				
+				
+				jqOutputArea.val( _text).focus();
+			},
+			onWindowResize: function(){
+				jqWrap.css(
+					{
+						left:	Math.floor( ( windowW -jqWrap.width()) /2),
+						top:	Math.floor( ( windowH -jqWrap.height()) /2)
+					}
+				);
+			},
+			onClose: close,
+			ID: 'textEditor'
+		}
+	})();
+
 	var SAVE_CONTROL = ( function(){
 		var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),
 			SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),
 			SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),
 			SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),
+			OUTPUT = MENU_BAR_CONTROL.QUIT.createSelection( 'output', null, onOutputClick, true, false, true),
 			QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),
 			updated = false;
 		
 		function quit(){
 		}
 		
+		function onOutputClick(){
+			// OUTPUT_CONSOLE.show();
+		}
+		
 		function outputAsHtml(){
-			alert( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));
+			OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));
 		}
 		function outputAsJsonString(){
-			alert( COMIC_ELEMENT_CONTROL.getAsJsonString());
+			OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());
 		}
 		return {
 			quit: quit,
@@ -441,9 +509,9 @@ pettanr.editor = ( function(){
 	
 	var TEXT_EDITOR_CONTROL = ( function(){
 		var jqWrap, jqTextarea, jqButton,
-			textElement, onUpdateFunction;
-		
-		pettanr.key.addKeyDownEvent( this.ID, 69, false, false, clickOK);
+			textElement, onUpdateFunction,
+			ID = 'textEditor';
+		//pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);
 		
 		function close(){
 			jqWrap.hide();
@@ -501,7 +569,7 @@ pettanr.editor = ( function(){
 				textElement && this.show( textElement);
 			},
 			onClose: close,
-			ID: 'textEditor'
+			ID: ID
 		}
 	})();
 
@@ -515,11 +583,12 @@ pettanr.editor = ( function(){
 			jqWrap, jqContainer, jqItemOrigin,
 			itemW, itemH,
 			jqName, jqButton, buttonW,
-			onUpdateFunction,
+			//onUpdateFunction,
+			_g_onUpdateFunction,
 			winW,
 			onEnterInterval = null;
 		
-		var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/images/' : 'images/',
+		var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',
 			THUMB_PATH = BASE_PATH, // + 'thumbnail/',
 			LIMIT_FILESIZE = 1024 * 10; // 10KB
 		var IMAGE_DATA = {
@@ -703,56 +772,74 @@ pettanr.editor = ( function(){
 				SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),
 				LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,
 				reversibleImage = null,
-				onEnterFlag = false;
+				onEnterFlag = false,
+				imgW, imgH;
 			JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');
 			jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));
 			
+			function onImageLoad( url, _imgW, _imgH){
+				if( reversibleImage === null) {
+					alert( url);
+					return;
+				}
+				imgW = _imgW || data.width || 64;
+				imgH = _imgH || data.height || 64;
+				JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
+				var zoom = 128 /( imgW > imgH ? imgW : imgH),
+					h = Math.floor( imgH *zoom),
+					w = Math.floor( imgW *zoom);
+				reversibleImage.elm.style.width = w +'px';
+				reversibleImage.elm.style.height = h +'px';
+				reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
+				reversibleImage.resize( w, h);
+				JQ_ICON_WRAP.click( onClick);
+			}
+			
+			function onClick( e){
+				pettanr.overlay.hide();
+				if( _g_onUpdateFunction) {
+					if( LOW_SRC === null){
+						window[ _g_onUpdateFunction]( SRC, imgW, imgH);
+						window[ _g_onUpdateFunction] = null;
+					} else {
+						var _onLoad = pettanr.util.createGlobalFunc( [
+								'function( url, w, h){',
+									'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',
+									'window["', _g_onUpdateFunction, '"] = null;',
+								'}'
+							].join( '')),
+							_onError = pettanr.util.createGlobalFunc( [
+								'function( url){',
+									'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',
+									'window["', _g_onUpdateFunction, '"] = null;',
+								'}'
+							].join( ''));
+						pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);
+						window[ _onLoad] = window[ _onError] = undefined;
+						/*
+						( function( onUpdate){
+							pettanr.util.loadImage( SRC,
+								function( _abspath, imgW, imgH){
+									onUpdate( SRC, imgW, imgH);
+									onUpdate = null;
+								},
+								function( _abspath){
+									onUpdate( SRC, data.width || 64, data.height || 64);
+									onUpdate = null;
+								}
+							);										
+						})( onUpdateFunction);*/ // close()で値が消えるので、クロージャに保持
+					}
+				}
+				close();
+			}
+			
 			return {
 				onEnter: function(){
 					if( onEnterFlag === true) return;
-					reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, function( url, imgW, imgH){
-						if( reversibleImage === null) {
-							alert( url);
-							return;
-						}
-						/*
-						 * ieでサイズが取れない、、、
-						 */
-						imgW = imgW || data.width || 64;
-						imgH = imgH || data.height || 64;
-						JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);
-						var zoom = 128 /( imgW > imgH ? imgW : imgH),
-							h = Math.floor( imgH *zoom),
-							w = Math.floor( imgW *zoom);
-						reversibleImage.elm.style.width = w +'px';
-						reversibleImage.elm.style.height = h +'px';
-						reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';
-						reversibleImage.resize( w, h);
-						JQ_ICON_WRAP.click( function( e){
-							pettanr.overlay.hide();
-							if (onUpdateFunction) {
-								if( LOW_SRC === null){
-									onUpdateFunction( SRC, imgW, imgH);
-								} else {
-									( function( onUpdate){
-										pettanr.util.loadImage( SRC,
-											function( _abspath, imgW, imgH){
-												onUpdate( SRC, imgW, imgH);
-												onUpdate = null;
-											},
-											function( _abspath){
-												onUpdate( SRC, data.width || 64, data.height || 64);
-												onUpdate = null;
-											}
-										);										
-									})( onUpdateFunction); // close()で値が消えるので、クロージャに保持
-								}
-							}
-							close();
-						});
-					});
+					reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);
 					JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);
-					onEnterFlag = true;				
+					onEnterFlag = true;						
 				},
 				destroy: function(){
 					reversibleImage && reversibleImage.destroy();
@@ -774,7 +861,7 @@ pettanr.editor = ( function(){
 				ICON_ARRAY.shift().destroy();
 			}
 			onEnterInterval !== null && window.clearTimeout( onEnterInterval);
-			onUpdateFunction = onEnterInterval = null;
+			onEnterInterval = null;// onUpdateFunction = 
 		}
 		function onEnterShowImage(){
 			var l = ICON_ARRAY.length,
@@ -791,22 +878,22 @@ pettanr.editor = ( function(){
 			// onUpdateFunction && onUpdateFunction( textElement);
 			close();
 		}
+		function onMouseWheel( e, delta){
+			if( winW < containerW){
+				wrapX += delta *WHEEL_DELTA;
+				wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
+				jqContainer.css( { left: wrapX});
+				
+				onEnterInterval !== null && window.clearTimeout( onEnterInterval);
+				onEnterInterval = window.setTimeout( onEnterShowImage, 500);
+			}
+			//e.stopPropagation();
+			return false;			
+		}
 		return {
 			init: function(){
 				this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();
-				jqContainer = $( '#image-icon-container').mousewheel(
-					function( e, delta){
-						if( winW < containerW){
-							wrapX += delta *WHEEL_DELTA;
-							wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;
-							jqContainer.css( { left: wrapX});
-							
-							onEnterInterval !== null && window.clearTimeout( onEnterInterval);
-							onEnterInterval = window.setTimeout( onEnterShowImage, 500);
-						}
-						//e.stopPropagation();
-						return false;
-					});
+				jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);
 				containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;
 				jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());
 				var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));
@@ -820,7 +907,12 @@ pettanr.editor = ( function(){
 			},
 			jqWrap: null,
 			show: function( _onUpdateFunction){
-				onUpdateFunction = _onUpdateFunction;
+				//onUpdateFunction = _onUpdateFunction;
+				if( _onUpdateFunction){
+					_g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);
+				} else {
+					_g_onUpdateFunction = null;
+				}
 				pettanr.overlay.show( this);
 				
 				var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],
@@ -1017,9 +1109,9 @@ pettanr.editor = ( function(){
 					} else {
 						jqWrapper.find( '.window-footer').remove();
 					}
-					update( x, y, w, h);
+					this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);
 					
-					this.onFirstOpen && this.onFirstOpen();
+					update( x, y, w, h);
 					
 					delete this.firstOpen;
 				},
@@ -1038,11 +1130,22 @@ pettanr.editor = ( function(){
 						}
 					}
 				},
+				onFadeIn: function(){
+					instance.firstOpen && instance.firstOpen();
+					instance.onOpen && setTimeout( callOnOpen, 0);
+					function callOnOpen(){
+						instance.onOpen( w, bodyH);
+					}
+				},
+				onFadeOut: function(){
+					var elmWrapper = jqWrapper.get(0);
+					elmWrapper.parentNode.removeChild( elmWrapper);
+					instance.onClose && setTimeout( instance.onClose, 0);
+				},
 				close: function(){
 					if( visible === false) return;
 					instance.visible = visible = false;
-					instance.onClose && setTimeout( instance.onClose, 0);
-					closeWindow( instance);
+					jqWrapper.fadeOut( instance.onFadeOut);
 					MENUBAR_SELWCTION.title( 'show ' +title);
 				},
 				bodyBackOrForward: bodyBackOrForward,
@@ -1062,7 +1165,7 @@ pettanr.editor = ( function(){
 					
 					if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;
 					if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){
-						this.close();
+						instance.close();
 						return;
 					}
 					
@@ -1139,28 +1242,9 @@ pettanr.editor = ( function(){
 			if( _window.visible !== true) return;
 			var _jqWindow = _window.$;
 			jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない．
-			_jqWindow.fadeIn(
-				function(){
-					_window.firstOpen && _window.firstOpen();
-					_window.onOpen && setTimeout( _window.onOpen, 0);
-				}
-			);
+			_jqWindow.fadeIn( _window.onFadeIn);
 			return;
 		}
-		function closeWindow( _window){
-			if( _window.visible !== false) return;
-			var l = WINDOW_ARRAY.length;
-			for( var i=0; i<l; ++i){
-				if( WINDOW_ARRAY[ i] === _window){
-					//WINDOW_ARRAY.splice( i, 1);
-					//WINDOW_ARRAY.push( _window);
-					_window.$.stop().fadeOut( function(){
-						this.parentNode.removeChild( this);
-					});
-					return;
-				}
-			}
-		}
 		
 		return {
 			init: function(){
@@ -1316,12 +1400,12 @@ pettanr.editor = ( function(){
 					instance = this;
 					delete this.onInit;
 				},
-				onFirstOpen: function(){
+				onFirstOpen: function( _w, _h){
 					finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.file.TREE_TYPE_IS_IMAGE);
 					delete this.onFirstOpen;
 				},
-				onOpen: function(){
-					finder.onOpen();
+				onOpen: function( _w, _h){
+					finder.onOpen( _w, _h);
 				},
 				onResize: function( _w, _h){
 					finder.onWindowResize( _w, _h);
@@ -1336,57 +1420,73 @@ pettanr.editor = ( function(){
  * INFOMATION_WINDOW
  */			
 	var INFOMATION_WINDOW = ( function(){
-		var FADE_EFFECT_ENABLED = pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,
+		var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,
 			FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
 			FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
 			backgroundInfomationElm,
 			jqComicElementInformation,
-			elmValueX, elmValueY, elmValueZ, elmValueA, elmValueW, elmValueH, elmAspect,
-			elmPercentW, elmPercentH,
+			inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
+			inputPercentW, inputPercentH,
 			currentComicElement = null,
-			currentElementType = -1;
+			currentElementType = -1,
+			currentLock = false;
 
 		return WINDOWS_CONTROL.createWindow(
 			this,
 			{
-				onFirstOpen: function(){
+				onFirstOpen: function( _w, _h){
 					backgroundInfomationElm = $( '#panel-background-information');
 					
 					jqComicElementInformation = $( '#comic-element-infomation').hide().css( {
-						height:		this.bodyHeight()
+						height:		_h
 					});
 					var TAB_GROUP_ID = 'comic-element-attribute';
-					var CREATER = pettanr.key.createEditableText;
-					elmValueX = CREATER( $( '#comic-element-x'), null, TAB_GROUP_ID);
-					elmValueY = CREATER( $( '#comic-element-y'), null, TAB_GROUP_ID);
-					elmValueZ = CREATER( $( '#comic-element-z'), null, TAB_GROUP_ID);
-					elmValueA = CREATER( $( '#comic-element-a'), null, TAB_GROUP_ID);
-					elmValueW = CREATER( $( '#comic-element-w'), null, TAB_GROUP_ID);
-					elmValueH = CREATER( $( '#comic-element-h'), null, TAB_GROUP_ID);
-					elmPercentW = CREATER( $( '#comic-element-w-percent'), null, TAB_GROUP_ID);
-					elmPercentH = CREATER( $( '#comic-element-h-percent'), null, TAB_GROUP_ID);
-					elmAspect = $( '#comic-element-keep-aspect');
+					var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;
+					inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID);
+					inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID);
+					inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID);
+					inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID);
+					inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID);
+					inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID);
+					inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);
+					inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);
+					inputAspectRatio = $( '#comic-element-keep-aspect');
 					delete this.onFirstOpen;
 				},
-				onResize: function( w, h){
-					jqComicElementInformation && jqComicElementInformation.css( {
-						height: h
+				onResize: function(  _w, _h){
+					jqComicElementInformation.css( {
+						height: _h
 					});
 				},
-				update: function( _elementType, x, y, z, a, w, h, wPercent, hPercent, keepAspect){
-					if( !backgroundInfomationElm) return; // なぜか !backgroundInfomationElm が必要
+				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 === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,
+						w = currentElement !== null ? currentElement.w : 0,
+						h = currentElement !== null ? currentElement.h : 0,
+						actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
+						actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
+						wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,
+						hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,
+						keepAspect = currentElement !== null && currentElement.keepAspect === true;
+					
 					if( currentElementType !== _elementType){
 						if( _elementType !== -1){
 							if( _elementType === 1){
-								elmValueA.show();
-								elmPercentW.hide();
-								elmPercentH.hide();
-								elmAspect.hide();
+								inputA.visible( true);
+								inputPercentW.visible( false);
+								inputPercentH.visible( false);
+								inputAspectRatio.hide();
 							} else {
-								elmValueA.hide();
-								elmPercentW.show();
-								elmPercentH.show();
-								elmAspect.show();
+								inputA.visible( false);
+								inputPercentW.visible( true);
+								inputPercentH.visible( true);
+								inputAspectRatio.show();
 							}
 							currentElementType === -1 && jqComicElementInformation.stop().css( {
 								filter:		'',
@@ -1401,17 +1501,21 @@ pettanr.editor = ( function(){
 						currentElementType = _elementType;
 					}
 					if( currentElementType !== -1){
-						elmValueX.update( x);
-						elmValueY.update( y);
-						elmValueZ.update( z);
-						_elementType === 1 && elmValueA.update( a);
-						elmValueW.update( w);
-						elmValueH.update( h);
-						_elementType === 0 && elmPercentW.update( wPercent);
-						_elementType === 0 && elmPercentH.update( hPercent);					
+						inputX.update( x);
+						inputY.update( y);
+						inputZ.update( z);
+						_elementType === 1 && inputA.update( a);
+						inputW.update( w);
+						inputH.update( h);
+						_elementType === 0 && inputPercentW.update( wPercent);
+						_elementType === 0 && inputPercentH.update( hPercent);					
 					} else {
 						
 					}
+				},
+				lock: function( _currentLock){
+					currentLock = !!_currentLock;
+					this.bodyBackOrForward( !currentLock);
 				}
 			},
 			'infomation-window', 'Infomation', 0, 30, 200, 180, true
@@ -1423,125 +1527,112 @@ pettanr.editor = ( function(){
  */
 	var HELP_DOCUMENTS_WINDOW = ( function(){
 		var visible = true,
-			hasAjaxContents = false,
 			jqAjaxContents,
 			jqNaviItems,
 			jqPages,
+			currentPageIndex = 0,
 			HELP = MENU_BAR_CONTROL.HELP,
 			onLoadFunction = HELP.createAjaxSelection( onFirstOpen),
 			instance;
 		function jumpPage( _index){
 			
 		}
+		function onSelectionClick( _pageIndex){
+			currentPageIndex = _pageIndex || currentPageIndex;
+			HELP_DOCUMENTS_WINDOW.open();
+			onOpen();
+		}
+		function onOpen(){
+			jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');
+			jqPages.hide().eq( currentPageIndex).show();
+		}
 		function onFirstOpen( _pageIndex){
-			_pageIndex = _pageIndex || 0;
-			if( hasAjaxContents === false){
+			currentPageIndex = _pageIndex || currentPageIndex;
+			if( onHelpLoad !== null){
 				$.ajax({
 					url:		'help/jp.xml',
 					dataType:	'xml',
-					success:	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,
-							numPage = 0;
-						elmNavi.className = 'sidenavi';
-						elmItemOrigin.className = 'sidenavi-item';
-						elmItemOrigin.href = '#';
-						elmPages.className = 'page-contents';
-						elmPageOrigin.className = 'page-content';
-						elmPageOrigin.appendChild( elmTitleOrigin);
-						
-						// helpTitle && instance.title( helpTitle);
-						
-						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;
-							
-							pettanr.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.createSelection( title, null, ( function( _pageIndex){
-								return function(){
-									HELP_DOCUMENTS_WINDOW.open();
-									onOpen( _pageIndex);									
-								}
-							})( numPage), true);
-							++numPage;
-						});
-						onLoadFunction();
-						onLoadFunction = null;
-						
-						jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);
-						
-						jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className)
-							.click( function( e){
-								var that = this,
-									parent = this.parentNode,
-									i = ( function(){
-										var children = parent.getElementsByTagName( 'a'),
-											l = children.length;
-										for( var i=0; i<l; ++i){
-											if( children[ i] === that) return i;
-										}
-										return -1;
-									})();
-								e.stopPropagation();
-								if( i === -1) return false;
-								jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
-								jqPages.hide().eq( i).show();
-								
-								return false;
-							});
-						jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a')
-							.click( function( e){
-								var that = this,
-									i = ( function(){
-										var href = that.href,
-											i = href.split( '#jump'),
-											n = i[1]
-										if( n && '' +parseFloat( n) === n){
-											return parseFloat( n)
-										}
-										return -1;
-									})();
-								e.stopPropagation();
-								if( i === -1) return false;
-								jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
-								jqPages.hide().eq( i).show();
-								
-								return false;
-							});
-						jqNaviItems.eq( _pageIndex).addClass( 'current');
-						jqPages = jqAjaxContents.find( '.page-content');
-						jqPages.eq( _pageIndex).show();
-					}
+					success:	onHelpLoad
 				});
-				hasAjaxContents = true;
+				onHelpLoad = null;
 			}
-			function onOpen( _pageIndex){
-				_pageIndex = _pageIndex || 0;
-				jqNaviItems.removeClass( 'current').eq( _pageIndex).addClass( 'current');
-				jqPages.hide().eq( _pageIndex).show();
+		}
+		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,
+				numPage = 0;
+			elmNavi.className = 'sidenavi';
+			elmItemOrigin.className = 'sidenavi-item';
+			elmItemOrigin.href = '#';
+			elmPages.className = 'page-contents';
+			elmPageOrigin.className = 'page-content main';
+			elmPageOrigin.appendChild( elmTitleOrigin);
+			
+			// helpTitle && instance.title( helpTitle);
+			
+			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;
+				
+				pettanr.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.createSelection( title, null, onSelectionClick, true);
+				++numPage;
+			});
+			onLoadFunction();
+			onLoadFunction = null;
+			
+			jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);
+			
+			jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);
+			jqAjaxContents.find( '.' +elmPageOrigin.className).find( 'a').click( onInnerLinkClick);
+			jqPages = jqAjaxContents.find( '.page-content');
+			setTimeout( onOpen, 0);
+		}
+		function onNaviClick( e){
+			// this は <a>
+			var children = this.parentNode.getElementsByTagName( 'a'),
+				l = children.length;
+			for( var i=0; i<l; ++i){
+				if( children[ i] === this) break;
 			}
+			e.stopPropagation();
+			if( i === l) return false;
+			jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
+			jqPages.hide().eq( i).show();
+			return false;
+		}
+		function onInnerLinkClick( e){
+			var jump = this.href.split( '#jump'),
+				n = jump[1],
+				i = ( n && '' +parseFloat( n) === n) ? parseFloat( n) : -1;
+			e.stopPropagation();
+			if( i === -1) return false;
+			jqNaviItems.removeClass( 'current').eq( i).addClass( 'current');
+			jqPages.hide().eq( i).show();
+			currentPageIndex = i;
+			return false;				
 		}
 		return WINDOWS_CONTROL.createWindow(
 			this,
@@ -1551,7 +1642,9 @@ pettanr.editor = ( function(){
 					jqAjaxContents = this.$.find( '.window-body').addClass( 'loading').css( { height: this.bodyHeight()});
 					delete this.onInit;
 				},
-				onFirstOpen: onFirstOpen,
+				onFirstOpen: function(){
+					onFirstOpen();
+				},
 				onResize: function( w, h){
 					jqAjaxContents && jqAjaxContents.css( { height: h});
 				},
@@ -1593,7 +1686,7 @@ pettanr.editor = ( function(){
 				visible = !visible;
 				
 				if( visible === true && !ELM_GRID.style.backgroundImage){
-					ELM_GRID.style.backgroundImage = "url('grid.gif')";
+					ELM_GRID.style.backgroundImage = "url('images/grid.gif')";
 				}
 				return visible;				
 			}
@@ -1641,6 +1734,7 @@ pettanr.editor = ( function(){
 /*
  * PANEL_CONTROL
  * panel-border の表示と onPanelResize の通知．
+ * panel drag.
  * 
  */
 	var PANEL_CONTROL = ( function(){
@@ -1818,8 +1912,8 @@ pettanr.editor = ( function(){
 			}
 		}
 	};
-	var	PANEL_RESIZER_TOP = PanelResizerClass.apply( {}, [ 'panel-resizer-top', true]),
-		PANEL_RESIZER_BOTTOM = PanelResizerClass.apply( {}, [ 'panel-resizer-bottom', false]);
+	var	PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),
+		PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);
 		
 	PanelResizerClass = undefined;
 
@@ -1865,18 +1959,18 @@ pettanr.editor = ( function(){
 		}
 		function layerBack(){
 			if( currentElement === null) return;
-			COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, false);
-			updateInfomation();
-			SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, true], [ currentElement, false]);
+			if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return;
+			INFOMATION_WINDOW.update( currentElement);
+			SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);
 			var _z = currentElement.z;
 			LAYER_BACK_BUTTON.visible( _z > 0);
 			LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
 		}
 		function layerForward(){
 			if( currentElement === null) return;
-			COMIC_ELEMENT_CONTROL.replaceComicElement( currentElement, true);
-			updateInfomation();
-			SAVE( COMIC_ELEMENT_CONTROL.restoreReplaceObject, [ currentElement, false], [ currentElement, true]);
+			if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return;
+			INFOMATION_WINDOW.update( currentElement);
+			SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);
 			var _z = currentElement.z;
 			LAYER_BACK_BUTTON.visible( _z > 0);
 			LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);
@@ -1884,8 +1978,8 @@ pettanr.editor = ( function(){
 		function del(){
 			if( currentElement === null) return;
 			buttonBackOrForward( true);
-			COMIC_ELEMENT_CONTROL.removeComicElement( currentElement);
-			SAVE( COMIC_ELEMENT_CONTROL.restoreComicElement, [ true, currentElement], [ false, currentElement], true);
+			COMIC_ELEMENT_CONTROL.remove( currentElement);
+			SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);
 			COMIC_ELEMENT_OPERATION_MANAGER.hide();
 		}
 		function edit(){
@@ -2058,7 +2152,7 @@ pettanr.editor = ( function(){
 						_mouseY > 0 ? 90 : -90
 				);
 				currentText && currentText.angle( balloonA);
-				COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( undefined, undefined, undefined, balloonA);
+				INFOMATION_WINDOW.update( currentText);
 			},
 			onFinish: function(){
 				startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);
@@ -2071,8 +2165,9 @@ pettanr.editor = ( function(){
 				currentText = null;
 			}
 		}
-	})(),
-	RESIZE_OPERATOR = ( function(){
+	})();
+	
+	var RESIZE_OPERATOR = ( function(){
 		var	MOUSE_CURSOR = updateMouseCursor,
 			GRID_ENABLED = GRID_CONTROL.enabled;
 		
@@ -2116,6 +2211,7 @@ pettanr.editor = ( function(){
 			baseX, baseY, baseW, baseH,
 			currentX, currentY, currentW, currentH,
 			offsetX, offsetY,
+			lock = false,
 			error = 0;
 		
 		function draw( _x, _y, _w, _h){
@@ -2123,14 +2219,20 @@ pettanr.editor = ( function(){
 			y = _y !== undefined ? _y : y;
 			w = _w !== undefined ? _w : w;
 			h = _h !== undefined ? _h : h;
-			elmResizerContainerStyle.left = x +'px';
-			elmResizerContainerStyle.top = y +'px';
-			elmResizerContainerStyle.width = w +'px';
-			elmResizerContainerStyle.height = h +'px';
-			elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';
-			elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';
-			elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';
-			elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';
+			try {
+				elmResizerContainerStyle.left = x +'px';
+				elmResizerContainerStyle.top = y +'px';
+				elmResizerContainerStyle.width = w +'px';
+				elmResizerContainerStyle.height = h +'px';
+				elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';
+				elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';
+				elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';
+				elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';				
+			} catch(e){
+				alert( [x, y, w, h].join( ','));
+				return;
+			}
+
 			
 			POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);
 			POSITION_ARRAY.push(
@@ -2166,17 +2268,17 @@ pettanr.editor = ( function(){
 			currentElement.resize( x, y, w, h);
 			currentIsTextElement === true && TAIL_OPERATOR.update( w, h);
 			CONSOLE_CONTROLER.show( currentElement, w, h);
-			COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y, undefined, undefined, w, h);
+			INFOMATION_WINDOW.update( currentElement);
 		}
 		
-		function flip( _flipV, _flipH){
+		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;
 			MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);
 			elmResizerContainer.className = 'current-resizer-is-' +currentIndex;
-			currentElement.flip( _flipV, _flipH);
+			currentElement.flip( _flipH, _flipV);
 		}
 		return {
 			update: draw,
@@ -2234,24 +2336,23 @@ pettanr.editor = ( function(){
 				var com = RESIZE_WORK_ARRAY[ currentIndex],
 					moveX = _mouseX -offsetX,
 					moveY = _mouseY -offsetY,
+					_updated = moveX !== 0 || moveY !== 0,
 					_x, _y, _w, _h,
-					_updated,
 					_thisError = 0;
 					
 				var _memoryX = 0,
-					_memoryY = 0;
+					_memoryY = 0,
+					_momoryW = 0,
+					_momoryH = 0;
 				/*
-				 * Opera 11+ often forget values, why ??
+				 * Opera 11+ often forget values, why ??
 				 */
 				while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
-					com = RESIZE_WORK_ARRAY[ currentIndex];
-					moveX = _mouseX -offsetX;
-					moveY = _mouseY -offsetY;
-					_x = baseX +moveX *com.x;
-					_y = baseY +moveY *com.y;
-					_w = baseW +moveX *com.w;
-					_h = baseH +moveY *com.h;
-					_updated = moveX !== 0 || moveY !== 0;
+					_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
@@ -2261,39 +2362,45 @@ pettanr.editor = ( function(){
 					}
 				}
 				
-				if( _w >= MIN_OBJECT_SIZE && _h >= MIN_OBJECT_SIZE){
+				if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
 					
 				} else 
-				if( _w >= -MIN_OBJECT_SIZE && _h >= -MIN_OBJECT_SIZE){
+				if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){
 					//return;
-					_w = _w < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _w;
-					_h = _h < MIN_OBJECT_SIZE ? MIN_OBJECT_SIZE : _h;
-					_x = currentX;
-					_y = currentY;
+					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 === COMIC_ELEMENT_TYPE_TEXT){
 					return;
 				} else 
-				if( _w < -MIN_OBJECT_SIZE || _h < -MIN_OBJECT_SIZE){
+				if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
 
-					if( _w < -MIN_OBJECT_SIZE && _h > MIN_OBJECT_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( false, true);
+						flip( true, false);
 						flipV = currentElement.flipV();
 					} else 
-					if( _w > MIN_OBJECT_SIZE && _h < -MIN_OBJECT_SIZE){
+					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( true, false);
+						flip( false, true);
 						flipH = currentElement.flipH();
 					} else {
 					// flipVH
@@ -2343,11 +2450,19 @@ pettanr.editor = ( function(){
 					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 = ( function(){
+	})();
+	
+	var POSITION_OPERATOR = ( function(){
 		var	MOUSE_CURSOR = updateMouseCursor,
 			GRID_ENABLED = GRID_CONTROL.enabled;
 		
@@ -2362,7 +2477,7 @@ pettanr.editor = ( function(){
 			y = _y !== undefined ? _y : y;
 			RESIZE_OPERATOR.update( x, y);
 			currentElement.resize( x, y);
-			COMIC_ELEMENT_OPERATION_MANAGER.updateInfomation( x, y);
+			INFOMATION_WINDOW.update( currentElement);
 		}
 		
 		return {
@@ -2427,23 +2542,7 @@ pettanr.editor = ( function(){
 				RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);
 				currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);
 				CONSOLE_CONTROLER.show( currentElement, currentw, currenth);
-				updateInfomation( currentx, currenty, currentElement.z, angle, currentw, currenth);
-			}
-			function updateInfomation( _x, _y, _z, _a, _w, _h, keepAspect){
-				_w = _w !== undefined ? _w : currentw;
-				_h = _h !== undefined ? _h : currenth;
-				INFOMATION_WINDOW.update(
-					currentElement === null ? -1 : currentElement.type,
-					_x !== undefined ? _x : currentx,
-					_y !== undefined ? _y : currenty,
-					_z !== undefined ? _z : ( currentElement === null ? '*' : currentElement.z),
-					_a !== undefined ? Math.floor( _a) : ( currentIsTextElement === true ? Math.floor( angle) : '-'),
-					_w,
-					_h,
-					currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualW() === 0 ? '?' : Math.floor( _w / currentElement.actualW() *100)),
-					currentElement === null || currentIsTextElement === true ? '-' : ( currentElement.actualH() === 0 ? '?' : Math.floor( _h / currentElement.actualH() *100)),
-					currentElement === null || currentIsTextElement === true ? '-' : currentElement.keepAspect
-				);
+				INFOMATION_WINDOW.update( currentElement);
 			}
 			function show( _currentElement){
 				currentElement === null && RESIZE_OPERATOR.show( _currentElement);
@@ -2468,7 +2567,7 @@ pettanr.editor = ( function(){
 				MOUSE_CURSOR( '');
 				TAIL_OPERATOR.hide();
 				CONSOLE_CONTROLER.hide();
-				updateInfomation();
+				INFOMATION_WINDOW.update( null);
 			}
 			function restoreState( arg){
 				if( arg && arg.length !== 8) return;
@@ -2515,34 +2614,27 @@ pettanr.editor = ( function(){
 			hide: hide,
 			resize: resize,
 			restoreState: restoreState,
-			updateInfomation: updateInfomation,
 			saveStatus: saveComicElementStatus,
 			busy: function(){
 				return currentOperator !== null;
 			},
-			hitareaX: function( _comicElement, _x){
+			hitTest: function( _mouseX, _mouseY, _comicElement){
+				var _x, _y, _w, _h;
 				if( _comicElement === currentElement){
 					var _consoleX = CONSOLE_CONTROLER.x();
-					return currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
-				}
-				return _x -HIT_AREA;
-			},
-			hitareaY: function( _comicElement, _y){
-				return _y -HIT_AREA;
-			},
-			hitareaW: function( _comicElement, _w){
-				if( _comicElement === currentElement){
+					_x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;
+					_y = currenty -HIT_AREA;
 					var _consoleW = CONSOLE_CONTROLER.w();
-					return ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;
-				}
-				return _w +HIT_AREA *2;
-			},
-			hitareaH: function( _comicElement, _h){
-				if( _comicElement === currentElement){
+					_w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;
 					var _consoleY = CONSOLE_CONTROLER.y();
-					return ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
+					_h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;
+				} else {
+					_x = _comicElement.x -HIT_AREA;
+					_y = _comicElement.y -HIT_AREA;
+					_w = _comicElement.w +HIT_AREA *2;
+					_h = _comicElement.h +HIT_AREA *2;
 				}
-				return _h +HIT_AREA *2;
+				return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
 			},
 			onMouseDown: function( _currentElement, _mouseX, _mouseY){
 				//show( _currentElement);
@@ -2589,10 +2681,7 @@ pettanr.editor = ( function(){
 			h: h,					
 			z: z,
 			timing: timing,
-			hitareaX: function(){ return OPERATOR.hitareaX( this, this.x);},
-			hitareaY: function(){ return OPERATOR.hitareaY( this, this.y);},
-			hitareaW: function(){ return OPERATOR.hitareaW( this, this.w);},
-			hitareaH: function(){ return OPERATOR.hitareaH( this, this.h);},
+			hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest(  _mouseX, _mouseY, this);},
 			shift: function( _shiftX, _shiftY){
 				update( this.x +_shiftX, this.y +_shiftY);
 			},
@@ -2640,8 +2729,11 @@ pettanr.editor = ( function(){
 				top:	y,
 				width:	w,
 				height:	h
-			}, 250, function(){ reversibleImage.resize( flipH * w, flipV * h);});
-			animate !== true && reversibleImage.resize( flipH * w, flipV * h);
+			}, 250, onAnimeComplete);
+			animate !== true && onAnimeComplete();
+		}
+		function onAnimeComplete(){
+			reversibleImage.resize( flipH * w, flipV * h);
 		}
 		
 		function updateUrl( _url){
@@ -2660,7 +2752,7 @@ pettanr.editor = ( function(){
 			reversibleImage = _reversibleImage;
 		}
 		return pettanr.util.extend(
-			AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing]),
+			new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),
 			{
 				init: function(){
 					instance = this;
@@ -2814,7 +2906,7 @@ pettanr.editor = ( function(){
 		}
 		
 		return pettanr.util.extend(
-			AbstractComicElement.apply( this, [ JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing]),
+			new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),
 			{
 				init: function(){
 					instance = this;
@@ -2908,6 +3000,8 @@ pettanr.editor = ( function(){
 		var	SAVE = HISTORY.saveState,
 			ELM_CONTAINER = document.getElementById( 'comic-element-container'),
 			currentElement = null,
+			currentLockTest = false,
+			currentLock = false,
 			panelX, panelY, panelW, panelH,
 			startX, startY;
 	
@@ -2955,14 +3049,14 @@ pettanr.editor = ( function(){
 				COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());
 				COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);
 			}
-			numberingComicElement();
+			renumber();
 		}
 		function removeComicElement( _comicElement) {
 			var l = COMIC_ELEMENT_ARRAY.length;
 			for( var i=0; i<l; ++i){
 				if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){
 					COMIC_ELEMENT_ARRAY.splice( i, 1);
-					numberingComicElement();
+					renumber();
 					_comicElement.$.stop().css( {
 						filter:		'',
 						opacity:	''
@@ -2984,7 +3078,7 @@ pettanr.editor = ( function(){
 		 * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算
 		 * jqElmの並び替え。
 		 */
-		function numberingComicElement(){
+		function renumber(){
 			var l = COMIC_ELEMENT_ARRAY.length,
 				_comicElement, jqElm, jqNext;
 			for( var i=0; i < l; ++i){
@@ -3004,26 +3098,27 @@ pettanr.editor = ( function(){
 					}
 					return -1;
 				})();
-			if( i === -1) return;
+			if( i === -1) return false;
 			if( goForward === true){
-				if( i === 0) return;
+				if( i === 0) return false;
 				COMIC_ELEMENT_ARRAY.splice( i, 1);
 				COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);
 			} else {
-				if( i === l -1) return;
+				if( i === l -1) return false;
 				COMIC_ELEMENT_ARRAY.splice( i, 1);
 				COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);
 			}
-			numberingComicElement();
+			renumber();
+			return true;
 		}
-		function restoreReplaceObject( arg){
+		function restoreReplaceElement( arg){
 			replaceComicElement( arg[ 0], arg[ 1]);
 		}
 		
 		return {
-			init: function( _x, _y, _w, _h){
+			init: function(){
 				
-				appendComicElement( ImageElementClass.apply( {}, [ 'images/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));
+				appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));
 				appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));
 			/*
 			 * 
@@ -3032,10 +3127,10 @@ pettanr.editor = ( function(){
 				
 				delete COMIC_ELEMENT_CONTROL.init;
 			},
-			removeComicElement: removeComicElement,
-			restoreComicElement: restoreComicElement,
-			replaceComicElement: replaceComicElement,
-			restoreReplaceObject: restoreReplaceObject,
+			remove: removeComicElement,
+			restore: restoreComicElement,
+			replace: replaceComicElement,
+			restoreReplace: restoreReplaceElement,
 			onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){
 			/*
 			 * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。
@@ -3060,50 +3155,55 @@ pettanr.editor = ( function(){
 			},
 			onMouseMove: function( _mouseX, _mouseY){
 				var l = COMIC_ELEMENT_ARRAY.length,
-					_X = _mouseX -panelX,
-					_Y = _mouseY -panelY,
-					_elm, _x, _y;
+					_x = _mouseX -panelX,
+					_y = _mouseY -panelY,
+					_elm = currentElement;
 					
-				if( currentElement !== null){
-					if( currentElement.busy() === true){
-						currentElement.onMouseMove( _X, _Y);
+				if( _elm !== null){
+					currentLockTest = currentLockTest === true && _x === 0 && _y === 0;
+					if( _elm.busy() === true){
+						_elm.onMouseMove( _x, _y);
 						return true;
 					}
-					_x = currentElement.hitareaX();
-					_y = currentElement.hitareaY();
-					if( _x <= _X && _y <= _Y && _x + currentElement.hitareaW() >= _X && _y +currentElement.hitareaH() >= _Y){
-						currentElement.onMouseMove( _X, _Y); // cursor
+					if( _elm.hitTest( _x, _y) === true){
+						_elm.onMouseMove( _x, _y); // cursor
+						return true;
+					}
+					if( currentLock === true){
+						currentLockTest = true;
 						return true;
 					}
 				}
 				for( var i=0; i<l; i++){
 					_elm = COMIC_ELEMENT_ARRAY[ i];
-					_x = _elm.hitareaX();
-					_y = _elm.hitareaY();
 					// hitTest
-					if( _x <= _X && _y <= _Y && _x + _elm.hitareaW() >= _X && _y +_elm.hitareaH() >= _Y){
+					if( _elm.hitTest( _x, _y) === true){
+						_elm.onMouseMove( _x, _y); // cursor
+						log.html( [ _x, _y, i].join( ','));
 						currentElement = _elm;
-						currentElement.onMouseMove( _X, _Y); // cursor
-						log.html( [ _X, _Y, _x, _y, i].join( ','));
 						return true;
 					}
 				}
 				currentElement = null;							
 				COMIC_ELEMENT_OPERATION_MANAGER.hide();
-				log.html( [ _X, _Y, _x, _y].join( ','));
+				log.html( [ _x, _y].join( ','));
 				return false;
 			},
 			onMouseUp: function( _mouseX, _mouseY){
 				var ret = currentElement !== null && currentElement.busy() === true;
 				ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);
-				startX = startY = NaN;
+				currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY) === true;
+				RESIZE_OPERATOR.lock( currentLock);
+				INFOMATION_WINDOW.lock( currentLock);
 				return ret;
 			},
 			onMouseDown: function( _mouseX, _mouseY){
 				startX = panelX;
 				startY = panelY;
-				currentElement !== null && currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);
-				return currentElement !== null;
+				if( currentElement === null) return false
+				currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);
+				currentLockTest = true;
+				return true;
 			},
 			busy: function(){
 				return currentElement !== null;
@@ -3113,12 +3213,13 @@ pettanr.editor = ( function(){
 				h = h || 150; //ActualHeight
 				x = x || Math.floor( panelW /2 -w /2);
 				y = y || Math.floor( panelH /2 -h /2);
-				IMAGE_GROUP_EXPROLER.show( function( _url, _w, _h){
-					var _comicElement = ImageElementClass.apply( {}, [ _url, imagesetID, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);
+				function onImageSelect( _url, _w, _h){
+					var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);
 					appendComicElement( _comicElement);
 					_comicElement.animate( undefined, undefined, _w, _h);
-					SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);
-				});
+					SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);					
+				}
+				IMAGE_GROUP_EXPROLER.show( onImageSelect);
 			},
 			createTextElement: function( type, angle, text, x, y, z, w, h){
 				type = type || 0;
@@ -3303,11 +3404,12 @@ pettanr.editor = ( function(){
 			// last
 			MENU_BAR_CONTROL.init();
 			
+			OUTPUT_CONSOLE.init();
 			TEXT_EDITOR_CONTROL.init();
 			IMAGE_GROUP_EXPROLER.init();
 
 		/*
-		 * centering
+		 * centering
 		 */
 			pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);	// ctrl + 0
 			pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);	// ctrl + 0
@@ -3340,7 +3442,7 @@ pettanr.editor = ( function(){
 		onWindowResize: function( _windowW, _windowH){
 			windowW = _windowW;
 			windowH = _windowH;
-			
+			if( pettanr.editor.firstOpen) return;
 			/*
 			 * ieは +'px'が不要みたい
 			 */
-- 
2.11.0