OSDN Git Service

client is version0.4.15, update pettanr.finder
authoritozyun <itozyun@gmail.com>
Sat, 7 Apr 2012 04:34:32 +0000 (13:34 +0900)
committeritozyun <itozyun@gmail.com>
Sat, 7 Apr 2012 04:34:32 +0000 (13:34 +0900)
app/assets/javascripts/common.js [deleted file]
app/assets/javascripts/system.js [deleted file]
app/assets/javascripts/work.js [deleted file]
app/assets/stylesheets/common.css
app/assets/stylesheets/work.css
app/views/layouts/application.html.erb
public/assets/common.js
public/assets/system.js
public/assets/work.js

diff --git a/app/assets/javascripts/common.js b/app/assets/javascripts/common.js
deleted file mode 100644 (file)
index 086afb0..0000000
+++ /dev/null
@@ -1,2242 +0,0 @@
-/*\r
- * pettanR common.js\r
- *   version 0.4.5\r
- * \r
- * author: itozyun\r
- */\r
-\r
-var pettanr = ( function(){\r
-       var     FUNCTION_ARRAY = [],\r
-               URL = document.location.href.split( '#')[ 0],\r
-               IS_LOCAL = URL.indexOf( 'file:') === 0,\r
-               URL_PARAMS = ( function(){\r
-                       var search = document.location.search,\r
-                               l = search.length;\r
-                   if( 1 < l){\r
-                       var     query = search.substring( 1),\r
-                                       params = query.split( '&'),\r
-                                       ret = {}, elm, name, v;\r
-                       while( params.length > 0){\r
-                           elm = params.shift().split( '=');\r
-                                       name = decodeURIComponent( elm[ 0]);\r
-                                       if( elm.length === 2){\r
-                                               v = decodeURIComponent( elm[ 1]);\r
-                                               if( '' + parseFloat( v) === v) v = parseFloat( v);\r
-                                               if( '' + parseInt( v) === '0' + v) v = parseInt( v);\r
-                                               if( v === 'true') v = true;\r
-                                               if( v === 'false') v = false;\r
-                                               if( v === 'null') v = null;\r
-                                               if( v === 'undefined') v = undefined;\r
-                                   ret[ name] = v;\r
-                                       } else\r
-                                       if( elm.length === 1){\r
-                                               ret[ name] = true;\r
-                                       }\r
-                       }\r
-                       return ret;\r
-                   }\r
-                   return {};\r
-               })(),\r
-               IS_DEBUG = typeof URL_PARAMS.debug === 'boolean' ? URL_PARAMS.debug : IS_LOCAL === true,\r
-               jqWindow , jqDocument , jqBody;\r
-       return {\r
-               version: '0.4.5',\r
-               init: function(){\r
-                       jqWindow = $( window);\r
-                       jqDocument = $( document);\r
-                       jqBody = $( document.body);\r
-                       \r
-                       var l = FUNCTION_ARRAY.length,\r
-                               _fn;\r
-                       for( var i=0; i<l; i++){\r
-                               _fn = FUNCTION_ARRAY[ i];\r
-                               _fn.init && _fn.init( _fn === pettanr.view ? FUNCTION_ARRAY : undefined);\r
-                       }\r
-                       \r
-                       delete pettanr.init;\r
-               },\r
-               fn: function( _fn){\r
-                       FUNCTION_ARRAY.push( _fn);\r
-                       pettanr.init === undefined && _fn.init && _fn.init();\r
-               },\r
-               jqWindow: function(){\r
-                       return jqWindow;\r
-               },\r
-               jqDocument: function(){\r
-                       return jqDocument;\r
-               },\r
-               jqBody: function(){\r
-                       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
-               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
-/*\r
- * pettanr.util\r
- * \r
- *   extend( baseInstance, extend)\r
- *   cleanCommnetNode()\r
- *   cleanElement()\r
- *   getElementSize( _elm)\r
- *   getImageSize()\r
- *   getAbsolutePath()\r
- *   getGrobalObjectName()\r
- * \r
- */\r
-pettanr.util = ( function(){\r
-       var ELM_SIZE_GETTER = ( function(){\r
-                       var ret = document.createElement( 'DIV'),\r
-                               style = ret.style;\r
-                       ret.id = 'elmSizeGetter';\r
-                       style.position = 'absolute';\r
-                       style.left = '0px';\r
-                       style.top = '-9999px';\r
-                       style.visibility = 'hidden';\r
-                       document.body.appendChild( ret);\r
-                       return ret;\r
-               })(),\r
-               IMG_SIZE_GETTER = ( function(){\r
-                       var ret = ELM_SIZE_GETTER.cloneNode( true);\r
-                       ret.id = 'imgSizeGetter';\r
-                       document.body.appendChild( ret);\r
-                       return ret;\r
-               })(),\r
-               CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ',');\r
-       \r
-       /* clean comment node */\r
-       cleanCommnetNode();\r
-       \r
-       /* clean noscript */\r
-       var nodeNoscript = document.getElementsByTagName( 'noscript'),\r
-               noscript;\r
-       for(var i=0; i<nodeNoscript.length; ++i){\r
-               noscript = nodeNoscript[i];\r
-               noscript.parentNode && noscript.parentNode.removeChild( noscript);\r
-       }\r
-       nodeNoscript = noscript = null;\r
-       \r
-       function cleanCommnetNode( _targetElm){\r
-               search( _targetElm || document.body );\r
-               \r
-               function search( _elm){\r
-                       if( !_elm) return;\r
-                       if( _elm.nodeType === 8){\r
-                               _elm.parentNode.removeChild( _elm);\r
-                               return;\r
-                       }\r
-                       var i, l, _children = _elm.childNodes, _array = [];\r
-                       if( _children && typeof _children.length === 'number'){\r
-                               // liveNode > array\r
-                               for( i=0, l=_children.length; i<l; ++i){\r
-                                       _array.push( _children[ i ] );\r
-                               }\r
-                               while( _array.length !== 0 ){\r
-                                       search( _array.shift());\r
-                               }\r
-                       }\r
-               }\r
-       }\r
-       return {\r
-               extend: function( baseInstance, extend){\r
-                       for( var key in extend){\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 baseInstance;\r
-               },      \r
-               cleanCommnetNode: cleanCommnetNode,\r
-               cleanElement: function( _targetElm){\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
-                       _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
-                       if( !_elm){\r
-                               return {\r
-                                       width:  0,\r
-                                       height: 0\r
-                               }\r
-                       }\r
-                       var     parentElm = _elm.parentNode,\r
-                               prevElm = _elm.previousSibling,\r
-                               nextElm = _elm.nextSibling,\r
-                               displayNone = _elm.style.display === 'none';\r
-                       if( displayNone === true) _elm.style.display = '';\r
-                       ELM_SIZE_GETTER.appendChild( _elm);\r
-                       var ret = {\r
-                               width:          _elm.offsetWidth,\r
-                               height:         _elm.offsetHeight\r
-                       }\r
-                       if( displayNone === true) _elm.style.display = 'none';\r
-                       if( nextElm){\r
-                               parentElm.insertBefore( _elm, nextElm);\r
-                       } else          \r
-                       if( prevElm && prevElm.nextSibling){\r
-                               parentElm.insertBefore( _elm, prevElm.nextSibling);\r
-                       } else {\r
-                               parentElm && parentElm.appendChild( _elm);\r
-                       }                       \r
-                       return ret;\r
-               },\r
-               getImageSize: function( img){\r
-                       var     parentElm = img.parentNode,\r
-                               prevElm = img.previousSibling,\r
-                               nextElm = img.nextSibling,\r
-                               displayNone = img.style.display === 'none';\r
-                       if( displayNone === true) img.style.display = '';\r
-                       IMG_SIZE_GETTER.appendChild( img);\r
-                       \r
-                       var size = getActualDimension( img);\r
-                       \r
-                       IMG_SIZE_GETTER.removeChild( img);\r
-                       if( displayNone === true) img.style.display = 'none';\r
-                       if( nextElm){\r
-                               parentElm.insertBefore( img, nextElm);\r
-                       } else          \r
-                       if( prevElm && prevElm.nextSibling){\r
-                               parentElm.insertBefore( img, prevElm.nextSibling);\r
-                       } else {\r
-                               parentElm && parentElm.appendChild( img);\r
-                       }\r
-                       return size;\r
-                       \r
-               /* LICENSE: MIT\r
-                * AUTHOR: uupaa.js@gmail.com\r
-                */\r
-                       function getActualDimension(image) {\r
-                               var run, mem, w, h, key = "actual";\r
-                       \r
-                       // for Firefox, Safari, Google Chrome\r
-                               if ("naturalWidth" in image) {\r
-                                       return {\r
-                                               width:  image.naturalWidth,\r
-                                               height: image.naturalHeight\r
-                                       };\r
-                               }\r
-                       \r
-                               if ("src" in image) { // HTMLImageElement\r
-                                       if (image[key] && image[key].src === image.src) {\r
-                                               return image[key];\r
-                                       }\r
-                                       if (document.uniqueID) { // for IE\r
-                                               run = image.runtimeStyle;\r
-                                               mem = { w: run.width, h: run.height }; // keep runtimeStyle\r
-                                               run.width  = "auto"; // override\r
-                                               run.height = "auto";\r
-                                               w = image.width;\r
-                                               h = image.height;\r
-                                               run.width  = mem.w; // restore\r
-                                               run.height = mem.h;\r
-                                       } else { // for Opera and Other\r
-                                               mem = { w: image.width, h: image.height }; // keep current style\r
-                                               image.removeAttribute("width");\r
-                                               image.removeAttribute("height");\r
-                                               w = image.width;\r
-                                               h = image.height;\r
-                                               image.width  = mem.w; // restore\r
-                                               image.height = mem.h;\r
-                                       }\r
-                                       return image[key] = { width: w, height: h, src: image.src }; // bond\r
-                               }\r
-                               // HTMLCanvasElement\r
-                               return { width: image.width, height: image.height };\r
-                       }\r
-               },\r
-               loadImage: function( URLorELM, onLoad, onError, delay, timeout){\r
-                       delay = delay || 250;\r
-                       timeout = timeout || 5000;\r
-                       var type = typeof URLorELM,\r
-                               img, images, src, abstractPath;\r
-                       if( type === 'string'){\r
-                               src = URLorELM;\r
-                               // images = [];\r
-                       } else\r
-                       // http://d.hatena.ne.jp/hottolinkblog/20090228/1235823487\r
-                       if( type === 'object' && typeof URLorELM.hspace !== 'undefined' && typeof URLorELM.vspace !== 'undefined'){\r
-                               img = URLorELM;\r
-                               images = [ img];\r
-                               src = img.src;\r
-                       } else {\r
-                               return;\r
-                       }\r
-                       abstractPath = this.getAbsolutePath( src);\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
-                */\r
-                       function loadImage( images, abspath, onLoad, onError, delay, timeout) {\r
-                               images = images || document.images;\r
-                               var img,\r
-                                       i = 0, l = images.length,\r
-                                       tick = 0;\r
-                               for(; i < l; ++i) {\r
-                                       img = images[i];\r
-                                       if ( img.src === abspath && img.complete) {\r
-                                               var size = pettanr.util.getImageSize( img);\r
-                                               onLoad( abspath, size.width, size.height);\r
-                                               return;\r
-                                       }\r
-                               }\r
-                               img = document.createElement( 'img'); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る\r
-                               img.finish = false;\r
-                               img.onabort = img.onerror = function() {\r
-                                       if (img.finish) { return; }\r
-                                       img.finish = true;\r
-                                       onError(abspath);\r
-                                       img.onload = img.onabort = img.onerror = "";\r
-                               };\r
-                               img.onload  = function() {\r
-                                       img.finish = true;\r
-                                       if (window.opera && !img.complete) {\r
-                                               onError(abspath);\r
-                                               img.onload = img.onabort = img.onerror = "";\r
-                                               return;\r
-                                       }\r
-                                       var size = pettanr.util.getImageSize( img);\r
-                                       onLoad( abspath, size.width, size.height);\r
-                                       img.onload = img.onabort = img.onerror = "";\r
-                                       //img = void 0;\r
-                               };\r
-                               img.src = abspath;\r
-                               if (!img.finish && timeout) {\r
-                                       setTimeout(function() {\r
-                                               if (img.finish) { return; }\r
-                                               if (img.complete) {\r
-                                                       img.finish = true;\r
-                                                       if (img.width) { return; }\r
-                                                       onError(abspath);\r
-                                                       img.onload = img.onabort = img.onerror = "";\r
-                                                       return;\r
-                                               }\r
-                                               if ((tick += delay) > timeout) {\r
-                                                       img.finish = true;\r
-                                                       onError(abspath);\r
-                                                       img.onload = img.onabort = img.onerror = "";\r
-                                                       return;\r
-                                               }\r
-                                               setTimeout(arguments.callee, delay);\r
-                                       }, 0);\r
-                               }\r
-                       }\r
-               },\r
-               getAbsolutePath: function( path) {\r
-                       var e = document.createElement("div");\r
-                       e.innerHTML = '<a href=\"' + path + '\" />';\r
-                       return e.firstChild.href;\r
-               },\r
-               getAbsolutePosition: function( _elm){\r
-                       // Find the destination's position\r
-                       var     destx = _elm.offsetLeft,\r
-                               desty = _elm.offsetTop,\r
-                               thisNode = _elm,\r
-                               body = document.body;\r
-                       while (thisNode.offsetParent && thisNode.offsetParent !== body){\r
-                               thisNode = thisNode.offsetParent;\r
-                               destx += thisNode.offsetLeft;\r
-                               desty += thisNode.offsetTop;\r
-                       }\r
-                       return {\r
-                               x:      destx,\r
-                               y:      desty\r
-                       }\r
-               },\r
-               pullHtmlAsTemplete: function( IDorELM){\r
-                       if( typeof IDorELM === 'string'){\r
-                               IDorELM = document.getElementById( IDorELM);\r
-                       }\r
-                       if( !IDorELM) return;\r
-                       IDorELM.parentNode && IDorELM.parentNode.removeChild( IDorELM);\r
-                       if( IDorELM.id && IDorELM.id.indexOf( 'templete-') === 0){\r
-                               IDorELM.removeAttribute( '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
-                               _node.nodeType === 1 && this.hasClassName( _node, _className) === true && ret.push( _node);\r
-                       }\r
-                       return ret;\r
-               },\r
-               getChildIndex: function( _parent, _child){\r
-                       var _children = _parent.getElementsByTagName( _child.tagName),\r
-                               l = _children.length;\r
-                       for(var i=0; i<l; ++i){\r
-                               if( _children[ i] === _child) return i;\r
-                       }\r
-                       return -1;\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
-               getIndex: function( _array, _element){\r
-                       if( Array.prototype.indexof){\r
-                               pettanr.util.getIndex = function( _array, _element){\r
-                                       return _array.indexof( _element);\r
-                               }\r
-                       } else {\r
-                               pettanr.util.getIndex = function( _array, _element){\r
-                                       for( var i=0, l = _array.length; i<l; ++i){\r
-                                               if( _array[ i] === _element) return i;\r
-                                       }\r
-                                       return -1;                                      \r
-                               }\r
-                       }\r
-                       return pettanr.util.getIndex( _array, _element);\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
-               createIframe: function( id, callback){\r
-                       var ua = pettanr.ua;\r
-            var el = document.createElement( ua.isIE ? '<iframe name="' + id + '" frameborder="0" scrolling="no">' : 'iframe');\r
-            \r
-                       document.body.appendChild( el);\r
-            el.id = el.name = id;\r
-            el.setAttribute( 'name', id);\r
-            el.style.cssText = 'width:1px;height:1px;visibility:hidden;position:absolute;top:1px;left:1px;';\r
-                       // http://d.hatena.ne.jp/onozaty/20070830/p1\r
-                       // [JavaScript]IE6ではJavaScriptで動的に作成したiframeに対してsubmitできない(IE7は未確認) ->解決\r
-                       el.contentWindow.name = id;                                     \r
-            \r
-            window[id] = el;\r
-\r
-            if( ua.isIE){\r
-                               el.onreadystatechange = detect;\r
-            } else {\r
-               setTimeout( onLoad, 0);\r
-                       }\r
-            function detect(){\r
-                if ( this.readyState == "complete") {\r
-                    this.onreadystatechange = new Function();\r
-                    this.onreadystatechange = null;\r
-                    onLoad();\r
-                }\r
-            }                  \r
-                       function onLoad(){\r
-                               callback( el);\r
-                       }\r
-               }\r
-       }\r
-})();\r
-\r
-/*\r
- * pettanr.ua\r
- * \r
- *   detect userAgent\r
- *   detect plug in\r
- */\r
-pettanr.ua = ( function(){\r
-       var ua = (function(){\r
-                       var acme = {};\r
-                       \r
-                       var n = navigator;\r
-                       var dua = n.userAgent;\r
-                       var dav = n.appVersion;\r
-                       var tv = parseFloat(dav);\r
-                       acme.isOpera = (dua.indexOf("Opera") >= 0) ? tv: undefined;\r
-                       acme.isKhtml = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;\r
-                       acme.isWebKit = parseFloat(dua.split("WebKit/")[1]) || undefined;\r
-                       acme.isChrome = parseFloat(dua.split("Chrome/")[1]) || undefined;\r
-                       var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);\r
-                       if(index && !acme.isChrome){\r
-                               acme.isSafari = parseFloat(dav.split("Version/")[1]);\r
-                               if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){\r
-                                       acme.isSafari = 2;\r
-                               }\r
-                       }\r
-                       if(document.all && !acme.isOpera){\r
-                               acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;\r
-                       }\r
-                       \r
-                       return acme;\r
-               })(),\r
-               isIE = navigator.userAgent.toLowerCase().indexOf( 'msie') !== -1,\r
-               ieVersion = isIE === true ? parseInt( navigator.appVersion.toLowerCase().replace( /.*msie[ ]/, '').match( /^[0-9]+/)) : 0,\r
-               ieRenderingVersion = ieVersion === 8 ? document.documentMode : ieVersion,\r
-               isStanderdMode = document.compatMode === 'CSS1Compat',\r
-               ActiveX = ( function(){\r
-                       if( isIE === false || ieVersion > 8) return false;\r
-                       var     b = document.body,\r
-                               c = b.className || '',\r
-                               x,\r
-                               ret = pettanr.URL_PARAMS.ActiveX,\r
-                               ns = 'pettanr-ActiveX-',\r
-                               enabled = 'enabled',\r
-                               disabled = 'disabled';\r
-                       if( ret !== true && ret !== false){\r
-                               if( pettanr.util.hasClassName( b, ns + enabled) === true) return true;\r
-                               if( pettanr.util.hasClassName( b, ns + disabled) === true) return false;\r
-                               x = document.createElement('div');\r
-                               b.appendChild(x);\r
-                               x.style.cssText = 'width:1px;height:1px;line-height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
-                               ret = x.offsetHeight > 1;\r
-                               b.removeChild(x);\r
-                       }\r
-                       b.className += [ c !== '' ? ' ' : c, ns, ret === true ? enabled : disabled ].join( '');\r
-                       return ret;\r
-               })(),\r
-               VML = ( function(){\r
-                       if( ActiveX === false || isIE === false || ieVersion > 8) return false;\r
-                       var globalObjectName = pettanr.util.createGlobalUniqueName(),\r
-                               script,\r
-                               id = 'detectVML';\r
-                       document.write( [ '<!--[if gte vml 1]><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));\r
-                       if( window[globalObjectName] === 1){\r
-                               script = document.getElementById( id);\r
-                               script.parentNode.removeChild( script);\r
-                               window[globalObjectName] = null;\r
-                               return true;\r
-                       }\r
-                       return false;\r
-               })(),\r
-               isStandAloneMode = ( function(){\r
-                       if( isIE === false) return false;\r
-                       if( VML === true) return false;\r
-                       var globalObjectName = pettanr.util.createGlobalUniqueName(),\r
-                               script,\r
-                               id = 'detectStandAlone';\r
-                       document.write( [ '<!--[if IE ', Math.floor( ieVersion), ']><script id="', id, '">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));\r
-                       if( window[globalObjectName] === 1){\r
-                               script = document.getElementById( id);\r
-                               script.parentNode.removeChild( script);\r
-                               window[globalObjectName] = null;\r
-                               return false;\r
-                       }\r
-                       return true;\r
-               })();\r
-       return {\r
-               IE:                                     ua.isIE,\r
-               GECKO:                          0,\r
-               OPERA:                          ua.isOpera,\r
-               KHTML:                          ua.isKhtml,\r
-               WEBKIT:                         ua.isWebKit,\r
-               CHROME:                         ua.isChrome,\r
-               isIE:                           isIE,\r
-               ieVersion:                      ieVersion,\r
-               ieRenderingVersion:     ieRenderingVersion,\r
-               isStanderdMode:         isStanderdMode,\r
-               VENDER_PREFIX: ( function() {\r
-                       var ua = navigator.userAgent.toLowerCase();\r
-                       if ( ua.indexOf('opera') !== -1) {\r
-                               return 'O';\r
-                       } else if ( ua.indexOf('msie') !== -1) {\r
-                               return 'ms';\r
-                       } else if ( ua.indexOf('webkit') !== -1) {\r
-                               return 'webkit';\r
-                       } else if ( navigator.product === 'Gecko') {\r
-                               return 'Moz';\r
-                       }\r
-                       return '';\r
-               })(),\r
-               ACTIVEX: ActiveX,\r
-               VML: VML,\r
-               STANDALONE: isStandAloneMode,\r
-               startVML: function(){\r
-                       delete this.startVML;\r
-                       if( pettanr.ua.VML !== true) return false;\r
-                       if (!document.namespaces["v"]) {\r
-                       document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");\r
-                   }\r
-                   document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";\r
-               }\r
-       }\r
-})();\r
-\r
-\r
-pettanr.CONST = ( function(){\r
-       var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,\r
-               isLocalhost = document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0,\r
-               PETTANR_ROOT_PATH = isLocalhost === true ? 'http:\/\/localhost:3000\/' : 'http:\/\/pettanr.heroku.com\/';\r
-               \r
-       return {\r
-               PETTANR_ROOT_PATH:                      PETTANR_ROOT_PATH,\r
-               URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'original_pictures.json',\r
-               URL_PANELS_JSON:                        ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'panels.json',\r
-               NS_PETTANR_COMIC:                       'pettanr-comic',\r
-               RESOURCE_PICTURE_PATH:          ( isLocal === true ? pettanr.ROOT_PATH : PETTANR_ROOT_PATH) + 'resource_pictures\/',\r
-               CREATE_COMIC_JS:                        ( isLocal === true ? 'js\/' : PETTANR_ROOT_PATH) + 'comics_new.js',\r
-               UPLOAD_PICTURE_JS:                      isLocal === true ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
-               JQUERY_URL:                                     isLocal === true ? 'javascripts\/jquery-1.6.2.min.js' : PETTANR_ROOT_PATH + 'assets\/jquery-162_min.js'\r
-       }\r
-})();\r
-\r
-\r
-pettanr.view = ( function(){\r
-       /* create iframe overlay for user console */\r
-       var location = document.location.pathname,\r
-               isWorkPage =    document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0 ||\r
-                                               location.indexOf( pettanr.CONST.PETTANR_ROOT_PATH ) === 0 ||\r
-                                               location.indexOf( '\/work.html') !== -1 ||\r
-                                               location.indexOf( '\work.html') !== -1,\r
-               deep =  location.indexOf( '\/diary\/') !== -1 ||\r
-                               location.indexOf( '\/test\/') !== -1 ||\r
-                               location.indexOf( '\/help\/') !== -1 ||\r
-                               location.indexOf( '\/sitemap\/') !== -1 ||\r
-                               location.indexOf( '\/wiki\/') !== -1,\r
-               LoginUserNavi;\r
-       \r
-       if( isWorkPage === false){\r
-               LoginUserNavi = ( function(){\r
-                       var _body = document.body,\r
-                               _root = document.getElementsByTagName( 'html' )[ 0 ],\r
-                               filter,\r
-                               iframe, visible = false;\r
-                       return {\r
-                               show: function(){\r
-                                       document.location.href = [\r
-                                                       deep === true ? '../' : '',\r
-                                                       'work.html',\r
-                                                       typeof viewIndex === 'number' ? '?view=' + viewIndex : ''\r
-                                               ].join( '');\r
-                               },\r
-                               hide: function(){}\r
-                       }\r
-               })();\r
-       } else {\r
-               LoginUserNavi = ( function(){\r
-                       return {\r
-                               show: function(){\r
-                                       var i = pettanr.util.getChildIndex( this.parentNode, this );\r
-                                       i !== -1 && pettanr.view.show( i );\r
-                                       return false;\r
-                               },\r
-                               hide: function(){}\r
-                       }\r
-               })();\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
-               \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
-       /* global-navi */\r
-       var navi = document.getElementById('global-navi'),\r
-               origin = document.createElement('a'),\r
-               items = ( function(){\r
-                       var ret = ['Home', 'Comic list', 'Picture', 'Setting'];\r
-                       pettanr.DEBUG === true && ret.push( 'debug');\r
-                       return ret;\r
-               })(),\r
-               l = items.length,\r
-               item;\r
-       origin.href = '#';\r
-       for(var i=0; i<l; ++i){\r
-               item = origin.cloneNode( true);\r
-               item.appendChild( document.createTextNode( items[ i]) );\r
-               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
-       // ua version, lang, os, plugin ( vml, svg), standerdmode, balloon, rimg\r
-\r
-/*\r
- * window resize event, overlay と currentなviewに流す\r
- * view modeの保持\r
- *      editor, overlay, comic-viewer, image-explorer\r
- * fadeIn, faseOut\r
- */\r
-\r
-       var jqWindow,\r
-               funcArray,\r
-               HOME_ID = 'entrance',\r
-               VIEW_ID_ARRAY = [ HOME_ID, 'cabinet', 'gallery', 'backyard'],\r
-               elmCurrent,\r
-               currentView,\r
-               currentID = ( function( _view){\r
-                       var _viewID;\r
-                       \r
-                       if( typeof _view === 'number' && _view < VIEW_ID_ARRAY.length){\r
-                               _viewID = VIEW_ID_ARRAY[ _view];\r
-                       } else\r
-                       if( typeof _view === 'string'){\r
-                               _viewID = _view;\r
-                       } else {\r
-                               _viewID = HOME_ID;\r
-                       }\r
-\r
-                       if( document.getElementById( _viewID)){\r
-                               return _viewID;\r
-                       }\r
-                       return HOME_ID;\r
-               })( pettanr.URL_PARAMS.view);\r
-       \r
-       pettanr.DEBUG === true && VIEW_ID_ARRAY.push( 'debug');\r
-       \r
-       show();\r
-       \r
-       function onWindowResize(){\r
-               var _fn,\r
-                       l = funcArray.length,\r
-                       w = jqWindow.width(),\r
-                       h = jqWindow.height();\r
-               //for( var i=0; i<l; ++i){\r
-               //      _fn = funcArray[ i];\r
-               //      _fn.onWindowResize && _fn.onWindowResize( w, h);\r
-               //}\r
-               currentView && currentView.onWindowResize && currentView.onWindowResize( w, h);\r
-               pettanr.overlay.currentID !== null && pettanr.overlay.onWindowResize( w, h);\r
-       }\r
-       function show(){\r
-               if( isWorkPage === false) return;\r
-               \r
-               var _elm = document.getElementById( currentID);\r
-               if( elmCurrent) elmCurrent.style.display = 'none';\r
-               _elm.style.display = 'block';\r
-               elmCurrent = _elm;\r
-               \r
-               var     nodesA = navi.getElementsByTagName( 'a') || [],\r
-                       l = nodesA.length,\r
-                       _a;\r
-               for(var i=0; i<l; ++i){\r
-                       if( nodesA[ i]){\r
-                               nodesA[ i].className = VIEW_ID_ARRAY[ i] === currentID ? 'current' : '';\r
-                       }\r
-               }\r
-               \r
-               if( !pettanr.view || pettanr.view.init !== undefined) return;\r
-               currentView = pettanr[ currentID];\r
-               if( !currentView) return;\r
-               typeof currentView.onOpen === 'function' && currentView.onOpen();\r
-               setTimeout( onWindowResize, 0);\r
-       }\r
-       \r
-       var AbstractBasicPane = function(){\r
-               this.UID = '', // element の ID と一致\r
-               this.onOpen = function(){};\r
-               this.onClose = function(){};\r
-               this.onPaneResize = function( _w, _h){};\r
-               this.MIN_WIDTH = 0;\r
-               this.MIN_HEIGHT = 0;\r
-       }\r
-       \r
-       return {\r
-               init: function( _funcArray){\r
-                       funcArray = _funcArray;\r
-                       jqWindow = pettanr.jqWindow();\r
-                       jqWindow.resize( onWindowResize);\r
-                       \r
-                       currentView = currentView || pettanr[ currentID];\r
-                       currentView && typeof currentView.onOpen === 'function' && currentView.onOpen();\r
-                       \r
-                       setTimeout( onWindowResize, 100);\r
-                       \r
-                       delete pettanr.view.init;\r
-               },\r
-               show: function( _viewID){\r
-                       if( typeof _viewID === 'number' && _viewID < VIEW_ID_ARRAY.length){\r
-                               _viewID = VIEW_ID_ARRAY[ _viewID];\r
-                       } else\r
-                       if( typeof _viewID === 'string'){\r
-                               _viewID = _viewID;\r
-                       } else {\r
-                               _viewID = HOME_ID;\r
-                       }\r
-                       for( var key in pettanr.view){\r
-                               if( pettanr.view[ key] === _viewID){\r
-                                       if( currentID !== _viewID && document.getElementById( _viewID)){\r
-                                               this.currentID = currentID = _viewID;\r
-                                               show();\r
-                                       }\r
-                                       return;\r
-                               }\r
-                       }\r
-                       alert( _viewID);\r
-               },\r
-               resisterAsBasicPane: function( _basicPane){\r
-                       if( pettanr.view.isBasicPaneInstance( _basicPane ) === true ) return;\r
-                       _basicPane.prototype = new AbstractBasicPane();\r
-               },\r
-               isBasicPaneInstance: function( _basicPane){\r
-                       return  _basicPane instanceof AbstractBasicPane;\r
-               },\r
-               currentID:      currentID,\r
-               HOME:           HOME_ID,\r
-               COMICS:         VIEW_ID_ARRAY[ 1],\r
-               IMAGES:         VIEW_ID_ARRAY[ 2],\r
-               SETTING:        VIEW_ID_ARRAY[ 3],\r
-               DEBUG:          VIEW_ID_ARRAY[ 4],\r
-               EDITOR:         'editor',\r
-               OVERLAY:        'overlay'\r
-       }\r
-})();\r
-\r
-pettanr.overlay = ( function(){\r
-       var SHADOW_OPACITY = 0.5,\r
-               jqConteiner, jqShadow, jqCloseButton,// jqBody, \r
-               currentOverlay = null,\r
-               visible = false,\r
-               windowW, windowH;\r
-\r
-       function close(){\r
-               currentOverlay && currentOverlay.onClose && currentOverlay.onClose();\r
-               pettanr.overlay.hide();         \r
-       }\r
-       function asyncResize(){\r
-               currentOverlay.onWindowResize( windowW, windowH);\r
-       }\r
-       function onCloseClick( e){\r
-               close();\r
-               e.preventDefault();\r
-               return false;           \r
-       }\r
-       return {\r
-               init: function(){\r
-                       //jqBody = pettanr.jqBody();\r
-                       jqConteiner = $( '#overlay-container');\r
-                       jqShadow = $( '#overlay-shadow');\r
-                       jqCloseButton = $( '#overlay-close-button').click( onCloseClick);\r
-                       \r
-                       pettanr.key.addKeyDownEvent( pettanr.view.OVERLAY, 27, false, false, close); // 27.esc\r
-                       \r
-                       delete pettanr.overlay.init;\r
-               },\r
-               show: function( _currentOverlay){\r
-                       if( visible === true && currentOverlay === _currentOverlay) return;\r
-                       jqConteiner.stop().css( {\r
-                               filter:         '',\r
-                               opacity:        ''\r
-                       }).fadeIn();\r
-                       this.visible = visible = true;\r
-                       currentOverlay = _currentOverlay;\r
-                       this.currentID = _currentOverlay.ID;\r
-                       jqCloseButton.toggle( !!_currentOverlay.onClose);\r
-               },\r
-               hide: function(){\r
-                       currentOverlay = null;\r
-                       if( visible === false) return;\r
-                       jqConteiner.stop().css( {\r
-                               filter:         '',\r
-                               opacity:        ''\r
-                       }).fadeOut();\r
-                       this.visible = visible = false;\r
-                       this.currentID = null;\r
-               },\r
-               visible: visible,\r
-               currentID: null,\r
-               onWindowResize: function( _windowW, _windowH){\r
-                       jqConteiner.css( { height:      _windowH});\r
-                       jqShadow.css( { height: _windowH});\r
-                       windowW = _windowW;\r
-                       windowH = _windowH;\r
-                       // 先にeditorのcanvasを確定する。\r
-                       currentOverlay && currentOverlay.onWindowResize && setTimeout( asyncResize, 0);\r
-               },\r
-               resisterOverlay: function( _basicPane){\r
-                       pettanr.view.resisterAsBasicPane( _basicPane);\r
-                       // OverlayAPI\r
-                       return {\r
-                               show: function( _basicPane ){\r
-                                       \r
-                               },\r
-                               hide: function( _basciPane ){\r
-                                       \r
-                               },\r
-                               isCurrent: function( _basicPane ){\r
-                                       \r
-                               }\r
-                       }\r
-               },\r
-               isOverlay: function( _basicPane ){\r
-                       \r
-               }\r
-       }\r
-})();\r
-\r
-/* ----------------------------------------\r
- * KEY\r
- * \r
- *  - EDITABLE_TEXT_CONTROL\r
- * \r
- *    .SHIFT_DOWN_EVENT:       'shiftDown',\r
- *    .SHIFT_UP_EVENT:         'shiftUp',\r
- *    .CTRL_DOWN_EVENT:                'ctrlDown',\r
- *    .CTRL_UP_EVENT:          'ctrlUp',\r
- *    .SPACE_DOWN_EVENT:       'spaceDown',\r
- *    .SPACE_UP_EVENT:         'spaceUp',\r
- *    .init:                           function,\r
- *    .addKeyDownEvent:                function,\r
- *    .keyEventDispatcher:     function,\r
- * \r
- * ショートカットキーの監視とテキスト入力(input, textarea)、チェックボックスを管理する。\r
- * キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。\r
- * \r
- */\r
-pettanr.key = ( function(){\r
-       var log,\r
-               jqWindow,\r
-               keyOperationChatcher,\r
-               KEYEVENT_ARRAY = [],\r
-               shiftEnabled = false,\r
-               ctrlEnabled = false;\r
-       \r
-       function keyHit( e){\r
-               log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey, e.type].join( ','));\r
-               //keyOperationChatcher.val( '');\r
-               var cancel = false,\r
-                       callback = e.type,\r
-                       key = e.keyCode,\r
-                       overlayEnabled = pettanr.overlay.visible === true,\r
-                       currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;\r
-               if( callback === 'keypress') callback = 'keydown';\r
-               if( pettanr.form.keyEventRellay( e) === false){\r
-                       var shift = e.shiftKey,\r
-                               ctrl = e.ctrlKey,\r
-                               l = KEYEVENT_ARRAY.length,\r
-                               d;\r
-                       if( key === 16 || e.shiftKey === true){\r
-                               shiftEnabled = callback !== 'keyup';\r
-                       }\r
-                       if( key === 17 || e.ctrlKey === true){\r
-                               ctrlEnabled = callback !== 'keyup';\r
-                       }\r
-\r
-                       for( var i=0; i<l; i++){\r
-                               d = KEYEVENT_ARRAY[ i];\r
-                               if( (\r
-                                               d.viewID === currentViewID ||\r
-                                                       ( overlayEnabled === true && d.viewID === pettanr.view.OVERLAY)\r
-                                       ) &&\r
-                                       d.keyCode === key &&\r
-                                       ( d.shift === undefined || d.shift === shift) &&\r
-                                       ( d.ctrl === undefined || d.ctrl === ctrl)\r
-                               ){\r
-                                       ( function( func, e){\r
-                                               func && setTimeout( function(){\r
-                                                       func( e);\r
-                                                       func = e = null;\r
-                                               }, 0);\r
-                                       })( d[callback], e);\r
-                                       cancel = true;\r
-                               }\r
-                       }\r
-               }\r
-               if( cancel === true || key === 18 || key === 9 || key === 27 || e.altKey === true){ // 13.enter 18.esc 9.tab 27.esc   || ( key === 13 && overlayEnabled === false)\r
-                       e.preventDefault();\r
-               e.keyCode = 0;\r
-               e.cancelBubble = true;\r
-               e.returnValue = false;\r
-                       return false;\r
-               }\r
-       }\r
-       \r
-       var keyPress = pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? ( function( e){\r
-                       var key = e.keyCode;\r
-                       if( key === 13 || key === 27){\r
-                               keyHit( e);\r
-                               return false;\r
-                       }\r
-       }) : null;\r
-       \r
-       return {\r
-               init: function(){\r
-                       log = $( '#key-event-log').html( 'ready');\r
-\r
-                       jqWindow = pettanr.jqWindow().focus();\r
-                       keyOperationChatcher = pettanr.jqDocument()\r
-                               .keydown( keyHit)\r
-                               .keyup( keyHit)\r
-                               .mouseenter( function(){\r
-                                       jqWindow.focus();\r
-                               });\r
-                       keyPress && keyOperationChatcher.keypress( keyPress);\r
-\r
-                       delete pettanr.key.init;\r
-               },\r
-               addKeyDownEvent: function( _viewID, _keyCode, _shift, _ctrl, _callbackFunction){\r
-                       KEYEVENT_ARRAY.push( {\r
-                               viewID:                 _viewID,\r
-                               keyCode:                _keyCode,\r
-                               shift:                  _shift,\r
-                               ctrl:                   _ctrl,\r
-                               keydown:                _callbackFunction\r
-                       });\r
-               },\r
-               addKeyUpdateEvent: function( _viewID, _keyCode, _shift, _ctrl, _callbackFunction){\r
-                       KEYEVENT_ARRAY.push( {\r
-                               viewID:         _viewID,\r
-                               keyCode:        _keyCode,\r
-                               shift:          _shift,\r
-                               ctrl:           _ctrl,\r
-                               keydown:        _callbackFunction,\r
-                               keyup:          _callbackFunction\r
-                       });\r
-               },\r
-               addCursorEvent: function( _viewID, _shift, _ctrl, _callbackFunction){\r
-                       \r
-               },\r
-               keyEventDispatcher: function(){\r
-                       return keyOperationChatcher;\r
-               },\r
-               shiftEnabled: function(){\r
-                       return shiftEnabled;\r
-               },\r
-               ctrlEnabled: function(){\r
-                       return ctrlEnabled;\r
-               }\r
-       }\r
-})();\r
-\r
-/*\r
- * pettanr.form\r
- * \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_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 = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value')[ 0],\r
-                       value,\r
-                       index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,\r
-                       instance,\r
-                       focus = false,\r
-                       visible = true,\r
-                       enabled = true,\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.innerHTML = value;\r
-               elmValue.appendChild( elmA);\r
-               WRAPPER_ELM.onclick = onClick;\r
-               \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
-               return {\r
-                       init: function(){\r
-                               instance = this;\r
-                               delete this.init;\r
-                       },\r
-                       update: function( _value){\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
-                       },\r
-                       finish: function( keep){\r
-                               var _newValue = ELM_INPUT_TEXT.value,\r
-                                       _validated = validater !== null ? '' + validater( _newValue) : _newValue;\r
-                               _newValue = keep !== true ? _validated : value;\r
-\r
-                               elmValue.removeChild( ELM_INPUT_TEXT);\r
-                               \r
-                               elmA.innerHTML = _newValue;\r
-                               elmA.style.display = 'block';\r
-                               \r
-                               ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);\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
-       }\r
-\r
-       var FileInputClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater, elmFileInput){\r
-               validater = typeof validater === 'function' ? validater : null;\r
-               \r
-               var elmFilePath = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'file-path')[ 0],\r
-                       value,\r
-                       index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,\r
-                       instance,\r
-                       focus = false,\r
-                       visible = true,\r
-                       enabled = true,\r
-                       elmFileInput = WRAPPER_ELM.getElementsByTagName('input')[0] || elmFileInput || document.createElement( 'input');\r
-               elmFileInput.type = 'file';\r
-               elmFileInput.style.visivility = 'hidden';\r
-\r
-               WRAPPER_ELM.onclick = onClick;\r
-               elmFileInput.onchenge = onChange;\r
-               \r
-               function onClick( e){\r
-                       focus = true;\r
-                       start( instance);\r
-                       elmFileInput.click();\r
-                       return false;\r
-               }\r
-               \r
-               function onChange(){\r
-                       elmFilePath.innerHTML = elmFileInput.value;\r
-               }\r
-               return {\r
-                       init: function(){\r
-                               instance = this;\r
-                               delete this.init;\r
-                       },\r
-                       start: function(){\r
-                               onClick();\r
-                       },\r
-                       finish: function( keep){\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
-       }\r
-\r
-\r
-       function start( _currentItem){\r
-               currentItem !== _currentItem && currentItem && currentItem.finish();\r
-               currentItem = _currentItem;\r
-       }\r
-       function finish( _currentItem){\r
-               if( currentItem !== _currentItem) return;\r
-               currentItem = null;\r
-       }\r
-\r
-       function tabShift( _groupID, _index, _way){\r
-               var GROUP_ARRAY = FORM_GROUP_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 && GROUP_ARRAY[ i].visible() === true) break;\r
-                       i += _way;\r
-               }\r
-               if( i === _index) return;\r
-               setTimeout( GROUP_ARRAY[ i].start, 0);\r
-       }\r
-\r
-       return {\r
-               init: function(){},\r
-               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( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
-                               FORM_GROUP_TABLE[ _groupID] = [];\r
-                       }\r
-                       var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater);\r
-                       ret.init();\r
-                       _groupID && FORM_GROUP_TABLE[ _groupID].push( ret);\r
-                       return ret;\r
-               },\r
-               createFileInput: function( _elm, _onUpdate, _groupID, _validater, _elmFileInput){\r
-                       if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
-                               FORM_GROUP_TABLE[ _groupID] = [];\r
-                       }\r
-                       var ret = FileInputClass( _elm, _onUpdate, _groupID, _validater, _elmFileInput);\r
-                       ret.init();\r
-                       _groupID && FORM_GROUP_TABLE[ _groupID].push( ret);\r
-                       return ret;\r
-               },\r
-               createCheckBox: function(){\r
-                       \r
-               },\r
-               createRadio: function(){\r
-                       \r
-               },\r
-               createButton: function(){\r
-                       \r
-               },\r
-               createListBox: function(){\r
-                       \r
-               }\r
-       }\r
-})();\r
-\r
-\r
-/* ----------------------------------------\r
- * Vector Support\r
- * \r
- *              __________\r
- *             /          \\r
- *            /            \\r
- *            |,startX,Y    |\r
- * tailX,Y - <              |\r
- *            |'endX,Y      |\r
- *            \            /\r
- *                \__________/\r
- * \r
- * SVG\r
- * -----------------------\r
- * ie9, other modern browser\r
- * \r
- * XML\r
- * -----------------------\r
- * ie5.5-8\r
- * \r
- * 内部の角度計算は radian で統一したい。\r
- * 当初 vectorEnabled = true で一度書いてみる。\r
- * 駄目なら、代替のイメージのsrcの用意もここで担当。\r
- * 閲覧と編集両方で使う。\r
- * \r
- */\r
-pettanr.balloon = ( function() {\r
-       var MIN_BALLOON_WIDTH = 30,\r
-               MIN_BALLOON_HEIGHT = 30,\r
-               TAIL_WIDTH = 6,\r
-               TAIL_HEIGHT = 10,\r
-               STROKE_WIDTH = 1.2,\r
-               PADDING_TOP = TAIL_HEIGHT,\r
-               PADDING_LEFT = TAIL_HEIGHT,\r
-               ACCURACY = 1, // 有効少数桁        \r
-               IS_VML = pettanr.ua.isIE === true && pettanr.ua.ieVersion < 9,\r
-               ELM_BALLOON_ORIGIN = ( function(){\r
-                       var ret;\r
-                       try {\r
-                               if( IS_VML === true){\r
-                                       ret = document.createElement( 'DIV');\r
-                                       var shape = document.createElement( 'v:shape');\r
-                                       shape.coordorigin = "0,0";\r
-                                       shape.strokecolor = "black";\r
-                                       shape.strokeweight = STROKE_WIDTH;\r
-                                       shape.fillcolor = "white";\r
-                                       ret.appendChild( shape);\r
-                               } else {\r
-                                       var kSVGNS = 'http://www.w3.org/2000/svg';\r
-                                       ret = document.createElementNS( kSVGNS, 'svg');\r
-                                       var path = document.createElementNS( kSVGNS, 'path');\r
-                                       path.setAttribute( 'fill', "white");\r
-                                       path.setAttribute( 'stroke', "black");\r
-                                       path.setAttribute( 'strokeWidth', STROKE_WIDTH);\r
-                                       ret.appendChild( path);\r
-                               }\r
-                               return ret;     \r
-                       } catch( e){\r
-                               return null;\r
-                       }\r
-               })(),\r
-               NUM_BALLOON_IMAGE = 24,\r
-               vectorEnabled = ELM_BALLOON_ORIGIN !== null && pettanr.URL_PARAMS.vector !== false;\r
-       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
-                       path = balloonElm.getElementsByTagName( 'path')[ 0],\r
-                       shape = balloonElm.getElementsByTagName( 'shape')[ 0],\r
-                       cos = Math.cos, sin = Math.sin,\r
-                       abs = Math.abs, pow = Math.pow,\r
-                       round = Math.round,\r
-                       floor = Math.floor,\r
-                       TARGET = TAIL_WIDTH * TAIL_WIDTH,\r
-                       DEG_TO_RAD = Math.PI / 180,\r
-                       l = ',';\r
-               \r
-               draw( a, w, h);\r
-               \r
-               function draw( _a, _w, _h){\r
-                       a = _a !== undefined ? _a : a;\r
-                       w = _w !== undefined ? _w -PADDING_TOP *2 : w;\r
-                       h = _h !== undefined ? _h -PADDING_LEFT *2 : h;\r
-\r
-                       if( vectorEnabled === false){\r
-                               balloonElm.setAttribute( 'src', balloonUrlBuilder( a));\r
-                               return;\r
-                       }\r
-                       \r
-                       var rx = w /2,\r
-                               ry = h /2,\r
-                               tailRad = a * DEG_TO_RAD,\r
-                               tailX = rx +( rx +TAIL_HEIGHT) * cos( tailRad),\r
-                               tailY = ry +( ry +TAIL_HEIGHT) * sin( tailRad),\r
-                               startX, startY, endX, endY;\r
-               /*\r
-                * tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
-                */\r
-                       var startRad, endRad,\r
-                               _startX, _startY, _endX, _endY,\r
-                               tailDeg = 0, d;\r
-                       \r
-                       for( var i = 45; i > 0.01; i /= 2){\r
-                               d = ( tailDeg +i) /2;\r
-                               startRad = ( a +d) * DEG_TO_RAD;\r
-                               endRad = ( a -d) * DEG_TO_RAD;\r
-                               \r
-                               _startX = rx +cos( startRad) *rx;\r
-                               _startY = ry +sin( startRad) *ry;\r
-                               _endX = rx +cos( endRad) *rx;\r
-                               _endY = ry +sin( endRad) *ry;   //円弧上のY位置=円中心Y+sin(角度×PI÷180)×円半径\r
-                                       \r
-                               if( pow( ( _startX -_endX), 2) + pow( ( _startY -_endY), 2) < TARGET){\r
-                                       tailDeg += i;\r
-                                       startX = _startX;\r
-                                       startY = _startY;\r
-                                       endX = _endX;\r
-                                       endY = _endY;                                           \r
-                               }\r
-                       }\r
-\r
-               /*\r
-                * \r
-                */                     \r
-                       if( IS_VML === true){\r
-                               var _tailX = tailX *10,\r
-                                       _tailY = tailY *10,\r
-                                       __startX = startX *10,\r
-                                       __startY = startY *10,\r
-                                       __endX = endX *10,\r
-                                       __endY = endY *10,\r
-                                       __w = w *10,\r
-                                       __h = h *10;\r
-                               \r
-                               shape.style.width = w +'px';\r
-                               shape.style.height = h +'px';\r
-                               shape.coordsize = [ __w, __h].join( l);\r
-                               shape.path = [\r
-                                       ' ar ', 0, l, 0, l, __w, l, __h, l,\r
-                                       round( __endX), l, round( __endY), l,\r
-                                       round( __startX), l, round( __startY),\r
-                                       ' l ', round( _tailX), l, round( _tailY),\r
-                                       ' x e'\r
-                               ].join( '');\r
-\r
-                               balloonElm.style.marginTop =  _tailY < 0 ? floor( ( 60 +_tailY) /10) : 10;\r
-                               balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 +_tailX) /10) : 10;\r
-                       } else {\r
-                               balloonElm.setAttribute( 'width', w +PADDING_LEFT *2);\r
-                               balloonElm.setAttribute( 'height', h +PADDING_TOP *2);\r
-                               path.setAttribute( 'd', [\r
-                                       'M', cround( tailX + PADDING_LEFT), l, cround( tailY +PADDING_TOP),\r
-                                       'L', cround( startX +PADDING_LEFT), l, cround( startY +PADDING_TOP),\r
-                                       'A', rx, l, ry,\r
-                                       '0 1 1',                        // flag\r
-                                       cround( endX +PADDING_LEFT), l, cround( endY +PADDING_TOP),\r
-                                       'z'\r
-                               ].join( ' '));\r
-                       }\r
-                       function cround( v, r){\r
-                               r = r || ACCURACY;\r
-                               return round( v *pow( 10.0, r)) /pow( 10.0, r);\r
-                       }\r
-               }\r
-               \r
-               function balloonUrlBuilder( _a){\r
-                       var d = 360 /NUM_BALLOON_IMAGE;\r
-                       _a += 90 +d /2;\r
-                       return [ 'system_pictures\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');\r
-               }\r
-               return {\r
-                       elm: balloonElm,\r
-                       resize: draw,\r
-                       angle: function( _a){\r
-                               _a !== undefined && _a !== a &&\r
-                                       vectorEnabled === false ? balloonUrlBuilder( _a) : draw( _a);\r
-                               return a;\r
-                       },\r
-                       type: function( _type){\r
-                               //draw( _a);\r
-                       },\r
-                       getURL: function(){\r
-                               return balloonUrlBuilder( a);\r
-                       },\r
-                       destroy: function(){\r
-                               balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm);\r
-                               balloonElm = null;\r
-                               delete this.destroy;\r
-                       }\r
-               }\r
-       };\r
-       \r
-       IS_VML === false && vectorEnabled === true && ( function(){\r
-               var detect = XBROWSER_BALLOON_CLASS.apply( {}, [ 100, 100, 0]),\r
-                       size = pettanr.util.getElementSize( detect.elm);\r
-               vectorEnabled = size.width !== 0 && size.height !== 0;\r
-               detect.destroy();\r
-               detect = size = null;\r
-       })();\r
-\r
-       return {\r
-           createBalloon: function( _w, _h, _a){\r
-               return XBROWSER_BALLOON_CLASS.apply( {}, [ _w, _h, _a]);\r
-           },\r
-               TYPE_NONE:                              0,\r
-               TYPE_SPEACH_BALLOON:    1,\r
-               TYPE_THINKING:                  2,\r
-               TYPE_BOM:                               3,\r
-               TYPE_BLACK_BOX:                 4,\r
-               TYPE_BLUE_BOX:                  5\r
-       }\r
-})();\r
-\r
-/* ----------------------------------------\r
- *  pettanr.image\r
- *  \r
- *   xBackendな画像反転、画像描画機能。\r
- *   \r
- *   画像の反転\r
- *     - css3\r
- *     - ActiveX (ie)\r
- *     - VML (ie)\r
- *     - canvas ??\r
- *     - flash(lite)\r
- *     - silverlight\r
- *     - pettan server\r
- *   \r
- *   png画像の表示(アルファpngをサポートしないie6以下のため)\r
- *     - ActiveX\r
- *     - VML\r
- *     - flash(lite)\r
- *     - silverlight\r
- *     \r
- *     -moz-transform:scale( -1, -1);\r
- */\r
-pettanr.image = ( function(){\r
-       var REG_PNG = /\.png?/i,\r
-               IS_CSS3 = 0,\r
-               IS_VML = 1,\r
-               IS_ACTIVEX = 2,\r
-               IS_CANVAS = 3,\r
-               IS_FLASH = 4,\r
-               IS_SILVERLIGHT = 5,\r
-               IS_SERVER = 6,\r
-               IS_ACTIVEX_SERVER = 7,\r
-               BACKEND = ( function(){\r
-                       if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg){\r
-                               var rimg = pettanr.URL_PARAMS.rimg.toLowerCase();\r
-                               if( rimg === 'css3') return IS_CSS3;\r
-                               if( rimg === 'activex') return IS_ACTIVEX;\r
-                               if( rimg === 'vml') return IS_VML;\r
-                       }\r
-                       if( pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 9) return IS_CSS3; // 不十分!\r
-                       if( pettanr.ua.VML === true) return IS_VML;\r
-                       if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX;\r
-                       if( pettanr.FLASH === true) return IS_FLASH;\r
-                       if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
-                       return IS_SERVER;\r
-               })(),\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
-               ReversibleImageClass,\r
-               ReversibleImageClassWithPingfix;\r
-       \r
-       var XBackendReversibleImageClass = ( function(){\r
-               var CLASS_NAME = 'reversible-image-container',\r
-                       CLASS_NAME_LOADING = CLASS_NAME + ' loading',\r
-                       CLASS_NAME_ERROR = CLASS_NAME +' error',\r
-                       RETRY_DELAY = 5000;\r
-                       NUM_RETRY = 3;\r
-               \r
-               var css3Image = function( url, w, h, onLoadCallback){\r
-                       var elmWrap = document.createElement( 'div'),\r
-                               elmImg,\r
-                               loaded = false,\r
-                               retryTimer = null;\r
-                       elmWrap.className = CLASS_NAME_LOADING;\r
-                       pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
-                       function onLoad( _url, _actualW, _actualH){\r
-                               if( elmWrap === null) return;\r
-                               elmImg = new Image;\r
-                               /*\r
-                                * createElement 直後に append しないと、ie(ActiveX)で img が正しく表示されない.\r
-                                */\r
-                               elmWrap.appendChild( elmImg);\r
-                               elmImg.setAttribute( 'src', url);\r
-                               elmWrap.className = CLASS_NAME;\r
-                               onLoadCallback && onLoadCallback( _url, _actualW, _actualH);\r
-                               onLoadCallback = null;\r
-                               loaded = true;\r
-                               resize( w, h);\r
-                       }\r
-                       function onError( _url){\r
-                               if( elmWrap === null) return;\r
-                               elmWrap.className = CLASS_NAME_ERROR;\r
-                               retryTimer = setTimeout( function(){\r
-                                       elmWrap.className = CLASS_NAME_LOADING;\r
-                                       pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
-                               }, RETRY_DELAY);\r
-                       }\r
-                       function resize( _w, _h){\r
-                               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 ? 'h' : 'v'))) : '';\r
-                       }\r
-                       return {\r
-                               elm : elmWrap,\r
-                               resize: resize,\r
-                               destroy: function(){\r
-                                       loaded === true && elmWrap.removeChild( elmImg);\r
-                                       retryTimer !== null && clearTimeout( retryTimer);\r
-                                       elmWrap = vmlImg = onLoadCallback = retryTimer = null;\r
-                                       elmWrap = elmImg = onLoadCallback = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               }\r
-               var activexImage = css3Image;\r
-               var vmlImage = function( url, w, h, onLoadCallback){\r
-                       var elmWrap = document.createElement( 'div'),\r
-                               vmlImg,\r
-                               loaded = false,\r
-                               retryTimer = null;\r
-                       elmWrap.className = CLASS_NAME_LOADING;\r
-                       pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
-                       function onLoad( _url, _actualW, _actualH){\r
-                               if( elmWrap === null) return;\r
-                               elmWrap.className = CLASS_NAME;\r
-                               vmlImg = document.createElement( 'v:image');\r
-                               vmlImg.src = url;\r
-                               loaded = true;\r
-                               resize( w, h);\r
-                               onLoadCallback && onLoadCallback( _url, _actualW, _actualH);\r
-                               onLoadCallback = null;\r
-                       }\r
-                       function onError( _url){\r
-                               if( elmWrap === null) return;\r
-                               elmWrap.className = CLASS_NAME_ERROR;\r
-                               retryTimer = setTimeout( function(){\r
-                                       elmWrap.className = CLASS_NAME_LOADING;\r
-                                       pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
-                               }, RETRY_DELAY);\r
-                       }\r
-                       function resize( _w, _h){\r
-                               w = _w !== undefined ? _w : w;\r
-                               h = _h !== undefined ? _h : h;\r
-                               if( loaded !== true) return;\r
-                               vmlImg.style.width = w < 0 ? -w : w +'px';\r
-                               vmlImg.style.height = h < 0 ? -h : h +'px';\r
-                               //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 ? 'h' : 'v'))) : '';\r
-                                       elmWrap.appendChild( vmlImg);\r
-                       }\r
-                       return {\r
-                               elm : elmWrap,\r
-                               resize: resize,\r
-                               destroy: function(){\r
-                                       loaded === true && elmWrap.removeChild( vmlImg);\r
-                                       retryTimer !== null && clearTimeout( retryTimer);\r
-                                       elmWrap = vmlImg = onLoadCallback = retryTimer = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               }\r
-               var serverImage = function( url, w, h, onLoadCallback){\r
-                       \r
-               }\r
-               \r
-               return function( url, w, h, onLoadCallback){\r
-                               var flipH = w < 0,\r
-                                       flipV = h < 0,\r
-                                       onLoadCallbackAsync = onLoadCallback,// ? function(){ setTimeout( onLoadCallback, 0);} : undefined,// 一度読み込んだ画像は即座にonLoadになるため遅延\r
-                                       xBackendImage = ( function( urlIsXDomain){\r
-                                               if( BACKEND === IS_CSS3) return css3Image.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
-                                               if( BACKEND === IS_VML) return vmlImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
-                                               if( BACKEND === IS_ACTIVEX) return activexImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
-                                               return serverImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
-                                       })();\r
-                               return {\r
-                                       elm: xBackendImage.elm,\r
-                                       w: function( _w){\r
-                                               _w !== undefined && xBackendImage.resize( _w, h);\r
-                                               return w;\r
-                                       },\r
-                                       h: function( _h){\r
-                                               _h !== undefined && xBackendImage.resize( w, _h);\r
-                                               return h;\r
-                                       },\r
-                                       resize: xBackendImage.resize,\r
-                                       destroy: function(){\r
-                                               xBackendImage.destroy && xBackendImage.destroy();\r
-                                               xBackendImage = onLoadCallback = onLoadCallbackAsync = null;\r
-                                               delete this.destroy;\r
-                                       }\r
-                               }\r
-                       }\r
-       })();\r
-       return {\r
-               createReversibleImage: function( url, w, h, onLoadCallback){\r
-                       return XBackendReversibleImageClass.apply( {}, [ url, w, h, onLoadCallback]);\r
-               }\r
-       }\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
-               REG_ALPHA = /alpha\([^)]*\)/i,\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
-               //  filter opacity の追加 REG_ALPHA.test( _value ) ? _value.replace( REG_ALPHA, opacity ) : _value + " " + opacity\r
-               /*\r
-                * cssObject をまわす\r
-                * 非数は削除\r
-                * cssText と一致も削除\r
-                * coputedStyle と一致も削除\r
-                * updateTraget ととして記録\r
-                * 初期値を cssObject としてセット\r
-                * cssTest にセット zoom もセット 
-                */\r
-               \r
-               //\r
-               /*\r
-                       var style = elem.style,\r
-                               currentStyle = elem.currentStyle,\r
-                               opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",\r
-                               filter = currentStyle && currentStyle.filter || style.filter || "";\r
-\r
-                       // IE has trouble with opacity if it does not have layout\r
-                       // Force it by setting the zoom level\r
-                       style.zoom = 1;
-                */\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, _px,\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
-                                                               _cssTexts[ i] = [\r
-                                                                               _target, ':',\r
-                                                                               _value.replace( REG_ALPHA, "alpha(opacity=" + _updateParameters[ j] * 100 + ")")\r
-                                                                       ].join( '');\r
-                                                               break;\r
-                                                       }\r
-                                               }\r
-                                       /*\r
-                                        * other
-                                        */\r
-                                       } else {\r
-                                               _number = '' + parseFloat( _value);\r
-                                               _px = _value.indexOf( _number);\r
-                                               _px = _px > 0 ? _value.substr( _px + _number.length) : '';\r
-                                               for( j=0; j<_numAttributes; ++j){\r
-                                                       if( _targetAttributes[ j] === _target){\r
-                                                               _cssTexts[ i] = [ _target, ':', _updateParameters[ j], _px].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
-       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\r
- */\r
-\r
-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
diff --git a/app/assets/javascripts/system.js b/app/assets/javascripts/system.js
deleted file mode 100644 (file)
index 05df86c..0000000
+++ /dev/null
@@ -1,1289 +0,0 @@
-/*
- * pettanR system.js
- *   version 0.4.5
- *   
- * author:
- *   itozyun
- * licence:
- *   3-clause BSD
- */
-
-
-pettanr.log = ( function(){
-       return {
-               init: function(){}
-       }
-})();
-
-pettanr.io = ( function(){
-       
-       return {
-               init: function(){}
-       }
-})();
-
-/*
- * 画像一覧は
- *     お気に入り画像一覧 > tag:ペン次郎 > ペン次郎:笑う
- *  最近アップロードされた画像 > images
- *  最近使われた画像 > images
- *  キャラクター画像庫 > アニマル系 > tag:ペン次郎 > ペン次郎:笑う
- *  風景画像庫 >
- *  効果画像庫 >
- *  アイテム画像庫 >
- *  
- * 画像一覧を読み込むタイミング
- */
-pettanr.file = ( function(){
-       var FILE_TYPE_IS_FOLDER = 1,
-               numFileType = FILE_TYPE_IS_FOLDER,
-               FILEDATA_RESITER = [],                  // store all of fileData( json object )
-               FILEDATA_ACCESS = [],                   // file operations for Kernel only ! hide from Out of pettanr.file
-               FILE_OBJECT_POOL = [],
-               EVENT_LISTENER_RESISTER = [],
-               TREE_ARRAY = [],
-               TREE_ACCESS_ARRAY = [];
-       
-       var REQUEST_CONTROLER = ( function(){
-               var REQUEST_TICKET_RESISTER = [],
-                       DATA_TYPE_ARRAY = 'json,xml,html,text'.split( ','),
-                       DATA_IS_JSON = 0,
-                       DATA_IS_XML = 1,
-                       DATA_IS_HTML = 2,
-                       DATA_IS_TEXT = 3,
-                       numError = 0;
-               
-               var RequestTicketClass = function( _type, _data, _url, _onLoad, _onError){
-                       this.type = DATA_TYPE_ARRAY[ _type];
-                       this.data = _data;
-                       this.url = _url;
-                       this.onLoad = _onLoad;
-                       this.onError = _onError;
-                       this.state = 0;
-               };
-               
-               function request(){
-                       if( REQUEST_TICKET_RESISTER.length === 0) return;
-                       var _ticket = REQUEST_TICKET_RESISTER.shift();
-                       $.ajax({
-                               url:            _ticket.url,
-                               dataType:       _ticket.type,
-                               success:        function( _data){
-                                       _ticket.onLoad( _ticket.data, _data);
-                               },
-                               error:          function(){
-                                       ++numError;
-                                       _ticket.onError( _ticket.data);
-                               }
-                       });
-               }
-               
-               return {
-                       getNumTask: function(){
-                               return REQUEST_TICKET_RESISTER.length;
-                       },
-                       getNumError: function(){
-                               return numError;
-                       },
-                       getJson: function( _data, _url, _onLoad, _onError){
-                               REQUEST_TICKET_RESISTER.push( new RequestTicketClass( DATA_IS_JSON, _data, _url, _onLoad, _onError));
-                               request();
-                       }
-               }
-       })();
-
-
-
-       var FILE_CONTROLER = {
-               createTree: function( _rootFileData){
-                       var _tree = new TreeClass( _rootFileData);
-                       _tree.init();
-                       TREE_ARRAY.push( _tree);
-                       return _tree;
-               },
-               getFileData: function( UIDorFILEorFILEDATA){
-                       var _access = FILE_CONTROLER.getFileDataAccess( UIDorFILEorFILEDATA);
-                       return _access !== null ? _access.DATA : null;
-               },
-               getChildren: function( UIDorFILEorFILEDATA){
-                       var _data = FILE_CONTROLER.getFileData( UIDorFILEorFILEDATA);
-                       return _data !== null ? _data.children || null : null;
-               },
-               getFileDataAccess: function( UIDorFILEorFILEDATA){
-                       var _uid, _data, _access;
-                       
-                       if( typeof UIDorFILEorFILEDATA === 'number'){
-                               _data = FILEDATA_RESITER[ UIDorFILEorFILEDATA] || null;
-                       } else
-                       if( UIDorFILEorFILEDATA instanceof FileClass){
-                               _uid = UIDorFILEorFILEDATA.getUID();
-                               _data = FILEDATA_RESITER[ _uid] || null;
-                       } else {
-                               _data = UIDorFILEorFILEDATA || null;
-                       }
-                       
-                       if( _data === null || typeof _data !== 'object') return null;
-                       for( var i=0, l = FILEDATA_ACCESS.length; i<l; ++i){
-                               _access = FILEDATA_ACCESS[ i];
-                               if( _access.DATA === _data) return _access;
-                       }
-                       return null;
-               },
-               getDriver: function( _file){
-                       var _data = FILE_CONTROLER.getFileData( _file);
-                       return _data !== null && _data.driver ? _data.driver : FileDriverBase;
-               },
-               getUpdateFlag: function( _file, _bit){
-                       var _driver = FILE_CONTROLER.getFileData( _file),
-                               _policy;
-                       if( typeof _driver.getUpdatePolicy === 'function'){
-                               _policy = _driver.getUpdatePolicy( _file );
-                               
-                       }
-                       if( typeof _policy !== 'number') {
-                               _policy = FileDriverBase.getUpdatePolicy( _file )
-                       }
-                       return _policy % ( _bit * 2) >= _bit;
-               },
-               getUID: function ( _filedata){
-                       var l = FILEDATA_RESITER.length;
-                       for( var i=0; i<l; ++i){
-                               if( FILEDATA_RESITER[ i] === _filedata) return i;
-                       }
-                       return -1;
-               },
-               getSeqentialFiles: function( _file){
-                       var _driver = FILE_CONTROLER.getDriver( _file);
-                       if( _driver !== null && typeof _driver.getSeqentialFiles === 'function'){
-                               _driver.getSeqentialFiles( _file);
-                       }
-               },
-               updateFileAttribute: function( _uid, key, _value, _opt_callback){
-                       var _data = FILE_CONTROLER.getFileDataAccess( _uid),
-                               _type = _data.TYPE;
-                       
-               },                      
-               getFileAttribute: function( _uid, KEYorKEYARRAY){
-                       var _fileData = FILE_CONTROLER.getFileDataAccess( _uid),
-                               _type = _fileData.TYPE;
-               },
-               move: function( _prentUID, _targetfile, _newFolder, _newIndex, _opt_callback){
-                       var _parentData = FILE_CONTROLER.getFileDataAccess( _prentUID),
-                               _parentType = _parentData.TYPE,
-                               _targetData = FILE_CONTROLER.getFileDataAccess( _targetfile),
-                               _targetType = _targetData.TYPE;
-               },
-               replace: function( _uid, _file, _newIndex){
-                       
-               },
-               addEventListener: function( FILEorNULL, _eventType, _callback){
-                       var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL;
-                       EVENT_LISTENER_RESISTER.push( new FileEventTicketClass( _uid, _eventType, _callback));
-               },
-               removeEventListener: function( FILEorNULL, _eventType, _callback){
-                       var _uid = FILEorNULL instanceof FileClass ? FILEorNULL.getUID() : FILEorNULL,
-                               _ticket;
-                       for(var i=0, l = EVENT_LISTENER_RESISTER.length; i<l; ++i){
-                               _ticket = EVENT_LISTENER_RESISTER[i];
-                               if( _ticket.fileUID === _uid && _ticket.eventType === _eventType && _ticket.callBack === _callback){
-                                       EVENT_LISTENER_RESISTER.splice( i, 1);
-                                       _ticket.destroy();
-                               }
-                       }
-               },
-               fileEventRellay: function( _targetFile, _targetTree, _event){
-                       var _uid = _targetTree.getUID(),
-                               _access = TREE_ACCESS_ARRAY[ _uid],
-                               l = TREE_ARRAY.length,
-                               _tree, _currentFile;
-                       _access !== undefined && _access.dispatchFileEvent( _event);
-                       for(var i=0; i<l; ++i){
-                               if( i !== _uid){
-                                       _tree = TREE_ARRAY[i];
-                                       _currentFile = _tree.getCurrentFile();
-                                       if( FILE_CONTROLER.getFileData( _currentFile) === _access.DATA){
-                                               TREE_ACCESS_ARRAY[ _tree.getUID()].dispatchFileEvent( _event);
-                                       }
-                               }
-                       }
-               }
-       }
-
-       var TreeClass = function( ROOTFILE_DATA){
-               var UID = TREE_ACCESS_ARRAY.length,
-                       PARENT_FILE_RESITER = [],
-                       ACCESS = {
-                               dispatchFileEvent:      dispatchFileEvent,
-                               destroy:                        onDestroy
-                       },
-                       EVENT_LISTENER_ARRAY = [],
-                       rootFile,
-                       rootFileData,
-                       currentFile,
-                       currentFileData,
-                       instance;
-                       
-               TREE_ACCESS_ARRAY.push( ACCESS);
-               
-               function onDestroy(){
-                       
-               }
-               
-               function dispatchFileEvent( e){
-                       var _eventType = e.eventType,
-                               _targetFile = e.targetFile,
-                               _uid = _targetFile.getUID(),
-                               _ticket, _type, _callback;
-                       for(var i=0, l = EVENT_LISTENER_RESISTER.length; i<l; ++i){
-                               _ticket = EVENT_LISTENER_RESISTER[i],
-                               _type = _ticket.eventType,
-                               _callback = _ticket.callBack;
-                               if( _eventType === _type && _uid === _ticket.fileUID){
-                                       _callback( _eventType, _targetFile, e.key, e.value);
-                               } else
-                               if( _type === pettanr.file.TREE_EVENT.UPDATE && _eventType === pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES){
-                                       _callback( _eventType, _targetFile);
-                               }
-                       }
-               }
-               
-               return {
-                       init: function(){
-                               instance = this;
-                               currentFile = rootFile = new FileClass( this, null, ROOTFILE_DATA);
-                               rootFile.init();
-                               FILE_CONTROLER.getSeqentialFiles( currentFile);
-                               delete this.init;
-                       },
-                       getUID: function(){ return UID},
-                       getRootFile : function(){
-                               return rootFile;
-                       },
-                       getCurrentFile: function(){
-                               return currentFile;
-                       },
-                       hierarchy: function(){
-                               return PARENT_FILE_RESITER.length;
-                       },
-                       getParentFileAt: function( _index){
-                               var l = PARENT_FILE_RESITER.length;
-                               if( typeof _index !== 'number' || _index < 0 || _index >= l) return null;
-                               return PARENT_FILE_RESITER[ l -1 -_index];
-                       },
-                       down: function( _index){
-                               if( typeof _index !== 'number' || _index < 0 || _index >= currentFile.getChildFileLength()) return;
-                               PARENT_FILE_RESITER.unshift( currentFile);
-                               currentFile = currentFile.getChildFileByIndex( _index);
-                               FILE_CONTROLER.getSeqentialFiles( currentFile);
-                               return currentFile;
-                       },
-                       up: function( _index){
-                               var l = PARENT_FILE_RESITER.length;
-                               if( l === 0) return null;
-                               if( typeof _index === 'number'){
-                                       if( _index >= l) return null;
-                                       currentFile = this.getParentFileAt( _index);
-                                       PARENT_FILE_RESITER.splice( 0, l -_index);
-                               } else {
-                                       currentFile = PARENT_FILE_RESITER.shift();
-                               }
-                               FILE_CONTROLER.getSeqentialFiles( currentFile);
-                               return currentFile;     
-                       },
-                       addTreeEventListener: function( _eventType, _callback){
-                               FILE_CONTROLER.addEventListener( null, _eventType, _callback);
-                       },
-                       removeTreeEventListener: function( _eventType, _callback){
-                               FILE_CONTROLER.removeEventListener( null, _eventType, _callback);
-                       },
-                       destroy: function(){
-                               FILE_CONTROLER.destroyTree( UID);
-                       }
-               }
-       };
-
-       var FileEventTicketClass = function( UID, _eventType, _callback){
-               this.fileUID = UID;
-               this.eventType = _eventType;
-               this.callBack = _callback;
-               this.destroy = function(){
-                       this.callBack = _callback = null;
-               }
-       }
-       
-       var FileEventClass = function( eventType, file, key, value){
-               this.eventType = eventType;
-               this.targetFile = file;
-               this.updatedAttribute = key;
-               this.updatedValue = value;
-       }
-
-/*
- * fileのdataはobjectで保持している。
- * pettanr.file.の外からファイルをみるときは、FileClassを通して操作する。
- * fileの変更、それに付随して追加されたイベントは、TreeClassで管理される。
- * treeがdestryされると、fileのイベントリスナーも全て削除される。
- * 他の tree も data の共通する currentFile に対してのみは、file の変更イベントを受け取って流す.
- */
-       
-       var FileClass = function( TREE, parentFile, data){
-               if( !data.children){
-                       data.children = [];
-               }
-               var uid = FILE_CONTROLER.getUID( data),
-                       instance = this;
-               
-               if( uid === -1){
-                       uid = FILEDATA_RESITER.length;
-                       FILEDATA_RESITER.push( data);
-               }
-               
-               FILEDATA_ACCESS.push(
-                       {
-                               DATA:                           data,
-                               updateParent:           updateParent,
-                               dispatchFileEvent:      dispatchEvent
-                       }
-               );
-
-               function updateParent( _parent){
-                       parentFile = _parent;
-               }
-               function dispatchEvent( e){
-                       FILE_CONTROLER.fileEventRellay( instance, TREE, e);
-               }
-               
-               /* grobal Methods */
-               this.init = function(){
-                       delete this.init;
-               }
-               this.getUID = function(){
-                       return uid;
-               }
-               /*
-                * ファイル構造は TRON のような ハイパーリンク方式 だが、文脈上の 親ファイルが存在する場合がある.
-                */
-               this.getChildFileByIndex = function( _index){
-                       var _children = FILE_CONTROLER.getChildren( instance );
-                       if( typeof _index !== 'number' || _index < 0 || typeof _children.length !== 'number' || _index >= _children.length) return null;
-                       var _file = new FileClass( TREE, this, _children[ _index]);
-                       _file.init();
-                       return _file;
-               }
-               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.destroy = function(){
-                       var _access = FILE_CONTROLER.getFileDataAccess( instance );
-                               _index = getChildIndex( FILEDATA_ACCESS, _access );
-                       if( _index === -1 || _access === null) return;
-                       FILEDATA_ACCESS.splice( _index, 1);
-                       TREE = parentFile = data = null;
-                       delete _access.DATA, _access.updateParent, _access.dispatchFileEvent;
-               }
-       };
-       FileClass.prototype = {
-               isChildFile: function( _FILEorFILEDATA){
-                       return this.getChildFileIndex( _FILEorFILEDATA) !== -1;
-               },
-               getSeqentialFiles: function(){
-                       FILE_CONTROLER.getSeqentialFiles( this);
-               },
-               addEventListener: function( _eventType, _callback){
-                       FILE_CONTROLER.addEventListener( this, _eventType, _callback);
-               },
-               removeEventListener: function( _eventType, _callback){
-                       FILE_CONTROLER.removeEventListener( this, _eventType, _callback);
-               },
-               getChildFileLength: function(){
-                       var children = FILE_CONTROLER.getChildren( this);
-                       return children !== null && typeof children.length === 'number' ? children.length : 0;
-               },
-               getChildFileIndex: function( _FILEorFILEDATA){
-                       var children = FILE_CONTROLER.getChildren( this);
-                       
-                       if( children === null || 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;
-               },
-               getName: function(){
-                       var driver = FILE_CONTROLER.getDriver( this );
-                       if( typeof driver.getName === 'function'){
-                               return driver.getName( this );
-                       }
-                       return FileDriverBase.getName( this);
-               },
-               getThumbnail: function(){
-                       var driver = FILE_CONTROLER.getDriver( this);
-                       if( typeof driver.getThumbnail === 'function'){
-                               return driver.getThumbnail( this);
-                       }
-                       return FileDriverBase.getThumbnail( this);
-               },
-               getType: function(){
-                       var _data = FILE_CONTROLER.getFileData( this);
-                       return typeof _data.type === 'number' ? _data.type : pettanr.file.FILE_TYPE.UNKNOWN;
-               },
-               getState: function(){
-                       var _data = FILE_CONTROLER.getFileData( this);
-                       return typeof _data.state === 'number' ? _data.state : pettanr.file.FILE_STATE.OK;
-               },
-               isWritable: function(){
-                       return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.WRITE);
-               },
-               isSortable: function(){
-                       return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.SORT);
-               },              
-               isCreatable: function(){
-                       return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.CREATE);
-               },
-               isRenamable: function(){
-                       return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.RENAME);
-               },
-               read: function(){
-                       // simpleDeepCopy
-                       return false;
-               },
-               write: function( _newName, _newData){
-                       return false;
-               },
-               create: function(){
-                       
-               },
-               sort: function(){
-                       
-               },
-               onCopy: function(){
-                       
-               },
-               onDelete: function(){
-                       
-               }
-       }
-
-       /*
-        * FileDriverBase
-        */
-       var FileDriverBase = {
-               getSeqentialFiles: function( _file){
-               },
-               getName: function( _file){
-                       var _data = FILE_CONTROLER.getFileData( _file);
-                       return _data.name || 'No Name';
-               },
-               getThumbnail: function( _file){
-                       var _data = FILE_CONTROLER.getFileData( _file);
-                               _type = _data.type,
-                               _className = '';
-                       if( _type === pettanr.file.FILE_TYPE.FOLDER){
-                               _className = 'folder';
-                       } else
-                       if( _type === pettanr.file.FILE_TYPE.IMAGE){
-                               
-                       } else
-                       if( _type === pettanr.file.FILE_TYPE.TEXT){
-                               
-                       } else
-                       if( _type === pettanr.file.FILE_TYPE.HTML){
-                               
-                       } else
-                       if( _type === pettanr.file.FILE_TYPE.CSV){
-                               
-                       } else
-                       if( _type === pettanr.file.FILE_TYPE.JSON){
-                               
-                       } else
-                       if( _type === pettanr.file.FILE_TYPE.XML){
-                               
-                       }
-                       return {
-                               image:          null,
-                               className:      ' file-type-' + _className
-                       }
-               },
-               getUpdatePolicy: function( _file){
-                       // debug用 全てのメニューを許可
-                       return pettanr.file.FILE_UPDATE_POLICY.SRWC;
-               },
-               read: function(){
-                       return false;
-               },
-               write: function( _newName, _newData){
-                       return false;
-               },
-               onCreate: function(){
-                       
-               },
-               onSort: function(){
-                       
-               },
-               onCopy: function(){
-                       
-               },
-               onDelete: function(){
-                       
-               }
-       }
-
-       function getFileObject( TREE, parentFile, data){
-               var _file = FILE_OBJECT_POOL.length > 0 ? FILE_OBJECT_POOL.shift() : new FileClass();
-               _file.init( TREE, parentFile, data);
-               return _file;
-       }
-
-       var ROOT_FILEDATA = {
-                       name:           'system root',
-                       type:           FILE_TYPE_IS_FOLDER,
-                       children:       []
-               },
-               SYSTEM_TREE = FILE_CONTROLER.createTree( ROOT_FILEDATA),
-               ROOT_FILE = SYSTEM_TREE.getRootFile();
-       
-       function createFolderUnderRoot( _fileData){
-               ROOT_FILEDATA.children.push( _fileData);
-               FILE_CONTROLER.getFileDataAccess( ROOT_FILE)
-                       .dispatchFileEvent( new FileEventClass( pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES, ROOT_FILE, 'children', null));
-       }
-       function createFileEvent( _eventType, _file, _key, _value){
-               return new FileEventClass( _eventType, _file, _key, _value)
-       }
-       function createFileTypeID(){
-               return ++numFileType;
-       }
-       
-       return {
-               init: function(){
-                       //REQUEST_CONTROLER.init();
-                       //FILE_CONTROLER.init();
-                       delete pettanr.file.init;
-               },
-               resisterDriver: function( _driver){
-                       _driver.prototype = FileDriverBase;
-                       /*
-                        * File API
-                        */
-                       return {
-                               createFolderUnderRoot:  createFolderUnderRoot,
-                               getFileDataAccess:              FILE_CONTROLER.getFileDataAccess,
-                               getFileData:                    FILE_CONTROLER.getFileData,
-                               getJson:                                REQUEST_CONTROLER.getJson,
-                               createFileEvent:                createFileEvent,
-                               createFileTypeID:               createFileTypeID
-                       }
-               },
-               createTree: function( _rootFile){
-                       return FILE_CONTROLER.createTree( _rootFile);
-               },
-               isTreeInstance: function( _tree){
-                       return _tree instanceof TreeClass;
-               },
-               isFileInstance: function( _file){
-                       return _file instanceof FileClass;
-               },
-               FILE_TYPE: {
-                       UNKNOWN:        0,
-                       FOLDER:         FILE_TYPE_IS_FOLDER,
-                       IMAGE:          createFileTypeID(),
-                       TEXT:           createFileTypeID(),
-                       HTML:           createFileTypeID(),
-                       CSV:            createFileTypeID(),
-                       JSON:           createFileTypeID(),
-                       XML:            createFileTypeID()
-               },
-               FILE_STATE: {
-                       UNKNOWN:        0,
-                       OK:                     1,
-                       LOADING:        2,
-                       ERROR:          3,
-                       BROKEN:         4
-               },
-               FILE_UPDATE_POLICY: {
-                       ____:           parseInt( '0000', 2),
-                       ___C:           parseInt( '0001', 2), // hasCreateMenu
-                       __W_:           parseInt( '0010', 2), // isWritable
-                       __WC:           parseInt( '0011', 2), // isWritable
-                       _R__:           parseInt( '0000', 2), // isRenamable
-                       _R_C:           parseInt( '0101', 2), // hasCreateMenu
-                       _RW_:           parseInt( '0110', 2), // isWritable
-                       _RWC:           parseInt( '0111', 2), // isWritable
-                       S___:           parseInt( '1000', 2), // childrenIsSortable
-                       S__C:           parseInt( '1001', 2),
-                       S_W_:           parseInt( '1010', 2),
-                       S_WC:           parseInt( '1011', 2),
-                       SR__:           parseInt( '1000', 2),
-                       SR_C:           parseInt( '1101', 2),
-                       SRW_:           parseInt( '1110', 2),
-                       SRWC:           parseInt( '1111', 2),
-                       CREATE:         1,
-                       WRAITE:         2,
-                       RENAME:         4,
-                       SORT:           8
-               },
-               TREE_EVENT: {
-                       UPDATE:                         'onTreeUpdate'
-               },
-               FILE_EVENT: {
-                       UPDATE_ATTRIVUTE:       'onFileUpdate',
-                       GET_SEQENTIAL_FILES:'gotSeqentilFiles'
-               },
-               FILE_DATA_PROPERTY_RESERVED: [
-                       'children', 'driver', 'state', 'type', 'name'
-               ]
-       }
-})();
-
-pettanr.finder = ( function(){
-       var FINDER_ARRAY = [],
-               ELM_ORIGIN_FINDER_LOCATION_ITEM = pettanr.util.pullHtmlAsTemplete( 'templete-finder-location-item'),
-               ELM_ORIGIN_FINDER_ICON = pettanr.util.pullHtmlAsTemplete( 'templete-finder-icon'),
-               ELM_ORIGIN_CONTAINER = pettanr.util.pullHtmlAsTemplete( 'templete-finder-container'),
-               ICON_HEIGHT = pettanr.util.getElementSize( ELM_ORIGIN_FINDER_ICON).height,
-               ICON_CLASSNAME = ELM_ORIGIN_FINDER_ICON.getElementsByTagName( 'div')[0].className,
-               FINDER_ICON_POOL = [],
-               BREAD_OBJECT_POOL = [];
-       
-       var FinderIconClass = function(){
-               var elmContainer,
-                       ELM_WRAPPER = ELM_ORIGIN_FINDER_ICON.cloneNode( true),
-                       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;
-               function onClick(){
-                       callback( index);
-               }
-
-               function draw(){
-                       var _thumb = file.getThumbnail();
-                       if( _thumb.image){
-                               ELM_THUMBNAIL.className = ICON_CLASSNAME + ' has-thumbnail';
-                               ELM_THUMBNAIL.style.backgroundImage = [ 'url(', _thumb.image, ')'].join( '');
-                       } else {
-                               ELM_THUMBNAIL.className = ICON_CLASSNAME + ' ' +_thumb.className;
-                               ELM_THUMBNAIL.style.backgroundImage = '';
-                       }
-                       ELM_FILENAME.innerHTML = file.getName();
-               }
-               function resize(){
-                       ELM_WRAPPER.style.top = (index * ICON_HEIGHT) +'px';
-               }
-               function onCollect(){
-                       elmContainer.removeChild( ELM_WRAPPER);
-                       elmContainer = null;
-                       FINDER_ICON_POOL.push( instansce);
-               }
-               
-               return {
-                       init: function( _file, _elmContainer, _w, _index, _style, _callback){
-                               instansce = this;
-                               if( elmContainer !== _elmContainer){
-                                       _elmContainer.appendChild( ELM_WRAPPER);
-                                       elmContainer = _elmContainer;
-                               }
-                               if( file !== _file){
-                                       file = _file;
-                                       draw();
-                               }
-                               if( index !== _index){
-                                       index = _index;
-                                       resize();
-                               }
-                               callback = _callback;
-                       },
-                       elm: ELM_WRAPPER,
-                       index: function( _index){
-                               
-                               return index;
-                       },
-                       style: function( _style){
-                               
-                               return style;
-                       },
-                       onResize: function( w){
-                               
-                       },
-                       destroy: function(){
-                               elmContainer.removeChild( ELM_WRAPPER);
-                               file = elmContainer = null;
-                               FINDER_ICON_POOL.push( instansce);
-                       }
-               }
-       }
-       function updateIconPosition( _style, _w, _index, _elm){
-               
-       }
-       var BreadcrumbClass = function(){
-               var elmContainer,
-                       ELM_WRAPPER = ELM_ORIGIN_FINDER_LOCATION_ITEM.cloneNode( true),
-                       ELM_FILENAME = ELM_WRAPPER.getElementsByTagName( 'a')[0],
-                       file, w, index, instansce,
-                       callback;
-               ELM_WRAPPER.onclick = onClick;
-               function draw(){
-                       ELM_FILENAME.className = 'file-icon-' +file.getType();
-                       ELM_FILENAME.innerHTML = file.getName();
-               }
-               function resize( index){
-                       ELM_WRAPPER.style.left = (index * 90) +'px';
-               }
-               function onClick(){
-                       callback( index);
-                       return false;
-               }
-
-               return {
-                       init: function( _file, _elmContainer, _index, _callback){
-                               instansce = this;
-                               if( elmContainer !== _elmContainer){
-                                       _elmContainer.appendChild( ELM_WRAPPER);
-                                       elmContainer = _elmContainer;
-                               }
-                               if( file !== _file){
-                                       file = _file;
-                                       draw();
-                               }
-                               if( index !== _index){
-                                       index = _index;
-                                       resize( index);
-                               }
-                               callback = _callback;
-                       },
-                       elm: ELM_WRAPPER,
-                       index: function( _index){
-                               
-                               return index;
-                       },
-                       onResize: function( w){
-                               
-                       },
-                       destroy: function(){
-                               elmContainer.removeChild( ELM_WRAPPER);
-                               file = elmContainer = null;
-                               BREAD_OBJECT_POOL.push( this);
-                       }
-               }
-       }
-       
-       var FinderClass = function( ELM_CONTAINER, tree, detailSwitchEnabled, styleSwitchEnabled, actionSwitchEnabled){
-               var ICON_ARRAY = [],
-                       BREAD_ARRAY = [],
-                       elmContainer = ELM_ORIGIN_CONTAINER.cloneNode( true),
-                       elmLocation = elmContainer.getElementsByTagName( 'ul')[0],
-                       nodesDiv = elmContainer.getElementsByTagName( 'div'),
-                       elmSidebarButton = nodesDiv[1],
-                       elmStyleButton = nodesDiv[2],
-                       elmActionButton = nodesDiv[3],
-                       elmBody = nodesDiv[ nodesDiv.length -1],
-                       //tree = pettanr.file.createTree( TREE_TYPE),
-                       headX,
-                       headY,
-                       headH = pettanr.util.getElementSize( ELM_ORIGIN_FINDER_ICON).height,
-                       bodyY,
-                       currentFile = null,
-                       breadW = 90,
-                       size = pettanr.util.getElementSize( ELM_ORIGIN_FINDER_ICON),
-                       iconW = size.width,
-                       iconH = size.height,
-                       style = 0;
-                       w = 800;
-
-               tree.addTreeEventListener( pettanr.file.TREE_EVENT.UPDATE, draw);
-               
-               function draw(){
-                       var     l = tree.hierarchy() +1,
-                               m = BREAD_ARRAY.length,
-                               _file, _bread;
-                       for(var i=0; i<l; ++i){
-                               _file = i !== l-1 ? tree.getParentFileAt( i) : tree.getCurrentFile();
-                               if( i < m){
-                                       BREAD_ARRAY[ i].init( _file, elmLocation, i, onHeadClick);
-                               } else {
-                                       BREAD_ARRAY.push( getBreadcrumb( _file, elmLocation, i, onHeadClick));
-                               }
-                       }
-                       while( l < BREAD_ARRAY.length){
-                               BREAD_ARRAY.pop().destroy();
-                       }
-                       
-                       l = _file.getChildFileLength();
-                       m = ICON_ARRAY.length;
-
-                       for( i=0; i<l; ++i){
-                               if( i < m){
-                                       ICON_ARRAY[ i].init( _file.getChildFileByIndex( i), elmBody, w, i, style, onBodyClick);
-                               } else {
-                                       ICON_ARRAY.push( getFinderIcon( _file.getChildFileByIndex( i), elmBody, w, i, style, onBodyClick));
-                               }
-                       }
-                       while( l < ICON_ARRAY.length){
-                               ICON_ARRAY.pop().destroy();
-                       }
-               }
-               function onHeadClick( i){
-                       var l = BREAD_ARRAY.length -1;
-                       if( i < l){
-                               var _file = tree.getParentFileAt( i);
-                               if( _file !== null){
-                                       tree.up( i);
-                                       draw();
-                               }
-                       }
-               }
-               function onBodyClick( i){
-                       var l = ICON_ARRAY.length;
-                       if( i < l){
-                               var _file = tree.getCurrentFile().getChildFileByIndex( i);
-                               if( _file !== null && ( _file.getChildFileLength() > 0 || _file.getType() === pettanr.file.FILE_TYPE.FOLDER)){
-                                       tree.down( i);
-                                       draw();
-                               }
-                       }
-               }
-               
-               this.init = function(){
-                       ELM_CONTAINER.appendChild( elmContainer);
-                       //$( elmLocation).click( onHeadClick);
-                       //$( elmContainer).click( onBodyClick);
-                       var position = pettanr.util.getAbsolutePosition( elmLocation);
-                       headX = position.x;
-                       headY = position.y;
-                       bodyY = pettanr.util.getAbsolutePosition( elmBody).y;
-                       delete this.init;
-               }
-               this.onOpen = function(){
-                       this.init !== undefined && this.init();
-                       draw();
-               }
-               this.onClose = function(){
-                       
-               }
-               this.onWindowResize = function( _w, _h){
-                               
-               }
-       }
-       function getFinderIcon( _file, _elmContainer, w, index, style, callback){
-               var _icon;
-               if( FINDER_ICON_POOL.length > 0){
-                       _icon = FINDER_ICON_POOL.shift();
-               } else {
-                       _icon = new FinderIconClass();
-               }
-               _icon.init( _file, _elmContainer, w, index, style, callback);
-               return _icon;
-       }
-       
-       function getBreadcrumb( _file, _elmContainer, index, callback){
-               var _bread;
-               if( BREAD_OBJECT_POOL.length > 0){
-                       _bread = BREAD_OBJECT_POOL.shift();
-               } else {
-                       _bread = new BreadcrumbClass();
-               }
-               _bread.init( _file, _elmContainer, index, callback);
-               return _bread;
-       }
-
-       return {
-               init: function(){
-                       
-               },
-               createFinder: function( _elmTarget, _tree, detailSwitchEnabled, styleSwitchEnabled, actionSwitchEnabled){
-                       var _finder = new FinderClass( _elmTarget, _tree, detailSwitchEnabled, styleSwitchEnabled, actionSwitchEnabled);
-                       FINDER_ARRAY.push( _finder);
-                       return _finder;
-               },
-               createFinderHead: function(){
-                       
-               },
-               resisterFinderPane: function( _finderPane){
-                       
-               },
-               isFinderInstance: function( _finder){
-                       return _finder instanceof FinderClass;
-               }
-       }
-})();
-
-
-pettanr.driver = ( function(){
-       var MyAuthorID = 'current_author' in window ? current_author.id : 1,
-               MyArtistID = 'current_artist' in window ? current_artist.id : 1,
-               Driver = {
-                       getSeqentialFiles: function( _file){
-                               var _data = FileAPI.getFileData( _file),
-                                       _json = _data !== null ? _data.json : null;
-                               if( typeof _json === 'string'){
-                                       FileAPI.getJson( _file, _json, onLoadJson, onErrorJson);
-                                       _data.state = pettanr.file.FILE_STATE.LOADING;
-                                       delete _data.json;
-                               }
-                       },
-                       getName: function( _file){
-                               var _data = FileAPI.getFileData( _file),
-                                       _type = _data !== null ? _data.type : null;
-                               if( _type === pettanr.driver.FILE_TYPE.PICTURE){
-                                       return [ _data.id, _data.ext ].join( '.');
-                               } else
-                               if( _type === pettanr.driver.FILE_TYPE.PANEL){
-                                       return [ _data.t, ':', _data.comic.name || _data.comic.title ].join( '');
-                               } else
-                               if( _type === pettanr.driver.FILE_TYPE.ARTIST){
-                                       return [ _data.id , ':', _data.name, '画伯' ].join( '');
-                               } else
-                               if( _type === pettanr.driver.FILE_TYPE.AUTHOR){
-                                       return [ _data.id , ':', _data.name, '先生' ].join( '');
-                               }
-                               return _data.name || _data.title;
-                       },
-                       getThumbnail: function( _file){
-                               var _data = FileAPI.getFileData( _file);
-                                       _type = _data !== null ? _data.type : null;
-                               if( _type === pettanr.driver.FILE_TYPE.PICTURE){
-                                       return { image: [ pettanr.CONST.RESOURCE_PICTURE_PATH, 'thumbnail/', _data.id, '.', _data.ext ].join( '')};
-                               }
-                               if( _data === FILE_DATA_COMIC_ROOT){
-                                       return { className: 'file-type-cabinet'};
-                               }
-                               if( _type === pettanr.driver.FILE_TYPE.COMIC){
-                                       return { className: 'file-type-comic'};
-                               }
-                               if( _type === pettanr.driver.FILE_TYPE.PANEL){
-                                       return { className: 'file-type-panel'};
-                               }
-                               if( _type === pettanr.driver.FILE_TYPE.AUTHOR){
-                                       return { className: 'file-type-author'};
-                               }
-                               if( _type === pettanr.driver.FILE_TYPE.ARTIST){
-                                       return { className: 'file-type-artist'};
-                               }
-                               if( _type === pettanr.driver.FILE_TYPE.FOLDEER){
-                                       return { className: 'file-type-folder'};
-                               }
-                               return { className: 'file-type-folder'};
-                       }
-               },
-               FileAPI = pettanr.file.resisterDriver( Driver),
-               FILE_DATA_SERVICE_ROOT = {
-                       name:           'PettanR root',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       []
-               },
-               FILE_DATA_COMIC_ROOT = {
-                       name:           'Comics',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       [],
-                       driver:         Driver,
-                       json:           pettanr.CONST.URL_PANELS_JSON
-               },
-               FILE_DATA_PICTURE_ROOT = {
-                       name:           'Picutures',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       [],
-                       driver:         Driver,
-                       json:           pettanr.CONST.URL_ORIGINAL_PICTURES_JSON
-               },
-               FILE_DATA_MY_COMICS_ROOT = {
-                       name:           'My Comics',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       []
-               },
-               FILE_DATA_MY_PICTURES_ROOT = {
-                       name:           'My Pictures',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       []
-               },
-               FILE_DATA_AUTHOR_ROOT = {
-                       name:           'Authors',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       []
-               },
-               FILE_DATA_ARTIST_ROOT = {
-                       name:           'Artists',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       []
-               },
-               FILE_DATA_LICENSE_ROOT = {
-                       name:           'Original Licenses',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       []
-               },
-               FILE_DATA_BALLOON_ROOT = {
-                       name:           'Balloon templetes',
-                       type:           pettanr.file.FILE_TYPE.FOLDER,
-                       children:       []
-               },
-               AUTHOR_ARRAY = [],
-               ARTIST_ARRAY = [],
-               PANEL_ARRAY = [],
-               COMIC_ARRAY = [],
-               RESOURCE_PICTURE_ARRAY = [],
-               BALLOON_TEMPLETE_ARRAY = [],
-               ORIGINAL_LICENSE_ARRAY = [],
-               BASIC_LICENSES = 'cc_by,cc_nc,cc_nd,cc_sa,keep_aspect_ratio,no_convert,no_flip,no_resize'.split( ',');
-       FILE_DATA_SERVICE_ROOT.children.push( FILE_DATA_COMIC_ROOT, FILE_DATA_PICTURE_ROOT, FILE_DATA_LICENSE_ROOT, FILE_DATA_BALLOON_ROOT);
-       FILE_DATA_COMIC_ROOT.children.push( FILE_DATA_MY_COMICS_ROOT, FILE_DATA_AUTHOR_ROOT);
-       FILE_DATA_PICTURE_ROOT.children.push( FILE_DATA_MY_PICTURES_ROOT, FILE_DATA_ARTIST_ROOT);
-       
-       FileAPI.createFolderUnderRoot( FILE_DATA_SERVICE_ROOT);
-       
-       function onLoadJson( _file, _json){
-               var _access = FileAPI.getFileDataAccess( _file),
-                       _data = _access !== null ? _access.DATA : null,
-                       l = _json.length;
-               if( _data === null){
-                       onErrorJson( _file);
-                       return;
-               }
-               _data.state = pettanr.file.FILE_STATE.OK;
-               if( l === 0) return;
-               for(var i=0; i<l; ++i){
-                       buildFileData( _json[ i], _data);
-               }
-               _access.dispatchFileEvent( FileAPI.createFileEvent( pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES, _file, 'children', null));
-       }
-       function onErrorJson( _file){ 
-               var _data = FileAPI.getFileData( _file);
-               if( _data !== null){
-                       _data.state = pettanr.file.FILE_STATE.ERROR;
-               }
-       }
-       function buildFileData( _data, _parent){
-               var _type, _array,
-                       _id = _data.id,
-                       i, l;
-               if( _parent === FILE_DATA_COMIC_ROOT){
-                       _data.type = pettanr.driver.FILE_TYPE.PANEL;
-                       _array = PANEL_ARRAY;
-               } else
-               if( _parent === FILE_DATA_PICTURE_ROOT){
-                       _data.type = pettanr.driver.FILE_TYPE.PICTURE;
-                       _array = RESOURCE_PICTURE_ARRAY;
-                       
-                       // original_license を含まなければ、license object を削除して ビットデータ で保持
-                       // original_license なら ファイルを作る buildFileData( _license, FILE_DATA_LICENSE_ROOT)
-                       var _license = _data.license,
-                               _Math_pow = Math.pow,
-                               _bits = 0;
-                       if( typeof _license === 'object'){
-                               for( i=0, l=BASIC_LICENSES.length; i<l; ++i){
-                                       if( typeof _license[ BASIC_LICENSES[ i]] === 'number'){
-                                               _bits += _Math_pow( 2, i);
-                                       }
-                               }
-                               _data.license = _bits;
-                       }
-               } else
-               if( _parent === FILE_DATA_LICENSE_ROOT){
-                       _data.type = pettanr.driver.FILE_TYPE.LICENSE;
-                       _array = ORIGINAL_LICENSE_ARRAY;
-               }
-               
-               _data.driver = Driver;
-               
-               // _array に _data を格納 または 上書き
-               if( typeof _id === 'number'){
-                       var __data = _array[ _id];
-                       if( __data){
-                               for( var key in _data){
-                                       __data[ key ] = _data[ key ];
-                               }
-                               _data = __data; // このタイミングで参照が切れるので注意!!
-                       } else {
-                               _array[ _id] = _data;
-                       }
-               }
-               
-               if( _parent === FILE_DATA_COMIC_ROOT){
-                       if( _data.comic && _data.author){
-                               var _comic = getFolderData( _data, 'comic', FILE_DATA_COMIC_ROOT),
-                                       _comicList = getFolderData( _data, 'author', FILE_DATA_AUTHOR_ROOT);
-                               _comic.children.push( _data);
-                               pettanr.util.getIndex( _comicList.children, _comic) === -1 && _comicList.children.push( _comic);
-                               _comicList.id === MyAuthorID && pettanr.util.getIndex( FILE_DATA_MY_COMICS_ROOT.children, _comic) === -1 && FILE_DATA_MY_COMICS_ROOT.children.push( _comic);
-                       }
-                       // picture data をファイルに取り出し
-                       var _elements = _data.panel_elements || [],
-                               _elm;
-                       for(var i=0, l=_elements.length; i<l; ++i){
-                               _elm = _elements[ i];
-                               if( _elm.resource_picture){
-                                       _elm.resource_picture = buildFileData( _elm.resource_picture, FILE_DATA_PICTURE_ROOT); // 上記参照切れに備えてここで上書き
-                               }
-                               if( _elm.resource_picture_id && RESOURCE_PICTURE_ARRAY[ _elm.resource_picture_id]){
-                                       _elm.resource_picture = RESOURCE_PICTURE_ARRAY[ _elm.resource_picture_id];
-                               }
-                       }
-               } else
-               if( _parent === FILE_DATA_PICTURE_ROOT){
-                       if( _data.artist){
-                               var _pictureList = getFolderData( _data, 'artist', FILE_DATA_ARTIST_ROOT);
-                               pettanr.util.getIndex( _pictureList.children, _data) === -1 && _pictureList.children.push( _data);
-                               _pictureList.id === MyArtistID && pettanr.util.getIndex( FILE_DATA_MY_PICTURES_ROOT.children, _data) === -1 && FILE_DATA_MY_PICTURES_ROOT.children.push( _data);
-                       }
-               }
-               
-               return _data;
-       }
-       /**
-        * folder には Artist, Author, Comic, 
-        */
-       function getFolderData( _data, _key, _parentData){
-               if( typeof _data[ _key ] !== 'object') return {children:[]};
-               var _ret,
-                       _id = _data[ _key ].id,
-                       _array;
-               if( typeof _id !== 'number') return {children:[]};
-               
-               _array =        _parentData === FILE_DATA_ARTIST_ROOT ? ARTIST_ARRAY :
-                                       _parentData === FILE_DATA_AUTHOR_ROOT ? AUTHOR_ARRAY :
-                                       _parentData === FILE_DATA_COMIC_ROOT ? COMIC_ARRAY : []
-
-               if( typeof _array[ _id] === 'object'){
-                       var __data = _array[ _id];
-                       for( var i in _data[ _key ]){
-                               __data[ i ] = _data[ _key ][ i ];
-                       }
-                       return _data[ _key ] = __data;// このタイミングで参照が切れるので注意!!
-               }
-               // 以下は folder がなく 新規に作られる場合.
-               _ret = _array[ _id ] = _data[ _key ];
-               if( _ret.title){
-                       _ret.name = _ret.title;
-                       delete _ret.title;
-               }
-               _ret.children = [];
-               _ret.driver = Driver;
-               
-               if( _parentData === FILE_DATA_AUTHOR_ROOT){
-                       _ret.type = pettanr.driver.FILE_TYPE.AUTHOR;
-               } else
-               if( _parentData === FILE_DATA_ARTIST_ROOT){
-                       _ret.type = pettanr.driver.FILE_TYPE.ARTIST;
-               } else
-               if( _parentData === FILE_DATA_COMIC_ROOT){
-                       _ret.type = pettanr.driver.FILE_TYPE.COMIC;
-                       return _ret;
-               } else {
-                       _ret.type = pettanr.file.FILE_TYPE.FOLDER;
-               }
-               
-               _parentData.children.push( _ret);
-               
-               return _ret;
-       }
-
-       return {
-               createComicTree: function(){
-                       return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT); //FILE_DATA_COMIC_ROOT);
-               },
-               createPictureTree: function(){
-                       return pettanr.file.createTree( FILE_DATA_PICTURE_ROOT);
-               },
-               createServiceTree: function(){
-                       return pettanr.file.createTree( FILE_DATA_SERVICE_ROOT);
-               },
-               isPettanrFileInstance: function( _file){
-                       if( pettanr.file.isPettanFileInstance( _file) === true){
-                               var _data = FileAPI.getFileData( _file);
-                               return _data !== null && _data.driver === Driver;
-                       }
-                       return false;
-               },
-               FILE_TYPE: {
-                       COMIC:                          FileAPI.createFileTypeID(),
-                       PANEL:                          FileAPI.createFileTypeID(),
-                       PICTURE:                        FileAPI.createFileTypeID(),
-                       PANEL_PICTURE:          FileAPI.createFileTypeID(),
-                       BALLOON:                        FileAPI.createFileTypeID(),
-                       AUTHOR:                         FileAPI.createFileTypeID(),
-                       ARTIST:                         FileAPI.createFileTypeID(),
-                       LICENSE:                        FileAPI.createFileTypeID()
-               }
-       }
-})();
-
-
-pettanr.gallery = ( function(){
-       var finder,
-               elmContainer = document.getElementById( 'gallery'),
-               option;
-               
-       return {
-               init: function( _option){
-                       option = _option;
-                       delete pettanr.gallery.init;
-               },
-               firstOpen: function(){
-                       finder = pettanr.finder.createFinder( elmContainer, pettanr.driver.createPictureTree());
-                       delete pettanr.gallery.firstOpen;
-               },
-               onOpen: function(){
-                       pettanr.gallery.firstOpen !== undefined && pettanr.gallery.firstOpen();
-                       finder.onOpen();
-                       
-               },
-               onClose: function(){
-                       finder.onClose();
-               },
-               onWindowResize: function( _w, _h){
-                       finder.onWindowResize( _w, _h);
-               }
-       }
-})();
-
-pettanr.cabinet = ( function(){
-       var finder,
-               elmContainer = document.getElementById( 'cabinet'),
-               option;
-               
-       return {
-               init: function( _option){
-                       option = _option;
-                       delete pettanr.cabinet.init;
-               },
-               firstOpen: function(){
-                       finder = pettanr.finder.createFinder( elmContainer, pettanr.driver.createComicTree());
-                       delete pettanr.cabinet.firstOpen;
-               },
-               onOpen: function(){
-                       pettanr.cabinet.firstOpen !== undefined && pettanr.cabinet.firstOpen();
-                       finder.onOpen();
-                       
-               },
-               onClose: function(){
-                       finder.onClose();
-               },
-               onWindowResize: function( _w, _h){
-                       finder.onWindowResize( _w, _h);
-               }
-       }
-})();
-
-// i18n
-// login
-// lib
-
-pettanr.fn( pettanr.view);
-pettanr.fn( pettanr.overlay);
-pettanr.fn( pettanr.key);
-pettanr.fn( pettanr.balloon);
-
-pettanr.fn( pettanr.editor);
-pettanr.fn( pettanr.comicConsole);
-pettanr.fn( pettanr.uploadConsole);
-
-pettanr.fn( pettanr.file);
-pettanr.fn( pettanr.finder);
-pettanr.fn( pettanr.gallery);
-pettanr.fn( pettanr.cabinet);
-
-$(window).ready( pettanr.init);
diff --git a/app/assets/javascripts/work.js b/app/assets/javascripts/work.js
deleted file mode 100644 (file)
index 91fa9ee..0000000
+++ /dev/null
@@ -1,3800 +0,0 @@
-/*\r
- * pettanR work.js\r
- *   version 0.4.5\r
- *   \r
- * author:\r
- *   itozyun\r
- * licence:\r
- *   3-clause BSD\r
- *\r
- * \r
- * ----------------------------------------\r
- * naming rules\r
- * \r
- *  Class\r
- *    ThisIsClass\r
- *  \r
- *  const\r
- *    THIS_IS_CONST = 'this is const';\r
- *  \r
- *  var\r
- *    thisIsVar\r
- *   \r
- *  value of jquery\r
- *    jqWrapper, JQ_WRAPPER\r
- *  \r
- *  value of dom element\r
- *    elmWrapper, ELM_WRAP\r
- * \r
- *     value of vml element\r
- *    vmlImg, VML_SHAPE\r
- * \r
- */\r
-\r
-\r
-/* ----------------------------------------\r
- *   pettanr.editor\r
- *    - MENU_BAR_CONTROL\r
- *    - HISTORY_CONTROL\r
- *    - SAVE_CONTROL\r
- *    - TEXT_EDITOR_CONTROL\r
- *    - IMAGE_GROUP_EXPROLER\r
- *    - WINDOW_CONTROL\r
- *       - WindowClass\r
- *    - INFOMATION_WINDOW\r
- *    - TOOL_BOX_WINDOW\r
- *    - HELP_DOCUMENTS_WINDOW\r
- *    - PANEL_CONTROL\r
- *    - GRID_CONTROL\r
- *    - WHITE_GLASS_CONTROL\r
- *    - PANEL_CONTROL\r
- *    \r
- * \r
- *    - PanelResizerClass\r
- *    - PANEL_RESIZER_TOP\r
- *    - PANEL_RESIZER_BOTTOM\r
- *    - CONSOLE_CONTROLER\r
- * \r
- *    - TAIL_OPERATOR\r
- *    - RESIZE_OPERATOR\r
- *    - POSITION_OPERATOR\r
- *    - COMIC_ELEMENT_OPERATION_MANAGER\r
- *      \r
- *    - ImageElementClass\r
- *    - TextElementClass\r
- * \r
- *    - COMIC_ELEMENT_CONTROL\r
- * \r
- * \r
- */\r
-pettanr.editor = ( function(){\r
-\r
-       var COMIC_ELEMENT_TYPE_IMAGE = 0,\r
-               COMIC_ELEMENT_TYPE_TEXT = 1,\r
-               MOUSE_LISTENER_ARRAY = [],\r
-               COMIC_ELEMENT_ARRAY = [],\r
-               ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
-               MIN_PANEL_HEIGHT = 20,\r
-               MIN_ELEMENT_SIZE = 19,\r
-               MOUSE_HIT_AREA = 10,\r
-               jqMouseEventChacher,\r
-               jqEditor,\r
-               windowW, windowH,\r
-               currentListener = null,\r
-               currentCursor = '',\r
-               option,\r
-               log;\r
-\r
-/* ----------------------------------------\r
- * MENU BAR\r
- *  - mouseEventListener\r
- *  - controler\r
- * \r
- * div\r
- *   div.title\r
- *   ul\r
- *     li\r
- *        a\r
- *          span\r
- *          kbd shortcut\r
- */\r
-       var MENU_BAR_CONTROL = ( function(){\r
-               var ELM_BAR = document.getElementById( 'menu-bar'),\r
-                       ELM_ITEM_CLASSNAME = 'menu-bar-item',\r
-                       ELM_ITEM_ORIGN = ( function(){\r
-                               var ret = document.createElement( 'div'),\r
-                                       div = document.createElement( 'div'),\r
-                                       ul = document.createElement( 'ul');\r
-                               ret.className = ELM_ITEM_CLASSNAME;\r
-                               ret.appendChild( div);\r
-                               ret.appendChild( ul);\r
-                               return ret;\r
-                       })(),\r
-                       ELM_SELECTION_ORIGN = ( function(){\r
-                               var ret = document.createElement( 'li'),\r
-                                       a = document.createElement( 'a'),\r
-                                       span = document.createElement( 'span'),\r
-                                       key = document.createElement( 'kbd');\r
-                               a.appendChild( span);\r
-                               a.appendChild( key);\r
-                               ret.appendChild( a);\r
-                               a.href = '#';\r
-                               return ret;\r
-                       })(),\r
-                       ITEM_ARRAY = [],\r
-                       barH = pettanr.util.getElementSize( ELM_BAR).height,\r
-                       itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,\r
-                       selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width,\r
-                       jqStage, jqBar;\r
-               ELM_BAR.style.top = ( -barH) +'px';\r
-\r
-               var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){\r
-                       var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),\r
-                               ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],\r
-                               elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];\r
-                               \r
-                       if( shortcut){\r
-                               elmShortcut.innerHTML = shortcut;\r
-                       } else {\r
-                               elmShortcut.parentNode.removeChild( elmShortcut);\r
-                       }\r
-                       elmShortcut = null;\r
-                       \r
-                       container.appendChild( ELM_WRAPPER);\r
-                       \r
-                       updateTitle( title);\r
-                       updateVisible( visible);\r
-                       \r
-                       function updateTitle( _title){\r
-                               ELM_TITLE.innerHTML = title = _title;\r
-                       }\r
-                       function updateVisible( _visible){\r
-                               if( _visible !== undefined){\r
-                                       visible = !!_visible;\r
-                                       ELM_WRAPPER.className = visible === true ? '' : 'disabled';\r
-                               };\r
-                       }\r
-                       return {\r
-                               elm: ELM_WRAPPER,\r
-                               title: function( _title){\r
-                                       _title !== undefined && updateTitle( _title);\r
-                                       return title;\r
-                               },\r
-                               visible: function( _visible){\r
-                                       visible !== !!_visible && updateVisible( _visible);\r
-                                       return visible;\r
-                               },\r
-                               separateAfter: separateAfter\r
-                       }\r
-               }\r
-\r
-               var MenuBarItemClass = function( title){\r
-                       var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),\r
-                               ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],\r
-                               ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],\r
-                               INDEX = ITEM_ARRAY.length,\r
-                               SELECTION_CALLBACK_ARRAY = [],\r
-                               numSelection = 0,\r
-                               visible = false;\r
-                       ELM_TITLE.innerHTML = title;\r
-                       \r
-                       ELM_WRAPPER.style.left = ( itemW * INDEX) +'px';\r
-                       ELM_BAR.appendChild( ELM_WRAPPER);\r
-                       \r
-                       function onClick( e){\r
-                               var that = this,\r
-                                       i = pettanr.util.getChildIndex( this.parentNode, this);\r
-                               i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);\r
-                               e.stopPropagation();\r
-                               return false;\r
-                       }\r
-                       return {\r
-                               elm: ELM_WRAPPER,\r
-                               onClick: onClick,\r
-                               init: function(){\r
-                                       $( ELM_SELECTION).children( 'li').click( onClick);\r
-                                       delete this.init;\r
-                               },\r
-                               show: function(){\r
-                                       if( visible === true) return;\r
-                                       jqStage.append( ELM_WRAPPER);\r
-                                       ELM_WRAPPER.className = ELM_ITEM_CLASSNAME +'-focus';\r
-                                       this.onShow && setTimeout( this.onShow, 0);\r
-                                       visible = true;\r
-                               },\r
-                               hide: function(){\r
-                                       if( visible === false) return;\r
-                                       ELM_BAR.appendChild( ELM_WRAPPER);\r
-                                       ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;\r
-                                       this.onHide && setTimeout( this.onHide, 0);\r
-                                       visible = false;\r
-                               },\r
-                               createSelection: function( title, shortcut, callback, visible, separateBefore, separateAfter){\r
-                                       var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]),\r
-                                               before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null;\r
-                                       SELECTION_CALLBACK_ARRAY.push( callback);\r
-                                       if( before !== null && ( separateBefore === true || before.separateAfter === true)){\r
-                                               ret.elm.style.borderTop = '1px solid #ccc';\r
-                                       }\r
-                                       return ret;\r
-                               }\r
-                       }\r
-               }\r
-\r
-               \r
-               function createMenubarItem( title){\r
-                       var _item = new MenuBarItemClass( title);\r
-                       ITEM_ARRAY.push( _item);\r
-                       return _item;\r
-               }\r
-               return {\r
-                       init: function(){\r
-                               jqStage = jqEditor;\r
-                               jqBar = $( ELM_BAR).animate( { top: 0});\r
-\r
-                               var l = ITEM_ARRAY.length;\r
-                               for( var i=0; i<l; ++i){\r
-                                       ITEM_ARRAY[ i].init();\r
-                               }\r
-\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
-                                       return true;\r
-                               }\r
-                               var l = ITEM_ARRAY.length;\r
-                               for( var i=0; i<l; ++i){\r
-                                       ITEM_ARRAY[ i].hide();\r
-                               }\r
-                               return false;\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               return false;\r
-                       },\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               var l = ITEM_ARRAY.length;\r
-                               if( barH < _mouseY || itemW * l < _mouseX) return false;\r
-                               for( var i=0; i<l; ++i){\r
-                                       if( i * itemW <= _mouseX && _mouseX < ( i +1) * itemW){\r
-                                               ITEM_ARRAY[ i].show();\r
-                                       } else {\r
-                                               ITEM_ARRAY[ i].hide();\r
-                                       }\r
-                               }\r
-                               return true;\r
-                       },\r
-                       busy: function( _busy){\r
-                               return false;\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               \r
-                       },\r
-                       QUIT: createMenubarItem( 'Quit'),\r
-                       EDIT: createMenubarItem( 'Edit'),\r
-                       WINDOW: createMenubarItem( 'Window'),\r
-                       HELP: pettanr.util.extend( createMenubarItem( 'Help'), {\r
-                                       createAjaxSelection: function( callback){\r
-                                               var elmLoading = document.createElement( 'li'),\r
-                                                       that = this,\r
-                                                       elmSelection = this.elm.getElementsByTagName( 'ul')[ 0];\r
-                                               elmSelection.appendChild( elmLoading);\r
-                                               elmLoading.className = 'loading';\r
-                                               elmLoading.style.height = '90px';                                                       \r
-\r
-                                               this.onShow = callback;\r
-                                               callback = null;\r
-                                               \r
-                                               delete this.createAjaxSelection;\r
-                                               return function(){\r
-                                                       elmSelection.removeChild( elmLoading);\r
-                                                       $( elmSelection).children( 'li').click( that.onClick);\r
-                                                       elmLoading = elmSelection = null;\r
-                                                       delete that.onShow;\r
-                                                       that = null;\r
-                                               }\r
-                                       }\r
-                               })\r
-               }\r
-       })();\r
-\r
-\r
-/* ----------------------------------------\r
- * HISTORY_CONTROL\r
- *  - controler\r
- */\r
-       var HISTORY_CONTROL = ( function() {\r
-               var     STACK_BACK = [],\r
-                       STACK_FORWARD = [],\r
-                       MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),\r
-                       MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),\r
-                       log;\r
-                       \r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, false, true, back);       // ctrl + Z\r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, true, true, forward);     // ctrl + shift + Z\r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 89, false, true, forward); // ctrl + Y\r
-\r
-               function back(){\r
-                       /*\r
-                        * currentを控えてSTACK_FORWARD.push(current)\r
-                        * STACK_BACK.pop()を実行してcurrentに\r
-                        */\r
-                       if( STACK_BACK.length === 0) return;\r
-\r
-                       var state = STACK_BACK.pop();\r
-                       state && state.fn( state.argBack);\r
-                       MENUBAR_BACK.visible( STACK_BACK.length !== 0);\r
-                       SAVE_CONTROL.panelUpdated( STACK_BACK.length !== 0);\r
-                       \r
-                       STACK_FORWARD.push( state);\r
-                       MENUBAR_FORWARD.visible( true);\r
-               }\r
-               function forward(){\r
-                       if( STACK_FORWARD.length === 0) return;\r
-                       \r
-                       var state = STACK_FORWARD.pop();\r
-                       state.fn( state.argForword);\r
-                       MENUBAR_FORWARD.visible( STACK_FORWARD.length !== 0);\r
-                       \r
-                       STACK_BACK.push( state);\r
-                       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_CONTROL.init;\r
-                       },\r
-                       open: function(){\r
-                               HISTORY_CONTROL.init && HISTORY_CONTROL.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
-                                       argForword:     _argForword,\r
-                                       destroy:        _destroy\r
-                       });\r
-                       MENUBAR_BACK.visible( true);\r
-                               SAVE_CONTROL.panelUpdated( true);\r
-                               \r
-                               var _stack;\r
-                       while( STACK_FORWARD.length > 0){\r
-                                       _stack = STACK_FORWARD.shift();\r
-                                       destroyStack( _stack, _stack.destroy);\r
-                               }\r
-                               MENUBAR_FORWARD.visible( false);\r
-                   }           \r
-               }\r
-       })();\r
-\r
-\r
-/* ----------------------------------------\r
- * OUTPUT_CONSOLE\r
- *  - overlay\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
-/* ----------------------------------------\r
- * SAVE_CONTROL\r
- *  - controler\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
-                       QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
-                       updated = false;\r
-               \r
-               function quit(){\r
-                       // 本来は os.application.close();\r
-                       pettanr.view.show( 'entrance');\r
-               }\r
-               \r
-               function outputAsHtml(){\r
-                       OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
-               }\r
-               function outputAsJsonString(){\r
-                       OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
-               }\r
-               return {\r
-                       open: function(){},\r
-                       close: function(){},\r
-                       quit: quit,\r
-                       panelUpdated: function( _updated){\r
-                               if( _updated !== undefined && updated !== _updated){\r
-                                       SAVE.visible( !!_updated);\r
-                                       SAVE_AND_QUIT.visible( !!_updated);\r
-                                       updated = !!_updated;\r
-                               }\r
-                               return updated;\r
-                       },\r
-                       save: function(){\r
-                               \r
-                       }\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * Text Editor\r
- *  - overlay\r
- */\r
-       var TEXT_EDITOR_CONTROL = ( function(){\r
-               var jqWrap, jqTextarea, jqButton,\r
-                       textElement, onUpdateFunction,\r
-                       ID = 'textEditor';\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function close(){\r
-                       jqWrap.hide();\r
-                       textElement = onUpdateFunction = null;          \r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\r
-                       textElement && textElement.text( jqTextarea.val());\r
-                       onUpdateFunction && onUpdateFunction( textElement);\r
-                       close();                        \r
-               }\r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
-                               jqTextarea = $( '#speach-editor').keydown( function( e){\r
-                                       if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
-                                               clickOK();\r
-                                               e.preventDefault();\r
-                                       e.keyCode = 0;\r
-                                       e.cancelBubble = true;\r
-                                       e.returnValue = false;\r
-                                               return false;\r
-                                       }\r
-                               });\r
-                               jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
-                               delete TEXT_EDITOR_CONTROL.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _textElement, _onUpdateFunction){\r
-                               textElement = _textElement;\r
-                               onUpdateFunction = _onUpdateFunction || null;\r
-                               pettanr.overlay.show( this);\r
-                               var h = _textElement.h;\r
-                               jqWrap.show().css( {\r
-                                       left:                   _textElement.x +PANEL_CONTROL.x(),\r
-                                       top:                    _textElement.y +PANEL_CONTROL.y(),\r
-                                       width:                  _textElement.w,\r
-                                       height:                 h\r
-                               });\r
-                               jqTextarea.val( _textElement.text()).focus();\r
-                               \r
-                               /*\r
-                                * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。\r
-                                */\r
-                               pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){\r
-                                       var rows = 0;\r
-                                       while( jqTextarea.height() < h){\r
-                                               rows++;\r
-                                               jqTextarea.attr( 'rows', rows);\r
-                                       }\r
-                                       rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
-                               }, 0);\r
-                       },\r
-                       onWindowResize: function(){\r
-                               textElement && this.show( textElement);\r
-                       },\r
-                       onClose: close,\r
-                       ID: ID\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * Image Group Exproler\r
- *  - overlay\r
- */\r
-       var IMAGE_GROUP_EXPROLER = ( function(){\r
-               var ICON_ARRAY = [],\r
-                       WHEEL_DELTA = 64,\r
-                       containerW, containerH, wrapX,\r
-                       jqWrap, jqContainer, jqItemOrigin,\r
-                       itemW, itemH,\r
-                       jqName, jqButton, buttonW,\r
-                       //onUpdateFunction,\r
-                       _g_onUpdateFunction,\r
-                       winW,\r
-                       onEnterInterval = null;\r
-               \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
-                               pen001: [\r
-                                   {\r
-                                       "created_at": "2011-11-13T08:57:39Z", \r
-                                       "ext": "png", \r
-                                       "filesize": 9969, \r
-                                       "height": 463, \r
-                                       "id": 1, \r
-                                       "updated_at": "2011-11-13T08:57:39Z", \r
-                                       "width": 441\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:57:54Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 5418, \r
-                                       "height": 500, \r
-                                       "id": 2, \r
-                                       "updated_at": "2011-11-13T08:57:54Z", \r
-                                       "width": 500\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:06Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 8758, \r
-                                       "height": 464, \r
-                                       "id": 3, \r
-                                       "updated_at": "2011-11-13T08:58:06Z", \r
-                                       "width": 366\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:23Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 9383, \r
-                                       "height": 480, \r
-                                       "id": 4, \r
-                                       "updated_at": "2011-11-13T08:58:23Z", \r
-                                       "width": 392\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-13T08:58:33Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 11061, \r
-                                       "height": 500, \r
-                                       "id": 5, \r
-                                       "updated_at": "2011-11-13T08:58:33Z", \r
-                                       "width": 500\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T09:50:43Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 1131, \r
-                                       "height": 126, \r
-                                       "id": 6, \r
-                                       "updated_at": "2011-11-20T09:50:43Z", \r
-                                       "width": 259\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T09:50:55Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 1125, \r
-                                       "height": 126, \r
-                                       "id": 7, \r
-                                       "updated_at": "2011-11-20T09:50:55Z", \r
-                                       "width": 259\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 8, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 9, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 10, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-20T11:33:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 17919, \r
-                                       "height": 600, \r
-                                       "id": 11, \r
-                                       "updated_at": "2011-11-20T11:33:12Z", \r
-                                       "width": 800\r
-                                   },\r
-                                   {\r
-                                       "created_at": "2011-11-22T09:17:20Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 9055, \r
-                                       "height": 473, \r
-                                       "id": 12, \r
-                                       "updated_at": "2011-11-22T09:17:20Z", \r
-                                       "width": 405\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-22T10:11:07Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 8758, \r
-                                       "height": 464, \r
-                                       "id": 13, \r
-                                       "updated_at": "2011-11-22T10:11:07Z", \r
-                                       "width": 366\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-24T09:05:12Z", \r
-                                       "ext": "gif", \r
-                                       "filesize": 6431, \r
-                                       "height": 386, \r
-                                       "id": 16, \r
-                                       "updated_at": "2011-11-24T09:05:12Z", \r
-                                       "width": 453\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 17, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 18, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 19, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 20, \r
-                                       "updated_at": "2011-11-26T04:52:12Z", \r
-                                       "width": 306\r
-                                   }, \r
-                                   {\r
-                                       "created_at": "2011-11-26T04:52:12Z",\r
-                                       "ext": "gif", \r
-                                       "filesize": 6421, \r
-                                       "height": 426, \r
-                                       "id": 21, \r
-                                       "updated_at": "2011-11-26T04:52:12Z",\r
-                                       "width": 306\r
-                                   }\r
-                               ]\r
-                       }\r
-               \r
-               var ImageGroupIconClass = function( INDEX, data){\r
-                       var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
-                               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
-                               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
-                               }\r
-                               close();\r
-                       }\r
-                       \r
-                       return {\r
-                               onEnter: function(){\r
-                                       if( onEnterFlag === true) return;\r
-                                       reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);\r
-                                       JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
-                                       onEnterFlag = true;                                             \r
-                               },\r
-                               destroy: function(){\r
-                                       reversibleImage && reversibleImage.destroy();\r
-                                       JQ_ICON_WRAP.remove();\r
-                                       reversibleImage = JQ_ICON_WRAP = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               }\r
-               \r
-               function close(){\r
-                       jqContainer.stop().animate( {\r
-                                       height: 0,\r
-                                       top:    Math.floor( windowH /2)\r
-                               }, function(){\r
-                                       jqWrap.hide()\r
-                               });\r
-                       while( ICON_ARRAY.length > 0){\r
-                               ICON_ARRAY.shift().destroy();\r
-                       }\r
-                       onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                       onEnterInterval = _g_onUpdateFunction = null;\r
-               }\r
-               function onEnterShowImage(){\r
-                       var l = ICON_ARRAY.length,\r
-                               _start = -wrapX /itemW -1,\r
-                               _end = _start + winW /itemW +1;\r
-                       for( var i=0; i<l; ++i){\r
-                               _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
-                       }\r
-                       onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
-                       onEnterInterval = null;\r
-               }\r
-               function clickOK(){\r
-                       pettanr.overlay.hide();\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( 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
-                               itemW = itemSize.width;\r
-                               itemH = itemSize.height;\r
-                               jqName = $( '#gruop-name-display');\r
-                               jqButton = $( '#image-gruop-button').click( clickOK);\r
-                               buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
-                               \r
-                               delete IMAGE_GROUP_EXPROLER.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( _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
-                                       l = CURRENT_GROUP_ARRAY.length;\r
-                               for( var i=0; i<l; ++i){\r
-                                       ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));\r
-                               }\r
-                               wrapX = 0;\r
-                               containerW = l * itemW;\r
-                               \r
-                               winW = windowW;\r
-                               var w = winW > containerW ? winW : containerW,\r
-                                       h = windowH > containerH ? containerH : windowH;\r
-                               \r
-                               jqWrap.show();\r
-                               jqContainer.css( {\r
-                                       width:          w,\r
-                                       height:         0,\r
-                                       left:           0,\r
-                                       top:            Math.floor( windowH /2)\r
-                               }).stop().animate( {\r
-                                       height:         h,\r
-                                       top:            Math.floor( windowH /2 -h /2)\r
-                               });\r
-                               \r
-                               jqButton.css( {\r
-                                       left:           Math.floor( winW /2 -buttonW /2),\r
-                                       top:            Math.floor( windowH /2 +containerH /2 +10)\r
-                               });\r
-                               \r
-                               onEnterShowImage();\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               var w = _windowW > containerW ? _windowW : containerW,\r
-                                       h = _windowH > containerH ? containerH : _windowH,\r
-                                       offsetW = Math.floor( _windowW /2 -winW /2);\r
-                               winW = _windowW;\r
-                               if( offsetW <= 0){ // smaller\r
-                                       jqContainer.css( {\r
-                                               left:                           offsetW,\r
-                                               width:                          w\r
-                                       }).animate( {\r
-                                               left:                           0,\r
-                                               top:                            Math.floor( _windowH /2 -h /2)\r
-                                       });                                     \r
-                               } else {\r
-                                       jqContainer.css( { // bigger\r
-                                               left:                           0,\r
-                                               width:                          w,\r
-                                               borderLeftWidth:        offsetW\r
-                                       }).animate( {\r
-                                               top:                            Math.floor( _windowH /2 -h /2),\r
-                                               borderLeftWidth:        0\r
-                                       });\r
-                               }\r
-                               jqButton.css( {\r
-                                       left:           Math.floor( _windowW /2 -buttonW /2),\r
-                                       top:            Math.floor( _windowH /2 +containerH /2 +10)\r
-                               });\r
-                               onEnterShowImage();\r
-                       },\r
-                       onClose: close,\r
-                       ID: 'imageGroupExproler'\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * WINDOWS_CONTROL\r
- *  - contloler\r
- *  - mouseEventListener\r
- */    \r
-       var WINDOWS_CONTROL = ( function(){\r
-               /*\r
-                *  表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。\r
-                */\r
-               var DEFAULT_MIN_WINDOW_WIDTH = 200,\r
-                       DEFAULT_MIN_WINDOW_HEIGHT = 200,\r
-                       WINDOW_ARRAY = [],\r
-                       WINDOW_BODY_BODER_SIZE = 1,\r
-                       jqContainer,\r
-                       currentWindow,\r
-                       currentWindowIndex = -1,\r
-                       log;\r
-\r
-               var jqWindowOrigin,\r
-                       closeButtonWidth;\r
-               var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){\r
-                       var MOUSE_CURSOR = updateMouseCursor,\r
-                               MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( \r
-                                       ( visible !== true ? 'show ' : 'hide ') +title,\r
-                                       null, onMenuClick, true\r
-                               ),\r
-                               jqStage,\r
-                               jqWrapper, jqHeader, jqFooter = null,\r
-                               elmBody, elmBodyStyle,\r
-                               startX, startY, startW, startH,\r
-                               offsetX, offsetY,\r
-                               headerH, bodyH, footerH = 0,\r
-                               isDragging = false,\r
-                               isResizing = false,\r
-                               bodyIsTachable = false,\r
-                               instance;\r
-\r
-                       function onMenuClick(){\r
-                               visible === true ? instance.close() : instance.open();\r
-                       }\r
-                       function update( _x, _y, _w, _h){\r
-                               _x = _x !== undefined ? _x : x;\r
-                               _y = _y !== undefined ? _y : y;\r
-                               _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;\r
-                               _w = _w !== undefined ? _w : w;\r
-                               _h = _h !== undefined ? _h : h;\r
-                               jqWrapper.css( {\r
-                                       left:           _x,\r
-                                       top:            _y,\r
-                                       width:          _w,\r
-                                       height:         _h\r
-                               });\r
-                               bodyH = _h -headerH -footerH;\r
-                               elmBodyStyle.height = bodyH +'px';\r
-                               ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH);\r
-                               x = _x;\r
-                               y = _y;\r
-                               w = _w;\r
-                               h = _h;\r
-                       }\r
-                       function bodyBackOrForward( isBack){\r
-                               if( !instance) return;\r
-                               if( bodyIsTachable === !isBack) return;\r
-                               elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';\r
-                               elmBodyStyle.left =             isBack === true ? 0  : x +'px';\r
-                               elmBodyStyle.top =              isBack === true ? 0  : y +headerH +'px';\r
-                               elmBodyStyle.width =    isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';\r
-                               bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody);\r
-                               bodyIsTachable = !isBack;\r
-                       }\r
-                       function onWindowResize( e){\r
-                               bodyBackOrForward( true);\r
-                               isResizing = true;\r
-                               startX = x;\r
-                               startY = y;\r
-                               startW = w;\r
-                               startH = h;\r
-                               offsetX = e.pageX;\r
-                               offsetY = e.pageY;\r
-                               MOUSE_CURSOR( 'nw-resize');\r
-                               e.stopPropagation();\r
-                               return false;\r
-                       }\r
-                       return {\r
-                               init: function( jqContainer){\r
-                                       /*\r
-                                        * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う.\r
-                                        */\r
-                                       instance = this;\r
-                                       \r
-                                       jqWindowOrigin = jqWindowOrigin || ( function(){\r
-                                               return $( $( '#windowTemplete').remove().html());\r
-                                       })();\r
-                                       closeButtonWidth = closeButtonWidth || ( function(){\r
-                                               return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
-                                       })();\r
-                                       \r
-                                       jqStage = jqEditor;\r
-                                       this.$ = jqWrapper = jqWindowOrigin.clone( true);\r
-                                       jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
-                                       headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;\r
-                                       elmBody = jqWrapper.children( '.window-body').get( 0);\r
-                                       elmBodyStyle = elmBody.style;\r
-                                       \r
-                                       if( bodyTempleteID) {\r
-                                               jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
-                                       } else {\r
-                                               jqWrapper.find( '.window-body-insert-position').remove();\r
-                                       }\r
-                                       CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
-                                       \r
-                                       this.onInit && this.onInit();\r
-                                       delete this.init;\r
-                               },\r
-                               x: function(){ return x;},\r
-                               y: function(){ return y;},\r
-                               w: function(){ return w;},\r
-                               h: function(){ return h;},\r
-                               $: null,\r
-                               title: function( _title){\r
-                                       typeof _title === 'string' && jqHeader.html( _title);\r
-                                       title = typeof _title === 'string' ? _title : title;\r
-                                       return title;\r
-                               },\r
-                               visible: visible,\r
-                               firstOpen: function(){\r
-                                       if( RESIZE_BUTTON_ENABLED === true){\r
-                                               footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height;\r
-                                               //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);\r
-                                       } else {\r
-                                               jqWrapper.find( '.window-footer').remove();\r
-                                       }\r
-                                       this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);\r
-                                       \r
-                                       update( x, y, w, h);\r
-                                       \r
-                                       delete this.firstOpen;\r
-                               },\r
-                               open: function(){\r
-                                       if( visible === true) return;\r
-                                       instance.visible = visible = true;\r
-                                       openWindow( instance);\r
-                                       MENUBAR_SELWCTION.title( 'hide ' +title);\r
-                                       \r
-                                       for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){\r
-                                               if( WINDOW_ARRAY[ i] === instance){\r
-                                                       WINDOW_ARRAY.splice( i, 1);\r
-                                                       WINDOW_ARRAY.unshift( instance);\r
-                                                       currentWindow = null;\r
-                                                       currentWindowIndex = -1;\r
-                                               }\r
-                                       }\r
-                               },\r
-                               onFadeIn: function(){\r
-                                       instance.firstOpen && instance.firstOpen();\r
-                                       instance.onOpen && setTimeout( callOnOpen, 0);\r
-                                       function callOnOpen(){\r
-                                               instance.onOpen( w, bodyH);\r
-                                       }\r
-                               },\r
-                               onFadeOut: function(){\r
-                                       var elmWrapper = jqWrapper.get(0);\r
-                                       elmWrapper.parentNode.removeChild( elmWrapper);\r
-                                       instance.onClose && setTimeout( instance.onClose, 0);\r
-                               },\r
-                               close: function(){\r
-                                       if( visible === false) return;\r
-                                       instance.visible = visible = false;\r
-                                       jqWrapper.fadeOut( instance.onFadeOut);\r
-                                       MENUBAR_SELWCTION.title( 'show ' +title);\r
-                               },\r
-                               bodyBackOrForward: bodyBackOrForward,\r
-                               onMouseDown: function( _mouseX, _mouseY){\r
-                                       if( RESIZE_BUTTON_ENABLED === true && x +w -20 <= _mouseX && _mouseX < x +w && y +headerH +bodyH < _mouseY && _mouseY <= y +h){\r
-                                               bodyBackOrForward( true);\r
-                                               isResizing = true;\r
-                                               startX = x;\r
-                                               startY = y;\r
-                                               startW = w;\r
-                                               startH = h;\r
-                                               offsetX = _mouseX;\r
-                                               offsetY = _mouseY;\r
-                                               MOUSE_CURSOR( 'nw-resize');\r
-                                               return;\r
-                                       }\r
-                                       \r
-                                       if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
-                                       if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){\r
-                                               instance.close();\r
-                                               return;\r
-                                       }\r
-                                       \r
-                                       isDragging = true;\r
-                                       MOUSE_CURSOR( 'move');                          \r
-                                       startX = x;\r
-                                       startY = y;\r
-                                       startW = w;\r
-                                       startH = h;\r
-                                       offsetX = _mouseX;\r
-                                       offsetY = _mouseY;\r
-                               },\r
-                               onMouseUp: function( _mouseX, _mouseY){\r
-                                       isDragging = isResizing = false;\r
-                                       MOUSE_CURSOR( '');\r
-                               },\r
-                               onMouseMove: function( _mouseX, _mouseY){\r
-                                       var _updateX = _mouseX -offsetX,\r
-                                               _updateY = _mouseY -offsetY;\r
-                                       \r
-                                       if( isResizing === true){\r
-                                               var _w = startW +_updateX,\r
-                                                       _h = startH +_updateY;\r
-                                               update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);\r
-                                               return;\r
-                                       } else\r
-                                       if( isDragging === true) {\r
-                                               update( startX +_updateX, startY +_updateY);\r
-                                               return;\r
-                                       } else\r
-                                       if( x > _mouseX || x +w < _mouseX ) return;\r
-       \r
-                                       ( y <= _mouseY && y +headerH >= _mouseY ) ?\r
-                                               MOUSE_CURSOR( 'pointer') :      // hit to header\r
-                                               MOUSE_CURSOR( '');\r
-                                       bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);\r
-                               },\r
-                               onMouseOut: function( _mouseX, _mouseY){\r
-                                       bodyIsTachable === true && bodyBackOrForward( true);\r
-                                       isDragging = false;\r
-                                       MOUSE_CURSOR( '');\r
-                               },\r
-                               busy: function(){\r
-                                       return isDragging === true || isResizing === true;\r
-                               },\r
-                               bodyHeight: function(){\r
-                                       return  bodyH;\r
-                               }\r
-                       }\r
-               };\r
-               \r
-               function getCurrentIndex( _mouseX, _mouseY){\r
-                       if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
-                       var l = WINDOW_ARRAY.length,\r
-                               _currentWindow = null,\r
-                               _win, _x, _y;\r
-                       currentWindowIndex = -1;\r
-                       for( var i=0; i<l; i++){\r
-                               _win = WINDOW_ARRAY[ i];\r
-                               if( _win.visible !== true) continue;\r
-                               _x = _win.x();\r
-                               _y = _win.y();\r
-                               if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){\r
-                                       _currentWindow = _win;\r
-                                       currentWindowIndex = i;\r
-                                       break;\r
-                               }\r
-                       }\r
-                       currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);\r
-                       currentWindow = _currentWindow;\r
-                       return currentWindowIndex;\r
-               }\r
-               function openWindow( _window){\r
-                       if( _window.visible !== true) return;\r
-                       var _jqWindow = _window.$;\r
-                       jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない.\r
-                       _jqWindow.fadeIn( _window.onFadeIn);\r
-                       return;\r
-               }\r
-               \r
-               return {\r
-                       init: function(){\r
-                               jqContainer = $( '#window-container');\r
-                               \r
-                               var l = WINDOW_ARRAY.length,\r
-                                       _window;\r
-                               for( var i=l-1; i >= 0; --i){\r
-                                       _window = WINDOW_ARRAY[ i];\r
-                                       _window.init && _window.init( jqContainer);\r
-                                       _window.visible === true && openWindow( _window);\r
-                               }\r
-                               log = $( '#window-log');\r
-                               \r
-                               delete WINDOWS_CONTROL.init;\r
-                       },\r
-                       open: function(){\r
-                               WINDOWS_CONTROL.init && WINDOWS_CONTROL.init();\r
-                       },\r
-                       close: function(){\r
-                               \r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               var _index = getCurrentIndex( _mouseX, _mouseY);\r
-                               if( _index === 0){\r
-                                       currentWindow.onMouseMove( _mouseX, _mouseY);\r
-                                       return true;\r
-                               } else\r
-                               if( _index > 0){ // 先頭のクリックでない場合\r
-                               // Array を前に\r
-                                       WINDOW_ARRAY.splice( currentWindowIndex, 1);\r
-                                       WINDOW_ARRAY.unshift( currentWindow);\r
-                               // Domを最後に\r
-                                       jqContainer.append( currentWindow.$);\r
-                                       currentWindowIndex = 0;\r
-                                       return true;\r
-                               }\r
-                               return false;\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
-                                       currentWindow.onMouseUp( _mouseX, _mouseY);\r
-                                       return true;\r
-                               }\r
-                               return false;\r
-                       },\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
-                                       currentWindow.onMouseDown( _mouseX, _mouseY);\r
-                                       return true;\r
-                               }\r
-                               return false;\r
-                       },\r
-                       busy: function(){\r
-                               return currentWindow !== null;\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               /*\r
-                                * 画面外に出るwindowの移動\r
-                                */\r
-                       },\r
-                       createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
-                               opt_visible = opt_visible !== false;\r
-                               opt_closeButtonEnabled = opt_closeButtonEnabled === true;\r
-                               opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;\r
-                               opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;\r
-                               opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
-                               \r
-                               var _window = pettanr.util.extend(\r
-                                       new WindowClass(\r
-                                               bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH\r
-                                       ),\r
-                                       EXTENDS\r
-                               );\r
-                               WINDOW_ARRAY.unshift( _window);\r
-                               WINDOWS_CONTROL.init === undefined && _window.init( jqContainer);\r
-                               WINDOWS_CONTROL.init === undefined && openWindow( _window);\r
-                               return _window;\r
-                       }\r
-               }\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * TOOL_BOX_WINDOW\r
- * - window\r
- */\r
-       var TOOL_BOX_WINDOW = ( function(){\r
-               var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,\r
-                       instance;\r
-                       \r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage);\r
-               MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);\r
-               \r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 84, false, true, addText);\r
-               MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);\r
-\r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 71, false, true, switchGrid);\r
-               MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
-\r
-               function addImage( e){\r
-                       setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0);\r
-                       e && e.preventDefault && e.preventDefault();\r
-                       return false;\r
-               }\r
-               function addText( e){\r
-                       setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0);\r
-                       e && e.preventDefault && e.preventDefault();\r
-                       return false;\r
-               }\r
-               function switchGrid( e){\r
-                       setTimeout( GRID_CONTROL.update, 0);\r
-                       e && e.preventDefault && e.preventDefault();\r
-                       return false;\r
-               }\r
-               function popupHelp( e){\r
-                       instance.bodyBackOrForward( true);\r
-                       setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);\r
-                       e && e.preventDefault && e.preventDefault();\r
-                       return false;\r
-               }\r
-               function editBG( e){\r
-                       instance.bodyBackOrForward( true);\r
-                       setTimeout( INFOMATION_WINDOW.open, 0); \r
-                       e && e.preventDefault && e.preventDefault();\r
-                       return false;\r
-               }\r
-               \r
-               return WINDOWS_CONTROL.createWindow(\r
-                       {\r
-                               onInit: function(){\r
-                                       instance = this;\r
-                                       delete this.onInit;\r
-                               },\r
-                               onFirstOpen: function(){\r
-                                       addImageButton = $( '#toolbox-add-image-button').click( addImage);\r
-                                       addTextButton = $( '#toolbox-add-text-button').click( addText);\r
-                                       editBgButton = $( '#toolbox-edit-bg-button').click( editBG);\r
-                                       switchGridButton = $( '#toolbox-switch-grid').click( switchGrid);\r
-                                       popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp);\r
-                                       \r
-                                       postButton = $( '#toolbox-post-button');\r
-                                       \r
-                                       delete this.onFirstOpen;\r
-                               }\r
-                       },\r
-                       'toolbox-window', 'Tool box', 0, 215, 110, 290, true\r
-               );\r
-       })();\r
-       \r
-       \r
-/* ----------------------------------------\r
- * IMAGE_EXPROLER\r
- *  - window\r
- */\r
-       var IMAGE_EXPLORER_WINDOW = ( function(){\r
-               var instance, finder;\r
-               \r
-               return WINDOWS_CONTROL.createWindow(\r
-                       {\r
-                               onInit: function(){\r
-                                       instance = this;\r
-                                       delete this.onInit;\r
-                               },\r
-                               onFirstOpen: function( _w, _h){\r
-                                       finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
-                                       delete this.onFirstOpen;\r
-                               },\r
-                               onOpen: function( _w, _h){\r
-                                       finder.onOpen( _w, _h);\r
-                               },\r
-                               onResize: function( _w, _h){\r
-                                       finder.onWindowResize( _w, _h);\r
-                               }\r
-                       },\r
-                       'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300\r
-               );\r
-       })();\r
-       \r
-       \r
-/* ----------------------------------------\r
- * INFOMATION_WINDOW\r
- *  - window\r
- */                    \r
-       var INFOMATION_WINDOW = ( function(){\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
-                       inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,\r
-                       inputPercentW, inputPercentH,\r
-                       currentComicElement = null,\r
-                       currentElementType = -1,\r
-                       currentLock = false;\r
-\r
-               return WINDOWS_CONTROL.createWindow(\r
-                       {\r
-                               onFirstOpen: function( _w, _h){\r
-                                       backgroundInfomationElm = $( '#panel-background-information');\r
-                                       \r
-                                       jqComicElementInformation = $( '#comic-element-infomation').hide().css( {\r
-                                               height:         _h\r
-                                       });\r
-                                       var TAB_GROUP_ID = 'comic-element-attribute';\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.css( {\r
-                                               height: _h\r
-                                       });\r
-                               },\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
-                                                               inputA.visible( true);\r
-                                                               inputPercentW.visible( false);\r
-                                                               inputPercentH.visible( false);\r
-                                                               inputAspectRatio.hide();\r
-                                                       } else {\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
-                                                               opacity:        ''\r
-                                                       })[ FADE_IN_EFFECT]();\r
-                                               } else {\r
-                                                       currentElementType !== -1 && jqComicElementInformation.stop().css({\r
-                                                               filter:         '',\r
-                                                               opacity:        ''\r
-                                                       })[ FADE_OUT_EFFECT]();\r
-                                               }\r
-                                               currentElementType = _elementType;\r
-                                       }\r
-                                       if( currentElementType !== -1){\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
-               );\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * HELP_WINDOW\r
- *  - window\r
- */\r
-       var HELP_DOCUMENTS_WINDOW = ( function(){\r
-               var visible = true,\r
-                       jqAjaxContents,\r
-                       jqNaviItems,\r
-                       jqPages,\r
-                       currentPageIndex = 0,\r
-                       numPage = 0,\r
-                       HELP = MENU_BAR_CONTROL.HELP,\r
-                       onLoadFunction = HELP.createAjaxSelection( onAjaxStart),\r
-                       instance;\r
-\r
-               function onAjaxStart( _pageIndex){\r
-                       currentPageIndex = _pageIndex || currentPageIndex;\r
-                       if( onHelpLoad !== null){\r
-                               $.ajax({\r
-                                       url:            'help/jp.xml',\r
-                                       dataType:       'xml',\r
-                                       success:        onHelpLoad\r
-                               });\r
-                               onHelpLoad = null;\r
-                       }\r
-                       onAjaxStart = new Function;\r
-               }\r
-               var onHelpLoad = function( _xml){\r
-                       var jqXML = $( _xml),\r
-                               helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),\r
-                               elmNavi = document.createElement( 'div'),\r
-                               elmItemOrigin = document.createElement( 'a'),\r
-                               elmPages = document.createElement( 'div'),\r
-                               elmPageOrigin = document.createElement( 'div'),\r
-                               elmTitleOrigin = document.createElement( 'h2'),\r
-                               elmPage;\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
-                               \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
-                       jqPages = jqAjaxContents.find( '.page-content');\r
-                       jqPages.find( 'a').click( onInnerLinkClick);\r
-                       \r
-                       setTimeout( jumpPage, 0);\r
-               }\r
-               function onSelectionClick( _pageIndex){\r
-                       HELP_DOCUMENTS_WINDOW.open();\r
-                       jumpPage( _pageIndex);\r
-               }\r
-               function jumpPage( _index){\r
-                       if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index){\r
-                               currentPageIndex = _index;\r
-                       }\r
-                       jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
-                       jqPages.hide().eq( currentPageIndex).show();\r
-               }\r
-               function onNaviClick( e){\r
-                       // this は <a>\r
-                       jumpPage( pettanr.util.getChildIndex( this.parentNode, this));\r
-                       e.stopPropagation();\r
-                       return false;\r
-               }\r
-               function onInnerLinkClick( e){\r
-                       var jump = ( this.href || '').split( '#jump'),\r
-                               n = jump[1];\r
-                       if( !n) return;\r
-                       jumpPage( '' + parseFloat( n) === n ? parseFloat( n) : -1);\r
-                       e.stopPropagation();\r
-                       return false;                           \r
-               }\r
-               return WINDOWS_CONTROL.createWindow(\r
-                       {\r
-                               onInit: function(){\r
-                                       instance = this;\r
-                                       jqAjaxContents = this.$.find( '.window-body').addClass( 'loading');\r
-                                       delete this.onInit;\r
-                               },\r
-                               onFirstOpen: function( _w, _h){\r
-                                       jqAjaxContents.css( { height: _h});\r
-                                       onAjaxStart();\r
-                                       delete this.onFirstOpen;\r
-                               },\r
-                               onResize: function( _w, _h){\r
-                                       jqAjaxContents && jqAjaxContents.css( { height: _h});\r
-                               }\r
-                       },\r
-                       null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300\r
-               );\r
-       })();\r
-\r
-/* ----------------------------------------\r
- * GRID_CONTROL\r
- *  - control\r
- *  - panelResizeListener\r
- */\r
-       var GRID_CONTROL = ( function(){\r
-               var ELM_GRID = document.getElementById( 'grid'),\r
-                       BG_URL = "url('images/grid.gif')",\r
-                       jqGrid,\r
-                       visible = false;\r
-\r
-               return {\r
-                       init: function(){\r
-                               jqGrid = $( ELM_GRID);\r
-                               delete GRID_CONTROL.init;\r
-                       },\r
-                       open: function(){\r
-                               GRID_CONTROL.init && GRID_CONTROL.init();\r
-                       },\r
-                       close: function(){\r
-                               \r
-                       },\r
-                       onPanelResize: function( _panelX, _panelY){\r
-                               ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');\r
-                               ELM_GRID.style.height = windowH +'px';\r
-                       },\r
-                       enabled: function(){\r
-                               return visible;\r
-                       },\r
-                       update: function(){\r
-                               jqGrid.css( {\r
-                                       opacity:        '',\r
-                                       fliter:         ''\r
-                               }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
-                               \r
-                               visible = !visible;\r
-                               \r
-                               if( visible === true && BG_URL !== null){\r
-                                       ELM_GRID.style.backgroundImage = BG_URL;\r
-                                       BG_URL = null;\r
-                               }\r
-                               return visible;                         \r
-                       }\r
-               }\r
-       })();\r
-               \r
-/* ----------------------------------------\r
- * WHITE_GLASS_CONTROL\r
- *  - panelResizeListener\r
- */\r
-       var WHITE_GLASS_CONTROL = ( function(){\r
-               var styleTop = document.getElementById( 'whiteGlass-top').style,\r
-                       styleLeft = document.getElementById( 'whiteGlass-left').style,\r
-                       styleRight = document.getElementById( 'whiteGlass-right').style,\r
-                       styleBottom = document.getElementById( 'whiteGlass-bottom').style;\r
-\r
-               return {\r
-                       onPanelResize: function( _panelX, _panelY, _panelW, _panelH){\r
-                               var     _w = _panelW,\r
-                                       _h = _panelH,\r
-                                       marginTop = _panelY,\r
-                                       marginBottom = windowH -_h -marginTop,\r
-                                       marginX = _panelX,\r
-                                       rightWidth = windowW -_w -marginX;\r
-                               \r
-                               styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';\r
-                               \r
-                               styleLeft.top = marginTop +'px';\r
-                               styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';\r
-                               styleLeft.height = ( _h + marginBottom) +'px';\r
-                               \r
-                               styleRight.top = marginTop +'px';\r
-                               styleRight.left = _w +marginX +'px';\r
-                               styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';\r
-                               styleRight.height = ( _h + marginBottom) +'px';\r
-                               \r
-                               styleBottom.top = ( _h +marginTop) +'px';\r
-                               styleBottom.left = marginX +'px';\r
-                               styleBottom.width = _w +'px';\r
-                               styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';\r
-                       }\r
-               }\r
-       })();\r
-\r
-\r
-/* ----------------------------------------\r
- * PANEL_CONTROL\r
- *  - controler\r
- *  - mouseEventListener\r
- * \r
- * panel-border の表示と onPanelResize の通知.\r
- * panel drag.\r
- * \r
- */\r
-       var PANEL_CONTROL = ( function(){\r
-               var ELM_PANEL = document.getElementById('panel-tools-container'),\r
-                       ELM_PANEL_STYLE = ELM_PANEL.style,\r
-                       DEFAULT_PANEL_WIDTH = 400,\r
-                       DEFAULT_PANEL_HEIGHT = 300,\r
-                       borderSize = 2,\r
-                       panelW, panelH, panelX, panelY,\r
-                       offsetX, offsetY, startX, startY,\r
-                       isDragging = false,\r
-                       isDraggable = false;\r
-               \r
-               pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);\r
-               \r
-               function onSpaceUpdate(e){\r
-                       if( e.type === 'keyup'){\r
-                               currentListener === null && updateMouseCursor( '');\r
-                               isDraggable = false;\r
-                       } else {\r
-                               currentListener === null && updateMouseCursor( 'move');\r
-                               isDraggable = true;\r
-                       }\r
-               }\r
-               \r
-               return {\r
-                       open: function( _panelW, _panelH, _borderSize){\r
-                               panelW = _panelW || DEFAULT_PANEL_WIDTH;\r
-                               panelH = _panelH || DEFAULT_PANEL_HEIGHT;\r
-                               //panelX = Math.floor( ( windowW -panelW) /2);\r
-                               //panelY = Math.floor( ( windowH -panelH) /2);\r
-                               borderSize = _borderSize !== undefined ? _borderSize : borderSize;\r
-                               \r
-                               //setTimeout( PANEL_CONTROL.resize, 0);\r
-                       },\r
-                       close: function(){\r
-                               \r
-                       },\r
-                       x: function(){\r
-                               return panelX;\r
-                       },\r
-                       y: function(){\r
-                               return panelY;\r
-                       },\r
-                       resize: function( isResizerTopAction, _x, _y, _w, _h){\r
-                               panelX = _x !== undefined ? _x : panelX;\r
-                               panelY = _y !== undefined ? _y : panelY;\r
-                               panelW = _w !== undefined ? _w : panelW;\r
-                               panelH = _h !== undefined ? _h : panelH;\r
-                               \r
-                               ELM_PANEL_STYLE.left    = ( panelX -borderSize) +'px';\r
-                               ELM_PANEL_STYLE.top             = ( panelY -borderSize) +'px';\r
-                               ELM_PANEL_STYLE.width   = panelW +'px';\r
-                               ELM_PANEL_STYLE.height  = panelH +'px';\r
-                               \r
-                               PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH);\r
-                               PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH);\r
-                               GRID_CONTROL.onPanelResize( panelX, panelY);\r
-                               WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH);\r
-                               COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true);\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\r
-                               panelX = Math.floor(( _windowW - panelW) / 2);\r
-                               panelY = Math.floor(( _windowH - panelH) / 2);\r
-                               PANEL_CONTROL.resize();\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               if( isDraggable === true && isDragging === true){\r
-                                       PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY);\r
-                               }\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               if( isDraggable === true){\r
-                                       isDragging = false;\r
-                                       updateMouseCursor( '');\r
-                               }\r
-                       },\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               if( isDraggable === true){\r
-                                       offsetX = _mouseX;\r
-                                       offsetY = _mouseY;\r
-                                       startX = panelX;\r
-                                       startY = panelY;\r
-                                       isDragging = true;\r
-                                       updateMouseCursor( 'move');\r
-                                       return true;\r
-                               }\r
-                       },\r
-                       busy: function(){\r
-                               return isDragging === true;\r
-                       }                               \r
-               }\r
-       })();\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * PanelResizerClass\r
- *  - mouseEventListener\r
- */\r
-       var PanelResizerClass = function( ID, isTop){\r
-               var ELM = document.getElementById( ID),\r
-                       BORDER_WIDTH = 2,\r
-                       RESIZER_HEIGHT = 30,\r
-                       x = -BORDER_WIDTH /2,\r
-                       y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0,\r
-                       w,\r
-                       h = RESIZER_HEIGHT,\r
-                       panelX, panelY, panelW, panelH,\r
-                       offsetY, startY, startH,\r
-                       isDragging = false,\r
-                       MOUSE_CURSOR = updateMouseCursor;\r
-                       \r
-               function restoreState( arg){\r
-                       if( arg && arg.length > 3){\r
-                               PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH);\r
-                       }\r
-               }\r
-                       \r
-               return {\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               var _x = _mouseX -panelX,\r
-                                       _y = _mouseY -panelY;\r
-                               if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
-                               offsetY = _y;\r
-                               startY = panelY;\r
-                               startH = panelH;\r
-                               isDragging = true;\r
-                               MOUSE_CURSOR( 'n-resize');\r
-                               return true;\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               var _x = _mouseX -panelX,\r
-                                       _y = _mouseY -panelY;\r
-                               if( isDragging !== true){\r
-                                       if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
-                                       COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
-                                       MOUSE_CURSOR( 'pointer');\r
-                                       return true;\r
-                               } else {\r
-                                       var move = _y -offsetY;\r
-                                       if( isTop === true){\r
-                                               if( panelH - move < MIN_PANEL_HEIGHT){\r
-                                                       move = panelH -MIN_PANEL_HEIGHT;\r
-                                               }\r
-                                               PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
-                                       } else {\r
-                                               var _h = startH +move;\r
-                                               if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
-                                                       PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
-                                               }\r
-                                       }\r
-                               }\r
-                               return true;\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               if( isDragging !== true) return;\r
-                               ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
-                               isDragging = false;\r
-                               MOUSE_CURSOR( '');\r
-                       },\r
-                       busy: function(){\r
-                               return isDragging\r
-                       },\r
-                       onPanelResize: function( _x, _y, _w, _h){\r
-                               panelX = _x;\r
-                               panelY = _y;\r
-                               if( panelW !== _w){\r
-                                       ELM.style.width = ( _w +2) +'px';\r
-                                       panelW = _w;\r
-                               }\r
-                               panelH = _h;\r
-                               y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
-                               w = panelW +2;\r
-                       }\r
-               }\r
-       };\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
-/* --------------------------------------------------------------------------------------------\r
- * CONSOLE_CONTROLER\r
- */\r
-       var CONSOLE_CONTROLER = ( function(){\r
-               var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
-                       LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
-                       DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
-                       EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
-                       CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
-                       SAVE = HISTORY_CONTROL.saveState,\r
-                       jqStage,\r
-                       jqConsoleParent,\r
-                       jqConsoleWrapper,\r
-                       jqConsoleTail,\r
-                       jqImgConsole, jqTextConsole,\r
-                       currentElement = null,\r
-                       currentType = -1,\r
-                       visible = false,\r
-                       imgConsoleWidth, imgConsoleHeight,\r
-                       textConsoleWidth, textConsoleHeight,\r
-                       consoleWidth, consoleHeight,\r
-                       consoleX, consoleY,\r
-                       tailSize = 10,\r
-                       buttonClickable = false;\r
-               \r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);\r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);\r
-               \r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);\r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);\r
-               pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);\r
-               \r
-               function buttonBackOrForward( isBack){\r
-                       var     offest = jqConsoleWrapper.offset();\r
-                       jqConsoleWrapper.css( {\r
-                               position:       isBack === true ? '' : 'absolute',\r
-                               left:           isBack === true ? consoleX  : offest.left,\r
-                               top:            isBack === true ? consoleY  : offest.top\r
-                       });\r
-                       buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
-                       buttonClickable = !isBack;\r
-               }\r
-               function layerBack(){\r
-                       if( currentElement === null) return;\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
-                       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
-               }\r
-               function del(){\r
-                       if( currentElement === null) return;\r
-                       buttonBackOrForward( 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
-                       if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;\r
-                       TEXT_EDITOR_CONTROL.show( currentElement);\r
-                       buttonBackOrForward( true);\r
-               }\r
-               function change(){\r
-                       if( currentElement === null) return;\r
-                       buttonBackOrForward( true);\r
-                       IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
-               }\r
-               return {\r
-                       init: function(){\r
-                               jqStage = jqEditor;\r
-                               jqConsoleTail = $( '#comic-element-consol-tail');\r
-                               jqImgConsole = $( '#image-element-consol').hide();\r
-                               var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));\r
-                               imgConsoleWidth = imgConsoleSize.width;\r
-                               imgConsoleHeight = imgConsoleSize.height;\r
-                               \r
-                               jqTextConsole = $( '#text-element-consol').hide();\r
-                               var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));\r
-                               textConsoleWidth = textConsoleSize.width;\r
-                               textConsoleHeight = textConsoleSize.height;\r
-                               \r
-                               jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
-                               jqConsoleParent = jqConsoleWrapper.parent();\r
-                               \r
-                               $( '#edit-text-button').click( edit);\r
-                               $( '#delete-image-button, #delete-text-button').click( del);\r
-                               $( '#change-image-button').click( change);\r
-                               $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
-                               $( '#layer-back-button, #back-text-button').click( layerBack);\r
-                                                                                       \r
-                               delete CONSOLE_CONTROLER.init;\r
-                       },\r
-                       show: function( _currentElement, _w, _h){\r
-                               visible === false && jqConsoleWrapper.show();\r
-                               visible = true;\r
-                               currentElement = _currentElement;\r
-                               var _currentType = _currentElement.type,\r
-                                       _z = _currentElement.z;\r
-                               if( currentType !== _currentType){\r
-                                       currentType = _currentType;\r
-                                       jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
-                                       jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
-                                       consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
-                                       consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
-                               }\r
-                               consoleX = Math.floor( ( _w -consoleWidth) /2);\r
-                               \r
-                               LAYER_BACK_BUTTON.visible( _z > 0);\r
-                               LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
-                               DELETE_BUTTON.visible( true);\r
-                               EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
-                               CHANGE_BUTTON.visible( false);\r
-                               \r
-                               if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
-                                       consoleY = Math.floor( ( _h -consoleHeight) /2);\r
-                                       jqConsoleWrapper.css( {\r
-                                               left:                   consoleX,\r
-                                               top:                    consoleY\r
-                                       }).removeClass( 'console-out');\r
-                               } else {\r
-                                       consoleY = _h +tailSize;\r
-                                       jqConsoleWrapper.css( {\r
-                                               left:                   consoleX,\r
-                                               top:                    consoleY\r
-                                       }).addClass( 'console-out');\r
-                               }\r
-                       },\r
-                       hide: function (){\r
-                               visible === true && jqConsoleWrapper.hide();\r
-                               visible = false;\r
-                               currentElement = null;\r
-                               LAYER_BACK_BUTTON.visible( false);\r
-                               LAYER_FORWARD_BUTTON.visible( false);\r
-                               DELETE_BUTTON.visible( false);\r
-                               EDIT_BUTTON.visible( false);\r
-                               CHANGE_BUTTON.visible( false);\r
-                       },\r
-                       x: function(){ return consoleX;},\r
-                       y: function(){ return consoleY;},\r
-                       w: function(){ return consoleWidth;},\r
-                       h: function(){ return consoleHeight;},\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){\r
-                                       buttonClickable === true && buttonBackOrForward( true);\r
-                                       return false;\r
-                               }\r
-                               buttonClickable === false && buttonBackOrForward( false);\r
-                               return true;\r
-                       },\r
-                       onMouseOut: function( _mouseX, _mouseY){\r
-                               buttonClickable === true && buttonBackOrForward( true);\r
-                       }\r
-               }\r
-       })();\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * TAIL_OPERATOR\r
- *  - comicElementOperator\r
- */\r
-       var TAIL_OPERATOR = ( function(){\r
-               var     MOUSE_CURSOR = updateMouseCursor,\r
-                       ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
-                       SIZE = pettanr.util.getElementSize( ELM_MOVER).width,\r
-                       SIN = Math.sin,\r
-                       COS = Math.cos,\r
-                       ATAN = Math.atan,\r
-                       FLOOR = Math.floor,\r
-                       DEG_TO_RAD = Math.PI / 180,\r
-                       RAD_TO_DEG = 1 /DEG_TO_RAD,\r
-                       currentText = null,\r
-                       tailX, tailY,\r
-                       x, y, w, h,\r
-                       balloonW, balloonH, balloonA, radA,\r
-                       visible = false,\r
-                       startA;\r
-               \r
-               return {\r
-                       update: function ( _w, _h, _a){\r
-                               balloonW = _w !== undefined ? _w : balloonW;\r
-                               balloonH = _h !== undefined ? _h : balloonH;\r
-                               balloonA = _a !== undefined ? _a : balloonA;\r
-                               radA = balloonA *DEG_TO_RAD;\r
-                               tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);\r
-                               tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);\r
-                               ELM_MOVER.style.left = tailX +'px';\r
-                               ELM_MOVER.style.top = tailY +'px';\r
-                               //log.html( [ balloonW, balloonH, balloonA].join());\r
-                       },\r
-                       show: function( _currentText){\r
-                               /*\r
-                                * visibilityのほうがいい, display:none だと ie で描画が狂う\r
-                                */\r
-                               ELM_MOVER.style.visibility = '';\r
-                               this.update( _currentText.w, _currentText.h, _currentText.angle());\r
-                               currentText = _currentText;\r
-                       },\r
-                       hitTest: function( _mouseX, _mouseY){\r
-                               var _x = tailX -SIZE /2,\r
-                                       _y = tailY -SIZE /2;\r
-                                       ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
-                               ret === true && MOUSE_CURSOR( 'move');\r
-                               return ret;\r
-                       },\r
-                       hide: function(){\r
-                               ELM_MOVER.style.visibility = 'hidden';\r
-                               currentText = null;\r
-                       },\r
-                       onStart: function( _currentText, _mouseX, _mouseY){\r
-                               if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;\r
-                               x = _currentText.x;\r
-                               y = _currentText.y;\r
-                               if( this.hitTest( _mouseX -x, _mouseY -y) === true){\r
-                                       w = _currentText.w;\r
-                                       h = _currentText.h;\r
-                                       currentText = _currentText;\r
-                                       startA = _currentText.angle();\r
-                                       return true;\r
-                               }\r
-                               return false;\r
-                       },\r
-                       onDrag: function( _mouseX, _mouseY){\r
-                               _mouseX = _mouseX -x -w /2;\r
-                               _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換\r
-                               \r
-                               this.update( w, h,\r
-                                       _mouseX !== 0 ?\r
-                                               ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
-                                               _mouseY > 0 ? 90 : -90\r
-                               );\r
-                               currentText && currentText.angle( 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
-                               startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle());\r
-                               currentText = null;\r
-                       },\r
-                       onCancel: function(){\r
-                               currentText.angle( startA);\r
-                               COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA);\r
-                               currentText = null;\r
-                       }\r
-               }\r
-       })();\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * RESIZE_OPERATOR\r
- *  - comicElementOperator\r
- */\r
-       var RESIZE_OPERATOR = ( function(){\r
-               var     MOUSE_CURSOR = updateMouseCursor,\r
-                       GRID_ENABLED = GRID_CONTROL.enabled;\r
-               \r
-               var     HIT_AREA = MOUSE_HIT_AREA,\r
-                       POSITION_ARRAY = [],\r
-                       FLOOR = Math.floor,\r
-                       CURSOR_AND_FLIP = [\r
-                               { cursor:       'n-resize',             v: 3},\r
-                               { cursor:       'e-resize',             h: 2},\r
-                               { cursor:       'e-resize',             h: 1},\r
-                               { cursor:       'n-resize',             v: 0},\r
-                               { cursor:       'nw-resize',    h: 5, v: 6, vh: 7},\r
-                               { cursor:       'ne-resize',    h: 4, v: 7, vh: 6},\r
-                               { cursor:       'ne-resize',    h: 7, v: 4, vh: 5},\r
-                               { cursor:       'nw-resize',    h: 6, v: 5, vh: 4}\r
-                       ],\r
-                       elmResizerContainer = document.getElementById( 'comic-element-resizer-container'),\r
-                       elmResizerContainerStyle = elmResizerContainer.style,\r
-                       elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,\r
-                       elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,\r
-                       elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,\r
-                       elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,\r
-                       x, y, w, h,\r
-                       currentIndex = -1,\r
-                       currentElement,\r
-                       currentIsTextElement = false;\r
-               \r
-               elmResizerContainerStyle.display = 'none';\r
-               \r
-               var RESIZE_WORK_ARRAY = [\r
-                               { x:    0, w:    0, y:  1, h:   -1}, //top\r
-                               { x:    1, w:   -1, y:  0, h:    0}, //left\r
-                               { x:    0, w:    1, y:  0, h:    0}, //right\r
-                               { x:    0, w:    0, y:  0, h:    1}, //bottom\r
-                               { x:    1, w:   -1, y:  1, h:   -1}, //top-left\r
-                               { x:    0, w:    1, y:  1, h:   -1}, //top-right\r
-                               { x:    1, w:   -1, y:  0, h:    1}, //bottom-left\r
-                               { x:    0, w:    1, y:  0, h:    1}  //bottom-right\r
-                       ],\r
-                       startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
-                       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
-                       x = _x !== undefined ? _x : x;\r
-                       y = _y !== undefined ? _y : y;\r
-                       w = _w !== undefined ? _w : w;\r
-                       h = _h !== undefined ? _h : h;\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
-                               {x:     x +5,                                   y:      y -HIT_AREA,            w:      w -5 *2,                h:      HIT_AREA +5},\r
-                               {x: x -HIT_AREA,                        y:      y +HIT_AREA +5,         w:      HIT_AREA +5,    h:      h -5 *2},\r
-                               {x: x +w -5,                            y:      y +HIT_AREA +5,         w:      HIT_AREA +5,    h:      h -5 *2},\r
-                               {x:     x +5,                                   y:      y +h -5,                        w:      w -5 *2,                h:      HIT_AREA +5},\r
-                               {x:     x -HIT_AREA,                    y:      y -HIT_AREA,            w:      HIT_AREA +5,    h:      HIT_AREA +5},\r
-                               {x: x +w -HIT_AREA,                     y:      y -HIT_AREA,            w:      HIT_AREA +5,    h:      HIT_AREA +5},\r
-                               {x:     x -HIT_AREA,                    y:      y +h -5,                        w:      HIT_AREA +5,    h:      HIT_AREA +5},\r
-                               {x:     x +w -5,                                y:      y +h -5,                        w:      HIT_AREA +5,    h:      HIT_AREA +5}\r
-                       );\r
-               }\r
-               \r
-               function update( _x, _y, _w, _h){\r
-                       x = _x !== undefined ? _x : currentX;\r
-                       y = _y !== undefined ? _y : currentY;\r
-                       w = _w !== undefined ? _w : currentW;\r
-                       h = _h !== undefined ? _h : currentH;\r
-                       \r
-                       if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){\r
-                               if( startAspect >= 1){\r
-                                       _w = w;\r
-                                       w = Math.floor( startAspect * h);\r
-                                       x = x +( currentIndex % 2 === 0 ? _w -w : 0);\r
-                               } else {\r
-                                       _h = h;\r
-                                       h = Math.floor( w / startAspect);\r
-                                       y = y + ( currentIndex <= 5 ? _h -h : 0);\r
-                               }\r
-                       }\r
-                       draw( x, y, w, h);\r
-                       currentElement.resize( x, y, w, h);\r
-                       currentIsTextElement === true && TAIL_OPERATOR.update( w, h);\r
-                       CONSOLE_CONTROLER.show( currentElement, w, h);\r
-                       INFOMATION_WINDOW.update( currentElement);\r
-               }\r
-               \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( _flipH, _flipV);\r
-               }\r
-               return {\r
-                       update: draw,\r
-                       index: function( _mouseX, _mouseY){\r
-                               var     p;\r
-                               for( var i=4; i<8; i++){\r
-                                       p = POSITION_ARRAY[ i];\r
-                                       if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
-                                               MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
-                                               elmResizerContainer.className = 'current-resizer-is-' +i;\r
-                                               return currentIndex = i;\r
-                                       }\r
-                               }\r
-                               for( var i=0; i<4; i++){\r
-                                       p = POSITION_ARRAY[ i];\r
-                                       if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
-                                               MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
-                                               elmResizerContainer.className = 'current-resizer-is-' +i;\r
-                                               return currentIndex = i;\r
-                                       }\r
-                               }\r
-                               MOUSE_CURSOR( '');\r
-                               elmResizerContainer.className = '';\r
-                               return -1;\r
-                       },\r
-                       show: function( _currentElement){\r
-                               currentElement = _currentElement;\r
-                               currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
-                               elmResizerContainerStyle.display = '';\r
-                       },\r
-                       hide: function(){\r
-                               currentElement = null;\r
-                               elmResizerContainerStyle.display = 'none';\r
-                       },\r
-                       onStart: function( _currentElement, _mouseX, _mouseY){\r
-                               currentElement = _currentElement;\r
-                               currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
-                               if( _currentElement.keepSize === true) return false;\r
-                               currentIndex = this.index( _mouseX, _mouseY);\r
-                               if( currentIndex === -1) return false;\r
-                               offsetX = _mouseX;\r
-                               offsetY = _mouseY;\r
-                               startX = baseX = _currentElement.x;\r
-                               startY = baseY = _currentElement.y;\r
-                               startW = baseW = _currentElement.w;\r
-                               startH = baseH = _currentElement.h;\r
-                               if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){\r
-                                       startFilpV = _currentElement.flipV();\r
-                                       startFilpH = _currentElement.flipH();                                                   \r
-                               }\r
-                               startAspect = startW /startH;\r
-                               return true;\r
-                       },\r
-                       onDrag: function( _mouseX, _mouseY){\r
-                               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
-                                       _thisError = 0;\r
-                                       \r
-                               var _memoryX = 0,\r
-                                       _memoryY = 0,\r
-                                       _momoryW = 0,\r
-                                       _momoryH = 0;\r
-                               /*\r
-                                * Opera 11+ often forget values, why ??\r
-                                */\r
-                               while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){\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
-                                               //alert( 'opera error' +error);\r
-                                               this.onCancel;\r
-                                               return;\r
-                                       }\r
-                               }\r
-                               \r
-                               if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){\r
-                                       \r
-                               } else \r
-                               if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){\r
-                                       //return;\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_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){\r
-\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( true, false);\r
-                                               flipV = currentElement.flipV();\r
-                                       } else \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( false, true);\r
-                                               flipH = currentElement.flipH();\r
-                                       } else {\r
-                                       // flipVH\r
-                                               _memoryX = _x;\r
-                                               _memoryY = _y;\r
-                                               baseX = _x = _x +_w;\r
-                                               baseY = _y = _y +_h;\r
-                                               baseW = _w = _memoryX -_x;\r
-                                               baseH = _h = _memoryY -_y;\r
-                                               flip( true, true);\r
-                                               flipV = currentElement.flipV();\r
-                                               flipH = currentElement.flipH();\r
-                                       }\r
-                                       _updated = true;\r
-                                       offsetX = _mouseX;\r
-                                       offsetY = _mouseY;      \r
-                               }\r
-                               currentX = _x;\r
-                               currentY = _y;\r
-                               currentW = _w;\r
-                               currentH = _h;\r
-                               _updated === true && update( _x, _y, _w, _h);\r
-                               \r
-                               log.html( [\r
-                                               'currentIndex:', currentIndex, \r
-                                               'baseW', baseW, 'baseH', baseH,'<br>',\r
-                                               'mouse', _mouseX, _mouseY,'<br>',\r
-                                               'move', moveX, moveY,'<br>',\r
-                                               'xy', _x, _y, 'wh',_w, _h,'<br>',\r
-                                               'com.w', com.w, 'com.h', com.h,'<br>',\r
-                                               'current',currentW, currentH,'<br>',\r
-                                               'result', y, h,\r
-                                               'err', error\r
-                               ].join( ' , '));\r
-                       },\r
-                       onFinish: function(){\r
-                               MOUSE_CURSOR( '');\r
-                               if( w === startW && h === startH && x === startX && y === startY) return;\r
-                               COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);\r
-                               currentElement.resize( x, y, w, h);\r
-                               COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);\r
-                       },\r
-                       onCancel: function(){\r
-                               MOUSE_CURSOR( '');\r
-                               COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);\r
-                               currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
-                                       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
-\r
-/* --------------------------------------------------------------------------------------------\r
- * POSITION_OPERATOR\r
- *  - comicElementOperator\r
- */\r
-       var POSITION_OPERATOR = ( function(){\r
-               var     MOUSE_CURSOR = updateMouseCursor,\r
-                       GRID_ENABLED = GRID_CONTROL.enabled;\r
-               \r
-               var currentElement,\r
-                       startX, startY,\r
-                       x, y,\r
-                       offsetX, offsetY,\r
-                       isCopy = false;\r
-               \r
-               function update( _x, _y){\r
-                       x = _x !== undefined ? _x : x;\r
-                       y = _y !== undefined ? _y : y;\r
-                       RESIZE_OPERATOR.update( x, y);\r
-                       currentElement.resize( x, y);\r
-                       INFOMATION_WINDOW.update( currentElement);\r
-               }\r
-               \r
-               return {\r
-                       onStart: function( _currentElement, _mouseX, _mouseY){\r
-                               currentElement = _currentElement;\r
-                               offsetX = _mouseX;\r
-                               offsetY = _mouseY;\r
-                               startX = x = _currentElement.x;\r
-                               startY = y = _currentElement.y;\r
-                               MOUSE_CURSOR( 'move');\r
-                       },\r
-                       onDrag: function( _mouseX, _mouseY){\r
-                               var moveX = _mouseX -offsetX,\r
-                                       moveY = _mouseY -offsetY,\r
-                                       _x = startX +moveX,\r
-                                       _y = startY +moveY;\r
-                               if( GRID_ENABLED() === true){\r
-                                       _x = Math.floor( _x / 10) * 10;\r
-                                       _y = Math.floor( _y / 10) * 10;\r
-                               }\r
-                               update( _x, _y);\r
-                       },\r
-                       onFinish: function(){\r
-                               MOUSE_CURSOR( '');\r
-                               if( x === startX && y === startY) return;\r
-                               COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y);\r
-                               currentElement.resize( x, y);\r
-                               COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY);\r
-                       },\r
-                       onCancel: function(){\r
-                               MOUSE_CURSOR( '');\r
-                               COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY);\r
-                               currentElement.animate( startX, startY);\r
-                       },\r
-                       onShiftUpdate: update,\r
-                       onCtrlUpdate: update\r
-               }\r
-       })();\r
-\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * COMIC_ELEMENT_OPERATION_MANAGER\r
- */\r
-       var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){\r
-               var     MOUSE_CURSOR = updateMouseCursor,\r
-                       SAVE = HISTORY_CONTROL.saveState,\r
-                       GRID_ENABLED = GRID_CONTROL.enabled,\r
-                       HIT_AREA = MOUSE_HIT_AREA,\r
-                       currentIsTextElement = false,\r
-                       currentOperator = null,\r
-                       currentElement = null,\r
-                       currentx, currenty, currentw, currenth, angle, flipV, flipH;\r
-\r
-                       function resize( _x, _y, _w, _h, _angle){\r
-                               currentx = _x !== undefined ? _x : currentx;\r
-                               currenty = _y !== undefined ? _y : currenty;\r
-                               currentw = _w !== undefined ? _w : currentw;\r
-                               currenth = _h !== undefined ? _h : currenth;\r
-                               angle = _angle !== undefined ? _angle : angle;\r
-\r
-                               RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);\r
-                               currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);\r
-                               CONSOLE_CONTROLER.show( currentElement, currentw, currenth);\r
-                               INFOMATION_WINDOW.update( currentElement);\r
-                       }\r
-                       function show( _currentElement){\r
-                               currentElement === null && RESIZE_OPERATOR.show( _currentElement);\r
-                               if( currentElement !== _currentElement){\r
-                                       currentElement = _currentElement;\r
-                                       \r
-                                       currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
-                                       currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();\r
-                                       \r
-                                       flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
-                                       flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
-                                       \r
-                                       resize(\r
-                                               _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,\r
-                                               currentIsTextElement === true ? _currentElement.angle() : 0\r
-                                       );\r
-                               }\r
-                       }\r
-\r
-                       pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){\r
-                               currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();\r
-                       });\r
-                       pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){\r
-                               currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();\r
-                       });\r
-                       pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){\r
-                               currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
-                               currentOperator = null;\r
-                       });\r
-               return {\r
-                       open: function(){\r
-                               this.hide();\r
-                       },\r
-                       close: function(){\r
-                               \r
-                       },\r
-                       hide: function(){\r
-                               currentElement !== null && RESIZE_OPERATOR.hide();\r
-                               currentElement = null;\r
-                               MOUSE_CURSOR( '');\r
-                               TAIL_OPERATOR.hide();\r
-                               CONSOLE_CONTROLER.hide();\r
-                               INFOMATION_WINDOW.update( null);\r
-                       },\r
-                       resize: resize,\r
-                       restoreState: function( arg){\r
-                               if( arg && arg.length !== 8) return;\r
-                               var _currentElement = arg[ 0],\r
-                                       _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],\r
-                                       _a = arg[ 5],\r
-                                       _flipV = arg[ 6], _flipH = arg[ 7];\r
-                               if( !_currentElement && !currentOperator) return;\r
-                               _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
-                                       _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
-                                       _currentElement.animate( _x, _y, _w, _h, _a);\r
-                               currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
-                               currentOperator = null;\r
-                               currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
-                       },\r
-                       saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
-                               startX = startX !== undefined ? startX : currentx;\r
-                               startY = startY !== undefined ? startY : currenty;\r
-                               startW = startW !== undefined ? startW : currentw;\r
-                               startH = startH !== undefined ? startH : currenth;\r
-                               startA = startA !== undefined ? startA : angle;\r
-                               startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
-                               startFilpH = startFilpH !== undefined ? startFilpH : flipH;\r
-                               currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState,\r
-                                       [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],\r
-                                       [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH]\r
-                               );\r
-                       },\r
-                       busy: function(){\r
-                               return currentOperator !== null;\r
-                       },\r
-                       hitTest: function( _mouseX, _mouseY, _comicElement){\r
-                               var _x, _y, _w, _h;\r
-                               if( _comicElement === currentElement){\r
-                                       var _consoleX = CONSOLE_CONTROLER.x();\r
-                                       _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
-                                       _y = currenty -HIT_AREA;\r
-                                       var _consoleW = CONSOLE_CONTROLER.w();\r
-                                       _w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;\r
-                                       var _consoleY = CONSOLE_CONTROLER.y();\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 _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;\r
-                       },\r
-                       onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
-                               //show( _currentElement);\r
-                               if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
-                                       currentOperator = TAIL_OPERATOR;\r
-                               } else\r
-                               if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
-                                       currentOperator = RESIZE_OPERATOR;\r
-                               } else {\r
-                                       POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)\r
-                                       currentOperator = POSITION_OPERATOR;\r
-                               }\r
-                       },\r
-                       onMouseMove: function( _currentElement, _mouseX, _mouseY){\r
-                               show( _currentElement);\r
-                               if( currentOperator !== null){\r
-                                       currentOperator.onDrag( _mouseX, _mouseY);                                              \r
-                               } else\r
-                               if( currentElement !== null){\r
-                                       CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty);\r
-                                       if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){\r
-                                               RESIZE_OPERATOR.index( _mouseX, _mouseY);\r
-                                       }\r
-                               }\r
-                       },\r
-                       onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
-                               currentOperator !== null && currentOperator.onFinish();\r
-                               currentOperator = null;\r
-                       }\r
-               }\r
-       })();\r
-       /*\r
-        *  // COMIC_ELEMENT_OPERATION_MANAGER\r
-        */\r
-\r
-       var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
-               var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;\r
-               return {\r
-                       $: JQ_WAPPER,\r
-                       type: COMIC_ELM_TYPE,\r
-                       x: x,\r
-                       y: y,\r
-                       w: w,\r
-                       h: h,                                   \r
-                       z: z,\r
-                       timing: timing,\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
-                       busy: function(){\r
-                               return OPERATOR.busy();\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
-                       },\r
-                       onMouseUp: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
-                       },\r
-                       onMouseDown: function( _mouseX, _mouseY){\r
-                               OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
-                       }\r
-               }\r
-       };\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * ImageElementClass\r
- */\r
-       var     jqImageElementOrigin;\r
-       var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){\r
-               jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
-               \r
-               var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
-                       OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
-                       SAVE = HISTORY_CONTROL.saveState,\r
-                       HIT_AREA = MOUSE_HIT_AREA,\r
-                       reversibleImage = null,\r
-                       actualW = 0, actualH = 0,\r
-                       flipH = w < 0 ? -1 : 1,\r
-                       flipV = h < 0 ? -1 : 1,\r
-                       instance;\r
-               w = Math.floor( w);\r
-               h = Math.floor( h);\r
-               \r
-               function update( _x, _y, _w, _h, animate){\r
-                       instance.x = x = _x !== undefined ? _x : x;\r
-                       instance.y = y = _y !== undefined ? _y : y;\r
-                       instance.w = w = _w !== undefined ? _w : w;\r
-                       instance.h = h = _h !== undefined ? _h : h;\r
-                       JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { \r
-                               left:   x,\r
-                               top:    y,\r
-                               width:  w,\r
-                               height: 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
-                       if( url === _url) return;\r
-                       url = _url || url;\r
-                       var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
-                               actualW = _actualW;\r
-                               actualH = _actualH;\r
-                       });\r
-                       if( reversibleImage !== null){\r
-                               JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
-                               reversibleImage.destroy();\r
-                       } else {\r
-                               JQ_WRAPPER.append( _reversibleImage.elm);\r
-                       }\r
-                       reversibleImage = _reversibleImage;\r
-               }\r
-               return pettanr.util.extend(\r
-                       new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),\r
-                       {\r
-                               init: function(){\r
-                                       instance = this;\r
-                                       updateUrl();\r
-                                       update();\r
-                                       delete this.init;\r
-                               },\r
-                               flip: function( _flipH, _flipV){\r
-                                       if( _flipH !== true && _flipV !== true) return;\r
-                                       flipH = _flipH === true ? -flipH : flipH;\r
-                                       flipV = _flipV === true ? -flipV : flipV;\r
-                                       reversibleImage.resize( flipH * w, flipV * h);\r
-                               },\r
-                               flipV: function(){\r
-                                       return flipV;\r
-                               },\r
-                               flipH: function(){\r
-                                       return flipH;\r
-                               },\r
-                               url: function( _url, _actualW, _actualH){\r
-                                       if( _url && _url !== url){\r
-                                               SAVE( updateUrl, url, _url);\r
-                                               actualW = _actualW;\r
-                                               actualH = _actualH;\r
-                                               updateUrl( _url);\r
-                                       }\r
-                                       return url;\r
-                               },\r
-                               actualW: function(){ return actualW;},\r
-                               actualH: function(){ return actualH;},\r
-                               keepSize: false,\r
-                               resize: update,\r
-                               animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
-                                       flipH = _flipH !== undefined ? _flipH : flipH;\r
-                                       flipV = _flipV !== undefined ? _flipV : flipV;\r
-                                       update( _x, _y, _w, _h, true);\r
-                               },\r
-                               getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                                       return [\r
-                                               '<img ',\r
-                                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                                       'width="', w, '" ',\r
-                                                       'height="', h, '" ',\r
-                                                       'style="',                                                                      \r
-                                                               'left:', x, 'px;',\r
-                                                               'top:', y, 'px;',\r
-                                                               'z-index:', this.z, ';',\r
-                                                       '"',\r
-                                               isXHTML !== true ? '>' : ' \/>'\r
-                                       ].join( '');\r
-                               },\r
-                               getAsJsonString: function(){\r
-                                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       return [\r
-                                               '"new', this.timing, '": {', cr,\r
-                                                       '"resource_picture_id": 1,', cr,\r
-                                                       '"x": ', x, ',', cr,\r
-                                                       '"y": ', y, ',', cr,\r
-                                                       '"z": ', this.z, ',', cr,\r
-                                                       '"width": ', w, ',', cr,\r
-                                                       '"height": ', h, ',', cr,\r
-                                                       '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
-                                                       '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
-                                                       '"t": ', this.timing, cr,\r
-                                               '}'\r
-                                       ].join( '');\r
-                               },\r
-                               destroy: function(){\r
-                                       reversibleImage.destroy();\r
-                                       JQ_WRAPPER.remove();\r
-                                       JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
-                                       delete this.destroy;\r
-                               }\r
-                       }\r
-               );\r
-       }\r
-/*\r
- * / ImageElementClass\r
- * --------------------------------------------------------------------------------------------\r
- */\r
-\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * TextElementClass\r
- * \r
- * type\r
- * 0.none\r
- * 1.speach balloon\r
- * 2.think\r
- * 3.bom\r
- * 4.black-box( dq style)\r
- * 5.blue-box( ff style)\r
- * \r
- */\r
-       var jqTextElementOrigin;\r
-       var TextElementClass = function( type, a, text, x, y, z, w, h, timing){\r
-               jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
-                       var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
-                               _MODERN = $( $( '#textElementTemplete').remove().html());\r
-                       return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
-               })();\r
-               \r
-               var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
-                       XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),\r
-                       TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
-                       OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
-                       HIT_AREA = MOUSE_HIT_AREA,\r
-                       SAVE = HISTORY_CONTROL.saveState,\r
-                       instance;\r
-                       \r
-               JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
-               \r
-               function update( _x, _y, _w, _h, _a, animate){\r
-                       instance.x = x = _x !== undefined ? _x : x;\r
-                       instance.y = y = _y !== undefined ? _y : y;\r
-                       instance.w = w = _w !== undefined ? _w : w;\r
-                       instance.h = h = _h !== undefined ? _h : h;\r
-                       a = _a !== undefined ? _a : a;\r
-                       \r
-                       JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {\r
-                                       left:           x,\r
-                                       top:            y,\r
-                                       width:          w,\r
-                                       height:         h\r
-                               }, 250,\r
-                               function(){\r
-                                       XBROWSER_BALLOON.resize( a, w, h);\r
-                               }\r
-                       );              \r
-                       animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
-               }\r
-               \r
-               function updateType( _type){\r
-                       if( type !== _type){\r
-                               type = _type || type;\r
-                               XBROWSER_BALLOON.type( type);\r
-                       }\r
-               }\r
-               function updateAngle( _a){\r
-                       if( _a !== undefined && a !== _a){\r
-                               a = _a !== undefined ? _a : a;\r
-                               XBROWSER_BALLOON.angle( a);\r
-                       }\r
-               }\r
-               function updateText( _text){\r
-                       text = _text || text || '';\r
-                       TEXT_ELM.html( text);\r
-               }\r
-               \r
-               return pettanr.util.extend(\r
-                       new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),\r
-                       {\r
-                               init: function(){\r
-                                       instance = this;\r
-                                       updateText();\r
-                                       update();\r
-                                       delete this.init;\r
-                               },\r
-                               angle: function( _a){\r
-                                       _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
-                                       return a;\r
-                               },\r
-                               text: function( _text){\r
-                                       if( _text && text !== _text) {\r
-                                               SAVE( updateText, text || '', _text);\r
-                                               updateText( _text);\r
-                                       }\r
-                                       return text;\r
-                               },\r
-                               resize: update,\r
-                               animate: function ( _x, _y, _w, _h, _a){\r
-                                       update( _x, _y, _w, _h, _a, true);\r
-                               },\r
-                               destroy: function(){\r
-                                       JQ_WRAPPER.remove();\r
-                                       XBROWSER_BALLOON.destroy();\r
-                                       OPERATOR = null;\r
-                                       delete this.destroy;\r
-                               },\r
-                               getAsJSON: function(){\r
-                                       \r
-                               },\r
-                               getAsJsonString: function(){\r
-                                       var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       return [\r
-                                               '"new', this.timing, '": {', cr,\r
-                                                       '"balloon_template_id": ', 1, ',', cr,\r
-                                                       '"system_picture_id": ', 1, ',', cr,\r
-                                                       '"size": ', 1, ',', cr,\r
-                                                       '"tail": ', a, ',', cr,\r
-                                                       '"x": ', x, ',', cr,\r
-                                                       '"y": ', y, ',', cr,\r
-                                                       '"z": ', this.z, ',', cr,\r
-                                                       '"t": ', this.timing, ',', cr,\r
-                                                       '"width": ', w, ',', cr,\r
-                                                       '"height": ', h, ',', cr,\r
-                                                       '"speaches_attributes": {', cr,\r
-                                                       '"newf', this.timing, '": {', cr,\r
-                                                       '"content": "', text, '",', cr,\r
-                                                                       '"x": ', x, ',', cr,\r
-                                                                       '"y": ', y, ',', cr,\r
-                                                                       '"t": ', 0, ',', cr,\r
-                                                                       '"width": ', w, ',', cr,\r
-                                                                       '"height": ', h, cr,\r
-                                                               '}', cr,\r
-                                                       '}', cr,\r
-                                               '}'\r
-                                       ].join( '');\r
-                               },\r
-                               getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                                       var url = XBROWSER_BALLOON.getURL();\r
-                                       return [\r
-                                               '<img ',\r
-                                                       'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
-                                                       'width="', w, '" ',\r
-                                                       'height="', h, '" ',\r
-                                                       'style="',                                                                      \r
-                                                               'left:', x, 'px;',\r
-                                                               'top:', y, 'px;',\r
-                                                               'z-index:', this.z, ';',\r
-                                                       '"',\r
-                                               isXHTML !== true ? '>' : ' \/>',\r
-                                               pettanr.LINE_FEED_CODE_TEXTAREA,\r
-                                               '<div class="balloon" style="',\r
-                                                       'left:', x, 'px;',\r
-                                                       'top:', y, 'px;',\r
-                                                       'width:', w, 'px;',\r
-                                                       'height:', h, 'px;',\r
-                                                       'z-index:', this.z,\r
-                                               '"><span>', text, '<\/span>', '<\/div>'\r
-                                                       \r
-                                       ].join( '');\r
-                               },\r
-                               getAsXML: function(){}\r
-                       }\r
-               );\r
-       }\r
-\r
-/* --------------------------------------------------------------------------------------------\r
- * COMIC_ELEMENT_CONTROL\r
- *  - mouseEventListener\r
- */\r
-       var COMIC_ELEMENT_CONTROL = ( function(){\r
-               var     SAVE = HISTORY_CONTROL.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
-        * append, remove, replace\r
-        * \r
-        * comicElement には、z-position と dom-index がある。\r
-        *   z-position は 表示上の位置。大きいほど前に表示される( z-index)\r
-        *   dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。\r
-        * \r
-        * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。\r
-        * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。\r
-        * \r
-        * append comicElement\r
-        * 1. 新しい comicElement の z-position を得る\r
-        * 2. z の同じ comicElementを見つけ、その前に加える。または一番先頭へ。(COMIC_ELEMENT_ARRAY)\r
-        *    zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。\r
-        * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
-        * \r
-        * \r
-        * remove comicElement\r
-        * 1. remove\r
-        * 2. renumber z\r
-        */\r
-               function appendComicElement( _comicElement) {\r
-                       _comicElement.init && _comicElement.init();\r
-                       var z = _comicElement.z,\r
-                               l = COMIC_ELEMENT_ARRAY.length,\r
-                               _jqElm = _comicElement.$.stop().css( {\r
-                                       filter:         '',\r
-                                       opacity:        ''\r
-                               });\r
-                       if( typeof z !== 'number' || z < 0 || z >= l){\r
-                               COMIC_ELEMENT_ARRAY.unshift( _comicElement);\r
-                               ELM_CONTAINER.appendChild( _jqElm.get( 0));\r
-                               _jqElm.fadeIn();\r
-                       } else {\r
-                               var insertIndex = 0;\r
-                               for( var i = 0; i < l; ++i){\r
-                                       if( COMIC_ELEMENT_ARRAY[ i].z <= z){\r
-                                               insertIndex = i;\r
-                                               break;\r
-                                       }\r
-                               }\r
-                               COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());\r
-                               COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
-                       }\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
-                                       renumber();\r
-                                       _comicElement.$.stop().css( {\r
-                                               filter:         '',\r
-                                               opacity:        ''\r
-                                       }).fadeOut( onFadeOut);\r
-                                       currentElement = currentElement === _comicElement ? null : currentElement;\r
-                                       return;\r
-                               }\r
-                       }\r
-                       function onFadeOut(){\r
-                               this.parentNode.removeChild( this);\r
-                       }\r
-               }\r
-               function restoreComicElement( arg){\r
-                       var isAppend = arg[ 0],\r
-                               comicElement = arg[ 1];\r
-                       isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
-               }\r
-               /*\r
-                * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
-                * jqElmの並び替え。\r
-                */\r
-               function renumber(){\r
-                       var l = COMIC_ELEMENT_ARRAY.length,\r
-                               _comicElement, jqElm, jqNext;\r
-                       for( var i=0; i < l; ++i){\r
-                               _comicElement = COMIC_ELEMENT_ARRAY[ i];\r
-                               jqElm = _comicElement.$;\r
-                               jqNext && jqNext.before( jqElm);\r
-                               _comicElement.z = l -i -1;\r
-                               jqNext = jqElm;\r
-                       }\r
-               }\r
-               function replaceComicElement( _comicElement, goForward){\r
-                       // COMIC_ELEMENT_ARRAYの再構築\r
-                       var l = COMIC_ELEMENT_ARRAY.length,\r
-                               i = ( function(){\r
-                                       for( var ret = 0; ret < l; ++ret){\r
-                                               if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
-                                       }\r
-                                       return -1;\r
-                               })();\r
-                       if( i === -1) return false;\r
-                       if( goForward === true){\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 false;\r
-                               COMIC_ELEMENT_ARRAY.splice( i, 1);\r
-                               COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
-                       }\r
-                       renumber();\r
-                       return true;\r
-               }\r
-               function restoreReplaceElement( arg){\r
-                       replaceComicElement( arg[ 0], arg[ 1]);\r
-               }\r
-               \r
-               return {\r
-                       init: function(){\r
-                               \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
-                        */\r
-                               log = $( '#operation-catcher-log');\r
-                               \r
-                               delete COMIC_ELEMENT_CONTROL.init;\r
-                       },\r
-                       open: function(){\r
-                               COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();\r
-                       },\r
-                       close: function(){\r
-                               while( COMIC_ELEMENT_ARRAY.length > 0){\r
-                                       COMIC_ELEMENT_ARRAY.shift().destroy();\r
-                               }\r
-                       },\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
-                        */                                     \r
-                               if( isResizerTopAction === true){\r
-                                       var     _shiftX = _panelW -panelW,\r
-                                               _shiftY = _panelH -panelH,\r
-                                               l = COMIC_ELEMENT_ARRAY.length;\r
-                                       for( var i = 0; i < l; i++){\r
-                                               COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
-                                       }\r
-                               }\r
-                               panelX = _panelX;\r
-                               panelY = _panelY;\r
-                               panelW = _panelW;\r
-                               panelH = _panelH;\r
-                               \r
-                               ELM_CONTAINER.style.width       = _panelW +'px';\r
-                               ELM_CONTAINER.style.height      = _panelH +'px';\r
-                               ELM_CONTAINER.style.left        = _panelX +'px';\r
-                               ELM_CONTAINER.style.top         = _panelY +'px';\r
-                       },\r
-                       onMouseMove: function( _mouseX, _mouseY){\r
-                               var l = COMIC_ELEMENT_ARRAY.length,\r
-                                       _x = _mouseX -panelX,\r
-                                       _y = _mouseY -panelY,\r
-                                       _elm = currentElement;\r
-                                       \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
-                                       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
-                                       // hitTest\r
-                                       if( _elm.hitTest( _x, _y) === true){\r
-                                               _elm.onMouseMove( _x, _y); // cursor\r
-                                               log.html( [ _x, _y, i].join( ','));\r
-                                               currentElement = _elm;\r
-                                               return true;\r
-                                       }\r
-                               }\r
-                               currentElement = null;                                                  \r
-                               COMIC_ELEMENT_OPERATION_MANAGER.hide();\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
-                               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
-                               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
-                       },\r
-                       createImageElement: function( url, imagesetID, x, y, z, w, h){\r
-                               w = w || 200; //ActualWidth\r
-                               h = h || 150; //ActualHeight\r
-                               x = x || Math.floor( panelW /2 -w /2);\r
-                               y = y || Math.floor( panelH /2 -h /2);\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
-                               IMAGE_GROUP_EXPROLER.show( onImageSelect);\r
-                       },\r
-                       createTextElement: function( type, angle, text, x, y, z, w, h){\r
-                               type = type || 0;\r
-                               angle = angle || 0;\r
-                               text = text || '';\r
-                               w = w || 200;\r
-                               h = h || 150;\r
-                               x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);\r
-                               y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);\r
-                               var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
-                               TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
-                                       appendComicElement( _comicElement);\r
-                                       SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
-                               });\r
-                       },\r
-                       getAsHTML: function( isAbsoluteUrl, isXHTML){\r
-                               var HTML_ARRAY = [],\r
-                                       l = COMIC_ELEMENT_ARRAY.length,\r
-                                       _timing = 0,\r
-                                       _comicElement;\r
-\r
-                               while( HTML_ARRAY.length < l){\r
-                                       _comicElement = getComicElementByTiming();\r
-                                       if( _comicElement === null) break;\r
-                                       HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
-                               }\r
-                               function getComicElementByTiming(){\r
-                                       while( _timing < l *2){\r
-                                               for(var i=0; i<l; ++i){\r
-                                                       if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
-                                                               ++_timing;\r
-                                                               return COMIC_ELEMENT_ARRAY[ i];\r
-                                                       }\r
-                                               }\r
-                                               ++_timing;\r
-                                       }\r
-                                       return null;\r
-                               }\r
-                               HTML_ARRAY.unshift(\r
-                                       [\r
-                                               '<div class="panel" ',\r
-                                                       'style="',\r
-                                                               'height:', panelH, 'px;',\r
-                                                               'background-color:', ';',\r
-                                                       '"',\r
-                                               '>'\r
-                                       ].join( '')\r
-                               );              \r
-                               HTML_ARRAY.push( '</div>');\r
-                               \r
-                               return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
-                       },\r
-                       getAsJsonString: function(){\r
-                               var JSON_STRING_ARRAY = [],\r
-                                       IMAGE_ARRAY = [],\r
-                                       BALLOON_ARRAY = [],\r
-                                       l = COMIC_ELEMENT_ARRAY.length,\r
-                                       _timing = 0,\r
-                                       _comicElement,\r
-                                       cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
-                                       \r
-                               while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){\r
-                                       _comicElement = getComicElementByTiming();\r
-                                       if( _comicElement === null) break;\r
-                                       _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? \r
-                                               IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :\r
-                                               BALLOON_ARRAY.push( _comicElement.getAsJsonString());\r
-                               }\r
-                               function getComicElementByTiming(){\r
-                                       while( _timing < l *2){\r
-                                               for(var i=0; i<l; ++i){\r
-                                                       if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
-                                                               ++_timing;\r
-                                                               return COMIC_ELEMENT_ARRAY[ i];\r
-                                                       }\r
-                                               }\r
-                                               ++_timing;\r
-                                       }\r
-                                       return null;\r
-                               }\r
-                               return [\r
-                                       '{', cr,\r
-                                               '"panel": {', cr,\r
-                                                   '"border": 1,', cr,\r
-                                                   '"comic_id": 5,', cr,\r
-                                                   '"resource_picture_id": 1,', cr,\r
-                                                       '"x": ', 0, ',', cr,\r
-                                                       '"y": ', 0, ',', cr,\r
-                                                       '"z": ', 0, ',', cr,\r
-                                                       '"t": ', 0, ',', cr,\r
-                                                   '"width": ', panelW, ',', cr,\r
-                                                   '"height": ', panelH, ',', cr,\r
-                                                   '"panel_pictures_attributes": {', cr,\r
-                                                       IMAGE_ARRAY.join( ',' +cr), cr,\r
-                                                   '},', cr,\r
-                                                   '"balloons_attributes": {', cr,\r
-                                                       BALLOON_ARRAY.join( ',' +cr), cr,\r
-                                                   '}', cr,\r
-                                               '}', cr,\r
-                                       '}'\r
-                               ].join( '');\r
-                       }\r
-               }\r
-       })();\r
-       \r
-       /*\r
-        * end of COMIC_ELEMENT_CONTROL\r
-        */\r
-\r
-\r
-\r
-       function updateMouseCursor( _cursor){\r
-               if( currentCursor !== _cursor){\r
-                       currentCursor = _cursor;\r
-                       setTimeout( update, 0);\r
-               }\r
-               function update(){\r
-                       ELM_MOUSE_EVENT_CHATCHER.style.cursor = currentCursor;\r
-               }\r
-       }\r
-       function centering(){\r
-               pettanr.editor.onWindowResize( windowW, windowH);\r
-       }       \r
-       function mouseEventRellay( e){\r
-               var _mouseX = e.pageX,\r
-                       _mouseY = e.pageY,\r
-                       rellayMethod = e.type === 'mousedown' ?\r
-                                       'onMouseDown' :\r
-                                       ( e.type === 'mousemove' ? 'onMouseMove' : 'onMouseUp');\r
-               if( currentListener !== null && currentListener.busy() === true){\r
-                       currentListener[ rellayMethod]( _mouseX, _mouseY);\r
-               } else {\r
-                       currentListener = null;\r
-                       var l = MOUSE_LISTENER_ARRAY.length,\r
-                               _listener;\r
-                       for( var i=0; i<l; ++i){\r
-                               _listener = MOUSE_LISTENER_ARRAY[ i];\r
-                               if( _listener[ rellayMethod]( _mouseX, _mouseY) === true){\r
-                                       currentListener = _listener;\r
-                                       break;\r
-                               }\r
-                       }\r
-               }\r
-               // 文字選択の禁止\r
-               //!document.selection && window.getSelection().removeAllRanges();\r
-               e.stopPropagation();\r
-               return false;\r
-       }\r
-\r
-       return {\r
-               init: function( _option){\r
-                       option = _option;\r
-                       \r
-               },\r
-               firstOpen: function(){\r
-               /*\r
-                * MOUSE_LISTENER_ARRAY は、表示順に格納.手前の要素が最初\r
-                * MENU_BAR_CONTROL,\r
-                * WINDOW_CONTROL,\r
-                * COMIC_ELEMENT_CONTROL,\r
-                * PANEL_CONTROL\r
-                * .busy() === true なら、そのままonMouseMove()にイベントを流す.\r
-                * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す.\r
-                */\r
-                       MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
-                       \r
-                       CONSOLE_CONTROLER.init();\r
-                       \r
-                       OUTPUT_CONSOLE.init();\r
-                       TEXT_EDITOR_CONTROL.init();\r
-                       IMAGE_GROUP_EXPROLER.init();\r
-\r
-               /*\r
-                * 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
-                       MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
-               /*\r
-                * jqMouseEventChacher は透明な要素で、\r
-                * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
-                * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。\r
-                */                     \r
-                       jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)\r
-                               .mousemove( mouseEventRellay)\r
-                               .mousedown( mouseEventRellay)\r
-                               .mouseup( mouseEventRellay)\r
-                               .mouseout( mouseEventRellay);\r
-                       \r
-                       delete pettanr.editor.firstOpen;\r
-               },\r
-               onOpen: function( _file){\r
-                       if( pettanr.file.isFileInstance( _file) === true){\r
-                               // pettanr.file.isPettanFileInstance( _file) === true\r
-                               // \r
-                       }\r
-                       jqEditor = jqEditor || $( '#editor');\r
-                       \r
-                       HISTORY_CONTROL.open();\r
-                       \r
-                       WINDOWS_CONTROL.open();\r
-                       \r
-                       GRID_CONTROL.open();\r
-                       PANEL_CONTROL.open();\r
-                       \r
-                       COMIC_ELEMENT_OPERATION_MANAGER.open();\r
-                       COMIC_ELEMENT_CONTROL.open();\r
-                       \r
-                       // last\r
-                       MENU_BAR_CONTROL.open();\r
-                       \r
-                       pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
-               },\r
-               onClose: function(){\r
-                       HISTORY_CONTROL.close();\r
-                       \r
-                       WINDOWS_CONTROL.close();\r
-                       \r
-                       GRID_CONTROL.close();\r
-                       PANEL_CONTROL.close();\r
-                       \r
-                       COMIC_ELEMENT_OPERATION_MANAGER.close();\r
-                       COMIC_ELEMENT_CONTROL.close();\r
-                       \r
-                       // last\r
-                       MENU_BAR_CONTROL.open();\r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-                       windowW = _windowW;\r
-                       windowH = _windowH;\r
-                       if( pettanr.editor.firstOpen) return;\r
-                       /*\r
-                        * ieは +'px'が不要みたい\r
-                        */\r
-                       jqEditor.get( 0).style.height = _windowH +'px';\r
-                       ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
-                       \r
-                       WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
-                       MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
-                       PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
-               },\r
-               MIN_WIDTH:      320,\r
-               MIN_HEIGHT:     320\r
-       }\r
-})();\r
-\r
-// create hidden iframe\r
-// write script\r
-// setInterval\r
-pettanr.proxy = ( function(){\r
-       \r
-       function FormProxy( formJsUrl, callback){\r
-               var timer = null,\r
-                       iWin, idoc;\r
-\r
-               pettanr.util.createIframe( 'id00000', onCreateIframe);\r
-               \r
-               function onCreateIframe( _iframe){\r
-                       iWin = _iframe.contentWindow;\r
-                       idoc = _iframe.contentWindow.document;\r
-\r
-                       idoc.open();\r
-                       idoc.write( '<body>');\r
-                       idoc.writeln( '<script type="text\/javascript" src="' + pettanr.CONST.JQUERY_URL+ '"><\/script>');\r
-                       idoc.close();\r
-\r
-                       timer = window.setInterval( detect, 250 );\r
-               }\r
-               function detect(){\r
-                       if( iWin.jQuery){\r
-                               window.clearInterval( timer );\r
-                               //callback( idoc);\r
-                               iWin.jQuery( iWin).ready( onJQueryReady );\r
-                       }\r
-               }\r
-               function onJQueryReady(){\r
-                       callback( idoc);\r
-               }\r
-       }\r
-       \r
-       return {\r
-               createFormProxy: function( _formJsUrl, _callback){\r
-                       new FormProxy( _formJsUrl, _callback);\r
-               }\r
-       }\r
-       \r
-})();\r
-\r
-\r
-pettanr.comicConsole = ( function(){\r
-       var COMIC_CONSOLE = ( function(){\r
-               var jqWrap,\r
-                       ID = 'comicConsole',\r
-                       elmProgress = document.getElementById( 'comic-console-progress'),\r
-                       inputTitle, inputW, inputH, inputVisible, inputEditable,\r
-                       elmUploader = null;\r
-               //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
-               \r
-               function clickOK(){\r
-                       // clickCancel();\r
-                       // pettanr.proxy.createFormProxy( pettanr.CONST.UPLOAD_PICTURE_JS, onCreateForm);\r
-                       elmProgress.innerHTML = '■';\r
-                       // set values\r
-                       // submit\r
-               }\r
-               function onCreateForm( iDocument){\r
-                       var div = iDocument.createElement( 'div');\r
-                       div.id = "uploader";\r
-                       iDocument.body.appendChild( div);\r
-                       \r
-                       var script = iDocument.createElement( 'script');\r
-                       script.type = 'text\/javascript';\r
-                       script.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
-                       iDocument.body.appendChild( script);\r
-                       \r
-                       elmProgress.innerHTML = '■■';\r
-                       \r
-                       var form = iDocument.forms[ 0 ];\r
-                       \r
-               }\r
-               \r
-               function clickCancel(){\r
-                       pettanr.overlay.hide();\r
-                       COMIC_CONSOLE.onClose();\r
-               }\r
-               \r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
-                               $( '#comic-console-post-button').click( clickOK );\r
-                               $( '#comic-console-cancel-button').click( clickCancel );\r
-                               \r
-                               var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
-                               inputTitle    = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
-                               inputW        = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
-                               inputH        = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
-                               inputVisible  = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
-                               inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
-                               \r
-                               delete COMIC_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( w, h){\r
-                               jqWrap.show();\r
-\r
-                               pettanr.overlay.show( COMIC_CONSOLE );\r
-                               \r
-                               inputTitle.start();\r
-                               COMIC_CONSOLE.onWindowResize( w, h);\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\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: function(){\r
-                               jqWrap.hide();\r
-                       },\r
-                       ID: ID\r
-               }\r
-       })();\r
-       \r
-       return {\r
-               init: function(){\r
-                       COMIC_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _file){\r
-                       if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
-                               // _data = _file.read();\r
-                       }\r
-               },\r
-               onClose: function(){\r
-                       \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       COMIC_CONSOLE.show( w, h);\r
-               }\r
-       }\r
-})();\r
-\r
-pettanr.uploadConsole = ( function(){\r
-       var UPLOAD_CONSOLE = ( function(){\r
-               var jqWrap,\r
-                       ID = 'uploadConsole',\r
-                       TARGET_FRAME_NAME = 'targetFrame',\r
-                       elmContainer = document.getElementById( 'uploader'),\r
-                       elmProgress = document.getElementById( 'upload-console-progress'),\r
-                       timer = null,\r
-                       elmScript = null,\r
-                       elmForm = null,\r
-                       elmFile = null,\r
-                       elmIframe = null,\r
-                       isUploading = false;\r
-               /*\r
-                * upload ボタンが押されたらまず iframe をつくる.
-                */\r
-               function clickOK(){\r
-                       if( !elmForm || elmFile.value.length === 0) return false;\r
-                       pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
-                       elmProgress.innerHTML = 'uploading.';\r
-                       isUploading = true;\r
-                       return false;\r
-               }\r
-               /*\r
-                * form の target に iframe を指定したのち submit();
-                */\r
-                       function onCreateIframe( iframe ){\r
-                               elmContainer.appendChild( iframe );\r
-                               elmForm.target = iframe.name;\r
-                               \r
-                               try {\r
-                                       elmForm.submit();\r
-                               } catch( e){\r
-                                       elmProgress.innerHTML = 'submit() err..';\r
-                                       isUploading = false;\r
-                                       setTimeout( clickCancel , 3000);\r
-                                       return;\r
-                               }\r
-                               \r
-                               if( pettanr.ua.isIE){\r
-                                       iframe.onreadystatechange = detectIframe;\r
-                               } else {\r
-                                       iframe.onload = onIframeUpdate;\r
-                               }\r
-                               elmIframe = iframe;\r
-                               elmProgress.innerHTML = 'uploading..';\r
-                       }\r
-               /*\r
-                * ie の 場合、readyState をチェック.
-                */\r
-                               function detectIframe(){\r
-                           if ( elmIframe.readyState === 'complete') {\r
-                               elmIframe.onreadystatechange = new Function();\r
-                               elmIframe.onreadystatechange = null;\r
-                               onIframeUpdate();\r
-                           }\r
-                               }\r
-                                       function onIframeUpdate(){\r
-                                               elmIframe.onload = null;\r
-                                               ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
-                                               elmIframe = null;\r
-                                               elmProgress.innerHTML = 'success!';\r
-                                               setTimeout( clickCancel , 1000);\r
-                                               isUploading = false;\r
-                                       }\r
-               \r
-               function detectForm(){\r
-                       elmForm = elmContainer.getElementsByTagName( 'form')[ 0 ];\r
-                       if( elmForm){\r
-                               var _inputList = elmForm.getElementsByTagName( 'input'),\r
-                                       _input;\r
-                               for( var i=0, l= _inputList.length; i<l; ++i){\r
-                                       _input = _inputList[ i ];\r
-                                       if( _input.type === 'file'){\r
-                                               elmFile = _input;\r
-                                       }\r
-                                       if( _input.type === 'submit'){\r
-                                               _input.style.display = 'none';\r
-                                       }\r
-                               }\r
-                               window.clearInterval( timer);\r
-                               timer = null;\r
-                       }\r
-               }\r
-               /*\r
-                * 
-                */\r
-               function clickCancel(){\r
-                       if( isUploading === true) return false;\r
-                       pettanr.overlay.hide();\r
-                       UPLOAD_CONSOLE.onClose();\r
-                       return false;\r
-               }\r
-               \r
-               return {\r
-                       init: function(){\r
-                               this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();\r
-                               $( '#upload-console-post-button').click( clickOK );\r
-                               $( '#upload-console-cancel-button').click( clickCancel );\r
-\r
-                               delete UPLOAD_CONSOLE.init;\r
-                       },\r
-                       jqWrap: null,\r
-                       show: function( w, h){\r
-                               /*\r
-                                * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加.
-                                */                             \r
-                               elmScript = document.createElement( 'script');\r
-                               elmScript.type = 'text\/javascript';\r
-                               elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
-                               document.body.appendChild( elmScript);\r
-                               \r
-                               jqWrap.show();\r
-                               pettanr.overlay.show( UPLOAD_CONSOLE );\r
-\r
-                               if( timer === null){\r
-                                       timer = window.setInterval( detectForm, 250);\r
-                               }\r
-                               \r
-                               elmProgress.innerHTML = '';\r
-                               \r
-                               UPLOAD_CONSOLE.onWindowResize( w, h);\r
-                       },\r
-                       onWindowResize: function( _windowW, _windowH){\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: function(){\r
-                               elmForm !== null && $( elmContainer.children ).remove();\r
-                               elmForm = elmFile = null;\r
-                               isUploading = false;\r
-                               \r
-                               document.body.removeChild( elmScript);\r
-                               elmScript = null;\r
-                               \r
-                               if( timer !== null){\r
-                                       window.clearInterval( timer);\r
-                                       timer = null;\r
-                               }\r
-                               jqWrap.hide();\r
-                       },\r
-                       ID: ID\r
-               }\r
-       })();\r
-       \r
-       return {\r
-               init: function(){\r
-                       UPLOAD_CONSOLE.init();\r
-                       delete pettanr.comicConsole.init;\r
-               },\r
-               onOpen: function( _file){\r
-                       if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
-                               // _data = _file.read();\r
-                       }\r
-               },\r
-               onClose: function(){\r
-                       \r
-               },\r
-               onWindowResize: function( _windowW, _windowH){\r
-               },\r
-               _quickAccessShow: function(){\r
-                       jqWindow = pettanr.jqWindow();\r
-                       var w = jqWindow.width(),\r
-                               h = jqWindow.height();\r
-                       UPLOAD_CONSOLE.show( w, h);\r
-               }\r
-       }\r
-})();
\ No newline at end of file
index a555e00..515fcbc 100644 (file)
@@ -238,12 +238,12 @@ version: 2.7.0
 /*  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
index 9089953..8a3b19d 100644 (file)
                height:                                         74px;\r
                width:                                          100%;\r
                border-bottom:                          1px solid #ccc;\r
+               clear:                                          both;\r
        }\r
-               .finder-icon-thumbnail {\r
-                       width:                                          64px;\r
-                       height:                                         64px;\r
-                       position:                                       absolute;\r
-                       top:                                            5px;\r
-                       left:                                           20px;\r
-                       cursor:                                         pointer;\r
-                       background-position:            50% 50%;\r
-                       background-repeat:                      no-repeat;\r
-               }\r
-               .finder-icon-thumbnail {\r
-                       background-image:                       url('sprite.gif');\r
-               }\r
-               \r
-               .finder-icon .file-type-folder {\r
-                       background-position:            0 -80px;\r
-               }\r
-               .finder-icon .file-type-album {\r
-                       background-image:                       url('folder_album.png');\r
-               }\r
-               .finder-icon .file-type-author {\r
-                       background-position:            -70px -80px;\r
-               }               \r
-               .finder-icon .file-type-comic {\r
-                       background-position:            0 -150px;\r
-               }\r
-               .finder-icon .file-type-cabinet {\r
-                       background-position:            -70px -150px;\r
-               }\r
-               .finder-icon .file-type-panel {\r
-                       background-position:            0 -220px;\r
-               }\r
-               .finder-icon .file-type-artist {\r
-                       background-position:            -70px -220px;\r
-               }\r
-               .finder-icon .file-type-balloon {\r
-                       background-position:            0 -290px;\r
+               .finder-icon a,\r
+               .finder-icon a:link,\r
+               .finder-icon a:visited,\r
+               .finder-icon a:active {\r
+                       display:                                        block;\r
+                       height:                                         74px;\r
+                       text-decoration:                        none;\r
+                       *background:                            #fff;\r
                }\r
-               .finder-icon .file-type-charactor {\r
-                       background-position:            -70px -290px;\r
-               }               \r
-               .has-thumbnail {\r
-                       background-image:                       url('folder_album.png');\r
+               .finder-icon a:hover {\r
+                       background-color:                       #eee;\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\r
-                * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon\r
-                * http://www.iconfinder.com/icondetails/3659/64/broken_file_icon\r
-                * http://www.iconfinder.com/icondetails/44733/64/address_book_icon\r
-                */\r
-               .finder-icon-filename {\r
+                       .finder-icon-handle,\r
+                       .finder-icon-thumbnail,\r
+                       .finder-icon-filename,\r
+                       .finder-icon-summary {\r
+                               display:                                        table-cell;\r
+                       vertical-align:                         middle;\r
+                       height:                                         74px;\r
+                       *height:                                        64px;\r
+                       line-height:                            1.3em;\r
+                       }\r
+                   /* IE 6 */\r
+                       .finder-icon-handle,\r
+                       .finder-icon-thumbnail,\r
+                       .finder-icon-filename,\r
+                       .finder-icon-summary {\r
+                       *display:                                       inline;\r
+                       zoom:                                           1;\r
+                   }\r
+                   /*\*//*/\r
+                   * html .finder-icon span {\r
+                       display: inline-block;\r
+                   }\r
+                   /**/\r
+                       \r
+                       .finder-icon-handle {\r
+                               width:                                          20px;\r
+                       }\r
+                       \r
+                       .finder-icon-thumbnail {\r
+                               width:                                          64px;\r
+                               cursor:                                         pointer;\r
+                               background-repeat:                      no-repeat;\r
+                       }\r
+                       .finder-icon-thumbnail {\r
+                               background-image:                       url('sprite.gif');\r
+                       }\r
+                       \r
+                       .finder-icon .file-type-folder {\r
+                               background-position:            0 -75px;\r
+                       }\r
+                       .finder-icon .file-type-album {\r
+                       }\r
+                       .finder-icon .file-type-author {\r
+                               background-position:            -70px -75px;\r
+                       }               \r
+                       .finder-icon .file-type-comic {\r
+                               background-position:            0 -145px;\r
+                       }\r
+                       .finder-icon .file-type-cabinet {\r
+                               background-position:            -70px -145px;\r
+                       }\r
+                       .finder-icon .file-type-panel {\r
+                               background-position:            0 -215px;\r
+                       }\r
+                       .finder-icon .file-type-artist {\r
+                               background-position:            -70px -215px;\r
+                       }\r
+                       .finder-icon .file-type-balloon {\r
+                               background-position:            0 -285px;\r
+                       }\r
+                       .finder-icon .file-type-charactor {\r
+                               background-position:            -70px -285px;\r
+                       }               \r
+                       .has-thumbnail {\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\r
+                        * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon\r
+                        * http://www.iconfinder.com/icondetails/3659/64/broken_file_icon\r
+                        * http://www.iconfinder.com/icondetails/44733/64/address_book_icon\r
+                        */\r
+                       .finder-icon-filename {\r
+                               width:                                          200px;\r
+                               padding:                                        5px;\r
+                               font-weight:                            bold;\r
+                               color:                                          #333;\r
+                       }\r
+                       a:hover .finder-icon-filename {\r
+                               color:                                          #000;\r
+                       }\r
+                       .finder-icon-summary {\r
+                               width:                                          300px;\r
+                               padding:                                        5px;\r
+                               color:                                          #666;\r
+                       }\r
+               .finder-icon-console {\r
                        position:                                       absolute;\r
-                       top:                                            30px;\r
-                       left:                                           100px;\r
-               }
\ No newline at end of file
+                       top:                                            0;\r
+                       right:                                          0;\r
+               }\r
+                       .finder-icon-console div {\r
+                               width:                                          74px;\r
+                               height:                                         74px;\r
+                               border-left:                            1px solid #ccc;\r
+                               float:                                          right;\r
+                               cursor:                                         pointer;\r
+                               background-position:            50% 50%;\r
+                               background-repeat:                      no-repeat;\r
+                       }\r
+                       .finder-icon-console-action {\r
+\r
+                       }\r
+                       .finder-icon-console-editor-apps {\r
+\r
+                       }\r
+                       .finder-icon-console-viewer-apps {\r
+\r
+                       }
\ No newline at end of file
index d0de577..5825f17 100644 (file)
                                <div class="finder-body">\r
                                        <!-- Finder icon -->\r
                                        <div id="templete-finder-icon" class="finder-icon">\r
+                                               <div class="finder-icon-handle"></div>\r
                                                <div class="finder-icon-thumbnail"></div>\r
                                                <div class="finder-icon-filename"></div>\r
+                                               <div class="finder-icon-summary">file descriptiion</div>\r
+                                               <div class="finder-icon-console">\r
+                                                       <div class="finder-icon-console-action"></div>\r
+                                                       <div class="finder-icon-console-editor-apps"></div>\r
+                                                       <div class="finder-icon-console-viwer-apps"></div>\r
+                                               </div>\r
                                        </div>\r
                                        \r
                                </div>\r
index 3b78f0f..9fc8af0 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR common.js\r
- *   version 0.4.14\r
+ *   version 0.4.15\r
  * \r
  * author: itozyun\r
  */\r
                isNumber : function(v) {\r
                        return typeof v === 'number';\r
                },\r
-               isHTMLElement : ( 'HTMLElement' in window ?\r
-                       function(v){\r
-                               return v instanceof HTMLElement\r
-                       } :\r
-                       function(v) {\r
-                               if( Type.isObject(v) === false ){\r
-                                       return false;\r
+               isFinite : function(v){\r
+                       return Type.isNumber(v) === true && isFinite(v);\r
+               },\r
+               isHTMLElement : function(v){\r
+                       if( 'HTMLElement' in window ){\r
+                               Type.isHTMLElement = function(v){\r
+                                       return v instanceof HTMLElement;\r
                                }\r
-                               var r;\r
-                               if(v && v.nodeType === 1){\r
-                                       try{\r
-                                               r = v.cloneNode(false);\r
-                                       } catch(n) {\r
+                       } else {\r
+                               Type.isHTMLElement = function(v) {\r
+                                       if( Type.isObject(v) === false ){\r
                                                return false;\r
                                        }\r
-                                       if(r === v) return false;\r
-                                       try{\r
-                                               r.nodeType = 9;\r
-                                               return r.nodeType === 1;\r
-                                       } catch(n) {}\r
-                                       return true;\r
+                                       var r;\r
+                                       if(v && v.nodeType === 1){\r
+                                               try{\r
+                                                       r = v.cloneNode(false);\r
+                                               } catch(n) {\r
+                                                       return false;\r
+                                               }\r
+                                               if(r === v) return false;\r
+                                               try{\r
+                                                       r.nodeType = 9;\r
+                                                       return r.nodeType === 1;\r
+                                               } catch(n) {}\r
+                                               return true;\r
+                                       }\r
+                                       return false;\r
                                }\r
-                               return false;\r
                        }\r
-               ),\r
+                       return Type.isHTMLElement(v);\r
+               },\r
                /*\r
                isElementCollection : function(v) {\r
                        return (Object.prototype.toString.call(v) === "[object HTMLCollection]");\r
@@ -83,7 +90,7 @@ var pettanr = ( function(){
                                        if( elm.length === 2){\r
                                                v = decodeURIComponent( elm[ 1]);\r
                                                if( '' + parseFloat( v) === v) v = parseFloat( v);\r
-                                               if( '' + parseInt( v) === '0' + v) v = parseInt( v);\r
+                                               if( '' + parseInt( v, 10 ) === '0' + v) v = parseInt( v, 10 );\r
                                                if( v === 'true') v = true;\r
                                                if( v === 'false') v = false;\r
                                                if( v === 'null') v = null;\r
@@ -882,10 +889,9 @@ pettanr.view = ( function(){
                        pettanr.DEBUG === true && ret.push( 'debug');\r
                        return ret;\r
                })(),\r
-               l = items.length,\r
                item;\r
        origin.href = '#';\r
-       for(var i=0; i<l; ++i){\r
+       for(var i=0, l = items.length; i<l; ++i){\r
                item = origin.cloneNode( true);\r
                item.appendChild( document.createTextNode( items[ i]) );\r
                item.onclick = LoginUserNavi.show;\r
@@ -969,10 +975,10 @@ pettanr.view = ( function(){
        }\r
        \r
        var AbstractBasicPane = function(){\r
-               this.UID = '', // element の ID と一致\r
-               this.elm = null,\r
-               this.onOpen = function( _w, _h, _option ){}\r
-               this.onClose = function(){ return true; } // false の場合、close の拒否 \r
+               this.UID = ''; // element の ID と一致\r
+               this.elm = null;\r
+               this.onOpen = function( _w, _h, _option ){};\r
+               this.onClose = function(){ return true; } // false の場合、close の拒否 \r
                this.onPaneResize = function( _w, _h ){}\r
                this.resize = function( _w, _h ){\r
                        if( this.MIN_WIDTH > _w || this.MIN_HEIGHT > _h ){\r
index 35ab227..731c435 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.4.14
+ *   version 0.4.15
  *   
  * author:
  *   itozyun
@@ -213,8 +213,8 @@ pettanr.file = ( function(){
                                _uid = _targetFile.getUID(),
                                _ticket, _type, _callback;
                        for(var i=0, l = EVENT_LISTENER_REGISTER.length; i<l; ++i){
-                               _ticket = EVENT_LISTENER_REGISTER[i],
-                               _type = _ticket.eventType,
+                               _ticket = EVENT_LISTENER_REGISTER[i];
+                               _type = _ticket.eventType;
                                _callback = _ticket.callBack;
                                if( _eventType === _type && _uid === _ticket.fileUID){
                                        _callback( _eventType, _targetFile, e.key, e.value);
@@ -356,7 +356,9 @@ pettanr.file = ( function(){
                        if( _index === -1 || _access === null) return;
                        FILEDATA_ACCESS.splice( _index, 1);
                        TREE = parentFile = data = null;
-                       delete _access.DATA, _access.updateParent, _access.dispatchFileEvent;
+                       delete _access.DATA;
+                       delete _access.updateParent;
+                       delete _access.dispatchFileEvent;
                }
        };
        
@@ -413,6 +415,13 @@ pettanr.file = ( function(){
                        var _data = FILE_CONTROLER.getFileData( this);
                        return typeof _data.state === 'number' ? _data.state : pettanr.file.FILE_STATE.OK;
                },
+               getSummary: function(){
+                       var driver = FILE_CONTROLER.getDriver( this );
+                       if( typeof driver.getSummary === 'function'){
+                               return driver.getSummary( this );
+                       }
+                       return FileDriverBase.getSummary( this);
+               },
                isWritable: function(){
                        return FILE_CONTROLER.getUpdateFlag( this, pettanr.file.FILE_UPDATE_POLICY.WRITE);
                },
@@ -471,7 +480,7 @@ pettanr.file = ( function(){
                        return _data.name || 'No Name';
                },
                getThumbnail: function( _file){
-                       var _data = FILE_CONTROLER.getFileData( _file);
+                       var _data = FILE_CONTROLER.getFileData( _file),
                                _type = _data.type,
                                _className = '';
                        if( _type === pettanr.file.FILE_TYPE.FOLDER){
@@ -500,6 +509,32 @@ pettanr.file = ( function(){
                                className:      ' file-type-' + _className
                        }
                },
+               getSummary: function( _file ){
+                       var _data = FILE_CONTROLER.getFileData( _file ),
+                               _type = _data.type;
+                       if( _type === pettanr.file.FILE_TYPE.FOLDER){
+                               return 'folder';
+                       } else
+                       if( _type === pettanr.file.FILE_TYPE.IMAGE){
+                               return 'image file';
+                       } else
+                       if( _type === pettanr.file.FILE_TYPE.TEXT){
+                               return 'text file';
+                       } else
+                       if( _type === pettanr.file.FILE_TYPE.HTML){
+                               return 'html document file';
+                       } else
+                       if( _type === pettanr.file.FILE_TYPE.CSV){
+                               return 'csv daat file';
+                       } else
+                       if( _type === pettanr.file.FILE_TYPE.JSON){
+                               return 'json data file';
+                       } else
+                       if( _type === pettanr.file.FILE_TYPE.XML){
+                               return 'xml data file';
+                       }
+                       return '';
+               },
                getUpdatePolicy: function( _file){
                        // debug用 全てのメニューを許可
                        return pettanr.file.FILE_UPDATE_POLICY.SRWC;
@@ -544,7 +579,7 @@ pettanr.file = ( function(){
                        .dispatchFileEvent( new FileEventClass( pettanr.file.FILE_EVENT.GET_SEQENTIAL_FILES, ROOT_FILE, 'children', null));
        }
        function createFileEvent( _eventType, _file, _key, _value){
-               return new FileEventClass( _eventType, _file, _key, _value)
+               return new FileEventClass( _eventType, _file, _key, _value);
        }
        function createFileTypeID(){
                return ++numFileType;
@@ -637,15 +672,16 @@ pettanr.finder = ( function(){
                ELM_ORIGIN_FINDER_ICON = pettanr.util.pullHtmlAsTemplete( 'templete-finder-icon'),
                ELM_ORIGIN_CONTAINER = pettanr.util.pullHtmlAsTemplete( 'templete-finder-container'),
                ICON_HEIGHT = pettanr.util.getElementSize( ELM_ORIGIN_FINDER_ICON).height,
-               ICON_CLASSNAME = ELM_ORIGIN_FINDER_ICON.getElementsByTagName( 'div')[0].className,
+               ICON_CLASSNAME = 'finder-icon-thumbnail',
                FINDER_ICON_POOL = [],
                BREAD_OBJECT_POOL = [];
        
        var FinderIconClass = function(){
                var elmContainer,
                        ELM_WRAPPER = ELM_ORIGIN_FINDER_ICON.cloneNode( true),
-                       ELM_THUMBNAIL = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-thumbnail', 'div')[0],
-                       ELM_FILENAME = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-filename', 'div')[0],
+                       ELM_THUMBNAIL = pettanr.util.getElementsByClassName( ELM_WRAPPER, ICON_CLASSNAME )[0],
+                       ELM_FILENAME = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-filename' )[0],
+                       ELM_DESCRIPTION = pettanr.util.getElementsByClassName( ELM_WRAPPER, 'finder-icon-summary' )[0],
                        file, w, index, style, instansce, callback;
                
                ELM_WRAPPER.onclick = onClick;
@@ -663,6 +699,7 @@ pettanr.finder = ( function(){
                                ELM_THUMBNAIL.style.backgroundImage = '';
                        }
                        ELM_FILENAME.innerHTML = file.getName();
+                       ELM_DESCRIPTION.innerHTML = file.getSummary();
                }
                function resize(){
                        ELM_WRAPPER.style.top = (index * ICON_HEIGHT) +'px';
@@ -790,8 +827,8 @@ pettanr.finder = ( function(){
                tree.addTreeEventListener( pettanr.file.TREE_EVENT.UPDATE, draw);
                
                function draw( _w, _h ){
-                       w = _w;
-                       h = _h;
+                       w = Type.isFinite( _w ) === true ? _w : w;
+                       h = Type.isFinite( _h ) === true ? _h : h;
                        bodyH = _h - headH;
                        var     l = tree.hierarchy() +1,
                                m = BREAD_ARRAY.length,
@@ -836,7 +873,7 @@ pettanr.finder = ( function(){
                                var _file = tree.getParentFileAt( i);
                                if( _file !== null){
                                        tree.up( i);
-                                       draw();
+                                       draw( w, h );
                                }
                        }
                }
@@ -846,7 +883,7 @@ pettanr.finder = ( function(){
                                var _file = tree.getCurrentFile().getChildFileByIndex( i);
                                if( _file !== null && ( _file.getChildFileLength() !== -1 || _file.getType() === pettanr.file.FILE_TYPE.FOLDER)){
                                        tree.down( i);
-                                       draw();
+                                       draw( w, h );
                                }
                        }
                }
@@ -995,6 +1032,32 @@ pettanr.driver = ( function(){
                                }
                                return { className: 'file-type-broken'};
                        },
+                       getSummary: function( _file ){
+                               var _data = FileAPI.getFileData( _file),
+                                       _type = _data !== null ? _data.type : null;
+                               if( _type === pettanr.driver.FILE_TYPE.PICTURE){
+                                       return [ _data.width, 'x', _data.height, ', filesize:', _data.filesize, ', lisence:', _data.license ].join( '' );
+                               }
+                               if( _data === FILE_DATA_COMICS_ROOT){
+                                       return 'cabinet file';
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.COMIC){
+                                       return 'comic file';
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.PANEL){
+                                       return [ _data.width, 'x', _data.height ].join( '' );
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.AUTHOR){
+                                       return 'author file';
+                               }
+                               if( _type === pettanr.driver.FILE_TYPE.ARTIST){
+                                       return [ 'Email:', _data.email || 'empty' , ', HP:', _data.homepage_url || 'empty' ].join( '' );
+                               }
+                               if( _type === pettanr.file.FILE_TYPE.FOLDER){
+                                       return 'pettanR folder';
+                               }
+                               return 'pettanR unknown file';
+                       },
                        viwerApplicationList: function( _file ){
                                var _data = FileAPI.getFileData( _file ),
                                        _type = _data !== null ? _data.type : null;
@@ -1096,7 +1159,7 @@ pettanr.driver = ( function(){
                _data.state = pettanr.file.FILE_STATE.OK;
                
                if( Type.isArray( _json ) === true ){
-                       var l = _json.length;
+                       l = _json.length;
                        if( l === 0) return;
                        for( var i=0; i<l; ++i ){
                                buildFileData( _json[ i], _data);
@@ -1150,11 +1213,13 @@ pettanr.driver = ( function(){
                        // original_license を含まなければ、license object を削除して ビットデータ で保持
                        // original_license なら ファイルを作る buildFileData( _license, FILE_DATA_LISENCE_ROOT)
                        var _license = _data.license,
+                               _rule,
                                _Math_pow = Math.pow,
                                _bits = 0;
                        if( typeof _license === 'object'){
                                for( i=0, l=BASIC_LICENSES.length; i<l; ++i){
-                                       if( typeof _license[ BASIC_LICENSES[ i]] === 'number'){
+                                       _rule = _license[ BASIC_LICENSES[ i]]
+                                       if( typeof _rule === 'number' && _rule === 1 ){
                                                _bits += _Math_pow( 2, i);
                                        }
                                }
@@ -1224,7 +1289,7 @@ pettanr.driver = ( function(){
                } else
                // Panel
                if( _parent === FILE_DATA_PANELS_ROOT ){
-                       _data.comic = getResource( COMIC_ARRAY, _data.comic_id ),
+                       _data.comic = getResource( COMIC_ARRAY, _data.comic_id );
                        _data.author = getResource( AUTHOR_ARRAY, _data.author_id );
 
                        // picture data をファイルに取り出し
@@ -1242,7 +1307,7 @@ pettanr.driver = ( function(){
                        }
                } else
                // Picture
-               if( _data.type = pettanr.driver.FILE_TYPE.PICTURE ){
+               if( _data.type == pettanr.driver.FILE_TYPE.PICTURE ){
                        var _artist = _data.artist || getResource( ARTIST_ARRAY, _data.artist_id );
                        if( _artist){
                                _data.artist = _artist = buildFileData( _artist, FILE_DATA_ARTIST_ROOT );
index bb43505..291ee01 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR work.js\r
- *   version 0.4.14\r
+ *   version 0.4.15\r
  *   \r
  * author:\r
  *   itozyun\r