0.4.x/javascripts/common.js

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