From: itozyun <itozyun@gmail.com>
Date: Sun, 2 Dec 2012 14:28:34 +0000 (+0900)
Subject: version 0.5.26, fixed around PointingDeviceEventTree & PanelEditor.
X-Git-Url: http://git.osdn.jp/view?a=commitdiff_plain;h=468df69ef68e5e484ca574183861677bcc4463cf;p=pettanr%2FclientJs.git

version 0.5.26, fixed around PointingDeviceEventTree & PanelEditor.
---

diff --git a/0.5.x/javascripts/peta.apps.js b/0.5.x/javascripts/peta.apps.js
index 7f05761..b50ff14 100644
--- a/0.5.x/javascripts/peta.apps.js
+++ b/0.5.x/javascripts/peta.apps.js
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.25
+ *   version 0.5.26
  *   
  * author:
  *   itozyun
@@ -1201,30 +1201,6 @@ var Editor = gOS.registerApplication( function(){
 			delete o[ p ];
 		};
 	};
-	
-	var Module = {
-		abstractModule: {
-			init: function(){
-				
-			},
-			open: function(){
-				
-			},
-			close: function(){
-				
-			},
-			destroy: function(){
-				this.kill = kill;
-				this.kill();
-			}
-		},
-		register: function( _class ){
-			_class.prototype = TMP.abstractModule;
-			var ret = _class();
-			MODULE_ARRAY.push( ret );
-			return ret;
-		}
-	};
 /* ----------------------------------------
  * MENU BAR
  *  - mouseEventListener
@@ -1608,10 +1584,10 @@ var Editor = gOS.registerApplication( function(){
 			SAVE_CONTROL.panelUpdated( true );
 		};
 		var RecordClass = function( callback, argBack, argForword, destroy, opt_thisObject ){
-			this.callback         = callback;
+			this.callback   = callback;
 			this.argBack    = argBack;
 			this.argForword = argForword;
-			this.destroy    = destroy;
+			this.destroy    = !!destroy;
 			this.thisObj    = opt_thisObject;
 		};
 		RecordClass.prototype.kill = function( _callDestroy ){
@@ -2673,10 +2649,10 @@ var Editor = gOS.registerApplication( function(){
 	})();
 
 /* --------------------------------------------------------------------------------------------
- * TAIL_OPERATOR
+ * TailOperator
  *  - panelElementOperator
  */
-	var TAIL_OPERATOR = ( function(){
+	var TailOperator = ( function(){
 		var	styleMover,
 			SIZE,
 			SIN          = Math.sin,
@@ -2687,7 +2663,7 @@ var Editor = gOS.registerApplication( function(){
 			RAD_TO_DEG   = 1 / DEG_TO_RAD,
 			currentText  = null,
 			tailX, tailY,
-			x, y, w, h,
+			w, h,
 			balloonW, balloonH, balloonA, radA,
 			visible = false,
 			startA;
@@ -2697,7 +2673,7 @@ var Editor = gOS.registerApplication( function(){
 				var elm    = document.getElementById( 'balloon-tail-mover' );
 				SIZE       = Util.getElementSize( elm ).width;
 				styleMover = elm.style;
-				delete TAIL_OPERATOR.init;
+				delete TailOperator.init;
 			},
 			update: function ( _w, _h, _a ){
 				balloonW = _w !== undefined ? _w : balloonW;
@@ -2714,7 +2690,7 @@ var Editor = gOS.registerApplication( function(){
 				 * visibilityのほうがいい, display:none だと ie で描画が狂う
 				 */
 				styleMover.visibility = '';
-				TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.a );
+				TailOperator.update( _currentText.w, _currentText.h, _currentText.a );
 				currentText = _currentText;
 			},
 			hitTest: function( _mouseX, _mouseY ){
@@ -2728,23 +2704,21 @@ var Editor = gOS.registerApplication( function(){
 				styleMover.visibility = 'hidden';
 				currentText = null;
 			},
-			onStart: function( _currentText, _mouseX, _mouseY ){
-				if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;
-				x = _currentText.x;
-				y = _currentText.y;
-				if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true ){
-					w = _currentText.w;
-					h = _currentText.h;
-					currentText = _currentText;
-					startA      = _currentText.a;
+			onStart: function( _mouseX, _mouseY ){
+				if( currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;
+				if( TailOperator.hitTest( _mouseX, _mouseY ) === true ){
+					w = currentText.w;
+					h = currentText.h;
+					currentText = currentText;
+					startA      = currentText.a;
 					return true;
-				}
+				};
 				return false;
 			},
 			onDrag: function( _mouseX, _mouseY ){
-				_mouseX = _mouseX - x - w / 2;
-				_mouseY = _mouseY - y - h / 2; //Balloonの中心を0,0とする座標系に変換
-				TAIL_OPERATOR.update( w, h,
+				_mouseX = _mouseX - w / 2;
+				_mouseY = _mouseY - h / 2; //Balloonの中心を0,0とする座標系に変換
+				TailOperator.update( w, h,
 					_mouseX !== 0 ?
 						ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) :
 						_mouseY > 0 ? 180 : 0
@@ -2753,23 +2727,23 @@ var Editor = gOS.registerApplication( function(){
 				CONSOLE_CONTROLER.update( currentText );
 			},
 			onFinish: function(){
-				startA !== currentText.a && PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA );
-				startA !== currentText.a && PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.a );
+				startA !== currentText.a && PanelElementOperatorManager.saveStatus( undefined, undefined, w, h, startA );
+				startA !== currentText.a && PanelElementOperatorManager.resize( undefined, undefined, w, h, currentText.a );
 				currentText = null;
 			},
 			onCancel: function(){
 				currentText.angle( startA );
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA );
+				PanelElementOperatorManager.resize( undefined, undefined, w, h, startA );
 				currentText = null;
 			}
 		}
 	})();
 
 /* --------------------------------------------------------------------------------------------
- * RESIZE_OPERATOR
+ * ResizeOperator
  *  - panelElementOperator
  */
-	var RESIZE_OPERATOR = ( function(){
+	var ResizeOperator = ( function(){
 		var	HIT_AREA        = MOUSE_HIT_AREA,
 			POSITION_ARRAY  = [],
 			FLOOR           = Math.floor,
@@ -2783,16 +2757,16 @@ var Editor = gOS.registerApplication( function(){
 				{ cursor:	'ne-resize',	h: 7, v: 4, vh: 5 },
 				{ cursor:	'nw-resize',	h: 6, v: 5, vh: 4 }
 			],
-			elmResizerContainer,
-			elmResizerContainerStyle,
-			elmResizerTopStyle,
-			elmResizerLeftStyle,
-			elmResizerRightStyle,
-			elmResizerBottomStyle,
+			styleInner,
+			elmInner,
+			styleResizerTop,
+			styleResizerLeft,
+			styleResizerRight,
+			styleResizerBottom,
 			x, y, w, h,
 			currentIndex = -1,
 			currentElement,
-			currentIsTextElement = false;
+			isSpeach = false;
 		
 		var RESIZE_WORK_ARRAY = [
 				{ x:	0, w:	 0, y:	1, h:	-1}, //top
@@ -2810,32 +2784,6 @@ var Editor = gOS.registerApplication( function(){
 			offsetX, offsetY,
 			error = 0;
 		
-		function draw( _x, _y, _w, _h ){
-			x = _x = _x !== undefined ? _x : x;
-			y = _y = _y !== undefined ? _y : y;
-			w = _w = _w !== undefined ? _w : w;
-			h = _h = _h !== undefined ? _h : h;
-
-			elmResizerContainerStyle.left   = ( PANEL_CONTROL.x + _x ) + 'px';
-			elmResizerContainerStyle.top    = ( PANEL_CONTROL.y + _y ) + 'px';
-			elmResizerContainerStyle.width  = _w + 'px';
-			elmResizerContainerStyle.height = _h + 'px';
-			elmResizerTopStyle.left = elmResizerBottomStyle.left = FLOOR( _w / 2 - 5 ) + 'px';
-			elmResizerLeftStyle.top = elmResizerRightStyle.top   = FLOOR( _h / 2 - 5 ) + 'px';
-
-			POSITION_ARRAY.splice( 0, POSITION_ARRAY.length );
-			POSITION_ARRAY.push(
-				{x:	_x +5,					y:	_y -HIT_AREA,		w:	_w -5 *2,		h:	HIT_AREA +5},
-				{x: _x -HIT_AREA,			y:	_y +HIT_AREA +5,	w:	HIT_AREA +5,	h:	_h -5 *2},
-				{x: _x + _w -5,				y:	_y +HIT_AREA +5,	w:	HIT_AREA +5,	h:	_h -5 *2},
-				{x:	_x +5,					y:	_y +_h -5,			w:	_w -5 *2,		h:	HIT_AREA +5},
-				{x:	_x -HIT_AREA,			y:	_y -HIT_AREA,		w:	HIT_AREA +5,	h:	HIT_AREA +5},
-				{x: _x + _w -HIT_AREA,		y:	_y -HIT_AREA,		w:	HIT_AREA +5,	h:	HIT_AREA +5},
-				{x:	_x -HIT_AREA,			y:	_y +_h -5,			w:	HIT_AREA +5,	h:	HIT_AREA +5},
-				{x:	_x +_w -5,				y:	_y +_h -5,			w:	HIT_AREA +5,	h:	HIT_AREA +5}
-			);
-		};
-		
 		function update( _x, _y, _w, _h ){
 			var __w, __h;
 			_x = _x !== undefined ? _x : currentX;
@@ -2843,22 +2791,22 @@ var Editor = gOS.registerApplication( function(){
 			_w = _w !== undefined ? _w : currentW;
 			_h = _h !== undefined ? _h : currentH;
 			
-			if( currentIsTextElement === false && currentIndex > 3 && app.shiftEnabled() === true){
+			if( isSpeach === false && currentIndex > 3 && app.shiftEnabled() === true ){
 				if( startAspect >= 1 ){
 					__w = _w;
 					_w  = FLOOR( startAspect * _h );
-					_x  = _x +( currentIndex % 2 === 0 ? __w - _w : 0);
+					_x  = _x + ( currentIndex % 2 === 0 ? __w - _w : 0 );
 				} else {
 					__h = _h;
 					_h  = FLOOR( _w / startAspect );
-					_y  = _y + ( currentIndex <= 5 ? __h - _h : 0);
+					_y  = _y + ( currentIndex <= 5 ? __h - _h : 0 );
 				};
 			};
-			draw( x = _x, y = _y, w = _w, h = _h );
+			ResizeOperator.update( x = _x, y = _y, w = _w, h = _h );
 			currentElement.resize( _x, _y, _w, _h );
-			currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h );
+			isSpeach === true && TailOperator.update( _w, _h );
 			CONSOLE_CONTROLER.show( currentElement, _w, _h );
-			CONSOLE_CONTROLER.update( currentElement );
+			// CONSOLE_CONTROLER.update( currentElement );
 		};
 		
 		function flip( _flipH, _flipV ){
@@ -2867,77 +2815,97 @@ var Editor = gOS.registerApplication( function(){
 					_flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v' )
 				] : currentIndex;
 			app.updateCoursor( CURSOR_AND_FLIP[ currentIndex ].cursor );
-			elmResizerContainer.className = 'current-resizer-is-' + currentIndex;
+			elmInner.className = 'current-resizer-is-' + currentIndex;
 			currentElement.flip( _flipH, _flipV );
 		};
 		return {
 			init: function(){
-				elmResizerContainer      = document.getElementById( 'comic-element-resizer-container');
-				elmResizerContainerStyle = elmResizerContainer.style;
-				elmResizerContainerStyle.display = 'none';
+				elmInner           = document.getElementById( 'comic-element-resizer-container-inner' );
+				styleInner         = elmInner.style;
 				
-				elmResizerTopStyle       = document.getElementById( 'comic-element-resizer-top').style;
-				elmResizerLeftStyle      = document.getElementById( 'comic-element-resizer-left').style;
-				elmResizerRightStyle     = document.getElementById( 'comic-element-resizer-right').style;
-				elmResizerBottomStyle    = document.getElementById( 'comic-element-resizer-bottom').style;
+				styleResizerTop    = document.getElementById( 'comic-element-resizer-top' ).style;
+				styleResizerLeft   = document.getElementById( 'comic-element-resizer-left' ).style;
+				styleResizerRight  = document.getElementById( 'comic-element-resizer-right' ).style;
+				styleResizerBottom = document.getElementById( 'comic-element-resizer-bottom' ).style;
 				
-				delete RESIZE_OPERATOR.init;
+				delete ResizeOperator.init;
+			},
+			update: function( _x, _y, _w, _h ){
+				x = _x = _x !== undefined ? _x : x;
+				y = _y = _y !== undefined ? _y : y;
+				w = _w = _w !== undefined ? _w : w;
+				h = _h = _h !== undefined ? _h : h;
+				
+				PanelElementOperatorManager.resizeElement( _x, _y, _w, _h );
+				
+				styleInner.width  = _w + 'px';
+				styleInner.height = _h + 'px';
+				
+				styleResizerTop.left = styleResizerBottom.left = FLOOR( _w / 2 - 5 ) + 'px';
+				styleResizerLeft.top = styleResizerRight.top   = FLOOR( _h / 2 - 5 ) + 'px';
+	
+				POSITION_ARRAY.length = 0;
+				POSITION_ARRAY.push(
+					{x:	5,				y:	-HIT_AREA,		w:	_w - 5,			h:	HIT_AREA * 2 }, // top
+					{x: -HIT_AREA,		y:	5,				w:	HIT_AREA * 2,	h:	_h - 5 },   // left
+					{x: _w - 5,			y:	HIT_AREA + 5,	w:	HIT_AREA * 2,	h:	_h - 5 },   // right
+					{x:	5,				y:	_h - 5,			w:	_w - 5,			h:	HIT_AREA * 2 }, // bottom
+					{x:	-HIT_AREA,		y:	-HIT_AREA,		w:	HIT_AREA + 5,	h:	HIT_AREA + 5}, // top left
+					{x: _w - 5,			y:	-HIT_AREA,		w:	HIT_AREA + 5,	h:	HIT_AREA + 5}, // top right
+					{x:	-HIT_AREA,		y:	_h - 5,			w:	HIT_AREA + 5,	h:	HIT_AREA + 5}, // bottom left
+					{x:	_w - 5,			y:	_h - 5,			w:	HIT_AREA + 5,	h:	HIT_AREA + 5}  // bottom right
+				);
 			},
-			update: draw,
 			index: function( _mouseX, _mouseY ){
 				var	p, i;
-				for( i=4; i<8; i++ ){
+				for( i = 4; i < 8; ++i ){
 					p = POSITION_ARRAY[ i ];
-					if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY ){
-						app.updateCoursor( CURSOR_AND_FLIP[ i].cursor );
-						elmResizerContainer.className = 'current-resizer-is-' +i;
+					if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y + p.h >= _mouseY ){
+						app.updateCoursor( CURSOR_AND_FLIP[ i ].cursor );
+						elmInner.className  = 'current-resizer-is-' + i;
 						return currentIndex = i;
 					};
 				};
-				for( i=0; i<4; i++ ){
+				for( i = 0; i < 4; ++i ){
 					p = POSITION_ARRAY[ i ];
-					if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
-						app.updateCoursor( CURSOR_AND_FLIP[ i].cursor);
-						elmResizerContainer.className = 'current-resizer-is-' +i;
+					if( p.x <= _mouseX && _mouseX <= p.x + p.w && p.y <= _mouseY && _mouseY <= p.y + p.h ){
+						app.updateCoursor( CURSOR_AND_FLIP[ i ].cursor );
+						elmInner.className  = 'current-resizer-is-' + i;
 						return currentIndex = i;
 					};
 				};
 				app.updateCoursor( '' );
-				elmResizerContainer.className = '';
+				elmInner.className = '';
 				return -1;
 			},
 			show: function( _currentElement ){
 				currentElement = _currentElement;
-				currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
-				elmResizerContainerStyle.display = '';
+				isSpeach = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
+				ResizeOperator.update( _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h );
 			},
 			hide: function(){
 				currentElement = null;
-				elmResizerContainerStyle.display = 'none';
 			},
-			onStart: function( _currentElement, _mouseX, _mouseY ){
-				currentElement = _currentElement;
-				currentIsTextElement = _currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
-				if( _currentElement.keepSize === true ) return false;
+			onStart: function( _mouseX, _mouseY ){
+				isSpeach = currentElement.type === PANEL_ELEMENT_TYPE_TEXT;
+				if( currentElement.keepSize === true ) return false;
 				currentIndex = this.index( _mouseX, _mouseY );
 				if( currentIndex === -1 ) return false;
 				offsetX = _mouseX;
 				offsetY = _mouseY;
-				startX = baseX = _currentElement.x;
-				startY = baseY = _currentElement.y;
-				startW = baseW = _currentElement.w;
-				startH = baseH = _currentElement.h;
-				if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ){
-					startFilpV = _currentElement.flipV;
-					startFilpH = _currentElement.flipH;							
-				};
-				startAspect = startW /startH;
+				startX = baseX = currentElement.x;
+				startY = baseY = currentElement.y;
+				startW = baseW = currentElement.w;
+				startH = baseH = currentElement.h;
+				startFilpV = currentElement.flipV;
+				startFilpH = currentElement.flipH;
+				startAspect = startW / startH;
 				return true;
 			},
 			onDrag: function( _mouseX, _mouseY ){
-				var com = RESIZE_WORK_ARRAY[ currentIndex ],
-					moveX = _mouseX - offsetX,
-					moveY = _mouseY - offsetY,
+				var com      = RESIZE_WORK_ARRAY[ currentIndex ],
+					moveX    = _mouseX - offsetX,
+					moveY    = _mouseY - offsetY,
 					_updated = moveX !== 0 || moveY !== 0,
 					_x, _y, _w, _h,
 					_thisError = 0;
@@ -2947,11 +2915,11 @@ var Editor = gOS.registerApplication( function(){
 				/*
 				 * Opera 11+ often forget values, why ??
 				 */
-				while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){
-					_x = _x !== undefined ? _x : baseX +moveX *com.x;
-					_y = _y !== undefined ? _y : baseY +moveY *com.y;
-					_w = _w !== undefined ? _w : baseW +moveX *com.w;
-					_h = _h !== undefined ? _h : baseH +moveY *com.h;
+				while( _x === undefined || _y === undefined || _w === undefined || _h === undefined ){
+					_x = _x !== undefined ? _x : baseX + moveX * com.x;
+					_y = _y !== undefined ? _y : baseY + moveY * com.y;
+					_w = _w !== undefined ? _w : baseW + moveX * com.w;
+					_h = _h !== undefined ? _h : baseH + moveY * com.h;
 					error += _thisError === 0 ? 0 : 1;
 					++_thisError;
 					if( _thisError > 9999 ){
@@ -2962,10 +2930,10 @@ var Editor = gOS.registerApplication( function(){
 					};
 				};
 				
-				if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
+				if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE ){
 					
 				} else 
-				if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){
+				if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE ){
 					//return;
 					if( _w < MIN_ELEMENT_SIZE){
 						//_x += Math.abs( MIN_ELEMENT_SIZE -_w);
@@ -2978,45 +2946,45 @@ var Editor = gOS.registerApplication( function(){
 						_h = MIN_ELEMENT_SIZE;
 					}
 				} else 
-				if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT){
+				if( currentElement.type === PANEL_ELEMENT_TYPE_TEXT ){
 					return;
 				} else 
-				if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){
+				if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE ){
 
-					if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){
+					if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE ){
 					// flipH
 						_memoryX = _x;
-						baseX = _x = _x +_w;
-						baseY = _y;
-						baseW = _w = _memoryX -_x;
-						baseH = _h;
-						flip( true, false);
-						flipV = currentElement.flipV;
+						baseX    = _x = _x +_w;
+						baseY    = _y;
+						baseW    = _w = _memoryX -_x;
+						baseH    = _h;
+						flip( true, false );
+						flipV    = currentElement.flipV;
 					} else 
-					if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){
+					if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE ){
 					// flipV
 						_memoryY = _y;
-						baseX = _x;
-						baseY = _y = _y +_h;
-						baseW = _w;
-						baseH = _h = _memoryY -_y;
+						baseX    = _x;
+						baseY    = _y = _y +_h;
+						baseW    = _w;
+						baseH    = _h = _memoryY -_y;
 						flip( false, true);
-						flipH = currentElement.flipH();
+						flipH    = currentElement.flipH();
 					} else {
 					// flipVH
 						_memoryX = _x;
 						_memoryY = _y;
-						baseX = _x = _x +_w;
-						baseY = _y = _y +_h;
-						baseW = _w = _memoryX -_x;
-						baseH = _h = _memoryY -_y;
-						flip( true, true);
-						flipV = currentElement.flipV;
-						flipH = currentElement.flipH;
+						baseX    = _x = _x + _w;
+						baseY    = _y = _y + _h;
+						baseW    = _w = _memoryX - _x;
+						baseH    = _h = _memoryY - _y;
+						flip( true, true );
+						flipV    = currentElement.flipV;
+						flipH    = currentElement.flipH;
 					};
 					_updated = true;
-					offsetX = _mouseX;
-					offsetY = _mouseY;	
+					offsetX  = _mouseX;
+					offsetY  = _mouseY;	
 				};
 				currentX = _x;
 				currentY = _y;
@@ -3037,17 +3005,17 @@ var Editor = gOS.registerApplication( function(){
 				].join( ' , ')); */
 			},
 			onFinish: function(){
-				app.updateCoursor( '');
+				app.updateCoursor( '' );
 				if( w === startW && h === startH && x === startX && y === startY ) return;
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h );
-				currentElement.resize( x, y, w, h);
-				PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH );
+				PanelElementOperatorManager.resize( x, y, w, h );
+				currentElement.resize( x, y, w, h );
+				PanelElementOperatorManager.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH );
 			},
 			onCancel: function(){
-				app.updateCoursor( '');
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH );
+				app.updateCoursor( '' );
+				PanelElementOperatorManager.resize( startX, startY, startW, startH );
 				currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
-					currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
+					currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH ) :
 					currentElement.animate( startX, startY, startW, startH, angle );
 			},
 			onShiftUpdate: update,
@@ -3056,11 +3024,12 @@ var Editor = gOS.registerApplication( function(){
 	})();
 
 /* --------------------------------------------------------------------------------------------
- * POSITION_OPERATOR
+ * PositionOperator
  *  - panelElementOperator
  */
-	var POSITION_OPERATOR = ( function(){
-		var currentElement,
+	var PositionOperator = ( function(){
+		var HIT_AREA = MOUSE_HIT_AREA,
+			currentElement,
 			startX, startY,
 			x, y,
 			offsetX, offsetY,
@@ -3068,20 +3037,25 @@ var Editor = gOS.registerApplication( function(){
 		function update( _x, _y ){
 			x = _x !== undefined ? _x : x;
 			y = _y !== undefined ? _y : y;
-			RESIZE_OPERATOR.update( x, y );
+			// ResizeOperator.update( x, y );
+			
+			PanelElementOperatorManager.resizeElement( x, y );
+			
 			currentElement.resize( x, y );
-			CONSOLE_CONTROLER.update( currentElement );
+			// CONSOLE_CONTROLER.update( currentElement );
 		};
 		return {
 			init: function(){
-				delete POSITION_OPERATOR.init;
+				delete PositionOperator.init;
 			},
-			onStart: function( _currentElement, _mouseX, _mouseY ){
+			show : function( _currentElement ){
 				currentElement = _currentElement;
+			},
+			onStart: function( _mouseX, _mouseY ){
 				offsetX = _mouseX;
 				offsetY = _mouseY;
-				startX  = x = _currentElement.x;
-				startY  = y = _currentElement.y;
+				startX  = x = currentElement.x;
+				startY  = y = currentElement.y;
 				app.updateCoursor( 'move' );
 			},
 			onDrag: function( _mouseX, _mouseY ){
@@ -3098,13 +3072,13 @@ var Editor = gOS.registerApplication( function(){
 			onFinish: function(){
 				app.updateCoursor( '' );
 				if( x === startX && y === startY ) return;
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y );
+				PanelElementOperatorManager.resize( x, y );
 				currentElement.resize( x, y );
-				PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY );
+				PanelElementOperatorManager.saveStatus( startX, startY );
 			},
 			onCancel: function(){
 				app.updateCoursor( '' );
-				PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY );
+				PanelElementOperatorManager.resize( startX, startY );
 				currentElement.animate( startX, startY );
 			},
 			onShiftUpdate: update,
@@ -3114,39 +3088,54 @@ var Editor = gOS.registerApplication( function(){
 
 
 /* --------------------------------------------------------------------------------------------
- * PANEL_ELEMENT_OPERATION_MANAGER
+ * PanelElementOperatorManager
  */
-	var PANEL_ELEMENT_OPERATION_MANAGER = ( function(){
-		var	HIT_AREA             = MOUSE_HIT_AREA,
-			currentIsTextElement = false,
-			currentOperator      = null,
-			currentElement       = null,
-			node                 = null,
+	var PanelElementOperatorManager = ( function(){
+		var	HIT_AREA        = MOUSE_HIT_AREA,
+			isSpeach        = false,
+			currentOperator = null,
+			currentElement  = null,
+			node            = null,
+			styleContainer  = null,
 			currentX, currentY, currentW, currentH, angle, flipV, flipH;
-
-		function show( _currentElement ){
-			currentElement === null && RESIZE_OPERATOR.show( _currentElement );
-			if( currentElement !== _currentElement ){
-				currentElement = _currentElement;
-				
-				currentIsTextElement = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT );
-				currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement ) : TAIL_OPERATOR.hide();
-				
-				flipV = currentIsTextElement === false ? _currentElement.flipV : 0;
-				flipH = currentIsTextElement === false ? _currentElement.flipH : 0;
-				
-				PANEL_ELEMENT_OPERATION_MANAGER.resize(
-					_currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,
-					currentIsTextElement === true ? _currentElement.a : 0
-				);
+		
+		function mousedown( e ){
+			var x = e.layerX - HIT_AREA / 2 - 5,
+				y = e.layerY - HIT_AREA / 2 - 5;
+			if( isSpeach === true && TailOperator.onStart( x, y ) === true ){
+				currentOperator = TailOperator;
+			} else
+			if( ResizeOperator.onStart( x, y ) === true ){
+				currentOperator = ResizeOperator;
+			} else {
+				PositionOperator.onStart( x, y );
+				currentOperator = PositionOperator;
 			};
+			return true;
 		};
-			
+		function mousemove( e ){
+			var x = e.layerX - HIT_AREA / 2 - 5,
+				y = e.layerY - HIT_AREA / 2 - 5;
+			if( currentOperator !== null ){
+				currentOperator.onDrag( x, y );
+				return true;
+			} else
+			if( currentElement !== null ){
+				( isSpeach === false || TailOperator.hitTest( x, y ) === false ) && ResizeOperator.index( x, y );
+			};
+		};
+		function mouseup( e ){
+			currentOperator !== null && currentOperator.onFinish();
+			currentOperator = null;
+		};
+		
 		return {
-			init: function(){
-				TAIL_OPERATOR.init();
-				RESIZE_OPERATOR.init();
-				POSITION_OPERATOR.init();
+			elm  : null,
+			node : null,
+			init : function(){
+				TailOperator.init();
+				ResizeOperator.init();
+				PositionOperator.init();
 				CONSOLE_CONTROLER.init();
 				
 				app.addKeyEventListener( 'keychange', function( e ){
@@ -3163,24 +3152,76 @@ var Editor = gOS.registerApplication( function(){
 					return false;
 				}, 27, false, false );
 				
-				delete PANEL_ELEMENT_OPERATION_MANAGER.init;
+				delete PanelElementOperatorManager.init;
 			},
 			open: function(){
+				var elm = document.getElementById( 'comic-element-resizer-container' );
+				PanelElementOperatorManager.elm  = elm;
+				PanelElementOperatorManager.node = eventRoot.createNode( elm, false, false );
+				PanelElementOperatorManager.node.addEventListener( 'mouseout', PanelElementOperatorManager.hide, PanelElementOperatorManager );
+				styleContainer = elm.style;
+				PanelElementOperatorManager.node.disabled( true );
+				PanelElementOperatorManager.node.addEventListener( 'mousemove', mousemove );
+				PanelElementOperatorManager.node.addEventListener( 'mousedown', mousedown );
+				PanelElementOperatorManager.node.addEventListener( 'mouseup', mouseup );
+				
 				CONSOLE_CONTROLER.open();
-				PANEL_ELEMENT_OPERATION_MANAGER.hide();
+				PanelElementOperatorManager.hide();
 				
-				delete PANEL_ELEMENT_OPERATION_MANAGER.open;
+				delete PanelElementOperatorManager.open;
 			},
 			close: function(){
 				
 			},
+			show : function( _currentElement ){
+				if( currentElement === null ){
+					styleContainer.display = '';
+					PanelElementOperatorManager.node.disabled( false );
+				};
+				if( currentElement !== _currentElement ){
+					currentElement = _currentElement;
+					
+					ResizeOperator.show( _currentElement );
+					PositionOperator.show( _currentElement );
+					
+					isSpeach = ( _currentElement.type === PANEL_ELEMENT_TYPE_TEXT );
+					isSpeach === true ? TailOperator.show( _currentElement ) : TailOperator.hide();
+					
+					flipV = _currentElement.flipV;
+					flipH = _currentElement.flipH;
+					
+					PanelElementOperatorManager.resize(
+						_currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,
+						isSpeach === true ? _currentElement.a : 0
+					);
+				};
+			},
 			hide: function(){
-				currentElement !== null && RESIZE_OPERATOR.hide();
+				if( currentElement !== null ){
+					styleContainer.display = 'none';
+					PanelElementOperatorManager.node.disabled( true );
+				};
 				currentElement = null;
 				app.updateCoursor( '' );
-				TAIL_OPERATOR.hide();
+				TailOperator.hide();
+				ResizeOperator.hide();
 				CONSOLE_CONTROLER.hide();
-				//CONSOLE_CONTROLER.update( null );
+			},
+			resizeElement : function( _x, _y, _w, _h, _angle ){
+				_x = _x !== undefined ? _x : currentX;
+				_y = _y !== undefined ? _y : currentY;
+				_w = _w !== undefined ? _w : currentW;
+				_h = _h !== undefined ? _h : currentH;
+				
+				var style    = PanelElementOperatorManager.elm.style;
+				style.left   = ( PANEL_CONTROL.x + _x - HIT_AREA / 2 - 5 ) + 'px';
+				style.top    = ( PANEL_CONTROL.y + _y - HIT_AREA / 2 - 5 ) + 'px';
+				style.width  = ( _w + HIT_AREA + 5 ) + 'px';
+				style.heught = ( _h + HIT_AREA + 5 ) + 'px';
+				
+				// ResizeOperator.update( _x, _y, _w, _h );
+				isSpeach === true && TailOperator.update( _w, _h, angle );
+				CONSOLE_CONTROLER.show( currentElement, _w, _h );
 			},
 			resize: function( _x, _y, _w, _h, _angle ){
 				currentX = _x = _x !== undefined ? _x : currentX;
@@ -3189,10 +3230,11 @@ var Editor = gOS.registerApplication( function(){
 				currentH = _h = _h !== undefined ? _h : currentH;
 				angle = _angle = _angle !== undefined ? _angle : angle;
 
-				RESIZE_OPERATOR.update( _x, _y, _w, _h );
-				currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h, angle );
+				// ResizeOperator.update( _x, _y, _w, _h );
+				isSpeach === true && TailOperator.update( _w, _h, angle );
 				CONSOLE_CONTROLER.show( currentElement, _w, _h );
 				//CONSOLE_CONTROLER.update( currentElement );
+				PanelElementOperatorManager.node.update( PANEL_CONTROL.x + _x - HIT_AREA / 2 - 5, PANEL_CONTROL.y + _y - HIT_AREA / 2 - 5, _w + HIT_AREA + 5, _h + HIT_AREA + 5 );
 			},
 			/* history */
 			restoreState: function( _currentElement, _x, _y, _w, _h, _a, _flipV, _flipH ){
@@ -3203,7 +3245,7 @@ var Editor = gOS.registerApplication( function(){
 					_currentElement.animate( _x, _y, _w, _h, _a );
 				currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();
 				currentOperator = null;
-				currentElement === _currentElement ? PANEL_ELEMENT_OPERATION_MANAGER.resize( _x, _y, _w, _h, _a ) : show( _currentElement );
+				currentElement === _currentElement ? PanelElementOperatorManager.resize( _x, _y, _w, _h, _a ) : PanelElementOperatorManager.show( _currentElement );
 			},
 			saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH ){
 				startX = startX !== undefined ? startX : currentX;
@@ -3213,64 +3255,15 @@ var Editor = gOS.registerApplication( function(){
 				startA = startA !== undefined ? startA : angle;
 				startFilpV = startFilpV !== undefined ? startFilpV : flipV;
 				startFilpH = startFilpH !== undefined ? startFilpH : flipH;
-				currentElement && HISTORY_CONTROL.saveState( PANEL_ELEMENT_OPERATION_MANAGER.restoreState,
+				currentElement && HISTORY_CONTROL.saveState( PanelElementOperatorManager.restoreState,
 					[ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH ],
 					[ currentElement, currentX, currentY, currentW, currentH, angle, flipV, flipH ]
 				);
-			},
-			busy: function(){
-				return currentOperator !== null;
-			},
-			hitTest: function( _mouseX, _mouseY, _panelElement ){
-				var _x, _y, _w, _h;
-				if( _panelElement === currentElement ){
-					var _consoleX = CONSOLE_CONTROLER.x;
-					_x = currentX +( _consoleX < 0 ? _consoleX : 0 ) - HIT_AREA;
-					_y = currentY - HIT_AREA;
-					var _consoleW = CONSOLE_CONTROLER.w;
-					_w = ( _consoleW < currentW ? currentW : _consoleW ) + HIT_AREA * 2;
-					var _consoleY = CONSOLE_CONTROLER.y;
-					_h = ( _consoleY < currentH ? currentH : _consoleY + CONSOLE_CONTROLER.h ) + HIT_AREA * 2;
-				} else {
-					_x = _panelElement.x - HIT_AREA;
-					_y = _panelElement.y - HIT_AREA;
-					_w = _panelElement.w + HIT_AREA * 2;
-					_h = _panelElement.h + HIT_AREA * 2;
-				};
-				return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;
-			},
-			mousedown: function( _currentElement, _mouseX, _mouseY ){
-				//show( _currentElement);
-				if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY ) === true ){
-					currentOperator = TAIL_OPERATOR;
-				} else
-				if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY ) === true ){
-					currentOperator = RESIZE_OPERATOR;
-				} else {
-					POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY );
-					currentOperator = POSITION_OPERATOR;
-				};
-			},
-			mousemove: function( _currentElement, _mouseX, _mouseY ){
-				show( _currentElement);
-				if( currentOperator !== null ){
-					currentOperator.onDrag( _mouseX, _mouseY );
-				} else
-				if( currentElement !== null ){
-					// CONSOLE_CONTROLER.mousemove( _mouseX - currentX, _mouseY - currentY );
-					if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX - currentX, _mouseY - currentY ) === false ){
-						RESIZE_OPERATOR.index( _mouseX, _mouseY );
-					};
-				};
-			},
-			mouseup: function( _currentElement, _mouseX, _mouseY ){
-				currentOperator !== null && currentOperator.onFinish();
-				currentOperator = null;
 			}
-		}
+		};
 	})();
 	/*
-	 *  // PANEL_ELEMENT_OPERATION_MANAGER
+	 *  // PanelElementOperatorManager
 	 */
 
 /* --------------------------------------------------------------------------------------------
@@ -3294,7 +3287,7 @@ var Editor = gOS.registerApplication( function(){
 			if( currentElement === null ) return;
 			if( PANEL_ELEMENT_CONTROL.replace( currentElement, false ) === false ) return;
 			CONSOLE_CONTROLER.update( currentElement );
-			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.resplace, [ currentElement, true ], [ currentElement, false ] );
+			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.replace, [ currentElement, true ], [ currentElement, false ] );
 			var _z = currentElement.z;
 			LAYER_BACK_BUTTON.visible( _z > 0 );
 			LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
@@ -3311,8 +3304,8 @@ var Editor = gOS.registerApplication( function(){
 		function del(){
 			if( currentElement === null ) return;
 			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ true, currentElement ], [ false, currentElement ], false ); // true
+			PanelElementOperatorManager.hide();
 			PANEL_ELEMENT_CONTROL.remove( currentElement );
-			PANEL_ELEMENT_OPERATION_MANAGER.hide();
 		};
 		function edit(){
 			if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT ) return;
@@ -3342,15 +3335,11 @@ var Editor = gOS.registerApplication( function(){
 				delete CONSOLE_CONTROLER.init;
 			},
 			open: function(){
-				// layerWrapper = app.createInteractContainer( elmConsoleWrapper );
-				
 				LAYER_BACK_BUTTON    = MENU_BAR_CONTROL.EDIT.createOption( 'layer back', 'ctrl + B', layerBack, false, true, false );
 				LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createOption( 'layer forward', 'ctrl + F', layerForward, false, false, false );
 				DELETE_BUTTON        = MENU_BAR_CONTROL.EDIT.createOption( 'delete', 'ctrl + D', del, false, true, true );
 				EDIT_BUTTON          = MENU_BAR_CONTROL.EDIT.createOption( 'Edit Text', 'ctrl + E', edit, false, true, false );
 				CHANGE_BUTTON        = MENU_BAR_CONTROL.EDIT.createOption( 'change', 'ctrl + U', change, false, false, true );
-				
-
 				// inputAspectRatio = $( '#comic-element-keep-aspect' );
 				
 				delete CONSOLE_CONTROLER.open;
@@ -3359,15 +3348,10 @@ var Editor = gOS.registerApplication( function(){
 				node.mesureChildren();
 				//node.mesure();
 			},
-			onMousemove : function( e ){
-				// 無理やりな実装になってしまうけど
-				return true;
-			},
 			show: function( _currentElement, w, h ){
 				if( node === null ){
-					node = eventRoot.createNode( elmContainer, false, false, 'comic-element-consol-container-hover' );
+					node = CONSOLE_CONTROLER.node = PanelElementOperatorManager.node.createNode( elmContainer, false, false, 'comic-element-consol-container-hover' );
 					node.addEventListener( 'mouseover', CONSOLE_CONTROLER.onMouseover, CONSOLE_CONTROLER );
-					node.addEventListener( 'mousemove', CONSOLE_CONTROLER.onMousemove, CONSOLE_CONTROLER );
 					ui            = app.createUIGroup( node );
 					inputX        = ui.createInputText( document.getElementById( 'comic-element-x' ), null );
 					inputY        = ui.createInputText( document.getElementById( 'comic-element-y' ), null );
@@ -3480,17 +3464,6 @@ var Editor = gOS.registerApplication( function(){
 				DELETE_BUTTON.visible( false );
 				EDIT_BUTTON.visible( false );
 				CHANGE_BUTTON.visible( false );
-			},
-			hitTest : function( x, y ){
-				if( visible === false ) return false;
-				x -= currentElement.x;
-				y -= currentElement.y;
-				if( pushout ){
-					return CONSOLE_CONTROLER.x <= x && x <= CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w &&
-						CONSOLE_CONTROLER.y <= y && y <= CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h;
-				};
-				return CONSOLE_CONTROLER.x <= x && x <= CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w &&
-					CONSOLE_CONTROLER.y <= y && y <= CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h;
 			}
 		};
 	})();
@@ -3503,6 +3476,7 @@ var Editor = gOS.registerApplication( function(){
 	AbstractPanelElement.prototype = {
 		$       : null,
 		data    : null,
+		node    : null,
 		x       : 0,
 		y       : 0,
 		w       : 0,
@@ -3513,23 +3487,12 @@ var Editor = gOS.registerApplication( function(){
 		actualH : 0,
 		flipV   : 0,
 		flipH   : 0,
-		hitTest : function( mouseX, mouseY ){
-			return PANEL_ELEMENT_OPERATION_MANAGER.hitTest( mouseX, mouseY, this );
-		},
 		shift : function( shiftX, shiftY ){
 			this.resize( this.x + shiftX, this.y + shiftY );
 		},
-		busy : function(){
-			return PANEL_ELEMENT_OPERATION_MANAGER.busy();
-		},
-		mousemove : function( mouseX, mouseY ){
-			PANEL_ELEMENT_OPERATION_MANAGER.mousemove( this, mouseX, mouseY );
-		},
-		mouseup : function( mouseX, mouseY ){
-			PANEL_ELEMENT_OPERATION_MANAGER.mouseup( this, mouseX, mouseY );
-		},
-		mousedown : function( mouseX, mouseY ){
-			PANEL_ELEMENT_OPERATION_MANAGER.mousedown( this, mouseX, mouseY );
+		mouseover : function( e ){
+			console.log( 'w:' + this.node.width() + ' h:' + this.node.height() + ' x:' + this.node.x() + ' y:' + this.node.y() )
+			PanelElementOperatorManager.show( this );
 		}
 	};
 
@@ -3549,6 +3512,13 @@ var Editor = gOS.registerApplication( function(){
 		this.flipH    = data.width  < 0 ? -1 : 1;
 		this.rPicture = data.resource_picture;
 		this.artistID = this.rPicture.artist_id || this.rPicture.artist.id || -1;
+		
+		var self = this;
+		function animeComplete(){
+			self.node.mesure();
+			self._flipReversibleImage();
+		};
+		this.animeComplete = animeComplete;
 	};
 	ImageElementClass.prototype = Util.extend(
 		new AbstractPanelElement( PANEL_ELEMENT_TYPE_IMAGE ),
@@ -3556,6 +3526,8 @@ var Editor = gOS.registerApplication( function(){
 			reversibleImage : null,
 			init : function(){
 				this._updateResourcePicture( this.rPicture );
+				this.node = PANEL_ELEMENT_CONTROL.node.createNode( this.$.get( 0 ), false, true );
+				this.node.addEventListener( 'mouseover', this.mouseover, this );				
 				this.resize( this.data.x, this.data.y, Math.abs( this.data.width ), Math.abs( this.data.height ) );
 				this.init = null;
 			},
@@ -3577,13 +3549,17 @@ var Editor = gOS.registerApplication( function(){
 				this.y = y = Type.isFinite( y ) === true ? y : this.y;
 				this.w = w = Type.isFinite( w ) === true ? w : this.w;
 				this.h = h = Type.isFinite( h ) === true ? h : this.h;
-				this.$[ animate === true ? 'animate' : 'css' ]( { 
-					left:	x,
-					top:	y,
-					width:	w,
-					height:	h
-				}, 250 /*,  flipReversibleImage */ );
-				/*animate !== true && */ this._flipReversibleImage();
+				if( animate === true ){
+					this.$.animate( { 
+						left:	x,
+						top:	y,
+						width:	w,
+						height:	h
+					}, 250 , this.animeComplete );					
+				} else {
+					this.node.update( x, y, w, h );
+					this._flipReversibleImage();
+				};
 			},
 			animate : function ( x, y, w, h, flipH, flipV ){
 				this.flipH = flipH !== undefined ? flipH : this.flipH;
@@ -3593,6 +3569,9 @@ var Editor = gOS.registerApplication( function(){
 			destroy : function(){
 				this.reversibleImage.destroy();
 				this.$.stop().remove();
+				this.node.remove();
+				
+				this.destroy = null;
 			},
 			_updateResourcePicture : function( _rPicture ){
 				this.rPicture = _rPicture;
@@ -3661,12 +3640,21 @@ var Editor = gOS.registerApplication( function(){
 		this.timing  = data.t || PANEL_ELEMENT_ARRAY.length + 1;
 		
 		this.$.find( 'img' ).eq( 0 ).replaceWith( this.balloon.elm );
+		
+		var self = this;
+		function animeComplete(){
+			self.node.mesure();
+			self._resizeBalloon();
+		};
+		this.animeComplete = animeComplete; 
 	};
 	TextElementClass.prototype = Util.extend(
 		new AbstractPanelElement( PANEL_ELEMENT_TYPE_TEXT ),
 		{
 			init : function(){
 				this._updateText();
+				this.node = PANEL_ELEMENT_CONTROL.node.createNode( this.$.get( 0 ), false, true );
+				this.node.addEventListener( 'mouseover', this.mouseover, this );				
 				this.resize( this.data.x, this.data.y, this.data.width, this.data.height, this.data.tail );
 				this.init = null;
 			},
@@ -3708,14 +3696,17 @@ var Editor = gOS.registerApplication( function(){
 				this.h = h = h !== undefined ? h : this.h;
 				this.a = a !== undefined ? a : this.a;
 				
-				this.$[ animate === true ? 'animate' : 'css']( {
-						left:		x,
-						top:		y,
-						width:		w,
-						height:		h
-					}, 250/*, resizeBalloon */
-				);		
-				/*animate !== true && */ this._resizeBalloon();
+				if( animate === true ){
+					this.$.animate( { 
+						left:	x,
+						top:	y,
+						width:	w,
+						height:	h
+					}, 250 , this.animeComplete );					
+				} else {
+					this.node.update( x, y, w, h );
+					this._resizeBalloon();
+				};
 			},
 			animate : function ( _x, _y, _w, _h, _a ){
 				this.resize( _x, _y, _w, _h, _a, true );
@@ -3723,6 +3714,7 @@ var Editor = gOS.registerApplication( function(){
 			destroy : function(){
 				this.$.stop().remove();
 				this.balloon.destroy();
+				this.node.remove();
 			}
 		}
 	);
@@ -3734,7 +3726,7 @@ var Editor = gOS.registerApplication( function(){
 	var PANEL_ELEMENT_CONTROL = ( function(){
 		var	elmContainer   = null,
 			currentElement = null,
-			nodeWorkarea   = null,
+			node           = null,
 			panelX, panelY, panelW, panelH,
 			startX, startY;
 	/*
@@ -3758,29 +3750,6 @@ var Editor = gOS.registerApplication( function(){
 	 * 1. remove
 	 * 2. renumber z
 	 */
-		function appendPanelElement( _panelElement ){
-			var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,
-				l = PANEL_ELEMENT_ARRAY.length,
-				_jqElm = _panelElement.$.stop().css( {
-					filter:		'',
-					opacity:	''
-				});
-			if( z < 0 ){
-				PANEL_ELEMENT_ARRAY.unshift( _panelElement );
-			} else {
-				for( var i = 0; i < l; ++i ){
-					if( PANEL_ELEMENT_ARRAY[ i ].z < z ) break;
-				};
-				if( i === l ){
-					PANEL_ELEMENT_ARRAY.push( _panelElement );
-				} else {
-					PANEL_ELEMENT_ARRAY.splice( i, 0, _panelElement );
-				};
-			};
-			renumber();
-			_jqElm.fadeIn();			
-		};
-
 		function onFadeOut(){
 			this.parentNode.removeChild( this );
 		};
@@ -3789,48 +3758,78 @@ var Editor = gOS.registerApplication( function(){
 		 * jqElmの並び替え。
 		 */
 		function renumber(){
-			var _panelElement, jqElm, jqNext;
-			for( var i = 0, l = PANEL_ELEMENT_ARRAY.length; i < l; ++i ){
-				_panelElement = PANEL_ELEMENT_ARRAY[ i ];
+			var _panelElement, jqElm, jqAfter,
+				i = PANEL_ELEMENT_ARRAY.length;
+			for( ; i; ){
+				_panelElement = PANEL_ELEMENT_ARRAY[ --i ];
 				jqElm = _panelElement.$;
-				i === 0 && elmContainer.appendChild( jqElm.get( 0 ) );
-				jqNext && jqNext.before( jqElm );
-				if( phase === 1 ) _panelElement.z = l - i - 1;
-				jqNext = jqElm;
+				!jqAfter && elmContainer.appendChild( jqElm.get( 0 ) );
+				jqAfter  && jqAfter.before( jqElm );
+				if( phase === 1 ){
+					_panelElement.z = i;
+					_panelElement.node.nodeIndex( i );
+				};
+				jqAfter = jqElm;
 			};
 		};
 		function onTextInput( _panelElement ){
-			appendPanelElement( _panelElement );
+			PANEL_ELEMENT_CONTROL.add( _panelElement );
+			_panelElement.animate( undefined, undefined, _panelElement.w, _panelElement.h );
 			HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement ], [ true, _panelElement ], true, PANEL_ELEMENT_CONTROL );
 		};
-	
+		
 		return {
 			id : 'PANEL_ELEMENT_CONTROL',
+			node : null,
 			init : function(){
-				elmContainer  = document.getElementById( 'comic-element-container' );
-				nodeWorkarea  = eventRoot.createNode( { x: 0, y:0, w:9999, h:9999 }, false, true );
-				nodeWorkarea.addEventListener( 'mousemove', PANEL_ELEMENT_CONTROL.mousemove, PANEL_ELEMENT_CONTROL );
-				nodeWorkarea.addEventListener( 'mousedown', PANEL_ELEMENT_CONTROL.mousedown, PANEL_ELEMENT_CONTROL );
-				nodeWorkarea.addEventListener( 'mouseup',   PANEL_ELEMENT_CONTROL.mouseup,   PANEL_ELEMENT_CONTROL );
-				//eventRoot.addEventListener( 'mousemove', PANEL_ELEMENT_CONTROL.mousemove, PANEL_ELEMENT_CONTROL );
-				//eventRoot.addEventListener( 'mousedown', PANEL_ELEMENT_CONTROL.mousedown, PANEL_ELEMENT_CONTROL );
-				//eventRoot.addEventListener( 'mouseup',   PANEL_ELEMENT_CONTROL.mouseup,   PANEL_ELEMENT_CONTROL );
+				elmContainer = document.getElementById( 'comic-element-container' );
+				node         = PANEL_ELEMENT_CONTROL.node = eventRoot.createNode( elmContainer, true, false );
+				node.nodeIndex( 0 );
 				delete PANEL_ELEMENT_CONTROL.init;
 			},
 			open : function(){
-
+				delete PANEL_ELEMENT_CONTROL.open;
 			},
 			close : function(){
 				var panelElm;
 				while( panelElm = PANEL_ELEMENT_ARRAY.shift() ){
-					panelElm.destroy();
+					panelElm.destroy && panelElm.destroy();
 				};
 			},
+			add : function( _panelElement ){
+				var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,
+					i = PANEL_ELEMENT_ARRAY.length,
+					_jqElm = _panelElement.$.stop().css( {
+						filter:		'',
+						opacity:	''
+					}),
+					j;
+				if( z < 0 ){
+					PANEL_ELEMENT_ARRAY.push( _panelElement );
+				} else {
+					for( ; i; ){
+						if( PANEL_ELEMENT_ARRAY[ --i ].z < z ){
+							j = i;
+							break;
+						};
+					};
+					if( j !== i ){
+						PANEL_ELEMENT_ARRAY.unshift( _panelElement );
+					} else {
+						PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
+					};
+				};
+				renumber();
+				_jqElm.fadeIn();
+				_panelElement.node.disabled( false );	
+			},
 			remove : function( _panelElement ){
-				var l = PANEL_ELEMENT_ARRAY.length;
-				for( var i=0; i<l; ++i ){
-					if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){
+				for( var i = PANEL_ELEMENT_ARRAY.length; i; ){
+					if( PANEL_ELEMENT_ARRAY[ --i ] === _panelElement ){
+						console.log( PANEL_ELEMENT_ARRAY.length );
 						PANEL_ELEMENT_ARRAY.splice( i, 1 );
+						_panelElement.node.disabled( true );
+						_panelElement.node.nodeIndex( PANEL_ELEMENT_ARRAY.length );
 						renumber();
 						_panelElement.$.stop().css( {
 							filter:		'',
@@ -3843,27 +3842,28 @@ var Editor = gOS.registerApplication( function(){
 			},
 			/* history */
 			restore : function( isAppend, panelElement ){
-				isAppend === true ? appendPanelElement( panelElement ) :  PANEL_ELEMENT_CONTROL.remove( panelElement );
+				PANEL_ELEMENT_CONTROL[ isAppend === true ? 'add' : 'remove' ]( panelElement );
 			},
 			replace: function( _panelElement, goForward ){
 				// PANEL_ELEMENT_ARRAYの再構築
 				var l = PANEL_ELEMENT_ARRAY.length,
-					i = -1;
-				for( var j = 0; j < l; ++j ){
-					if( PANEL_ELEMENT_ARRAY[ j ] === _panelElement ){
+					i,
+					j = l;
+				for( ; j; ){
+					if( PANEL_ELEMENT_ARRAY[ --j ] === _panelElement ){
 						i = j;
 						break;
 					};
 				};
-				if( i === -1) return false;
+				if( i !== j ) return false;
 				if( goForward === true ){
 					if( i === 0 ) return false;
 					PANEL_ELEMENT_ARRAY.splice( i, 1 );
-					PANEL_ELEMENT_ARRAY.splice( i - 1, 0, _panelElement );
+					PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
 				} else {
 					if( i === l - 1 ) return false;
 					PANEL_ELEMENT_ARRAY.splice( i, 1 );
-					PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
+					PANEL_ELEMENT_ARRAY.splice( i - 1, 0, _panelElement );
 				};
 				renumber( true );
 				return true;
@@ -3879,68 +3879,8 @@ var Editor = gOS.registerApplication( function(){
 						PANEL_ELEMENT_ARRAY[ --i ].shift( _shiftX, _shiftY );
 					};
 				};
-				elmContainer.style.cssText = [
-					'width:',  panelW = _panelW, 'px;',
-					'height:', panelH = _panelH, 'px;',
-					'left:',   panelX = _panelX, 'px;',
-					'top:',    panelY = _panelY, 'px'
-				].join( '' );
+				node.update( panelX = _panelX, panelY = _panelY, panelW = _panelW, panelH = _panelH );
 			},
-			mousemove : function( e ){
-				var l    = PANEL_ELEMENT_ARRAY.length,
-					mX   = e.layerX,
-					mY   = e.layerY,
-					_x   = mX - panelX,
-					_y   = mY - panelY,
-					_elm = currentElement,
-					i;
-				console.log( 'x:' + _x + ' y:' + _y )
-				// mouse が コンソールに乗ったらフォーカスを外す．
-				//if(  CONSOLE_CONTROLER.hitTest( _x, _y ) === true ) return false;
-				
-				if( _elm !== null ){
-					if( _elm.busy() === true ){
-						_elm.mousemove( _x, _y );
-						return true;
-					};
-					if( _elm.hitTest( _x, _y ) === true ){
-						_elm.mousemove( _x, _y ); // cursor
-						return false;
-					};
-				};
-				for( i = 0; i < l; ++i ){
-					_elm = PANEL_ELEMENT_ARRAY[ i ];
-					// hitTest
-					if( _elm.hitTest( _x, _y ) === true ){
-						_elm.mousemove( _x, _y ); // cursor
-						currentElement = _elm;
-						return false;
-					};
-				};
-				currentElement = null;							
-				PANEL_ELEMENT_OPERATION_MANAGER.hide();
-				return false;
-			},
-			mouseup: function( e ){
-				var x   = e.layerX,
-					y   = e.layerY,
-					ret = currentElement !== null && currentElement.busy() === true;
-				ret === true && currentElement.mouseup( x - startX || panelX, y - startY || panelY );
-				return ret;
-			},
-			mousedown: function( e ){
-				var x   = e.layerX,
-					y   = e.layerY;
-				if( currentElement === null ) return false;
-				startX = panelX;
-				startY = panelY;
-				currentElement.mousedown( x - startX, y - startY );
-				return true;
-			},
-			/*
-			busy: function(){
-				return currentElement !== null;
-			}, */
 			createImageElement: function( data ){
 				if( Type.isObject( data ) === false ){
 					PremiumSatge.boot( 1, PANEL_ELEMENT_CONTROL.onImageSelect );
@@ -3961,14 +3901,14 @@ var Editor = gOS.registerApplication( function(){
 						height:          1
 					});
 					_panelElement.init();
-					appendPanelElement( _panelElement );
+					PANEL_ELEMENT_CONTROL.add( _panelElement );
 					_panelElement.animate( undefined, undefined, Math.abs( data.width ), Math.abs( data.height ) );
 				} else {
 					_panelElement = new ImageElementClass( data );
 					_panelElement.init();
-					appendPanelElement( _panelElement );
+					PANEL_ELEMENT_CONTROL.add( _panelElement );
 				};
-				HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement], [ true, _panelElement ], true );
+				HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement ], [ true, _panelElement ], true );
 			},
 			createTextElement: function( data ){
 				var _panelElement;
@@ -4030,82 +3970,84 @@ var Editor = gOS.registerApplication( function(){
 			'</div>',
 			'<div id="window-container"></div>',
 			'<div id="comic-element-resizer-container">',
-				'<div id="balloon-tail-mover"></div>',
-				'<div id="comic-element-consol-wrapper">',
-					'<div id="comic-element-consol-container" class="clearfix">',
-						'<div class="comic-element-consol-item">',
-							'<div id="comic-element-x">',
-								'<span class="comic-element-attribute-label">x:</span>',
-								'<span id="comic-element-x-value" class="comic-element-attribute-value editable-value">0</span>',
+				'<div id="comic-element-resizer-container-inner">',
+					'<div id="comic-element-consol-wrapper">',
+						'<div id="comic-element-consol-container" class="clearfix">',
+							'<div class="comic-element-consol-item">',
+								'<div id="comic-element-x">',
+									'<span class="comic-element-attribute-label">x:</span>',
+									'<span id="comic-element-x-value" class="comic-element-attribute-value editable-value">0</span>',
+								'</div>',
+								'<div id="comic-element-y">',
+									'<span class="comic-element-attribute-label">y:</span>',
+									'<span id="comic-element-y-value" class="comic-element-attribute-value editable-value">0</span>',
+								'</div>',
 							'</div>',
-							'<div id="comic-element-y">',
-								'<span class="comic-element-attribute-label">y:</span>',
-								'<span id="comic-element-y-value" class="comic-element-attribute-value editable-value">0</span>',
+							'<div class="comic-element-consol-item">',						
+								'<div id="comic-element-z">',
+									'<span class="comic-element-attribute-label">z:</span>',
+									'<span id="comic-element-z-value" class="comic-element-attribute-value editable-value">0</span>',
+								'</div>',
+								'<div id="comic-element-a">',
+									'<span id="comic-element-a-value" class="comic-element-attribute-value editable-value">0</span>',
+									'<span class="comic-element-attribute-label">°</span>',
+								'</div>',
 							'</div>',
-						'</div>',
-						'<div class="comic-element-consol-item">',						
-							'<div id="comic-element-z">',
-								'<span class="comic-element-attribute-label">z:</span>',
-								'<span id="comic-element-z-value" class="comic-element-attribute-value editable-value">0</span>',
+							'<div class="comic-element-consol-item">',
+								'<div id="comic-element-w">',
+									'<span class="comic-element-attribute-label">w:</span>',
+									'<span id="comic-element-w-value" class="comic-element-attribute-value editable-value">0</span>',
+								'</div>',
+								'<div id="comic-element-h">',
+									'<span class="comic-element-attribute-label">h:</span>',
+									'<span id="comic-element-h-value" class="comic-element-attribute-value editable-value">0</span>',
+								'</div>',
 							'</div>',
-							'<div id="comic-element-a">',
-								'<span id="comic-element-a-value" class="comic-element-attribute-value editable-value">0</span>',
-								'<span class="comic-element-attribute-label">°</span>',
+							'<div class="comic-element-consol-item">',
+								'<!-- <div id="comic-element-keep-aspect"></div> -->',
+								'<div id="comic-element-w-percent">',
+									'<span id="comic-element-w-percent-value" class="comic-element-attribute-value editable-value">0</span>',
+									'<span class="comic-element-attribute-label">%</span>',
+								'</div>',
+								'<div class="comic-element-consol-item" id="comic-element-h-percent">',
+									'<span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>',
+									'<span class="comic-element-attribute-label">%</span>',
+								'</div>',
 							'</div>',
-						'</div>',
-						'<div class="comic-element-consol-item">',
-							'<div id="comic-element-w">',
-								'<span class="comic-element-attribute-label">w:</span>',
-								'<span id="comic-element-w-value" class="comic-element-attribute-value editable-value">0</span>',
+			                '<div class="comic-element-consol-item-small">',
+								'<div class="button" id="change-image-button">change</div>',
 							'</div>',
-							'<div id="comic-element-h">',
-								'<span class="comic-element-attribute-label">h:</span>',
-								'<span id="comic-element-h-value" class="comic-element-attribute-value editable-value">0</span>',
+							'<div class="comic-element-consol-item-small">',
+								'<div class="button" id="layer-back-button">back</div>',
 							'</div>',
-						'</div>',
-						'<div class="comic-element-consol-item">',
-							'<!-- <div id="comic-element-keep-aspect"></div> -->',
-							'<div id="comic-element-w-percent">',
-								'<span id="comic-element-w-percent-value" class="comic-element-attribute-value editable-value">0</span>',
-								'<span class="comic-element-attribute-label">%</span>',
+							'<div class="comic-element-consol-item-small">',
+								'<div class="button" id="delete-button">delete</div>',
 							'</div>',
-							'<div class="comic-element-consol-item" id="comic-element-h-percent">',
-								'<span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>',
-								'<span class="comic-element-attribute-label">%</span>',
+							'<div class="comic-element-consol-item-small">',
+								'<div class="button" id="layer-forward-button">forward</div>',
 							'</div>',
+							'<div class="comic-element-consol-item-small">',
+								'<div class="button" id="edit-text-button">edit</div>',
+							'</div>',
+							'<!-- <div class="comic-element-consol-item-small">',
+								'<div class="button" id="hide-text-tail-button">tail</div>',
+							'</div> -->',
 						'</div>',
-		                '<div class="comic-element-consol-item-small">',
-							'<div class="button" id="change-image-button">change</div>',
-						'</div>',
-						'<div class="comic-element-consol-item-small">',
-							'<div class="button" id="layer-back-button">back</div>',
-						'</div>',
-						'<div class="comic-element-consol-item-small">',
-							'<div class="button" id="delete-button">delete</div>',
-						'</div>',
-						'<div class="comic-element-consol-item-small">',
-							'<div class="button" id="layer-forward-button">forward</div>',
-						'</div>',
-						'<div class="comic-element-consol-item-small">',
-							'<div class="button" id="edit-text-button">edit</div>',
-						'</div>',
-						'<!-- <div class="comic-element-consol-item-small">',
-							'<div class="button" id="hide-text-tail-button">tail</div>',
-						'</div> -->',
+					'</div>',				
+					'<div class="comic-element-resizer" id="comic-element-resizer-top"></div>',
+					'<div class="comic-element-resizer" id="comic-element-resizer-left"></div>',
+					'<div class="comic-element-resizer" id="comic-element-resizer-right"></div>',
+					'<div class="comic-element-resizer" id="comic-element-resizer-bottom"></div>',
+					'<div class="comic-element-resizer" id="comic-element-resizer-top-left"></div>',
+					'<div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>',
+					'<div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>',
+					'<div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>',
+					'<div id="comic-element-consol-pushout-wrapper">',
+						'<div id="comic-element-consol-pushout-tail"></div>',
+						'<div id="comic-element-consol-pushout-inner"></div>',
 					'</div>',
-				'</div>',				
-				'<div class="comic-element-resizer" id="comic-element-resizer-top"></div>',
-				'<div class="comic-element-resizer" id="comic-element-resizer-left"></div>',
-				'<div class="comic-element-resizer" id="comic-element-resizer-right"></div>',
-				'<div class="comic-element-resizer" id="comic-element-resizer-bottom"></div>',
-				'<div class="comic-element-resizer" id="comic-element-resizer-top-left"></div>',
-				'<div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>',
-				'<div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>',
-				'<div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>',
-				'<div id="comic-element-consol-pushout-wrapper">',
-					'<div id="comic-element-consol-pushout-tail"></div>',
-					'<div id="comic-element-consol-pushout-inner"></div>',
-				'</div>',					
+					'<div id="balloon-tail-mover"></div>',
+				'</div>',	
 			'</div>',
 			'<div id="menu-bar"></div>',
 			
@@ -4187,7 +4129,7 @@ var Editor = gOS.registerApplication( function(){
 		SAVE_CONTROL.init();
 		GRID_CONTROL.init();
 		WHITE_GLASS_CONTROL.init();
-		PANEL_ELEMENT_OPERATION_MANAGER.init();
+		PanelElementOperatorManager.init();
 		
 		comicID      = -1;
 		panelID      = -1;
@@ -4228,7 +4170,7 @@ var Editor = gOS.registerApplication( function(){
 		
 		GRID_CONTROL.open();
 		PANEL_CONTROL.open( panelW, panelH, borderSize );
-		PANEL_ELEMENT_OPERATION_MANAGER.open();
+		PanelElementOperatorManager.open();
 		PANEL_ELEMENT_CONTROL.open();
 		
 		// last
@@ -4271,7 +4213,7 @@ var Editor = gOS.registerApplication( function(){
 		GRID_CONTROL.close();
 		PANEL_CONTROL.close();
 		
-		PANEL_ELEMENT_OPERATION_MANAGER.close();
+		PanelElementOperatorManager.close();
 		PANEL_ELEMENT_CONTROL.close();
 		
 		// last
diff --git a/0.5.x/javascripts/system.js b/0.5.x/javascripts/system.js
index 5a72c73..2c2f112 100644
--- a/0.5.x/javascripts/system.js
+++ b/0.5.x/javascripts/system.js
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.5.25
+ *   version 0.5.26
  *
  * gadgetOS
  *   author:
@@ -1285,7 +1285,7 @@ var PointingDeviceEventTree = ( function(){
 			ret, systemOnly = false, addClass, removeClass,
 			parent;
 		if( data && data.dispatchEvent( e, type, true ) === true ) return false;
-		
+		if( currentRootData === null ) return;
 		targetNodeData = currentRootData;
 		currentRootData._capcher( x, y );
 		targetNodeData.apiuser.updateCoursor( targetNodeData._cursor );
@@ -1768,12 +1768,13 @@ var PointingDeviceEventTree = ( function(){
 					};
 				};
 			};
-			if( t.through === true ) return !!t.hitChild;
-			hit = 0 <= x && x < t.w && 0 <= y && y < t.h;
-			if( hit === true ){
-				t.hitSelf === false && hoverList.push( t );
-				if( t.hitChild === null ) targetNodeData = t;
+			if( t.through === true ){
+				t.hitChild && t.hitSelf === false && hoverList.push( t );
+				return !!t.hitChild;
 			};
+			hit = 0 <= x && x < t.w && 0 <= y && y < t.h;
+			( t.hitChild || hit ) && t.hitSelf === false && hoverList.push( t );
+			if( hit === true && t.hitChild === null ) targetNodeData = t;
 			return hit || !!t.hitChild;
 		},
 		fire : function( e, eventType, hit ){
diff --git a/0.5.x/stylesheets/peta.apps.css b/0.5.x/stylesheets/peta.apps.css
index 254a9ca..7d995e3 100644
--- a/0.5.x/stylesheets/peta.apps.css
+++ b/0.5.x/stylesheets/peta.apps.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 /* pettanR peta.apps.css
- *   version 0.5.25
+ *   version 0.5.26
  * 
  *   author:
  *     itozyun
@@ -551,6 +551,11 @@
 	--------------------------------------------------------------------------------------*/		
 		#comic-element-resizer-container {
 			position:			absolute;
+		}
+		#comic-element-resizer-container-inner {
+			position:			absolute;
+			top:				9px;
+			left:				9px;
 			border:				1px solid #999;
 		}
 			.comic-element-resizer {
@@ -673,11 +678,11 @@
 			left:               0;
 		}
 			#comic-element-consol-container {
-				background:			transparent url( "../images/white_70pct.png" ) repeat 0 0;
+				background:			transparent url( "../images/black_50pct.png" ) repeat 0 0;
 				padding:            0.5em;
 			}
 			.comic-element-consol-container-hover {
-				background:			#fff !important;
+				background:			#000 !important;
 			}
 		
 		#comic-element-consol-pushout-wrapper {
@@ -756,7 +761,7 @@
 						display:			inline-block;
 						width:				14px;
 						line-height:		22px;
-						color:				#666;
+						color:				#fff;
 						text-align:			center;
 						cursor:				pointer;
 					}