0.4.x/javascripts/common.js

   1 /*\r
   2  * pettanR common.js\r
   3  *   version 0.4.2\r
   4  * \r
   5  * author: itozyun\r
   6  */\r
   7 \r
   8 var pettanr = ( function(){\r
   9         var     FUNCTION_ARRAY = [],\r
  10                 URL = document.location.href.split( '#')[ 0],\r
  11                 IS_LOCAL = URL.indexOf( 'file:') === 0,\r
  12                 URL_PARAMS = ( function(){\r
  13                         var search = document.location.search,\r
  14                                 l = search.length;\r
  15                     if( 1 < l){\r
  16                         var     query = search.substring( 1),\r
  17                                         params = query.split( '&'),\r
  18                                         ret = {}, elm, name;\r
  19                         while( params.length > 0){\r
  20                             elm = params.shift().split( '=');\r
  21                                         name = decodeURIComponent( elm[ 0]);\r
  22                                         if( elm.length === 2){\r
  23                                     ret[ name] = ( function( v){\r
  24                                                         if( '' + parseFloat( v) === v) return parseFloat( v);\r
  25                                                         if( v === 'true') return true;\r
  26                                                         if( v === 'false') return false;\r
  27                                                         if( v === 'null') return null;\r
  28                                                         if( v === 'undefined') return undefined;\r
  29                                                         return v;\r
  30                                                 })( decodeURIComponent( elm[ 1]));\r
  31                                         } else\r
  32                                         if( elm.length === 1){\r
  33                                                 ret[ name] = true;\r
  34                                         }\r
  35                         }\r
  36                         return ret;\r
  37                     }\r
  38                     return {};\r
  39                 })(),\r
  40                 IS_DEBUG = typeof URL_PARAMS.debug === 'boolean' ? URL_PARAMS.debug : IS_LOCAL === true,\r
  41                 jqWindow , jqDocument , jqBody;\r
  42         return {\r
  43                 version: '0.4.2',\r
  44                 init: function(){\r
  45                         jqWindow = $( window);\r
  46                         jqDocument = $( document);\r
  47                         jqBody = $( document.body);\r
  48                         \r
  49                         var l = FUNCTION_ARRAY.length,\r
  50                                 _fn;\r
  51                         for( var i=0; i<l; i++){\r
  52                                 _fn = FUNCTION_ARRAY[ i];\r
  53                                 _fn.init && _fn.init( _fn === pettanr.view ? FUNCTION_ARRAY : undefined);\r
  54                         }\r
  55                         \r
  56                         delete pettanr.init;\r
  57                 },\r
  58                 fn: function( _fn){\r
  59                         FUNCTION_ARRAY.push( _fn);\r
  60                         pettanr.init === undefined && _fn.init && _fn.init();\r
  61                 },\r
  62                 jqWindow: function(){\r
  63                         return jqWindow;\r
  64                 },\r
  65                 jqDocument: function(){\r
  66                         return jqDocument;\r
  67                 },\r
  68                 jqBody: function(){\r
  69                         return jqBody;\r
  70                 },\r
  71                 URL_PARAMS: URL_PARAMS,\r
  72                 ROOT_PATH: ( function(){\r
  73                         // script と html の ドメインが一致\r
  74                         var _h1 = document.getElementsByTagName( 'h1')[ 0],\r
  75                                 _a = _h1.getElementsByTagName( 'a')[ 0],\r
  76                                 _root = _a.href.split( '\/'),\r
  77                                 _current = document.location.href.split( '\/'),\r
  78                                 ret = '.\/';\r
  79                         for( var i=0, l=_current.length - _root.length; i<l; ++i){\r
  80                                 ret = '.' + ret;\r
  81                         }\r
  82                         return ret;\r
  83                         // script と html の ドメインが不一致\r
  84                 })(),\r
  85                 LOCAL: IS_LOCAL,\r
  86                 DEBUG: IS_DEBUG,\r
  87                 LINE_FEED_CODE_TEXTAREA: ( function(){\r
  88                         var text = document.createElement('textarea');\r
  89                         text.value = '\n';\r
  90                         return text.value;\r
  91                 })(),\r
  92                 LINE_FEED_CODE_PRE: ( function(){\r
  93                         var pre = document.createElement('pre');\r
  94                         pre.appendChild( document.createTextNode('\n'));\r
  95                         return pre.firstChild.data;\r
  96                 })(),\r
  97                 IS_IFRAME: !!window.parent\r
  98         }\r
  99 })();\r
 100 \r
 101 /*\r
 102  * pettanr.util\r
 103  * \r
 104  *   extend( baseInstance, extend)\r
 105  *   cleanCommnetNode()\r
 106  *   cleanElement()\r
 107  *   getElementSize( _elm)\r
 108  *   getImageSize()\r
 109  *   getAbsolutePath()\r
 110  *   getGrobalObjectName()\r
 111  * \r
 112  */\r
 113 pettanr.util = ( function(){\r
 114         var ELM_SIZE_GETTER = ( function(){\r
 115                         var ret = document.createElement( 'DIV'),\r
 116                                 style = ret.style;\r
 117                         ret.id = 'elmSizeGetter';\r
 118                         style.position = 'absolute';\r
 119                         style.left = '0px';\r
 120                         style.top = '-9999px';\r
 121                         style.visibility = 'hidden';\r
 122                         document.body.appendChild( ret);\r
 123                         return ret;\r
 124                 })(),\r
 125                 IMG_SIZE_GETTER = ( function(){\r
 126                         var ret = ELM_SIZE_GETTER.cloneNode( true);\r
 127                         ret.id = 'imgSizeGetter';\r
 128                         document.body.appendChild( ret);\r
 129                         return ret;\r
 130                 })(),\r
 131                 CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ',');\r
 132         \r
 133         /* clean comment node */\r
 134         cleanCommnetNode();\r
 135         \r
 136         /* clean noscript */\r
 137         var nodeNoscript = document.getElementsByTagName( 'noscript'),\r
 138                 noscript;\r
 139         for(var i=0; i<nodeNoscript.length; ++i){\r
 140                 noscript = nodeNoscript[i];\r
 141                 noscript.parentNode && noscript.parentNode.removeChild( noscript);\r
 142         }\r
 143         nodeNoscript = noscript = null;\r
 144         \r
 145         function cleanCommnetNode( _targetElm){\r
 146                 _targetElm = _targetElm || document;\r
 147                 var _nodes = _targetElm.all || _targetElm.getElementsByTagName( '*'),\r
 148                         _array = [],\r
 149                         _elm;\r
 150                 for(var i=0, l = _nodes.length; i<l; ++i){\r
 151                         _array.push( _nodes[ i]);\r
 152                 }\r
 153                 for( i=0; i<l; ++i){\r
 154                         _elm = _array[ i];\r
 155                         _elm.nodeType === 8 && _elm.parentNode && _elm.parentNode.removeChild( _elm);\r
 156                 }\r
 157         }\r
 158         return {\r
 159                 extend: function( baseInstance, extend){\r
 160                         for( var key in extend){\r
 161                                 if( typeof baseInstance[ key] === 'undefined'){\r
 162                                         baseInstance[ key] = extend[ key];\r
 163                                 } else\r
 164                                 if( typeof baseInstance[ key] === typeof extend[ key]){\r
 165                                         baseInstance[ key] = extend[ key];\r
 166                                 } else {\r
 167                                         alert( 'extend error');\r
 168                                 }\r
 169                         }\r
 170                         return baseInstance;\r
 171                 },      \r
 172                 cleanCommnetNode: cleanCommnetNode,\r
 173                 cleanElement: function( _targetElm){\r
 174                         var _nodes, _elm, _array, j, m;\r
 175                         for( var i=0, l=CLEAN_TARGET_ELEMENT.length; i<l; ++i){\r
 176                                 _nodes = _targetElm.getElementsByTagName( CLEAN_TARGET_ELEMENT[ i]);\r
 177                                 _array = [];\r
 178                                 for( j=0, m = _nodes.length; j<m; ++j){\r
 179                                         _array.push( _nodes[ j]);\r
 180                                 }\r
 181                                 for( j=0, m = _array.length; j<m; ++j){\r
 182                                         _elm = _nodes[ j];\r
 183                                         _elm.parentNode && _elm.parentNode.removeChild( _elm);\r
 184                                 }\r
 185                         }\r
 186                         cleanCommnetNode( _targetElm);\r
 187                         if( pettanr.ua.isIE === false) return;\r
 188                         _nodes = _targetElm.all || _targetElm.getElementsByName( '*');\r
 189                         for( i=0, l = _nodes.length; i<l; ++i){\r
 190                                 _elm = _nodes[ i];\r
 191                                 _elm.style.filter = '';\r
 192                                 _elm.style.behavior = '';\r
 193                         }\r
 194                 },\r
 195                 getElementSize: function( _elm){\r
 196                         if( !_elm){\r
 197                                 return {\r
 198                                         width:  0,\r
 199                                         height: 0\r
 200                                 }\r
 201                         }\r
 202                         var     parentElm = _elm.parentNode,\r
 203                                 prevElm = _elm.previousSibling,\r
 204                                 nextElm = _elm.nextSibling,\r
 205                                 displayNone = _elm.style.display === 'none';\r
 206                         if( displayNone === true) _elm.style.display = '';\r
 207                         ELM_SIZE_GETTER.appendChild( _elm);\r
 208                         var ret = {\r
 209                                 width:          _elm.offsetWidth,\r
 210                                 height:         _elm.offsetHeight\r
 211                         }\r
 212                         if( displayNone === true) _elm.style.display = 'none';\r
 213                         if( nextElm){\r
 214                                 parentElm.insertBefore( _elm, nextElm);\r
 215                         } else          \r
 216                         if( prevElm && prevElm.nextSibling){\r
 217                                 parentElm.insertBefore( _elm, prevElm.nextSibling);\r
 218                         } else {\r
 219                                 parentElm && parentElm.appendChild( _elm);\r
 220                         }                       \r
 221                         return ret;\r
 222                 },\r
 223                 getImageSize: function( img){\r
 224                         var     parentElm = img.parentNode,\r
 225                                 prevElm = img.previousSibling,\r
 226                                 nextElm = img.nextSibling,\r
 227                                 displayNone = img.style.display === 'none';\r
 228                         if( displayNone === true) img.style.display = '';\r
 229                         IMG_SIZE_GETTER.appendChild( img);\r
 230                         var size = getActualDimension( img);\r
 231                         IMG_SIZE_GETTER.removeChild( img);\r
 232                         if( displayNone === true) img.style.display = 'none';\r
 233                         if( nextElm){\r
 234                                 parentElm.insertBefore( img, nextElm);\r
 235                         } else          \r
 236                         if( prevElm && prevElm.nextSibling){\r
 237                                 parentElm.insertBefore( img, prevElm.nextSibling);\r
 238                         } else {\r
 239                                 parentElm && parentElm.appendChild( img);\r
 240                         }\r
 241                         return size;\r
 242                         \r
 243                 /* LICENSE: MIT\r
 244                  * AUTHOR: uupaa.js@gmail.com\r
 245                  */\r
 246                         function getActualDimension(image) {\r
 247                                 var run, mem, w, h, key = "actual";\r
 248                         \r
 249                         // for Firefox, Safari, Google Chrome\r
 250                                 if ("naturalWidth" in image) {\r
 251                                         return {\r
 252                                                 width:  image.naturalWidth,\r
 253                                                 height: image.naturalHeight\r
 254                                         };\r
 255                                 }\r
 256                         \r
 257                                 if ("src" in image) { // HTMLImageElement\r
 258                                         if (image[key] && image[key].src === image.src) {\r
 259                                                 return image[key];\r
 260                                         }\r
 261                                         if (document.uniqueID) { // for IE\r
 262                                                 run = image.runtimeStyle;\r
 263                                                 mem = { w: run.width, h: run.height }; // keep runtimeStyle\r
 264                                                 run.width  = "auto"; // override\r
 265                                                 run.height = "auto";\r
 266                                                 w = image.width;\r
 267                                                 h = image.height;\r
 268                                                 run.width  = mem.w; // restore\r
 269                                                 run.height = mem.h;\r
 270                                         } else { // for Opera and Other\r
 271                                         /*\r
 272                                                 function fn() {\r
 273                                                         w = image.width;\r
 274                                                         h = image.height;\r
 275                                                 }\r
 276                                                 mem = { w: image.width, h: image.height }; // keep current style\r
 277                                                 image.removeAttribute("width");\r
 278                                                 image.addEventListener("DOMAttrModified", fn, false);\r
 279                                                 image.removeAttribute("height");\r
 280                                                 // call fn\r
 281                                                 image.removeEventListener("DOMAttrModified", fn, false);\r
 282                                                 image.width  = mem.w; // restore\r
 283                                                 image.height = mem.h;\r
 284                                         */\r
 285                                                 mem = { w: image.width, h: image.height }; // keep current style\r
 286                                                 image.removeAttribute("width");\r
 287                                                 image.removeAttribute("height");\r
 288                                                 w = image.width;\r
 289                                                 h = image.height;\r
 290                                                 image.width  = mem.w; // restore\r
 291                                                 image.height = mem.h;\r
 292                                         }\r
 293                                         return image[key] = { width: w, height: h, src: image.src }; // bond\r
 294                                 }\r
 295                                 // HTMLCanvasElement\r
 296                                 return { width: image.width, height: image.height };\r
 297                         }\r
 298                 },\r
 299                 loadImage: function( URLorELM, onLoad, onError, delay, timeout){\r
 300                         delay = delay || 250;\r
 301                         timeout = timeout || 5000;\r
 302                         var type = typeof URLorELM,\r
 303                                 img, images, src, abstractPath;\r
 304                         if( type === 'string'){\r
 305                                 src = URLorELM;\r
 306                                 // images = [];\r
 307                         } else\r
 308                         // http://d.hatena.ne.jp/hottolinkblog/20090228/1235823487\r
 309                         if( type === 'object' && typeof URLorELM.hspace !== 'undefined' && typeof URLorELM.vspace !== 'undefined'){\r
 310                                 img = URLorELM;\r
 311                                 images = [ img];\r
 312                                 src = img.src;\r
 313                         } else {\r
 314                                 return;\r
 315                         }\r
 316                         abstractPath = this.getAbsolutePath( src);\r
 317                         \r
 318                         loadImage( images, abstractPath, onLoadAsync, onErrorAsync, delay, timeout);\r
 319                         \r
 320                         function onLoadAsync( abspath, actualW, actualH){\r
 321                                 if( abstractPath !== abspath) return;\r
 322                                 var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onLoad);\r
 323                                         _onTimeout = pettanr.util.createGlobalFunc( [\r
 324                                                 'function(){',\r
 325                                                         'window["', _g_onUpdateFunction, '"]( "', abspath, '", ', actualW, ',  ', actualH, ');',\r
 326                                                         'window["', _g_onUpdateFunction, '"] = null;',\r
 327                                                 '}'\r
 328                                         ].join( ''));\r
 329                                 onLoad && setTimeout( window[ _onTimeout], 0);\r
 330                                 window[ _onTimeout] = null;\r
 331                         }\r
 332                         function onErrorAsync( abspath){\r
 333                                 if( abstractPath !== abspath) return;\r
 334                                 var _g_onUpdateFunction = pettanr.util.createGlobalFunction( onError);\r
 335                                         _onTimeout = pettanr.util.createGlobalFunc( [\r
 336                                                 'function(){',\r
 337                                                         'window["', _g_onUpdateFunction, '"]( "', abspath, '");',\r
 338                                                         'window["', _g_onUpdateFunction, '"] = null;',\r
 339                                                 '}'\r
 340                                         ].join( ''));\r
 341                                 onError && setTimeout( window[ _onTimeout], 0);\r
 342                                 window[ _onTimeout] = null;\r
 343                         }\r
 344                         \r
 345                 /*  LICENSE: MIT?\r
 346                  *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631\r
 347                  *  AUTHOR: uupaa.js@gmail.com\r
 348                  * \r
 349                  *  fixed for ie6-8 by pettanr\r
 350                  *   new Image -> document.createElement( 'img')\r
 351                  */\r
 352                         function loadImage( images, abspath, onLoad, onError, delay, timeout) {\r
 353                                 images = images || document.images;\r
 354                                 var img,\r
 355                                         i = 0, l = images.length,\r
 356                                         tick = 0;\r
 357                                 for(; i < l; ++i) {\r
 358                                         img = images[i];\r
 359                                         if ( img.src === abspath && img.complete) {\r
 360                                                 var size = pettanr.util.getImageSize( img);\r
 361                                                 onLoad( abspath, size.width, size.height);\r
 362                                                 return;\r
 363                                         }\r
 364                                 }\r
 365                                 img = document.createElement( 'img'); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る\r
 366                                 img.finish = false;\r
 367                                 img.onabort = img.onerror = function() {\r
 368                                         if (img.finish) { return; }\r
 369                                         img.finish = true;\r
 370                                         onError(abspath);\r
 371                                         img.onload = img.onabort = img.onerror = "";\r
 372                                 };\r
 373                                 img.onload  = function() {\r
 374                                         img.finish = true;\r
 375                                         if (window.opera && !img.complete) {\r
 376                                                 onError(abspath);\r
 377                                                 img.onload = img.onabort = img.onerror = "";\r
 378                                                 return;\r
 379                                         }\r
 380                                         var size = pettanr.util.getImageSize( img);\r
 381                                         onLoad( abspath, size.width, size.height);\r
 382                                         img.onload = img.onabort = img.onerror = "";\r
 383                                         //img = void 0;\r
 384                                 };\r
 385                                 img.src = abspath;\r
 386                                 if (!img.finish && timeout) {\r
 387                                         setTimeout(function() {\r
 388                                                 if (img.finish) { return; }\r
 389                                                 if (img.complete) {\r
 390                                                         img.finish = true;\r
 391                                                         if (img.width) { return; }\r
 392                                                         onError(abspath);\r
 393                                                         img.onload = img.onabort = img.onerror = "";\r
 394                                                         return;\r
 395                                                 }\r
 396                                                 if ((tick += delay) > timeout) {\r
 397                                                         img.finish = true;\r
 398                                                         onError(abspath);\r
 399                                                         img.onload = img.onabort = img.onerror = "";\r
 400                                                         return;\r
 401                                                 }\r
 402                                                 setTimeout(arguments.callee, delay);\r
 403                                         }, 0);\r
 404                                 }\r
 405                         }\r
 406                 },\r
 407                 getAbsolutePath: function( path) {\r
 408                         var e = document.createElement("div");\r
 409                         e.innerHTML = '<a href=\"' + path + '\" />';\r
 410                         return e.firstChild.href;\r
 411                 },\r
 412                 getAbsolutePosition: function( _elm){\r
 413                         // Find the destination's position\r
 414                         var     destx = _elm.offsetLeft,\r
 415                                 desty = _elm.offsetTop,\r
 416                                 thisNode = _elm,\r
 417                                 body = document.body;\r
 418                         while (thisNode.offsetParent && thisNode.offsetParent !== body){\r
 419                                 thisNode = thisNode.offsetParent;\r
 420                                 destx += thisNode.offsetLeft;\r
 421                                 desty += thisNode.offsetTop;\r
 422                         }\r
 423                         return {\r
 424                                 x:      destx,\r
 425                                 y:      desty\r
 426                         }\r
 427                 },\r
 428                 pullHtmlAsTemplete: function( IDorELM){\r
 429                         if( typeof IDorELM === 'string'){\r
 430                                 IDorELM = document.getElementById( IDorELM);\r
 431                         }\r
 432                         if( !IDorELM) return;\r
 433                         IDorELM.parentNode && IDorELM.parentNode.removeChild( IDorELM);\r
 434                         if( IDorELM.id && IDorELM.id.indexOf( 'templete-') === 0){\r
 435                                 IDorELM.id = '';\r
 436                         }\r
 437                         return IDorELM;\r
 438                 },\r
 439                 getElementsByClassName: function( _elm, _className, opt_tagName){\r
 440                         var _all = !opt_tagName || opt_tagName === '*',\r
 441                                 _nodes = _all === true ? ( _elm.all || _elm.getElementsByTagName( '*')) : _elm.getElementsByTagName( opt_tagName),\r
 442                                 _node, _classes, ret = [];\r
 443                         for( var i=0, l = _nodes.length; i<l; ++i){\r
 444                                 _node = _nodes[ i];\r
 445                                 if( _node.nodeType === 1){\r
 446                                         _classes = _node.className.split( ' ');\r
 447                                         for( var j=0, m=_classes.length; j<m; ++j){\r
 448                                                 if( _classes[ j] === _className){\r
 449                                                         ret.push( _node);\r
 450                                                         break;\r
 451                                                 }\r
 452                                         }\r
 453                                 }\r
 454                         }\r
 455                         return ret;\r
 456                 },\r
 457                 hasClassName: function( _elm, _className){\r
 458                         var _classes = _elm.className.split( ' ');\r
 459                         for( var i=0, l=_classes.length; i<l; ++i){\r
 460                                 if( _classes[ i] === _className) return true;\r
 461                         }\r
 462                         return false;\r
 463                 },\r
 464                 removeAllChildren: function ( _elm){\r
 465                         while( _elm.firstChild){\r
 466                                 remove( _elm.firstChild);\r
 467                         }\r
 468                         function remove( _node){\r
 469                                 while( _node.firstChild){\r
 470                                         remove( _node.firstChild);\r
 471                                 }\r
 472                                 _node.parentNode && _node.parentNode.removeChild( _node);\r
 473                         }\r
 474                 },\r
 475                 /*\r
 476                  * \r
 477                  */\r
 478                 createGlobalFunction: function( _func) {\r
 479                         var randomKey = null;\r
 480                         while( true) {\r
 481                                 randomKey = '_glovalFunction_' + ( '' + Math.random()).replace( /\./,'');\r
 482                                 if( eval( 'typeof '+randomKey) === 'undefined') {\r
 483                                         break;\r
 484                                 }\r
 485                         }\r
 486                         window[ randomKey] = _func;\r
 487                         return randomKey;\r
 488                 },\r
 489                 createGlobalFunc: function( func){\r
 490                         var randomKey = null;\r
 491                         while(true) {\r
 492                                 randomKey = 'hogeGlovalFunc_'+(''+Math.random()).replace(/\./,'');\r
 493                                 if(eval('typeof '+randomKey) == 'undefined') {\r
 494                                         break;\r
 495                                 }\r
 496                         }\r
 497                         eval(randomKey+'='+((typeof func=='string') ? func : func.toString()));\r
 498                         return randomKey;\r
 499                 },\r
 500                 createGlobalVar: function( obj){\r
 501                         var randomKey = null;\r
 502                         while(true) {\r
 503                                 randomKey = 'hogeGlovalVar_'+(''+Math.random()).replace(/\./,'');\r
 504                                 if(eval('typeof '+randomKey+'') == 'undefined') {\r
 505                                         break;\r
 506                                 }\r
 507                         }\r
 508                         var globalObj = eval(randomKey+'={}');\r
 509                         globalObj.value = obj;\r
 510                         return randomKey;\r
 511                 },\r
 512                 createGlobalUniqueName: function(){\r
 513                         var randomKey = null;\r
 514                         while(true) {\r
 515                                 randomKey = '_uniqueName'+(''+Math.random()).replace(/\./,'');\r
 516                                 if( typeof window[randomKey] === 'undefined'){\r
 517                                         break;\r
 518                                 }\r
 519                         }\r
 520                         return randomKey;\r
 521                 }\r
 522         }\r
 523 })();\r
 524 \r
 525 /*\r
 526  * pettanr.ua\r
 527  * \r
 528  *   detect userAgent\r
 529  *   detect plug in\r
 530  */\r
 531 pettanr.ua = ( function(){\r
 532         var ua = (function(){\r
 533                         var acme = {};\r
 534                         \r
 535                         var n = navigator;\r
 536                         var dua = n.userAgent;\r
 537                         var dav = n.appVersion;\r
 538                         var tv = parseFloat(dav);\r
 539                         acme.isOpera = (dua.indexOf("Opera") >= 0) ? tv: undefined;\r
 540                         acme.isKhtml = (dav.indexOf("Konqueror") >= 0) ? tv : undefined;\r
 541                         acme.isWebKit = parseFloat(dua.split("WebKit/")[1]) || undefined;\r
 542                         acme.isChrome = parseFloat(dua.split("Chrome/")[1]) || undefined;\r
 543                         var index = Math.max(dav.indexOf("WebKit"), dav.indexOf("Safari"), 0);\r
 544                         if(index && !acme.isChrome){\r
 545                                 acme.isSafari = parseFloat(dav.split("Version/")[1]);\r
 546                                 if(!acme.isSafari || parseFloat(dav.substr(index + 7)) <= 419.3){\r
 547                                         acme.isSafari = 2;\r
 548                                 }\r
 549                         }\r
 550                         if(document.all && !acme.isOpera){\r
 551                                 acme.isIE = parseFloat(dav.split("MSIE ")[1]) || undefined;\r
 552                         }\r
 553                         \r
 554                         return acme;\r
 555                 })(),\r
 556                 isIE = navigator.userAgent.toLowerCase().indexOf( 'msie') !== -1,\r
 557                 ieVersion = isIE === true ? parseInt( navigator.appVersion.toLowerCase().replace( /.*msie[ ]/, '').match( /^[0-9]+/)) : 0,\r
 558                 ieRenderingVersion = ieVersion === 8 ? document.documentMode : ieVersion,\r
 559                 isStanderdMode = document.compatMode === 'CSS1Compat',\r
 560                 VML = ( function(){\r
 561                         if( isIE === false || ieVersion > 8) return false;\r
 562                         var globalObjectName = pettanr.util.createGlobalUniqueName(),\r
 563                                 script;\r
 564                         document.write( [ '<!--[if gte vml 1]><script id="detectVML">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));\r
 565                         if( window[globalObjectName] === 1){\r
 566                                 script = document.getElementById( 'detectVML');\r
 567                                 script.parentNode.removeChild( script);\r
 568                                 window[globalObjectName] = script = null;\r
 569                                 return true;\r
 570                         }\r
 571                         //pettanr.util.cleanCommnetNode();\r
 572                         return false;\r
 573                 })(),\r
 574                 isStandAloneMode = ( function(){\r
 575                         if( isIE === false) return false;\r
 576                         if( VML === true) return false;\r
 577                         var globalObjectName = pettanr.util.createGlobalUniqueName(),\r
 578                                 script;\r
 579                         document.write( [ '<!--[if IE ', Math.floor( ieVersion), ']><script id="detectStandAlone">window', '.', globalObjectName, '=1;<\/script><![endif]-->'].join( ''));\r
 580                         if( window[globalObjectName] === 1){\r
 581                                 script = document.getElementById( 'detectStandAlone');\r
 582                                 script.parentNode.removeChild( script);\r
 583                                 window[globalObjectName] = script = null;\r
 584                                 return false;\r
 585                         }\r
 586                         //pettanr.util.cleanCommnetNode();\r
 587                         return true;\r
 588                 })();\r
 589         return {\r
 590                 IE:                                     ua.isIE,\r
 591                 GECKO:                          0,\r
 592                 OPERA:                          ua.isOpera,\r
 593                 KHTML:                          ua.isKhtml,\r
 594                 WEBKIT:                         ua.isWebKit,\r
 595                 CHROME:                         ua.isChrome,\r
 596                 isIE:                           isIE,\r
 597                 ieVersion:                      ieVersion,\r
 598                 ieRenderingVersion:     ieRenderingVersion,\r
 599                 isStanderdMode:         isStanderdMode,\r
 600                 VENDER_PREFIX: ( function() {\r
 601                         var ua = navigator.userAgent.toLowerCase();\r
 602                         if ( ua.indexOf('opera') !== -1) {\r
 603                                 return 'O';\r
 604                         } else if ( ua.indexOf('msie') !== -1) {\r
 605                                 return 'ms';\r
 606                         } else if ( ua.indexOf('webkit') !== -1) {\r
 607                                 return 'webkit';\r
 608                         } else if ( navigator.product === 'Gecko') {\r
 609                                 return 'Moz';\r
 610                         }\r
 611                         return '';\r
 612                 })(),\r
 613                 ACTIVEX: ( function(){\r
 614                         if( isIE === false || ieVersion > 8) return false;\r
 615                         var     b = document.body,\r
 616                                 c = b.className || '',\r
 617                                 x,\r
 618                                 ret = pettanr.URL_PARAMS.ActiveX;\r
 619                         if( ret === undefined){\r
 620                                 if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-enabled') === true) return true;\r
 621                                 if( pettanr.util.hasClassName( b, 'pettanr-ActiveX-disabled') === true) return false;\r
 622                                 x = document.createElement('div');\r
 623                                 b.appendChild(x);\r
 624                                 x.style.cssText = 'width:1px;height:1px;filter:progid:DXImageTransform.Microsoft.Shadow()';\r
 625                                 ret = x.offsetHeight > 1;\r
 626                                 b.removeChild(x);\r
 627                         }\r
 628                         b.className += [ c !== '' ? ' ' : c, 'pettanr-ActiveX-', ret === true ? 'enabled' : 'disabled'].join( '');\r
 629                         return ret;\r
 630                 })(),\r
 631                 VML: VML,\r
 632                 STANDALONE: isStandAloneMode,\r
 633                 startVML: function(){\r
 634                         delete this.startVML;\r
 635                         if( pettanr.ua.VML !== true) return false;\r
 636                         if (!document.namespaces["v"]) {\r
 637                         document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");\r
 638                     }\r
 639                     document.createStyleSheet().cssText = "v\:shape,v\:image{behavior:url(#default#VML);display:block;};";\r
 640                 }\r
 641         }\r
 642 })();\r
 643 \r
 644 \r
 645 pettanr.CONST = ( function(){\r
 646         var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,\r
 647                 RETTANR_ROOOT_PATH = 'http:\/\/pettanr.heroku.com\/';\r
 648         return {\r
 649                 PETTANR_ROOT_PATH:                      RETTANR_ROOOT_PATH,\r
 650                 URL_ORIGINAL_PICTURES_JSON: ( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'original_pictures.json',\r
 651                 URL_PANELS_JSON:                        ( isLocal === true ? 'json\/' : RETTANR_ROOOT_PATH) + 'panels.json',\r
 652                 NS_PETTANR_COMIC:                       'pettanr-comic',\r
 653                 RESOURCE_PICTURE_PATH:          ( isLocal === true ? pettanr.ROOT_PATH : RETTANR_ROOOT_PATH) + 'resource_pictures\/'\r
 654         }\r
 655 })();\r
 656 \r
 657 \r
 658 pettanr.view = ( function(){\r
 659         /* create iframe overlay for user console */\r
 660         var location = document.location.pathname,\r
 661                 isWorkPage = location.indexOf( '\/work.html') !== -1 || location.indexOf( '\work.html') !== -1,\r
 662                 deep =  location.indexOf( '\/diary\/') !== -1 ||\r
 663                                 location.indexOf( '\/test\/') !== -1 ||\r
 664                                 location.indexOf( '\/help\/') !== -1 ||\r
 665                                 location.indexOf( '\/sitemap\/') !== -1 ||\r
 666                                 location.indexOf( '\/wiki\/') !== -1,\r
 667                 LoginUserNavi;\r
 668 \r
 669         if( isWorkPage === false){\r
 670                 LoginUserNavi = ( function(){\r
 671                         var _body = document.body,\r
 672                                 _root = document.getElementsByTagName( 'html')[ 0],\r
 673                                 filter,\r
 674                                 iframe, visible = false;\r
 675                         return {\r
 676                                 init: function( viewIndex){\r
 677                                         filter = document.createElement( 'div');\r
 678                                         filter.style.position = 'absolute';\r
 679                                         filter.style.left = filter.style.top = '0px';\r
 680                                         filter.style.width = filter.style.height ='100%';\r
 681                                         filter.style.backgroundColor = '#fff';\r
 682         \r
 683                                         var ua = pettanr.ua,\r
 684                                                 id = 'work',\r
 685                                                 src = [\r
 686                                                                 deep === true ? '../' : '',\r
 687                                                                 'work.html',\r
 688                                                                 typeof viewIndex === 'number' ? '?view=' +viewIndex : ''\r
 689                                                 ].join( '');\r
 690                                         \r
 691                                         var el = document.createElement(ua.isIE ? '<iframe name="' + id + '" src="' + src + '">' : 'iframe');\r
 692                                         el.id = el.name = id;\r
 693                                         el.setAttribute( 'name', id);\r
 694                                         \r
 695                                         el.style.position = 'absolute';\r
 696                                         el.style.left = el.style.top = '0px';\r
 697                                         el.style.width = el.style.height ='100%';\r
 698                                         //el.style.overflow = 'hidden';\r
 699                                         el.hspace = el.vspace = el.marginheight = el.marginwidth = 0;\r
 700                                         \r
 701                                         _body.appendChild(el);\r
 702                                         window[id] = el;\r
 703                                         iframe = el;\r
 704                                         \r
 705                                         if (!ua.isIE) {\r
 706                                                 var idoc;//WebKit > 521 corresponds with Safari 3, which started with 522 WebKit version.\r
 707                                                 if (ua.isWebKit > 521) {\r
 708                                                         idoc = el.contentWindow.document;\r
 709                                                 } else if (ua.isSafari) {\r
 710                                                         idoc = el.document;\r
 711                                                 } else { //  if(d.isMozilla){\r
 712                                                         idoc = el.contentWindow;\r
 713                                                 }\r
 714                                                 \r
 715                                                 if ( !idoc) {\r
 716                                                         try {\r
 717                                                                 el.src = src;\r
 718                                                                 el.contentWindow.location.replace = src;                                                        \r
 719                                                         } catch (e){}\r
 720                                                         try {\r
 721                                                                 //el.contentWindow.location = src;                                                      \r
 722                                                         } catch (e){}\r
 723                                                         try {\r
 724                                                                 el.location = src; // for Safari 2.0.3 ??\r
 725                                                         } catch (e){}\r
 726                                                         \r
 727                                                 } else if( ua.isOpera){\r
 728                                                         el.src = src; // for Opera\r
 729                                                         el.contentWindow.location.replace = src; // for Opera\r
 730                                                 } else {\r
 731                                                         //el.src = src; // for firefox\r
 732                                                         idoc.location.replace(src);\r
 733                                                 }\r
 734                                         }\r
 735                                         \r
 736                                         delete LoginUserNavi.init;\r
 737                                 },\r
 738                                 show: function(){\r
 739                                         if(visible === true) return;\r
 740                                         if (_root) {\r
 741                                                 _root.style.overflow = 'hidden';\r
 742                                         }\r
 743                                         _body.style.overflow = 'hidden';\r
 744                                         \r
 745                                         var index = ( function( a){\r
 746                                                 var node = a.parentNode.getElementsByTagName( 'a'),\r
 747                                                         l = node.length;\r
 748                                                 for( var i=0; i<l; ++i){\r
 749                                                         if( node[ i] === a) return i\r
 750                                                 }\r
 751                                                 return -1;\r
 752                                         })( this);\r
 753                                         if( index === -1) return false;\r
 754                                         \r
 755                                         LoginUserNavi.init && LoginUserNavi.init( index);\r
 756                                         \r
 757                                         iframe.parentNode !== _body && _body.appendChild( iframe);\r
 758                                         \r
 759                                         _body.insertBefore( filter, iframe);\r
 760                                         \r
 761                                         visible = true;\r
 762                                         \r
 763                                         return false;\r
 764                                 },\r
 765                                 hide: function(){\r
 766                                         if(visible === false) return;\r
 767                                         \r
 768                                         _body.removeChild(filter);\r
 769                                         _body.style.overflow = '';\r
 770                                         if (_root) {\r
 771                                                 _root.style.overflow = '';\r
 772                                         }\r
 773                                         _body.removeChild(iframe);\r
 774                                         \r
 775                                         visible = false;\r
 776                                 }\r
 777                         }\r
 778                 })();\r
 779         } else {\r
 780                 LoginUserNavi = ( function(){\r
 781                         return {\r
 782                                 show: function(){\r
 783                                         var _nodes = this.parentNode.getElementsByTagName( 'a');\r
 784                                         for( var i=0, l=_nodes.length; i<l; ++i){\r
 785                                                 if( _nodes[ i] === this){\r
 786                                                         pettanr.view.show( i);\r
 787                                                         break;\r
 788                                                 }\r
 789                                         }\r
 790                                         return false;\r
 791                                 },\r
 792                                 hide: function(){}\r
 793                         }\r
 794                 })();\r
 795 \r
 796                 if( pettanr.IS_IFRAME === true){\r
 797                         var _nodes = document.getElementsByTagName( 'a'),\r
 798                                 _a, _href;\r
 799                         for(var i=0, l = _nodes.length; i<l; i++){\r
 800                                 _a = _nodes[ i];\r
 801                                 _href = _a.href.split('?')[0].split('#')[0];\r
 802                                 if( pettanr.util.getAbsolutePath( _href) !== location) _a.target = '_parent';\r
 803                         }\r
 804                 }\r
 805                 \r
 806                 if( pettanr.DEBUG === true){\r
 807                         var elmDl = document.getElementById( 'useragent'),\r
 808                                 elmDt, elmDd,\r
 809                                 data = {\r
 810                                         pettanR:        pettanr.version,\r
 811                                         ua:                     navigator.userAgent,\r
 812                                         platform:       navigator.platform,\r
 813                                         appVersion:     navigator.appVersion,\r
 814                                         appCodeName:navigator.appCodeName,\r
 815                                         appName:        navigator.appName,\r
 816                                         language:       navigator.browserLanguage || navigator.language,\r
 817                                         ActiveX:        pettanr.ua.ACTIVEX\r
 818                                 },\r
 819                                 ua = pettanr.ua;\r
 820                         if( ua.IE){\r
 821                                 //data.ua = 'Internet Explorer';\r
 822                                 data.version = ua.IE;\r
 823                                 if( ua.ieVersion >= 8) data.RenderingVersion = ua.ieRenderingVersion;\r
 824                                 data.browserType = ua.STANDALONE === true ? 'Standalone' : 'bundle';\r
 825                                 if( ua.ieVersion < 9) {\r
 826                                         data.vml = ua.VML;\r
 827                                 } else {\r
 828                                         data.svg = ua.SVG;\r
 829                                 }\r
 830                         }\r
 831                         data.RenderingMode = ua.isStanderdMode === true ? 'Standerd' : 'Quirks';\r
 832                         \r
 833                         for( var key in data){\r
 834                                 elmDt = document.createElement( 'dt');\r
 835                                 elmDt.innerHTML = key;\r
 836                                 elmDd = document.createElement( 'dd');\r
 837                                 elmDd.innerHTML = '' + data[ key];\r
 838                                 if( !data[ key]) elmDd.style.color = 'red';\r
 839                                 elmDl.appendChild( elmDt);\r
 840                                 elmDl.appendChild( elmDd);\r
 841                         }\r
 842                 } else {\r
 843                         var _debug = document.getElementById( 'debug');\r
 844                         if( _debug){\r
 845                                 pettanr.util.removeAllChildren( _debug);\r
 846                                 _debug.parentNode.removeChild( _debug);\r
 847                         }\r
 848                 }\r
 849         }\r
 850 \r
 851         /* global-navi */\r
 852         var navi = document.getElementById('global-navi'),\r
 853                 origin = document.createElement('a'),\r
 854                 items = ( function(){\r
 855                         var ret = ['Home', 'Comic list', 'Picture', 'Setting'];\r
 856                         pettanr.DEBUG === true && ret.push( 'debug');\r
 857                         return ret;\r
 858                 })(),\r
 859                 l = items.length,\r
 860                 item;\r
 861         origin.href = '#';\r
 862         for(var i=0; i<l; ++i){\r
 863                 item = origin.cloneNode( true);\r
 864                 item.innerHTML = items[ i];\r
 865                 item.onclick = LoginUserNavi.show;\r
 866                 navi.appendChild( item);\r
 867         }\r
 868         navi.style.width = ( ( item.offsetWidth || 80) * l) +'px';\r
 869         location = origin = item = null;\r
 870         \r
 871         /* debug info */\r
 872         // ua version, lang, os, plugin ( vml, svg), standerdmode, balloon, rimg\r
 873 \r
 874 /*\r
 875  * window resize event, overlay と currentなviewに流す\r
 876  * view modeの保持\r
 877  *       editor, overlay, comic-viewer, image-explorer\r
 878  * fadeIn, faseOut\r
 879  */\r
 880 \r
 881         var jqWindow,\r
 882                 funcArray,\r
 883                 HOME_ID = 'entrance',\r
 884                 VIEW_ID_ARRAY = [ HOME_ID, 'cabinet', 'gallery', 'backyard'],\r
 885                 elmCurrent,\r
 886                 currentView,\r
 887                 currentID = ( function( _view){\r
 888                         var _viewID;\r
 889                         \r
 890                         if( typeof _view === 'number' && _view < VIEW_ID_ARRAY.length){\r
 891                                 _viewID = VIEW_ID_ARRAY[ _view];\r
 892                         } else\r
 893                         if( typeof _view === 'string'){\r
 894                                 _viewID = _view;\r
 895                         } else {\r
 896                                 _viewID = HOME_ID;\r
 897                         }\r
 898 \r
 899                         if( document.getElementById( _viewID)){\r
 900                                 return _viewID;\r
 901                         }\r
 902                         return HOME_ID;\r
 903                 })( pettanr.URL_PARAMS.view);\r
 904         \r
 905         pettanr.DEBUG === true && VIEW_ID_ARRAY.push( 'debug');\r
 906         \r
 907         show();\r
 908         \r
 909         function onWindowResize(){\r
 910                 var _fn,\r
 911                         l = funcArray.length,\r
 912                         w = jqWindow.width(),\r
 913                         h = jqWindow.height();\r
 914                 //for( var i=0; i<l; ++i){\r
 915                 //      _fn = funcArray[ i];\r
 916                 //      _fn.onWindowResize && _fn.onWindowResize( w, h);\r
 917                 //}\r
 918                 currentView && currentView.onWindowResize && currentView.onWindowResize( w, h);\r
 919                 pettanr.overlay.currentID !== null && pettanr.overlay.onWindowResize( w, h);\r
 920         }\r
 921         function show(){\r
 922                 if( isWorkPage === false) return;\r
 923                 \r
 924                 var _elm = document.getElementById( currentID);\r
 925                 if( elmCurrent) elmCurrent.style.display = 'none';\r
 926                 _elm.style.display = 'block';\r
 927                 elmCurrent = _elm;\r
 928                 \r
 929                 var     nodesA = navi.getElementsByTagName( 'a') || [],\r
 930                         l = nodesA.length,\r
 931                         _a;\r
 932                 for(var i=0; i<l; ++i){\r
 933                         if( nodesA[ i]){\r
 934                                 nodesA[ i].className = VIEW_ID_ARRAY[ i] === currentID ? 'current' : '';\r
 935                         }\r
 936                 }\r
 937                 \r
 938                 if( !pettanr.view || pettanr.view.init !== undefined) return;\r
 939                 currentView = pettanr[ currentID];\r
 940                 if( !currentView) return;\r
 941                 typeof currentView.onOpen === 'function' && currentView.onOpen();\r
 942                 setTimeout( onWindowResize, 0);\r
 943         }\r
 944         return {\r
 945                 init: function( _funcArray){\r
 946                         funcArray = _funcArray;\r
 947                         jqWindow = pettanr.jqWindow();\r
 948                         jqWindow.resize( onWindowResize);\r
 949                         \r
 950                         currentView = currentView || pettanr[ currentID];\r
 951                         currentView && typeof currentView.onOpen === 'function' && currentView.onOpen();\r
 952                         \r
 953                         setTimeout( onWindowResize, 100);\r
 954                         \r
 955                         delete pettanr.view.init;\r
 956                 },\r
 957                 show: function( _viewID){\r
 958                         if( typeof _viewID === 'number' && _viewID < VIEW_ID_ARRAY.length){\r
 959                                 _viewID = VIEW_ID_ARRAY[ _viewID];\r
 960                         } else\r
 961                         if( typeof _viewID === 'string'){\r
 962                                 _viewID = _viewID;\r
 963                         } else {\r
 964                                 _viewID = HOME_ID;\r
 965                         }\r
 966                         for( var key in pettanr.view){\r
 967                                 if( pettanr.view[ key] === _viewID){\r
 968                                         if( currentID !== _viewID && document.getElementById( _viewID)){\r
 969                                                 this.currentID = currentID = _viewID;\r
 970                                                 show();\r
 971                                         }\r
 972                                         return;\r
 973                                 }\r
 974                         }\r
 975                         alert( _viewID);\r
 976                 },\r
 977                 currentID:      currentID,\r
 978                 HOME:           HOME_ID,\r
 979                 COMICS:         VIEW_ID_ARRAY[ 1],\r
 980                 IMAGES:         VIEW_ID_ARRAY[ 2],\r
 981                 SETTING:        VIEW_ID_ARRAY[ 3],\r
 982                 DEBUG:          VIEW_ID_ARRAY[ 4],\r
 983                 EDITOR:         'editor',\r
 984                 OVERLAY:        'overlay'\r
 985         }\r
 986 })();\r
 987 \r
 988 pettanr.overlay = ( function(){\r
 989         var SHADOW_OPACITY = 0.5,\r
 990                 jqConteiner, jqShadow, jqCloseButton,// jqBody, \r
 991                 currentOverlay = null,\r
 992                 visible = false,\r
 993                 windowW, windowH;\r
 994 \r
 995 \r
 996         var IMAGE_GROUP_EXPROLER = ( function(){\r
 997                 var ICON_ARRAY = [],\r
 998                         WHEEL_DELTA = 64,\r
 999                         containerW, containerH, wrapX,\r
1000                         jqWrap, jqContainer, jqItemOrigin,\r
1001                         itemW, itemH,\r
1002                         jqName, jqButton, buttonW,\r
1003                         folder, onUpdateFunction,\r
1004                         winW,\r
1005                         onEnterInterval = null;\r
1006                 \r
1007                 var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/images/' : 'images/',\r
1008                         THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
1009                         LIMIT_FILESIZE = 1024 * 10; // 10KB\r
1010                 var IMAGE_DATA = 0;\r
1011                 \r
1012                 var ImageGroupIconClass = function( INDEX, data){\r
1013                         var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
1014                                 SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
1015                                 LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
1016                                 reversibleImage = null,\r
1017                                 actualW, actualH,\r
1018                                 onEnterFlag = false;\r
1019                         JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
1020                         jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
1021                         \r
1022                         function onLoad( url, _imgW, _imgH){\r
1023                                 if( reversibleImage === null) {\r
1024                                         alert( url);\r
1025                                         return;\r
1026                                 }\r
1027                                 actualW = _imgW || 64;\r
1028                                 actualH = _imgH || 64;\r
1029                                 JQ_ICON_WRAP.children( 'div').eq( 1).html( actualW +'x' +actualH);\r
1030                                 var zoom = 128 /( actualW > actualH ? actualW : actualH),\r
1031                                         _h = Math.floor( actualH *zoom),\r
1032                                         _w = Math.floor( actualW *zoom);\r
1033                                 reversibleImage.elm.style.width = _w +'px';\r
1034                                 reversibleImage.elm.style.height = _h +'px';\r
1035                                 reversibleImage.elm.style.margin = Math.floor( itemH /2 -_h /2)+'px 0 0';\r
1036                                 reversibleImage.resize( _w, _h);\r
1037                                 JQ_ICON_WRAP.click( onClick);\r
1038                         }\r
1039                         \r
1040                         function onClick( e){\r
1041                                 pettanr.overlay.hide();\r
1042                                 if (onUpdateFunction) {\r
1043                                         if( LOW_SRC === null){\r
1044                                                 onUpdateFunction( SRC, actualW, actualH);\r
1045                                         } else {\r
1046                                                 onCloseUpdate( onUpdateFunction); // close()で値が消えるので、クロージャに保持\r
1047                                         }\r
1048                                 }\r
1049                                 close();                                \r
1050                         }\r
1051                         \r
1052                         function onCloseUpdate( onUpdate){\r
1053                                 pettanr.util.loadImage( SRC,\r
1054                                         function( _abspath, imgW, imgH){\r
1055                                                 onUpdate( SRC, imgW, imgH);\r
1056                                                 onUpdate = null;\r
1057                                         },\r
1058                                         function( _abspath){\r
1059                                                 onUpdate( SRC, data.width || 64, data.height || 64);\r
1060                                                 onUpdate = null;\r
1061                                         }\r
1062                                 );\r
1063                         }\r
1064                         \r
1065                         return {\r
1066                                 onEnter: function(){\r
1067                                         if( onEnterFlag === true) return;\r
1068                                         reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onLoad);\r
1069                                         JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
1070                                         onEnterFlag = true;                             \r
1071                                 },\r
1072                                 destroy: function(){\r
1073                                         reversibleImage && reversibleImage.destroy();\r
1074                                         JQ_ICON_WRAP.remove();\r
1075                                         reversibleImage = JQ_ICON_WRAP = null;\r
1076                                         delete this.destroy;\r
1077                                 }\r
1078                         }\r
1079                 }\r
1080                 \r
1081                 function close(){\r
1082                         jqContainer.stop().animate( {\r
1083                                         height: 0,\r
1084                                         top:    Math.floor( windowH /2)\r
1085                                 }, function(){\r
1086                                         jqWrap.hide()\r
1087                                 });\r
1088                         while( ICON_ARRAY.length > 0){\r
1089                                 ICON_ARRAY.shift().destroy();\r
1090                         }\r
1091                         onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
1092                         onUpdateFunction = onEnterInterval = null;\r
1093                 }\r
1094                 function onEnterShowImage(){\r
1095                         var l = ICON_ARRAY.length,\r
1096                                 _start = -wrapX /itemW -1,\r
1097                                 _end = _start + winW /itemW +1;\r
1098                         for( var i=0; i<l; ++i){\r
1099                                 _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
1100                         }\r
1101                         onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
1102                         onEnterInterval = null;\r
1103                 }\r
1104                 function onCloseClick(){\r
1105                         pettanr.overlay.hide();\r
1106                         // onUpdateFunction && onUpdateFunction( textElement);\r
1107                         close();\r
1108                 }\r
1109                 function onMouseWheel( e, delta){\r
1110                         if( winW < containerW){\r
1111                                 wrapX += delta *WHEEL_DELTA;\r
1112                                 wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
1113                                 jqContainer.css( { left: wrapX});\r
1114                                 \r
1115                                 onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
1116                                 onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
1117                         }\r
1118                         //e.stopPropagation();\r
1119                         return false;                   \r
1120                 }\r
1121                 return {\r
1122                         init: function(){\r
1123                                 this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
1124                                 jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);\r
1125                                 containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;\r
1126                                 jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
1127                                 var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));\r
1128                                 itemW = itemSize.width;\r
1129                                 itemH = itemSize.height;\r
1130                                 jqName = $( '#gruop-name-display');\r
1131                                 jqButton = $( '#image-gruop-button').click( onCloseClick);\r
1132                                 buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
1133                                 \r
1134                                 delete IMAGE_GROUP_EXPROLER.init;\r
1135                         },\r
1136                         jqWrap: null,\r
1137                         show: function( _folder, _onUpdateFunction){\r
1138                                 this.init !== undefined && this.init();\r
1139                                 \r
1140                                 folder = _folder;\r
1141                                 onUpdateFunction = _onUpdateFunction;\r
1142                                 pettanr.overlay.show( this);\r
1143                                 \r
1144                                 var l = _folder.getChildFileLength();\r
1145                                 for( var i=0; i<l; ++i){\r
1146                                         ICON_ARRAY.push( new ImageGroupIconClass( i, _folder.getChildFileByIndex( i)));\r
1147                                 }\r
1148                                 wrapX = 0;\r
1149                                 containerW = l * itemW;\r
1150                                 \r
1151                                 winW = windowW;\r
1152                                 var w = winW > containerW ? winW : containerW,\r
1153                                         h = windowH > containerH ? containerH : windowH;\r
1154                                 \r
1155                                 jqWrap.show();\r
1156                                 jqContainer.css( {\r
1157                                         width:          w,\r
1158                                         height:         0,\r
1159                                         left:           0,\r
1160                                         top:            Math.floor( windowH /2)\r
1161                                 }).stop().animate( {\r
1162                                         height:         h,\r
1163                                         top:            Math.floor( windowH /2 -h /2)\r
1164                                 });\r
1165                                 \r
1166                                 jqButton.css( {\r
1167                                         left:           Math.floor( winW /2 -buttonW /2),\r
1168                                         top:            Math.floor( windowH /2 +containerH /2 +10)\r
1169                                 });\r
1170                                 \r
1171                                 onEnterShowImage();\r
1172                         },\r
1173                         onWindowResize: function( _windowW, _windowH){\r
1174                                 var w = _windowW > containerW ? _windowW : containerW,\r
1175                                         h = _windowH > containerH ? containerH : _windowH,\r
1176                                         offsetW = Math.floor( _windowW /2 -winW /2);\r
1177                                 winW = _windowW;\r
1178                                 if( offsetW <= 0){ // smaller\r
1179                                         jqContainer.css( {\r
1180                                                 left:                           offsetW,\r
1181                                                 width:                          w\r
1182                                         }).animate( {\r
1183                                                 left:                           0,\r
1184                                                 top:                            Math.floor( _windowH /2 -h /2)\r
1185                                         });                                     \r
1186                                 } else {\r
1187                                         jqContainer.css( { // bigger\r
1188                                                 left:                           0,\r
1189                                                 width:                          w,\r
1190                                                 borderLeftWidth:        offsetW\r
1191                                         }).animate( {\r
1192                                                 top:                            Math.floor( _windowH /2 -h /2),\r
1193                                                 borderLeftWidth:        0\r
1194                                         });\r
1195                                 }\r
1196                                 jqButton.css( {\r
1197                                         left:           Math.floor( _windowW /2 -buttonW /2),\r
1198                                         top:            Math.floor( _windowH /2 +containerH /2 +10)\r
1199                                 });\r
1200                                 onEnterShowImage();\r
1201                         },\r
1202                         onClose: close,\r
1203                         ID: 'imageGroupExproler'\r
1204                 }\r
1205         })();\r
1206         /*\r
1207          * \r
1208          */\r
1209 \r
1210         function close(){\r
1211                 currentOverlay && currentOverlay.onClose && currentOverlay.onClose();\r
1212                 pettanr.overlay.hide();         \r
1213         }\r
1214         function asyncResize(){\r
1215                 currentOverlay.onWindowResize( windowW, windowH);\r
1216         }\r
1217         function onCloseClick( e){\r
1218                 close();\r
1219                 e.preventDefault();\r
1220                 return false;           \r
1221         }\r
1222         return {\r
1223                 init: function(){\r
1224                         //jqBody = pettanr.jqBody();\r
1225                         jqConteiner = $( '#overlay-container');\r
1226                         jqShadow = $( '#overlay-shadow');\r
1227                         jqCloseButton = $( '#overlay-close-button').click( onCloseClick);\r
1228                         \r
1229                         pettanr.key.addKeyDownEvent( pettanr.view.OVERLAY, 27, false, false, close); // 27.esc\r
1230                         \r
1231                         delete pettanr.overlay.init;\r
1232                 },\r
1233                 show: function( _currentOverlay){\r
1234                         if( visible === true && currentOverlay === _currentOverlay) return;\r
1235                         jqConteiner.stop().css( {\r
1236                                 filter:         '',\r
1237                                 opacity:        ''\r
1238                         }).fadeIn();\r
1239                         this.visible = visible = true;\r
1240                         currentOverlay = _currentOverlay;\r
1241                         this.currentID = _currentOverlay.ID;\r
1242                         jqCloseButton.toggle( !!_currentOverlay.onClose);\r
1243                 },\r
1244                 hide: function(){\r
1245                         currentOverlay = null;\r
1246                         if( visible === false) return;\r
1247                         jqConteiner.stop().css( {\r
1248                                 filter:         '',\r
1249                                 opacity:        ''\r
1250                         }).fadeOut();\r
1251                         this.visible = visible = false;\r
1252                         this.currentID = null;\r
1253                 },\r
1254                 visible: visible,\r
1255                 currentID: null,\r
1256                 onWindowResize: function( _windowW, _windowH){\r
1257                         jqConteiner.css( { height:      _windowH});\r
1258                         jqShadow.css( { height: _windowH});\r
1259                         windowW = _windowW;\r
1260                         windowH = _windowH;\r
1261                         // 先にeditorのcanvasを確定する。\r
1262                         currentOverlay && currentOverlay.onWindowResize && setTimeout( asyncResize, 0);\r
1263                 }\r
1264         }\r
1265 })();\r
1266 \r
1267 /* ----------------------------------------\r
1268  * KEY\r
1269  * \r
1270  *  - EDITABLE_TEXT_CONTROL\r
1271  * \r
1272  *    .SHIFT_DOWN_EVENT:        'shiftDown',\r
1273  *    .SHIFT_UP_EVENT:          'shiftUp',\r
1274  *    .CTRL_DOWN_EVENT:         'ctrlDown',\r
1275  *    .CTRL_UP_EVENT:           'ctrlUp',\r
1276  *    .SPACE_DOWN_EVENT:        'spaceDown',\r
1277  *    .SPACE_UP_EVENT:          'spaceUp',\r
1278  *    .init:                            function,\r
1279  *    .addKeyDownEvent:         function,\r
1280  *    .keyEventDispatcher:      function,\r
1281  * \r
1282  * ショートカットキーの監視とテキスト入力(input, textarea)、チェックボックスを管理する。\r
1283  * キー入力はdocumentで受けて、テキスト編集中(input, textarea)はそちらにキーイベント流す。\r
1284  * \r
1285  */\r
1286 pettanr.key = ( function(){\r
1287         var log,\r
1288                 jqWindow,\r
1289                 keyOperationChatcher,\r
1290                 KEYEVENT_ARRAY = [],\r
1291                 shiftEnabled = false,\r
1292                 ctrlEnabled = false;\r
1293         \r
1294         function keyHit( e){\r
1295                 log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey, e.type].join( ','));\r
1296                 //keyOperationChatcher.val( '');\r
1297                 var cancel = false,\r
1298                         callback = e.type,\r
1299                         key = e.keyCode,\r
1300                         overlayEnabled = pettanr.overlay.visible === true,\r
1301                         currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;\r
1302                 if( callback === 'keypress') callback = 'keydown';\r
1303                 if( pettanr.form.keyEventRellay( e) === false){\r
1304                         var shift = e.shiftKey,\r
1305                                 ctrl = e.ctrlKey,\r
1306                                 l = KEYEVENT_ARRAY.length,\r
1307                                 d;\r
1308                         if( key === 16 || e.shiftKey === true){\r
1309                                 shiftEnabled = callback !== 'keyup';\r
1310                         }\r
1311                         if( key === 17 || e.ctrlKey === true){\r
1312                                 ctrlEnabled = callback !== 'keyup';\r
1313                         }\r
1314 \r
1315                         for( var i=0; i<l; i++){\r
1316                                 d = KEYEVENT_ARRAY[ i];\r
1317                                 if( (\r
1318                                                 d.viewID === currentViewID ||\r
1319                                                         ( overlayEnabled === true && d.viewID === pettanr.view.OVERLAY)\r
1320                                         ) &&\r
1321                                         d.keyCode === key &&\r
1322                                         ( d.shift === undefined || d.shift === shift) &&\r
1323                                         ( d.ctrl === undefined || d.ctrl === ctrl)\r
1324                                 ){\r
1325                                         ( function( func, e){\r
1326                                                 func && setTimeout( function(){\r
1327                                                         func( e);\r
1328                                                         func = e = null;\r
1329                                                 }, 0);\r
1330                                         })( d[callback], e);\r
1331                                         cancel = true;\r
1332                                 }\r
1333                         }\r
1334                 }\r
1335                 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
1336                         e.preventDefault();\r
1337                 e.keyCode = 0;\r
1338                 e.cancelBubble = true;\r
1339                 e.returnValue = false;\r
1340                         return false;\r
1341                 }\r
1342         }\r
1343         \r
1344         var keyPress = pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? ( function( e){\r
1345                         var key = e.keyCode;\r
1346                         if( key === 13 || key === 27){\r
1347                                 keyHit( e);\r
1348                                 return false;\r
1349                         }\r
1350         }) : null;\r
1351         \r
1352         return {\r
1353                 init: function(){\r
1354                         log = $( '#key-event-log').html( 'ready');\r
1355 \r
1356                         jqWindow = pettanr.jqWindow().focus();\r
1357                         keyOperationChatcher = pettanr.jqDocument()\r
1358                                 .keydown( keyHit)\r
1359                                 .keyup( keyHit)\r
1360                                 .mouseenter( function(){\r
1361                                         jqWindow.focus();\r
1362                                 });\r
1363                         keyPress && keyOperationChatcher.keypress( keyPress);\r
1364 \r
1365                         delete pettanr.key.init;\r
1366                 },\r
1367                 addKeyDownEvent: function( _viewID, _keyCode, _shift, _ctrl, _callbackFunction){\r
1368                         KEYEVENT_ARRAY.push( {\r
1369                                 viewID:                 _viewID,\r
1370                                 keyCode:                _keyCode,\r
1371                                 shift:                  _shift,\r
1372                                 ctrl:                   _ctrl,\r
1373                                 keydown:                _callbackFunction\r
1374                         });\r
1375                 },\r
1376                 addKeyUpdateEvent: function( _viewID, _keyCode, _shift, _ctrl, _callbackFunction){\r
1377                         KEYEVENT_ARRAY.push( {\r
1378                                 viewID:         _viewID,\r
1379                                 keyCode:        _keyCode,\r
1380                                 shift:          _shift,\r
1381                                 ctrl:           _ctrl,\r
1382                                 keydown:        _callbackFunction,\r
1383                                 keyup:          _callbackFunction\r
1384                         });\r
1385                 },\r
1386                 addCursorEvent: function( _viewID, _shift, _ctrl, _callbackFunction){\r
1387                         \r
1388                 },\r
1389                 keyEventDispatcher: function(){\r
1390                         return keyOperationChatcher;\r
1391                 },\r
1392                 shiftEnabled: function(){\r
1393                         return shiftEnabled;\r
1394                 },\r
1395                 ctrlEnabled: function(){\r
1396                         return ctrlEnabled;\r
1397                 }\r
1398         }\r
1399 })();\r
1400 \r
1401 /*\r
1402  * pettanr.form\r
1403  * \r
1404  * keyEventRellay\r
1405  *  form -> overlay -> view\r
1406  * \r
1407  */\r
1408 pettanr.form = ( function(){\r
1409         var     FORM_GROUP_TABLE = {},\r
1410                 currentID = null,\r
1411                 currentItem = null,\r
1412                 ELM_A_ORIGIN = ( function(){\r
1413                         var ret = document.createElement( 'a');\r
1414                         ret.href = '#';\r
1415                         return ret;\r
1416                 })(),\r
1417                 ELM_INPUT_TEXT = ( function(){\r
1418                         var ret = document.createElement( 'input');\r
1419                         ret.type = 'text';\r
1420                         return ret;\r
1421                 })();\r
1422                 \r
1423         var InputTextClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater){\r
1424                 validater = typeof validater === 'function' ? validater : null;\r
1425                 \r
1426                 var elmValue = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'editable-value')[ 0],\r
1427                         value,\r
1428                         index = GROUP_ID ? FORM_GROUP_TABLE[ GROUP_ID].length : -1,\r
1429                         instance,\r
1430                         focus = false,\r
1431                         visible = true,\r
1432                         enabled = true,\r
1433                         elmA = ELM_A_ORIGIN.cloneNode( true);\r
1434                 \r
1435                 if( elmValue === undefined){\r
1436                         alert( 'error!');\r
1437                 }\r
1438                 value = elmValue.innerHTML;\r
1439                 elmValue.innerHTML = '';\r
1440                 elmValue.className += ' editable-text';\r
1441                 \r
1442                 elmA.innerHTML = value;\r
1443                 elmValue.appendChild( elmA);\r
1444                 WRAPPER_ELM.onclick = onClick;\r
1445                 \r
1446                 function onClick( e){\r
1447                         focus = true;\r
1448                         start( instance);\r
1449                         elmA.style.display = 'none';\r
1450                         elmValue.appendChild( ELM_INPUT_TEXT);\r
1451                         ELM_INPUT_TEXT.value = value;\r
1452                         ELM_INPUT_TEXT.focus();\r
1453                         ELM_INPUT_TEXT.select();\r
1454                         e && e.preventDefault();\r
1455                         return false;\r
1456                 }\r
1457                 \r
1458                 return {\r
1459                         init: function(){\r
1460                                 instance = this;\r
1461                                 delete this.init;\r
1462                         },\r
1463                         update: function( _value){\r
1464                                 if( _value !== undefined){\r
1465                                         elmA.innerHTML = _value;\r
1466                                         value = _value;\r
1467                                         \r
1468                                         if( focus === true){\r
1469                                                 ELM_INPUT_TEXT.value = value;\r
1470                                         }\r
1471                                 }\r
1472                                 currentItem === instance && this.finish();\r
1473                         },\r
1474                         start: function(){\r
1475                                 onClick();\r
1476                         },\r
1477                         finish: function( keep){\r
1478                                 var _newValue = ELM_INPUT_TEXT.value,\r
1479                                         _validated = validater !== null ? '' + validater( _newValue) : _newValue;\r
1480                                 _newValue = keep !== true ? _validated : value;\r
1481 \r
1482                                 elmValue.removeChild( ELM_INPUT_TEXT);\r
1483                                 \r
1484                                 elmA.innerHTML = _newValue;\r
1485                                 elmA.style.display = 'block';\r
1486                                 \r
1487                                 ON_UPDATE_FUNCTION && _newValue !== value && ON_UPDATE_FUNCTION( _newValue, value);\r
1488                                 finish( instance);\r
1489                                 \r
1490                                 focus = false;\r
1491                         },\r
1492                         enabled: function(){\r
1493                                 return enabled;\r
1494                         },\r
1495                         visible: function( _visible){\r
1496                                 if( _visible === true){\r
1497                                         WRAPPER_ELM.style.display = '';\r
1498                                         visible = true;\r
1499                                 } else\r
1500                                 if( _visible === false){\r
1501                                         WRAPPER_ELM.style.display = 'none';\r
1502                                         visible = false;\r
1503                                 }\r
1504                                 return visible;\r
1505                         },\r
1506                         index : index,\r
1507                         groupID: GROUP_ID\r
1508                 }\r
1509         }\r
1510 \r
1511 \r
1512         function start( _currentItem){\r
1513                 currentItem !== _currentItem && currentItem && currentItem.finish();\r
1514                 currentItem = _currentItem;\r
1515         }\r
1516         function finish( _currentItem){\r
1517                 if( currentItem !== _currentItem) return;\r
1518                 currentItem = null;\r
1519         }\r
1520 \r
1521         function tabShift( _groupID, _index, _way){\r
1522                 var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID] || [],\r
1523                         l = GROUP_ARRAY.length,\r
1524                         i = _index +_way;\r
1525                 if( l < 2) return;\r
1526                 while( i !== _index){\r
1527                         i = i < 0 ?\r
1528                                 l -1 :\r
1529                                 i === l ? 0 : i; // 0 < i < l\r
1530                         if( GROUP_ARRAY[ i].enabled() === true && GROUP_ARRAY[ i].visible() === true) break;\r
1531                         i += _way;\r
1532                 }\r
1533                 if( i === _index) return;\r
1534                 setTimeout( GROUP_ARRAY[ i].start, 0);\r
1535         }\r
1536 \r
1537         return {\r
1538                 init: function(){},\r
1539                 focus: function(){\r
1540                         return currentItem !== null; \r
1541                 },\r
1542                 keyEventRellay: function( e){\r
1543                         if( e.type === 'keyup') return false;\r
1544                         if( currentItem === null) return false;\r
1545                         \r
1546                         var keyCode = e.keyCode;\r
1547                         if( keyCode === 13 || keyCode === 27 || keyCode === 9 || keyCode === 18 || e.altKey === true){ // 13.return 27.esc 9.tab 18.alt\r
1548                                 var _groupID = currentItem.groupID,\r
1549                                         _index = currentItem.index;\r
1550                                 currentItem.finish( keyCode === 27);\r
1551                                 keyCode === 9 && _groupID && tabShift( _groupID, _index, e.shiftKey === true ? -1 : 1);\r
1552                                 keyCode === 13 && _groupID && tabShift( _groupID, _index, 1);\r
1553                         }\r
1554                         return true;\r
1555                 },\r
1556                 createInputText: function( _elm, _onUpdate, _groupID, _validater){\r
1557                         if( typeof _groupID === 'string' && !FORM_GROUP_TABLE[ _groupID]){\r
1558                                 FORM_GROUP_TABLE[ _groupID] = [];\r
1559                         }\r
1560                         var ret = new InputTextClass( _elm, _onUpdate, _groupID, _validater);\r
1561                         ret.init();\r
1562                         _groupID && FORM_GROUP_TABLE[ _groupID].push( ret);\r
1563                         return ret;\r
1564                 },\r
1565                 createCheckBox: function(){\r
1566                         \r
1567                 },\r
1568                 createRadio: function(){\r
1569                         \r
1570                 },\r
1571                 createButton: function(){\r
1572                         \r
1573                 },\r
1574                 createListBox: function(){\r
1575                         \r
1576                 }\r
1577         }\r
1578 })();\r
1579 \r
1580 \r
1581 /* ----------------------------------------\r
1582  * Vector Support\r
1583  * \r
1584  *              __________\r
1585  *             /          \\r
1586  *            /            \\r
1587  *            |,startX,Y    |\r
1588  * tailX,Y - <              |\r
1589  *            |'endX,Y      |\r
1590  *            \            /\r
1591  *                 \__________/\r
1592  * \r
1593  * SVG\r
1594  * -----------------------\r
1595  * ie9, other modern browser\r
1596  * \r
1597  * XML\r
1598  * -----------------------\r
1599  * ie5.5-8\r
1600  * \r
1601  * 内部の角度計算は radian で統一したい。\r
1602  * 当初 vectorEnabled = true で一度書いてみる。\r
1603  * 駄目なら、代替のイメージのsrcの用意もここで担当。\r
1604  * 閲覧と編集両方で使う。\r
1605  * \r
1606  */\r
1607 pettanr.balloon = ( function() {\r
1608         var MIN_BALLOON_WIDTH = 30,\r
1609                 MIN_BALLOON_HEIGHT = 30,\r
1610                 TAIL_WIDTH = 6,\r
1611                 TAIL_HEIGHT = 10,\r
1612                 STROKE_WIDTH = 1.2,\r
1613                 PADDING_TOP = TAIL_HEIGHT,\r
1614                 PADDING_LEFT = TAIL_HEIGHT,\r
1615                 ACCURACY = 1, // 有効少数桁        \r
1616                 IS_VML = pettanr.ua.isIE === true && pettanr.ua.ieVersion < 9,\r
1617                 ELM_BALLOON_ORIGIN = ( function(){\r
1618                         var ret;\r
1619                         try {\r
1620                                 if( IS_VML === true){\r
1621                                         ret = document.createElement( 'DIV');\r
1622                                         var shape = document.createElement( 'v:shape');\r
1623                                         shape.coordorigin = "0,0";\r
1624                                         shape.strokecolor = "black";\r
1625                                         shape.strokeweight = STROKE_WIDTH;\r
1626                                         shape.fillcolor = "white";\r
1627                                         ret.appendChild( shape);\r
1628                                 } else {\r
1629                                         var kSVGNS = 'http://www.w3.org/2000/svg';\r
1630                                         ret = document.createElementNS( kSVGNS, 'svg');\r
1631                                         var path = document.createElementNS( kSVGNS, 'path');\r
1632                                         path.setAttribute( 'fill', "white");\r
1633                                         path.setAttribute( 'stroke', "black");\r
1634                                         path.setAttribute( 'strokeWidth', STROKE_WIDTH);\r
1635                                         ret.appendChild( path);\r
1636                                 }\r
1637                                 return ret;     \r
1638                         } catch( e){\r
1639                                 return null;\r
1640                         }\r
1641                 })(),\r
1642                 NUM_BALLOON_IMAGE = 24,\r
1643                 vectorEnabled = ELM_BALLOON_ORIGIN !== null && pettanr.URL_PARAMS.vector !== false;\r
1644         if( IS_VML === true && pettanr.ua.VML === false) vectorEnabled = false;\r
1645 \r
1646         var XBROWSER_BALLOON_CLASS = function( w, h, a){\r
1647                 var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true) : document.createElement( 'img'), // pettanr.imageに変更\r
1648                         path = balloonElm.getElementsByTagName( 'path')[ 0],\r
1649                         shape = balloonElm.getElementsByTagName( 'shape')[ 0],\r
1650                         cos = Math.cos, sin = Math.sin,\r
1651                         abs = Math.abs, pow = Math.pow,\r
1652                         round = Math.round,\r
1653                         floor = Math.floor,\r
1654                         TARGET = TAIL_WIDTH * TAIL_WIDTH,\r
1655                         DEG_TO_RAD = Math.PI / 180,\r
1656                         l = ',';\r
1657                 \r
1658                 draw( a, w, h);\r
1659                 \r
1660                 function draw( _a, _w, _h){\r
1661                         a = _a !== undefined ? _a : a;\r
1662                         w = _w !== undefined ? _w -PADDING_TOP *2 : w;\r
1663                         h = _h !== undefined ? _h -PADDING_LEFT *2 : h;\r
1664 \r
1665                         if( vectorEnabled === false){\r
1666                                 balloonElm.setAttribute( 'src', balloonUrlBuilder( a));\r
1667                                 return;\r
1668                         }\r
1669                         \r
1670                         var rx = w /2,\r
1671                                 ry = h /2,\r
1672                                 tailRad = a * DEG_TO_RAD,\r
1673                                 tailX = rx +( rx +TAIL_HEIGHT) * cos( tailRad),\r
1674                                 tailY = ry +( ry +TAIL_HEIGHT) * sin( tailRad),\r
1675                                 startX, startY, endX, endY;\r
1676                 /*\r
1677                  * tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
1678                  */\r
1679                         var startRad, endRad,\r
1680                                 _startX, _startY, _endX, _endY,\r
1681                                 tailDeg = 0, d;\r
1682                         \r
1683                         for( var i = 45; i > 0.01; i /= 2){\r
1684                                 d = ( tailDeg +i) /2;\r
1685                                 startRad = ( a +d) * DEG_TO_RAD;\r
1686                                 endRad = ( a -d) * DEG_TO_RAD;\r
1687                                 \r
1688                                 _startX = rx +cos( startRad) *rx;\r
1689                                 _startY = ry +sin( startRad) *ry;\r
1690                                 _endX = rx +cos( endRad) *rx;\r
1691                                 _endY = ry +sin( endRad) *ry;   //円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径\r
1692                                         \r
1693                                 if( pow( ( _startX -_endX), 2) + pow( ( _startY -_endY), 2) < TARGET){\r
1694                                         tailDeg += i;\r
1695                                         startX = _startX;\r
1696                                         startY = _startY;\r
1697                                         endX = _endX;\r
1698                                         endY = _endY;                                           \r
1699                                 }\r
1700                         }\r
1701 \r
1702                 /*\r
1703                  * \r
1704                  */                     \r
1705                         if( IS_VML === true){\r
1706                                 var _tailX = tailX *10,\r
1707                                         _tailY = tailY *10,\r
1708                                         __startX = startX *10,\r
1709                                         __startY = startY *10,\r
1710                                         __endX = endX *10,\r
1711                                         __endY = endY *10,\r
1712                                         __w = w *10,\r
1713                                         __h = h *10;\r
1714                                 \r
1715                                 shape.style.width = w +'px';\r
1716                                 shape.style.height = h +'px';\r
1717                                 shape.coordsize = [ __w, __h].join( l);\r
1718                                 shape.path = [\r
1719                                         ' ar ', 0, l, 0, l, __w, l, __h, l,\r
1720                                         round( __endX), l, round( __endY), l,\r
1721                                         round( __startX), l, round( __startY),\r
1722                                         ' l ', round( _tailX), l, round( _tailY),\r
1723                                         ' x e'\r
1724                                 ].join( '');\r
1725 \r
1726                                 balloonElm.style.marginTop =  _tailY < 0 ? floor( ( 60 +_tailY) /10) : 10;\r
1727                                 balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 +_tailX) /10) : 10;\r
1728                         } else {\r
1729                                 balloonElm.setAttribute( 'width', w +PADDING_LEFT *2);\r
1730                                 balloonElm.setAttribute( 'height', h +PADDING_TOP *2);\r
1731                                 path.setAttribute( 'd', [\r
1732                                         'M', cround( tailX + PADDING_LEFT), l, cround( tailY +PADDING_TOP),\r
1733                                         'L', cround( startX +PADDING_LEFT), l, cround( startY +PADDING_TOP),\r
1734                                         'A', rx, l, ry,\r
1735                                         '0 1 1',                        // flag\r
1736                                         cround( endX +PADDING_LEFT), l, cround( endY +PADDING_TOP),\r
1737                                         'z'\r
1738                                 ].join( ' '));\r
1739                         }\r
1740                         function cround( v, r){\r
1741                                 r = r || ACCURACY;\r
1742                                 return round( v *pow( 10.0, r)) /pow( 10.0, r);\r
1743                         }\r
1744                 }\r
1745                 \r
1746                 function balloonUrlBuilder( _a){\r
1747                         var d = 360 /NUM_BALLOON_IMAGE;\r
1748                         _a += 90 +d /2;\r
1749                         return [ 'system_pictures\/_w', _a < 360 -d /2 ? floor( _a /d) : 0, '.gif'].join( '');\r
1750                 }\r
1751                 return {\r
1752                         elm: balloonElm,\r
1753                         resize: draw,\r
1754                         angle: function( _a){\r
1755                                 _a !== undefined && _a !== a &&\r
1756                                         vectorEnabled === false ? balloonUrlBuilder( _a) : draw( _a);\r
1757                                 return a;\r
1758                         },\r
1759                         type: function( _type){\r
1760                                 //draw( _a);\r
1761                         },\r
1762                         getURL: function(){\r
1763                                 return balloonUrlBuilder( a);\r
1764                         },\r
1765                         destroy: function(){\r
1766                                 balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm);\r
1767                                 balloonElm = null;\r
1768                                 delete this.destroy;\r
1769                         }\r
1770                 }\r
1771         };\r
1772         \r
1773         IS_VML === false && vectorEnabled === true && ( function(){\r
1774                 var detect = XBROWSER_BALLOON_CLASS.apply( {}, [ 100, 100, 0]),\r
1775                         size = pettanr.util.getElementSize( detect.elm);\r
1776                 vectorEnabled = size.width !== 0 && size.height !== 0;\r
1777                 detect.destroy();\r
1778                 detect = size = null;\r
1779         })();\r
1780 \r
1781         return {\r
1782             createBalloon: function( _w, _h, _a){\r
1783                 return XBROWSER_BALLOON_CLASS.apply( {}, [ _w, _h, _a]);\r
1784             },\r
1785                 TYPE_NONE:                              0,\r
1786                 TYPE_SPEACH_BALLOON:    1,\r
1787                 TYPE_THINKING:                  2,\r
1788                 TYPE_BOM:                               3,\r
1789                 TYPE_BLACK_BOX:                 4,\r
1790                 TYPE_BLUE_BOX:                  5\r
1791         }\r
1792 })();\r
1793 \r
1794 /* ----------------------------------------\r
1795  *  pettanr.image\r
1796  *  \r
1797  *   xBackendな画像反転、画像描画機能。\r
1798  *   \r
1799  *   画像の反転\r
1800  *     - css3\r
1801  *     - ActiveX (ie)\r
1802  *     - VML (ie)\r
1803  *     - canvas ??\r
1804  *     - flash(lite)\r
1805  *     - silverlight\r
1806  *     - pettan server\r
1807  *   \r
1808  *   png画像の表示(アルファpngをサポートしないie6以下のため)\r
1809  *     - ActiveX\r
1810  *     - VML\r
1811  *     - flash(lite)\r
1812  *     - silverlight\r
1813  *     \r
1814  *     -moz-transform:scale( -1, -1);\r
1815  */\r
1816 pettanr.image = ( function(){\r
1817         var REG_PNG = /\.png?/i,\r
1818                 IS_CSS3 = 0,\r
1819                 IS_VML = 1,\r
1820                 IS_ACTIVEX = 2,\r
1821                 IS_CANVAS = 3,\r
1822                 IS_FLASH = 4,\r
1823                 IS_SILVERLIGHT = 5,\r
1824                 IS_SERVER = 6,\r
1825                 IS_ACTIVEX_SERVER = 7,\r
1826                 BACKEND = ( function(){\r
1827                         if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg){\r
1828                                 var rimg = pettanr.URL_PARAMS.rimg.toLowerCase();\r
1829                                 if( rimg === 'css3') return IS_CSS3;\r
1830                                 if( rimg === 'activex') return IS_ACTIVEX;\r
1831                                 if( rimg === 'vml') return IS_VML;\r
1832                         }\r
1833                         if( pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 9) return IS_CSS3; // 不十分！\r
1834                         if( pettanr.ua.VML === true) return IS_VML;\r
1835                         if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX;\r
1836                         if( pettanr.FLASH === true) return IS_FLASH;\r
1837                         if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
1838                         return IS_SERVER;\r
1839                 })(),\r
1840                 BACKEND_WHEN_PNG = ( function(){\r
1841                         if( pettanr.ua.isIE === false || pettanr.ua.ieVersion > 6) return BACKEND;\r
1842                         if( pettanr.ua.VML === true) return IS_VML;\r
1843                         if( pettanr.FLASH === true) return IS_FLASH;\r
1844                         if( pettanr.SILVERLIGHT === true) return IS_SILVERLIGHT;\r
1845                         if( pettanr.ua.ACTIVEX === true) return IS_ACTIVEX_SERVER;\r
1846                         return IS_SERVER;\r
1847                 })(),\r
1848                 ReversibleImageClass,\r
1849                 ReversibleImageClassWithPingfix;\r
1850         \r
1851         var XBackendReversibleImageClass = ( function(){\r
1852                 var CLASS_NAME = 'reversible-image-container',\r
1853                         CLASS_NAME_LOADING = CLASS_NAME + ' loading',\r
1854                         CLASS_NAME_ERROR = CLASS_NAME +' error',\r
1855                         RETRY_DELAY = 5000;\r
1856                         NUM_RETRY = 3;\r
1857                 \r
1858                 var css3Image = function( url, w, h, onLoadCallback){\r
1859                         var elmWrap = document.createElement( 'div'),\r
1860                                 elmImg,\r
1861                                 loaded = false,\r
1862                                 retryTimer = null;\r
1863                         elmWrap.className = CLASS_NAME_LOADING;\r
1864                         pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
1865                         function onLoad( _url, _actualW, _actualH){\r
1866                                 if( elmWrap === null) return;\r
1867                                 elmImg = new Image;\r
1868                                 /*\r
1869                                  * createElement 直後に append しないと、ie(ActiveX)で img が正しく表示されない．\r
1870                                  */\r
1871                                 elmWrap.appendChild( elmImg);\r
1872                                 elmImg.setAttribute( 'src', url);\r
1873                                 elmWrap.className = CLASS_NAME;\r
1874                                 onLoadCallback && onLoadCallback( _url, _actualW, _actualH);\r
1875                                 onLoadCallback = null;\r
1876                                 loaded = true;\r
1877                                 resize( w, h);\r
1878                         }\r
1879                         function onError( _url){\r
1880                                 if( elmWrap === null) return;\r
1881                                 elmWrap.className = CLASS_NAME_ERROR;\r
1882                                 retryTimer = setTimeout( function(){\r
1883                                         elmWrap.className = CLASS_NAME_LOADING;\r
1884                                         pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
1885                                 }, RETRY_DELAY);\r
1886                         }\r
1887                         function resize( _w, _h){\r
1888                                 w = _w !== undefined ? _w : w;\r
1889                                 h = _h !== undefined ? _h : h;\r
1890                                 if( loaded === false) return;\r
1891                                 elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
1892                         }\r
1893                         return {\r
1894                                 elm : elmWrap,\r
1895                                 resize: resize,\r
1896                                 destroy: function(){\r
1897                                         loaded === true && elmWrap.removeChild( elmImg);\r
1898                                         retryTimer !== null && clearTimeout( retryTimer);\r
1899                                         elmWrap = vmlImg = onLoadCallback = retryTimer = null;\r
1900                                         elmWrap = elmImg = onLoadCallback = null;\r
1901                                         delete this.destroy;\r
1902                                 }\r
1903                         }\r
1904                 }\r
1905                 var activexImage = css3Image;\r
1906                 var vmlImage = function( url, w, h, onLoadCallback){\r
1907                         var elmWrap = document.createElement( 'div'),\r
1908                                 vmlImg,\r
1909                                 loaded = false,\r
1910                                 retryTimer = null;\r
1911                         elmWrap.className = CLASS_NAME_LOADING;\r
1912                         pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
1913                         function onLoad( _url, _actualW, _actualH){\r
1914                                 if( elmWrap === null) return;\r
1915                                 elmWrap.className = CLASS_NAME;\r
1916                                 vmlImg = document.createElement( 'v:image');\r
1917                                 vmlImg.src = url;\r
1918                                 loaded = true;\r
1919                                 resize( w, h);\r
1920                                 onLoadCallback && onLoadCallback( _url, _actualW, _actualH);\r
1921                                 onLoadCallback = null;\r
1922                         }\r
1923                         function onError( _url){\r
1924                                 if( elmWrap === null) return;\r
1925                                 elmWrap.className = CLASS_NAME_ERROR;\r
1926                                 retryTimer = setTimeout( function(){\r
1927                                         elmWrap.className = CLASS_NAME_LOADING;\r
1928                                         pettanr.util.loadImage( url, onLoad, onError, 100, 10000);\r
1929                                 }, RETRY_DELAY);\r
1930                         }\r
1931                         function resize( _w, _h){\r
1932                                 w = _w !== undefined ? _w : w;\r
1933                                 h = _h !== undefined ? _h : h;\r
1934                                 if( loaded !== true) return;\r
1935                                 vmlImg.style.width = w < 0 ? -w : w +'px';\r
1936                                 vmlImg.style.height = h < 0 ? -h : h +'px';\r
1937                                 //if( flipH !== _flipH || flipV !== _flipV){\r
1938                                         vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg);\r
1939                                 //}\r
1940                                         vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
1941                                         elmWrap.appendChild( vmlImg);\r
1942                         }\r
1943                         return {\r
1944                                 elm : elmWrap,\r
1945                                 resize: resize,\r
1946                                 destroy: function(){\r
1947                                         loaded === true && elmWrap.removeChild( vmlImg);\r
1948                                         retryTimer !== null && clearTimeout( retryTimer);\r
1949                                         elmWrap = vmlImg = onLoadCallback = retryTimer = null;\r
1950                                         delete this.destroy;\r
1951                                 }\r
1952                         }\r
1953                 }\r
1954                 var serverImage = function( url, w, h, onLoadCallback){\r
1955                         \r
1956                 }\r
1957                 \r
1958                 return function( url, w, h, onLoadCallback){\r
1959                                 var flipH = w < 0,\r
1960                                         flipV = h < 0,\r
1961                                         onLoadCallbackAsync = onLoadCallback,// ? function(){ setTimeout( onLoadCallback, 0);} : undefined,// 一度読み込んだ画像は即座にonLoadになるため遅延\r
1962                                         xBackendImage = ( function( urlIsXDomain){\r
1963                                                 if( BACKEND === IS_CSS3) return css3Image.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
1964                                                 if( BACKEND === IS_VML) return vmlImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
1965                                                 if( BACKEND === IS_ACTIVEX) return activexImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
1966                                                 return serverImage.apply( {}, [ url, w, h, onLoadCallbackAsync]);\r
1967                                         })();\r
1968                                 return {\r
1969                                         elm: xBackendImage.elm,\r
1970                                         w: function( _w){\r
1971                                                 _w !== undefined && xBackendImage.resize( _w, h);\r
1972                                                 return w;\r
1973                                         },\r
1974                                         h: function( _h){\r
1975                                                 _h !== undefined && xBackendImage.resize( w, _h);\r
1976                                                 return h;\r
1977                                         },\r
1978                                         resize: xBackendImage.resize,\r
1979                                         destroy: function(){\r
1980                                                 xBackendImage.destroy && xBackendImage.destroy();\r
1981                                                 xBackendImage = onLoadCallback = onLoadCallbackAsync = null;\r
1982                                                 delete this.destroy;\r
1983                                         }\r
1984                                 }\r
1985                         }\r
1986         })();\r
1987         return {\r
1988                 createReversibleImage: function( url, w, h, onLoadCallback){\r
1989                         return XBackendReversibleImageClass.apply( {}, [ url, w, h, onLoadCallback]);\r
1990                 }\r
1991         }\r
1992 })();\r
1993 \r
1994 /*\r
1995  * bind : 出版
1996  */\r
1997 pettanr.bind = ( function(){\r
1998         var BIND_WORKER_ARRAY = [],\r
1999                 NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',\r
2000                 RESOURCE_PICTURE_PATH = pettanr.CONST.RESOURCE_PICTURE_PATH,\r
2001                 ELM_DETECT_WIDTH = ( function(){\r
2002                         var ret = document.createElement( 'div');\r
2003                         ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';\r
2004                         return ret;\r
2005                 })();\r
2006 \r
2007         /*\r
2008          * original\r
2009          *   http://d.hatena.ne.jp/uupaa/20090720/1248097177\r
2010          */\r
2011         var ResizeAgentClass = function( onResizeFunction, opt_elmCheck){\r
2012                 var     _globalLock = 0,\r
2013                         _size = { w: 0, h: 0 };\r
2014                         _ie = !!document.all,\r
2015                         _quirks = (document.compatMode || "") !== "CSS1Compat",\r
2016                         _ieroot = _quirks ? "body" : "documentElement";\r
2017                         _root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);\r
2018 \r
2019                 function getInnerSize() {\r
2020                         return {\r
2021                                 w: _root.innerWidth  || _root.clientWidth,\r
2022                                 h: _root.innerHeight || _root.clientHeight\r
2023                         };\r
2024                 }\r
2025 \r
2026                 function loop() {\r
2027                         if (!_globalLock++) {\r
2028                                 var size = getInnerSize();\r
2029                                 if (_size.w !== size.w || _size.h !== size.h) { // resized\r
2030                                         _size = size; // update\r
2031                                         onResizeFunction( _size);\r
2032                                 }\r
2033                                 setTimeout( unlock, 0); // delay unlock\r
2034                         }\r
2035                         setTimeout(loop, 500);\r
2036                 }\r
2037                 function unlock(){\r
2038                         _globalLock = 0;\r
2039                 }\r
2040                 loop();\r
2041         }\r
2042         \r
2043         \r
2044         var ElementBuilder = ( function(){\r
2045                 var ELM_TITLE_ORIGN = ( function(){\r
2046                                 \r
2047                         })(),\r
2048                         ELM_TEXT_ORIGN = ( function(){\r
2049                                 var _table = document.createElement( 'table'),\r
2050                                         _tr = document.createElement( 'tr');\r
2051                                 _table.appendChild( _tr);\r
2052                                 _tr.appendChild( document.createElement( 'td'));\r
2053                                 _table.cellspacing = '0';\r
2054                                 return _table;\r
2055                         })();\r
2056                 \r
2057                 function buildComicElement(){\r
2058                         \r
2059                 }\r
2060                 \r
2061                 function buildPanelElement( elmTarget, json, noClassnameMode){\r
2062                         var _elmPanel = document.createElement( 'div'),\r
2063                                 _style = {\r
2064                                                 "border-width":         typeof json.border === 'number' ? json.border + 'px' : 0,\r
2065                                                 width:                          json.width + 'px',\r
2066                                                 height:                         json.height + 'px'\r
2067                                 },\r
2068                                 _cssText = [],\r
2069                                 _comicElements = json.panel_elements || [],\r
2070                                 _comicElement, _elmImgWrap, _rImg, _rPic, _balloon, _elmBalloonWrap, _elmText;\r
2071                         if( noClassnameMode === true){\r
2072                                 \r
2073                         } else {\r
2074                                 _elmPanel.className = NAMESPACE_CLASSNAME + 'panel';\r
2075                         }\r
2076                         for( var _key in _style){\r
2077                                 _cssText.push( _key + ':' + _style[ _key]);\r
2078                         }\r
2079                         _elmPanel.style.cssText = _cssText.join( ';');\r
2080                         elmTarget.appendChild( _elmPanel);\r
2081                         \r
2082                         for( var i=0, l=_comicElements.length; i<l; ++i){\r
2083                                 _comicElement = _comicElements[ i];\r
2084                                 if( _comicElement.resource_picture){\r
2085                                         _rPic = _comicElement.resource_picture || {};\r
2086                                         _rImg = pettanr.image.createReversibleImage(\r
2087                                                         [ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext].join( ''),\r
2088                                                         _comicElement.width, _comicElement.height\r
2089                                                 );\r
2090                                         _elmImgWrap = document.createElement( 'div');\r
2091                                         _elmPanel.appendChild( _elmImgWrap);\r
2092                                         _elmImgWrap.appendChild( _rImg.elm);\r
2093                                         _elmImgWrap.className = NAMESPACE_CLASSNAME + 'image';\r
2094                                         _elmImgWrap.style.cssText = [\r
2095                                                 'width:', Math.abs( _comicElement.width), 'px;',\r
2096                                                 'height:', Math.abs( _comicElement.height), 'px;',\r
2097                                                 'left:', _comicElement.x, 'px;',\r
2098                                                 'top:', _comicElement.y, 'px;',\r
2099                                                 'z-index:', _comicElement.z, ';'\r
2100                                         ].join( '');\r
2101                                 } else {\r
2102                                         _elmBalloonWrap = document.createElement( 'div');\r
2103                                         _elmPanel.appendChild( _elmBalloonWrap);\r
2104                                         _elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';\r
2105                                         _elmBalloonWrap.style.cssText = [\r
2106                                                 'width:', _comicElement.width, 'px;',\r
2107                                                 'height:', _comicElement.height, 'px;',\r
2108                                                 'left:', _comicElement.x, 'px;',\r
2109                                                 'top:', _comicElement.y, 'px;',\r
2110                                                 'z-index:', _comicElement.z, ';'\r
2111                                         ].join( '');\r
2112 \r
2113                                         _balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail);\r
2114                                         _elmBalloonWrap.appendChild( _balloon.elm);\r
2115                                         \r
2116                                         _elmText = ELM_TEXT_ORIGN.cloneNode( true);\r
2117                                         _elmBalloonWrap.appendChild( _elmText);\r
2118                                         _elmText.className = NAMESPACE_CLASSNAME + 'speach';\r
2119                                         _elmText.getElementsByTagName( 'td')[ 0].appendChild( document.createTextNode( 'hello'));\r
2120                                 }\r
2121                         }\r
2122                 }\r
2123                 \r
2124                 return {\r
2125                         build: function( elmTarget, json, zoom, noClassnameMode){\r
2126                                 // clean elmTarget\r
2127                                 pettanr.util.removeAllChildren( elmTarget);\r
2128                                 \r
2129                                 // json is Comic ? Panel ?\r
2130                                 if( json.panels){\r
2131                                         // comic\r
2132                                         \r
2133                                 } else\r
2134                                 if( json.panel_elements){\r
2135                                         // panel\r
2136                                         buildPanelElement( elmTarget, json, noClassnameMode);\r
2137                                 } else {\r
2138                                         // invalid json\r
2139                                 }\r
2140                         }\r
2141                 }\r
2142         })();\r
2143         \r
2144         var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode){\r
2145                 typeof json === 'object' && build( elmTarget, json);\r
2146                 \r
2147                 var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false)\r
2148                 \r
2149                 if( zoomSelfEnabled === true){\r
2150                         elmTarget.parentNode.insertBefore( elmDetectW, elmTarget);\r
2151                         new ResizeAgentClass( onResize, elmDetectW);\r
2152                 }\r
2153                 function onResize(){\r
2154                         \r
2155                 }\r
2156                 json && ElementBuilder.build( elmTarget, json, zoomSelfEnabled, noClassnameMode);\r
2157                 \r
2158                 return {\r
2159                         init: function(){\r
2160                                 \r
2161                         },\r
2162                         zoom: function(){\r
2163                                 \r
2164                         },\r
2165                         json: function( _json){\r
2166                                 json = _json;\r
2167                                 ElementBuilder.build( elmTarget, _json, zoomSelfEnabled, noClassnameMode);\r
2168                         },\r
2169                         targetElement: function(){\r
2170                                 \r
2171                         },\r
2172                         layput: function(){\r
2173                                 \r
2174                         },\r
2175                         destroy: function(){\r
2176                                 \r
2177                         }\r
2178                 }\r
2179         }\r
2180         \r
2181         return {\r
2182                 createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode){\r
2183                         var ret = new BindWorkerClass( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode);\r
2184                         BIND_WORKER_ARRAY.push( ret);\r
2185                         return ret;\r
2186                 },\r
2187                 isBindWorkerInstance: function( _bindWorker){\r
2188                         \r
2189                 }\r
2190         }\r
2191 })();\r
2192 \r
2193 var VisualEffect = ( function(){\r
2194         \r
2195         var ANIMATION_TICKET_ARRAY = [],\r
2196                 fpms = 50,\r
2197                 TIMER = null,\r
2198                 FILTER = 'filter',\r
2199                 OPACITY = 'opacity',\r
2200                 CORON = ':',\r
2201                 EMPTY = '',\r
2202                 SEMICORON = ';';\r
2203         \r
2204         function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames){\r
2205                 var _ticket;\r
2206                 for( var i=0, l=ANIMATION_TICKET_ARRAY.length; i<l; ++i){\r
2207                         _ticket = ANIMATION_TICKET_ARRAY[ i];\r
2208                         if( _ticket.elm === _elm) {\r
2209                                 _ticket.destroy();\r
2210                                 break;\r
2211                         }\r
2212                 }\r
2213                 //  coputedStyle と _cssObject を比較して , 一致及び非数は削除しつつ コピー\r
2214                 //\r
2215                 var _currentParameters = [],\r
2216                         _offsetParameters = [],\r
2217                         _endParameters = [],\r
2218                         _targetAttributes = [];\r
2219                 \r
2220                 ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(\r
2221                         _elm,\r
2222                         _currentParameters, _offsetParameters, _endParameters, _targetAttributes,\r
2223                         typeof _onComplete === 'function' ? _onComplete : null,\r
2224                         typeof _onEnterFrame === 'function' ? _onEnterFrame : null,\r
2225                         _numFrames\r
2226                 ));\r
2227                 \r
2228                 if( TIMER === null){\r
2229                         TIMER = window.setInterval( onEnterFrame, fpms);\r
2230                 }\r
2231         }\r
2232         function onEnterFrame(){\r
2233                 var _ticket,\r
2234                         i = 0;\r
2235                 while( i<ANIMATION_TICKET_ARRAY.length){\r
2236                         _ticket = ANIMATION_TICKET_ARRAY[ i];\r
2237                         if( _ticket.onEnterFrame() === true){\r
2238                                 _ticket.destroy();\r
2239                                 ANIMATION_TICKET_ARRAY.splice( i, 1);\r
2240                         } else {\r
2241                                 ++i;\r
2242                         }\r
2243                 }\r
2244                 if( ANIMATION_TICKET_ARRAY.length === 0){\r
2245                         window.clearInterval( TIMER);\r
2246                         TIMER = null;\r
2247                 }\r
2248         }\r
2249         function updateCss( _elm, _updateParameters, _targetAttributes, _numAttributes){\r
2250                 if( _numAttributes > 1){\r
2251                         var _cssTexts = _elm.style.cssText.split( ';'), _css,\r
2252                                 _separate,\r
2253                                 _cssObject = {}, _target, _value, _number, _type, _new,\r
2254                                 j;\r
2255                         for(var i=0, l=_cssTexts.length; i<l; ++i){\r
2256                                 _css = _cssTexts[ i];\r
2257                                 _separate = _css.indexOf( ':');\r
2258                                 if( _separate >= 3){\r
2259                                         _target = _css.substr( 0, _separate +1);\r
2260                                         _value = _css.substr( _separate +1);\r
2261                                         /*\r
2262                                          * ie filter
2263                                          */\r
2264                                         if( _target === FILTER){\r
2265                                                 for( j=0; j<_numAttributes; ++j){\r
2266                                                         if( _targetAttributes[ j] === OPACITY){\r
2267                                                                 \r
2268                                                                 \r
2269                                                                 \r
2270                                                                 break;\r
2271                                                         }\r
2272                                                 }\r
2273                                         /*\r
2274                                          * other
2275                                          */\r
2276                                         } else {\r
2277                                                 _number = '' + parseFloat( _value);\r
2278                                                 _type = _value.indexOf( _number);\r
2279                                                 _type = _type > 0 ? _value.substr( _type + _number.length) : '';\r
2280                                                 for( j=0; j<_numAttributes; ++j){\r
2281                                                         if( _targetAttributes[ j] === _target){\r
2282                                                                 _cssTexts[ i] = [ _target, ':', _updateParameters[ j], _type].join( '');\r
2283                                                                 break;\r
2284                                                         }\r
2285                                                 }                                               \r
2286                                         }\r
2287                                 }\r
2288                         }\r
2289                         _elm.style.cssText = _cssTexts.join( ';');\r
2290                         return; \r
2291                 }\r
2292                 /*\r
2293                  * 一度に update する Attributes が少ない場合、cssText は使用しない.
2294                  */\r
2295                 \r
2296         }\r
2297         \r
2298         var AnimationTaskClass = function( ELM, currentParameters, offsetParameters, endParameters, targetAttributes, onComplete, onEnterFrame, numFrames){\r
2299                 var l = targetAttributes.length;\r
2300                 return {\r
2301                         elm:    ELM,\r
2302                         onEnterFrame: function(){\r
2303                                 var _updateCss = {};\r
2304                                 if( numFrames === 1){\r
2305                                         for( var i=0; i<l; ++i){\r
2306                                                 _updateCss[ targetAttributes[ i]] = endParameters[ i];\r
2307                                                 ++i;\r
2308                                         }\r
2309                                         updateCss( ELM, currentParameters, targetAttributes, l);\r
2310                                         onComplete !== null && onComplete();\r
2311                                 } else {\r
2312                                         for( var i=0; i<l; ++i){\r
2313                                                 _updateCss[ targetAttributes[ i]] = currentParameters[ i] = Math.floor( currentParameters[ i] + offsetParameters[ i]);\r
2314                                                 ++i;\r
2315                                         }\r
2316                                         updateCss( ELM, currentParameters, targetAttributes, l);\r
2317                                         onEnterFrame !== null && onEnterFrame( _updateCss);\r
2318                                 }\r
2319                                 --numFrames;\r
2320                                 return numFrames === 0;\r
2321                         },\r
2322                         destroy: function(){\r
2323                                 ELM = onComplete = onEnterFrame = null;\r
2324                         }\r
2325                 }\r
2326         }\r
2327         \r
2328         var VisualEffectClass = function( ELM){\r
2329                 var isHtmlElement;\r
2330                 \r
2331                 function resisterAnime( _cssObject, _onComplete, _onEnterFrame, _time){\r
2332                         var _numFrames = Math.floor( _time / fpms);\r
2333                         startAnimation( ELM, _cssObject, _onComplete, _onEnterFrame, _numFrames);\r
2334                 }\r
2335                 function startFadeIn(){\r
2336                         \r
2337                 }\r
2338                 function startFadeOut(){\r
2339                         \r
2340                 }\r
2341                 function update( _x, _y, _w, _h){\r
2342                         var _cssText = ELM.style.cssText;\r
2343                         \r
2344                 }\r
2345                 \r
2346                 this.anime = resisterAnime;\r
2347                 this.fadeIn = startFadeIn;\r
2348                 this.fadeOut = startFadeOut;\r
2349                 this.update = update;\r
2350         }\r
2351         \r
2352         return {\r
2353                 createVisualEffect: function( _elm){\r
2354                         return new VisualEffectClass( _elm);\r
2355                 },\r
2356                 isInstanceOfVisualEffect: function( _instance){\r
2357                         return _instance instanceof VisualEffectClass;\r
2358                 }\r
2359         }\r
2360 })();\r
2361 \r
2362 \r
2363 \r
2364 /*\r
2365  *  Google Analytics\r
2366  */\r
2367 \r
2368 if( pettanr.LOCAL === false){\r
2369         var _gaq = _gaq || [];\r
2370         _gaq.push(['_setAccount', 'UA-28023955-1']);\r
2371         _gaq.push(['_trackPageview']);\r
2372         \r
2373         (function() {\r
2374                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
2375                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
2376                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
2377         })();   \r
2378 }