OSDN Git Service

Version 0.6.121, iScroll5 is working on iPhone touch 1G, update X.Audio.
[pettanr/clientJs.git] / 0.4.x / javascripts / work.js
index 901e9c7..bebfa29 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR work.js\r
- *   version 0.4.32\r
+ *   version 0.4.37\r
  *   \r
  * author:\r
  *   itozyun\r
 pettanr.editor = pettanr.view.registerApplication( function(){\r
 \r
        var PANEL_ELEMENT_TYPE_IMAGE = 0,\r
-               PANEL_ELEMENT_TYPE_TEXT = 1,\r
-               MOUSE_LISTENER_ARRAY = [],\r
-               PANEL_ELEMENT_ARRAY = [],\r
+               PANEL_ELEMENT_TYPE_TEXT  = 1,\r
+               MOUSE_LISTENER_ARRAY     = [],\r
+               PANEL_ELEMENT_ARRAY      = [],\r
                ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
-               MIN_PANEL_HEIGHT = 20,\r
-               MIN_ELEMENT_SIZE = 19,\r
-               MOUSE_HIT_AREA = 10,\r
+               MIN_PANEL_HEIGHT         = 20,\r
+               MIN_ELEMENT_SIZE         = 19,\r
+               MOUSE_HIT_AREA           = 10,\r
                jqMouseEventChacher,\r
                jqEditor,\r
                windowW, windowH,\r
-               currentListener = null,\r
-               currentCursor = '',\r
-               instance = this,\r
+               currentListener          = null,\r
+               currentCursor            = '',\r
+               instance                 = this,\r
                option,\r
-               comicID = -1,\r
-               panelID = -1,\r
-               panelTimming = -1,\r
+               comicID                  = -1,\r
+               panelID                  = -1,\r
+               panelTimming             = -1,\r
+               phase                    = -1,\r
                log;\r
 \r
 /* ----------------------------------------\r
@@ -101,131 +102,123 @@ pettanr.editor = pettanr.view.registerApplication( function(){
  *          kbd shortcut\r
  */\r
        var MENU_BAR_CONTROL = ( function(){\r
-               var ELM_BAR = document.getElementById( 'menu-bar'),\r
+               var ELM_BAR            = document.getElementById( 'menu-bar' ),\r
                        ELM_ITEM_CLASSNAME = 'menu-bar-item',\r
-                       ELM_ITEM_ORIGN = ( function(){\r
-                               var ret = document.createElement( 'div'),\r
-                                       div = document.createElement( 'div'),\r
-                                       ul = document.createElement( 'ul');\r
+                       ELM_ITEM_ORIGN     = ( function(){\r
+                               var ret = document.createElement( 'div' ),\r
+                                       div = document.createElement( 'div' ),\r
+                                       ul  = document.createElement( 'ul' );\r
                                ret.className = ELM_ITEM_CLASSNAME;\r
-                               ret.appendChild( div);\r
-                               ret.appendChild( ul);\r
+                               ret.appendChild( div );\r
+                               ret.appendChild( ul );\r
                                return ret;\r
                        })(),\r
                        ELM_SELECTION_ORIGN = ( function(){\r
-                               var ret = document.createElement( 'li'),\r
-                                       a = document.createElement( 'a'),\r
-                                       span = document.createElement( 'span'),\r
-                                       key = document.createElement( 'kbd');\r
-                               a.appendChild( span);\r
-                               a.appendChild( key);\r
-                               ret.appendChild( a);\r
+                               var ret  = document.createElement( 'li' ),\r
+                                       a    = document.createElement( 'a' ),\r
+                                       span = document.createElement( 'span' ),\r
+                                       key  = document.createElement( 'kbd' );\r
+                               a.appendChild( span );\r
+                               a.appendChild( key );\r
+                               ret.appendChild( a );\r
                                a.href = '#';\r
                                return ret;\r
                        })(),\r
                        ITEM_ARRAY = [],\r
-                       barH = pettanr.util.getElementSize( ELM_BAR).height,\r
-                       itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,\r
-                       selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width,\r
+                       barH       = pettanr.util.getElementSize( ELM_BAR ).height,\r
+                       itemW      = pettanr.util.getElementSize( ELM_ITEM_ORIGN ).width,\r
+                       selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul' )[ 0 ] ).width,\r
                        jqStage, jqBar;\r
-               ELM_BAR.style.top = ( -barH) +'px';\r
+               ELM_BAR.style.top = ( -barH ) +'px';\r
 \r
                var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter ){\r
-                       var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),\r
-                               ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],\r
-                               elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];\r
+                       var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true ),\r
+                               ELM_TITLE   = ELM_WRAPPER.getElementsByTagName( 'span' )[ 0 ],\r
+                               elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd' )[ 0 ];\r
                                \r
-                       if( shortcut){\r
+                       if( shortcut ){\r
                                elmShortcut.innerHTML = shortcut;\r
                        } else {\r
-                               elmShortcut.parentNode.removeChild( elmShortcut);\r
+                               elmShortcut.parentNode.removeChild( elmShortcut );\r
                        }\r
                        elmShortcut = null;\r
                        \r
-                       container.appendChild( ELM_WRAPPER);\r
-                       \r
-                       updateTitle( title);\r
-                       updateVisible( visible);\r
-                       \r
-                       function updateTitle( _title){\r
-                               ELM_TITLE.innerHTML = title = _title;\r
-                       }\r
-                       function updateVisible( _visible){\r
-                               if( _visible !== undefined){\r
-                                       visible = !!_visible;\r
+                       container.appendChild( ELM_WRAPPER );\r
+\r
+                       this.elm   = ELM_WRAPPER;\r
+                       this.title = function( _title ){\r
+                               if( Type.isString( _title ) === true ){\r
+                                       ELM_TITLE.innerHTML = title = _title;\r
+                               };\r
+                               return title;\r
+                       };\r
+                       this.visible = function( _visible ){\r
+                               if( Type.isBoolean( _visible ) === true && visible !== _visible ){\r
+                                       visible = _visible;\r
                                        ELM_WRAPPER.className = visible === true ? '' : 'disabled';\r
                                };\r
-                       }\r
-                       return {\r
-                               elm: ELM_WRAPPER,\r
-                               title: function( _title){\r
-                                       _title !== undefined && updateTitle( _title);\r
-                                       return title;\r
-                               },\r
-                               visible: function( _visible){\r
-                                       visible !== !!_visible && updateVisible( _visible);\r
-                                       return visible;\r
-                               },\r
-                               separateAfter: separateAfter\r
-                       }\r
+                               return visible;\r
+                       };\r
+                       this.separateAfter = separateAfter;\r
+                       \r
+                       this.title( title );\r
+                       this.visible( visible );\r
                }\r
 \r
-               var MenuBarItemClass = function( title){\r
-                       var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),\r
-                               ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],\r
-                               ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],\r
-                               INDEX = ITEM_ARRAY.length,\r
+               var MenuBarItemClass = function( title ){\r
+                       var ELM_WRAPPER              = ELM_ITEM_ORIGN.cloneNode( true ),\r
+                               ELM_TITLE                = ELM_WRAPPER.getElementsByTagName( 'div' )[ 0 ],\r
+                               ELM_SELECTION            = ELM_WRAPPER.getElementsByTagName( 'ul' )[ 0 ],\r
+                               INDEX                    = ITEM_ARRAY.length,\r
                                SELECTION_CALLBACK_ARRAY = [],\r
-                               numSelection = 0,\r
-                               visible = false;\r
+                               numSelection             = 0,\r
+                               visible                  = false,\r
+                               instance                 = this;\r
                        ELM_TITLE.innerHTML = title;\r
                        \r
-                       ELM_WRAPPER.style.left = ( itemW * INDEX) +'px';\r
-                       ELM_BAR.appendChild( ELM_WRAPPER);\r
+                       ELM_WRAPPER.style.left = ( itemW * INDEX ) + 'px';\r
+                       ELM_BAR.appendChild( ELM_WRAPPER );\r
                        \r
-                       function onClick( e){\r
-                               var i = pettanr.util.getChildIndex( this.parentNode, this);\r
-                               i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);\r
+                       this.elm     = ELM_WRAPPER;\r
+                       this.onClick = function( e ){\r
+                               var i = pettanr.util.getChildIndex( this.parentNode, this );\r
+                               i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i ]( i );\r
                                e.stopPropagation();\r
                                return false;\r
-                       }\r
-                       return {\r
-                               elm: ELM_WRAPPER,\r
-                               onClick: onClick,\r
-                               init: function(){\r
-                                       $( ELM_SELECTION).children( 'li').click( onClick);\r
-                                       delete this.init;\r
-                               },\r
-                               show: function(){\r
-                                       if( visible === true) return;\r
-                                       jqStage.append( ELM_WRAPPER);\r
-                                       ELM_WRAPPER.className = ELM_ITEM_CLASSNAME +'-focus';\r
-                                       this.onShow && setTimeout( this.onShow, 0);\r
-                                       visible = true;\r
-                               },\r
-                               hide: function(){\r
-                                       if( visible === false) return;\r
-                                       ELM_BAR.appendChild( ELM_WRAPPER);\r
-                                       ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;\r
-                                       this.onHide && setTimeout( this.onHide, 0);\r
-                                       visible = false;\r
-                               },\r
-                               createSelection: function( title, shortcut, callback, visible, separateBefore, separateAfter){\r
-                                       var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]),\r
-                                               before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null;\r
-                                       SELECTION_CALLBACK_ARRAY.push( callback);\r
-                                       if( before !== null && ( separateBefore === true || before.separateAfter === true)){\r
-                                               ret.elm.style.borderTop = '1px solid #ccc';\r
-                                       }\r
-                                       return ret;\r
+                       };\r
+                       this.init = function(){\r
+                               $( ELM_SELECTION ).children( 'li' ).click( instance.onClick );\r
+                               delete instance.init;\r
+                       };\r
+                       this.show = function(){\r
+                               if( visible === true ) return;\r
+                               jqStage.append( ELM_WRAPPER );\r
+                               ELM_WRAPPER.className = ELM_ITEM_CLASSNAME + '-focus';\r
+                               instance.onShow && setTimeout( instance.onShow, 0 );\r
+                               visible = true;\r
+                       };\r
+                       this.hide = function(){\r
+                               if( visible === false ) return;\r
+                               ELM_BAR.appendChild( ELM_WRAPPER );\r
+                               ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;\r
+                               instance.onHide && setTimeout( instance.onHide, 0 );\r
+                               visible = false;\r
+                       };\r
+                       this.createSelection = function( title, shortcut, callback, visible, separateBefore, separateAfter ){\r
+                               var ret    = new MenubarSelectionClass( ELM_SELECTION, title, shortcut, visible, separateAfter ),\r
+                                       before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1 ] : null;\r
+                               SELECTION_CALLBACK_ARRAY.push( callback );\r
+                               if( before !== null && ( separateBefore === true || before.separateAfter === true )){\r
+                                       ret.elm.style.borderTop = '1px solid #ccc';\r
                                }\r
-                       }\r
-               }\r
+                               return ret;\r
+                       };\r
+               };\r
 \r
                \r
-               function createMenubarItem( title){\r
-                       var _item = new MenuBarItemClass( title);\r
-                       ITEM_ARRAY.push( _item);\r
+               function createMenubarItem( title ){\r
+                       var _item = new MenuBarItemClass( title );\r
+                       ITEM_ARRAY.push( _item );\r
                        return _item;\r
                }\r
                return {\r
@@ -277,37 +270,37 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                }\r
                                return true;\r
                        },\r
-                       busy: function( _busy){\r
+                       busy: function( _busy ){\r
                                return false;\r
                        },\r
-                       onWindowResize: function( _windowW, _windowH){\r
+                       onWindowResize: function( _windowW, _windowH ){\r
                                \r
                        },\r
-                       QUIT: createMenubarItem( 'Quit'),\r
-                       EDIT: createMenubarItem( 'Edit'),\r
-                       WINDOW: createMenubarItem( 'Window'),\r
-                       HELP: pettanr.util.extend( createMenubarItem( 'Help'), {\r
-                                       createAjaxSelection: function( callback){\r
-                                               var elmLoading = document.createElement( 'li'),\r
-                                                       that = this,\r
-                                                       elmSelection = this.elm.getElementsByTagName( 'ul')[ 0];\r
-                                               elmSelection.appendChild( elmLoading);\r
-                                               elmLoading.className = 'loading';\r
-                                               elmLoading.style.height = '90px';                                                       \r
-\r
-                                               this.onShow = callback;\r
-                                               callback = null;\r
-                                               \r
-                                               delete this.createAjaxSelection;\r
-                                               return function(){\r
-                                                       elmSelection.removeChild( elmLoading);\r
-                                                       $( elmSelection).children( 'li').click( that.onClick);\r
-                                                       elmLoading = elmSelection = null;\r
-                                                       delete that.onShow;\r
-                                                       that = null;\r
-                                               }\r
+                       QUIT: createMenubarItem( 'Quit' ),\r
+                       EDIT: createMenubarItem( 'Edit' ),\r
+                       WINDOW: createMenubarItem( 'Window' ),\r
+                       HELP: pettanr.util.extend( createMenubarItem( 'Help' ), {\r
+                               createAjaxSelection: function( callback ){\r
+                                       var elmLoading   = document.createElement( 'li' ),\r
+                                               that         = this,\r
+                                               elmSelection = this.elm.getElementsByTagName( 'ul' )[ 0 ];\r
+                                       elmSelection.appendChild( elmLoading );\r
+                                       elmLoading.className    = 'loading';\r
+                                       elmLoading.style.height = '90px';                                                       \r
+\r
+                                       this.onShow = callback;\r
+                                       callback    = null;\r
+                                       \r
+                                       delete this.createAjaxSelection;\r
+                                       return function(){\r
+                                               elmSelection.removeChild( elmLoading );\r
+                                               $( elmSelection ).children( 'li' ).click( that.onClick );\r
+                                               elmLoading = elmSelection = null;\r
+                                               delete that.onShow;\r
+                                               that = null;\r
                                        }\r
-                               })\r
+                               }\r
+                       })\r
                }\r
        })();\r
 \r
@@ -471,10 +464,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
 \r
                var jqWindowOrigin,\r
                        closeButtonWidth;\r
-               var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){\r
+               var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH ){\r
                        var MOUSE_CURSOR = updateMouseCursor,\r
                                MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( \r
-                                       ( visible !== true ? 'show ' : 'hide ') +title,\r
+                                       ( visible !== true ? 'show ' : 'hide ' ) + title,\r
                                        null, onMenuClick, true\r
                                ),\r
                                jqStage,\r
@@ -486,7 +479,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                isDragging = false,\r
                                isResizing = false,\r
                                bodyIsTachable = false,\r
-                               instance;\r
+                               instance = this;\r
 \r
                        function onMenuClick(){\r
                                visible === true ? instance.close() : instance.open();\r
@@ -511,7 +504,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                w = _w;\r
                                h = _h;\r
                        }\r
-                       function bodyBackOrForward( isBack){\r
+                       function bodyBackOrForward( isBack ){\r
                                if( !instance) return;\r
                                if( bodyIsTachable === !isBack) return;\r
                                elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';\r
@@ -534,165 +527,159 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                e.stopPropagation();\r
                                return false;\r
                        }\r
-                       return {\r
-                               init: function( jqContainer){\r
-                                       /*\r
-                                        * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う.\r
-                                        */\r
-                                       instance = this;\r
-                                       \r
-                                       jqWindowOrigin = jqWindowOrigin || ( function(){\r
-                                               return $( $( '#windowTemplete').remove().html());\r
-                                       })();\r
-                                       closeButtonWidth = closeButtonWidth || ( function(){\r
-                                               return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
-                                       })();\r
-                                       \r
-                                       jqStage = jqEditor;\r
-                                       this.$ = jqWrapper = jqWindowOrigin.clone( true);\r
-                                       jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
-                                       headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;\r
-                                       elmBody = jqWrapper.children( '.window-body').get( 0);\r
-                                       elmBodyStyle = elmBody.style;\r
-                                       \r
-                                       if( bodyTempleteID) {\r
-                                               jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
-                                       } else {\r
-                                               jqWrapper.find( '.window-body-insert-position').remove();\r
-                                       }\r
-                                       CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
-                                       \r
-                                       this.onInit && this.onInit();\r
-                                       delete this.init;\r
-                               },\r
-                               x: function(){ return x;},\r
-                               y: function(){ return y;},\r
-                               w: function(){ return w;},\r
-                               h: function(){ return h;},\r
-                               $: null,\r
-                               title: function( _title){\r
-                                       typeof _title === 'string' && jqHeader.html( _title);\r
-                                       title = typeof _title === 'string' ? _title : title;\r
-                                       return title;\r
-                               },\r
-                               visible: visible,\r
-                               firstOpen: function(){\r
-                                       if( RESIZE_BUTTON_ENABLED === true){\r
-                                               footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height;\r
-                                               //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);\r
-                                       } else {\r
-                                               jqWrapper.find( '.window-footer').remove();\r
-                                       }\r
-                                       this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);\r
-                                       \r
-                                       update( x, y, w, h);\r
-                                       \r
-                                       delete this.firstOpen;\r
-                               },\r
-                               open: function(){\r
-                                       if( visible === true) return;\r
-                                       instance.visible = visible = true;\r
-                                       openWindow( instance);\r
-                                       MENUBAR_SELWCTION.title( 'hide ' +title);\r
-                                       \r
-                                       for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){\r
-                                               if( WINDOW_ARRAY[ i] === instance){\r
-                                                       WINDOW_ARRAY.splice( i, 1);\r
-                                                       WINDOW_ARRAY.unshift( instance);\r
-                                                       currentWindow = null;\r
-                                                       currentWindowIndex = -1;\r
-                                               }\r
-                                       }\r
-                               },\r
-                               onFadeIn: function(){\r
-                                       instance.firstOpen && instance.firstOpen();\r
-                                       instance.onOpen && setTimeout( callOnOpen, 0);\r
-                                       function callOnOpen(){\r
-                                               instance.onOpen( w, bodyH);\r
-                                       }\r
-                               },\r
-                               onFadeOut: function(){\r
-                                       var elmWrapper = jqWrapper.get(0);\r
-                                       elmWrapper.parentNode.removeChild( elmWrapper);\r
-                                       instance.onClose && setTimeout( instance.onClose, 0);\r
-                               },\r
-                               close: function(){\r
-                                       if( visible === false) return;\r
-                                       instance.visible = visible = false;\r
-                                       jqWrapper.fadeOut( instance.onFadeOut);\r
-                                       MENUBAR_SELWCTION.title( 'show ' +title);\r
-                               },\r
-                               bodyBackOrForward: bodyBackOrForward,\r
-                               onMouseDown: function( _mouseX, _mouseY){\r
-                                       if( RESIZE_BUTTON_ENABLED === true && x +w -20 <= _mouseX && _mouseX < x +w && y +headerH +bodyH < _mouseY && _mouseY <= y +h){\r
-                                               bodyBackOrForward( true);\r
-                                               isResizing = true;\r
-                                               startX = x;\r
-                                               startY = y;\r
-                                               startW = w;\r
-                                               startH = h;\r
-                                               offsetX = _mouseX;\r
-                                               offsetY = _mouseY;\r
-                                               MOUSE_CURSOR( 'nw-resize');\r
-                                               return;\r
-                                       }\r
-                                       \r
-                                       if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
-                                       if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){\r
-                                               instance.close();\r
-                                               return;\r
-                                       }\r
-                                       \r
-                                       isDragging = true;\r
-                                       MOUSE_CURSOR( 'move');                          \r
+                       this.init = function( jqContainer ){\r
+                               jqWindowOrigin = jqWindowOrigin || ( function(){\r
+                                       return $( $( '#windowTemplete').remove().html());\r
+                               })();\r
+                               closeButtonWidth = closeButtonWidth || ( function(){\r
+                                       return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
+                               })();\r
+                               \r
+                               jqStage = jqEditor;\r
+                               instance.$ = jqWrapper = jqWindowOrigin.clone( true);\r
+                               jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
+                               headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;\r
+                               elmBody = jqWrapper.children( '.window-body').get( 0);\r
+                               elmBodyStyle = elmBody.style;\r
+                               \r
+                               if( bodyTempleteID) {\r
+                                       jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
+                               } else {\r
+                                       jqWrapper.find( '.window-body-insert-position').remove();\r
+                               }\r
+                               CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
+                               \r
+                               instance.onInit && instance.onInit();\r
+                               delete instance.init;\r
+                       };\r
+                       this.x = function(){ return x;};\r
+                       this.y = function(){ return y;};\r
+                       this.w = function(){ return w;};\r
+                       this.h = function(){ return h;};\r
+                       this.$ = null;\r
+                       this.title = function( _title ){\r
+                               if( Type.isString( _title ) === true ){\r
+                                       jqHeader.html( _title );\r
+                                       title = _title;\r
+                               }\r
+                               return title;\r
+                       };\r
+                       this.visible   = visible;\r
+                       this.firstOpen = function(){\r
+                               if( RESIZE_BUTTON_ENABLED === true){\r
+                                       footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer' ).get( 0 ) ).height;\r
+                               } else {\r
+                                       jqWrapper.find( '.window-footer').remove();\r
+                               }\r
+                               instance.onFirstOpen && instance.onFirstOpen( w, h - headerH - footerH );\r
+                               \r
+                               update( x, y, w, h);\r
+                               \r
+                               delete instance.firstOpen;\r
+                       };\r
+                       this.open = function(){\r
+                               if( visible === true) return;\r
+                               instance.visible = visible = true;\r
+                               openWindow( instance);\r
+                               MENUBAR_SELWCTION.title( 'hide ' +title);\r
+                               \r
+                               for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){\r
+                                       if( WINDOW_ARRAY[ i] === instance){\r
+                                               WINDOW_ARRAY.splice( i, 1);\r
+                                               WINDOW_ARRAY.unshift( instance);\r
+                                               currentWindow = null;\r
+                                               currentWindowIndex = -1;\r
+                                       };\r
+                               };\r
+                       };\r
+                       this.onFadeIn = function(){\r
+                               instance.firstOpen && instance.firstOpen();\r
+                               instance.onOpen && setTimeout( callOnOpen, 0);\r
+                               function callOnOpen(){\r
+                                       instance.onOpen( w, bodyH );\r
+                               };\r
+                       };\r
+                       this.onFadeOut = function(){\r
+                               var elmWrapper = jqWrapper.get(0);\r
+                               elmWrapper.parentNode.removeChild( elmWrapper);\r
+                               instance.onClose && setTimeout( instance.onClose, 0);\r
+                       };\r
+                       this.close = function(){\r
+                               if( visible === false) return;\r
+                               instance.visible = visible = false;\r
+                               jqWrapper.fadeOut( instance.onFadeOut);\r
+                               MENUBAR_SELWCTION.title( 'show ' +title);\r
+                       };\r
+                       this.bodyBackOrForward = bodyBackOrForward;\r
+                       this.onMouseDown = function( _mouseX, _mouseY ){\r
+                               if( RESIZE_BUTTON_ENABLED === true && x + w -20 <= _mouseX && _mouseX < x + w && y + headerH + bodyH < _mouseY && _mouseY <= y + h ){\r
+                                       bodyBackOrForward( true);\r
+                                       isResizing = true;\r
                                        startX = x;\r
                                        startY = y;\r
                                        startW = w;\r
                                        startH = h;\r
                                        offsetX = _mouseX;\r
                                        offsetY = _mouseY;\r
-                               },\r
-                               onMouseUp: function( _mouseX, _mouseY){\r
-                                       isDragging = isResizing = false;\r
-                                       MOUSE_CURSOR( '');\r
-                               },\r
-                               onMouseMove: function( _mouseX, _mouseY){\r
-                                       var _updateX = _mouseX -offsetX,\r
-                                               _updateY = _mouseY -offsetY;\r
-                                       \r
-                                       if( isResizing === true){\r
-                                               var _w = startW +_updateX,\r
-                                                       _h = startH +_updateY;\r
-                                               update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);\r
-                                               return;\r
-                                       } else\r
-                                       if( isDragging === true) {\r
-                                               update( startX +_updateX, startY +_updateY);\r
-                                               return;\r
-                                       } else\r
-                                       if( x > _mouseX || x +w < _mouseX ) return;\r
-       \r
-                                       ( y <= _mouseY && y +headerH >= _mouseY ) ?\r
-                                               MOUSE_CURSOR( 'pointer') :      // hit to header\r
-                                               MOUSE_CURSOR( '');\r
-                                       bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);\r
-                               },\r
-                               onMouseOut: function( _mouseX, _mouseY){\r
-                                       bodyIsTachable === true && bodyBackOrForward( true);\r
-                                       isDragging = false;\r
-                                       MOUSE_CURSOR( '');\r
-                               },\r
-                               busy: function(){\r
-                                       return isDragging === true || isResizing === true;\r
-                               },\r
-                               bodyHeight: function(){\r
-                                       return  bodyH;\r
+                                       MOUSE_CURSOR( 'nw-resize');\r
+                                       return;\r
                                }\r
-                       }\r
+                               \r
+                               if( x > _mouseX || y > _mouseY || x + w < _mouseX || y + headerH < _mouseY ) return;\r
+                               if( CLOSE_BUTTON_ENABLED === true && x + w - closeButtonWidth < _mouseX){\r
+                                       instance.close();\r
+                                       return;\r
+                               }\r
+                               \r
+                               isDragging = true;\r
+                               MOUSE_CURSOR( 'move');                          \r
+                               startX = x;\r
+                               startY = y;\r
+                               startW = w;\r
+                               startH = h;\r
+                               offsetX = _mouseX;\r
+                               offsetY = _mouseY;\r
+                       };\r
+                       this.onMouseUp = function( _mouseX, _mouseY ){\r
+                               isDragging = isResizing = false;\r
+                               MOUSE_CURSOR( '');\r
+                       };\r
+                       this.onMouseMove = function( _mouseX, _mouseY ){\r
+                               var _updateX = _mouseX - offsetX,\r
+                                       _updateY = _mouseY - offsetY;\r
+                               \r
+                               if( isResizing === true){\r
+                                       var _w = startW +_updateX,\r
+                                               _h = startH +_updateY;\r
+                                       update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h );\r
+                                       return;\r
+                               } else\r
+                               if( isDragging === true) {\r
+                                       update( startX + _updateX, startY + _updateY);\r
+                                       return;\r
+                               } else\r
+                               if( x > _mouseX || x + w < _mouseX ) return;\r
+\r
+                               ( y <= _mouseY && y +headerH >= _mouseY ) ?\r
+                                       MOUSE_CURSOR( 'pointer') :      // hit to header\r
+                                       MOUSE_CURSOR( '');\r
+                               bodyBackOrForward( y + headerH > _mouseY || y + headerH + bodyH < _mouseY);\r
+                       };\r
+                       this.onMouseOut = function( _mouseX, _mouseY ){\r
+                               bodyIsTachable === true && bodyBackOrForward( true );\r
+                               isDragging = false;\r
+                               MOUSE_CURSOR( '' );\r
+                       };\r
+                       this.busy = function(){\r
+                               return isDragging === true || isResizing === true;\r
+                       };\r
+                       this.bodyHeight = function(){\r
+                               return bodyH;\r
+                       };\r
                };\r
                \r
-               function getCurrentIndex( _mouseX, _mouseY){\r
-                       if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
+               function getCurrentIndex( _mouseX, _mouseY ){\r
+                       if( currentWindow && currentWindow.busy() === true ) return currentWindowIndex;\r
                        var l = WINDOW_ARRAY.length,\r
                                _currentWindow = null,\r
                                _win, _x, _y;\r
@@ -712,7 +699,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        currentWindow = _currentWindow;\r
                        return currentWindowIndex;\r
                }\r
-               function openWindow( _window){\r
+               function openWindow( _window ){\r
                        if( _window.visible !== true) return;\r
                        var _jqWindow = _window.$;\r
                        jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない.\r
@@ -780,22 +767,22 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                 * 画面外に出るwindowの移動\r
                                 */\r
                        },\r
-                       createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
+                       createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH ){\r
                                opt_visible = opt_visible !== false;\r
                                opt_closeButtonEnabled = opt_closeButtonEnabled === true;\r
                                opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;\r
-                               opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;\r
-                               opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
+                               opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH ) ? w : DEFAULT_MIN_WINDOW_WIDTH;\r
+                               opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT ) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
                                \r
-                               var _window = pettanr.util.extend(\r
-                                       new WindowClass(\r
-                                               bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH\r
-                                       ),\r
-                                       EXTENDS\r
-                               );\r
-                               WINDOW_ARRAY.unshift( _window);\r
-                               WINDOWS_CONTROL.init === undefined && _window.init( jqContainer);\r
-                               WINDOWS_CONTROL.init === undefined && openWindow( _window);\r
+                               var _window = new WindowClass( bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH );\r
+                               for( var key in EXTENDS ){\r
+                                       _window[ key ] = EXTENDS[ key ];\r
+                               }\r
+                               WINDOW_ARRAY.unshift( _window );\r
+                               if( Type.isUndefined( WINDOWS_CONTROL.init ) === true ){\r
+                                       _window.init( jqContainer );\r
+                                       openWindow( _window );\r
+                               }\r
                                return _window;\r
                        }\r
                }\r
@@ -819,7 +806,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
 \r
                function addImage( e){\r
-                       setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);\r
+                       IMAGE_EXPLORER_WINDOW.open();// setTimeout( IMAGE_EXPLORER_WINDOW.open, 0);\r
                        instance.bodyBackOrForward( true );\r
                        e && e.preventDefault && e.preventDefault();\r
                        return false;\r
@@ -892,7 +879,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        instance = this;\r
                                        delete this.onInit;\r
                                },\r
-                               onOpen: function( _w, _h){\r
+                               onOpen: function( _w, _h ){\r
                                        finder = finder || pettanr.finder.createFinder(\r
                                                pettanr.editor,\r
                                                document.getElementById( 'image-exproler-container'),\r
@@ -948,14 +935,14 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);\r
                                        inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);\r
                                        inputAspectRatio = $( '#comic-element-keep-aspect');\r
-                                       delete this.onFirstOpen;\r
+                                       delete INFOMATION_WINDOW.onFirstOpen;\r
                                },\r
                                onResize: function(  _w, _h){\r
                                        jqComicElementInformation.css( {\r
                                                height: _h\r
                                        });\r
                                },\r
-                               update: function( currentElement){\r
+                               update: function( currentElement ){\r
                                        \r
                                        if( currentLock === true && currentElement === null) return;\r
                                        \r
@@ -1004,15 +991,15 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                                _elementType === 1 && inputA.value( a);\r
                                                inputW.value( w);\r
                                                inputH.value( h);\r
-                                               _elementType === 0 && inputPercentW.value( wPercent);\r
-                                               _elementType === 0 && inputPercentH.value( hPercent);                                   \r
+                                               _elementType === 0 && inputPercentW.value( wPercent );\r
+                                               _elementType === 0 && inputPercentH.value( hPercent );\r
                                        } else {\r
                                                \r
                                        }\r
                                },\r
-                               lock: function( _currentLock){\r
+                               lock: function( _currentLock ){\r
                                        currentLock = !!_currentLock;\r
-                                       this.bodyBackOrForward( !currentLock);\r
+                                       INFOMATION_WINDOW.bodyBackOrForward( !currentLock );\r
                                }\r
                        },\r
                        'infomation-window', 'Infomation', 0, 30, 200, 180, true\r
@@ -1029,14 +1016,13 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        jqNaviItems,\r
                        jqPages,\r
                        currentPageIndex = 0,\r
-                       numPage = 0,\r
-                       HELP = MENU_BAR_CONTROL.HELP,\r
-                       onLoadFunction = HELP.createAjaxSelection( onAjaxStart),\r
-                       instance;\r
+                       numPage          = 0,\r
+                       HELP             = MENU_BAR_CONTROL.HELP,\r
+                       onLoadFunction   = HELP.createAjaxSelection( onAjaxStart );\r
 \r
-               function onAjaxStart( _pageIndex){\r
+               function onAjaxStart( _pageIndex ){\r
                        currentPageIndex = _pageIndex || currentPageIndex;\r
-                       if( onHelpLoad !== null){\r
+                       if( onHelpLoad !== null ){\r
                                $.ajax({\r
                                        url:            'help/jp.xml',\r
                                        dataType:       'xml',\r
@@ -1046,99 +1032,96 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        }\r
                        onAjaxStart = new Function;\r
                }\r
-               var onHelpLoad = function( _xml){\r
-                       var jqXML = $( _xml),\r
-                               helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),\r
-                               elmNavi = document.createElement( 'div'),\r
-                               elmItemOrigin = document.createElement( 'a'),\r
-                               elmPages = document.createElement( 'div'),\r
-                               elmPageOrigin = document.createElement( 'div'),\r
-                               elmTitleOrigin = document.createElement( 'h2'),\r
+               var onHelpLoad = function( _xml ){\r
+                       var jqXML          = $( _xml ),\r
+                               helpTitle      = jqXML.find( 'pages' ).eq( 0 ).attr( 'title' ),\r
+                               elmNavi        = document.createElement( 'div' ),\r
+                               elmItemOrigin  = document.createElement( 'a' ),\r
+                               elmPages       = document.createElement( 'div' ),\r
+                               elmPageOrigin  = document.createElement( 'div' ),\r
+                               elmTitleOrigin = document.createElement( 'h2' ),\r
                                elmPage;\r
-                       elmNavi.className = 'sidenavi';\r
+                       elmNavi.className       = 'sidenavi';\r
                        elmItemOrigin.className = 'sidenavi-item';\r
-                       elmItemOrigin.href = '#';\r
-                       elmPages.className = 'page-contents';\r
+                       elmItemOrigin.href      = '#';\r
+                       elmPages.className      = 'page-contents';\r
                        elmPageOrigin.className = 'page-content main';\r
                        elmPageOrigin.appendChild( elmTitleOrigin);\r
                        \r
-                       //helpTitle && instance.title( helpTitle);\r
-                       \r
-                       jqXML.find( 'page').each( function(){\r
-                               var xmlPage = $( this),\r
-                                       title = xmlPage.attr( 'title'),\r
+                       jqXML.find( 'page' ).each( function(){\r
+                               var xmlPage = $( this ),\r
+                                       title = xmlPage.attr( 'title' ),\r
                                        content = xmlPage.text();\r
                                \r
                                elmItemOrigin.innerHTML = title;\r
-                               elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
+                               elmNavi.appendChild( elmItemOrigin.cloneNode( true ));\r
                                \r
                                elmTitleOrigin.innerHTML = title;\r
                                \r
-                               elmPage = elmPageOrigin.cloneNode( true);\r
+                               elmPage = elmPageOrigin.cloneNode( true );\r
                                elmPage.innerHTML = content;\r
                                \r
                                pettanr.util.cleanElement( elmPage);\r
                                \r
-                               if( elmPage.childNodes.length > 0){\r
-                                       elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);\r
+                               if( elmPage.childNodes.length > 0 ){\r
+                                       elmPage.insertBefore( elmTitleOrigin.cloneNode( true ), elmPage.childNodes[0]);\r
                                } else {\r
-                                       elmPage.appendChild( elmTitleOrigin.cloneNode( true));\r
+                                       elmPage.appendChild( elmTitleOrigin.cloneNode( true ));\r
                                }\r
-                               elmPages.appendChild( elmPage);\r
+                               elmPages.appendChild( elmPage );\r
                                \r
-                               HELP.createSelection( title, null, onSelectionClick, true);\r
+                               HELP.createSelection( title, null, onSelectionClick, true );\r
                                ++numPage;\r
                        });\r
                        onLoadFunction();\r
                        onLoadFunction = null;\r
                        \r
-                       jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
+                       jqAjaxContents.removeClass( 'loading' ).append( elmNavi, elmPages );\r
                        \r
-                       jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);\r
-                       jqPages = jqAjaxContents.find( '.page-content');\r
-                       jqPages.find( 'a').click( onInnerLinkClick);\r
+                       jqNaviItems = jqAjaxContents.find( 'a.' + elmItemOrigin.className ).click( onNaviClick );\r
+                       jqPages = jqAjaxContents.find( '.page-content' );\r
+                       jqPages.find( 'a').click( onInnerLinkClick );\r
                        \r
-                       setTimeout( jumpPage, 0);\r
+                       setTimeout( jumpPage, 0 );\r
                }\r
-               function onSelectionClick( _pageIndex){\r
+               function onSelectionClick( _pageIndex ){\r
                        HELP_DOCUMENTS_WINDOW.open();\r
-                       jumpPage( _pageIndex);\r
+                       jumpPage( _pageIndex );\r
                }\r
-               function jumpPage( _index){\r
-                       if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index){\r
+               function jumpPage( _index ){\r
+                       if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index ){\r
                                currentPageIndex = _index;\r
                        }\r
-                       jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
-                       jqPages.hide().eq( currentPageIndex).show();\r
+                       jqNaviItems.removeClass( 'current' ).eq( currentPageIndex).addClass( 'current' );\r
+                       jqPages.hide().eq( currentPageIndex ).show();\r
                }\r
-               function onNaviClick( e){\r
+               function onNaviClick( e ){\r
                        // this は <a>\r
-                       jumpPage( pettanr.util.getChildIndex( this.parentNode, this));\r
+                       jumpPage( pettanr.util.getChildIndex( this.parentNode, this ));\r
                        e.stopPropagation();\r
                        return false;\r
                }\r
-               function onInnerLinkClick( e){\r
-                       var jump = ( this.href || '').split( '#jump'),\r
+               function onInnerLinkClick( e ){\r
+                       var jump = ( this.href || '').split( '#jump' ),\r
                                n = jump[1];\r
                        if( !n) return;\r
-                       jumpPage( '' + parseFloat( n) === n ? parseFloat( n) : -1);\r
+                       jumpPage( '' + parseFloat( n ) === n ? parseFloat( n ) : -1 );\r
                        e.stopPropagation();\r
                        return false;                           \r
                }\r
                return WINDOWS_CONTROL.createWindow(\r
                        {\r
                                onInit: function(){\r
-                                       instance = this;\r
-                                       jqAjaxContents = this.$.find( '.window-body').addClass( 'loading');\r
-                                       delete this.onInit;\r
+                                       jqAjaxContents = HELP_DOCUMENTS_WINDOW.$.find( '.window-body' ).addClass( 'loading' );\r
+                                       delete HELP_DOCUMENTS_WINDOW.onInit;\r
                                },\r
-                               onFirstOpen: function( _w, _h){\r
-                                       jqAjaxContents.css( { height: _h});\r
+                               onFirstOpen: function( _w, _h ){\r
+                                       jqAjaxContents.css( { height: _h });\r
                                        onAjaxStart();\r
-                                       delete this.onFirstOpen;\r
+                                       delete HELP_DOCUMENTS_WINDOW.onFirstOpen;\r
                                },\r
-                               onResize: function( _w, _h){\r
-                                       jqAjaxContents && jqAjaxContents.css( { height: _h});\r
+                               onResize: function( _w, _h ){\r
+                                       jqAjaxContents && jqAjaxContents.css( { height: _h });\r
                                }\r
                        },\r
                        null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300\r
@@ -1151,14 +1134,14 @@ pettanr.editor = pettanr.view.registerApplication( function(){
  *  - panelResizeListener\r
  */\r
        var GRID_CONTROL = ( function(){\r
-               var ELM_GRID = document.getElementById( 'grid'),\r
+               var ELM_GRID = document.getElementById( 'grid' ),\r
                        BG_URL = "url('images/grid.gif')",\r
                        jqGrid,\r
                        visible = false;\r
 \r
                return {\r
                        init: function(){\r
-                               jqGrid = $( ELM_GRID);\r
+                               jqGrid = $( ELM_GRID );\r
                                delete GRID_CONTROL.init;\r
                        },\r
                        open: function(){\r
@@ -1167,8 +1150,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        close: function(){\r
                                \r
                        },\r
-                       onPanelResize: function( _panelX, _panelY){\r
-                               ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');\r
+                       onPanelResize: function( _panelX, _panelY ){\r
+                               ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px' ].join( '' );\r
                                ELM_GRID.style.height = windowH +'px';\r
                        },\r
                        enabled: function(){\r
@@ -1178,7 +1161,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                jqGrid.css( {\r
                                        opacity:        '',\r
                                        fliter:         ''\r
-                               }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
+                               }).stop()[ visible === true ? 'fadeOut' : 'fadeIn' ]();\r
                                \r
                                visible = !visible;\r
                                \r
@@ -1597,15 +1580,15 @@ pettanr.editor = pettanr.view.registerApplication( function(){
  */\r
        var TAIL_OPERATOR = ( function(){\r
                var     MOUSE_CURSOR = updateMouseCursor,\r
-                       ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
-                       SIZE = pettanr.util.getElementSize( ELM_MOVER).width,\r
-                       SIN = Math.sin,\r
-                       COS = Math.cos,\r
-                       ATAN = Math.atan,\r
-                       FLOOR = Math.floor,\r
-                       DEG_TO_RAD = Math.PI / 180,\r
-                       RAD_TO_DEG = 1 /DEG_TO_RAD,\r
-                       currentText = null,\r
+                       ELM_MOVER    = document.getElementById( 'balloon-tail-mover'),\r
+                       SIZE         = pettanr.util.getElementSize( ELM_MOVER).width,\r
+                       SIN          = Math.sin,\r
+                       COS          = Math.cos,\r
+                       ATAN         = Math.atan,\r
+                       FLOOR        = Math.floor,\r
+                       DEG_TO_RAD   = Math.PI / 180,\r
+                       RAD_TO_DEG   = 1 / DEG_TO_RAD,\r
+                       currentText  = null,\r
                        tailX, tailY,\r
                        x, y, w, h,\r
                        balloonW, balloonH, balloonA, radA,\r
@@ -1613,13 +1596,13 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        startA;\r
                \r
                return {\r
-                       update: function ( _w, _h, _a){\r
+                       update: function ( _w, _h, _a ){\r
                                balloonW = _w !== undefined ? _w : balloonW;\r
                                balloonH = _h !== undefined ? _h : balloonH;\r
                                balloonA = _a !== undefined ? _a : balloonA;\r
-                               radA = balloonA * DEG_TO_RAD;\r
-                               tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);\r
-                               tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);\r
+                               radA = ( balloonA - 90 ) * DEG_TO_RAD;\r
+                               tailX = FLOOR( ( ( COS( radA ) / 2 + 0.5 ) * ( balloonW + SIZE )) - SIZE / 2);\r
+                               tailY = FLOOR( ( ( SIN( radA ) / 2 + 0.5 ) * ( balloonH + SIZE )) - SIZE / 2);\r
                                ELM_MOVER.style.left = tailX +'px';\r
                                ELM_MOVER.style.top = tailY +'px';\r
                                //log.html( [ balloonW, balloonH, balloonA].join());\r
@@ -1629,12 +1612,12 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                 * visibilityのほうがいい, display:none だと ie で描画が狂う\r
                                 */\r
                                ELM_MOVER.style.visibility = '';\r
-                               this.update( _currentText.w, _currentText.h, _currentText.angle());\r
+                               TAIL_OPERATOR.update( _currentText.w, _currentText.h, _currentText.angle() );\r
                                currentText = _currentText;\r
                        },\r
                        hitTest: function( _mouseX, _mouseY){\r
-                               var _x = tailX -SIZE /2,\r
-                                       _y = tailY -SIZE /2;\r
+                               var _x = tailX -SIZE / 2,\r
+                                       _y = tailY -SIZE / 2;\r
                                        ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
                                ret === true && MOUSE_CURSOR( 'move');\r
                                return ret;\r
@@ -1644,10 +1627,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                currentText = null;\r
                        },\r
                        onStart: function( _currentText, _mouseX, _mouseY){\r
-                               if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT) return false;\r
+                               if( _currentText.type !== PANEL_ELEMENT_TYPE_TEXT ) return false;\r
                                x = _currentText.x;\r
                                y = _currentText.y;\r
-                               if( this.hitTest( _mouseX -x, _mouseY -y) === true){\r
+                               if( TAIL_OPERATOR.hitTest( _mouseX -x, _mouseY -y ) === true){\r
                                        w = _currentText.w;\r
                                        h = _currentText.h;\r
                                        currentText = _currentText;\r
@@ -1657,16 +1640,15 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                return false;\r
                        },\r
                        onDrag: function( _mouseX, _mouseY){\r
-                               _mouseX = _mouseX -x -w /2;\r
-                               _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換\r
-                               \r
-                               this.update( w, h,\r
+                               _mouseX = _mouseX - x - w / 2;\r
+                               _mouseY = _mouseY - y - h / 2; //Balloonの中心を0,0とする座標系に変換\r
+                               TAIL_OPERATOR.update( w, h,\r
                                        _mouseX !== 0 ?\r
-                                               ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
-                                               _mouseY > 0 ? 90 : -90\r
+                                               ATAN( _mouseY / _mouseX ) * RAD_TO_DEG + ( _mouseX > 0 ? 90 : 270 ) :\r
+                                               _mouseY > 0 ? 180 : 0\r
                                );\r
-                               currentText && currentText.angle( Math.floor( balloonA + 0.5 ));\r
-                               INFOMATION_WINDOW.update( currentText);\r
+                               currentText && currentText.angle( FLOOR( balloonA + 0.5 ));\r
+                               INFOMATION_WINDOW.update( currentText );\r
                        },\r
                        onFinish: function(){\r
                                startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);\r
@@ -2219,23 +2201,18 @@ pettanr.editor = pettanr.view.registerApplication( function(){
  */\r
        var     jqImageElementOrigin;\r
        var ImageElementClass = function( data ){\r
-               jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
-               \r
-               var JQ_WRAPPER = jqImageElementOrigin.clone( true ),\r
-                       w = data.width,\r
-                       h = data.height,\r
-                       x, y, z,\r
-                       flipH = w < 0 ? -1 : 1,\r
-                       flipV = h < 0 ? -1 : 1,\r
+               jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete' ).remove().html() );\r
+               \r
+               var jqWrap          = jqImageElementOrigin.clone( true ),\r
+                       flipH           = data.width  < 0 ? -1 : 1,\r
+                       flipV           = data.height < 0 ? -1 : 1,\r
                        resourcePicture = data.resource_picture,\r
-                       actualW = data.resource_picture.width,\r
-                       actualH = data.resource_picture.height,\r
+                       actualW         = data.resource_picture.width,\r
+                       actualH         = data.resource_picture.height,\r
                        reversibleImage = null,\r
-                       instance = this;\r
-               w = Math.floor( w );\r
-               h = Math.floor( h );\r
-\r
-               function onAnimeComplete(){\r
+                       instance        = this,\r
+                       x, y, z, w, h;\r
+               function flipReversibleImage(){\r
                        reversibleImage && reversibleImage.resize( flipH * w, flipV * h );\r
                }\r
                function updateResourcePicture( _resourcePicture ){\r
@@ -2248,25 +2225,26 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        [ pettanr.CONST.RESOURCE_PICTURE_PATH, _resourcePicture.id, '.', _resourcePicture.ext ].join(''),\r
                                        flipH * w, flipV * h\r
                                );\r
-                       if( reversibleImage !== null){\r
-                               JQ_WRAPPER.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );\r
+                       if( reversibleImage !== null ){\r
+                               jqWrap.children( reversibleImage.elm ).replaceWith( _reversibleImage.elm );\r
                                reversibleImage.destroy();\r
                        } else {\r
-                               JQ_WRAPPER.append( _reversibleImage.elm );\r
+                               jqWrap.append( _reversibleImage.elm );\r
                        }\r
                        reversibleImage = _reversibleImage;\r
                }\r
                /* global methods */\r
-               this.$ = JQ_WRAPPER;\r
+               this.$ = jqWrap;\r
                //this.x = x;\r
                //this.y = y;\r
                //this.w = w;\r
                //this.h = h;                                   \r
                this.z = data.z;\r
-               this.timing = data.t;\r
+               this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;\r
+               this.keepSize = false;\r
                this.init = function(){\r
                        updateResourcePicture( data.resource_picture );\r
-                       instance.resize( data.x, data.y, data.width, data.height );\r
+                       instance.resize( data.x, data.y, Math.abs( data.width ), Math.abs( data.height ) );\r
                        delete instance.init;\r
                }\r
                this.flip = function( _updateH, _updateV ){\r
@@ -2275,12 +2253,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        flipV = _updateV === true ? -flipV : flipV;\r
                        reversibleImage.resize( flipH * w, flipV * h );\r
                }\r
-               this.flipV = function(){\r
-                       return flipV;\r
-               }\r
-               this.flipH = function(){\r
-                       return flipH;\r
-               }\r
+               this.flipV = function(){ return flipV;}\r
+               this.flipH = function(){ return flipH;}\r
                this.resourcePicture = function( _resourcePicture ){\r
                        if( _resourcePicture && _resourcePicture !== resourcePicture ){\r
                                HISTORY_CONTROL.saveState( updateResourcePicture, resourcePicture, _resourcePicture );\r
@@ -2293,19 +2267,18 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                }\r
                this.actualW = function(){ return actualW;}\r
                this.actualH = function(){ return actualH;}\r
-               this.keepSize = false;\r
                this.resize = function( _x, _y, _w, _h, animate ){\r
-                       instance.x = x = _x !== undefined ? _x : x;\r
-                       instance.y = y = _y !== undefined ? _y : y;\r
-                       instance.w = w = _w !== undefined ? _w : w;\r
-                       instance.h = h = _h !== undefined ? _h : h;\r
-                       JQ_WRAPPER[ animate === true ? 'animate' : 'css' ]( { \r
+                       instance.x = x = Type.isFinite( _x ) === true ? _x : x;\r
+                       instance.y = y = Type.isFinite( _y ) === true ? _y : y;\r
+                       instance.w = w = Type.isFinite( _w ) === true ? _w : w;\r
+                       instance.h = h = Type.isFinite( _h ) === true ? _h : h;\r
+                       jqWrap[ animate === true ? 'animate' : 'css' ]( { \r
                                left:   x,\r
                                top:    y,\r
                                width:  w,\r
                                height: h\r
-                       }, 250, onAnimeComplete );\r
-                       animate !== true && onAnimeComplete();\r
+                       }, 250,  flipReversibleImage );\r
+                       animate !== true && flipReversibleImage();\r
                }\r
                this.animate = function ( _x, _y, _w, _h, _flipH, _flipV ){\r
                        flipH = _flipH !== undefined ? _flipH : flipH;\r
@@ -2316,8 +2289,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        delete instance.destroy;\r
                        \r
                        reversibleImage.destroy();\r
-                       JQ_WRAPPER.stop().remove();\r
-                       JQ_WRAPPER = reversibleImage = resourcePicture = data = instance = null;\r
+                       jqWrap.stop().remove();\r
+                       jqWrap = reversibleImage = resourcePicture = data = instance = null;\r
                }\r
        }\r
        ImageElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_IMAGE );\r
@@ -2351,7 +2324,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        elmText = JQ_WRAPPER.find( 'td,.speach-inner' ).get( 0 ),\r
                        type     = data.balloon_template_id,\r
                        text     = ( function(){\r
-                               var _speachs = data.speaches_attributes;\r
+                               var _speachs = data.speeches_attributes;\r
                                for( var k in _speachs ){\r
                                        return _speachs[ k ].content || '';\r
                                }\r
@@ -2390,26 +2363,23 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                //this.w = w;\r
                //this.h = h;\r
                this.z = data.z;\r
-               this.timing = data.t;\r
+               this.timing = data.t || PANEL_ELEMENT_ARRAY.length + 1;\r
                this.init = function(){\r
                        updateText();\r
                        instance.resize( data.x, data.y, data.width, data.height, data.tail );\r
                        delete instance.init;\r
-               }\r
+               };\r
                this.angle = function( _a ){\r
                        _a !== undefined && instance.resize( x, y, w, h, _a );\r
-                       return a >= 0 ? a : a + 360;\r
-               }\r
+                       return a;\r
+               };\r
                this.text = function( _text ){\r
                        if( _text && text !== _text) {\r
                                HISTORY_CONTROL.saveState( updateText, text || '', _text );\r
                                updateText( _text );\r
                        }\r
                        return text;\r
-               }\r
-               this.getBalloonURL = function(){\r
-                       return balloon.getURL();\r
-               }\r
+               };\r
                this.resize = function( _x, _y, _w, _h, _a, animate ){\r
                        instance.x = x = _x !== undefined ? _x : x;\r
                        instance.y = y = _y !== undefined ? _y : y;\r
@@ -2425,17 +2395,17 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                }, 250, resizeBalloon\r
                        );              \r
                        animate !== true && resizeBalloon();\r
-               }\r
+               };\r
                this.animate = function ( _x, _y, _w, _h, _a ){\r
                        instance.resize( _x, _y, _w, _h, _a, true );\r
-               }\r
+               };\r
                this.destroy = function(){\r
                        delete instance.destroy;\r
                        \r
                        JQ_WRAPPER.stop().remove();\r
                        balloon.destroy();\r
                        JQ_WRAPPER = elmText = data = balloon = instance = null;\r
-               }\r
+               };\r
        }\r
        TextElementClass.prototype = new AbstractComicElement( PANEL_ELEMENT_TYPE_TEXT );\r
 \r
@@ -2473,36 +2443,35 @@ pettanr.editor = pettanr.view.registerApplication( function(){
         * 2. renumber z\r
         */\r
                function appendComicElement( _panelElement ) {\r
-                       var z = _panelElement.z,\r
+                       var z = Type.isFinite( _panelElement.z ) === true ? _panelElement.z : -1,\r
                                l = PANEL_ELEMENT_ARRAY.length,\r
                                _jqElm = _panelElement.$.stop().css( {\r
                                        filter:         '',\r
                                        opacity:        ''\r
                                });\r
-                       if( typeof z !== 'number' || z < 0 || z >= l ){\r
+                       if( z < 0 ){\r
                                PANEL_ELEMENT_ARRAY.unshift( _panelElement );\r
-                               ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
+                               // ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
+                               renumber();\r
                                _jqElm.fadeIn();\r
-                       } else\r
-                       if( l === 0 ){\r
-                               PANEL_ELEMENT_ARRAY.push( _panelElement );\r
-                               ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
                        } else {\r
-                               var insertIndex = 0;\r
                                for( var i = 0; i < l; ++i ){\r
-                                       if( PANEL_ELEMENT_ARRAY[ i ].z <= z ){\r
-                                               insertIndex = i;\r
-                                               break;\r
-                                       }\r
+                                       if( PANEL_ELEMENT_ARRAY[ i ].z < z ) break;\r
                                }\r
-                               PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm.fadeIn() );\r
-                               PANEL_ELEMENT_ARRAY.splice( insertIndex, 0, _panelElement );\r
+                               if( i === l ){\r
+                                       PANEL_ELEMENT_ARRAY.push( _panelElement );\r
+                                       //ELM_CONTAINER.appendChild( _jqElm.get( 0 ));\r
+                               } else {\r
+                                       PANEL_ELEMENT_ARRAY.splice( i, 0, _panelElement );\r
+                                       //PANEL_ELEMENT_ARRAY[ insertIndex ].$.before( _jqElm );\r
+                               }\r
+                               renumber();\r
+                               _jqElm.fadeIn();\r
                        }\r
-                       renumber();\r
                }\r
                function removeComicElement( _panelElement ) {\r
                        var l = PANEL_ELEMENT_ARRAY.length;\r
-                       for( var i=0; i<l; ++i){\r
+                       for( var i=0; i<l; ++i ){\r
                                if( PANEL_ELEMENT_ARRAY[ i ] === _panelElement ){\r
                                        PANEL_ELEMENT_ARRAY.splice( i, 1 );\r
                                        renumber();\r
@@ -2514,10 +2483,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                        return;\r
                                }\r
                        }\r
-                       function onFadeOut(){\r
-                               this.parentNode.removeChild( this );\r
-                       }\r
                }\r
+               function onFadeOut(){\r
+                       this.parentNode.removeChild( this );\r
+               }               \r
                function restoreComicElement( arg ){\r
                        var isAppend = arg[ 0 ],\r
                                comicElement = arg[ 1 ];\r
@@ -2533,34 +2502,36 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        for( var i=0; i < l; ++i){\r
                                _panelElement = PANEL_ELEMENT_ARRAY[ i ];\r
                                jqElm = _panelElement.$;\r
+                               i === 0 && ELM_CONTAINER.appendChild( jqElm.get( 0 ));\r
                                jqNext && jqNext.before( jqElm );\r
-                               _panelElement.z = l -i -1;\r
+                               if( phase === 1 ) _panelElement.z = l - i - 1;\r
                                jqNext = jqElm;\r
                        }\r
                }\r
                function replaceComicElement( _panelElement, goForward ){\r
                        // PANEL_ELEMENT_ARRAYの再構築\r
                        var l = PANEL_ELEMENT_ARRAY.length,\r
-                               i = ( function(){\r
-                                       for( var ret = 0; ret < l; ++ret ){\r
-                                               if( PANEL_ELEMENT_ARRAY[ ret] === _panelElement ) return ret;\r
-                                       }\r
-                                       return -1;\r
-                               })();\r
+                               i = -1;\r
+                       for( var j = 0; j < l; ++j ){\r
+                               if( PANEL_ELEMENT_ARRAY[ j ] === _panelElement ){\r
+                                       i = j;\r
+                                       break;\r
+                               };\r
+                       }\r
                        if( i === -1) return false;\r
-                       if( goForward === true){\r
-                               if( i === 0) return false;\r
-                               PANEL_ELEMENT_ARRAY.splice( i, 1);\r
-                               PANEL_ELEMENT_ARRAY.splice( i -1, 0, _panelElement);\r
+                       if( goForward === true ){\r
+                               if( i === 0 ) return false;\r
+                               PANEL_ELEMENT_ARRAY.splice( i, 1 );\r
+                               PANEL_ELEMENT_ARRAY.splice( i - 1, 0, _panelElement );\r
                        } else {\r
-                               if( i === l -1) return false;\r
-                               PANEL_ELEMENT_ARRAY.splice( i, 1);\r
-                               PANEL_ELEMENT_ARRAY.splice( i +1, 0, _panelElement);\r
+                               if( i === l - 1 ) return false;\r
+                               PANEL_ELEMENT_ARRAY.splice( i, 1 );\r
+                               PANEL_ELEMENT_ARRAY.splice( i + 1, 0, _panelElement );\r
                        }\r
-                       renumber();\r
+                       renumber( true );\r
                        return true;\r
                }\r
-               function restoreReplaceElement( arg){\r
+               function restoreReplaceElement( arg ){\r
                        replaceComicElement( arg[ 0], arg[ 1]);\r
                }\r
                function onTextInput( _panelElement ){\r
@@ -2674,22 +2645,26 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                }\r
                        },\r
                        onImageSelect: function( data, isPanelPictureData ){\r
+                               var _panelElement;\r
                                if( isPanelPictureData !== true ){\r
-                                       data = {\r
+                                       _panelElement = new ImageElementClass( {\r
                                                resource_picture:data,\r
-                                               x:               Math.floor( panelW /2 - data.width /2 ),\r
-                                               y:               Math.floor( panelH /2 - data.height /2 ),\r
+                                               x:               Math.floor( panelW / 2 - data.width / 2 ),\r
+                                               y:               Math.floor( panelH / 2 - data.height / 2 ),\r
                                                z:               -1,\r
-                                               t:               PANEL_ELEMENT_ARRAY.length,\r
-                                               width:           data.width,\r
-                                               height:          data.height\r
-                                       }\r
+                                               t:               PANEL_ELEMENT_ARRAY.length + 1,\r
+                                               width:           1,\r
+                                               height:          1\r
+                                       });\r
+                                       _panelElement.init && _panelElement.init();\r
+                                       appendComicElement( _panelElement );\r
+                                       _panelElement.animate( undefined, undefined, Math.abs( data.width ), Math.abs( data.height ) );\r
+                               } else {\r
+                                       _panelElement = new ImageElementClass( data );\r
+                                       _panelElement.init && _panelElement.init();\r
+                                       appendComicElement( _panelElement );\r
                                }\r
-                               var _panelElement = new ImageElementClass( data );\r
-                               _panelElement.init && _panelElement.init();\r
-                               appendComicElement( _panelElement );\r
-                               _panelElement.animate( undefined, undefined, data.width, data.height );\r
-                               SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement], true );\r
+                               SAVE( restoreComicElement, [ false, _panelElement], [ true, _panelElement ], true );\r
                        },\r
                        createTextElement: function( data ){\r
                                var _panelElement;\r
@@ -2701,10 +2676,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                                                x:                                      Math.floor( panelW /2 - 100 +Math.random() *10 ),\r
                                                y:                  Math.floor( panelH /2 - 100 +Math.random() *10 ),\r
                                                z:                  -1,\r
-                                               t:                  PANEL_ELEMENT_ARRAY.length,\r
+                                               t:                  PANEL_ELEMENT_ARRAY.length + 1,\r
                                                width:              200,\r
                                                height:             200,\r
-                                               speaches_attributes: {\r
+                                               speeches_attributes: {\r
                                                        text1: {\r
                                                                content:    'Hello'\r
                                                        }\r
@@ -2803,9 +2778,10 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                delete instance.firstOpen;\r
        }\r
        this.onOpen = function( _w, _h, _file ){\r
-               comicID = -1;\r
-               panelID = -1;\r
+               comicID      = -1;\r
+               panelID      = -1;\r
                panelTimming = -1;\r
+               phase        = 0;\r
                \r
                var panelW, panelH,\r
                        borderSize,\r
@@ -2864,8 +2840,11 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                windowW = _w;\r
                windowH = _h;\r
                instance.onPaneResize( _w, _h );\r
+               \r
+               phase   = 1;\r
        }\r
        this.onClose = function(){\r
+               phase   = 2;\r
                HISTORY_CONTROL.close();\r
                \r
                WINDOWS_CONTROL.close();\r
@@ -2878,6 +2857,8 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                \r
                // last\r
                MENU_BAR_CONTROL.open();\r
+               \r
+               phase = -1;\r
        }\r
        this.onPaneResize = function( _windowW, _windowH){\r
                windowW = _windowW || windowW;\r
@@ -3572,9 +3553,9 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
        }\r
 \r
        function getPanelElementByTiming(){\r
-               var l = panelElementArray.length;\r
+               var i, l = panelElementArray.length;\r
                while( timing < l * 2){\r
-                       for(var i=0; i<l; ++i){\r
+                       for( i=0; i<l; ++i ){\r
                                if( timing === panelElementArray[ i ].timing ){\r
                                        ++timing;\r
                                        return panelElementArray[ i ];\r
@@ -3630,7 +3611,7 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                                        isXHTML !== true ? '>' : ' \/>'\r
                                ].join( '');                            \r
                        } else {\r
-                               url = _panelElement.getBalloonURL();\r
+                               url = pettanr.balloon.getBalloonUrl( _panelElement.w, _panelElement.h, _panelElement.angle() );\r
                                return [\r
                                        '<img ',\r
                                                'src="',        isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url ), '" ',\r
@@ -3735,7 +3716,7 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                                        '"x": ',                0, ',', cr,\r
                                        '"y": ',                0, ',', cr,\r
                                        '"z": ',                0, ',', cr,\r
-                                       panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',\r
+                                       '"t": ',                                panelTimming, ',', cr,\r
                                    '"width": ',            panelW, ',', cr,\r
                                    '"height": ',           panelH, ',', cr,\r
                                    '"panel_pictures_attributes": {', cr,\r
@@ -3777,7 +3758,7 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                                        '"t": ',                   timing, ',', cr,\r
                                        '"width": ',               _textElement.w, ',', cr,\r
                                        '"height": ',              _textElement.h, ',', cr,\r
-                                       '"speaches_attributes": {', cr,\r
+                                       '"speeches_attributes": {', cr,\r
                                                '"newf', timing, '": {', cr,\r
                                                '"content": "', _textElement.text(), '",', cr,\r
                                                        '"x": ',        _textElement.x, ',', cr,\r