OSDN Git Service

client is versiion 0.5.6, post panel on panel editor.
[pettanr/pettanr.git] / app / assets / javascripts / peta.common.js
1 /*\r
2  * pettanR peta.common.js\r
3  *   version 0.5.6\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.5',\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_COMICS_JSON:                        ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'comics.json',\r
91                 URL_PANELS_JSON:                        ( SERVER_SUPPORT === false ? 'json\/' : PETTANR_ROOT_PATH ) + 'panels.json',\r
92                 NS_PETTANR_COMIC:                       'pettanr-comic',\r
93                 RESOURCE_PICTURE_PATH:          ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'resource_pictures\/',\r
94                 SYSTEM_PICTURE_PATH:            ( SERVER_SUPPORT === false ? RELATIVE : PETTANR_ROOT_PATH ) + 'system_pictures\/',\r
95                 CREATE_COMIC_JS:                        SERVER_SUPPORT === false ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',\r
96                 CREATE_PANEL_JS:                        SERVER_SUPPORT === false ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',\r
97                 UPLOAD_PICTURE_JS:                      SERVER_SUPPORT === false ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
98                 REGISTER_ARTIST_JS:                     SERVER_SUPPORT === false ? 'js\/register_artist.js' : PETTANR_ROOT_PATH + 'artists\/new.js',\r
99                 SERVER_SUPPORT:                         SERVER_SUPPORT,\r
100                 URL_PETA_APPS_CSS:                      ( SERVER_SUPPORT === false ? 'stylesheets' : '\/assets' ) + '\/peta.apps.css'\r
101         }\r
102 })();\r
103 \r
104 /* ----------------------------------------\r
105  * Vector Support\r
106  * \r
107  *              __________\r
108  *             /          \\r
109  *            /            \\r
110  *            |,startX,Y    |\r
111  * tailX,Y - <              |\r
112  *            |'endX,Y      |\r
113  *            \            /\r
114  *                 \__________/\r
115  * \r
116  * SVG\r
117  * -----------------------\r
118  * ie9, other modern browser\r
119  * \r
120  * XML\r
121  * -----------------------\r
122  * ie5.5-8\r
123  * \r
124  * 内部の角度計算は radian で統一したい。\r
125  * 当初 vectorEnabled = true で一度書いてみる。\r
126  * 駄目なら、代替のイメージのsrcの用意もここで担当。\r
127  * 閲覧と編集両方で使う。\r
128  * \r
129  */\r
130 pettanr.balloon = ( function() {\r
131         var MIN_BALLOON_WIDTH  = 30,\r
132                 MIN_BALLOON_HEIGHT = 30,\r
133                 NUM_BALLOON_IMAGE  = 24,\r
134                 TAIL_WIDTH         = 6,\r
135                 TAIL_HEIGHT        = 10,\r
136                 STROKE_WIDTH       = 1.2,\r
137                 PADDING_TOP        = TAIL_HEIGHT,\r
138                 PADDING_LEFT       = TAIL_HEIGHT,\r
139                 IS_VML             = UA.isIE === true && UA.ieVersion < 9,\r
140                 ELM_BALLOON_ORIGIN = ( function(){\r
141                         var ret;\r
142                         try {\r
143                                 if( IS_VML === true){\r
144                                         ret = document.createElement( 'DIV');\r
145                                         var shape = document.createElement( 'v:shape');\r
146                                         shape.coordorigin = "0,0";\r
147                                         shape.strokecolor = "black";\r
148                                         shape.strokeweight = STROKE_WIDTH;\r
149                                         shape.fillcolor = "white";\r
150                                         ret.appendChild( shape);\r
151                                 } else {\r
152                                         var kSVGNS = 'http://www.w3.org/2000/svg';\r
153                                         // http://modernizr.com/downloads/modernizr.js\r
154                                         // Thanks to Erik Dahlstrom\r
155                                         if( !document.createElementNS || !document.createElementNS(kSVGNS, 'svg').createSVGRect ){\r
156                                                 return null;\r
157                                         };\r
158                                         ret = document.createElementNS( kSVGNS, 'svg');\r
159                                         var path = document.createElementNS( kSVGNS, 'path');\r
160                                         path.setAttribute( 'fill', "white");\r
161                                         path.setAttribute( 'stroke', "black");\r
162                                         path.setAttribute( 'strokeWidth', STROKE_WIDTH);\r
163                                         ret.appendChild( path );\r
164                                 };\r
165                                 return ret;     \r
166                         } catch( e){\r
167                                 return null;\r
168                         }\r
169                 })(),\r
170                 vectorEnabled = ELM_BALLOON_ORIGIN !== null &&\r
171                                                 pettanr.URL_PARAMS.vector !== false &&\r
172                                                 !( IS_VML === true && UA.VML === false );\r
173 \r
174         var cos        = Math.cos,\r
175                 sin        = Math.sin,\r
176                 abs        = function(v){ return v >= 0 ? v : -1; },\r
177                 pow        = Math.pow,\r
178                 round      = Math.round,\r
179                 floor      = Math.floor,\r
180                 TARGET     = TAIL_WIDTH * TAIL_WIDTH,\r
181                 isFinit    = Type.isFinite,\r
182                 ACCURACY   = 1, // 有効少数桁      \r
183                 cround     = function ( v, r ){\r
184                                                 r = r || ACCURACY;\r
185                                                 return round( v * pow( 10.0, r )) / pow( 10.0, r );\r
186                                         },\r
187                 DEG_TO_RAD = Math.PI / 180;\r
188 \r
189         var XBROWSER_BALLOON_CLASS = function( w, h, a ){\r
190                 var balloonElm = vectorEnabled === true ? ELM_BALLOON_ORIGIN.cloneNode( true ) : document.createElement( 'img' ), // pettanr.imageに変更\r
191                         path = balloonElm.getElementsByTagName( 'path' )[ 0 ],\r
192                         shape = balloonElm.getElementsByTagName( 'shape' )[ 0 ],\r
193                         instance = this,\r
194                         l = ',';\r
195                 \r
196                 function draw( _a ){\r
197                         var rx      = w / 2,\r
198                                 ry      = h / 2,\r
199                                 tailRad = _a * DEG_TO_RAD,\r
200                                 tailX   = rx + ( rx + TAIL_HEIGHT ) * sin( tailRad ),\r
201                                 tailY   = ry - ( ry + TAIL_HEIGHT ) * cos( tailRad ),\r
202                                 startX, startY, endX, endY;\r
203                 /*\r
204                  * tailの太さをTAIL_WIDTHに一致させるため、角度を絞りつつ計算\r
205                  */\r
206                         var startRad, endRad,\r
207                                 _startX, _startY, _endX, _endY,\r
208                                 tailDeg = 0, d;\r
209                         \r
210                         for( var i = 45; i > 0.01; i /= 2){\r
211                                 d = ( tailDeg + i ) /2;\r
212                                 startRad = ( _a + d ) * DEG_TO_RAD;\r
213                                 endRad   = ( _a - d ) * DEG_TO_RAD;\r
214                                 \r
215                                 _startX  = rx + sin( startRad ) * rx;\r
216                                 _startY  = ry - cos( startRad ) * ry;\r
217                                 _endX    = rx + sin( endRad ) * rx;\r
218                                 _endY    = ry - cos( endRad ) * ry;     //円弧上のY位置=円中心Y+sin(角度×PI÷180)×円半径\r
219                                         \r
220                                 if( pow( ( _startX - _endX ), 2 ) + pow( ( _startY - _endY ), 2 ) < TARGET ){\r
221                                         tailDeg += i;\r
222                                         startX  = _startX;\r
223                                         startY  = _startY;\r
224                                         endX    = _endX;\r
225                                         endY    = _endY;\r
226                                 };\r
227                         };\r
228 \r
229                 /*\r
230                  * \r
231                  */                     \r
232                         if( IS_VML === true ){\r
233                                 var _tailX = tailX *10,\r
234                                         _tailY = tailY *10,\r
235                                         __w = w *10,\r
236                                         __h = h *10;\r
237                                 \r
238                                 shape.style.width = w + 'px';\r
239                                 shape.style.height = h + 'px';\r
240                                 shape.coordsize = [ __w, __h ].join( l );\r
241                                 shape.path = [\r
242                                         ' ar ', 0, l, 0, l, __w, l, __h, l,\r
243                                         round( endX * 10 ), l, round( endY * 10 ), l,\r
244                                         round( startX * 10 ), l, round( startY * 10 ),\r
245                                         ' l ', round( _tailX ), l, round( _tailY ),\r
246                                         ' x e'\r
247                                 ].join( '');\r
248 \r
249                                 balloonElm.style.marginTop =  _tailY < 0 ? floor( ( 60 + _tailY) / 10 ) : 10;\r
250                                 balloonElm.style.marginLeft = _tailX < 0 ? floor( ( 60 + _tailX) / 10 ) : 10;\r
251                         } else {\r
252                                 balloonElm.setAttribute( 'width', w + PADDING_LEFT *2 );\r
253                                 balloonElm.setAttribute( 'height', h + PADDING_TOP *2 );\r
254                                 path.setAttribute( 'd', [\r
255                                         'M', cround( tailX + PADDING_LEFT ), l, cround( tailY + PADDING_TOP ),\r
256                                         'L', cround( startX + PADDING_LEFT ), l, cround( startY + PADDING_TOP ),\r
257                                         'A', rx, l, ry,\r
258                                         '0 1 1',                        // flag\r
259                                         cround( endX + PADDING_LEFT ), l, cround( endY + PADDING_TOP ),\r
260                                         'z'\r
261                                 ].join( ' '));\r
262                         }\r
263                 }\r
264                 \r
265                 this.elm = balloonElm;\r
266                 this.resize = function ( _a, _w, _h ){\r
267                         w  = isFinit( _w ) === true ? _w - PADDING_TOP * 2 : w;\r
268                         h  = isFinit( _h ) === true ? _h - PADDING_LEFT * 2 : h;\r
269                         // ie6 でリサイズが反応しない対策\r
270                         if( vectorEnabled === false && UA.isIE === true && UA.ieVersion < 7 ){\r
271                                 var parent = balloonElm.parentNode;\r
272                                 parent.removeChild( balloonElm );\r
273                                 parent.insertBefore( balloonElm, parent.firstChild );\r
274                         }\r
275                         instance.angle( _a );\r
276                 };\r
277                 this.angle = function( _a ){\r
278                         if( isFinit( _a ) === true ){\r
279                                 a = _a;\r
280                                 if( vectorEnabled === false ){\r
281                                         balloonElm.src = pettanr.balloon.getBalloonUrl( w, h, _a );\r
282                                 } else {\r
283                                         draw( _a );\r
284                                 }\r
285                         }\r
286                         return a;\r
287                 }\r
288                 this.type = function( _type ){\r
289                         //draw( _a);\r
290                 }\r
291                 this.destroy = function(){\r
292                         delete instance.destroy;\r
293                         balloonElm.parentNode && balloonElm.parentNode.removeChild( balloonElm );\r
294                         balloonElm = path = shape = instance = null;\r
295                 }\r
296                 \r
297                 instance.resize( a, w, h );\r
298         };\r
299         \r
300         return {\r
301             createBalloon: function( _w, _h, _a ){\r
302                 return new XBROWSER_BALLOON_CLASS( _w, _h, _a );\r
303             },\r
304             isBalloonInstance: function( _ballon ){\r
305                 \r
306             },\r
307             getBalloonUrl: function( _w, _h, _a ){\r
308                         var d = 360 / NUM_BALLOON_IMAGE;\r
309                         _a = _a + d / 2;\r
310                         return [\r
311                                 pettanr.CONST.SYSTEM_PICTURE_PATH, '_w',\r
312                                 _a < 360 - d / 2 ? floor( _a / d ) : 0,\r
313                                 _w <= 400 || _h <= 400 ? '_b1' : '',\r
314                                 '.gif' ].join( '' );\r
315             },\r
316                 TYPE_NONE:                              0,\r
317                 TYPE_SPEACH_BALLOON:    1,\r
318                 TYPE_THINKING:                  2,\r
319                 TYPE_BOM:                               3,\r
320                 TYPE_BLACK_BOX:                 4,\r
321                 TYPE_BLUE_BOX:                  5\r
322         }\r
323 })();\r
324 \r
325 /* ----------------------------------------\r
326  *  pettanr.image\r
327  *  \r
328  *   xBackendな画像反転、画像描画機能。\r
329  *   \r
330  *   画像の反転\r
331  *     - css3\r
332  *     - ActiveX (ie)\r
333  *     - VML (ie)\r
334  *     - canvas ??\r
335  *     - flash(lite)\r
336  *     - silverlight\r
337  *     - pettan server\r
338  *   \r
339  *   png画像の表示(アルファpngをサポートしないie6以下のため)\r
340  *     - ActiveX\r
341  *     - VML\r
342  *     - flash(lite)\r
343  *     - silverlight\r
344  *     \r
345  *     -moz-transform:scale( -1, -1);\r
346  */\r
347 pettanr.image = ( function(){\r
348         \r
349         var FetchImageControl = ( function(){\r
350                 var TASK_LIST = [];\r
351 \r
352                 /* \r
353                  * FetchClass original is\r
354                  * \r
355                  * LICENSE: MIT?\r
356                  *  URL: http://d.hatena.ne.jp/uupaa/20080413/1208067631\r
357                  *  AUTHOR: uupaa.js@gmail.com\r
358                  * \r
359                  */\r
360 \r
361                 var FetchClass = function( abspath, onLoadCallback, onErrorCallback, delay, timeout ){\r
362                         var img,\r
363                                 size,\r
364                                 tick = 0,\r
365                                 timer = null,\r
366                                 finish = false;\r
367                                 /*\r
368                         if( UA.isIE === false && UA.ieVersion < 8 ){\r
369                                 var images = document.images,\r
370                                         i=0, l= images.length;\r
371                                 for( i=0; i<l; ++i ){\r
372                                         img = images[ i ];\r
373                                         if( img.src === abspath && img.complete ){\r
374                                                 finish = true;\r
375                                                 size = Util.getImageSize( img );\r
376                                                 timer = window.setTimeout( asyncCallback, 0 );\r
377                                                 break;\r
378                                         }\r
379                                 }\r
380                                 images = null;\r
381                         }*/\r
382                         //if( finish === false ){\r
383                                 img = document.createElement( 'img' ); //var img = new Image(); ではieでimgのsizeが取れない、、、removeChildも失敗し、imgSizeGetterにimgが残る\r
384                                 img.onabort = img.onerror = onError;\r
385                                 img.onload = onLoad;\r
386                                 img.src = abspath;\r
387                                 finish === false && timeout && detect();\r
388                         //}\r
389                         \r
390                         function onError(){\r
391                                 if( finish === true ) return;\r
392                                 finish = true;\r
393                                 timer = window.setTimeout( asyncCallback, 10 );\r
394                         }                       \r
395                         function onLoad(){\r
396                                 // if( finish === true ) return; // これがあると firefox3.6 で駄目、、、\r
397                                 // if( timer ) return; // これがあると safari3.2 で駄目、、、\r
398                                 finish = true;\r
399                                 timer !== null && window.clearTimeout( timer );\r
400                                 if( window.opera && !img.complete ){\r
401                                         timer = window.setTimeout( asyncCallback, 10 );\r
402                                         return;\r
403                                 }\r
404                                 size = Util.getImageSize( img );\r
405                                 timer = window.setTimeout( asyncCallback, 10 );\r
406                         }\r
407                         function detect(){\r
408                                 if( finish === true ) return;\r
409                                 if( img.complete ){\r
410                                         finish = true;\r
411                                         if( img.width ) return;\r
412                                         timer = window.setTimeout( asyncCallback, 10 );\r
413                                         return;\r
414                                 }\r
415                                 if( ( tick += delay ) > timeout ){\r
416                                         finish = true;\r
417                                         timer = window.setTimeout( asyncCallback, 10 );\r
418                                         return;\r
419                                 }\r
420                                 timer = window.setTimeout( detect, delay );\r
421                         }\r
422                         \r
423                         function asyncCallback(){\r
424                                 size ? onLoadCallback( abspath, size.width, size.height ) : onErrorCallback( abspath );\r
425                                 destroy();\r
426                         }\r
427                         function destroy(){\r
428                                 finish  = true;\r
429                                 img.src = img.onload = img.onabort = img.onerror = '';\r
430                                 img     = void 0;\r
431                                 size    = onLoadCallback = onErrorCallback = timer = null;\r
432                         }\r
433                         this.stop = function(){\r
434                                 timer !== null && window.clearTimeout( timer );\r
435                                 destroy();                      \r
436                         }\r
437                 }\r
438                 \r
439                 return {\r
440                         load: function( URLorELM, onLoad, onError, delay, opt_timeout ){\r
441                                 var src, fetch;\r
442                                 if( Type.isString( URLorELM ) === true ){\r
443                                         src = URLorELM;\r
444                                 } else\r
445                                 if( Type.isHTMLElement( URLorELM ) === true && URLorELM.tagName.toLowerCase() === 'img' ){\r
446                                         src = URLorELM.src;\r
447                                 } else {\r
448                                         return;\r
449                                 }\r
450                                 \r
451                                 fetch = new FetchClass(\r
452                                         Util.getAbsolutePath( src ),\r
453                                         onLoad, onError,\r
454                                         Type.isFinite( delay ) === true ? delay : 250,\r
455                                         Type.isFinite( opt_timeout ) === true ? opt_timeout : undefined\r
456                                 );\r
457                                 // TASK_LIST.push( fetch );\r
458                                 \r
459                                 return fetch;\r
460                         }\r
461                 }\r
462         })();\r
463         \r
464         var REG_PNG           = /\.png?/i,\r
465                 IS_CSS3           = 0,\r
466                 IS_VML            = 1,\r
467                 IS_ACTIVEX        = 2,\r
468                 IS_CANVAS         = 3,\r
469                 IS_FLASH          = 4,\r
470                 IS_SILVERLIGHT    = 5,\r
471                 IS_SERVER         = 6,\r
472                 IS_ACTIVEX_SERVER = 7,\r
473                 BACKEND = ( function(){\r
474                         if( pettanr.DEBUG === true && pettanr.URL_PARAMS.rimg ){\r
475                                 var rimg = pettanr.URL_PARAMS.rimg.toLowerCase();\r
476                                 if( rimg === 'css3' ) return IS_CSS3;\r
477                                 if( rimg === 'activex' ) return IS_ACTIVEX;\r
478                                 if( rimg === 'vml' ) return IS_VML;\r
479                         }\r
480                         if( UA.isIE === false || UA.ieVersion >= 9 ) return IS_CSS3; // 不十分!\r
481                         if( UA.VML === true ) return IS_VML;\r
482                         if( UA.ACTIVEX === true ) return IS_ACTIVEX;\r
483                         if( pettanr.FLASH === true ) return IS_FLASH;\r
484                         if( pettanr.SILVERLIGHT === true ) return IS_SILVERLIGHT;\r
485                         return IS_SERVER;\r
486                 })(),\r
487                 BACKEND_WHEN_PNG = ( function(){\r
488                         if( UA.isIE === false || UA.ieVersion > 6 ) return BACKEND;\r
489                         if( UA.VML === true ) return IS_VML;\r
490                         if( pettanr.FLASH === true ) return IS_FLASH;\r
491                         if( pettanr.SILVERLIGHT === true ) return IS_SILVERLIGHT;\r
492                         if( UA.ACTIVEX === true ) return IS_ACTIVEX_SERVER;\r
493                         return IS_SERVER;\r
494                 })(),\r
495                 CLASS_NAME         = 'reversible-image-container',\r
496                 CLASS_NAME_LOADING = CLASS_NAME + ' loading',\r
497                 CLASS_NAME_ERROR   = CLASS_NAME +' error',\r
498                 RETRY_DELAY        = 5000,\r
499                 NUM_RETRY          = 3,\r
500                 ReversibleImageClass,\r
501                 ReversibleImageClassWithPingfix;\r
502         \r
503         var css3Image = function( url, w, h, onLoadCallback ){\r
504                 var elmWrap    = document.createElement( 'div' ),\r
505                         elmImg     = null,\r
506                         retryTimer = null,\r
507                         fetch      = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),\r
508                         instance   = this;\r
509                 elmWrap.className = CLASS_NAME_LOADING;\r
510 \r
511                 function onLoad( _url, _actualW, _actualH ){\r
512                         if( elmWrap === null ) return;\r
513                         elmImg = new Image; // new Image でないと ie6,7 でクラッシュするかも、、、?\r
514                         /*\r
515                          * createElement 直後に append しないと、ie(ActiveX)で img が正しく表示されない.\r
516                          */\r
517                         elmWrap.appendChild( elmImg );\r
518                         elmImg.setAttribute( 'src', url );\r
519                         elmWrap.className = CLASS_NAME;\r
520                         onLoadCallback && onLoadCallback( _url, _actualW, _actualH );\r
521                         onLoadCallback = fetch = null;\r
522                         instance.resize( w, h );\r
523                 }\r
524                 function onError( _url ){\r
525                         if( elmWrap === null ) return;\r
526                         elmWrap.className = CLASS_NAME_ERROR;\r
527                         retryTimer = window.setTimeout( retry, RETRY_DELAY );\r
528                         fetch = null;\r
529                 }\r
530                 function retry(){\r
531                         elmWrap.className = CLASS_NAME_LOADING;\r
532                         fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 );\r
533                 }\r
534 \r
535                 this.elm = elmWrap;\r
536                 this.resize = function( _w, _h ){\r
537                         w = _w !== undefined ? _w : w;\r
538                         h = _h !== undefined ? _h : h;\r
539                         if( elmImg === null ) return;\r
540                         elmImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
541                 }\r
542                 this.destroy = function(){\r
543                         delete instance.destroy;\r
544                         \r
545                         elmImg !== null && elmWrap.removeChild( elmImg );\r
546                         retryTimer !== null && window.clearTimeout( retryTimer );\r
547                         fetch !== null && fetch.stop();\r
548                         elmWrap = elmImg = onLoadCallback = retryTimer = fetch = instance = null;\r
549                 }\r
550         }\r
551                 \r
552         var activexImage = css3Image;\r
553         \r
554         var vmlImage = function( url, w, h, onLoadCallback ){\r
555                 var elmWrap = document.createElement( 'div' ),\r
556                         vmlImg = null,\r
557                         retryTimer = null,\r
558                         fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 ),\r
559                         instance = this;\r
560                 elmWrap.className = CLASS_NAME_LOADING;\r
561                 function onLoad( _url, _actualW, _actualH ){\r
562                         if( elmWrap === null ) return;\r
563                         elmWrap.className = CLASS_NAME;\r
564                         vmlImg = document.createElement( 'v:image' );\r
565                         vmlImg.src = url;\r
566                         onLoadCallback && onLoadCallback( _url, _actualW, _actualH );\r
567                         onLoadCallback = fetch = null;\r
568                         instance.resize( w, h );\r
569                 }\r
570                 function onError( _url ){\r
571                         if( elmWrap === null ) return;\r
572                         elmWrap.className = CLASS_NAME_ERROR;\r
573                         retryTimer = window.setTimeout( retry, RETRY_DELAY );\r
574                         fetch = null;\r
575                 }\r
576                 function retry(){\r
577                         elmWrap.className = CLASS_NAME_LOADING;\r
578                         fetch = FetchImageControl.load( url, onLoad, onError, 100, 10000 );\r
579                 }\r
580                 \r
581                 this.elm = elmWrap;\r
582                 this.resize = function( _w, _h ){\r
583                         w = _w !== undefined ? _w : w;\r
584                         h = _h !== undefined ? _h : h;\r
585                         if( vmlImg === null ) return;\r
586                         vmlImg.style.width  = ( w < 0 ? -w : w ) + 'px';\r
587                         vmlImg.style.height = ( h < 0 ? -h : h ) + 'px';\r
588                         //if( flipH !== _flipH || flipV !== _flipV){\r
589                                 vmlImg.parentNode === elmWrap && elmWrap.removeChild( vmlImg );\r
590                         //}\r
591                                 vmlImg.className = w < 0 || h < 0 ? ( 'img-flip-' + ( w < 0 && h < 0 ? 'vh' : ( w < 0 ? 'h' : 'v'))) : '';\r
592                                 elmWrap.appendChild( vmlImg );\r
593                 }\r
594                 this.destroy = function(){\r
595                         instance.destroy;\r
596                         \r
597                         vmlImg !== null && elmWrap.removeChild( vmlImg );\r
598                         retryTimer !== null && window.clearTimeout( retryTimer );\r
599                         fetch !== null && fetch.stop();\r
600                         elmWrap = vmlImg = onLoadCallback = retryTimer = fetch = instance = null;\r
601                 }\r
602         }\r
603         \r
604         var serverImage = css3Image; // function( url, w, h, onLoadCallback ){}\r
605         \r
606         if( BACKEND === IS_CSS3 )    ReversibleImageClass = css3Image;\r
607         if( BACKEND === IS_VML )     ReversibleImageClass = vmlImage;\r
608         if( BACKEND === IS_ACTIVEX ) ReversibleImageClass = activexImage;\r
609         if( BACKEND === IS_SERVER )  ReversibleImageClass = activexImage;\r
610         \r
611         css3Image = vmlImage = activexImage = activexImage = null;\r
612         \r
613         return {\r
614                 createReversibleImage: function( url, w, h, onLoadCallback){\r
615                         return new ReversibleImageClass( url, w, h, onLoadCallback );\r
616                 }\r
617         }\r
618 })();\r
619 \r
620 /*\r
621  * bind : 製本\r
622  */\r
623 pettanr.bind = ( function(){\r
624         var BIND_WORKER_ARRAY = [],\r
625                 NAMESPACE_CLASSNAME = pettanr.CONST.NS_PETTANR_COMIC + '-',\r
626                 RESOURCE_PICTURE_PATH = pettanr.CONST.RESOURCE_PICTURE_PATH,\r
627                 ELM_DETECT_WIDTH = ( function(){\r
628                         var ret = document.createElement( 'div');\r
629                         ret.style.cssText = 'width: auto;height: 0;padding: 0;margin: 0;display: block;visibility: hidden;float: none;position: static;';\r
630                         return ret;\r
631                 })(),\r
632                 ELM_TITLE_ORIGN = ( function(){\r
633                         \r
634                 })();\r
635 \r
636         /*\r
637          * original\r
638          *   http://d.hatena.ne.jp/uupaa/20090720/1248097177\r
639          */\r
640         var ResizeAgentClass = function( onResizeFunction, opt_elmCheck){\r
641                 var     _globalLock = 0,\r
642                         _size = { w: 0, h: 0 };\r
643                         _ie = !!document.all,\r
644                         _quirks = (document.compatMode || "") !== "CSS1Compat",\r
645                         _ieroot = _quirks ? "body" : "documentElement";\r
646                         _root = opt_elmCheck ? opt_elmCheck : ( _ie ? document[_ieroot] : window);\r
647 \r
648                 function getInnerSize(){\r
649                         return {\r
650                                 w: _root.innerWidth  || _root.clientWidth,\r
651                                 h: _root.innerHeight || _root.clientHeight\r
652                         };\r
653                 };\r
654 \r
655                 function loop(){\r
656                         if (!_globalLock++) {\r
657                                 var size = getInnerSize();\r
658                                 if (_size.w !== size.w || _size.h !== size.h) { // resized\r
659                                         _size = size; // update\r
660                                         onResizeFunction( _size );\r
661                                 };\r
662                                 setTimeout( unlock, 0); // delay unlock\r
663                         };\r
664                         setTimeout(loop, 500);\r
665                 };\r
666                 function unlock(){\r
667                         _globalLock = 0;\r
668                 };\r
669                 loop();\r
670         };\r
671         \r
672         \r
673         var ElementBuilderClass = function( elmTarget, noClassnameMode ){\r
674                 var RIMG_ARRAY     = [],\r
675                         BALLOON_ARRAY  = [];\r
676                 \r
677                 function buildComicElement(){\r
678                         \r
679                 };\r
680                 \r
681                 function buildPanelElement( json, zoom ){\r
682                         var _elmPanel = document.createElement( 'div' ),\r
683                                 _style = {\r
684                                                 'border-width':         typeof json.border === 'number' ? json.border + 'px' : 0,\r
685                                                 width:                          json.width + 'px',\r
686                                                 height:                         json.height + 'px'\r
687                                 },\r
688                                 _cssText = [],\r
689                                 _comicElements = json.panel_elements || [],\r
690                                 _comicElement, _elmImg, _rImg, _rPic,\r
691                                 _balloon, _elmBalloonWrap, _elmText, _text, _speechesAttributes, _key;\r
692                         elmTarget.appendChild( _elmPanel );\r
693                         \r
694                         if( noClassnameMode === true ){\r
695                                 \r
696                         } else {\r
697                                 _elmPanel.className = NAMESPACE_CLASSNAME + 'panel';\r
698                         }\r
699                         for( var _key in _style ){\r
700                                 _cssText.push( _key + ':' + _style[ _key ] );\r
701                         }\r
702                         _elmPanel.style.cssText = _cssText.join( ';' );\r
703                         \r
704                         for( var i=0, l=_comicElements.length; i<l; ++i ){\r
705                                 _comicElement = _comicElements[ i ];\r
706                                 _rPic = _comicElement.resource_picture;\r
707                                 if( _rPic ){\r
708                                         _rImg = pettanr.image.createReversibleImage(\r
709                                                         [ RESOURCE_PICTURE_PATH, _rPic.id, '.', _rPic.ext ].join( ''),\r
710                                                         _comicElement.width, _comicElement.height\r
711                                                 );\r
712                                         _elmImg = _rImg.elm;\r
713                                         _elmPanel.appendChild( _elmImg );\r
714                                         _elmImg.className = NAMESPACE_CLASSNAME + 'image';\r
715                                         _elmImg.style.cssText = [\r
716                                                 'left:',   _comicElement.x, 'px;',\r
717                                                 'top:',    _comicElement.y, 'px;',\r
718                                                 'z-index:',_comicElement.z, ';'\r
719                                         ].join( '');                                    \r
720                                         if( _elmImg.tagName === 'img' ){\r
721                                                 _elmImg.width        = Math.abs( _comicElement.width );\r
722                                                 _elmImg.height       = Math.abs( _comicElement.height );\r
723                                         } else {\r
724                                                 _elmImg.style.width  = Math.abs( _comicElement.width ) + 'px';\r
725                                                 _elmImg.style.height = Math.abs( _comicElement.height ) + 'px';\r
726                                         };\r
727                                         \r
728                                         RIMG_ARRAY.push( _rImg );\r
729                                 } else {\r
730                                         _elmBalloonWrap = document.createElement( 'div' );\r
731                                         _elmPanel.appendChild( _elmBalloonWrap );\r
732                                         _elmBalloonWrap.className = NAMESPACE_CLASSNAME + 'balloon';\r
733                                         _elmBalloonWrap.style.cssText = [\r
734                                                 'width:',   _comicElement.width, 'px;',\r
735                                                 'height:',  _comicElement.height, 'px;',\r
736                                                 'left:',    _comicElement.x, 'px;',\r
737                                                 'top:',     _comicElement.y, 'px;',\r
738                                                 'z-index:', _comicElement.z, ';'\r
739                                         ].join( '');\r
740 \r
741                                         _balloon = pettanr.balloon.createBalloon( _comicElement.width, _comicElement.height, _comicElement.tail );\r
742                                         _elmBalloonWrap.appendChild( _balloon.elm );\r
743                                         \r
744                                         _elmText = document.createElement( 'p' );\r
745                                         _elmBalloonWrap.appendChild( _elmText );\r
746                                         \r
747                                         _elmText.appendChild( document.createElement( 'span' ) );\r
748                                         \r
749                                         _text = '';\r
750                                         _speechesAttributes = _comicElement.speeches_attributes;\r
751                                         if( _speechesAttributes ){\r
752                                                 for( _key in _speechesAttributes ){\r
753                                                         _text += _speechesAttributes[ _key ] && _speechesAttributes[ _key ].content ? _speechesAttributes[ _key ].content : '';\r
754                                                 };\r
755                                         };\r
756                                         _elmText.firstChild.appendChild( document.createTextNode( _text ));\r
757                                         BALLOON_ARRAY.push( _balloon );\r
758                                 };\r
759                         };\r
760                 };\r
761                 \r
762                 function clean(){\r
763                         // clean elmTarget\r
764                         while( RIMG_ARRAY.length > 0 ){\r
765                                 RIMG_ARRAY.shift().destroy();\r
766                         };\r
767                         while( BALLOON_ARRAY.length > 0 ){\r
768                                 BALLOON_ARRAY.shift().destroy();\r
769                         };\r
770                         Util.removeAllChildren( elmTarget );            \r
771                 };\r
772                 \r
773                 this.build = function( json, zoom ){\r
774                         clean();\r
775                         \r
776                         // json is Comic ? Panel ?\r
777                         var panels = json.stories;\r
778                         if( Type.isArray( panels ) === true ){\r
779                                 // comic\r
780                                 for( var i=0, l=panels.length; i<l; ++i ){\r
781                                         buildPanelElement( panels[ i ], zoom );\r
782                                 };\r
783                         } else\r
784                         if( json.panel_elements ){\r
785                                 // panel\r
786                                 buildPanelElement( json, zoom );\r
787                         } else {\r
788                                 // invalid json\r
789                         };\r
790                 };\r
791                 this.zoom = function(){\r
792                         \r
793                 };\r
794                 this.destroy = function(){\r
795                         clean();\r
796                 };\r
797         };\r
798         \r
799         var BindWorkerClass = function( elmTarget, json, zoomSelfEnabled, noClassnameMode ){\r
800                 var builder    = new ElementBuilderClass( elmTarget, noClassnameMode );\r
801                 var elmDetectW = ELM_DETECT_WIDTH.cloneNode( false );\r
802                 var resizer    = null;\r
803                 \r
804                 if( zoomSelfEnabled === true ){\r
805                         elmTarget.parentNode.insertBefore( elmDetectW, elmTarget );\r
806                         resizer = new ResizeAgentClass( onResize, elmDetectW );\r
807                 };\r
808                 function onResize(){\r
809                         \r
810                 };\r
811                 json && typeof json === 'object' && builder.build( json );\r
812                 \r
813                 this.init = function(){\r
814                                 \r
815                 };\r
816                 this.zoom = function(){\r
817                         builder.zoom();\r
818                 };\r
819                 this.json = function( _json ){\r
820                         json = _json;\r
821                         builder.build( _json );\r
822                 };\r
823                 this.targetElement = function(){\r
824                                 \r
825                 };\r
826                 this.layout = function(){\r
827                                 \r
828                 };\r
829                 this.destroy = function(){\r
830                         builder.destroy();\r
831                         elmTarget = json = builder = null;\r
832                 };\r
833         };\r
834         \r
835         return {\r
836                 createBindWorker: function( elmTarget, opt_COMICJSONorPANELJSON, opt_zoomSelfEnabled, opt_noClassnameMode ){\r
837                         var ret = new BindWorkerClass( elmTarget, opt_COMICJSONorPANELJSON, !!opt_zoomSelfEnabled, !!opt_noClassnameMode);\r
838                         BIND_WORKER_ARRAY.push( ret );\r
839                         return ret;\r
840                 },\r
841                 isBindWorkerInstance: function( _bindWorker ){\r
842                         return _bindWorker instanceof BindWorkerClass;\r
843                 }\r
844         }\r
845 })();\r
846 \r
847 var VisualEffect = ( function(){\r
848         \r
849         var ANIMATION_TICKET_ARRAY = [],\r
850                 fpms = 50,\r
851                 TIMER = null,\r
852                 FILTER = 'filter',\r
853                 OPACITY = 'opacity',\r
854                 REG_ALPHA = /alpha\([^)]*\)/i,\r
855                 CORON = ':',\r
856                 EMPTY = '',\r
857                 SEMICORON = ';';\r
858         \r
859         function startAnimation( _elm, _cssObject, _onComplete, _onEnterFrame, _numFrames){\r
860                 var _ticket;\r
861                 for( var i=0, l=ANIMATION_TICKET_ARRAY.length; i<l; ++i){\r
862                         _ticket = ANIMATION_TICKET_ARRAY[ i];\r
863                         if( _ticket.elm === _elm) {\r
864                                 _ticket.destroy();\r
865                                 break;\r
866                         }\r
867                 }\r
868                 //  coputedStyle と _cssObject を比較して , 一致及び非数は削除しつつ コピー\r
869                 //  filter opacity の追加 REG_ALPHA.test( _value ) ? _value.replace( REG_ALPHA, opacity ) : _value + " " + opacity\r
870                 /*\r
871                  * cssObject をまわす\r
872                  * 非数は削除\r
873                  * cssText と一致も削除\r
874                  * coputedStyle と一致も削除\r
875                  * updateTraget ととして記録\r
876                  * 初期値を cssObject としてセット\r
877                  * cssTest にセット zoom もセット\r
878                  */\r
879                 \r
880                 //\r
881                 /*\r
882                         var style = elem.style,\r
883                                 currentStyle = elem.currentStyle,\r
884                                 opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",\r
885                                 filter = currentStyle && currentStyle.filter || style.filter || "";\r
886 \r
887                         // IE has trouble with opacity if it does not have layout\r
888                         // Force it by setting the zoom level\r
889                         style.zoom = 1;\r
890                  */\r
891                 \r
892                 var _currentParameters = [],\r
893                         _offsetParameters = [],\r
894                         _endParameters = [],\r
895                         _targetAttributes = [];\r
896                 \r
897                 ANIMATION_TICKET_ARRAY.push( new AnimationTaskClass(\r
898                         _elm,\r
899                         _currentParameters, _offsetParameters, _endParameters, _targetAttributes,\r
900                         typeof _onComplete === 'function' ? _onComplete : null,\r
901                         typeof _onEnterFrame === 'function' ? _onEnterFrame : null,\r
902                         _numFrames\r
903                 ));\r
904                 \r
905                 if( TIMER === null){\r
906                         TIMER = window.setInterval( onEnterFrame, fpms);\r
907                 }\r
908         }\r
909         function onEnterFrame(){\r
910                 var _ticket,\r
911                         i = 0;\r
912                 while( i<ANIMATION_TICKET_ARRAY.length){\r
913                         _ticket = ANIMATION_TICKET_ARRAY[ i];\r
914                         if( _ticket.onEnterFrame() === true){\r
915                                 _ticket.destroy();\r
916                                 ANIMATION_TICKET_ARRAY.splice( i, 1);\r
917                         } else {\r
918                                 ++i;\r
919                         }\r
920                 }\r
921                 if( ANIMATION_TICKET_ARRAY.length === 0){\r
922                         window.clearInterval( TIMER);\r
923                         TIMER = null;\r
924                 }\r
925         }\r
926         function updateCss( _elm, _updateParameters, _targetAttributes, _numAttributes){\r
927                 if( _numAttributes > 1){\r
928                         var _cssTexts = _elm.style.cssText.split( ';'), _css,\r
929                                 _separate,\r
930                                 _cssObject = {}, _target, _value, _number, _px,\r
931                                 j;\r
932                         for(var i=0, l=_cssTexts.length; i<l; ++i){\r
933                                 _css = _cssTexts[ i];\r
934                                 _separate = _css.indexOf( ':');\r
935                                 if( _separate >= 3){\r
936                                         _target = _css.substr( 0, _separate +1);\r
937                                         _value = _css.substr( _separate +1);\r
938                                         /*\r
939                                          * ie filter\r
940                                          */\r
941                                         if( _target === FILTER){\r
942                                                 for( j=0; j<_numAttributes; ++j){\r
943                                                         if( _targetAttributes[ j] === OPACITY){\r
944                                                                 _cssTexts[ i] = [\r
945                                                                                 _target, ':',\r
946                                                                                 _value.replace( REG_ALPHA, "alpha(opacity=" + _updateParameters[ j] * 100 + ")")\r
947                                                                         ].join( '');\r
948                                                                 break;\r
949                                                         }\r
950                                                 }\r
951                                         /*\r
952                                          * other\r
953                                          */\r
954                                         } else {\r
955                                                 _number = '' + parseFloat( _value);\r
956                                                 _px = _value.indexOf( _number);\r
957                                                 _px = _px > 0 ? _value.substr( _px + _number.length) : '';\r
958                                                 for( j=0; j<_numAttributes; ++j){\r
959                                                         if( _targetAttributes[ j] === _target){\r
960                                                                 _cssTexts[ i] = [ _target, ':', _updateParameters[ j], _px].join( '');\r
961                                                                 break;\r
962                                                         }\r
963                                                 }                                               \r
964                                         }\r
965                                 }\r
966                         }\r
967                         _elm.style.cssText = _cssTexts.join( ';');\r
968                         return; \r
969                 }\r
970                 /*\r
971                  * 一度に update する Attributes が少ない場合、cssText は使用しない.\r
972                  */\r
973         }\r
974         \r
975         var AnimationTaskClass = function( ELM, currentParameters, offsetParameters, endParameters, targetAttributes, onComplete, onEnterFrame, numFrames){\r
976                 var l = targetAttributes.length;\r
977                 return {\r
978                         elm:    ELM,\r
979                         onEnterFrame: function(){\r
980                                 var _updateCss = {}, i;\r
981                                 if( numFrames === 1){\r
982                                         for( i=0; i<l; ++i){\r
983                                                 _updateCss[ targetAttributes[ i]] = endParameters[ i];\r
984                                                 ++i;\r
985                                         }\r
986                                         updateCss( ELM, currentParameters, targetAttributes, l);\r
987                                         onComplete !== null && onComplete();\r
988                                 } else {\r
989                                         for( i=0; i<l; ++i){\r
990                                                 _updateCss[ targetAttributes[ i]] = currentParameters[ i] = Math.floor( currentParameters[ i] + offsetParameters[ i]);\r
991                                                 ++i;\r
992                                         }\r
993                                         updateCss( ELM, currentParameters, targetAttributes, l);\r
994                                         onEnterFrame !== null && onEnterFrame( _updateCss);\r
995                                 }\r
996                                 --numFrames;\r
997                                 return numFrames === 0;\r
998                         },\r
999                         destroy: function(){\r
1000                                 ELM = onComplete = onEnterFrame = null;\r
1001                         }\r
1002                 }\r
1003         }\r
1004         \r
1005         var VisualEffectClass = function( ELM){\r
1006                 var isHtmlElement;\r
1007                 \r
1008                 function registerAnime( _cssObject, _onComplete, _onEnterFrame, _time){\r
1009                         var _numFrames = Math.floor( _time / fpms);\r
1010                         startAnimation( ELM, _cssObject, _onComplete, _onEnterFrame, _numFrames);\r
1011                 }\r
1012                 function startFadeIn(){\r
1013                         \r
1014                 }\r
1015                 function startFadeOut(){\r
1016                         \r
1017                 }\r
1018                 function update( _x, _y, _w, _h){\r
1019                         var _cssText = ELM.style.cssText;\r
1020                         \r
1021                 }\r
1022                 \r
1023                 this.anime = registerAnime;\r
1024                 this.fadeIn = startFadeIn;\r
1025                 this.fadeOut = startFadeOut;\r
1026                 this.update = update;\r
1027         }\r
1028         \r
1029         return {\r
1030                 createVisualEffect: function( _elm){\r
1031                         return new VisualEffectClass( _elm);\r
1032                 },\r
1033                 isInstanceOfVisualEffect: function( _instance){\r
1034                         return _instance instanceof VisualEffectClass;\r
1035                 }\r
1036         }\r
1037 })();\r
1038 \r
1039 \r
1040 \r
1041 /*\r
1042  *  Google Analytics\r
1043  */\r
1044 \r
1045 if( pettanr.LOCAL === false ){\r
1046         var _gaq = _gaq || [];\r
1047         _gaq.push(['_setAccount', 'UA-28023955-1']);\r
1048         _gaq.push(['_trackPageview']);\r
1049         \r
1050         (function() {\r
1051                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
1052                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
1053                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
1054         })();   \r
1055 }