app/assets/javascripts/peta-common.js

   1 /*\r
   2  * pettanR peta.common.js\r
   3  *   version 0.5.41\r
   4  * \r
   5  *   author:\r
   6  *     itozyun\r
   7  *   licence:\r
   8  *     3-clause BSD\r
   9  */\r
  10 \r
  11 var pettanr = ( function(){\r
  12         var     IS_LOCAL = document.location.href.indexOf( 'file:') === 0,\r
  13                 URL_PARAMS = ( function(){\r
  14                         var search = document.location.search,\r
  15                                 l = search.length;\r
  16                     if( 1 < l){\r
  17                         var     query = search.substring( 1),\r
  18                                         params = query.split( '&'),\r
  19                                         ret = {}, elm, name, v;\r
  20                         while( params.length > 0){\r
  21                             elm = params.shift().split( '=');\r
  22                                         name = decodeURIComponent( elm[ 0 ]);\r
  23                                         if( elm.length === 2){\r
  24                                                 v = decodeURIComponent( elm[ 1]);\r
  25                                                 if( '' + parseFloat( v ) === v ) v = parseFloat( v );\r
  26                                                 if( '' + parseInt( v, 10 ) === '0' + v ) v = parseInt( v, 10 );\r
  27                                                 if( v === 'true' ) v = true;\r
  28                                                 if( v === 'false' ) v = false;\r
  29                                                 if( v === 'null' ) v = null;\r
  30                                                 if( v === 'undefined' ) v = undefined;\r
  31                                     ret[ name] = v;\r
  32                                         } else\r
  33                                         if( elm.length === 1){\r
  34                                                 ret[ name] = true;\r
  35                                         };\r
  36                                 };\r
  37                         return ret;\r
  38                     };\r
  39                     return {};\r
  40                 })(),\r
  41                 IS_DEBUG = Type.isBoolean( URL_PARAMS.debug ) ? URL_PARAMS.debug : IS_LOCAL === true;\r
  42         return {\r
  43                 version: '0.5.40',\r
  44                 URL_PARAMS: URL_PARAMS,\r
  45                 LOCAL: IS_LOCAL,\r
  46                 DEBUG: IS_DEBUG,\r
  47                 LINE_FEED_CODE_TEXTAREA: ( function(){\r
  48                         var text = document.createElement('textarea');\r
  49                         text.value = '\n';\r
  50                         return text.value;\r
  51                 })(),\r
  52                 LINE_FEED_CODE_PRE: ( function(){\r
  53                         var pre = document.createElement('pre');\r
  54                         pre.appendChild( document.createTextNode('\n'));\r
  55                         return pre.firstChild.data;\r
  56                 })()\r
  57         }\r
  58 })();\r
  59 \r
  60 pettanr.CONST = ( function(){\r
  61         var SERVER_SUPPORT    = !( 'has_server_support' in window && has_server_support === false ),\r
  62                 PETTANR_ROOT_PATH = ( function(){\r
  63                         if( SERVER_SUPPORT === false ){\r
  64                                 var h1 = document.getElementsByTagName( 'h1' )[ 0 ];\r
  65                                 if( h1 ){\r
  66                                         var a = h1.getElementsByTagName( 'a' )[ 0 ];\r
  67                                         return a ? a.href : '';\r
  68                                 }\r
  69                                 return '';\r
  70                         };\r
  71                         var loc = document.location;\r
  72                         return [ loc.protocol, '\/\/', loc.host, '\/' ].join( '' );\r
  73                 })(),\r
  74                 RELATIVE = ( function(){\r
  75                         if( PETTANR_ROOT_PATH === '' ) return '';\r
  76                         var ret  = '',\r
  77                                 loc  = document.location,\r
  78                                 path = [ loc.protocol, '\/', loc.host, '\/', loc.pathname.split( '\\' ).join( '\/' ) ].join( '' ),\r
  79                                 l    = path.split( '\/' ).length - PETTANR_ROOT_PATH.split( '\/' ).length;\r
  80                         for( var i=0; i<l; ++i ){\r
  81                                 ret += '..\/';\r
  82                         };\r
  83                         return ret;\r
  84                 })();\r
  85                 \r
  86         return {\r
  87                 PETTANR_ROOT_PATH:                      PETTANR_ROOT_PATH,\r
  88                 URL_ORIGINAL_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'original_pictures.json',\r
  89                 URL_RESOURCE_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'resource_pictures.json',\r
  90                 URL_MY_RESOURCE_PICTURES_JSON: ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/resource_picture.json',\r
  91                 URL_COMICS_JSON:                        ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'comics.json',\r
  92                 URL_MY_COMICS_JSON:                     ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/comic.json',\r
  93                 URL_PANELS_JSON:                        ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'panels.json',\r
  94                 URL_MY_PANELS_JSON:                     ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'home\/panel.json',\r
  95                 NS_PETTANR_COMIC:                       'pettanr-comic',\r
  96                 THUMBNAIL_PATH:             SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/thumbnail\/' : PETTANR_ROOT_PATH + 'resource_pictures\/',\r
  97                 RESOURCE_PICTURE_PATH:          SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/' : PETTANR_ROOT_PATH + 'resource_pictures\/full\/',\r
  98                 PANEL_PICTURE_PATH:                 SERVER_SUPPORT === false ? RELATIVE + 'resource_pictures\/' : PETTANR_ROOT_PATH + 'pictures\/',\r
  99                 SYSTEM_PICTURE_PATH:            ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'system_pictures\/',\r
 100                 CREATE_COMIC_JS:                        SERVER_SUPPORT === false ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',\r
 101                 CREATE_PANEL_JS:                        SERVER_SUPPORT === false ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',\r
 102                 UPLOAD_PICTURE_JS:                      SERVER_SUPPORT === false ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
 103                 REGISTER_ARTIST_JS:                     SERVER_SUPPORT === false ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',\r
 104                 SERVER_SUPPORT:                         SERVER_SUPPORT,\r
 105                 URL_PETA_APPS_CSS:                      ( SERVER_SUPPORT === false ? 'stylesheets' : '\/assets' ) + '\/peta.apps.css'\r
 106         }\r
 107 })();\r
 108 \r
 109 /* ----------------------------------------\r
 110  * Vector Support\r
 111  * \r
 112  *              __________\r
 113  *             /          \\r
 114  *            /            \\r
 115  *            |,startX,Y    |\r
 116  * tailX,Y - <              |\r
 117  *            |'endX,Y      |\r
 118  *            \            /\r
 119  *                 \__________/\r
 120  * \r
 121  * SVG\r
 122  * -----------------------\r
 123  * ie9, other modern browser\r
 124  * \r
 125  * XML\r
 126  * -----------------------\r
 127  * ie5.5-8\r
 128  * \r
 129  * 内部の角度計算は radian で統一したい。\r
 130  * 当初 vectorEnabled = true で一度書いてみる。\r
 131  * 駄目なら、代替のイメージのsrcの用意もここで担当。\r
 132  * 閲覧と編集両方で使う。\r
 133  * \r
 134  */\r
 135 pettanr.balloon = ( function() {\r
 136         var MIN_BALLOON_WIDTH  = 30,\r
 137                 MIN_BALLOON_HEIGHT = 30,\r
 138                 NUM_BALLOON_IMAGE  = 24,\r
 139                 TAIL_WIDTH         = 6,\r
 140                 TAIL_HEIGHT        = 10,\r
 141                 STROKE_WIDTH       = 1.2,\r
 142                 PADDING_TOP        = TAIL_HEIGHT,\r
 143                 PADDING_LEFT       = TAIL_HEIGHT,\r
 144                 IS_VML             = UA.isIE === true && UA.ieVersion < 9,\r
 145                 ELM_BALLOON_ORIGIN = ( function(){\r
 146                         var ret;\r
 147                         try {\r
 148                                 if( IS_VML === true){\r
 149                                         ret = document.createElement( 'DIV');\r
 150                                         var shape = document.createElement( 'v:shape');\r
 151                                         shape.coordorigin = "0,0";\r
 152                                         shape.strokecolor = "black";\r
 153                                         shape.strokeweight = STROKE_WIDTH;\r
 154                                         shape.fillcolor = "white";\r
 155                                         ret.appendChild( shape);\r
 156                                 } else {\r
 157                                         var kSVGNS = 'http://www.w3.org/2000/svg';\r
 158                                         // http://modernizr.com/downloads/modernizr.js\r
 159                                         // Thanks to Erik Dahlstrom\r
 160                                         if( !document.createElementNS || !document.createElementNS(kSVGNS, 'svg').createSVGRect ){\r
 161                                                 return null;\r
 162                                         };\r
 163                                         ret = document.createElementNS( kSVGNS, 'svg');\r
 164                                         var path = document.createElementNS( kSVGNS, 'path');\r
 165                                         path.setAttribute( 'fill', "white");\r
 166                                         path.setAttribute( 'stroke', "black");\r
 167                                         path.setAttribute( 'strokeWidth', STROKE_WIDTH);\r
 168                                         ret.appendChild( path );\r
 169                                 };\r
 170                                 return ret;     \r
 171                         } catch( e){\r
 172                                 return null;\r
 173                         }\r
 174                 })(),\r
 175                 vectorEnabled = ELM_BALLOON_ORIGIN !== null &&\r
 176                                                 pettanr.URL_PARAMS.vector !== false &&\r
 177                                                 !( IS_VML === true && UA.VML === false );\r
 178 \r
 179         var cos        = Math.cos,\r
 180                 sin        = Math.sin,\r
 181                 abs        = function(v){ return v >= 0 ? v : -1; },\r
 182                 pow        = Math.pow,\r
 183                 round      = Math.round,\r
 184                 floor      = Math.floor,\r
 185                 TARGET     = TAIL_WIDTH * TAIL_WIDTH,\r
 186                 isFinit    = Type.isFinite,\r
 187                 ACCURACY   = 1, // 有効少数桁      \r
 188                 cround     = function ( v, r ){\r
 189                                                 r = r || ACCURACY;\r
 190                                                 return round( v * pow( 10.0, r )) / pow( 10.0, r );\r
 191                                         },\r
 192                 DEG_TO_RAD = Math.PI / 180;\r
 193 \r
 194         var XBROWSER_BALLOON_CLASS = function( w, h, a ){\r
 195                 var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true ) : document.createElement( 'img' ), // pettanr.imageに変更\r
 196                         path = balloonElm.getElementsByTagName( 'path' )[ 0 ],\r
 197                         shape = balloonElm.getElementsByTagName( 'shape' )[ 0 ],\r
 198                         instance = this,\r
 199                         l = ',';\r
 200                 \r
 201                 function draw( _a ){\r
 202                         var rx      = w / 2,\r
 203                                 ry      = h / 2,\r
 204                                 tailRad = _a * DEG_TO_RAD,\r
 205                                 tailX   = rx + ( rx + TAIL_HEIGHT ) * sin( tailRad ),\r
 206                                 tailY   = ry - ( ry + TAIL_HEIGHT ) * cos( tailRad ),\r
 207                                 startX, startY, endX, endY;\r
 208                 /*\r
 209                  * tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
 210                  */\r
 211                         var startRad, endRad,\r
 212                                 _startX, _startY, _endX, _endY,\r
 213                                 tailDeg = 0, d;\r
 214                         \r
 215                         for( var i = 45; i > 0.01; i /= 2){\r
 216                                 d = ( tailDeg + i ) /2;\r
 217                                 startRad = ( _a + d ) * DEG_TO_RAD;\r
 218                                 endRad   = ( _a - d ) * DEG_TO_RAD;\r
 219                                 \r
 220                                 _startX  = rx + sin( startRad ) * rx;\r
 221                                 _startY  = ry - cos( startRad ) * ry;\r
 222                                 _endX    = rx + sin( endRad ) * rx;\r
 223                                 _endY    = ry - cos( endRad ) * ry;     //円弧上のY位置＝円中心Y＋sin(角度×PI÷180)×円半径\r
 224                                         \r
 225                                 if( pow( ( _startX - _endX ), 2 ) + pow( ( _startY - _endY ), 2 ) < TARGET ){\r
 226                                         tailDeg += i;\r
 227                                         startX  = _startX;\r
 228                                         startY  = _startY;\r
 229                                         endX    = _endX;\r
 230                                         endY    = _endY;\r
 231                                 };\r
 232                         };\r
 233 \r
 234                 /*\r
 235                  * \r
 236                  */                     \r
 237                         if( IS_VML === true ){\r
 238                                 var _tailX = tailX *10,\r
 239                                         _tailY = tailY *10,\r
 240                                         __w = w *10,\r
 241                                         __h = h *10;\r
 242                                 \r
 243                                 shape.style.width = w + 'px';\r
 244                                 shape.style.height = h + 'px';\r
 245                                 shape.coordsize = [ __w, __h ].join( l );\r
 246                                 shape.path = [\r
 247                                         ' ar ', 0, l, 0, l, __w, l, __h, l,\r
 248                                         round( endX * 10 ), l, round( endY * 10 ), l,\r
 249                                         round( startX * 10 ), l, round( startY * 10 ),\r
 250                                         ' l ', round( _tailX ), l, round( _tailY ),\r
 251                                         ' x e'\r
 252                                 ].join( '');\r
 253 \r
 254                                 balloonElm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;\r
 255                                 balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;\r
 256                         } else {\r
 257                                 balloonElm.setAttribute( 'width', w + PADDING_LEFT *2 );\r
 258                                 balloonElm.setAttribute( 'height', h + PADDING_TOP *2 );\r
 259                                 path.setAttribute( 'd', [\r
 260                                         'M', cround( tailX + PADDING_LEFT ), l, cround( tailY + PADDING_TOP ),\r
 261                                         'L', cround( startX + PADDING_LEFT ), l, cround( startY + PADDING_TOP ),\r
 262                                         'A', rx, l, ry,\r
 263                                         '0 1 1',                        // flag\r
 264                                         cround( endX + PADDING_LEFT ), l, cround( endY + PADDING_TOP ),\r
 265                                         'z'\r
 266                                 ].join( ' '));\r
 267                         }\r
 268                 }\r
 269                 \r
 270                 this.elm = balloonElm;\r
 271                 this.resize = function ( _a, _w, _h ){\r
 272                         w  = isFinit( _w ) === true ? _w - PADDING_TOP * 2 : w;\r
 273                         h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : h;\r
 274                         // ie6 でリサイズが反応しない対策\r
 275                         if( vectorEnabled === false && UA.isIE === true && UA.ieVersion < 7 ){\r
 276                                 var parent = balloonElm.parentNode;\r
 277                                 parent.removeChild( balloonElm );\r
 278                                 parent.insertBefore( balloonElm, parent.firstChild );\r
 279                         }\r
 280                         instance.angle( _a );\r
 281                 };\r
 282                 this.angle = function( _a ){\r
 283                         if( isFinit( _a ) === true ){\r
 284                                 a = _a;\r
 285                                 if( vectorEnabled === false ){\r
 286                                         balloonElm.src = pettanr.balloon.getBalloonUrl( w, h, _a );\r
 287                                 } else {\r
 288                                         draw( _a );\r
 289                                 }\r
 290                         }\r
 291                         return a;\r
 292                 }\r
 293                 this.type = function( _type ){\r
 294                         //draw( _a);\r
 295                 }\r
 296                 this.destroy = function(){\r
 297                         delete instance.destroy;\r
 298                         balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm );\r
 299                         balloonElm = path = shape = instance = null;\r
 300                 }\r
 301                 \r
 302                 instance.resize( a, w, h );\r
 303         };\r
 304         \r
 305         return {\r
 306             createBalloon: function( _w, _h, _a ){\r
 307                 return new XBROWSER_BALLOON_CLASS( _w, _h, _a );\r
 308             },\r
 309             isBalloonInstance: function( _ballon ){\r
 310                 \r
 311             },\r
 312             getBalloonUrl: function( _w, _h, _a ){\r
 313                         var d = 360 / NUM_BALLOON_IMAGE;\r
 314                         _a = _a + d / 2;\r
 315                         return [\r
 316                                 pettanr.CONST.SYSTEM_PICTURE_PATH, '_w',\r
 317                                 _a < 360 - d / 2 ? floor( _a / d ) : 0,\r
 318                                 _w <= 400 || _h <= 400 ? '_b1' : '',\r
 319                                 '.gif' ].join( '' );\r
 320             },\r
 321                 TYPE_NONE:                              0,\r
 322                 TYPE_SPEACH_BALLOON:    1,\r
 323                 TYPE_THINKING:                  2,\r
 324                 TYPE_BOM:                               3,\r
 325                 TYPE_BLACK_BOX:                 4,\r
 326                 TYPE_BLUE_BOX:                  5\r
 327         }\r
 328 })();\r
 329 \r
 330 /* ----------------------------------------\r
 331  *  pettanr.image\r
 332  *  \r
 333  *   xBackendな画像反転、画像描画機能。\r
 334  *   \r
 335  *   画像の反転\r
 336  *     - css3\r
 337  *     - ActiveX (ie)\r
 338  *     - VML (ie)\r
 339  *     - canvas ??\r
 340  *     - flash(lite)\r
 341  *     - silverlight\r
 342  *     - pettan server\r
 343  *   \r
 344  *   png画像の表示(アルファpngをサポートしないie6以下のため)\r
 345  *     - ActiveX\r
 346  *     - VML\r
 347  *     - flash(lite)\r
 348  *     - silverlight\r
 349  *     \r
 350  *     -moz-transform:scale( -1, -1);\r
 351  */\r
 352 pettanr.image = ( function(){\r
 353         \r
 354         var FetchImageControl = ( function(){\r
 355                 var TASK_LIST = [];\r
 356 \r
 357                 /* \r
 358                  * FetchClass original is\r
 359                  * \r
 360                  * LICENSE: MIT?\r
 361                  *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631\r
 362                  *  AUTHOR: uupaa.js@gmail.com\r
 363                  * \r
 364                  */\r
 365 \r
 366                 var FetchClass = function( abspath, onLoadCallback, onErrorCallback, delay, timeout ){\r
 367                         var img,\r
 368                                 size,\r
 369                                 tick = 0,\r
 370                                 timer = null,\r
 371                                 finish = false;\r
 372                                 /*\r
 373                         if( UA.isIE === false && UA.ieVersion < 8 ){\r
 374                                 var images = document.images,\r
 375                                         i=0, l= images.length;\r
 376                                 for( i=0; i<l; ++i ){\r
 377                                         img = images[ i ];\r
 378                                         if( img.src === abspath && img.complete ){\r
 379                                                 finish = true;\r
 380                                                 size = Util.getImageSize( img );\r
 381                                                 timer = window.setTimeout( asyncCallback, 0 );\r
 382                                                 break;\r
 383                                         }\r
 384                                 }\r
 385                                 images = null;\r
 386                         }*/\r
 387                         //if( finish === false ){\r
 388                                 img = document.createElement( 'img' ); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る\r
 389                                 img.onabort = img.onerror = onError;\r
 390                                 img.onload = onLoad;\r
 391                                 img.src = abspath;\r
 392                                 finish === false && timeout && detect();\r
 393                         //}\r
 394                         \r
 395                         function onError(){\r
 396                                 if( finish === true ) return;\r
 397                                 finish = true;\r
 398                                 timer = window.setTimeout( asyncCallback, 10 );\r
 399                         }                       \r
 400                         function onLoad(){\r
 401                                 // if( finish === true ) return; // これがあると firefox3.6 で駄目、、、\r
 402                                 // if( timer ) return; // これがあると safari3.2 で駄目、、、\r
 403                                 finish = true;\r
 404                                 timer !== null && window.clearTimeout( timer );\r
 405                                 if( window.opera && !img.complete ){\r
 406                                         timer = window.setTimeout( asyncCallback, 10 );\r
 407                                         return;\r
 408                                 }\r
 409                                 size = Util.getImageSize( img );\r
 410                                 timer = window.setTimeout( asyncCallback, 10 );\r
 411                         }\r
 412                         function detect(){\r
 413                                 if( finish === true ) return;\r
 414                                 if( img.complete ){\r
 415                                         finish = true;\r
 416                                         if( img.width ) return;\r
 417                                         timer = window.setTimeout( asyncCallback, 10 );\r
 418                                         return;\r
 419                                 }\r
 420                                 if( ( tick += delay ) > timeout ){\r
 421                                         finish = true;\r
 422                                         timer = window.setTimeout( asyncCallback, 10 );\r
 423                                         return;\r
 424                                 }\r
 425                                 timer = window.setTimeout( detect, delay );\r
 426                         }\r
 427                         \r
 428                         function asyncCallback(){\r
 429                                 size ? onLoadCallback( abspath, size.width, size.height ) : onErrorCallback( abspath );\r
 430                                 destroy();\r
 431                         }\r
 432                         function destroy(){\r
 433                                 finish  = true;\r
 434                                 img.src = img.onload = img.onabort = img.onerror = '';\r
 435                                 img     = void 0;\r
 436                                 size    = onLoadCallback = onErrorCallback = timer = null;\r
 437                         }\r
 438                         this.stop = function(){\r
 439                                 timer !== null && window.clearTimeout( timer );\r
 440                                 destroy();                      \r
 441                         }\r
 442                 }\r
 443                 \r
 444                 return {\r
 445                         load: function( URLorELM, onLoad, onError, delay, opt_timeout ){\r
 446                                 var src, fetch;\r
 447                                 if( Type.isString( URLorELM ) === true ){\r
 448                                         src = URLorELM;\r
 449                                 } else\r
 450                                 if( Type.isHTMLElement( URLorELM ) === true && URLorELM.tagName.toLowerCase() === 'img' ){\r
 451                                         src = URLorELM.src;\r
 452                                 } else {\r
 453                                         return;\r
 454                                 }\r
 455                                 \r
 456                                 fetch = new FetchClass(\r
 457                                         Util.getAbsolutePath( src ),\r
 458                                         onLoad, onError,\r
 459                                         Type.isFinite( delay ) === true ? delay : 250,\r
 460                                         Type.isFinite( opt_timeout ) === true ? opt_timeout : undefined\r
 461                                 );\r
 462                                 // TASK_LIST.push( fetch );\r
 463                                 \r
 464                                 return fetch;\r
 465                         }\r
 466                 }\r
 467         })();\r
 468         \r
 469         var REG_PNG           = /\.png?/i,\r
 470                 IS_CSS3           = 0,\r
 471                 IS_VML            = 1,\r
 472                 IS_ACTIVEX        = 2,\r
 473                 IS_CANVAS         = 3,\r
 474                 IS_FLASH          = 4,\r
 475                 IS_SILVERLIGHT    = 5,\r
 476                 IS_SERVER         = 6,\r
 477                 IS_ACTIVEX_SERVER = 7,\r
 478                 BACKEND = ( function(){\r
 479                         if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg ){\r
 480                                 var rimg = pettanr.URL_PARAMS.rimg.toLowerCase();\r
 481                                 if( rimg === 'css3' ) return IS_CSS3;\r
 482                                 if( rimg === 'activex' ) return IS_ACTIVEX;\r
 483                                 if( rimg === 'vml' ) return IS_VML;\r
 484                         }\r
 485                         if( UA.isIE === false || UA.ieVersion >= 9 ) return IS_CSS3; // 不十分！\r
 486                         if( UA.VML === true ) return IS_VML;\r
 487                         if( UA.ACTIVEX === true ) return IS_ACTIVEX;\r
 488                         if( pettanr.FLASH === true ) return IS_FLASH;\r
 489                         if( pettanr.SILVERLIGHT === true ) return IS_SILVERLIGHT;\r
 490                         return IS_SERVER;\r
 491                 })(),\r
 492                 BACKEND_WHEN_PNG = ( function(){\r
 493                         if( UA.isIE === false || UA.ieVersion > 6 ) return BACKEND;\r
 494                         if( UA.VML === true ) return IS_VML;\r
 495                         if( pettanr.FLASH === true ) return IS_FLASH;\r
 496                         if( pettanr.SILVERLIGHT === true ) return IS_SILVERLIGHT;\r
 497                         if( UA.ACTIVEX === true ) return IS_ACTIVEX_SERVER;\r
 498                         return IS_SERVER;\r
 499                 })(),\r
 500                 CLASS_NAME         = 'reversible-image-container',\r
 501                 CLASS_NAME_LOADING = CLASS_NAME + ' loading',\r
 502                 CLASS_NAME_ERROR   = CLASS_NAME +' error',\r
 503                 RETRY_DELAY        = 5000,\r
 504                 NUM_RETRY          = 3,\r
 505                 ReversibleImageClass,\r
 506                 ReversibleImageClassWithPingfix;\r
 507         \r
 508         var css3Image = function( url, w, h, onLoadCallback ){\r
 509                 var elmWrap    = document.createElement( 'div' ),\r
 510                         elmImg     = null,\r
 511                         retryTimer = null,\r
 512                         fetch      = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),\r
 513                         instance   = this;\r
 514                 elmWrap.className = CLASS_NAME_LOADING;\r
 515 \r
 516                 function onLoad( _url, _actualW, _actualH ){\r
 517                         if( elmWrap === null ) return;\r
 518                         elmImg = new Image; // new Image でないと ie6,7 でクラッシュするかも、、、？\r
 519                         /*\r
 520                          * createElement 直後に append しないと、ie(ActiveX)で img が正しく表示されない．\r
 521                          */\r
 522                         elmWrap.appendChild( elmImg );\r
 523                         elmImg.setAttribute( 'src', url );\r
 524                         elmWrap.className = CLASS_NAME;\r
 525                         onLoadCallback && onLoadCallback( _url, _actualW, _actualH );\r
 526                         onLoadCallback = fetch = null;\r
 527                         instance.resize( w, h );\r
 528                 }\r
 529                 function onError( _url ){\r
 530                         if( elmWrap === null ) return;\r
 531                         elmWrap.className = CLASS_NAME_ERROR;\r
 532                         retryTimer = window.setTimeout( retry, RETRY_DELAY );\r
 533                         fetch = null;\r
 534                 }\r
 535                 function retry(){\r
 536                         elmWrap.className = CLASS_NAME_LOADING;\r
 537                         fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 );\r
 538                 }\r
 539 \r
 540                 this.elm = elmWrap;\r
 541                 this.resize = function( _w, _h ){\r
 542                         w = _w !== undefined ? _w : w;\r
 543                         h = _h !== undefined ? _h : h;\r
 544                         if( elmImg === null ) return;\r
 545                         elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
 546                 }\r
 547                 this.destroy = function(){\r
 548                         delete instance.destroy;\r
 549                         \r
 550                         elmImg !== null && elmWrap.removeChild( elmImg );\r
 551                         retryTimer !== null && window.clearTimeout( retryTimer );\r
 552                         fetch !== null && fetch.stop();\r
 553                         elmWrap = elmImg = onLoadCallback = retryTimer = fetch = instance = null;\r
 554                 }\r
 555         }\r
 556                 \r
 557         var activexImage = css3Image;\r
 558         \r
 559         var vmlImage = function( url, w, h, onLoadCallback ){\r
 560                 var elmWrap = document.createElement( 'div' ),\r
 561                         vmlImg = null,\r
 562                         retryTimer = null,\r
 563                         fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),\r
 564                         instance = this;\r
 565                 elmWrap.className = CLASS_NAME_LOADING;\r
 566                 function onLoad( _url, _actualW, _actualH ){\r
 567                         if( elmWrap === null ) return;\r
 568                         elmWrap.className = CLASS_NAME;\r
 569                         vmlImg = document.createElement( 'v:image' );\r
 570                         vmlImg.src = url;\r
 571                         onLoadCallback && onLoadCallback( _url, _actualW, _actualH );\r
 572                         onLoadCallback = fetch = null;\r
 573                         instance.resize( w, h );\r
 574                 }\r
 575                 function onError( _url ){\r
 576                         if( elmWrap === null ) return;\r
 577                         elmWrap.className = CLASS_NAME_ERROR;\r
 578                         retryTimer = window.setTimeout( retry, RETRY_DELAY );\r
 579                         fetch = null;\r
 580                 }\r
 581                 function retry(){\r
 582                         elmWrap.className = CLASS_NAME_LOADING;\r
 583                         fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 );\r
 584                 }\r
 585                 \r
 586                 this.elm = elmWrap;\r
 587                 this.resize = function( _w, _h ){\r
 588                         w = _w !== undefined ? _w : w;\r
 589                         h = _h !== undefined ? _h : h;\r
 590                         if( vmlImg === null ) return;\r
 591                         vmlImg.style.width  = ( w < 0 ? -w : w ) + 'px';\r
 592                         vmlImg.style.height = ( h < 0 ? -h : h ) + 'px';\r
 593                         //if( flipH !== _flipH || flipV !== _flipV){\r
 594                                 vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg );\r
 595                         //}\r
 596                                 vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
 597                                 elmWrap.appendChild( vmlImg );\r
 598                 }\r
 599                 this.destroy = function(){\r
 600                         delete instance.destroy;\r
 601                         \r
 602                         vmlImg !== null && elmWrap.removeChild( vmlImg );\r
 603                         retryTimer !== null && window.clearTimeout( retryTimer );\r
 604                         fetch !== null && fetch.stop();\r
 605                         elmWrap = vmlImg = onLoadCallback = retryTimer = fetch = instance = null;\r
 606                 }\r
 607         }\r
 608         \r
 609         var serverImage = css3Image; // function( url, w, h, onLoadCallback ){}\r
 610         \r
 611         if( BACKEND === IS_CSS3 )    ReversibleImageClass = css3Image;\r
 612         if( BACKEND === IS_VML )     ReversibleImageClass = vmlImage;\r
 613         if( BACKEND === IS_ACTIVEX ) ReversibleImageClass = activexImage;\r
 614         if( BACKEND === IS_SERVER )  ReversibleImageClass = activexImage;\r
 615         \r
 616         css3Image = vmlImage = activexImage = activexImage = null;\r
 617         \r
 618         return {\r
 619                 createReversibleImage: function( url, w, h, onLoadCallback){\r
 620                         return new ReversibleImageClass( url, w, h, onLoadCallback );\r
 621                 }\r
 622         }\r
 623 })();\r
 624 \r
 625 /*\r
 626  * bind : 製本\r
 627  */\r
 628 pettanr.bind = ( function(){\r
 629         var BIND_WORKER_ARRAY   = [],\r
 630                 NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',\r
 631                 PICTURE_PATH        = pettanr.CONST.PANEL_PICTURE_PATH,\r
 632                 ELM_DETECT_WIDTH    = ( function(){\r
 633                         var ret = document.createElement( 'div' );\r
 634                         ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';\r
 635                         return ret;\r
 636                 })(),\r
 637                 ELM_TITLE_ORIGN = ( function(){\r
 638                         \r
 639                 })();\r
 640 \r
 641         /*\r
 642          * original\r
 643          *   http://d.hatena.ne.jp/uupaa/20090720/1248097177\r
 644          */\r
 645         var ResizeAgentClass = function( onResizeFunction, opt_elmCheck){\r
 646                 var     _globalLock = 0,\r
 647                         _size = { w: 0, h: 0 };\r
 648                         _ie = !!document.all,\r
 649                         _quirks = (document.compatMode || "") !== "CSS1Compat",\r
 650                         _ieroot = _quirks ? "body" : "documentElement";\r
 651                         _root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);\r
 652 \r
 653                 function getInnerSize(){\r
 654                         return {\r
 655                                 w: _root.innerWidth  || _root.clientWidth,\r
 656                                 h: _root.innerHeight || _root.clientHeight\r
 657                         };\r
 658                 };\r
 659 \r
 660                 function loop(){\r
 661                         if (!_globalLock++) {\r
 662                                 var size = getInnerSize();\r
 663                                 if (_size.w !== size.w || _size.h !== size.h) { // resized\r
 664                                         _size = size; // update\r
 665                                         onResizeFunction( _size );\r
 666                                 };\r
 667                                 setTimeout( unlock, 0); // delay unlock\r
 668                         };\r
 669                         setTimeout(loop, 500);\r
 670                 };\r
 671                 function unlock(){\r
 672                         _globalLock = 0;\r
 673                 };\r
 674                 loop();\r
 675         };\r
 676         \r
 677         \r
 678         var ElementBuilder = function( elmTarget, noClassname ){\r
 679                 this.imageList    = [];\r
 680                 this.balloonList  = [];\r
 681                 this.elmTarget    = elmTarget;\r
 682                 this.noClassname  = noClassname;\r
 683         };\r
 684         ElementBuilder.prototype = {\r
 685                 build : function( json, zoom ){\r
 686                         this.clean();\r
 687                         \r
 688                         // json is Comic ? Panel ?\r
 689                         var panels = json.children || json.stories,\r
 690                                 i, l;\r
 691                         if( Type.isArray( panels ) === true ){\r
 692                                 // comic\r
 693                                 for( i = 0, l = panels.length; i<l; ++i ){\r
 694                                         this.buildPanelElement( panels[ i ], zoom );\r
 695                                 };\r
 696                         } else\r
 697                         if( json.elements ){\r
 698                                 // panel\r
 699                                 this.buildPanelElement( json, zoom );\r
 700                         } else {\r
 701                                 // invalid json\r
 702                         };\r
 703                 },\r
 704                 buildComicElement : function(){\r
 705                         \r
 706                 },\r
 707                 buildPanelElement : function( json, zoom ){\r
 708                         var elmPanel = document.createElement( 'div' ),\r
 709                                 style = {\r
 710                                                 'border-width':         typeof json.border === 'number' ? json.border + 'px' : 0,\r
 711                                                 width:                          json.width  + 'px',\r
 712                                                 height:                         json.height + 'px'\r
 713                                 },\r
 714                                 cssText = [],\r
 715                                 elements = json.elements || ( json.panel ? json.panel.elements : [] ),\r
 716                                 rPic,\r
 717                                 p, i, l;\r
 718                         this.elmTarget.appendChild( elmPanel );\r
 719                         \r
 720                         if( this.noClassname === true ){\r
 721                                 \r
 722                         } else {\r
 723                                 elmPanel.className = NAMESPACE_CLASSNAME + 'panel';\r
 724                         };\r
 725                         for( p in style ){\r
 726                                 cssText.push( p + ':' + style[ p ] );\r
 727                         };\r
 728                         elmPanel.style.cssText = cssText.join( ';' );\r
 729                         \r
 730                         for( i = 0, l = elements.length; i < l; ++i ){\r
 731                                 data = elements[ i ];\r
 732                                 rPic = data.picture;\r
 733                                 if( rPic ){\r
 734                                         this.buildImage( elmPanel, data, rPic );\r
 735                                 } else {\r
 736                                         this.buildBalloon( elmPanel, data );\r
 737                                 };\r
 738                         };\r
 739                 },\r
 740                 buildImage : function( elmPanel, data, rPic ){\r
 741                         var rImg = pettanr.image.createReversibleImage(\r
 742                                         [ PICTURE_PATH, data.picture_id, '.', rPic.ext ].join( '' ),\r
 743                                         data.width, data.height\r
 744                                 ),\r
 745                                 elmImg = rImg.elm;\r
 746                         elmPanel.appendChild( elmImg );\r
 747                         elmImg.className = NAMESPACE_CLASSNAME + 'image';\r
 748                         elmImg.style.cssText = [\r
 749                                 'left:',    data.x, 'px;',\r
 750                                 'top:',     data.y, 'px;',\r
 751                                 'z-index:', data.z, ';'\r
 752                         ].join( '');                                    \r
 753                         if( elmImg.tagName === 'img' ){\r
 754                                 elmImg.width        = Math.abs( data.width );\r
 755                                 elmImg.height       = Math.abs( data.height );\r
 756                         } else {\r
 757                                 elmImg.style.width  = Math.abs( data.width ) + 'px';\r
 758                                 elmImg.style.height = Math.abs( data.height ) + 'px';\r
 759                         };\r
 760                         \r
 761                         this.imageList.push( rImg );                    \r
 762                 },\r
 763                 buildBalloon : function( elmPanel, data ){\r
 764                         var elmBalloonWrap = document.createElement( 'div' ),\r
 765                                 elmText        = document.createElement( 'p' ),\r
 766                                 content        = '',\r
 767                                 speechesAttr   = data.speeches_attributes,\r
 768                                 balloon, p;\r
 769                         elmPanel.appendChild( elmBalloonWrap );\r
 770                         elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';\r
 771                         elmBalloonWrap.style.cssText = [\r
 772                                 'width:',   data.width, 'px;',\r
 773                                 'height:',  data.height, 'px;',\r
 774                                 'left:',    data.x, 'px;',\r
 775                                 'top:',     data.y, 'px;',\r
 776                                 'z-index:', data.z, ';'\r
 777                         ].join( '' );\r
 778 \r
 779                         balloon = pettanr.balloon.createBalloon( data.width, data.height, data.tail );\r
 780                         elmBalloonWrap.appendChild( balloon.elm );\r
 781                         \r
 782                         elmBalloonWrap.appendChild( elmText );\r
 783                         \r
 784                         elmText.appendChild( document.createElement( 'span' ) );\r
 785                         \r
 786                         if( speechesAttr ){\r
 787                                 for( p in speechesAttr ){\r
 788                                         content += speechesAttr[ p ] && speechesAttr[ p ].content ? speechesAttr[ p ].content : '';\r
 789                                 };\r
 790                         };\r
 791                         elmText.firstChild.appendChild( document.createTextNode( content ));\r
 792                         this.balloonList.push( balloon );\r
 793                 },\r
 794                 clean : function(){\r
 795                         // clean elmTarget\r
 796                         while( this.imageList.length > 0 ){\r
 797                                 this.imageList.shift().destroy();\r
 798                         };\r
 799                         while( this.balloonList.length > 0 ){\r
 800                                 this.balloonList.shift().destroy();\r
 801                         };\r
 802                         Util.removeAllChildren( this.elmTarget );\r
 803                 },\r
 804                 zoom : function(){},\r
 805                 destroy : function(){\r
 806                         this.clean();\r
 807                 }                       \r
 808         };\r
 809         \r
 810         var BindWorker = function( elmTarget, json, zoomSelfEnabled, noClassname ){\r
 811                 this.builder     = new ElementBuilder( elmTarget, noClassname );\r
 812                 this.elmDetectW  = ELM_DETECT_WIDTH.cloneNode( false );\r
 813                 this._json        = json;\r
 814                 this.noClassname = noClassname;\r
 815                 if( zoomSelfEnabled === true ){\r
 816                         elmTarget.parentNode.insertBefore( this.elmDetectW, elmTarget );\r
 817                         this.resizer = new ResizeAgentClass( onResize, this.elmDetectW );\r
 818                 };\r
 819                 function onResize(){\r
 820                         \r
 821                 };\r
 822                 json && typeof json === 'object' && this.builder.build( json );\r
 823         };\r
 824         BindWorker.prototype = {\r
 825                 init : function(){\r
 826                                 \r
 827                 },\r
 828                 zoom : function(){\r
 829                         this.builder.zoom();\r
 830                 },\r
 831                 json : function( json ){\r
 832                         this._json = json;\r
 833                         this.builder.build( json, this.noClassname );\r
 834                 },\r
 835                 targetElement : function(){\r
 836                                 \r
 837                 },\r
 838                 layout : function(){\r
 839                                 \r
 840                 },\r
 841                 destroy : function(){\r
 842                         this.builder.destroy();\r
 843                         delete this.json;\r
 844                         delete this.builder;\r
 845                 }               \r
 846         };\r
 847         return {\r
 848                 createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode ){\r
 849                         var ret = new BindWorker( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode );\r
 850                         BIND_WORKER_ARRAY.push( ret );\r
 851                         return ret;\r
 852                 },\r
 853                 isBindWorkerInstance: function( _bindWorker ){\r
 854                         return _bindWorker instanceof BindWorkerClass;\r
 855                 }\r
 856         }\r
 857 })();\r
 858 \r
 859 \r
 860 /*\r
 861  *  Google Analytics\r
 862  */\r
 863 \r
 864 if( pettanr.LOCAL === false || document.location.href.indexOf( 'localhost:' ) === -1 ){\r
 865         var _gaq = _gaq || [];\r
 866         _gaq.push(['_setAccount', 'UA-28023955-1']);\r
 867         _gaq.push(['_trackPageview']);\r
 868         \r
 869         ( function(){\r
 870                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
 871                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
 872                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
 873         })();   \r
 874 };