OSDN Git Service

fixed around UI for PointingDeviceEventTree.
authoritozyun <itozyun@gmail.com>
Fri, 23 Nov 2012 13:58:24 +0000 (22:58 +0900)
committeritozyun <itozyun@gmail.com>
Fri, 23 Nov 2012 13:58:24 +0000 (22:58 +0900)
0.5.x/javascripts/peta.apps.js
0.5.x/javascripts/system.js
0.5.x/stylesheets/peta.apps.css
0.5.x/stylesheets/system.css

index 42aa5c6..86b4f89 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR peta.apps.js
- *   version 0.5.22
+ *   version 0.5.23
  *   
  * author:
  *   itozyun
@@ -688,6 +688,7 @@ var PremiumSatge = gOS.registerApplication( function(){
                itemW, itemH, buttonW,
                onUpdate        = null,
                onUpdateData    = null,
+               onUpdateContext = null,
                artistID        = -1;
 
        var ImageGroupIconClass = function( index, data ){
@@ -804,8 +805,8 @@ var PremiumSatge = gOS.registerApplication( function(){
                while( ICON_ARRAY.length > 0 ){
                        ICON_ARRAY.shift().destroy();
                }
-               onUpdate !== null && onUpdateData !== null && onUpdate( onUpdateData );
-               onUpdate = onUpdateData = null;
+               onUpdate !== null && onUpdateData !== null && onUpdate.call( onUpdateContext, onUpdateData );
+               onUpdate = onUpdateData = onUpdateContext = null;
                PremiumSatge.shutdown();
        }
        
@@ -826,7 +827,7 @@ var PremiumSatge = gOS.registerApplication( function(){
                        tree      = FileAPI.createTree( FILE_DATA_ARTIST_ROOT );
                        rootFile  = tree.getRootFile();
        };
-       this.onOpen = function( _windowW, _windowH, _ARTISTIDorFILE, _onUpdate ){
+       this.onOpen = function( _windowW, _windowH, _ARTISTIDorFILE, _onUpdate, opt_thisObj ){
                elmContainer  = document.getElementById( 'image-group-icon-container' );
                containerH    = Util.getElementSize( elmContainer ).height;
                
@@ -863,6 +864,7 @@ var PremiumSatge = gOS.registerApplication( function(){
                }
                
                onUpdate = _onUpdate || null;
+               onUpdateContext = opt_thisObj || null;
                onUpdateData = null;
                
                drawIcons();
@@ -927,7 +929,7 @@ var PremiumSatge = gOS.registerApplication( function(){
                if( tree === null ) return true;
                $( elmContainer ).stop().animate( {
                                height: 0,
-                               top:    Math.floor( winH /2 )
+                               top:    Math.floor( winH / 2 )
                        }, onFadeout );
                // onEnterInterval !== null && window.clearTimeout( onEnterInterval );
                // onEnterInterval = null;
@@ -995,7 +997,7 @@ var TextEditor = gOS.registerApplication( function(){
                onUpdate = _onUpdate || null;
                
                self.onPaneResize( _w, _h );
-               elmTextarea.value = _textElement.text()
+               elmTextarea.value = _textElement.content;
                elmTextarea.focus();
                
                /*
@@ -2210,91 +2212,17 @@ var Editor = gOS.registerApplication( function(){
  *  - window
  */                    
        var INFOMATION_WINDOW = ( function(){
-               var FADE_EFFECT_ENABLED = true, //UA.isIE === false || UA.ieVersion >= 8,
-                       FADE_IN_EFFECT      = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',
-                       FADE_OUT_EFFECT     = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',
-                       backgroundInfomationElm,
-                       jqPanelElementInformation,
-                       ui, inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
-                       inputPercentW, inputPercentH,
-                       currentPanelElement = null,
-                       currentElementType = -1;
+               var backgroundInfomationElm;
 
                return WINDOWS_CONTROL.createWindow(
                        {
                                onFirstOpen: function( _w, _h ){
                                        backgroundInfomationElm = $( '#panel-background-information');
-                                       
-                                       jqPanelElementInformation = $( '#comic-element-infomation').hide().css( {
-                                               height:         _h
-                                       });
-                                       ui               = app.createUIGroup();
-                                       inputX           = ui.createInputText( document.getElementById( 'comic-element-x' ), null );
-                                       inputY           = ui.createInputText( document.getElementById( 'comic-element-y' ), null );
-                                       inputZ           = ui.createInputText( document.getElementById( 'comic-element-z' ), null );
-                                       inputA           = ui.createInputText( document.getElementById( 'comic-element-a' ), null );
-                                       inputW           = ui.createInputText( document.getElementById( 'comic-element-w' ), null );
-                                       inputH           = ui.createInputText( document.getElementById( 'comic-element-h' ), null );
-                                       inputPercentW    = ui.createInputText( document.getElementById( 'comic-element-w-percent' ), null );
-                                       inputPercentH    = ui.createInputText( document.getElementById( 'comic-element-h-percent' ), null );
-                                       inputAspectRatio = $( '#comic-element-keep-aspect' );
                                },
                                onResize: function(  _w, _h ){
-                                       jqPanelElementInformation.css( {
-                                               height: _h
-                                       });
                                },
                                update: function( currentElement ){
-                                       var _elementType = currentElement === null ? -1 : currentElement.type,
-                                               x = currentElement !== null ? currentElement.x : 0,
-                                               y = currentElement !== null ? currentElement.y : 0,
-                                               z = currentElement !== null ? currentElement.z : 0,
-                                               a = _elementType === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle() ) : 0,
-                                               w = currentElement !== null ? currentElement.w : 0,
-                                               h = currentElement !== null ? currentElement.h : 0,
-                                               actualW    = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,
-                                               actualH    = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,
-                                               wPercent   = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100 ) : 0,
-                                               hPercent   = _elementType === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100 ) : 0,
-                                               keepAspect = currentElement !== null && currentElement.keepAspect === true;
-                                       
-                                       if( currentElementType !== _elementType ){
-                                               if( _elementType !== -1 ){
-                                                       if( _elementType === 1 ){
-                                                               inputA.visible( true );
-                                                               inputPercentW.visible( false );
-                                                               inputPercentH.visible( false );
-                                                               inputAspectRatio.hide();
-                                                       } else {
-                                                               inputA.visible( false );
-                                                               inputPercentW.visible( true );
-                                                               inputPercentH.visible( true );
-                                                               inputAspectRatio.show();
-                                                       };
-                                                       currentElementType === -1 && jqPanelElementInformation.stop().css( {
-                                                               filter:         '',
-                                                               opacity:        ''
-                                                       })[ FADE_IN_EFFECT ]();
-                                               } else {
-                                                       currentElementType !== -1 && jqPanelElementInformation.stop().css({
-                                                               filter:         '',
-                                                               opacity:        ''
-                                                       })[ FADE_OUT_EFFECT ]();
-                                               };
-                                               currentElementType = _elementType;
-                                       };
-                                       if( currentElementType !== -1){
-                                               inputX.value( x );
-                                               inputY.value( y );
-                                               inputZ.value( z );
-                                               _elementType === 1 && inputA.value( a );
-                                               inputW.value( w );
-                                               inputH.value( h );
-                                               _elementType === 0 && inputPercentW.value( wPercent );
-                                               _elementType === 0 && inputPercentH.value( hPercent );
-                                       } else {
-                                               
-                                       };
+
                                }
                        },
                        'infomation-window', 'Infomation', 0, 30, 200, 180, true
@@ -2719,13 +2647,13 @@ var Editor = gOS.registerApplication( function(){
                        mousemove: function( _mouseX, _mouseY ){
                                if( isDraggable === true && isDragging === true ){
                                        PANEL_CONTROL.resize( false, startX + _mouseX - offsetX, startY + _mouseY - offsetY );
-                               }
+                               };
                        },
                        mouseup: function( _mouseX, _mouseY ){
                                if( isDraggable === true ){
                                        isDragging = false;
                                        app.updateCoursor( '' );
-                               }
+                               };
                        },
                        mousedown: function( _mouseX, _mouseY ){
                                if( isDraggable === true ){
@@ -2736,188 +2664,12 @@ var Editor = gOS.registerApplication( function(){
                                        isDragging = true;
                                        app.updateCoursor( 'move' );
                                        return true;
-                               }
+                               };
                        },
                        busy: function(){
                                return isDragging === true;
                        }                               
-               }
-       })();
-
-
-/* --------------------------------------------------------------------------------------------
- * CONSOLE_CONTROLER
- */
-       var CONSOLE_CONTROLER = ( function(){
-               var LAYER_BACK_BUTTON, LAYER_FORWARD_BUTTON, DELETE_BUTTON, EDIT_BUTTON, CHANGE_BUTTON,
-                       elmConsoleWrapper, styleConsoleWrapper,
-                       layerWrapper,
-                       // elmConsoleParent,
-                       styleImgConsole, styleTextConsole,
-                       currentElement  = null,
-                       currentType     = -1,
-                       visible         = false,
-                       imgConsoleWidth, imgConsoleHeight,
-                       textConsoleWidth, textConsoleHeight,
-                       tailSize        = 10;
-                       
-               function layerBack(){
-                       if( currentElement === null ) return;
-                       if( PANEL_ELEMENT_CONTROL.replace( currentElement, false ) === false ) return;
-                       INFOMATION_WINDOW.update( currentElement );
-                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.resplace, [ currentElement, true ], [ currentElement, false ] );
-                       var _z = currentElement.z;
-                       LAYER_BACK_BUTTON.visible( _z > 0 );
-                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
-               };
-               function layerForward(){
-                       if( currentElement === null ) return;
-                       if( PANEL_ELEMENT_CONTROL.replace( currentElement, true ) === false ) return;
-                       INFOMATION_WINDOW.update( currentElement );
-                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.replace, [ currentElement, false ], [ currentElement, true ] );
-                       var _z = currentElement.z;
-                       LAYER_BACK_BUTTON.visible( _z > 0 );
-                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
-               };
-               function del(){
-                       if( currentElement === null ) return;
-                       // buttonBackOrForward( true );
-                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ true, currentElement ], [ false, currentElement ], false ); // true
-                       PANEL_ELEMENT_CONTROL.remove( currentElement );
-                       PANEL_ELEMENT_OPERATION_MANAGER.hide();
-               };
-               function edit(){
-                       if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT ) return;
-                       TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, currentElement );
-                       // buttonBackOrForward( true );
-               };
-               function change(){
-                       if( currentElement === null) return;
-                       // buttonBackOrForward( true );
-                       PremiumSatge.boot( currentElement.getArtistID(), currentElement.resourcePicture );
                };
-               function onImageSelect( resourcePicture ){
-                       currentElement.resourcePicture( resourcePicture );
-               };
-               return {
-                       x: 0,
-                       y: 0,
-                       w: 0,
-                       h: 0,
-                       init: function(){
-                               app.addKeyEventListener( 'keydown', layerBack, 66, false, true );
-                               app.addKeyEventListener( 'keydown', layerForward, 70, false, true );
-                               app.addKeyEventListener( 'keydown', del, 68, false, true );
-                               app.addKeyEventListener( 'keydown', edit, 69, false, true );
-                               app.addKeyEventListener( 'keydown', change, 85, false, true );
-                               
-                               var elmImgConsole  = document.getElementById( 'image-element-consol' ),
-                                       imgConsoleSize = Util.getElementSize( elmImgConsole );
-                               imgConsoleWidth    = imgConsoleSize.width;
-                               imgConsoleHeight   = imgConsoleSize.height;
-                               styleImgConsole    = elmImgConsole.style;
-                               
-                               var elmTextConsole  = document.getElementById( 'text-element-consol' ),
-                                       textConsoleSize = Util.getElementSize( elmTextConsole );
-                               textConsoleWidth    = textConsoleSize.width;
-                               textConsoleHeight   = textConsoleSize.height;
-                               styleTextConsole    = elmTextConsole.style;
-                               
-                               elmConsoleWrapper   = document.getElementById( 'comic-element-consol-wrapper' );
-                               styleConsoleWrapper = elmConsoleWrapper.style;
-                               // elmConsoleParent    = elmConsoleWrapper.parentNode;
-                               
-                               elmImgConsole.style.display = styleTextConsole.display = styleConsoleWrapper.display = 'none';
-                                                                               
-                               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 );
-                               
-                               delete CONSOLE_CONTROLER.open;
-                       },
-                       show: function( _currentElement, _w, _h ){
-                               if( visible === false ) styleConsoleWrapper.display = '';
-                               visible = true;
-                               currentElement   = _currentElement;
-                               var _currentType = _currentElement.type,
-                                       _z           = _currentElement.z,
-                                       imgEvent, txtEvent;
-                               if( currentType !== _currentType ){
-                                       currentType = _currentType;
-                                       styleImgConsole.display  = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? '' : 'none';
-                                       styleTextConsole.display = _currentType === PANEL_ELEMENT_TYPE_TEXT  ? '' : 'none';
-                                       CONSOLE_CONTROLER.w = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;
-                                       CONSOLE_CONTROLER.h = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;
-                                       
-                                       imgEvent = _currentType === PANEL_ELEMENT_TYPE_IMAGE ? 'addEventListener' : 'removeEventListener';
-                                       txtEvent = _currentType === PANEL_ELEMENT_TYPE_TEXT ?  'addEventListener' : 'removeEventListener';
-                                       
-                                       app[ imgEvent ]( document.getElementById( 'change-image-button' ),  'click', change );
-                                       app[ imgEvent ]( document.getElementById( 'layer-forward-button' ), 'click', layerForward );
-                                       app[ imgEvent ]( document.getElementById( 'layer-back-button' ),    'click', layerBack );
-                                       app[ imgEvent ]( document.getElementById( 'delete-image-button' ),  'click', del );                                     
-                                       
-                                       app[ txtEvent ]( document.getElementById( 'edit-text-button' ),     'click', edit );
-                                       app[ txtEvent ]( document.getElementById( 'forward-text-button' ),  'click', layerForward );
-                                       app[ txtEvent ]( document.getElementById( 'back-text-button' ),     'click', layerBack );
-                                       app[ txtEvent ]( document.getElementById( 'delete-text-button' ),   'click', del );
-                               };
-                               CONSOLE_CONTROLER.x = Math.floor( ( _w - CONSOLE_CONTROLER.w ) / 2 );
-                               
-                               LAYER_BACK_BUTTON.visible( _z > 0 );
-                               LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
-                               DELETE_BUTTON.visible( true );
-                               EDIT_BUTTON.visible( _currentType === PANEL_ELEMENT_TYPE_TEXT );
-                               CHANGE_BUTTON.visible( false );
-                               
-                               if( _w > CONSOLE_CONTROLER.w * 1.5 && _h > CONSOLE_CONTROLER.h * 1.5 ){
-                                       CONSOLE_CONTROLER.y = Math.floor( ( _h - CONSOLE_CONTROLER.h ) / 2 );
-                                       elmConsoleWrapper.className = '';
-                               } else {
-                                       CONSOLE_CONTROLER.y = _h + tailSize;
-                                       elmConsoleWrapper.className = 'console-out';
-                               };
-                               styleConsoleWrapper.left = CONSOLE_CONTROLER.x + 'px';
-                               styleConsoleWrapper.top  = CONSOLE_CONTROLER.y + 'px';
-                               
-                               // layerWrapper.mesure();
-                       },
-                       hide: function(){
-                               if( visible === true ) styleConsoleWrapper.display = 'none';
-                               visible = false;
-                               currentElement = null;
-                               LAYER_BACK_BUTTON.visible( false );
-                               LAYER_FORWARD_BUTTON.visible( false );
-                               DELETE_BUTTON.visible( false );
-                               EDIT_BUTTON.visible( false );
-                               CHANGE_BUTTON.visible( false );
-                       },
-                       hitTest : function( _mouseX, _mouseY ){
-                               if( currentElement === null ) return false;
-                               _mouseX -= currentElement.x;
-                               _mouseY -= currentElement.y;
-                               return visible === true &&
-                                       CONSOLE_CONTROLER.x <= _mouseX && _mouseX <= CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w &&
-                                       CONSOLE_CONTROLER.y <= _mouseY && _mouseY <= CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h; 
-                       },
-                       mousemove: function(){
-                               /*
-                               if( CONSOLE_CONTROLER.x > _mouseX || CONSOLE_CONTROLER.y > _mouseY || CONSOLE_CONTROLER.x + CONSOLE_CONTROLER.w < _mouseX || CONSOLE_CONTROLER.y + CONSOLE_CONTROLER.h < _mouseY ){
-                                       // buttonClickable === true && buttonBackOrForward( true );
-                                       return false;
-                               }
-                               // buttonClickable === false && buttonBackOrForward( false ); */
-                               // layerWrapper.mesure();
-                               return false;
-                       }
-               }
        })();
 
 /* --------------------------------------------------------------------------------------------
@@ -2962,7 +2714,7 @@ var Editor = gOS.registerApplication( function(){
                                 * visibilityのほうがいい, display:none だと ie で描画が狂う
                                 */
                                styleMover.visibility = '';
-                               TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.angle() );
+                               TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.a );
                                currentText = _currentText;
                        },
                        hitTest: function( _mouseX, _mouseY ){
@@ -2984,7 +2736,7 @@ var Editor = gOS.registerApplication( function(){
                                        w = _currentText.w;
                                        h = _currentText.h;
                                        currentText = _currentText;
-                                       startA = _currentText.angle();
+                                       startA      = _currentText.a;
                                        return true;
                                }
                                return false;
@@ -2997,16 +2749,16 @@ var Editor = gOS.registerApplication( function(){
                                                ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) :
                                                _mouseY > 0 ? 180 : 0
                                );
-                               currentText && currentText.angle( FLOOR( balloonA + 0.5 ));
-                               INFOMATION_WINDOW.update( currentText );
+                               currentText && currentText.angle( FLOOR( balloonA + 0.5 ) );
+                               CONSOLE_CONTROLER.update( currentText );
                        },
                        onFinish: function(){
-                               startA !== currentText.angle() && PANEL_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA );
-                               startA !== currentText.angle() && PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle() );
+                               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 );
                                currentText = null;
                        },
                        onCancel: function(){
-                               currentText.angle( startA);
+                               currentText.angle( startA );
                                PANEL_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA );
                                currentText = null;
                        }
@@ -3064,8 +2816,8 @@ var Editor = gOS.registerApplication( function(){
                        w = _w = _w !== undefined ? _w : w;
                        h = _h = _h !== undefined ? _h : h;
 
-                       elmResizerContainerStyle.left   = _x + 'px';
-                       elmResizerContainerStyle.top    = _y + 'px';
+                       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';
@@ -3100,14 +2852,14 @@ var Editor = gOS.registerApplication( function(){
                                        __h = _h;
                                        _h = FLOOR( _w / startAspect );
                                        _y = _y + ( currentIndex <= 5 ? __h - _h : 0);
-                               }
-                       }
+                               };
+                       };
                        draw( x = _x, y = _y, w = _w, h = _h );
                        currentElement.resize( _x, _y, _w, _h );
                        currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h );
                        CONSOLE_CONTROLER.show( currentElement, _w, _h );
-                       INFOMATION_WINDOW.update( currentElement);
-               }
+                       CONSOLE_CONTROLER.update( currentElement );
+               };
                
                function flip( _flipH, _flipV ){
                        var p = CURSOR_AND_FLIP[ currentIndex ];
@@ -3117,7 +2869,7 @@ var Editor = gOS.registerApplication( function(){
                        app.updateCoursor( CURSOR_AND_FLIP[ currentIndex ].cursor );
                        elmResizerContainer.className = 'current-resizer-is-' + currentIndex;
                        currentElement.flip( _flipH, _flipV );
-               }
+               };
                return {
                        init: function(){
                                elmResizerContainer      = document.getElementById( 'comic-element-resizer-container');
@@ -3140,16 +2892,16 @@ var Editor = gOS.registerApplication( function(){
                                                app.updateCoursor( CURSOR_AND_FLIP[ i].cursor );
                                                elmResizerContainer.className = 'current-resizer-is-' +i;
                                                return currentIndex = i;
-                                       }
-                               }
+                                       };
+                               };
                                for( i=0; i<4; i++ ){
                                        p = POSITION_ARRAY[ i ];
                                        if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){
                                                app.updateCoursor( CURSOR_AND_FLIP[ i].cursor);
                                                elmResizerContainer.className = 'current-resizer-is-' +i;
                                                return currentIndex = i;
-                                       }
-                               }
+                                       };
+                               };
                                app.updateCoursor( '' );
                                elmResizerContainer.className = '';
                                return -1;
@@ -3176,16 +2928,16 @@ var Editor = gOS.registerApplication( function(){
                                startW = baseW = _currentElement.w;
                                startH = baseH = _currentElement.h;
                                if( _currentElement.type === PANEL_ELEMENT_TYPE_IMAGE){
-                                       startFilpV = _currentElement.flipV();
-                                       startFilpH = _currentElement.flipH();                                                   
-                               }
+                                       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;
@@ -3207,8 +2959,8 @@ var Editor = gOS.registerApplication( function(){
                                                //alert( 'opera error' +error);
                                                this.onCancel();
                                                return;
-                                       }
-                               }
+                                       };
+                               };
                                
                                if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){
                                        
@@ -3239,7 +2991,7 @@ var Editor = gOS.registerApplication( function(){
                                                baseW = _w = _memoryX -_x;
                                                baseH = _h;
                                                flip( true, false);
-                                               flipV = currentElement.flipV();
+                                               flipV = currentElement.flipV;
                                        } else 
                                        if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){
                                        // flipV
@@ -3259,13 +3011,13 @@ var Editor = gOS.registerApplication( function(){
                                                baseW = _w = _memoryX -_x;
                                                baseH = _h = _memoryY -_y;
                                                flip( true, true);
-                                               flipV = currentElement.flipV();
-                                               flipH = currentElement.flipH();
-                                       }
+                                               flipV = currentElement.flipV;
+                                               flipH = currentElement.flipH;
+                                       };
                                        _updated = true;
                                        offsetX = _mouseX;
                                        offsetY = _mouseY;      
-                               }
+                               };
                                currentX = _x;
                                currentY = _y;
                                currentW = _w;
@@ -3296,7 +3048,7 @@ var Editor = gOS.registerApplication( function(){
                                PANEL_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH );
                                currentElement.type === PANEL_ELEMENT_TYPE_IMAGE ?
                                        currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :
-                                       currentElement.animate( startX, startY, startW, startH, angle);
+                                       currentElement.animate( startX, startY, startW, startH, angle );
                        },
                        onShiftUpdate: update,
                        onCtrlUpdate: update
@@ -3318,7 +3070,7 @@ var Editor = gOS.registerApplication( function(){
                        y = _y !== undefined ? _y : y;
                        RESIZE_OPERATOR.update( x, y );
                        currentElement.resize( x, y );
-                       INFOMATION_WINDOW.update( currentElement );
+                       CONSOLE_CONTROLER.update( currentElement );
                };
                return {
                        init: function(){
@@ -3357,7 +3109,7 @@ var Editor = gOS.registerApplication( function(){
                        },
                        onShiftUpdate: update,
                        onCtrlUpdate: update
-               }
+               };
        })();
 
 
@@ -3369,25 +3121,26 @@ var Editor = gOS.registerApplication( function(){
                        currentIsTextElement = false,
                        currentOperator      = null,
                        currentElement       = null,
+                       node                 = 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.angle() : 0
-                                       );
-                               };
+               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
+                               );
                        };
+               };
                        
                return {
                        init: function(){
@@ -3425,7 +3178,7 @@ var Editor = gOS.registerApplication( function(){
                                app.updateCoursor( '' );
                                TAIL_OPERATOR.hide();
                                CONSOLE_CONTROLER.hide();
-                               INFOMATION_WINDOW.update( null );
+                               //CONSOLE_CONTROLER.update( null );
                        },
                        resize: function( _x, _y, _w, _h, _angle ){
                                currentX = _x = _x !== undefined ? _x : currentX;
@@ -3437,7 +3190,7 @@ var Editor = gOS.registerApplication( function(){
                                RESIZE_OPERATOR.update( _x, _y, _w, _h );
                                currentIsTextElement === true && TAIL_OPERATOR.update( _w, _h, angle );
                                CONSOLE_CONTROLER.show( currentElement, _w, _h );
-                               INFOMATION_WINDOW.update( currentElement );
+                               //CONSOLE_CONTROLER.update( currentElement );
                        },
                        /* history */
                        restoreState: function( _currentElement, _x, _y, _w, _h, _a, _flipV, _flipH ){
@@ -3459,8 +3212,8 @@ var Editor = gOS.registerApplication( function(){
                                startFilpV = startFilpV !== undefined ? startFilpV : flipV;
                                startFilpH = startFilpH !== undefined ? startFilpH : flipH;
                                currentElement && HISTORY_CONTROL.saveState( PANEL_ELEMENT_OPERATION_MANAGER.restoreState,
-                                       [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],
-                                       [ currentElement, currentX, currentY, currentW, currentH, angle, flipV, flipH]
+                                       [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH ],
+                                       [ currentElement, currentX, currentY, currentW, currentH, angle, flipV, flipH ]
                                );
                        },
                        busy: function(){
@@ -3479,34 +3232,34 @@ var Editor = gOS.registerApplication( function(){
                                } else {
                                        _x = _panelElement.x - HIT_AREA;
                                        _y = _panelElement.y - HIT_AREA;
-                                       _w = _panelElement.w + HIT_AREA *2;
-                                       _h = _panelElement.h + HIT_AREA *2;
-                               }
+                                       _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){
+                               if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY ) === true ){
                                        currentOperator = TAIL_OPERATOR;
                                } else
-                               if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){
+                               if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY ) === true ){
                                        currentOperator = RESIZE_OPERATOR;
                                } else {
-                                       POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)
+                                       POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY );
                                        currentOperator = POSITION_OPERATOR;
-                               }
+                               };
                        },
                        mousemove: function( _currentElement, _mouseX, _mouseY ){
                                show( _currentElement);
-                               if( currentOperator !== null){
+                               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);
-                                       }
-                               }
+                               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();
@@ -3518,25 +3271,258 @@ var Editor = gOS.registerApplication( function(){
         *  // PANEL_ELEMENT_OPERATION_MANAGER
         */
 
+/* --------------------------------------------------------------------------------------------
+ * CONSOLE_CONTROLER
+ */
+       var CONSOLE_CONTROLER = ( function(){
+               var LAYER_BACK_BUTTON, LAYER_FORWARD_BUTTON, DELETE_BUTTON, EDIT_BUTTON, CHANGE_BUTTON,
+                       PUSH_OUT_RATIO  = 0.5,
+                       tailSize        = 10,
+                       elmRoot, elmContainer, elmPushout, elmTail,
+                       pushoutW        = 0,
+                       pushoutH        = 0,
+                       pushout         = false,
+                       currentType     = -1,
+                       visible         = false,
+                       node            = null,
+                       ui, inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,
+                       buttonBack, buttonForward, buttonDel, buttonEdit, butonChange;
+                       
+               function layerBack(){
+                       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 ] );
+                       var _z = currentElement.z;
+                       LAYER_BACK_BUTTON.visible( _z > 0 );
+                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
+               };
+               function layerForward(){
+                       if( currentElement === null ) return;
+                       if( PANEL_ELEMENT_CONTROL.replace( currentElement, true ) === false ) return;
+                       CONSOLE_CONTROLER.update( currentElement );
+                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.replace, [ currentElement, false ], [ currentElement, true ] );
+                       var _z = currentElement.z;
+                       LAYER_BACK_BUTTON.visible( _z > 0 );
+                       LAYER_FORWARD_BUTTON.visible( _z < PANEL_ELEMENT_ARRAY.length - 1 );
+               };
+               function del(){
+                       if( currentElement === null ) return;
+                       HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ true, currentElement ], [ false, currentElement ], false ); // true
+                       PANEL_ELEMENT_CONTROL.remove( currentElement );
+                       PANEL_ELEMENT_OPERATION_MANAGER.hide();
+               };
+               function edit(){
+                       if( currentElement === null || currentElement.type !== PANEL_ELEMENT_TYPE_TEXT ) return;
+                       TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, currentElement );
+               };
+               function change(){
+                       if( currentElement === null ) return;
+                       PremiumSatge.boot( currentElement.artistID, currentElement.resourcePicture, currentElement );
+               };
+
+               return {
+                       x: 0,
+                       y: 0,
+                       w: 0,
+                       h: 0,
+                       init: function(){
+                               app.addKeyEventListener( 'keydown', layerBack, 66, false, true );
+                               app.addKeyEventListener( 'keydown', layerForward, 70, false, true );
+                               app.addKeyEventListener( 'keydown', del, 68, false, true );
+                               app.addKeyEventListener( 'keydown', edit, 69, false, true );
+                               app.addKeyEventListener( 'keydown', change, 85, false, true );
+                               
+                               elmContainer = document.getElementById( 'comic-element-consol-container' );
+                               elmRoot      = elmContainer.parentNode;
+                               elmPushout   = document.getElementById( 'comic-element-consol-pushout-wrapper' );
+                               elmTail      = document.getElementById( 'comic-element-consol-pushout-tail' );
+                               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;
+                       },
+                       onMouseover : function( e ){
+                               node.mesureChildren();
+                               //node.mesure();
+                       },
+                       show: function( _currentElement, w, h ){
+                               if( node === null ){
+                                       node = PANEL_CONTROL.node.createNode( elmContainer, false, false, 'comic-element-consol-container-hover' );
+                                       node.addEventListener( 'mouseover', CONSOLE_CONTROLER.onMouseover, CONSOLE_CONTROLER );
+                                       ui            = app.createUIGroup( node );
+                                       inputX        = ui.createInputText( document.getElementById( 'comic-element-x' ), null );
+                                       inputY        = ui.createInputText( document.getElementById( 'comic-element-y' ), null );
+                                       inputZ        = ui.createInputText( document.getElementById( 'comic-element-z' ), null );
+                                       inputA        = ui.createInputText( document.getElementById( 'comic-element-a' ), null );
+                                       inputW        = ui.createInputText( document.getElementById( 'comic-element-w' ), null );
+                                       inputH        = ui.createInputText( document.getElementById( 'comic-element-h' ), null );
+                                       inputPercentW = ui.createInputText( document.getElementById( 'comic-element-w-percent' ), null );
+                                       inputPercentH = ui.createInputText( document.getElementById( 'comic-element-h-percent' ), null );
+                                       butonChange   = ui.createButton( document.getElementById( 'change-image-button' ), change ),
+                                       buttonBack    = ui.createButton( document.getElementById( 'layer-back-button' ), layerBack ),
+                                       buttonDel     = ui.createButton( document.getElementById( 'delete-button' ), del ),
+                                       buttonForward = ui.createButton( document.getElementById( 'layer-forward-button' ), layerForward ),
+                                       buttonEdit    = ui.createButton( document.getElementById( 'edit-text-button' ), edit );
+                               };
+                               
+                               currentElement = _currentElement;
+                               
+                               var type = currentElement.type,
+                                       z    = currentElement.z;
+                               
+                               LAYER_BACK_BUTTON.visible( z > 0 );
+                               buttonBack.enabled( z > 0 );
+                               LAYER_FORWARD_BUTTON.visible( z < PANEL_ELEMENT_ARRAY.length - 1 );
+                               buttonForward.enabled( z < PANEL_ELEMENT_ARRAY.length - 1 )
+                               DELETE_BUTTON.visible( true );
+                               EDIT_BUTTON.visible( type === PANEL_ELEMENT_TYPE_TEXT );
+                               CHANGE_BUTTON.visible( false );
+                               
+                               //CONSOLE_CONTROLER.x = Math.floor( ( _w - CONSOLE_CONTROLER.w ) / 2 );
+                               CONSOLE_CONTROLER.w = w;
+                               CONSOLE_CONTROLER.h = elmContainer.offsetHeight;
+                               CONSOLE_CONTROLER.y = h - CONSOLE_CONTROLER.h;
+                               
+                               if( h * PUSH_OUT_RATIO < CONSOLE_CONTROLER.h ){
+                                       if( pushout === false ){
+                                               pushout = true;
+                                               elmPushout.appendChild( elmContainer );
+                                               elmPushout.style.display = 'block';
+                                               pushoutW = elmPushout.offsetWidth;
+                                               pushoutH = elmPushout.offsetHeight;
+                                               elmTail.style.top = ( pushoutH / 2 - tailSize / 2 ) + 'px';
+                                       };
+                                       elmPushout.style.left = ( - pushoutW - tailSize ) + 'px';
+                                       elmPushout.style.top  = ( h / 2 - pushoutH / 2 ) + 'px';
+                                       elmPushout.className  = 'satellite-left';
+                               } else
+                               if( pushout === true ){
+                                       pushout = false;
+                                       elmRoot.insertBefore( elmContainer, elmRoot.firstChild );
+                                       elmPushout.style.cssText = '';
+                               };
+                               
+                               CONSOLE_CONTROLER.update( currentElement );
+                               ui.visible( true );
+                               node.mesure();
+                       },
+                       update : function( _currentElement ){
+                               if( _currentElement === null ){
+                                       visible = false;
+                                       return;
+                               };
+                               currentElement = _currentElement;
+                               var type = currentElement.type,
+                                       x    = currentElement.x,
+                                       y    = currentElement.y,
+                                       z    = currentElement.z,
+                                       a    = type === PANEL_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.a ) : 0,
+                                       w    = currentElement.w,
+                                       h    = currentElement.h,
+                                       actualW    = type === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualW : 1,
+                                       actualH    = type === PANEL_ELEMENT_TYPE_IMAGE ? currentElement.actualH : 1,
+                                       wPercent   = type === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW * 100 ) : 0,
+                                       hPercent   = type === PANEL_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH * 100 ) : 0,
+                                       keepAspect = currentElement.keepAspect;
+                                       
+                               if( currentType !== type ){
+                                       if( type === PANEL_ELEMENT_TYPE_TEXT ){
+                                               inputA.visible( true );
+                                               inputPercentW.visible( false );
+                                               inputPercentH.visible( false );
+                                               buttonEdit.enabled( true );
+                                               //inputAspectRatio.hide();
+                                       } else {
+                                               inputA.visible( false );
+                                               inputPercentW.visible( true );
+                                               inputPercentH.visible( true );
+                                               buttonEdit.enabled( false );
+                                               //inputAspectRatio.show();
+                                       };
+                                       currentType = type;
+                               };
+
+                               inputX.value( x );
+                               inputY.value( y );
+                               inputZ.value( z );
+                               type === 1 && inputA.value( a );
+                               inputW.value( w );
+                               inputH.value( h );
+                               type === 0 && inputPercentW.value( wPercent );
+                               type === 0 && inputPercentH.value( hPercent );
+                       },
+                       hide: function(){
+                               // if( visible === true ) styleConsoleWrapper.display = 'none';
+                               ui && ui.visible( false );
+                               visible = false;
+                               currentElement = null;
+                               LAYER_BACK_BUTTON.visible( false );
+                               LAYER_FORWARD_BUTTON.visible( false );
+                               DELETE_BUTTON.visible( false );
+                               EDIT_BUTTON.visible( false );
+                               CHANGE_BUTTON.visible( false );
+                       },
+                       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;
+                       }
+               };
+       })();
+
+
+
        var AbstractPanelElement = function( COMIC_ELM_TYPE ){
                this.type = COMIC_ELM_TYPE;
-               this.hitTest = function( _mouseX, _mouseY ){
-                       return PANEL_ELEMENT_OPERATION_MANAGER.hitTest( _mouseX, _mouseY, this );
-               }
-               this.shift = function( _shiftX, _shiftY ){
-                       this.resize( this.x + _shiftX, this.y + _shiftY);
-               }
-               this.busy = function(){
+       };
+       AbstractPanelElement.prototype = {
+               $       : null,
+               data    : null,
+               x       : 0,
+               y       : 0,
+               w       : 0,
+               h       : 0,
+               z       : 0,
+               timing  : 0,
+               actualW : 0,
+               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();
-               }
-               this.mousemove = function( _mouseX, _mouseY ){
-                       PANEL_ELEMENT_OPERATION_MANAGER.mousemove( this, _mouseX, _mouseY );
-               }
-               this.mouseup = function( _mouseX, _mouseY ){
-                       PANEL_ELEMENT_OPERATION_MANAGER.mouseup( this, _mouseX, _mouseY );
-               }
-               this.mousedown = function( _mouseX, _mouseY ){
-                       PANEL_ELEMENT_OPERATION_MANAGER.mousedown( this, _mouseX, _mouseY );
+               },
+               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 );
                }
        };
 
@@ -3547,98 +3533,85 @@ var Editor = gOS.registerApplication( function(){
        var ImageElementClass = function( data ){
                jqImageElementOrigin = jqImageElementOrigin || $( app.fetchHTMLElement( 'imgElementTemplete' ) );
                
-               var jqWrap          = jqImageElementOrigin.clone( true ),
-                       flipH           = data.width  < 0 ? -1 : 1,
-                       flipV           = data.height < 0 ? -1 : 1,
-                       resourcePicture = data.resource_picture,
-                       actualW         = data.resource_picture.width,
-                       actualH         = data.resource_picture.height,
-                       reversibleImage = null,
-                       self            = this,
-                       x, y, z, w, h;
-               function flipReversibleImage(){
-                       reversibleImage && reversibleImage.resize( flipH * w, flipV * h );
-               };
-               /* history */
-               function updateResourcePicture( _resourcePicture ){
-                       resourcePicture = _resourcePicture;
-                       
-                       actualW = _resourcePicture.width;
-                       actualH = _resourcePicture.height;
-                       
-                       var _reversibleImage = pettanr.image.createReversibleImage( 
-                                       [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),
-                                       flipH * w, flipV * h
-                               );
-                       if( reversibleImage !== null ){
-                               jqWrap.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );
-                               reversibleImage.destroy();
-                       } else {
-                               jqWrap.append( _reversibleImage.elm );
-                       }
-                       reversibleImage = _reversibleImage;
-               };
-               /* global methods */
-               this.$ = jqWrap;
-               //this.x = x;
-               //this.y = y;
-               //this.w = w;
-               //this.h = h;
-               this.z = data.z;
-               this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
+               this.$        = jqImageElementOrigin.clone( true );
+               this.data     = data;
+               this.z        = data.z;
+               this.timing   = data.t || PANEL_ELEMENT_ARRAY.length + 1;
                this.keepSize = false;
-               this.init = function(){
-                       updateResourcePicture( data.resource_picture );
-                       self.resize( data.x, data.y, Math.abs( data.width ), Math.abs( data.height ) );
-                       delete self.init;
-               };
-               this.flip = function( _updateH, _updateV ){
-                       if( _updateH !== true && _updateV !== true ) return;
-                       flipH = _updateH === true ? -flipH : flipH;
-                       flipV = _updateV === true ? -flipV : flipV;
-                       reversibleImage.resize( flipH * w, flipV * h );
-               };
-               this.flipV = function(){ return flipV;}
-               this.flipH = function(){ return flipH;}
-               this.resourcePicture = function( _resourcePicture ){
-                       if( _resourcePicture && _resourcePicture !== resourcePicture ){
-                               HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );
-                               updateResourcePicture( _resourcePicture );
-                       };
-                       return resourcePicture;
-               };
-               this.getArtistID = function(){
-                       return resourcePicture.artist_id || resourcePicture.artist.id || -1;
-               };
-               this.actualW = function(){ return actualW;}
-               this.actualH = function(){ return actualH;}
-               this.resize = function( _x, _y, _w, _h, animate ){
-                       self.x = x = Type.isFinite( _x ) === true ? _x : x;
-                       self.y = y = Type.isFinite( _y ) === true ? _y : y;
-                       self.w = w = Type.isFinite( _w ) === true ? _w : w;
-                       self.h = h = Type.isFinite( _h ) === true ? _h : h;
-                       jqWrap[ animate === true ? 'animate' : 'css' ]( { 
-                               left:   x,
-                               top:    y,
-                               width:  w,
-                               height: h
-                       }, 250,  flipReversibleImage );
-                       animate !== true && flipReversibleImage();
-               };
-               this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){
-                       flipH = _flipH !== undefined ? _flipH : flipH;
-                       flipV = _flipV !== undefined ? _flipV : flipV;
-                       self.resize( _x, _y, _w, _h, true );
-               };
-               this.destroy = function(){
-                       delete self.destroy;
-                       
-                       reversibleImage.destroy();
-                       jqWrap.stop().remove();
-                       jqWrap = reversibleImage = resourcePicture = data = self = null;
-               };
+               this.flipV    = data.height < 0 ? -1 : 1;
+               this.flipH    = data.width  < 0 ? -1 : 1;
+               this.rPicture = data.resource_picture;
+               this.artistID = this.rPicture.artist_id || this.rPicture.artist.id || -1;
+               this.reversibleImage = null;
        };
-       ImageElementClass.prototype = new AbstractPanelElement( PANEL_ELEMENT_TYPE_IMAGE );
+       ImageElementClass.prototype = Util.extend(
+               new AbstractPanelElement( PANEL_ELEMENT_TYPE_IMAGE ),
+               {
+                       init : function(){
+                               this._updateResourcePicture( this.rPicture );
+                               this.resize( this.data.x, this.data.y, Math.abs( this.data.width ), Math.abs( this.data.height ) );
+                               this.init = null;
+                       },
+                       flip : function( updateH, updateV ){
+                               if( updateH !== true && updateV !== true ) return;
+                               this.flipH = updateH === true ? -this.flipH : this.flipH;
+                               this.flipV = updateV === true ? -this.flipV : this.flipV;
+                               this.reversibleImage.resize( this.flipH * this.w, this.flipV * this.h );
+                       },
+                       resourcePicture : function( _rPicture ){
+                               if( _rPicture && _rPicture !== this.rPicture ){
+                                       HISTORY_CONTROL.saveState( this._updateResourcePicture, this.rPicture, _rPicture, this );
+                                       this._updateResourcePicture( _rPicture );
+                               };
+                               return this.rPicture;
+                       },
+                       resize : function( x, y, w, h, animate ){
+                               this.x = x = Type.isFinite( x ) === true ? x : this.x;
+                               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();
+                       },
+                       animate : function ( x, y, w, h, flipH, flipV ){
+                               this.flipH = flipH !== undefined ? flipH : this.flipH;
+                               this.flipV = flipV !== undefined ? flipV : this.flipV;
+                               this.resize( x, y, w, h, true );
+                       },
+                       destroy : function(){
+                               this.reversibleImage.destroy();
+                               this.$.stop().remove();
+                       },
+                       _updateResourcePicture : function( _rPicture ){
+                               this.rPicture = _rPicture;
+                               
+                               this.actualW = _rPicture.width;
+                               this.actualH = _rPicture.height;
+                               
+                               var _reversibleImage = pettanr.image.createReversibleImage( 
+                                               [ pettanr.CONST.RESOURCE_PICTURE_PATH, _rPicture.id, '.', _rPicture.ext ].join(''),
+                                               this.flipH * this.w, this.flipV * this.h
+                                       );
+                               if( this.reversibleImage !== null ){
+                                       this.$.children( this.reversibleImage.elm ).replaceWith( _reversibleImage.elm );
+                                       this.reversibleImage.destroy();
+                               } else {
+                                       this.$.append( _reversibleImage.elm );
+                               };
+                               this.reversibleImage = _reversibleImage;
+                       },
+                       _flipReversibleImage : function(){
+                               this.reversibleImage && this.reversibleImage.resize( this.flipH * this.w, this.flipV * this.h );
+                       }
+               }
+       );
+
+       
 /*
  * / ImageElementClass
  * --------------------------------------------------------------------------------------------
@@ -3665,95 +3638,87 @@ var Editor = gOS.registerApplication( function(){
                        return UA.isIE === true && UA.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;
                })();
                
-               var JQ_WRAPPER = jqTextElementOrigin.clone( true ),
-                       elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ),
-                       type     = data.balloon_template_id,
-                       text     = ( function(){
-                               var _speachs = data.speeches_attributes;
-                               for( var k in _speachs ){
-                                       return _speachs[ k ].content || '';
-                               }
-                               return '';
-                       })(),
-                       balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, type ),
-                       x, y, w, h, a,
-                       self = this;
-               
-               JQ_WRAPPER.find( 'img' ).eq( 0 ).replaceWith( balloon.elm );
-               
-               function updateType( _type ){
-                       if( type !== _type ){
-                               type = _type || type;
-                               balloon.type( type );
-                       };
-               };
-               function updateAngle( _a ){
-                       if( _a !== undefined && a !== _a ){
-                               a = _a !== undefined ? _a : a;
-                               balloon.angle( a );
-                       };
-               };
-               /* history */
-               function updateText( _text ){
-                       text = _text || text || '';
-                       elmText.firstChild.data = text;
-               };
-               function resizeBalloon(){
-                       balloon && balloon.resize( a, w, h );
-               };
+               this.$       = jqTextElementOrigin.clone( true );
+               this.data    = data;
+               this.elmText = this.$.find( 'td,.speach-inner' ).get( 0 );
+               this.type    = data.balloon_template_id;
+               this.content = ( function(){
+                       var _speachs = data.speeches_attributes;
+                       for( var k in _speachs ){
+                               return _speachs[ k ].content || '';
+                       }
+                       return '';
+               })();
+               this.balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail, this.type );
+               this.z       = data.z;
+               this.timing  = data.t || PANEL_ELEMENT_ARRAY.length + 1;
                
-               /* global methods */
-               this.$ = JQ_WRAPPER;
-               //this.x = x;
-               //this.y = y;
-               //this.w = w;
-               //this.h = h;
-               this.z = data.z;
-               this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;
-               this.init = function(){
-                       updateText();
-                       self.resize( data.x, data.y, data.width, data.height, data.tail );
-                       delete self.init;
-               };
-               this.angle = function( _a ){
-                       _a !== undefined && self.resize( x, y, w, h, _a );
-                       return a;
-               };
-               this.text = function( _text ){
-                       if( _text && text !== _text) {
-                               HISTORY_CONTROL.saveState( updateText, text || '', _text );
-                               updateText( _text );
+               this.$.find( 'img' ).eq( 0 ).replaceWith( this.balloon.elm );
+       };
+       TextElementClass.prototype = Util.extend(
+               new AbstractPanelElement( PANEL_ELEMENT_TYPE_TEXT ),
+               {
+                       init : function(){
+                               this._updateText();
+                               this.resize( this.data.x, this.data.y, this.data.width, this.data.height, this.data.tail );
+                               this.init = null;
+                       },
+                       _updateType : function( _type ){
+                               if( this.type !== _type ){
+                                       this.type = _type || this.type;
+                                       this.balloon.type( this.type );
+                               };
+                       },
+                       _updateAngle : function( _a ){
+                               if( _a !== undefined && a !== _a ){
+                                       this.a = _a !== undefined ? _a : this.a;
+                                       this.balloon.angle( this.a );
+                               };
+                       },
+                       /* history */
+                       _updateText : function( _text ){
+                               this.content = _text || this.content || '';
+                               this.elmText.firstChild.data = this.content;
+                       },
+                       _resizeBalloon : function(){
+                               this.balloon && this.balloon.resize( this.a, this.w, this.h );
+                       },
+                       angle : function( _a ){
+                               _a !== undefined && this.resize( this.x, this.y, this.w, this.h, _a );
+                               return this.a;
+                       },
+                       text : function( _text ){
+                               if( _text && this.content !== _text ){
+                                       HISTORY_CONTROL.saveState( this._updateText, this.content || '', _text, this );
+                                       this._updateText( _text );
+                               };
+                               return this.content;
+                       },
+                       resize : function( x, y, w, h, a, animate ){
+                               this.x = x = x !== undefined ? x : this.x;
+                               this.y = y = y !== undefined ? y : this.y;
+                               this.w = w = w !== undefined ? w : this.w;
+                               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();
+                       },
+                       animate : function ( _x, _y, _w, _h, _a ){
+                               this.resize( _x, _y, _w, _h, _a, true );
+                       },
+                       destroy : function(){
+                               this.$.stop().remove();
+                               this.balloon.destroy();
                        }
-                       return text;
-               };
-               this.resize = function( _x, _y, _w, _h, _a, animate ){
-                       self.x = x = _x !== undefined ? _x : x;
-                       self.y = y = _y !== undefined ? _y : y;
-                       self.w = w = _w !== undefined ? _w : w;
-                       self.h = h = _h !== undefined ? _h : h;
-                       a = _a !== undefined ? _a : a;
-                       
-                       JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {
-                                       left:           x,
-                                       top:            y,
-                                       width:          w,
-                                       height:         h
-                               }, 250, resizeBalloon
-                       );              
-                       animate !== true && resizeBalloon();
-               };
-               this.animate = function ( _x, _y, _w, _h, _a ){
-                       self.resize( _x, _y, _w, _h, _a, true );
-               };
-               this.destroy = function(){
-                       delete self.destroy;
-                       
-                       JQ_WRAPPER.stop().remove();
-                       balloon.destroy();
-                       JQ_WRAPPER = elmText = data = balloon = self = null;
-               };
-       }
-       TextElementClass.prototype = new AbstractPanelElement( PANEL_ELEMENT_TYPE_TEXT );
+               }
+       );
 
 /* --------------------------------------------------------------------------------------------
  * PANEL_ELEMENT_CONTROL
@@ -3786,7 +3751,7 @@ var Editor = gOS.registerApplication( function(){
         * 1. remove
         * 2. renumber z
         */
-               function appendPanelElement( _panelElement ) {
+               function appendPanelElement( _panelElement ){
                        var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,
                                l = PANEL_ELEMENT_ARRAY.length,
                                _jqElm = _panelElement.$.stop().css( {
@@ -3850,10 +3815,9 @@ var Editor = gOS.registerApplication( function(){
                        },
                        close: function(){
                                var _comicElm;
-                               while( PANEL_ELEMENT_ARRAY.length > 0 ){
-                                       _comicElm = PANEL_ELEMENT_ARRAY.shift();
-                                       _comicElm.destroy && _comicElm.destroy();
-                               }
+                               while( _comicElm = PANEL_ELEMENT_ARRAY.shift() ){
+                                       _comicElm.destroy();
+                               };
                        },
                        remove: function( _panelElement ){
                                var l = PANEL_ELEMENT_ARRAY.length;
@@ -3883,7 +3847,7 @@ var Editor = gOS.registerApplication( function(){
                                                i = j;
                                                break;
                                        };
-                               }
+                               };
                                if( i === -1) return false;
                                if( goForward === true ){
                                        if( i === 0 ) return false;
@@ -3893,7 +3857,7 @@ var Editor = gOS.registerApplication( function(){
                                        if( i === l - 1 ) return false;
                                        PANEL_ELEMENT_ARRAY.splice( i, 1 );
                                        PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );
-                               }
+                               };
                                renumber( true );
                                return true;
                        },
@@ -3934,7 +3898,7 @@ var Editor = gOS.registerApplication( function(){
                                        };
                                        if( _elm.hitTest( _x, _y ) === true ){
                                                _elm.mousemove( _x, _y ); // cursor
-                                               return true;
+                                               return false;
                                        };
                                };
                                for( i = 0; i < l; ++i ){
@@ -3943,7 +3907,7 @@ var Editor = gOS.registerApplication( function(){
                                        if( _elm.hitTest( _x, _y ) === true ){
                                                _elm.mousemove( _x, _y ); // cursor
                                                currentElement = _elm;
-                                               return true;
+                                               return false;
                                        };
                                };
                                currentElement = null;                                                  
@@ -3975,7 +3939,7 @@ var Editor = gOS.registerApplication( function(){
                                        PremiumSatge.boot( 1, PANEL_ELEMENT_CONTROL.onImageSelect );
                                } else {
                                        PANEL_ELEMENT_CONTROL.onImageSelect( data, true );
-                               }
+                               };
                        },
                        onImageSelect: function( data, isPanelPictureData ){
                                var _panelElement;
@@ -3996,7 +3960,7 @@ var Editor = gOS.registerApplication( function(){
                                        _panelElement = new ImageElementClass( data );
                                        _panelElement.init();
                                        appendPanelElement( _panelElement );
-                               }
+                               };
                                HISTORY_CONTROL.saveState( PANEL_ELEMENT_CONTROL.restore, [ false, _panelElement], [ true, _panelElement ], true );
                        },
                        createTextElement: function( data ){
@@ -4017,7 +3981,7 @@ var Editor = gOS.registerApplication( function(){
                                                                content:    'Hello'
                                                        }
                                                }
-                                       }
+                                       };
                                        _panelElement = new TextElementClass( data );
                                        _panelElement.init();
                                        TextEditor.boot( PANEL_CONTROL.x, PANEL_CONTROL.y, _panelElement, onTextInput );
@@ -4025,7 +3989,7 @@ var Editor = gOS.registerApplication( function(){
                                        _panelElement = new TextElementClass( data );
                                        _panelElement.init();
                                        onTextInput( _panelElement );
-                               }
+                               };
                        }
                };
        })();
@@ -4056,42 +4020,90 @@ var Editor = gOS.registerApplication( function(){
                        '<div id="panel-tools-container">',
                                '<div id="panel-resizer-top">▲</div>',
                                '<div id="panel-resizer-bottom">▼</div>',
-                               '<div id="comic-element-resizer-container">',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-top"></div>',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-left"></div>',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-right"></div>',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-bottom"></div>',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-top-left"></div>',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>',
-                                       '<div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>',
-                                       '<div id="balloon-tail-mover"></div>',
-                                       '<div id="comic-element-consol-wrapper">',
-                                               '<div id="comic-element-consol-tail"></div>',
-                                               '<div id="comic-element-consol-wrapper-when-out">',
-                                                       '<div id="image-element-consol">',
-                                                               '<div id="change-image-button"></div>',
-                                                               '<div id="layer-back-button"></div>',
-                                                               '<div id="delete-image-button"></div>',
-                                                               '<div id="layer-forward-button"></div>',
+                       '</div>',
+                       '<div id="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>',
+                                                       '<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 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 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 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 id="text-element-consol">',
-                                                               '<div id="edit-text-button"></div>',
-                                                               '<div id="change-text-style-button"></div>',
-                                                               '<div id="back-text-button"></div>',
-                                                               '<div id="delete-text-button"></div>',
-                                                               '<div id="hide-text-tail-button"></div>',
-                                                               '<div id="forward-text-button"></div>',
+                                                       '<div 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 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>',
+                               '</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>',                                       
                        '</div>',
-                       '<div id="window-container"></div>',
                        '<div id="menu-bar"></div>',
                        
                        '<div id="templete-container" style="display: none;">',
                        
+                       
                                '<div id="imgElementTemplete" class="comic-element-wrapper image-element"></div>',
                                
                                '<div id="textElementTemplete" class="comic-element-wrapper text-element">',
@@ -4136,42 +4148,6 @@ var Editor = gOS.registerApplication( function(){
                                                '<div id="bg-pattern-repeat-x"></div>',
                                                '<div id="bg-pattern-repeat-y"></div> -->',
                                        '</div>',
-                                       
-                                       '<div id="comic-element-infomation">',
-                                               '<div id="comic-element-x">',
-                                                       '<span class="comic-element-attribute-label">x:</span>',
-                                                       '<span id="comic-element-x-value" class="comic-element-attribute-value editable-value">0</span>',
-                                               '</div>',
-                                               '<div id="comic-element-y">',
-                                                       '<span class="comic-element-attribute-label">y:</span>',
-                                                       '<span id="comic-element-y-value" class="comic-element-attribute-value editable-value">0</span>',
-                                               '</div>',
-                                               '<div id="comic-element-z">',
-                                                       '<span class="comic-element-attribute-label">z:</span>',
-                                                       '<span id="comic-element-z-value" class="comic-element-attribute-value editable-value">0</span>',
-                                               '</div>',
-                                               '<div id="comic-element-a">',
-                                                       '<span id="comic-element-a-value" class="comic-element-attribute-value editable-value">0</span>',
-                                                       '<span class="comic-element-attribute-label">°</span>',
-                                               '</div>',
-                                               '<div id="comic-element-w">',
-                                                       '<span class="comic-element-attribute-label">w:</span>',
-                                                       '<span id="comic-element-w-value" class="comic-element-attribute-value editable-value">0</span>',
-                                               '</div>',
-                                               '<div id="comic-element-h">',
-                                                       '<span class="comic-element-attribute-label">h:</span>',
-                                                       '<span id="comic-element-h-value" class="comic-element-attribute-value editable-value">0</span>',
-                                               '</div>',
-                                               '<div id="comic-element-w-percent">',
-                                                       '<span id="comic-element-w-percent-value" class="comic-element-attribute-value editable-value">0</span>',
-                                                       '<span class="comic-element-attribute-label">%</span>',
-                                               '</div>',
-                                               '<div id="comic-element-h-percent">',
-                                                       '<span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>',
-                                                       '<span class="comic-element-attribute-label">%</span>',
-                                               '</div>',
-                               '<div id="comic-element-keep-aspect"></div>',
-                                       '</div>',
                                '</div>',
                                
                                '<div id="toolbox-window">',
@@ -4781,7 +4757,7 @@ var Model = ( function(){
                                        isXHTML !== true ? '>' : ' \/>'
                                ].join( '');                            
                        } else {
-                               url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.angle() );
+                               url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.a );
                                return [
                                        '<img ',
                                                'src="',        isAbsoluteUrl !== true ? url : Util.getAbsolutePath( url ), '" ',
@@ -4800,7 +4776,7 @@ var Model = ( function(){
                                                'width:',       _panelElement.w, 'px;',
                                                'height:',      _panelElement.h, 'px;',
                                                'z-index:',     _panelElement.z,
-                                       '"><span>', _panelElement.text(), '<\/span>', '<\/div>'
+                                       '"><span>', _panelElement.content, '<\/span>', '<\/div>'
                                                
                                ].join( '');                            
                        };
@@ -4816,8 +4792,8 @@ var Model = ( function(){
                                        '"x": ',                   _imageElement.x, ',', cr,
                                        '"y": ',                   _imageElement.y, ',', cr,
                                        '"z": ',                   _imageElement.z, ',', cr,
-                                       '"width": ',               _imageElement.flipH() * _imageElement.w, ',', cr,
-                                       '"height": ',              _imageElement.flipV() * _imageElement.h, ',', cr,
+                                       '"width": ',               _imageElement.flipH * _imageElement.w, ',', cr,
+                                       '"height": ',              _imageElement.flipV * _imageElement.h, ',', cr,
                                        '"t": ',                   timing, cr,
                                '}'
                        ].join( '');
@@ -4831,8 +4807,8 @@ var Model = ( function(){
                                        '"y": ',          _imageElement.y, ',', cr,
                                        '"z": ',          _imageElement.z + 1, ',', cr,
                                        '"t": ',          _timing, ',', cr,
-                                       '"width": ',      _imageElement.flipH() * _imageElement.w, ',', cr,
-                                       '"height": ',     _imageElement.flipV() * _imageElement.h, cr,
+                                       '"width": ',      _imageElement.flipH * _imageElement.w, ',', cr,
+                                       '"height": ',     _imageElement.flipV * _imageElement.h, cr,
                                '}'
                        ].join( '');
                };
@@ -4844,7 +4820,7 @@ var Model = ( function(){
                                        '"balloon_template_id": ', 1, ',', cr,
                                        '"system_picture_id": ',   1, ',', cr,
                                        '"size": ',                1, ',', cr,
-                                       '"tail": ',                _textElement.angle(), ',', cr,
+                                       '"tail": ',                _textElement.a, ',', cr,
                                        '"x": ',                   _textElement.x, ',', cr,
                                        '"y": ',                   _textElement.y, ',', cr,
                                        '"z": ',                   _textElement.z + 1, ',', cr,
@@ -4853,7 +4829,7 @@ var Model = ( function(){
                                        '"height": ',              _textElement.h, ',', cr,
                                        '"speeches_attributes": {', cr,
                                                '"newf', timing, '": {', cr,
-                                               '"content": "', _textElement.text(), '",', cr,
+                                               '"content": "', _textElement.content, '",', cr,
                                                        '"x": ',        _textElement.x, ',', cr,
                                                        '"y": ',        _textElement.y, ',', cr,
                                                        '"t": ',        timing, ',', cr,
index 30acc7a..bd202d2 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.5.22
+ *   version 0.5.23
  *
  * gadgetOS
  *   author:
@@ -1185,9 +1185,9 @@ AbstractApplication.prototype = {
                var list = ApplicationPrivateData.list;
                list.splice( Util.getIndex( list, data ), 1 );
        },
-       createUIGroup : function(){
+       createUIGroup : function( node ){
                var data = ApplicationPrivateData.get( this ),
-                       ui = UI.createUIGroup( this );
+                       ui = UI.createUIGroup( this, node );
                if( data.uiList === null ) data.uiList = [];
                data.uiList.push( ui );
                return ui;
@@ -1367,6 +1367,9 @@ var PointingDeviceEventTree = ( function(){
                mesure : function(){
                        NodePrivateData.get( this ).mesure();
                },
+               mesureChildren : function(){
+                       NodePrivateData.get( this ).mesureChildren();
+               },
                update : function( x, y, w, h ){
                        NodePrivateData.get( this ).update( x, y, w, h );
                },
@@ -1474,7 +1477,7 @@ var PointingDeviceEventTree = ( function(){
                        this.node        = node;
                        this.through     = through;
                        this.clip        = !!clip;
-                       this._cursor     = cursor;   
+                       if( cursor ) this._cursor = cursor;   
 
                        if( Type.isHTMLElement( rangeOrElm ) === true ){
                                this.elm        = rangeOrElm;
@@ -1490,7 +1493,7 @@ var PointingDeviceEventTree = ( function(){
                        NodePrivateData.dataList.push( this );
                },
                mesure : function(){
-                       var x, y, w, h, _this, _parent;
+                       var x, y, w, h, parent, _this, _parent;
                        if( this.elm ){
                                w = this.elm.offsetWidth;
                                h = this.elm.offsetHeight;
@@ -1504,12 +1507,22 @@ var PointingDeviceEventTree = ( function(){
                                        this.w = w;
                                        this.h = h;
                                        console.log( ' ---- mesure' + this.elm.id + ' x:' + this.x + ' y:' + this.y + ' w:' + w + ' h:' + h )
+                                       parent = this.parentData;
+                                       parent && this._updateAbsoluteXY( parent.absoluteX, parent.absoluteY, parent.scrollingX, parent.scrollingY );
                                        this._updateRectangle();
                                };                      
                        } else {
                                this._updateRectangle();
                        };
                },
+               mesureChildren : function(){
+                       var nodes, i;
+                       if( nodes = this.childData ){
+                               for( i = nodes.length; i; ){
+                                       nodes[ --i ].mesure();
+                               };
+                       };
+               },
                update : function( x, y, w, h ){
                        var updateXY = false,
                                _this, _parent,
@@ -3786,16 +3799,6 @@ var UI = ( function(){
 
        var CLASSNAME_COMBOBOX_OPTION = 'combobox-option',
                CLASSNAME_COMBOBOX_OPTION_CURRENT = CLASSNAME_COMBOBOX_OPTION + ' combobox-option-current',
-               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;
-               })(),
                ELM_COMBOBOX = ( function(){
                        var ret       = document.createElement( 'a' ),
                                elmToggle = document.createElement( 'span' ),
@@ -3810,212 +3813,309 @@ var UI = ( function(){
                        elmValue.appendChild( document.createTextNode( 'null' ));
                        return ret;
                })();
+       
+       var UIItemPrivateData = function(){};
+       UIItemPrivateData.prototype = {
+               groupData   : null,
+               item        : null,
+               elm         : null,
+               node        : null,
+               focus       : false,
+               visible     : true,
+               enabled     : true,
+               value       : null,
+               onUpdate    : null,
+               validator   : null,
+               elmValue    : null,
+               elmBox      : null,
+               elmA        : null,
+               elmToggle   : null,
+               elmValue    : null,
+               selectIndex : 0,
+               optionList  : null,
+               init    : function( groupData, item, elm, value, onUpdate, validator, focus, visible, enabled ){
+                       this.groupData = groupData;
+                       this.item      = item;
+                       this.elm       = elm;
+                       this.value     = value;
+                       this.onUpdate  = onUpdate;
+                       this.validator = validator;                     
+                       this.focus     = !!focus;
+                       this.visible   = !!visible;
+                       this.enabled   = !!enabled;
+                       UIItemPrivateData.list.push( this );
+               },
+               destroy : function(){
+                       var list = UIItemPrivateData.list;
+                       list.splice( Util.getIndex( list, this ), 1 );
+                       
+                       this.node && this.node.remove();
+               }
+       };
+       UIItemPrivateData.list = [];
+       UIItemPrivateData.get = function( item ){
+               var list = UIItemPrivateData.list;
+               for( i = list.length; i; ){
+                       if( list[ --i ].item === item ) return list[ i ];
+               };
+               return null;
+       };
+       
+/* --------------------------------
+ * TextInputManager
+ */
+       var TextInputManager = ( function(){
+               var elmInput = ( function(){
+                       var ret  = document.createElement( 'input' );
+                       ret.type = 'text';
+                       ret.id   = 'ui-textinput';
+                       return ret;
+               })();
                
-       var InputTextClass = function( apiuser, uiGroup, elmWrapper, elmValue, onUpdate, validater ){
-               var elmA     = ELM_A_ORIGIN.cloneNode( true ),
-                       instance = this,
-                       focus    = false,
-                       visible  = true,
-                       enabled  = true,
-                       value    = elmValue.innerHTML;
-               elmValue.innerHTML = '';
-               elmValue.className += ' editable-text';
-               elmValue.appendChild( elmA );
-               
-               this.value = function( _value ){
-                       if( Type.isString( _value ) === true || Type.isNumber( _value ) === true ){
-                               value = '' + _value;
-                               elmA.innerHTML = '' + _value;
-                               if( focus === true ){
-                                       ELM_INPUT_TEXT.value = '' + value;
-                               };
-                       };
-                       focus === true && instance.blur();
-                       return value;
+               return {
+                       show: function( data ){
+                               // this.groupData.node.addEventListener( 'mouseout' );
+                               var p = Position.cumulativeOffset( data.elmValue ),
+                                       w = data.elmValue.offsetWidth - 2,
+                                       _w;
+                               elmInput.style.cssText = [
+                                       'left:',   p[ 0 ], 'px;',
+                                       'top:',    p[ 1 ], 'px;',//,
+                                       'width:',  w, 'px;'//,
+                                       //'height:', data.elmValue.offsetHeight, 'px;',
+                                       //'position:absolute;'
+                               ].join( '' );
+                               elmInput.value = data.value;
+                               body.appendChild( elmInput );
+                               _w = elmInput.offsetWidth;
+                               if( w !== _w ) elmInput.style.width = ( w - ( _w - w ) ) + 'px;';
+                               
+                               elmInput.focus();
+                               elmInput.select();
+                       },
+                       hide : function( data ){
+                               body.removeChild( elmInput );
+                               var ret = elmInput.value;
+                               elmInput.value = '';
+                               return ret;
+                       },
+                       update : function( data ){
+                               elmInput.value = data.value;
+                       }
                };
-               this.focus = function( e ){
-                       focus = true;
-                       start( apiuser, uiGroup, instance );
-                       elmA.style.display = 'none';
-                       
-                       elmValue.appendChild( ELM_INPUT_TEXT );
-                       ELM_INPUT_TEXT.value = value;
-                       ELM_INPUT_TEXT.focus();
-                       ELM_INPUT_TEXT.select();
-
+       })();
+       
+       var InputTextClass = function( groupData, elmWrapper, elmValue, onUpdate, validater ){
+               var data = new UIItemPrivateData();
+               data.init( groupData, this, elmWrapper, elmValue.innerHTML, onUpdate, validater, false, true, true );
+               Util.addClass( elmValue, 'editable-text' );
+               data.elmValue = elmValue;
+               this.value( data.value );
+               data.node = groupData.node.createNode( elmWrapper, false, true, 'ui-inpittext-hover', 'pointer' );
+               data.node.addEventListener( 'click', this.focus, this );
+               //MouseEvent.add( groupData.apiuser, elmWrapper, 'click', instance.focus );
+       };
+       InputTextClass.prototype = {
+               value : function( value ){
+                       var data = UIItemPrivateData.get( this );
+                       if( Type.isString( value ) === true || Type.isNumber( value ) === true ){
+                               data.elmValue.innerHTML = data.value = '' + value;
+                               data.focus === true && TextInputManager.update( data );
+                       };
+                       data.focus === true && this.blur();
+                       return data.value;
+               },
+               focus : function( e ){
+                       var data = UIItemPrivateData.get( this );
+                       data.focus = true;
+                       start( data );
+                       TextInputManager.show( data );
                        return false;
-               };
-               this.blur = function( keep ){
-                       var _newValue = ELM_INPUT_TEXT.value,
-                               _validated = Type.isFunction( validater ) === true ? '' + validater( _newValue ) : _newValue;
-                       _newValue = keep !== 27 ? _validated : value; // 27:ESC
+               },
+               blur : function( keep ){
+                       var data = UIItemPrivateData.get( this ),
+                               newValue;
+                       if( data.focus === false ) return;
+                       newValue  = TextInputManager.hide( data );
+                       newValue = keep !== 27 ? ( data.validater ? '' + data.validater( newValue ) : newValue ) : value; // 27:ESC
 
-                       elmValue.removeChild( ELM_INPUT_TEXT );
-                       
-                       elmA.innerHTML     = _newValue;
-                       elmA.style.display = 'block';
+                       data.elmValue.innerHTML = newValue;
                        
-                       onUpdate && _newValue !== value && AsyncCall.add( apiuser, onUpdate, [ _newValue, value ], instance );
+                       data.onUpdate && newValue !== data.value && AsyncCall.add( data.groupData.apiuser, data.onUpdate, [ newValue, data.value ], this );
                        
-                       value = _newValue;
-                       focus = false;
-                       finish( apiuser, uiGroup, instance );
-               };
-               this.enabled = function(){
-                       return enabled;
-               };
-               this.visible = function( _visible ){
+                       data.value = newValue;
+                       data.focus = false;
+                       finish( data );
+               },
+               enabled : function(){
+                       var data = UIItemPrivateData.get( this );
+                       return data.enabled;
+               },
+               visible : function( _visible ){
+                       var data = UIItemPrivateData.get( this );
                        if( Type.isBoolean( _visible ) === true ){
-                               elmWrapper.style.display = _visible ? '' : 'none';
-                               visible = _visible;
-                       }
-                       return visible;
-               };
-               this.destroy = function(){
-                       if( focus === true ){
-                               elmValue.removeChild( ELM_INPUT_TEXT );
-                       }
-                       MouseEvent.remove( apiuser, elmWrapper );
-                       
-                       apiuser = uiGroup = elmWrapper = elmValue = elmA = onUpdate = validater = instance = null;
-               };
-               instance.value( value );
-               MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
+                               data.elm.style.display = _visible ? '' : 'none';
+                               data.visible = _visible;
+                       };
+                       return data.visible;
+               },
+               destroy : function(){
+                       var data = UIItemPrivateData.get( this );
+                       if( data.focus === true ){
+                               data.elmValue.removeChild( ELM_INPUT_TEXT );
+                       };
+                       data.destroy();
+               }
        };
        
-       var ButtonClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){
-               var instance  = this,
-                       focus     = false,
-                       visible   = true,
-                       enabled   = true;
-               MouseEvent.add( apiuser, elmWrapper, 'click', onClick );
-               
-               function onClick(){
-                       focus = true;
-                       // onUpdate();
-                       AsyncCall.add( apiuser, onUpdate, null, instance );
-                       return false;
-               };
-               this.focus = function(){
-                       focus = true;
-                       Util.addClass( elmWrapper, 'button-has-focus' );
-                       start( apiuser, uiGroup, instance );
-               };
-               this.blur = function( keyCode ){
-                       keyCode === 13 && onClick();
-                       Util.removeClass( elmWrapper, 'button-has-focus' );
-                       focus = false;
-                       finish( apiuser, uiGroup, instance );
-               };
-               this.enabled = function( _enabled ){
-                       if( Type.isBoolean( _enabled ) === true && enabled !== _enabled ){
-                               _enabled === true ? Util.removeClass( elmWrapper, 'button-disabled' ) : Util.addClass( elmWrapper, 'button-disabled' );
-                               enabled = _enabled;
+       var ButtonClass = function( groupData, elmWrapper, onUpdate ){
+               var data = new UIItemPrivateData();
+               data.init( groupData, this, elmWrapper, null, onUpdate, null, false, true, true );
+               data.node = groupData.node.createNode( elmWrapper, false, true, 'ui-inpittext-hover', 'pointer' );
+               data.node.addEventListener( 'click', onUpdate );
+               //MouseEvent.add( groupData.apiuser, elmWrapper, 'click', onUpdate );
+       };
+       ButtonClass.prototype = {
+               focus : function(){
+                       var data = UIItemPrivateData.get( this );
+                       data.focus = true;
+                       Util.addClass( data.elm, 'button-has-focus' );
+                       start( data );
+               },
+               blur : function( keyCode ){
+                       var data = UIItemPrivateData.get( this );
+                       keyCode === 13 && data.onUpdate && data.onUpdate();
+                       Util.removeClass( data.elm, 'button-has-focus' );
+                       data.focus = false;
+                       finish( data );
+               },
+               enabled : function( _enabled ){
+                       var data = UIItemPrivateData.get( this );
+                       if( Type.isBoolean( _enabled ) === true && data.enabled !== _enabled ){
+                               _enabled === true ? Util.removeClass( data.elm, 'button-disabled' ) : Util.addClass( data.elm, 'button-disabled' );
+                               data.enabled = _enabled;
                        };
-                       return enabled;
-               };
-               this.visible = function( _visible ){
+                       return data.enabled;
+               },
+               visible : function( _visible ){
+                       var data = UIItemPrivateData.get( this );
                        if( Type.isBoolean( _visible ) === true ){
-                               elmWrapper.style.display = _visible ? '' : 'none';
-                               visible = _visible;
+                               data.elm.style.display = _visible ? '' : 'none';
+                               data.visible = _visible;
                        };
-                       return visible;
-               };
-               this.destroy = function(){
-                       MouseEvent.remove( apiuser, elmWrapper );
-                       apiuser = uiGroup = elmWrapper = onUpdate = instance = null;
-               };
+                       return data.visible;
+               },
+               destroy : function(){
+                       var data = UIItemPrivateData.get( this );
+                       // MouseEvent.remove( data.groupData.apiuser, data.elm );
+                       data.destroy();
+               }
        };
 
-       var ComboBoxClass = function( apiuser, uiGroup, elmWrapper, onUpdate ){
-               var elmBox     = Util.getElementsByClassName( elmWrapper, 'combobox' )[ 0 ],
-                       elmA       = ELM_COMBOBOX.cloneNode( true ),
-                       elmToggle  = Util.getElementsByClassName( elmA, 'combobox-toggle' )[ 0 ],
-                       elmValue   = Util.getElementsByClassName( elmA, 'combobox-value' )[ 0 ].firstChild,
-                       index      = 0,
-                       optionList = [],
-                       instance   = this,
-                       focus      = false,
-                       visible    = true,
-                       enabled    = true,
-                       value;
-               elmBox.appendChild( elmA );
+       var ComboBoxClass = function( groupData, elmWrapper, onUpdate ){
+               var elmA   = ELM_COMBOBOX.cloneNode( true ),
+                       data   = new UIItemPrivateData();
+               data.init( groupData, this, elmWrapper, null, onUpdate, null, false, true, true );
+               
+               data.elmBox      = Util.getElementsByClassName( elmWrapper, 'combobox' )[ 0 ];
+               data.elmBox.appendChild( elmA );
+               data.elmA        = elmA;
+               data.elmToggle   = Util.getElementsByClassName( elmA, 'combobox-toggle' )[ 0 ];
+               data.elmValue    = Util.getElementsByClassName( elmA, 'combobox-value' )[ 0 ].firstChild;
+               data.selectIndex = 0;
+               data.optionList  = [];
 
-               this.elm = elmBox;
-               this.focus = function( e ){
-                       MouseEvent.remove( apiuser, elmWrapper, 'click', instance.focus );
-                       focus = true;
-                       elmA.className = 'combobox-has-focus';
-                       start( apiuser, uiGroup, instance );
-                       OptionControl.show( apiuser, instance, optionList );
+               data.node = groupData.node.createNode( elmWrapper, false, true, 'ui-inpittext-hover', 'pointer' );
+               data.node.addEventListener( 'click', this.focus, this );
+               // MouseEvent.add( groupData.apiuser, data.elm, 'click', this.focus );
+       };
+       ComboBoxClass.prototype = {
+               focus : function( e ){
+                       var data = UIItemPrivateData.get( this );
+                       // MouseEvent.remove( data.groupData.apiuser, data.elm, 'click', this.focus );
+                       data.node.removeEventListener( 'click', this.focus );
+                       data.focus = true;
+                       data.elmA.className = 'combobox-has-focus';
+                       start( data );
+                       OptionControl.show( data.groupData.apiuser, this, data.optionList );
                        return false;
-               };
-               this.blur = function( keyCode ){
-                       OptionControl.hide( instance );
-                       focus = false;
-                       elmA.className = '';
-                       finish( apiuser, uiGroup, instance );
-                       MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
-               };
-               this.enabled = function(){
-                       return enabled;
-               };
-               this.visible = function( _visible ){
+               },
+               blur : function( keyCode ){
+                       var data = UIItemPrivateData.get( this );
+                       OptionControl.hide( this );
+                       data.focus = false;
+                       data.elmA.className = '';
+                       finish( data );
+                       data.node.addEventListener( 'click', this.focus, this );
+                       // MouseEvent.add( data.groupData.apiuser, data.elm, 'click', this.focus );
+               },
+               enabled : function(){
+                       var data = UIItemPrivateData.get( this );
+                       return data.enabled;
+               },
+               visible : function( _visible ){
+                       var data = UIItemPrivateData.get( this );
                        if( Type.isBoolean( _visible ) === true ){
-                               elmWrapper.style.display = _visible ? '' : 'none';
-                               visible = _visible;
+                               data.elm.style.display = _visible ? '' : 'none';
+                               data.visible = _visible;
                        };
-                       return visible;
-               };
-               this.value = function( _value ){
-                       if( Type.isString( _value ) === true && value !== _value ){
-                               for( var i=0, l = optionList.length, _option; i<l; ++i ){
-                                       _option = optionList[ i ];
+                       return data.visible;
+               },
+               value : function( _value ){
+                       var data = UIItemPrivateData.get( this ),
+                               i    = 0,
+                               list = data.optionList,
+                               l    = list.length,
+                               _option;
+                       if( Type.isString( _value ) === true && data.value !== _value ){
+                               for( ; i < l; ++i ){
+                                       _option = list[ i ];
                                        if( _value === _option.value ){
-                                               value = _value;
-                                               index = i;
-                                               elmValue.data = _option.displayValue;
-                                               if( focus === true ){
-                                                       OptionControl.update( instance, _value );
+                                               data.value = _value;
+                                               data.index = i;
+                                               data.elmValue.data = _option.displayValue;
+                                               if( data.focus === true ){
+                                                       OptionControl.update( this, _value );
                                                };
-                                               Type.isFunction( onUpdate ) === true && AsyncCall.add( apiuser, onUpdate, _value, instance );
+                                               data.onUpdate && AsyncCall.add( data.groupData.apiuser, data.onUpdate, _value, this );
                                                break;
                                        };
                                };
                        };
-                       return value;
-               };
-               this.selectIndex = function(){
-                       return index;
-               };
-               this.createOption = function( _displayValue, _value, _isSelected ){
-                       var option = null,
+                       return data.value;
+               },
+               selectIndex : function(){
+                       var data = UIItemPrivateData.get( this );
+                       return data.selectIndex;
+               },
+               createOption : function( _displayValue, _value, _isSelected ){
+                       var data   = UIItemPrivateData.get( this ),
+                               option = null,
+                               list   = data.optionList,
+                               i      = list.length,
                                _option, i;
                        _value      = _value || _displayValue;
                        _isSelected = !!_isSelected;
-                       for( i = optionList.length; i; ){
-                               _option = optionList[ --i ];
+                       for( ; i; ){
+                               _option = list[ --i ];
                                if( _value === _option.value ){
                                        option = _option;
                                        break;
                                };
                        };
                        if( _isSelected === true ){
-                               index = optionList.length;
-                               elmValue.data = _displayValue;
+                               data.selectIndex   = list.length;
+                               data.elmValue.data = _displayValue;
                        };                      
-                       if( option === null ){
-                               option = new OptionDataClass( _displayValue, _value, _isSelected );
-                               optionList.push( option );
-                       };
-               };
-               this.destroy = function(){
-                       instance.blur();
-                       MouseEvent.remove( apiuser, elmWrapper );
-                       optionList.length = 0;
-                       apiuser = uiGroup = elmWrapper = onUpdate = elmBox = elmA = elmToggle = elmValue = optionList = instance = null;
-               };
-               MouseEvent.add( apiuser, elmWrapper, 'click', instance.focus );
+                       option === null && list.push( new OptionDataClass( _displayValue, _value, _isSelected ) );
+               },
+               destroy : function(){
+                       var data   = UIItemPrivateData.get( this );
+                       this.blur();
+                       // MouseEvent.remove( data.groupData.apiuser, data.elm );
+                       data.optionList.length = 0;
+                       data.destroy();
+               }
        };
        var OptionDataClass = function( displayValue, value, isCurrent ){
                this.displayValue = displayValue;
@@ -4064,10 +4164,13 @@ var UI = ( function(){
                };
                
                function onOptionSelect( e ){
-                       for( var i = 0, l = OPTION_LIST.length, _option; i < l; ++i){
+                       var i = 0,
+                               l = OPTION_LIST.length,
+                               _option;
+                       for( ; i < l; ++i ){
                                _option = OPTION_LIST[ i ];
                                if( this === _option.elm ){
-                                       updateCurrrentOption(  _option.data.value, true );
+                                       updateCurrrentOption( _option.data.value, true );
                                        currentCombobox.blur();
                                        break;
                                };
@@ -4083,8 +4186,9 @@ var UI = ( function(){
                        currentIndex;
                
                function updateCurrrentOption( _value, _updateCombobox ){
-                       var _option;
-                       for( var i = OPTION_LIST.length; i; ){
+                       var _option,
+                               i = OPTION_LIST.length;
+                       for( ; i; ){
                                _option = OPTION_LIST[ --i ];
                                if( _value === _option.data.value ){
                                        currentOption && currentOption.current( false );
@@ -4092,7 +4196,6 @@ var UI = ( function(){
                                        currentOption = _option;
                                        currentIndex  = i;
                                        _updateCombobox === true && currentCombobox.value( _value );
-                                       
                                        break;
                                };
                        };
@@ -4105,10 +4208,10 @@ var UI = ( function(){
                        var position = Util.getAbsolutePosition( elm );
 
                        ELM_OPTION_WRAPPER.style.cssText = [
-                                       'width:', elm.offsetWidth - 2, 'px;',
-                                       'left:', position.x, 'px;',
-                                       'top:', position.y + elm.offsetHeight, 'px;'
-                               ].join( '' );
+                               'width:', elm.offsetWidth - 2, 'px;',
+                               'left:',  position.x, 'px;',
+                               'top:',   position.y + elm.offsetHeight, 'px;'
+                       ].join( '' );
                };
                function change( e ){
                        var l   = OPTION_LIST.length,
@@ -4121,16 +4224,20 @@ var UI = ( function(){
                        return false;
                };
                return {
-                       show: function( _apiuser, _combobox, _optionList ){
-                               if( currentItem !== _combobox || currentCombobox === _combobox ) return;
+                       show: function( data ){
+                               var combobox = data.item,
+                                       list     = data.optionList,
+                                       i        = 0,
+                                       l        = list.length;
+                               if( currentItem !== combobox || currentCombobox === combobox ) return;
                                currentCombobox && currentCombobox.blur();
                                
-                               apiuser         = _apiuser;
-                               currentCombobox = _combobox;
-                               elm             = _combobox.elm;
+                               apiuser         = data.groupData.apiuser;
+                               currentCombobox = combobox;
+                               elm             = data.elmBox;
                                
-                               for( var i = 0, l = _optionList.length; i<l; ++i ){
-                                       OPTION_LIST.unshift( new OptionClass( _optionList[ i ] ) );
+                               for( ; i < l; ++i ){
+                                       OPTION_LIST.unshift( new OptionClass( list[ i ] ) );
                                };
                                MouseEvent.add( SUPER_USER_KEY, document, 'mouseup', bodyMouseupHandler );
                                KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, change, 38 );
@@ -4140,13 +4247,13 @@ var UI = ( function(){
                                
                                body.appendChild( ELM_OPTION_WRAPPER );
                                
-                               updateCurrrentOption( _combobox.value(), false );
+                               updateCurrrentOption( combobox.value(), false );
                                updateWrapperPosition();
                                
                                SystemTimer.add( SUPER_USER_KEY, updateWrapperPosition, 500 );
                        },
                        hide: function( _combobox ){
-                               if( currentCombobox !== _combobox || currentCombobox === null ) return;
+                               if( currentCombobox !== data.item || currentCombobox === null ) return;
 
                                var _option;
                                while( _option = OPTION_LIST.shift() ){
@@ -4173,8 +4280,8 @@ var UI = ( function(){
                                //currentCombobox.blur();
                                //OptionControl.hide( currentCombobox );
                        },
-                       update: function( _combobox, _value ){
-                               if( currentCombobox !== _combobox || currentItem !== _combobox ) return;
+                       update: function( data, _value ){
+                               if( currentCombobox !== data.item || currentItem !== data.item ) return;
                                if( currentOption.data.value === _value ) return;
                                updateCurrrentOption( _value, true );
                        },
@@ -4183,13 +4290,42 @@ var UI = ( function(){
                        }
                };
        })();
-
-       var UIGroupClass = function( apiuser ){
-               var self        = this,
-                       itemList    = [],
-                       windowW, windowH;
-
-               this.focus = function( _value ){
+       
+       var UIGroupPrivateData = function(){};
+       UIGroupPrivateData.prototype = {
+               apiuser  : null,
+               node     : null,
+               uigroup  : null,
+               itemList : null,
+               visible  : true,
+               enabled  : true,
+               init     : function( apiuser, node, uigroup ){
+                       this.apiuser  = apiuser;
+                       this.node     = node;
+                       this.uigroup  = uigroup;
+                       this.itemList = [];
+                       UIGroupPrivateData.list.push( this );
+               },
+               destroy  : function(){
+                       
+               }
+       };
+       UIGroupPrivateData.list = [];
+       UIGroupPrivateData.get  = function( uigroup ){
+               var list = UIGroupPrivateData.list,
+                       i    = list.length;
+               for( ; i; ){
+                       if( list[ --i ].uigroup === uigroup ) return list[ i ];
+               };
+               return null;
+       };
+       
+       var UIGroupClass = function( apiuser, node ){
+               ( new UIGroupPrivateData() ).init( apiuser, node, this );       
+       };
+       UIGroupClass.prototype = {
+               focus : function( _value ){
+                       var data = UIGroupPrivateData.get( this );
                        /*
                        if( _value === true ){
                                if( currentItem ){
@@ -4203,76 +4339,96 @@ var UI = ( function(){
                                finish( apiuser, self, currentItem );
                        } else
                        */
-                       if( _value && Util.getIndex( itemList, _value ) !== -1 ){
+                       if( _value && Util.getIndex( data.itemList, _value ) !== -1 ){
                                // currentItem = _value;
-                               currentList = itemList;
+                               currentList = data.itemList;
                        };
-                       return currentUi === self; 
-               };
-               this.blur = function(){
-                       if( currentList === itemList ){
+                       return currentUi === this; 
+               },
+               blur : function(){
+                       var data = UIGroupPrivateData.get( this );
+                       if( currentList === data.itemList ){
                                currentList = null;
                        };
-               };
-               this.createInputText = function( _elmWrapper, _onUpdate, _validater ){
-                       var _elmValue = Util.getElementsByClassName( _elmWrapper, 'editable-value' )[ 0 ];
-                       if( _elmValue ){
-                               var ret = new InputTextClass( apiuser, self, _elmWrapper, _elmValue, _onUpdate, _validater );
-                               itemList.push( ret );
+               },
+               createInputText : function( elmWrapper, onUpdate, validater ){
+                       var data     = UIGroupPrivateData.get( this ),
+                               elmValue = Util.getElementsByClassName( elmWrapper, 'editable-value' )[ 0 ],
+                               ret;
+                       if( elmValue ){
+                               ret = new InputTextClass( data, elmWrapper, elmValue, onUpdate, validater );
+                               data.itemList.push( ret );
                                return ret;
-                       }
+                       };
                        alert( 'error createInputText' );
-               };
-               this.createButton = function( _elm, _onClick ){
-                       var ret = new ButtonClass( apiuser, self, _elm, _onClick );
-                       itemList.push( ret );
+               },
+               createButton : function( elm, onClick ){
+                       var data = UIGroupPrivateData.get( this ),
+                               ret  = new ButtonClass( data, elm, onClick );
+                       data.itemList.push( ret );
                        return ret;
-               };
-               this.createFileInput = function( _elm, _onUpdate, _validater, _elmFileInput ){
-                       var ret = FileInputClass( apiuser, self, _elm, _onUpdate, _validater, _elmFileInput );
-                       itemList.push( ret );
+               },
+               createFileInput : function( elm, onUpdate, validater, elmFileInput ){
+                       var data = UIGroupPrivateData.get( this ),
+                               ret  = new FileInputClass( data, elm, onUpdate, validater, elmFileInput );
+                       data.itemList.push( ret );
                        return ret;
-               };
-               this.createCombobox = function( _elm, _onUpdate, _optionList ){
-                       var ret = new ComboBoxClass( apiuser, self, _elm, _onUpdate, _optionList );
-                       itemList.push( ret );
+               },
+               createCombobox : function( elm, onUpdate, optionList ){
+                       var data = UIGroupPrivateData.get( this ),
+                               ret  = new ComboBoxClass( data, elm, onUpdate, optionList );
+                       data.itemList.push( ret );
                        return ret;
-               };
-               this.createCheckBox = function(){
+               },
+               createCheckBox : function(){
                        
-               };
-               this.createRadio = function(){
+               },
+               createRadio : function(){
                        
-               };
-               this.createSlider = function(){
+               },
+               createSlider : function(){
                        
-               };
-               this.destroy = function(){
-                       var _item;
-                       while( _item = itemList.shift() ){
+               },
+               visible : function( v ){
+                       var data = UIGroupPrivateData.get( this );
+                       if( Type.isBoolean( v ) === true && data.visible !== v ){
+                               data.node.disabled( !v );
+                               data.visible = v;
+                               if( v === false && currentUi === this ){
+                                       currentItem.blur();
+                                       // finish( UIItemPrivateData.get( currentItem ) );
+                               };
+                       };
+                       return data.visible;
+               },
+               enabled : function( v ){
+                       
+               },
+               destroy : function(){
+                       var data = UIGroupPrivateData.get( this ),
+                               _item;
+                       while( _item = data.itemList.shift() ){
                                _item.destroy();
                        };
                        if( currentUi === this ){
-                               currentItem = null;
-                               currentUi   = null;
-                               currentUser = null;
-                               currentList = null;
+                               currentItem.blur();
+                               // finish( UIItemPrivateData.get( currentItem ) );
                        };
-                       apiuser = self = null;
-               };
+                       data.destroy();
+               }
        };
        
-       function start( _apiuser, _uigroup, _item ){
-               if( currentItem !== _item ){
-                       currentUi !== _uigroup && currentUi && currentUi.blur();
+       function start( data ){
+               if( currentItem !== data.item ){
+                       currentUi !== data.groupData.uigroup && currentUi && currentUi.blur();
                        
                        currentItem !== null && currentItem.blur();
                        
-                       currentUser = _apiuser;
-                       currentUi   = _uigroup;
-                       currentItem = _item;
+                       currentUser = data.groupData.apiuser;
+                       currentUi   = data.groupData.uigroup;
+                       currentItem = data.item;
                        
-                       _uigroup.focus( _item );
+                       currentUi.focus( currentItem );
                        
                        // if( currentUser !== _apiuser ) {
                                KeyEvent.add( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );
@@ -4282,9 +4438,9 @@ var UI = ( function(){
                        // };
                };
        }
-       function finish( _apiuser, _uigroup, _item ){
-               if( currentItem === _item ){
-                       _uigroup.blur();
+       function finish( data ){
+               if( currentItem === data.item ){
+                       currentUi.blur();
                        
                        currentUser = null;
                        currentUi   = null;
@@ -4294,51 +4450,51 @@ var UI = ( function(){
                        KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 13 );
                        KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown, 27 );
                        KeyEvent.remove( SUPER_USER_KEY, Const.KEY.EVENT.KEY_DOWN, onKeyDown,  9 );
-                       KeyEvent.updateCurrentListener( _apiuser );
+                       KeyEvent.updateCurrentListener( data.groupData.apiuser );
                };
        };
 
        function onKeyDown( e ){
                if( currentItem === null ) return true;
                var keyCode = e.keyCode,
-                       _index  = Util.getIndex( currentList, currentItem );
+                       index   = Util.getIndex( currentList, currentItem );
                if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true ){ // 13.return 27.esc 9.tab 18.alt
-                       keyCode === 9  && tabShift( _index, e.shiftKey === true ? -1 : 1 );
+                       keyCode === 9  && tabShift( index, e.shiftKey === true ? -1 : 1 );
                        keyCode === 13 && currentItem instanceof ComboBoxClass && OptionControl.onEnter();
-                       keyCode === 13 && tabShift( _index, 1 );                        
+                       keyCode === 13 && tabShift( index, 1 );                 
                        currentItem && currentItem.blur( keyCode );
                };
                return false;
        };
 
-       function tabShift( _index, _way ){
+       function tabShift( index, way ){
                var l = currentList.length,
-                       i = _index + _way,
-                       _item;
+                       i = index + way,
+                       item;
                if( l < 2 ) return;
-               while( i !== _index ){
+               while( i !== index ){
                        i = i < 0 ?
                                l - 1 :
                                i < l ? i : 0; // 0 < i < l
-                       _item = currentList[ i ];
-                       if( _item.enabled() === true && _item.visible() === true ){
-                               AsyncCall.add( currentUser, _item.focus, null, _item );
+                       item = currentList[ i ];
+                       if( item.enabled() === true && item.visible() === true ){
+                               AsyncCall.add( currentUser, item.focus, null, item );
                                return;
                        };
-                       i += _way;
+                       i += way;
                };
        };
        
        return {
-               createUIGroup: function( _apiuser ){
-                       var _uid  = _apiuser.getUID(),
-                               _list = UI_LIST[ _uid ],
-                               _ui   = new UIGroupClass( _apiuser );
-                       if( Type.isArray( _list ) === false ){
-                               _list = UI_LIST[ _uid ] = [];
-                       }
-                       _list.push( _ui );
-                       return _ui;
+               createUIGroup: function( apiuser, node ){
+                       var uid  = apiuser.getUID(),
+                               list = UI_LIST[ uid ],
+                               ui   = new UIGroupClass( apiuser, node );
+                       if( Type.isArray( list ) === false ){
+                               list = UI_LIST[ uid ] = [];
+                       };
+                       list.push( ui );
+                       return ui;
                },
                onWindowResize: function( w, h ){
                        windowW = w;
index c4dc403..cd80c28 100644 (file)
@@ -1,7 +1,7 @@
 @charset "UTF-8";\r
 \r
 /* pettanR peta.apps.css\r
- *   version 0.5.19\r
+ *   version 0.5.23\r
  * \r
  *   author:\r
  *     itozyun\r
        --------------------------------------------------------------------------------------*/\r
                #comic-element-consol-wrapper {\r
                        position:                       absolute;\r
+                       bottom:             0;\r
+                       left:               0;\r
                }\r
-                       #image-element-consol {\r
-                               width:                          50px;\r
-                               overflow:                       auto;\r
+                       #comic-element-consol-container {\r
+                               background:                     transparent url( "../images/white_70pct.png" ) repeat 0 0;\r
+                               padding:            0.5em;\r
                        }\r
-                       #text-element-consol {\r
-                               width:                          75px;\r
-                               overflow:                       auto;\r
+                       .comic-element-consol-container-hover {\r
+                               background:                     #fff !important;\r
                        }\r
-       \r
-                               #change-image-button,\r
-                               #layer-back-button,\r
-                               #layer-forward-button,\r
-                               #delete-image-button,\r
-                               #edit-text-button,\r
-                               #change-text-style-button,\r
-                               #hide-text-tail-button,\r
-                               #back-text-button,\r
-                               #forward-text-button,\r
-                               #delete-text-button {\r
-                                       text-indent:                    -9999px;\r
-                                       width:                                  25px;\r
-                                       height:                                 25px;\r
-                                       line-height:                    25px;\r
-                                       float:                                  left;\r
-                                       background-image:               url('../images/sprite.gif');\r
-                                       background-repeat:              no-repeat;\r
-                                       background-position:    0 0;\r
-                                       cursor:                                 pointer;\r
-                               }\r
-                               #hide-text-tail-button {\r
-                                       background-position:    -30px -30px;\r
-                               }\r
-                               #change-image-button,\r
-                               #change-text-style-button {\r
-                                       background-position:    -30px 0;\r
-                               }                       \r
-                               #layer-back-button,\r
-                               #back-text-button {\r
-                                       background-position:    -60px 0;\r
-                               }\r
-                               #layer-forward-button,\r
-                               #forward-text-button {\r
-                                       background-position:    -60px -30px;\r
-                               }\r
-                               #delete-image-button,\r
-                               #delete-text-button {\r
-                                       background-position:    0 -30px;\r
-                               }\r
-                       \r
-               .console-out #comic-element-consol-wrapper-when-out {\r
-                       padding:                        5px;\r
-                       background-color:       #333;\r
-               }\r
-               .console-out #comic-element-consol-tail {\r
-                       border-width:           0 5px 10px 5px;\r
-                       border-color:           transparent transparent #333 transparent;\r
-                       _border-color:          #fff #fff #333 #fff;\r
-                       border-style:           solid;\r
-                       width:                          0;\r
-                       height:                         0;\r
-                       font-size:                      0;\r
-                       line-height:            0;\r
+               \r
+               #comic-element-consol-pushout-wrapper {\r
+                       display:                        none;\r
                        position:                       absolute;\r
-                       top:                            -10px;\r
-                       left:                           50%;\r
+                       top:                -10px;\r
+                       width:                          240px;\r
+                       border:                         1px solid #999;\r
                }\r
-                       \r
+                       #comic-element-consol-pushout-tail {\r
+                               border-style:           solid;\r
+                               width:                          0;\r
+                               height:                         0;\r
+                               font-size:                      0;\r
+                               line-height:            0;\r
+                               position:                       absolute;\r
+                       }\r
+                       .satellite-left #comic-element-consol-pushout-tail {\r
+                               border-width:           5px 0 5px 10px;\r
+                               border-color:           transparent transparent transparent #999;\r
+                               _border-color:          #fff #fff #fff #999;\r
+                               top:                            50%;\r
+                               right:                          -10px;\r
+                       }\r
+                       .satellite-right #comic-element-consol-pushout-tail {\r
+                               border-width:           5px 10px 5px 0;\r
+                               border-color:           transparent #999 transparent transparent;\r
+                               _border-color:          #fff #999 #fff #fff;\r
+                               top:                            50%;\r
+                               left:                           -10px;\r
+                       }\r
+                       .satellite-top #comic-element-consol-pushout-tail {\r
+                               border-width:           10px 5px 0 5px;\r
+                               border-color:           #333 transparent transparent transparent;\r
+                               _border-color:          #333 #fff #fff #fff;\r
+                               bottom:                         -10px;\r
+                               left:                           50%;\r
+                       }\r
+                       .satellite-bottom #comic-element-consol-pushout-tail {\r
+                               border-width:           0 5px 10px 5px;\r
+                               border-color:           transparent transparent #333 transparent;\r
+                               _border-color:          #fff #fff #333 #fff;\r
+                               top:                            -10px;\r
+                               left:                           50%;\r
+                       }\r
+\r
+               \r
+                       .comic-element-consol-item {\r
+                               float:                  left;\r
+                               width:                  70px;\r
+                               height:                 70px;\r
+                       }\r
+                       .comic-element-consol-item-small {\r
+                               float:                  left;\r
+                               width:                  70px;\r
+                               height:                 35px;\r
+                       }\r
+                               .comic-element-consol-item div {\r
+                                       height:         35px;\r
+                               }\r
+                                       .comic-element-consol-item-small .button {\r
+                                               width:                                  60px;\r
+                                               height:                                 24px;\r
+                                               line-height:                    24px;\r
+                                               margin-top:             5px;\r
+                                               margin-left:            5px;\r
+                                       }\r
+                                       .comic-element-attribute-label {\r
+                                               display:                        inline-block;\r
+                                               width:                          14px;\r
+                                               line-height:            22px;\r
+                                               color:                          #666;\r
+                                               text-align:                     center;\r
+                                               cursor:                         pointer;\r
+                                       }\r
+                                       .comic-element-attribute-value {\r
+                                               width:                          40px;\r
+                                               text-align:                     right;\r
+                                       }\r
+               \r
+                                       #comic-element-z-value,\r
+                                       #comic-element-a-value {\r
+                                               width:                          35px;\r
+                                       }\r
+                                       #comic-element-w-percent-value,\r
+                                       #comic-element-h-percent-value {\r
+                                               width:                          30px;\r
+                                       }\r
+                               \r
+                                       #comic-element-keep-aspect {\r
+                                           position:            relative;\r
+                                           top:                 24px;\r
+                                           left:                0;\r
+                                           width:               12px;\r
+                                           height:              22px;\r
+                                           font-size:           22px;\r
+                                           line-height:         22px;\r
+                                           border:              1px solid #ccc;\r
+                                       }\r
+       \r
        \r
                        \r
        /*  Panel > speach\r
                                display:                                none;\r
                        }\r
        \r
-       /*  Information Window\r
-       --------------------------------------------------------------------------------------*/\r
-               #comic-element-infomation {\r
-                       background-color:                       #fff;\r
-                       position:                                       absolute;\r
-                       width:                                          100%;\r
-               }\r
-                               #comic-element-x, #comic-element-z,\r
-                               #comic-element-y, #comic-element-a,\r
-                               #comic-element-w, #comic-element-w-percent,\r
-                               #comic-element-h, #comic-element-h-percent {\r
-                                       position:                       absolute;\r
-                               }\r
-                               \r
-                               #comic-element-x,\r
-                               #comic-element-y,\r
-                               #comic-element-w,\r
-                               #comic-element-h {\r
-                                       left:                           30px;\r
-                               }\r
-                               #comic-element-z,\r
-                               #comic-element-a {\r
-                                       left:                           115px;\r
-                               }\r
-                   #comic-element-w-percent,\r
-                   #comic-element-h-percent    {\r
-                       left:               124px;\r
-                   }\r
-                               #comic-element-x, #comic-element-z {\r
-                                       top:                            10px;\r
-                               }\r
-                               #comic-element-y, #comic-element-a {\r
-                                       top:                            40px;\r
-                               }\r
-                               #comic-element-w, #comic-element-w-percent {\r
-                                       top:                            80px;\r
-                               }\r
-                               #comic-element-h, #comic-element-h-percent {\r
-                                       top:                            110px;\r
-                               }\r
-                               .comic-element-attribute-label {\r
-                                       display:                        inline-block;\r
-                                       width:                          14px;\r
-                                       line-height:            22px;\r
-                                       color:                          #666;\r
-                                       text-align:                     center;\r
-                                       cursor:                         pointer;\r
-                               }\r
-                               .comic-element-attribute-value {\r
-                                       width:                          40px;\r
-                                       text-align:                     right;\r
-                               }\r
-               \r
-                               #comic-element-z-value,\r
-                               #comic-element-a-value {\r
-                                       width:                          35px;\r
-                               }\r
-                               #comic-element-w-percent-value,\r
-                               #comic-element-h-percent-value {\r
-                                       width:                          30px;\r
-                               }\r
-                               \r
-                               #comic-element-keep-aspect {\r
-                                   position:            absolute;\r
-                                   top:                 96px;\r
-                                   left:                100px;\r
-                                   width:               12px;\r
-                                   height:              22px;\r
-                                   font-size:           22px;\r
-                                   line-height:         22px;\r
-                                   border:              1px solid #ccc;\r
-                               }\r
-       \r
        /*  Background Window\r
        --------------------------------------------------------------------------------------*/\r
                        #bg-pattern,\r
index 7291393..e670ddc 100644 (file)
@@ -1,7 +1,7 @@
 @charset "UTF-8";\r
 \r
 /* pettanR system.css\r
- *   version 0.5.18\r
+ *   version 0.5.23\r
  * \r
  *   author:\r
  *     itozyun\r
 \r
        /*  editable-text\r
        --------------------------------------------------------------------------------------*/\r
-       \r
+               #ui-textinput {\r
+                       position:                       absolute;\r
+                       outline:                        0;\r
+                       padding:                        3px 0;\r
+                       background-color:       #aDf0FE;\r
+                       margin:                         0;\r
+                       border-color:           #4D90FE;\r
+               }\r
+               #ui-textinput,\r
+               .editable-text {\r
+                       border-style:           solid;\r
+                       border-width:           1px;\r
+                       font-size:                      14px;\r
+                       line-height:            16px;           \r
+               }\r
                .editable-text {\r
+                       border-color:           #666 #aaa #bbb #777;\r
                        display:                        inline-block;\r
                        color:                          #333;\r
-                       border:                         1px solid #ccc;\r
-                       font-size:                      14px;\r
-                       line-height:            16px;\r
+                       zoom:                           1;\r
+                       background-color:       #fff;\r
+                       padding:                        3px;\r
                }\r
-                       .editable-text a,\r
-                       .editable-text a:link,\r
-               .editable-text a:visited,\r
-               .editable-text a:hover,\r
-               .editable-text a:active {\r
-                               padding:                        3px;\r
-                               color:                          #333;\r
-                               text-decoration:        none;\r
-                               display:                        block;\r
-                               zoom:                           1;\r
-                               outline:                        0;\r
-                               background-color:       #fff;\r
-                       }\r
-                       .editable-text a:hover {\r
-                               background-color:       #ccf;\r
-                       }\r
-                       .editable-text input {\r
-                               padding:                        3px 0;\r
-                               width:                          100%;\r
-                               font-family:            Arial,Helvetica,sans-serif;\r
-                               background-color:       #ccf;\r
-                               border:                         0;\r
-                               margin:                         0;\r
-                               outline:                        0;\r
-                       }\r
                        \r
        /*  combobox\r
        --------------------------------------------------------------------------------------*/        \r