OSDN Git Service

fixed assets/ & views/layouts/
authoritozyun <itozyun@git.sourceforge.jp>
Tue, 6 Mar 2012 10:42:40 +0000 (19:42 +0900)
committeritozyun <itozyun@git.sourceforge.jp>
Tue, 6 Mar 2012 10:42:40 +0000 (19:42 +0900)
14 files changed:
.project [new file with mode: 0644]
Gemfile.lock
app/assets/javascripts/common.js
app/assets/javascripts/system.js
app/assets/javascripts/work.js
app/assets/stylesheets/common.css
app/assets/stylesheets/work.css
app/models/author.rb
app/views/layouts/application.html.erb
db/schema.rb
public/assets/assets.lnk [new file with mode: 0644]
public/assets/common.js
public/assets/system.js
public/assets/work.js

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