public/assets/work.js

   1 /*\r
   2  * pettanR work.js\r
   3  *   version 0.4.7\r
   4  *   \r
   5  * author:\r
   6  *   itozyun\r
   7  * licence:\r
   8  *   3-clause BSD\r
   9  *\r
  10  * \r
  11  * ----------------------------------------\r
  12  * naming rules\r
  13  * \r
  14  *  Class\r
  15  *    ThisIsClass\r
  16  *  \r
  17  *  const\r
  18  *    THIS_IS_CONST = 'this is const';\r
  19  *  \r
  20  *  var\r
  21  *    thisIsVar\r
  22  *   \r
  23  *  value of jquery\r
  24  *    jqWrapper, JQ_WRAPPER\r
  25  *  \r
  26  *  value of dom element\r
  27  *    elmWrapper, ELM_WRAP\r
  28  * \r
  29  *      value of vml element\r
  30  *    vmlImg, VML_SHAPE\r
  31  * \r
  32  */\r
  33 \r
  34 \r
  35 /* ----------------------------------------\r
  36  *   pettanr.editor\r
  37  *    - MENU_BAR_CONTROL\r
  38  *    - HISTORY_CONTROL\r
  39  *    - SAVE_CONTROL\r
  40  *    - TEXT_EDITOR_CONTROL\r
  41  *    - IMAGE_GROUP_EXPROLER\r
  42  *    - WINDOW_CONTROL\r
  43  *       - WindowClass\r
  44  *    - INFOMATION_WINDOW\r
  45  *    - TOOL_BOX_WINDOW\r
  46  *    - HELP_DOCUMENTS_WINDOW\r
  47  *    - PANEL_CONTROL\r
  48  *    - GRID_CONTROL\r
  49  *    - WHITE_GLASS_CONTROL\r
  50  *    - PANEL_CONTROL\r
  51  *    \r
  52  * \r
  53  *    - PanelResizerClass\r
  54  *    - PANEL_RESIZER_TOP\r
  55  *    - PANEL_RESIZER_BOTTOM\r
  56  *    - CONSOLE_CONTROLER\r
  57  * \r
  58  *    - TAIL_OPERATOR\r
  59  *    - RESIZE_OPERATOR\r
  60  *    - POSITION_OPERATOR\r
  61  *    - COMIC_ELEMENT_OPERATION_MANAGER\r
  62  *      \r
  63  *    - ImageElementClass\r
  64  *    - TextElementClass\r
  65  * \r
  66  *    - COMIC_ELEMENT_CONTROL\r
  67  * \r
  68  * \r
  69  */\r
  70 pettanr.editor = ( function(){\r
  71 \r
  72         var COMIC_ELEMENT_TYPE_IMAGE = 0,\r
  73                 COMIC_ELEMENT_TYPE_TEXT = 1,\r
  74                 MOUSE_LISTENER_ARRAY = [],\r
  75                 COMIC_ELEMENT_ARRAY = [],\r
  76                 ELM_MOUSE_EVENT_CHATCHER = document.getElementById( 'mouse-operation-catcher'),\r
  77                 MIN_PANEL_HEIGHT = 20,\r
  78                 MIN_ELEMENT_SIZE = 19,\r
  79                 MOUSE_HIT_AREA = 10,\r
  80                 jqMouseEventChacher,\r
  81                 jqEditor,\r
  82                 windowW, windowH,\r
  83                 currentListener = null,\r
  84                 currentCursor = '',\r
  85                 option,\r
  86                 log;\r
  87 \r
  88 /* ----------------------------------------\r
  89  * MENU BAR\r
  90  *  - mouseEventListener\r
  91  *  - controler\r
  92  * \r
  93  * div\r
  94  *   div.title\r
  95  *   ul\r
  96  *     li\r
  97  *        a\r
  98  *          span\r
  99  *          kbd shortcut\r
 100  */\r
 101         var MENU_BAR_CONTROL = ( function(){\r
 102                 var ELM_BAR = document.getElementById( 'menu-bar'),\r
 103                         ELM_ITEM_CLASSNAME = 'menu-bar-item',\r
 104                         ELM_ITEM_ORIGN = ( function(){\r
 105                                 var ret = document.createElement( 'div'),\r
 106                                         div = document.createElement( 'div'),\r
 107                                         ul = document.createElement( 'ul');\r
 108                                 ret.className = ELM_ITEM_CLASSNAME;\r
 109                                 ret.appendChild( div);\r
 110                                 ret.appendChild( ul);\r
 111                                 return ret;\r
 112                         })(),\r
 113                         ELM_SELECTION_ORIGN = ( function(){\r
 114                                 var ret = document.createElement( 'li'),\r
 115                                         a = document.createElement( 'a'),\r
 116                                         span = document.createElement( 'span'),\r
 117                                         key = document.createElement( 'kbd');\r
 118                                 a.appendChild( span);\r
 119                                 a.appendChild( key);\r
 120                                 ret.appendChild( a);\r
 121                                 a.href = '#';\r
 122                                 return ret;\r
 123                         })(),\r
 124                         ITEM_ARRAY = [],\r
 125                         barH = pettanr.util.getElementSize( ELM_BAR).height,\r
 126                         itemW = pettanr.util.getElementSize( ELM_ITEM_ORIGN).width,\r
 127                         selectionW = pettanr.util.getElementSize( ELM_ITEM_ORIGN.getElementsByTagName( 'ul')[ 0]).width,\r
 128                         jqStage, jqBar;\r
 129                 ELM_BAR.style.top = ( -barH) +'px';\r
 130 \r
 131                 var MenubarSelectionClass = function( container, title, shortcut, visible, separateAfter){\r
 132                         var ELM_WRAPPER = ELM_SELECTION_ORIGN.cloneNode( true),\r
 133                                 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'span')[ 0],\r
 134                                 elmShortcut = ELM_WRAPPER.getElementsByTagName( 'kbd')[ 0];\r
 135                                 \r
 136                         if( shortcut){\r
 137                                 elmShortcut.innerHTML = shortcut;\r
 138                         } else {\r
 139                                 elmShortcut.parentNode.removeChild( elmShortcut);\r
 140                         }\r
 141                         elmShortcut = null;\r
 142                         \r
 143                         container.appendChild( ELM_WRAPPER);\r
 144                         \r
 145                         updateTitle( title);\r
 146                         updateVisible( visible);\r
 147                         \r
 148                         function updateTitle( _title){\r
 149                                 ELM_TITLE.innerHTML = title = _title;\r
 150                         }\r
 151                         function updateVisible( _visible){\r
 152                                 if( _visible !== undefined){\r
 153                                         visible = !!_visible;\r
 154                                         ELM_WRAPPER.className = visible === true ? '' : 'disabled';\r
 155                                 };\r
 156                         }\r
 157                         return {\r
 158                                 elm: ELM_WRAPPER,\r
 159                                 title: function( _title){\r
 160                                         _title !== undefined && updateTitle( _title);\r
 161                                         return title;\r
 162                                 },\r
 163                                 visible: function( _visible){\r
 164                                         visible !== !!_visible && updateVisible( _visible);\r
 165                                         return visible;\r
 166                                 },\r
 167                                 separateAfter: separateAfter\r
 168                         }\r
 169                 }\r
 170 \r
 171                 var MenuBarItemClass = function( title){\r
 172                         var ELM_WRAPPER = ELM_ITEM_ORIGN.cloneNode( true),\r
 173                                 ELM_TITLE = ELM_WRAPPER.getElementsByTagName( 'div')[ 0],\r
 174                                 ELM_SELECTION = ELM_WRAPPER.getElementsByTagName( 'ul')[ 0],\r
 175                                 INDEX = ITEM_ARRAY.length,\r
 176                                 SELECTION_CALLBACK_ARRAY = [],\r
 177                                 numSelection = 0,\r
 178                                 visible = false;\r
 179                         ELM_TITLE.innerHTML = title;\r
 180                         \r
 181                         ELM_WRAPPER.style.left = ( itemW * INDEX) +'px';\r
 182                         ELM_BAR.appendChild( ELM_WRAPPER);\r
 183                         \r
 184                         function onClick( e){\r
 185                                 var that = this,\r
 186                                         i = pettanr.util.getChildIndex( this.parentNode, this);\r
 187                                 i !== -1 && this.className !== 'disabled' && SELECTION_CALLBACK_ARRAY[ i]( i);\r
 188                                 e.stopPropagation();\r
 189                                 return false;\r
 190                         }\r
 191                         return {\r
 192                                 elm: ELM_WRAPPER,\r
 193                                 onClick: onClick,\r
 194                                 init: function(){\r
 195                                         $( ELM_SELECTION).children( 'li').click( onClick);\r
 196                                         delete this.init;\r
 197                                 },\r
 198                                 show: function(){\r
 199                                         if( visible === true) return;\r
 200                                         jqStage.append( ELM_WRAPPER);\r
 201                                         ELM_WRAPPER.className = ELM_ITEM_CLASSNAME +'-focus';\r
 202                                         this.onShow && setTimeout( this.onShow, 0);\r
 203                                         visible = true;\r
 204                                 },\r
 205                                 hide: function(){\r
 206                                         if( visible === false) return;\r
 207                                         ELM_BAR.appendChild( ELM_WRAPPER);\r
 208                                         ELM_WRAPPER.className = ELM_ITEM_CLASSNAME;\r
 209                                         this.onHide && setTimeout( this.onHide, 0);\r
 210                                         visible = false;\r
 211                                 },\r
 212                                 createSelection: function( title, shortcut, callback, visible, separateBefore, separateAfter){\r
 213                                         var ret = MenubarSelectionClass.apply( {}, [ ELM_SELECTION, title, shortcut, visible, separateAfter]),\r
 214                                                 before = SELECTION_CALLBACK_ARRAY.length > 0 ? SELECTION_CALLBACK_ARRAY[ SELECTION_CALLBACK_ARRAY.length -1] : null;\r
 215                                         SELECTION_CALLBACK_ARRAY.push( callback);\r
 216                                         if( before !== null && ( separateBefore === true || before.separateAfter === true)){\r
 217                                                 ret.elm.style.borderTop = '1px solid #ccc';\r
 218                                         }\r
 219                                         return ret;\r
 220                                 }\r
 221                         }\r
 222                 }\r
 223 \r
 224                 \r
 225                 function createMenubarItem( title){\r
 226                         var _item = new MenuBarItemClass( title);\r
 227                         ITEM_ARRAY.push( _item);\r
 228                         return _item;\r
 229                 }\r
 230                 return {\r
 231                         init: function(){\r
 232                                 jqStage = jqEditor;\r
 233                                 jqBar = $( ELM_BAR).animate( { top: 0});\r
 234 \r
 235                                 var l = ITEM_ARRAY.length;\r
 236                                 for( var i=0; i<l; ++i){\r
 237                                         ITEM_ARRAY[ i].init();\r
 238                                 }\r
 239 \r
 240                                 delete MENU_BAR_CONTROL.init;\r
 241                         },\r
 242                         open: function(){\r
 243                                 MENU_BAR_CONTROL.init && MENU_BAR_CONTROL.init();\r
 244                                 // ELM_BAR.style.top = ( -barH) +'px';\r
 245                                 // anime\r
 246                         },\r
 247                         close: function(){\r
 248                                 var l = ITEM_ARRAY.length;\r
 249                                 for( var i=0; i<l; ++i){\r
 250                                         ITEM_ARRAY[ i].hide();\r
 251                                 }\r
 252                         },\r
 253                         h: barH,\r
 254                         onMouseMove: function( _mouseX, _mouseY){\r
 255                                 if( barH >= _mouseY){\r
 256                                         return true;\r
 257                                 }\r
 258                                 var l = ITEM_ARRAY.length;\r
 259                                 for( var i=0; i<l; ++i){\r
 260                                         ITEM_ARRAY[ i].hide();\r
 261                                 }\r
 262                                 return false;\r
 263                         },\r
 264                         onMouseUp: function( _mouseX, _mouseY){\r
 265                                 return false;\r
 266                         },\r
 267                         onMouseDown: function( _mouseX, _mouseY){\r
 268                                 var l = ITEM_ARRAY.length;\r
 269                                 if( barH < _mouseY || itemW * l < _mouseX) return false;\r
 270                                 for( var i=0; i<l; ++i){\r
 271                                         if( i * itemW <= _mouseX && _mouseX < ( i +1) * itemW){\r
 272                                                 ITEM_ARRAY[ i].show();\r
 273                                         } else {\r
 274                                                 ITEM_ARRAY[ i].hide();\r
 275                                         }\r
 276                                 }\r
 277                                 return true;\r
 278                         },\r
 279                         busy: function( _busy){\r
 280                                 return false;\r
 281                         },\r
 282                         onWindowResize: function( _windowW, _windowH){\r
 283                                 \r
 284                         },\r
 285                         QUIT: createMenubarItem( 'Quit'),\r
 286                         EDIT: createMenubarItem( 'Edit'),\r
 287                         WINDOW: createMenubarItem( 'Window'),\r
 288                         HELP: pettanr.util.extend( createMenubarItem( 'Help'), {\r
 289                                         createAjaxSelection: function( callback){\r
 290                                                 var elmLoading = document.createElement( 'li'),\r
 291                                                         that = this,\r
 292                                                         elmSelection = this.elm.getElementsByTagName( 'ul')[ 0];\r
 293                                                 elmSelection.appendChild( elmLoading);\r
 294                                                 elmLoading.className = 'loading';\r
 295                                                 elmLoading.style.height = '90px';                                                       \r
 296 \r
 297                                                 this.onShow = callback;\r
 298                                                 callback = null;\r
 299                                                 \r
 300                                                 delete this.createAjaxSelection;\r
 301                                                 return function(){\r
 302                                                         elmSelection.removeChild( elmLoading);\r
 303                                                         $( elmSelection).children( 'li').click( that.onClick);\r
 304                                                         elmLoading = elmSelection = null;\r
 305                                                         delete that.onShow;\r
 306                                                         that = null;\r
 307                                                 }\r
 308                                         }\r
 309                                 })\r
 310                 }\r
 311         })();\r
 312 \r
 313 \r
 314 /* ----------------------------------------\r
 315  * HISTORY_CONTROL\r
 316  *  - controler\r
 317  */\r
 318         var HISTORY_CONTROL = ( function() {\r
 319                 var     STACK_BACK = [],\r
 320                         STACK_FORWARD = [],\r
 321                         MENUBAR_BACK = MENU_BAR_CONTROL.EDIT.createSelection( 'back', 'ctrl + z', back, false),\r
 322                         MENUBAR_FORWARD = MENU_BAR_CONTROL.EDIT.createSelection( 'forward', 'ctrl + y', forward, false, false, true),\r
 323                         log;\r
 324                         \r
 325                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, false, true, back);       // ctrl + Z\r
 326                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 90, true, true, forward);     // ctrl + shift + Z\r
 327                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 89, false, true, forward); // ctrl + Y\r
 328 \r
 329                 function back(){\r
 330                         /*\r
 331                          * currentを控えてSTACK_FORWARD.push(current)\r
 332                          * STACK_BACK.pop()を実行してcurrentに\r
 333                          */\r
 334                         if( STACK_BACK.length === 0) return;\r
 335 \r
 336                         var state = STACK_BACK.pop();\r
 337                         state && state.fn( state.argBack);\r
 338                         MENUBAR_BACK.visible( STACK_BACK.length !== 0);\r
 339                         SAVE_CONTROL.panelUpdated( STACK_BACK.length !== 0);\r
 340                         \r
 341                         STACK_FORWARD.push( state);\r
 342                         MENUBAR_FORWARD.visible( true);\r
 343                 }\r
 344                 function forward(){\r
 345                         if( STACK_FORWARD.length === 0) return;\r
 346                         \r
 347                         var state = STACK_FORWARD.pop();\r
 348                         state.fn( state.argForword);\r
 349                         MENUBAR_FORWARD.visible( STACK_FORWARD.length !== 0);\r
 350                         \r
 351                         STACK_BACK.push( state);\r
 352                         MENUBAR_BACK.visible( true);\r
 353                         SAVE_CONTROL.panelUpdated( true);\r
 354                 }\r
 355                 function destroyStack( _stack, _destroy){\r
 356                         _stack.fn = null;\r
 357                         \r
 358                         var     _argBack = _stack.argBack,\r
 359                                 _argForword = _stack.argForword,\r
 360                                 _value;\r
 361                         if( typeof _argBack.length === 'number'){ // isArray\r
 362                                 while( _argBack.length > 0){\r
 363                                         _value = _argBack.shift();\r
 364                                         _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
 365                                 }\r
 366                         }\r
 367                         if( typeof _argForword.length === 'number'){\r
 368                                 while( _argForword.length > 0){\r
 369                                         _value = _argForword.shift();\r
 370                                         _destroy === true && typeof _value.destroy === 'function' && _value.destroy();\r
 371                                 }                                               \r
 372                         }                       \r
 373                 }\r
 374                 return {\r
 375                         init: function(){\r
 376                                 log = $( '#history-log');\r
 377                                 delete HISTORY_CONTROL.init;\r
 378                         },\r
 379                         open: function(){\r
 380                                 HISTORY_CONTROL.init && HISTORY_CONTROL.init();\r
 381                         },\r
 382                         close: function(){\r
 383                                 MENUBAR_BACK.visible( false);\r
 384                                 MENUBAR_FORWARD.visible( false);\r
 385                         while( STACK_BACK.length > 0){\r
 386                                         destroyStack( STACK_BACK.shift(), true);\r
 387                                 }\r
 388                         while( STACK_FORWARD.length > 0){\r
 389                                         destroyStack( STACK_FORWARD.shift(), true);\r
 390                                 }\r
 391                         },\r
 392                     saveState: function( _function, _argBack, _argForword, _destroy) {\r
 393                         STACK_BACK.push( {\r
 394                                 fn:                     _function,\r
 395                                 argBack:        _argBack,\r
 396                                         argForword:     _argForword,\r
 397                                         destroy:        _destroy\r
 398                         });\r
 399                         MENUBAR_BACK.visible( true);\r
 400                                 SAVE_CONTROL.panelUpdated( true);\r
 401                                 \r
 402                                 var _stack;\r
 403                         while( STACK_FORWARD.length > 0){\r
 404                                         _stack = STACK_FORWARD.shift();\r
 405                                         destroyStack( _stack, _stack.destroy);\r
 406                                 }\r
 407                                 MENUBAR_FORWARD.visible( false);\r
 408                     }           \r
 409                 }\r
 410         })();\r
 411 \r
 412 \r
 413 /* ----------------------------------------\r
 414  * OUTPUT_CONSOLE\r
 415  *  - overlay\r
 416  */\r
 417         var OUTPUT_CONSOLE = ( function(){\r
 418                 var jqWrap, jqOutputArea,\r
 419                         ID = 'outputConsole';\r
 420                 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
 421                 \r
 422                 function close(){\r
 423                         jqWrap.hide();\r
 424                         jqOutputArea.val('');\r
 425                 }\r
 426                 function clickOK(){\r
 427                         pettanr.overlay.hide();\r
 428                         close();                        \r
 429                 }\r
 430                 return {\r
 431                         init: function(){\r
 432                                 this.jqWrap = jqWrap = $( '#output-console-wrapper').hide();\r
 433                                 jqOutputArea = $( '#output-area');\r
 434                                 delete OUTPUT_CONSOLE.init;\r
 435                         },\r
 436                         jqWrap: null,\r
 437                         show: function( _text){\r
 438                                 jqWrap.show();\r
 439 \r
 440                                 \r
 441                                 pettanr.overlay.show( this);\r
 442                                 jqWrap.css(\r
 443                                         {\r
 444                                                 left:   Math.floor( ( windowW -jqWrap.width()) /2),\r
 445                                                 top:    Math.floor( ( windowH -jqWrap.height()) /2)\r
 446                                         }\r
 447                                 );                              \r
 448                                 \r
 449                                 jqOutputArea.val( _text).focus();\r
 450                         },\r
 451                         onWindowResize: function(){\r
 452                                 jqWrap.css(\r
 453                                         {\r
 454                                                 left:   Math.floor( ( windowW -jqWrap.width()) /2),\r
 455                                                 top:    Math.floor( ( windowH -jqWrap.height()) /2)\r
 456                                         }\r
 457                                 );\r
 458                         },\r
 459                         onClose: close,\r
 460                         ID: 'textEditor'\r
 461                 }\r
 462         })();\r
 463 \r
 464 /* ----------------------------------------\r
 465  * SAVE_CONTROL\r
 466  *  - controler\r
 467  */\r
 468         var SAVE_CONTROL = ( function(){\r
 469                 var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),\r
 470                         SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),\r
 471                         SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),\r
 472                         SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),\r
 473                         QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
 474                         updated = false;\r
 475                 \r
 476                 function quit(){\r
 477                         // 本来は os.application.close();\r
 478                         pettanr.view.show( 'entrance');\r
 479                 }\r
 480                 \r
 481                 function outputAsHtml(){\r
 482                         OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsHTML( true, false));\r
 483                 }\r
 484                 function outputAsJsonString(){\r
 485                         OUTPUT_CONSOLE.show( COMIC_ELEMENT_CONTROL.getAsJsonString());\r
 486                 }\r
 487                 return {\r
 488                         open: function(){},\r
 489                         close: function(){},\r
 490                         quit: quit,\r
 491                         panelUpdated: function( _updated){\r
 492                                 if( _updated !== undefined && updated !== _updated){\r
 493                                         SAVE.visible( !!_updated);\r
 494                                         SAVE_AND_QUIT.visible( !!_updated);\r
 495                                         updated = !!_updated;\r
 496                                 }\r
 497                                 return updated;\r
 498                         },\r
 499                         save: function(){\r
 500                                 \r
 501                         }\r
 502                 }\r
 503         })();\r
 504 \r
 505 /* ----------------------------------------\r
 506  * Text Editor\r
 507  *  - overlay\r
 508  */\r
 509         var TEXT_EDITOR_CONTROL = ( function(){\r
 510                 var jqWrap, jqTextarea, jqButton,\r
 511                         textElement, onUpdateFunction,\r
 512                         ID = 'textEditor';\r
 513                 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
 514                 \r
 515                 function close(){\r
 516                         jqWrap.hide();\r
 517                         textElement = onUpdateFunction = null;          \r
 518                 }\r
 519                 function clickOK(){\r
 520                         pettanr.overlay.hide();\r
 521                         textElement && textElement.text( jqTextarea.val());\r
 522                         onUpdateFunction && onUpdateFunction( textElement);\r
 523                         close();                        \r
 524                 }\r
 525                 return {\r
 526                         init: function(){\r
 527                                 this.jqWrap = jqWrap = $( '#speach-editor-wrapper').hide();\r
 528                                 jqTextarea = $( '#speach-editor').keydown( function( e){\r
 529                                         if( e.keyCode === 69 && e.shiftKey === false && e.ctrlKey === true){\r
 530                                                 clickOK();\r
 531                                                 e.preventDefault();\r
 532                                         e.keyCode = 0;\r
 533                                         e.cancelBubble = true;\r
 534                                         e.returnValue = false;\r
 535                                                 return false;\r
 536                                         }\r
 537                                 });\r
 538                                 jqButton = $( '#speach-edit-complete-button').click( clickOK);\r
 539                                 delete TEXT_EDITOR_CONTROL.init;\r
 540                         },\r
 541                         jqWrap: null,\r
 542                         show: function( _textElement, _onUpdateFunction){\r
 543                                 textElement = _textElement;\r
 544                                 onUpdateFunction = _onUpdateFunction || null;\r
 545                                 pettanr.overlay.show( this);\r
 546                                 var h = _textElement.h;\r
 547                                 jqWrap.show().css( {\r
 548                                         left:                   _textElement.x +PANEL_CONTROL.x(),\r
 549                                         top:                    _textElement.y +PANEL_CONTROL.y(),\r
 550                                         width:                  _textElement.w,\r
 551                                         height:                 h\r
 552                                 });\r
 553                                 jqTextarea.val( _textElement.text()).focus();\r
 554                                 \r
 555                                 /*\r
 556                                  * ie6,7は、textarea { width:100%}でも高さが変わらない。rowsを設定。\r
 557                                  */\r
 558                                 pettanr.ua.isIE === true && pettanr.ua.ieVersion <= 7 && setTimeout( function(){\r
 559                                         var rows = 0;\r
 560                                         while( jqTextarea.height() < h){\r
 561                                                 rows++;\r
 562                                                 jqTextarea.attr( 'rows', rows);\r
 563                                         }\r
 564                                         rows > 1 && jqTextarea.attr( 'rows', rows -1);\r
 565                                 }, 0);\r
 566                         },\r
 567                         onWindowResize: function(){\r
 568                                 textElement && this.show( textElement);\r
 569                         },\r
 570                         onClose: close,\r
 571                         ID: ID\r
 572                 }\r
 573         })();\r
 574 \r
 575 /* ----------------------------------------\r
 576  * Image Group Exproler\r
 577  *  - overlay\r
 578  */\r
 579         var IMAGE_GROUP_EXPROLER = ( function(){\r
 580                 var ICON_ARRAY = [],\r
 581                         WHEEL_DELTA = 64,\r
 582                         containerW, containerH, wrapX,\r
 583                         jqWrap, jqContainer, jqItemOrigin,\r
 584                         itemW, itemH,\r
 585                         jqName, jqButton, buttonW,\r
 586                         //onUpdateFunction,\r
 587                         _g_onUpdateFunction,\r
 588                         winW,\r
 589                         onEnterInterval = null;\r
 590                 \r
 591                 var BASE_PATH = pettanr.LOCAL === false ? 'http://pettan.heroku.com/resource_pictures/' : 'resource_pictures/',\r
 592                         THUMB_PATH = BASE_PATH, // + 'thumbnail/',\r
 593                         LIMIT_FILESIZE = 1024 * 10; // 10KB\r
 594                 var IMAGE_DATA = {\r
 595                                 pen001: [\r
 596                                     {\r
 597                                         "created_at": "2011-11-13T08:57:39Z", \r
 598                                         "ext": "png", \r
 599                                         "filesize": 9969, \r
 600                                         "height": 463, \r
 601                                         "id": 1, \r
 602                                         "updated_at": "2011-11-13T08:57:39Z", \r
 603                                         "width": 441\r
 604                                     }, \r
 605                                     {\r
 606                                         "created_at": "2011-11-13T08:57:54Z", \r
 607                                         "ext": "gif", \r
 608                                         "filesize": 5418, \r
 609                                         "height": 500, \r
 610                                         "id": 2, \r
 611                                         "updated_at": "2011-11-13T08:57:54Z", \r
 612                                         "width": 500\r
 613                                     }, \r
 614                                     {\r
 615                                         "created_at": "2011-11-13T08:58:06Z", \r
 616                                         "ext": "gif", \r
 617                                         "filesize": 8758, \r
 618                                         "height": 464, \r
 619                                         "id": 3, \r
 620                                         "updated_at": "2011-11-13T08:58:06Z", \r
 621                                         "width": 366\r
 622                                     }, \r
 623                                     {\r
 624                                         "created_at": "2011-11-13T08:58:23Z", \r
 625                                         "ext": "gif", \r
 626                                         "filesize": 9383, \r
 627                                         "height": 480, \r
 628                                         "id": 4, \r
 629                                         "updated_at": "2011-11-13T08:58:23Z", \r
 630                                         "width": 392\r
 631                                     }, \r
 632                                     {\r
 633                                         "created_at": "2011-11-13T08:58:33Z", \r
 634                                         "ext": "gif", \r
 635                                         "filesize": 11061, \r
 636                                         "height": 500, \r
 637                                         "id": 5, \r
 638                                         "updated_at": "2011-11-13T08:58:33Z", \r
 639                                         "width": 500\r
 640                                     }, \r
 641                                     {\r
 642                                         "created_at": "2011-11-20T09:50:43Z", \r
 643                                         "ext": "gif", \r
 644                                         "filesize": 1131, \r
 645                                         "height": 126, \r
 646                                         "id": 6, \r
 647                                         "updated_at": "2011-11-20T09:50:43Z", \r
 648                                         "width": 259\r
 649                                     }, \r
 650                                     {\r
 651                                         "created_at": "2011-11-20T09:50:55Z", \r
 652                                         "ext": "gif", \r
 653                                         "filesize": 1125, \r
 654                                         "height": 126, \r
 655                                         "id": 7, \r
 656                                         "updated_at": "2011-11-20T09:50:55Z", \r
 657                                         "width": 259\r
 658                                     }, \r
 659                                     {\r
 660                                         "created_at": "2011-11-20T11:33:12Z", \r
 661                                         "ext": "gif", \r
 662                                         "filesize": 17919, \r
 663                                         "height": 600, \r
 664                                         "id": 8, \r
 665                                         "updated_at": "2011-11-20T11:33:12Z", \r
 666                                         "width": 800\r
 667                                     },\r
 668                                     {\r
 669                                         "created_at": "2011-11-20T11:33:12Z", \r
 670                                         "ext": "gif", \r
 671                                         "filesize": 17919, \r
 672                                         "height": 600, \r
 673                                         "id": 9, \r
 674                                         "updated_at": "2011-11-20T11:33:12Z", \r
 675                                         "width": 800\r
 676                                     },\r
 677                                     {\r
 678                                         "created_at": "2011-11-20T11:33:12Z", \r
 679                                         "ext": "gif", \r
 680                                         "filesize": 17919, \r
 681                                         "height": 600, \r
 682                                         "id": 10, \r
 683                                         "updated_at": "2011-11-20T11:33:12Z", \r
 684                                         "width": 800\r
 685                                     },\r
 686                                     {\r
 687                                         "created_at": "2011-11-20T11:33:12Z", \r
 688                                         "ext": "gif", \r
 689                                         "filesize": 17919, \r
 690                                         "height": 600, \r
 691                                         "id": 11, \r
 692                                         "updated_at": "2011-11-20T11:33:12Z", \r
 693                                         "width": 800\r
 694                                     },\r
 695                                     {\r
 696                                         "created_at": "2011-11-22T09:17:20Z", \r
 697                                         "ext": "gif", \r
 698                                         "filesize": 9055, \r
 699                                         "height": 473, \r
 700                                         "id": 12, \r
 701                                         "updated_at": "2011-11-22T09:17:20Z", \r
 702                                         "width": 405\r
 703                                     }, \r
 704                                     {\r
 705                                         "created_at": "2011-11-22T10:11:07Z", \r
 706                                         "ext": "gif", \r
 707                                         "filesize": 8758, \r
 708                                         "height": 464, \r
 709                                         "id": 13, \r
 710                                         "updated_at": "2011-11-22T10:11:07Z", \r
 711                                         "width": 366\r
 712                                     }, \r
 713                                     {\r
 714                                         "created_at": "2011-11-24T09:05:12Z", \r
 715                                         "ext": "gif", \r
 716                                         "filesize": 6431, \r
 717                                         "height": 386, \r
 718                                         "id": 16, \r
 719                                         "updated_at": "2011-11-24T09:05:12Z", \r
 720                                         "width": 453\r
 721                                     }, \r
 722                                     {\r
 723                                         "created_at": "2011-11-26T04:52:12Z",\r
 724                                         "ext": "gif", \r
 725                                         "filesize": 6421, \r
 726                                         "height": 426, \r
 727                                         "id": 17, \r
 728                                         "updated_at": "2011-11-26T04:52:12Z", \r
 729                                         "width": 306\r
 730                                     }, \r
 731                                     {\r
 732                                         "created_at": "2011-11-26T04:52:12Z",\r
 733                                         "ext": "gif", \r
 734                                         "filesize": 6421, \r
 735                                         "height": 426, \r
 736                                         "id": 18, \r
 737                                         "updated_at": "2011-11-26T04:52:12Z", \r
 738                                         "width": 306\r
 739                                     }, \r
 740                                     {\r
 741                                         "created_at": "2011-11-26T04:52:12Z",\r
 742                                         "ext": "gif", \r
 743                                         "filesize": 6421, \r
 744                                         "height": 426, \r
 745                                         "id": 19, \r
 746                                         "updated_at": "2011-11-26T04:52:12Z", \r
 747                                         "width": 306\r
 748                                     }, \r
 749                                     {\r
 750                                         "created_at": "2011-11-26T04:52:12Z",\r
 751                                         "ext": "gif", \r
 752                                         "filesize": 6421, \r
 753                                         "height": 426, \r
 754                                         "id": 20, \r
 755                                         "updated_at": "2011-11-26T04:52:12Z", \r
 756                                         "width": 306\r
 757                                     }, \r
 758                                     {\r
 759                                         "created_at": "2011-11-26T04:52:12Z",\r
 760                                         "ext": "gif", \r
 761                                         "filesize": 6421, \r
 762                                         "height": 426, \r
 763                                         "id": 21, \r
 764                                         "updated_at": "2011-11-26T04:52:12Z",\r
 765                                         "width": 306\r
 766                                     }\r
 767                                 ]\r
 768                         }\r
 769                 \r
 770                 var ImageGroupIconClass = function( INDEX, data){\r
 771                         var JQ_ICON_WRAP = jqItemOrigin.clone( true),\r
 772                                 SRC = [ BASE_PATH, data.id, '.', data.ext].join( ''),\r
 773                                 LOW_SRC = data.filesize && data.filesize > LIMIT_FILESIZE ? [ THUMB_PATH, data.id, '.', data.ext].join( '') : null,\r
 774                                 reversibleImage = null,\r
 775                                 onEnterFlag = false,\r
 776                                 imgW, imgH;\r
 777                         JQ_ICON_WRAP.children( 'div').eq( 0).html( data.filesize + 'bytes');\r
 778                         jqContainer.append( JQ_ICON_WRAP.css( { left: INDEX * itemW}));\r
 779                         \r
 780                         function onImageLoad( url, _imgW, _imgH){\r
 781                                 if( reversibleImage === null) {\r
 782                                         alert( url);\r
 783                                         return;\r
 784                                 }\r
 785                                 imgW = _imgW || data.width || 64;\r
 786                                 imgH = _imgH || data.height || 64;\r
 787                                 JQ_ICON_WRAP.children( 'div').eq( 1).html( imgW +'x' +imgH);\r
 788                                 var zoom = 128 /( imgW > imgH ? imgW : imgH),\r
 789                                         h = Math.floor( imgH *zoom),\r
 790                                         w = Math.floor( imgW *zoom);\r
 791                                 reversibleImage.elm.style.width = w +'px';\r
 792                                 reversibleImage.elm.style.height = h +'px';\r
 793                                 reversibleImage.elm.style.margin = Math.floor( itemH /2 -h /2)+'px 0 0';\r
 794                                 reversibleImage.resize( w, h);\r
 795                                 JQ_ICON_WRAP.click( onClick);\r
 796                         }\r
 797                         \r
 798                         function onClick( e){\r
 799                                 pettanr.overlay.hide();\r
 800                                 if( _g_onUpdateFunction) {\r
 801                                         if( LOW_SRC === null){\r
 802                                                 window[ _g_onUpdateFunction]( SRC, imgW, imgH);\r
 803                                                 window[ _g_onUpdateFunction] = null;\r
 804                                         } else {\r
 805                                                 var _onLoad = pettanr.util.createGlobalFunc( [\r
 806                                                                 'function( url, w, h){',\r
 807                                                                         'window["', _g_onUpdateFunction, '"]( url, w || ', data.width,',  h || ', data.height,');',\r
 808                                                                         'window["', _g_onUpdateFunction, '"] = null;',\r
 809                                                                 '}'\r
 810                                                         ].join( '')),\r
 811                                                         _onError = pettanr.util.createGlobalFunc( [\r
 812                                                                 'function( url){',\r
 813                                                                         'window["', _g_onUpdateFunction, '"]( url, ', data.width || 64 ,', ', data.height || 64,');',\r
 814                                                                         'window["', _g_onUpdateFunction, '"] = null;',\r
 815                                                                 '}'\r
 816                                                         ].join( ''));\r
 817                                                 pettanr.util.loadImage( SRC, window[ _onLoad], window[ _onError]);\r
 818                                                 window[ _onLoad] = window[ _onError] = undefined;\r
 819                                         }\r
 820                                 }\r
 821                                 close();\r
 822                         }\r
 823                         \r
 824                         return {\r
 825                                 onEnter: function(){\r
 826                                         if( onEnterFlag === true) return;\r
 827                                         reversibleImage = pettanr.image.createReversibleImage( LOW_SRC || SRC, itemW, itemH, onImageLoad);\r
 828                                         JQ_ICON_WRAP.children( 'img').replaceWith( reversibleImage.elm);\r
 829                                         onEnterFlag = true;                                             \r
 830                                 },\r
 831                                 destroy: function(){\r
 832                                         reversibleImage && reversibleImage.destroy();\r
 833                                         JQ_ICON_WRAP.remove();\r
 834                                         reversibleImage = JQ_ICON_WRAP = null;\r
 835                                         delete this.destroy;\r
 836                                 }\r
 837                         }\r
 838                 }\r
 839                 \r
 840                 function close(){\r
 841                         jqContainer.stop().animate( {\r
 842                                         height: 0,\r
 843                                         top:    Math.floor( windowH /2)\r
 844                                 }, function(){\r
 845                                         jqWrap.hide()\r
 846                                 });\r
 847                         while( ICON_ARRAY.length > 0){\r
 848                                 ICON_ARRAY.shift().destroy();\r
 849                         }\r
 850                         onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
 851                         onEnterInterval = _g_onUpdateFunction = null;\r
 852                 }\r
 853                 function onEnterShowImage(){\r
 854                         var l = ICON_ARRAY.length,\r
 855                                 _start = -wrapX /itemW -1,\r
 856                                 _end = _start + winW /itemW +1;\r
 857                         for( var i=0; i<l; ++i){\r
 858                                 _start < i && i < _end && ICON_ARRAY[ i].onEnter();\r
 859                         }\r
 860                         onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
 861                         onEnterInterval = null;\r
 862                 }\r
 863                 function clickOK(){\r
 864                         pettanr.overlay.hide();\r
 865                         close();\r
 866                 }\r
 867                 function onMouseWheel( e, delta){\r
 868                         if( winW < containerW){\r
 869                                 wrapX += delta *WHEEL_DELTA;\r
 870                                 wrapX = wrapX > 0 ? 0 : wrapX < winW -containerW ? winW -containerW : wrapX;\r
 871                                 jqContainer.css( { left: wrapX});\r
 872                                 \r
 873                                 onEnterInterval !== null && window.clearTimeout( onEnterInterval);\r
 874                                 onEnterInterval = window.setTimeout( onEnterShowImage, 500);\r
 875                         }\r
 876                         //e.stopPropagation();\r
 877                         return false;                   \r
 878                 }\r
 879                 return {\r
 880                         init: function(){\r
 881                                 this.jqWrap = jqWrap = $( '#image-gruop-wrapper').hide();\r
 882                                 jqContainer = $( '#image-icon-container').mousewheel( onMouseWheel);\r
 883                                 containerH = pettanr.util.getElementSize( jqContainer.get( 0)).height;\r
 884                                 jqItemOrigin = $( $( '#imageGruopItemTemplete').remove().html());\r
 885                                 var itemSize = pettanr.util.getElementSize( jqItemOrigin.get( 0));\r
 886                                 itemW = itemSize.width;\r
 887                                 itemH = itemSize.height;\r
 888                                 jqName = $( '#gruop-name-display');\r
 889                                 jqButton = $( '#image-gruop-button').click( clickOK);\r
 890                                 buttonW = pettanr.util.getElementSize( jqButton.get( 0)).width;\r
 891                                 \r
 892                                 delete IMAGE_GROUP_EXPROLER.init;\r
 893                         },\r
 894                         jqWrap: null,\r
 895                         show: function( _onUpdateFunction){\r
 896                                 //onUpdateFunction = _onUpdateFunction;\r
 897                                 if( _onUpdateFunction){\r
 898                                         _g_onUpdateFunction = pettanr.util.createGlobalFunction( _onUpdateFunction);\r
 899                                 } else {\r
 900                                         _g_onUpdateFunction = null;\r
 901                                 }\r
 902                                 pettanr.overlay.show( this);\r
 903                                 \r
 904                                 var CURRENT_GROUP_ARRAY = IMAGE_DATA[ 'pen001'] || [],\r
 905                                         l = CURRENT_GROUP_ARRAY.length;\r
 906                                 for( var i=0; i<l; ++i){\r
 907                                         ICON_ARRAY.push( ImageGroupIconClass.apply( {}, [ i, CURRENT_GROUP_ARRAY[ i]]));\r
 908                                 }\r
 909                                 wrapX = 0;\r
 910                                 containerW = l * itemW;\r
 911                                 \r
 912                                 winW = windowW;\r
 913                                 var w = winW > containerW ? winW : containerW,\r
 914                                         h = windowH > containerH ? containerH : windowH;\r
 915                                 \r
 916                                 jqWrap.show();\r
 917                                 jqContainer.css( {\r
 918                                         width:          w,\r
 919                                         height:         0,\r
 920                                         left:           0,\r
 921                                         top:            Math.floor( windowH /2)\r
 922                                 }).stop().animate( {\r
 923                                         height:         h,\r
 924                                         top:            Math.floor( windowH /2 -h /2)\r
 925                                 });\r
 926                                 \r
 927                                 jqButton.css( {\r
 928                                         left:           Math.floor( winW /2 -buttonW /2),\r
 929                                         top:            Math.floor( windowH /2 +containerH /2 +10)\r
 930                                 });\r
 931                                 \r
 932                                 onEnterShowImage();\r
 933                         },\r
 934                         onWindowResize: function( _windowW, _windowH){\r
 935                                 var w = _windowW > containerW ? _windowW : containerW,\r
 936                                         h = _windowH > containerH ? containerH : _windowH,\r
 937                                         offsetW = Math.floor( _windowW /2 -winW /2);\r
 938                                 winW = _windowW;\r
 939                                 if( offsetW <= 0){ // smaller\r
 940                                         jqContainer.css( {\r
 941                                                 left:                           offsetW,\r
 942                                                 width:                          w\r
 943                                         }).animate( {\r
 944                                                 left:                           0,\r
 945                                                 top:                            Math.floor( _windowH /2 -h /2)\r
 946                                         });                                     \r
 947                                 } else {\r
 948                                         jqContainer.css( { // bigger\r
 949                                                 left:                           0,\r
 950                                                 width:                          w,\r
 951                                                 borderLeftWidth:        offsetW\r
 952                                         }).animate( {\r
 953                                                 top:                            Math.floor( _windowH /2 -h /2),\r
 954                                                 borderLeftWidth:        0\r
 955                                         });\r
 956                                 }\r
 957                                 jqButton.css( {\r
 958                                         left:           Math.floor( _windowW /2 -buttonW /2),\r
 959                                         top:            Math.floor( _windowH /2 +containerH /2 +10)\r
 960                                 });\r
 961                                 onEnterShowImage();\r
 962                         },\r
 963                         onClose: close,\r
 964                         ID: 'imageGroupExproler'\r
 965                 }\r
 966         })();\r
 967 \r
 968 /* ----------------------------------------\r
 969  * WINDOWS_CONTROL\r
 970  *  - contloler\r
 971  *  - mouseEventListener\r
 972  */     \r
 973         var WINDOWS_CONTROL = ( function(){\r
 974                 /*\r
 975                  *  表示上手前にあるwindowは、WINDOW_ARRAYの先頭にあり、htmlでは後ろにある。\r
 976                  */\r
 977                 var DEFAULT_MIN_WINDOW_WIDTH = 200,\r
 978                         DEFAULT_MIN_WINDOW_HEIGHT = 200,\r
 979                         WINDOW_ARRAY = [],\r
 980                         WINDOW_BODY_BODER_SIZE = 1,\r
 981                         jqContainer,\r
 982                         currentWindow,\r
 983                         currentWindowIndex = -1,\r
 984                         log;\r
 985 \r
 986                 var jqWindowOrigin,\r
 987                         closeButtonWidth;\r
 988                 var WindowClass = function( bodyTempleteID, title, x, y, w, h, visible, CLOSE_BUTTON_ENABLED, RESIZE_BUTTON_ENABLED, minWindowW, minWindowH){\r
 989                         var MOUSE_CURSOR = updateMouseCursor,\r
 990                                 MENUBAR_SELWCTION = MENU_BAR_CONTROL.WINDOW.createSelection( \r
 991                                         ( visible !== true ? 'show ' : 'hide ') +title,\r
 992                                         null, onMenuClick, true\r
 993                                 ),\r
 994                                 jqStage,\r
 995                                 jqWrapper, jqHeader, jqFooter = null,\r
 996                                 elmBody, elmBodyStyle,\r
 997                                 startX, startY, startW, startH,\r
 998                                 offsetX, offsetY,\r
 999                                 headerH, bodyH, footerH = 0,\r
1000                                 isDragging = false,\r
1001                                 isResizing = false,\r
1002                                 bodyIsTachable = false,\r
1003                                 instance;\r
1004 \r
1005                         function onMenuClick(){\r
1006                                 visible === true ? instance.close() : instance.open();\r
1007                         }\r
1008                         function update( _x, _y, _w, _h){\r
1009                                 _x = _x !== undefined ? _x : x;\r
1010                                 _y = _y !== undefined ? _y : y;\r
1011                                 _y = _y > MENU_BAR_CONTROL.h ? _y : MENU_BAR_CONTROL.h;\r
1012                                 _w = _w !== undefined ? _w : w;\r
1013                                 _h = _h !== undefined ? _h : h;\r
1014                                 jqWrapper.css( {\r
1015                                         left:           _x,\r
1016                                         top:            _y,\r
1017                                         width:          _w,\r
1018                                         height:         _h\r
1019                                 });\r
1020                                 bodyH = _h -headerH -footerH;\r
1021                                 elmBodyStyle.height = bodyH +'px';\r
1022                                 ( w !== _w || h !== _h) && instance.onResize && instance.onResize( _w, bodyH);\r
1023                                 x = _x;\r
1024                                 y = _y;\r
1025                                 w = _w;\r
1026                                 h = _h;\r
1027                         }\r
1028                         function bodyBackOrForward( isBack){\r
1029                                 if( !instance) return;\r
1030                                 if( bodyIsTachable === !isBack) return;\r
1031                                 elmBodyStyle.position = isBack === true ? 'relative' : 'absolute';\r
1032                                 elmBodyStyle.left =             isBack === true ? 0  : x +'px';\r
1033                                 elmBodyStyle.top =              isBack === true ? 0  : y +headerH +'px';\r
1034                                 elmBodyStyle.width =    isBack === true ? '' : ( w -WINDOW_BODY_BODER_SIZE *2) +'px';\r
1035                                 bodyIsTachable === isBack && isBack === true ? jqHeader.after( elmBody) : jqStage.append( elmBody);\r
1036                                 bodyIsTachable = !isBack;\r
1037                         }\r
1038                         function onWindowResize( e){\r
1039                                 bodyBackOrForward( true);\r
1040                                 isResizing = true;\r
1041                                 startX = x;\r
1042                                 startY = y;\r
1043                                 startW = w;\r
1044                                 startH = h;\r
1045                                 offsetX = e.pageX;\r
1046                                 offsetY = e.pageY;\r
1047                                 MOUSE_CURSOR( 'nw-resize');\r
1048                                 e.stopPropagation();\r
1049                                 return false;\r
1050                         }\r
1051                         return {\r
1052                                 init: function( jqContainer){\r
1053                                         /*\r
1054                                          * setTimeout で呼ばれるグローバルメソッド内では、this でなく instance を使う.\r
1055                                          */\r
1056                                         instance = this;\r
1057                                         \r
1058                                         jqWindowOrigin = jqWindowOrigin || ( function(){\r
1059                                                 return $( $( '#windowTemplete').remove().html());\r
1060                                         })();\r
1061                                         closeButtonWidth = closeButtonWidth || ( function(){\r
1062                                                 return pettanr.util.getElementSize( jqWindowOrigin.clone( true).find( '.window-close-button').get( 0)).width;\r
1063                                         })();\r
1064                                         \r
1065                                         jqStage = jqEditor;\r
1066                                         this.$ = jqWrapper = jqWindowOrigin.clone( true);\r
1067                                         jqHeader = jqWrapper.children( '.window-header').eq( 0).html( title);\r
1068                                         headerH = pettanr.util.getElementSize( jqHeader.get( 0)).height;\r
1069                                         elmBody = jqWrapper.children( '.window-body').get( 0);\r
1070                                         elmBodyStyle = elmBody.style;\r
1071                                         \r
1072                                         if( bodyTempleteID) {\r
1073                                                 jqWrapper.find( '.window-body-insert-position').replaceWith( $( $( '#' +bodyTempleteID).remove().html()));\r
1074                                         } else {\r
1075                                                 jqWrapper.find( '.window-body-insert-position').remove();\r
1076                                         }\r
1077                                         CLOSE_BUTTON_ENABLED !== true && jqWrapper.find( '.window-close-button').remove();\r
1078                                         \r
1079                                         this.onInit && this.onInit();\r
1080                                         delete this.init;\r
1081                                 },\r
1082                                 x: function(){ return x;},\r
1083                                 y: function(){ return y;},\r
1084                                 w: function(){ return w;},\r
1085                                 h: function(){ return h;},\r
1086                                 $: null,\r
1087                                 title: function( _title){\r
1088                                         typeof _title === 'string' && jqHeader.html( _title);\r
1089                                         title = typeof _title === 'string' ? _title : title;\r
1090                                         return title;\r
1091                                 },\r
1092                                 visible: visible,\r
1093                                 firstOpen: function(){\r
1094                                         if( RESIZE_BUTTON_ENABLED === true){\r
1095                                                 footerH = pettanr.util.getElementSize( jqWrapper.find( '.window-footer').get( 0)).height;\r
1096                                                 //jqWrapper.find( '.window-resize-button').eq( 0).mousedown( onWindowResize);\r
1097                                         } else {\r
1098                                                 jqWrapper.find( '.window-footer').remove();\r
1099                                         }\r
1100                                         this.onFirstOpen && this.onFirstOpen( w, h -headerH -footerH);\r
1101                                         \r
1102                                         update( x, y, w, h);\r
1103                                         \r
1104                                         delete this.firstOpen;\r
1105                                 },\r
1106                                 open: function(){\r
1107                                         if( visible === true) return;\r
1108                                         instance.visible = visible = true;\r
1109                                         openWindow( instance);\r
1110                                         MENUBAR_SELWCTION.title( 'hide ' +title);\r
1111                                         \r
1112                                         for( var i=0, l = WINDOW_ARRAY.length; i<l; ++i){\r
1113                                                 if( WINDOW_ARRAY[ i] === instance){\r
1114                                                         WINDOW_ARRAY.splice( i, 1);\r
1115                                                         WINDOW_ARRAY.unshift( instance);\r
1116                                                         currentWindow = null;\r
1117                                                         currentWindowIndex = -1;\r
1118                                                 }\r
1119                                         }\r
1120                                 },\r
1121                                 onFadeIn: function(){\r
1122                                         instance.firstOpen && instance.firstOpen();\r
1123                                         instance.onOpen && setTimeout( callOnOpen, 0);\r
1124                                         function callOnOpen(){\r
1125                                                 instance.onOpen( w, bodyH);\r
1126                                         }\r
1127                                 },\r
1128                                 onFadeOut: function(){\r
1129                                         var elmWrapper = jqWrapper.get(0);\r
1130                                         elmWrapper.parentNode.removeChild( elmWrapper);\r
1131                                         instance.onClose && setTimeout( instance.onClose, 0);\r
1132                                 },\r
1133                                 close: function(){\r
1134                                         if( visible === false) return;\r
1135                                         instance.visible = visible = false;\r
1136                                         jqWrapper.fadeOut( instance.onFadeOut);\r
1137                                         MENUBAR_SELWCTION.title( 'show ' +title);\r
1138                                 },\r
1139                                 bodyBackOrForward: bodyBackOrForward,\r
1140                                 onMouseDown: function( _mouseX, _mouseY){\r
1141                                         if( RESIZE_BUTTON_ENABLED === true && x +w -20 <= _mouseX && _mouseX < x +w && y +headerH +bodyH < _mouseY && _mouseY <= y +h){\r
1142                                                 bodyBackOrForward( true);\r
1143                                                 isResizing = true;\r
1144                                                 startX = x;\r
1145                                                 startY = y;\r
1146                                                 startW = w;\r
1147                                                 startH = h;\r
1148                                                 offsetX = _mouseX;\r
1149                                                 offsetY = _mouseY;\r
1150                                                 MOUSE_CURSOR( 'nw-resize');\r
1151                                                 return;\r
1152                                         }\r
1153                                         \r
1154                                         if( x > _mouseX || y > _mouseY || x +w < _mouseX || y +headerH < _mouseY ) return;\r
1155                                         if( CLOSE_BUTTON_ENABLED === true && x +w -closeButtonWidth < _mouseX){\r
1156                                                 instance.close();\r
1157                                                 return;\r
1158                                         }\r
1159                                         \r
1160                                         isDragging = true;\r
1161                                         MOUSE_CURSOR( 'move');                          \r
1162                                         startX = x;\r
1163                                         startY = y;\r
1164                                         startW = w;\r
1165                                         startH = h;\r
1166                                         offsetX = _mouseX;\r
1167                                         offsetY = _mouseY;\r
1168                                 },\r
1169                                 onMouseUp: function( _mouseX, _mouseY){\r
1170                                         isDragging = isResizing = false;\r
1171                                         MOUSE_CURSOR( '');\r
1172                                 },\r
1173                                 onMouseMove: function( _mouseX, _mouseY){\r
1174                                         var _updateX = _mouseX -offsetX,\r
1175                                                 _updateY = _mouseY -offsetY;\r
1176                                         \r
1177                                         if( isResizing === true){\r
1178                                                 var _w = startW +_updateX,\r
1179                                                         _h = startH +_updateY;\r
1180                                                 update( startX, startY, _w < minWindowW ? minWindowW : _w, _h < minWindowH ? minWindowH : _h);\r
1181                                                 return;\r
1182                                         } else\r
1183                                         if( isDragging === true) {\r
1184                                                 update( startX +_updateX, startY +_updateY);\r
1185                                                 return;\r
1186                                         } else\r
1187                                         if( x > _mouseX || x +w < _mouseX ) return;\r
1188         \r
1189                                         ( y <= _mouseY && y +headerH >= _mouseY ) ?\r
1190                                                 MOUSE_CURSOR( 'pointer') :      // hit to header\r
1191                                                 MOUSE_CURSOR( '');\r
1192                                         bodyBackOrForward( y +headerH > _mouseY || y +headerH +bodyH < _mouseY);\r
1193                                 },\r
1194                                 onMouseOut: function( _mouseX, _mouseY){\r
1195                                         bodyIsTachable === true && bodyBackOrForward( true);\r
1196                                         isDragging = false;\r
1197                                         MOUSE_CURSOR( '');\r
1198                                 },\r
1199                                 busy: function(){\r
1200                                         return isDragging === true || isResizing === true;\r
1201                                 },\r
1202                                 bodyHeight: function(){\r
1203                                         return  bodyH;\r
1204                                 }\r
1205                         }\r
1206                 };\r
1207                 \r
1208                 function getCurrentIndex( _mouseX, _mouseY){\r
1209                         if( currentWindow && currentWindow.busy() === true) return currentWindowIndex;\r
1210                         var l = WINDOW_ARRAY.length,\r
1211                                 _currentWindow = null,\r
1212                                 _win, _x, _y;\r
1213                         currentWindowIndex = -1;\r
1214                         for( var i=0; i<l; i++){\r
1215                                 _win = WINDOW_ARRAY[ i];\r
1216                                 if( _win.visible !== true) continue;\r
1217                                 _x = _win.x();\r
1218                                 _y = _win.y();\r
1219                                 if( _x <= _mouseX && _y <= _mouseY && _x +_win.w() >= _mouseX && _y +_win.h() >= _mouseY){\r
1220                                         _currentWindow = _win;\r
1221                                         currentWindowIndex = i;\r
1222                                         break;\r
1223                                 }\r
1224                         }\r
1225                         currentWindow && currentWindow !== _currentWindow && currentWindow.onMouseOut( _mouseX, _mouseY);\r
1226                         currentWindow = _currentWindow;\r
1227                         return currentWindowIndex;\r
1228                 }\r
1229                 function openWindow( _window){\r
1230                         if( _window.visible !== true) return;\r
1231                         var _jqWindow = _window.$;\r
1232                         jqContainer.append( _jqWindow);// appendした後に fadeIn() しないと ie で filterが適用されない．\r
1233                         _jqWindow.fadeIn( _window.onFadeIn);\r
1234                         return;\r
1235                 }\r
1236                 \r
1237                 return {\r
1238                         init: function(){\r
1239                                 jqContainer = $( '#window-container');\r
1240                                 \r
1241                                 var l = WINDOW_ARRAY.length,\r
1242                                         _window;\r
1243                                 for( var i=l-1; i >= 0; --i){\r
1244                                         _window = WINDOW_ARRAY[ i];\r
1245                                         _window.init && _window.init( jqContainer);\r
1246                                         _window.visible === true && openWindow( _window);\r
1247                                 }\r
1248                                 log = $( '#window-log');\r
1249                                 \r
1250                                 delete WINDOWS_CONTROL.init;\r
1251                         },\r
1252                         open: function(){\r
1253                                 WINDOWS_CONTROL.init && WINDOWS_CONTROL.init();\r
1254                         },\r
1255                         close: function(){\r
1256                                 \r
1257                         },\r
1258                         onMouseMove: function( _mouseX, _mouseY){\r
1259                                 var _index = getCurrentIndex( _mouseX, _mouseY);\r
1260                                 if( _index === 0){\r
1261                                         currentWindow.onMouseMove( _mouseX, _mouseY);\r
1262                                         return true;\r
1263                                 } else\r
1264                                 if( _index > 0){ // 先頭のクリックでない場合\r
1265                                 // Array を前に\r
1266                                         WINDOW_ARRAY.splice( currentWindowIndex, 1);\r
1267                                         WINDOW_ARRAY.unshift( currentWindow);\r
1268                                 // Domを最後に\r
1269                                         jqContainer.append( currentWindow.$);\r
1270                                         currentWindowIndex = 0;\r
1271                                         return true;\r
1272                                 }\r
1273                                 return false;\r
1274                         },\r
1275                         onMouseUp: function( _mouseX, _mouseY){\r
1276                                 if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
1277                                         currentWindow.onMouseUp( _mouseX, _mouseY);\r
1278                                         return true;\r
1279                                 }\r
1280                                 return false;\r
1281                         },\r
1282                         onMouseDown: function( _mouseX, _mouseY){\r
1283                                 if( getCurrentIndex( _mouseX, _mouseY) === 0){\r
1284                                         currentWindow.onMouseDown( _mouseX, _mouseY);\r
1285                                         return true;\r
1286                                 }\r
1287                                 return false;\r
1288                         },\r
1289                         busy: function(){\r
1290                                 return currentWindow !== null;\r
1291                         },\r
1292                         onWindowResize: function( _windowW, _windowH){\r
1293                                 /*\r
1294                                  * 画面外に出るwindowの移動\r
1295                                  */\r
1296                         },\r
1297                         createWindow: function( EXTENDS, bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH){\r
1298                                 opt_visible = opt_visible !== false;\r
1299                                 opt_closeButtonEnabled = opt_closeButtonEnabled === true;\r
1300                                 opt_resizeButtonEnabled = opt_resizeButtonEnabled === true;\r
1301                                 opt_minWindowW = opt_minWindowW || ( w < DEFAULT_MIN_WINDOW_WIDTH) ? w : DEFAULT_MIN_WINDOW_WIDTH;\r
1302                                 opt_minWindowH = opt_minWindowH || ( h < DEFAULT_MIN_WINDOW_HEIGHT) ? h : DEFAULT_MIN_WINDOW_HEIGHT;\r
1303                                 \r
1304                                 var _window = pettanr.util.extend(\r
1305                                         new WindowClass(\r
1306                                                 bodyTempleteID, title, x, y, w, h, opt_visible, opt_closeButtonEnabled, opt_resizeButtonEnabled, opt_minWindowW, opt_minWindowH\r
1307                                         ),\r
1308                                         EXTENDS\r
1309                                 );\r
1310                                 WINDOW_ARRAY.unshift( _window);\r
1311                                 WINDOWS_CONTROL.init === undefined && _window.init( jqContainer);\r
1312                                 WINDOWS_CONTROL.init === undefined && openWindow( _window);\r
1313                                 return _window;\r
1314                         }\r
1315                 }\r
1316         })();\r
1317 \r
1318 /* ----------------------------------------\r
1319  * TOOL_BOX_WINDOW\r
1320  * - window\r
1321  */\r
1322         var TOOL_BOX_WINDOW = ( function(){\r
1323                 var addImageButton, addTextButton, editBgButton, switchGridButton, popupHelpButton, postButton,\r
1324                         instance;\r
1325                         \r
1326                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 73, false, true, addImage);\r
1327                 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Image', 'ctrl + I', addImage, true, true, false);\r
1328                 \r
1329                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 84, false, true, addText);\r
1330                 MENU_BAR_CONTROL.EDIT.createSelection( 'Add Text', 'ctrl + T', addText, true, false, true);\r
1331 \r
1332                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 71, false, true, switchGrid);\r
1333                 MENU_BAR_CONTROL.EDIT.createSelection( 'show Grid', 'ctrl + G', switchGrid, true, true, true);\r
1334 \r
1335                 function addImage( e){\r
1336                         setTimeout( COMIC_ELEMENT_CONTROL.createImageElement, 0);\r
1337                         e && e.preventDefault && e.preventDefault();\r
1338                         return false;\r
1339                 }\r
1340                 function addText( e){\r
1341                         setTimeout( COMIC_ELEMENT_CONTROL.createTextElement, 0);\r
1342                         e && e.preventDefault && e.preventDefault();\r
1343                         return false;\r
1344                 }\r
1345                 function switchGrid( e){\r
1346                         setTimeout( GRID_CONTROL.update, 0);\r
1347                         e && e.preventDefault && e.preventDefault();\r
1348                         return false;\r
1349                 }\r
1350                 function popupHelp( e){\r
1351                         instance.bodyBackOrForward( true);\r
1352                         setTimeout( HELP_DOCUMENTS_WINDOW.open, 0);\r
1353                         e && e.preventDefault && e.preventDefault();\r
1354                         return false;\r
1355                 }\r
1356                 function editBG( e){\r
1357                         instance.bodyBackOrForward( true);\r
1358                         setTimeout( INFOMATION_WINDOW.open, 0); \r
1359                         e && e.preventDefault && e.preventDefault();\r
1360                         return false;\r
1361                 }\r
1362                 \r
1363                 return WINDOWS_CONTROL.createWindow(\r
1364                         {\r
1365                                 onInit: function(){\r
1366                                         instance = this;\r
1367                                         delete this.onInit;\r
1368                                 },\r
1369                                 onFirstOpen: function(){\r
1370                                         addImageButton = $( '#toolbox-add-image-button').click( addImage);\r
1371                                         addTextButton = $( '#toolbox-add-text-button').click( addText);\r
1372                                         editBgButton = $( '#toolbox-edit-bg-button').click( editBG);\r
1373                                         switchGridButton = $( '#toolbox-switch-grid').click( switchGrid);\r
1374                                         popupHelpButton = $( '#toolbox-popup-help-button').click( popupHelp);\r
1375                                         \r
1376                                         postButton = $( '#toolbox-post-button');\r
1377                                         \r
1378                                         delete this.onFirstOpen;\r
1379                                 }\r
1380                         },\r
1381                         'toolbox-window', 'Tool box', 0, 215, 110, 290, true\r
1382                 );\r
1383         })();\r
1384         \r
1385         \r
1386 /* ----------------------------------------\r
1387  * IMAGE_EXPROLER\r
1388  *  - window\r
1389  */\r
1390         var IMAGE_EXPLORER_WINDOW = ( function(){\r
1391                 var instance, finder;\r
1392                 \r
1393                 return WINDOWS_CONTROL.createWindow(\r
1394                         {\r
1395                                 onInit: function(){\r
1396                                         instance = this;\r
1397                                         delete this.onInit;\r
1398                                 },\r
1399                                 onFirstOpen: function( _w, _h){\r
1400                                         finder = pettanr.finder.createFinder( document.getElementById( 'image-exproler-container'), pettanr.driver.createPictureTree());\r
1401                                         delete this.onFirstOpen;\r
1402                                 },\r
1403                                 onOpen: function( _w, _h){\r
1404                                         finder.onOpen( _w, _h);\r
1405                                 },\r
1406                                 onResize: function( _w, _h){\r
1407                                         finder.onWindowResize( _w, _h);\r
1408                                 }\r
1409                         },\r
1410                         'image-exproler', 'Album', 0, 215, 400, 350, false, true, true, 300, 300\r
1411                 );\r
1412         })();\r
1413         \r
1414         \r
1415 /* ----------------------------------------\r
1416  * INFOMATION_WINDOW\r
1417  *  - window\r
1418  */                     \r
1419         var INFOMATION_WINDOW = ( function(){\r
1420                 var FADE_EFFECT_ENABLED = true, //pettanr.ua.isIE === false || pettanr.ua.ieVersion >= 8,\r
1421                         FADE_IN_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeIn' : 'show',\r
1422                         FADE_OUT_EFFECT = FADE_EFFECT_ENABLED === true ? 'fadeOut' : 'hide',\r
1423                         backgroundInfomationElm,\r
1424                         jqComicElementInformation,\r
1425                         inputX, inputY, inputZ, inputA, inputW, inputH, inputAspectRatio,\r
1426                         inputPercentW, inputPercentH,\r
1427                         currentComicElement = null,\r
1428                         currentElementType = -1,\r
1429                         currentLock = false;\r
1430 \r
1431                 return WINDOWS_CONTROL.createWindow(\r
1432                         {\r
1433                                 onFirstOpen: function( _w, _h){\r
1434                                         backgroundInfomationElm = $( '#panel-background-information');\r
1435                                         \r
1436                                         jqComicElementInformation = $( '#comic-element-infomation').hide().css( {\r
1437                                                 height:         _h\r
1438                                         });\r
1439                                         var TAB_GROUP_ID = 'comic-element-attribute';\r
1440                                         var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
1441                                         inputX = CREATER( document.getElementById( 'comic-element-x'), null, TAB_GROUP_ID);\r
1442                                         inputY = CREATER( document.getElementById( 'comic-element-y'), null, TAB_GROUP_ID);\r
1443                                         inputZ = CREATER( document.getElementById( 'comic-element-z'), null, TAB_GROUP_ID);\r
1444                                         inputA = CREATER( document.getElementById( 'comic-element-a'), null, TAB_GROUP_ID);\r
1445                                         inputW = CREATER( document.getElementById( 'comic-element-w'), null, TAB_GROUP_ID);\r
1446                                         inputH = CREATER( document.getElementById( 'comic-element-h'), null, TAB_GROUP_ID);\r
1447                                         inputPercentW = CREATER( document.getElementById( 'comic-element-w-percent'), null, TAB_GROUP_ID);\r
1448                                         inputPercentH = CREATER( document.getElementById( 'comic-element-h-percent'), null, TAB_GROUP_ID);\r
1449                                         inputAspectRatio = $( '#comic-element-keep-aspect');\r
1450                                         delete this.onFirstOpen;\r
1451                                 },\r
1452                                 onResize: function(  _w, _h){\r
1453                                         jqComicElementInformation.css( {\r
1454                                                 height: _h\r
1455                                         });\r
1456                                 },\r
1457                                 update: function( currentElement){\r
1458                                         \r
1459                                         if( currentLock === true && currentElement === null) return;\r
1460                                         \r
1461                                         var _elementType = currentElement === null ? -1 : currentElement.type,\r
1462                                                 x = currentElement !== null ? currentElement.x : 0,\r
1463                                                 y = currentElement !== null ? currentElement.y : 0,\r
1464                                                 z = currentElement !== null ? currentElement.z : 0,\r
1465                                                 a = _elementType === COMIC_ELEMENT_TYPE_TEXT ? Math.floor( currentElement.angle()) : 0,\r
1466                                                 w = currentElement !== null ? currentElement.w : 0,\r
1467                                                 h = currentElement !== null ? currentElement.h : 0,\r
1468                                                 actualW = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualW() : 1,\r
1469                                                 actualH = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? currentElement.actualH() : 1,\r
1470                                                 wPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( w / actualW *100) : 0,\r
1471                                                 hPercent = _elementType === COMIC_ELEMENT_TYPE_IMAGE ? Math.floor( h / actualH *100) : 0,\r
1472                                                 keepAspect = currentElement !== null && currentElement.keepAspect === true;\r
1473                                         \r
1474                                         if( currentElementType !== _elementType){\r
1475                                                 if( _elementType !== -1){\r
1476                                                         if( _elementType === 1){\r
1477                                                                 inputA.visible( true);\r
1478                                                                 inputPercentW.visible( false);\r
1479                                                                 inputPercentH.visible( false);\r
1480                                                                 inputAspectRatio.hide();\r
1481                                                         } else {\r
1482                                                                 inputA.visible( false);\r
1483                                                                 inputPercentW.visible( true);\r
1484                                                                 inputPercentH.visible( true);\r
1485                                                                 inputAspectRatio.show();\r
1486                                                         }\r
1487                                                         currentElementType === -1 && jqComicElementInformation.stop().css( {\r
1488                                                                 filter:         '',\r
1489                                                                 opacity:        ''\r
1490                                                         })[ FADE_IN_EFFECT]();\r
1491                                                 } else {\r
1492                                                         currentElementType !== -1 && jqComicElementInformation.stop().css({\r
1493                                                                 filter:         '',\r
1494                                                                 opacity:        ''\r
1495                                                         })[ FADE_OUT_EFFECT]();\r
1496                                                 }\r
1497                                                 currentElementType = _elementType;\r
1498                                         }\r
1499                                         if( currentElementType !== -1){\r
1500                                                 inputX.value( x);\r
1501                                                 inputY.value( y);\r
1502                                                 inputZ.value( z);\r
1503                                                 _elementType === 1 && inputA.value( a);\r
1504                                                 inputW.value( w);\r
1505                                                 inputH.value( h);\r
1506                                                 _elementType === 0 && inputPercentW.value( wPercent);\r
1507                                                 _elementType === 0 && inputPercentH.value( hPercent);                                   \r
1508                                         } else {\r
1509                                                 \r
1510                                         }\r
1511                                 },\r
1512                                 lock: function( _currentLock){\r
1513                                         currentLock = !!_currentLock;\r
1514                                         this.bodyBackOrForward( !currentLock);\r
1515                                 }\r
1516                         },\r
1517                         'infomation-window', 'Infomation', 0, 30, 200, 180, true\r
1518                 );\r
1519         })();\r
1520 \r
1521 /* ----------------------------------------\r
1522  * HELP_WINDOW\r
1523  *  - window\r
1524  */\r
1525         var HELP_DOCUMENTS_WINDOW = ( function(){\r
1526                 var visible = true,\r
1527                         jqAjaxContents,\r
1528                         jqNaviItems,\r
1529                         jqPages,\r
1530                         currentPageIndex = 0,\r
1531                         numPage = 0,\r
1532                         HELP = MENU_BAR_CONTROL.HELP,\r
1533                         onLoadFunction = HELP.createAjaxSelection( onAjaxStart),\r
1534                         instance;\r
1535 \r
1536                 function onAjaxStart( _pageIndex){\r
1537                         currentPageIndex = _pageIndex || currentPageIndex;\r
1538                         if( onHelpLoad !== null){\r
1539                                 $.ajax({\r
1540                                         url:            'help/jp.xml',\r
1541                                         dataType:       'xml',\r
1542                                         success:        onHelpLoad\r
1543                                 });\r
1544                                 onHelpLoad = null;\r
1545                         }\r
1546                         onAjaxStart = new Function;\r
1547                 }\r
1548                 var onHelpLoad = function( _xml){\r
1549                         var jqXML = $( _xml),\r
1550                                 helpTitle = jqXML.find( 'pages').eq( 0).attr( 'title'),\r
1551                                 elmNavi = document.createElement( 'div'),\r
1552                                 elmItemOrigin = document.createElement( 'a'),\r
1553                                 elmPages = document.createElement( 'div'),\r
1554                                 elmPageOrigin = document.createElement( 'div'),\r
1555                                 elmTitleOrigin = document.createElement( 'h2'),\r
1556                                 elmPage;\r
1557                         elmNavi.className = 'sidenavi';\r
1558                         elmItemOrigin.className = 'sidenavi-item';\r
1559                         elmItemOrigin.href = '#';\r
1560                         elmPages.className = 'page-contents';\r
1561                         elmPageOrigin.className = 'page-content main';\r
1562                         elmPageOrigin.appendChild( elmTitleOrigin);\r
1563                         \r
1564                         //helpTitle && instance.title( helpTitle);\r
1565                         \r
1566                         jqXML.find( 'page').each( function(){\r
1567                                 var xmlPage = $( this),\r
1568                                         title = xmlPage.attr( 'title'),\r
1569                                         content = xmlPage.text();\r
1570                                 \r
1571                                 elmItemOrigin.innerHTML = title;\r
1572                                 elmNavi.appendChild( elmItemOrigin.cloneNode( true));\r
1573                                 \r
1574                                 elmTitleOrigin.innerHTML = title;\r
1575                                 \r
1576                                 elmPage = elmPageOrigin.cloneNode( true);\r
1577                                 elmPage.innerHTML = content;\r
1578                                 \r
1579                                 pettanr.util.cleanElement( elmPage);\r
1580                                 \r
1581                                 if( elmPage.childNodes.length > 0){\r
1582                                         elmPage.insertBefore( elmTitleOrigin.cloneNode( true), elmPage.childNodes[0]);\r
1583                                 } else {\r
1584                                         elmPage.appendChild( elmTitleOrigin.cloneNode( true));\r
1585                                 }\r
1586                                 elmPages.appendChild( elmPage);\r
1587                                 \r
1588                                 HELP.createSelection( title, null, onSelectionClick, true);\r
1589                                 ++numPage;\r
1590                         });\r
1591                         onLoadFunction();\r
1592                         onLoadFunction = null;\r
1593                         \r
1594                         jqAjaxContents.removeClass( 'loading').append( elmNavi, elmPages);\r
1595                         \r
1596                         jqNaviItems = jqAjaxContents.find( 'a.' +elmItemOrigin.className).click( onNaviClick);\r
1597                         jqPages = jqAjaxContents.find( '.page-content');\r
1598                         jqPages.find( 'a').click( onInnerLinkClick);\r
1599                         \r
1600                         setTimeout( jumpPage, 0);\r
1601                 }\r
1602                 function onSelectionClick( _pageIndex){\r
1603                         HELP_DOCUMENTS_WINDOW.open();\r
1604                         jumpPage( _pageIndex);\r
1605                 }\r
1606                 function jumpPage( _index){\r
1607                         if( typeof _index === 'number' && 0 <= _index && _index < numPage && currentPageIndex !== _index){\r
1608                                 currentPageIndex = _index;\r
1609                         }\r
1610                         jqNaviItems.removeClass( 'current').eq( currentPageIndex).addClass( 'current');\r
1611                         jqPages.hide().eq( currentPageIndex).show();\r
1612                 }\r
1613                 function onNaviClick( e){\r
1614                         // this は <a>\r
1615                         jumpPage( pettanr.util.getChildIndex( this.parentNode, this));\r
1616                         e.stopPropagation();\r
1617                         return false;\r
1618                 }\r
1619                 function onInnerLinkClick( e){\r
1620                         var jump = ( this.href || '').split( '#jump'),\r
1621                                 n = jump[1];\r
1622                         if( !n) return;\r
1623                         jumpPage( '' + parseFloat( n) === n ? parseFloat( n) : -1);\r
1624                         e.stopPropagation();\r
1625                         return false;                           \r
1626                 }\r
1627                 return WINDOWS_CONTROL.createWindow(\r
1628                         {\r
1629                                 onInit: function(){\r
1630                                         instance = this;\r
1631                                         jqAjaxContents = this.$.find( '.window-body').addClass( 'loading');\r
1632                                         delete this.onInit;\r
1633                                 },\r
1634                                 onFirstOpen: function( _w, _h){\r
1635                                         jqAjaxContents.css( { height: _h});\r
1636                                         onAjaxStart();\r
1637                                         delete this.onFirstOpen;\r
1638                                 },\r
1639                                 onResize: function( _w, _h){\r
1640                                         jqAjaxContents && jqAjaxContents.css( { height: _h});\r
1641                                 }\r
1642                         },\r
1643                         null, 'Help', 0, 215, 400, 350, false, true, true, 300, 300\r
1644                 );\r
1645         })();\r
1646 \r
1647 /* ----------------------------------------\r
1648  * GRID_CONTROL\r
1649  *  - control\r
1650  *  - panelResizeListener\r
1651  */\r
1652         var GRID_CONTROL = ( function(){\r
1653                 var ELM_GRID = document.getElementById( 'grid'),\r
1654                         BG_URL = "url('images/grid.gif')",\r
1655                         jqGrid,\r
1656                         visible = false;\r
1657 \r
1658                 return {\r
1659                         init: function(){\r
1660                                 jqGrid = $( ELM_GRID);\r
1661                                 delete GRID_CONTROL.init;\r
1662                         },\r
1663                         open: function(){\r
1664                                 GRID_CONTROL.init && GRID_CONTROL.init();\r
1665                         },\r
1666                         close: function(){\r
1667                                 \r
1668                         },\r
1669                         onPanelResize: function( _panelX, _panelY){\r
1670                                 ELM_GRID.style.backgroundPosition = [ _panelX % 10, 'px ', _panelY % 10, 'px'].join( '');\r
1671                                 ELM_GRID.style.height = windowH +'px';\r
1672                         },\r
1673                         enabled: function(){\r
1674                                 return visible;\r
1675                         },\r
1676                         update: function(){\r
1677                                 jqGrid.css( {\r
1678                                         opacity:        '',\r
1679                                         fliter:         ''\r
1680                                 }).stop()[ visible === true ? 'fadeOut' : 'fadeIn']();\r
1681                                 \r
1682                                 visible = !visible;\r
1683                                 \r
1684                                 if( visible === true && BG_URL !== null){\r
1685                                         ELM_GRID.style.backgroundImage = BG_URL;\r
1686                                         BG_URL = null;\r
1687                                 }\r
1688                                 return visible;                         \r
1689                         }\r
1690                 }\r
1691         })();\r
1692                 \r
1693 /* ----------------------------------------\r
1694  * WHITE_GLASS_CONTROL\r
1695  *  - panelResizeListener\r
1696  */\r
1697         var WHITE_GLASS_CONTROL = ( function(){\r
1698                 var styleTop = document.getElementById( 'whiteGlass-top').style,\r
1699                         styleLeft = document.getElementById( 'whiteGlass-left').style,\r
1700                         styleRight = document.getElementById( 'whiteGlass-right').style,\r
1701                         styleBottom = document.getElementById( 'whiteGlass-bottom').style;\r
1702 \r
1703                 return {\r
1704                         onPanelResize: function( _panelX, _panelY, _panelW, _panelH){\r
1705                                 var     _w = _panelW,\r
1706                                         _h = _panelH,\r
1707                                         marginTop = _panelY,\r
1708                                         marginBottom = windowH -_h -marginTop,\r
1709                                         marginX = _panelX,\r
1710                                         rightWidth = windowW -_w -marginX;\r
1711                                 \r
1712                                 styleTop.height = ( marginTop < 0 ? 0 : marginTop) +'px';\r
1713                                 \r
1714                                 styleLeft.top = marginTop +'px';\r
1715                                 styleLeft.width = ( marginX < 0 ? 0 : marginX) +'px';\r
1716                                 styleLeft.height = ( _h + marginBottom) +'px';\r
1717                                 \r
1718                                 styleRight.top = marginTop +'px';\r
1719                                 styleRight.left = _w +marginX +'px';\r
1720                                 styleRight.width = ( rightWidth < 0 ? 0 : rightWidth) +'px';\r
1721                                 styleRight.height = ( _h + marginBottom) +'px';\r
1722                                 \r
1723                                 styleBottom.top = ( _h +marginTop) +'px';\r
1724                                 styleBottom.left = marginX +'px';\r
1725                                 styleBottom.width = _w +'px';\r
1726                                 styleBottom.height = ( marginBottom < 0 ? 0 : marginBottom) +'px';\r
1727                         }\r
1728                 }\r
1729         })();\r
1730 \r
1731 \r
1732 /* ----------------------------------------\r
1733  * PANEL_CONTROL\r
1734  *  - controler\r
1735  *  - mouseEventListener\r
1736  * \r
1737  * panel-border の表示と onPanelResize の通知．\r
1738  * panel drag.\r
1739  * \r
1740  */\r
1741         var PANEL_CONTROL = ( function(){\r
1742                 var ELM_PANEL = document.getElementById('panel-tools-container'),\r
1743                         ELM_PANEL_STYLE = ELM_PANEL.style,\r
1744                         DEFAULT_PANEL_WIDTH = 400,\r
1745                         DEFAULT_PANEL_HEIGHT = 300,\r
1746                         borderSize = 2,\r
1747                         panelW, panelH, panelX, panelY,\r
1748                         offsetX, offsetY, startX, startY,\r
1749                         isDragging = false,\r
1750                         isDraggable = false;\r
1751                 \r
1752                 pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 32, false, false, onSpaceUpdate);\r
1753                 \r
1754                 function onSpaceUpdate(e){\r
1755                         if( e.type === 'keyup'){\r
1756                                 currentListener === null && updateMouseCursor( '');\r
1757                                 isDraggable = false;\r
1758                         } else {\r
1759                                 currentListener === null && updateMouseCursor( 'move');\r
1760                                 isDraggable = true;\r
1761                         }\r
1762                 }\r
1763                 \r
1764                 return {\r
1765                         open: function( _panelW, _panelH, _borderSize){\r
1766                                 panelW = _panelW || DEFAULT_PANEL_WIDTH;\r
1767                                 panelH = _panelH || DEFAULT_PANEL_HEIGHT;\r
1768                                 //panelX = Math.floor( ( windowW -panelW) /2);\r
1769                                 //panelY = Math.floor( ( windowH -panelH) /2);\r
1770                                 borderSize = _borderSize !== undefined ? _borderSize : borderSize;\r
1771                                 \r
1772                                 //setTimeout( PANEL_CONTROL.resize, 0);\r
1773                         },\r
1774                         close: function(){\r
1775                                 \r
1776                         },\r
1777                         x: function(){\r
1778                                 return panelX;\r
1779                         },\r
1780                         y: function(){\r
1781                                 return panelY;\r
1782                         },\r
1783                         resize: function( isResizerTopAction, _x, _y, _w, _h){\r
1784                                 panelX = _x !== undefined ? _x : panelX;\r
1785                                 panelY = _y !== undefined ? _y : panelY;\r
1786                                 panelW = _w !== undefined ? _w : panelW;\r
1787                                 panelH = _h !== undefined ? _h : panelH;\r
1788                                 \r
1789                                 ELM_PANEL_STYLE.left    = ( panelX -borderSize) +'px';\r
1790                                 ELM_PANEL_STYLE.top             = ( panelY -borderSize) +'px';\r
1791                                 ELM_PANEL_STYLE.width   = panelW +'px';\r
1792                                 ELM_PANEL_STYLE.height  = panelH +'px';\r
1793                                 \r
1794                                 PANEL_RESIZER_TOP.onPanelResize( panelX, panelY, panelW, panelH);\r
1795                                 PANEL_RESIZER_BOTTOM.onPanelResize( panelX, panelY, panelW, panelH);\r
1796                                 GRID_CONTROL.onPanelResize( panelX, panelY);\r
1797                                 WHITE_GLASS_CONTROL.onPanelResize( panelX, panelY, panelW, panelH);\r
1798                                 COMIC_ELEMENT_CONTROL.onPanelResize( panelX, panelY, panelW, panelH, isResizerTopAction === true);\r
1799                         },\r
1800                         onWindowResize: function( _windowW, _windowH){\r
1801                                 panelX = Math.floor(( _windowW - panelW) / 2);\r
1802                                 panelY = Math.floor(( _windowH - panelH) / 2);\r
1803                                 PANEL_CONTROL.resize();\r
1804                         },\r
1805                         onMouseMove: function( _mouseX, _mouseY){\r
1806                                 if( isDraggable === true && isDragging === true){\r
1807                                         PANEL_CONTROL.resize( false, startX +_mouseX -offsetX, startY +_mouseY -offsetY);\r
1808                                 }\r
1809                         },\r
1810                         onMouseUp: function( _mouseX, _mouseY){\r
1811                                 if( isDraggable === true){\r
1812                                         isDragging = false;\r
1813                                         updateMouseCursor( '');\r
1814                                 }\r
1815                         },\r
1816                         onMouseDown: function( _mouseX, _mouseY){\r
1817                                 if( isDraggable === true){\r
1818                                         offsetX = _mouseX;\r
1819                                         offsetY = _mouseY;\r
1820                                         startX = panelX;\r
1821                                         startY = panelY;\r
1822                                         isDragging = true;\r
1823                                         updateMouseCursor( 'move');\r
1824                                         return true;\r
1825                                 }\r
1826                         },\r
1827                         busy: function(){\r
1828                                 return isDragging === true;\r
1829                         }                               \r
1830                 }\r
1831         })();\r
1832 \r
1833 /* --------------------------------------------------------------------------------------------\r
1834  * PanelResizerClass\r
1835  *  - mouseEventListener\r
1836  */\r
1837         var PanelResizerClass = function( ID, isTop){\r
1838                 var ELM = document.getElementById( ID),\r
1839                         BORDER_WIDTH = 2,\r
1840                         RESIZER_HEIGHT = 30,\r
1841                         x = -BORDER_WIDTH /2,\r
1842                         y = isTop === true ? ( -5 -RESIZER_HEIGHT -BORDER_WIDTH) : 0,\r
1843                         w,\r
1844                         h = RESIZER_HEIGHT,\r
1845                         panelX, panelY, panelW, panelH,\r
1846                         offsetY, startY, startH,\r
1847                         isDragging = false,\r
1848                         MOUSE_CURSOR = updateMouseCursor;\r
1849                         \r
1850                 function restoreState( arg){\r
1851                         if( arg && arg.length > 3){\r
1852                                 PANEL_CONTROL.resize( isTop, arg[ 0] || panelX, arg[ 1] || panelY, arg[ 2] || panelW, arg[ 3] || panelH);\r
1853                         }\r
1854                 }\r
1855                         \r
1856                 return {\r
1857                         onMouseDown: function( _mouseX, _mouseY){\r
1858                                 var _x = _mouseX -panelX,\r
1859                                         _y = _mouseY -panelY;\r
1860                                 if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
1861                                 offsetY = _y;\r
1862                                 startY = panelY;\r
1863                                 startH = panelH;\r
1864                                 isDragging = true;\r
1865                                 MOUSE_CURSOR( 'n-resize');\r
1866                                 return true;\r
1867                         },\r
1868                         onMouseMove: function( _mouseX, _mouseY){\r
1869                                 var _x = _mouseX -panelX,\r
1870                                         _y = _mouseY -panelY;\r
1871                                 if( isDragging !== true){\r
1872                                         if( _x < x || x + w < _x || _y < y || y + h < _y) return false;\r
1873                                         COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
1874                                         MOUSE_CURSOR( 'pointer');\r
1875                                         return true;\r
1876                                 } else {\r
1877                                         var move = _y -offsetY;\r
1878                                         if( isTop === true){\r
1879                                                 if( panelH - move < MIN_PANEL_HEIGHT){\r
1880                                                         move = panelH -MIN_PANEL_HEIGHT;\r
1881                                                 }\r
1882                                                 PANEL_CONTROL.resize( true, panelX, panelY + move, panelW, panelH - move);\r
1883                                         } else {\r
1884                                                 var _h = startH +move;\r
1885                                                 if( 0 < _h && _h < windowH -panelY -RESIZER_HEIGHT -5 -BORDER_WIDTH){\r
1886                                                         PANEL_CONTROL.resize( false, panelX, panelY, panelW, _h < MIN_PANEL_HEIGHT ? MIN_PANEL_HEIGHT : _h);\r
1887                                                 }\r
1888                                         }\r
1889                                 }\r
1890                                 return true;\r
1891                         },\r
1892                         onMouseUp: function( _mouseX, _mouseY){\r
1893                                 if( isDragging !== true) return;\r
1894                                 ( startY !== panelY || startH !== panelH) && HISTORY_CONTROL.saveState( restoreState, [ NaN, startY, NaN, startH], [ NaN, panelY, NaN, panelH]);\r
1895                                 isDragging = false;\r
1896                                 MOUSE_CURSOR( '');\r
1897                         },\r
1898                         busy: function(){\r
1899                                 return isDragging\r
1900                         },\r
1901                         onPanelResize: function( _x, _y, _w, _h){\r
1902                                 panelX = _x;\r
1903                                 panelY = _y;\r
1904                                 if( panelW !== _w){\r
1905                                         ELM.style.width = ( _w +2) +'px';\r
1906                                         panelW = _w;\r
1907                                 }\r
1908                                 panelH = _h;\r
1909                                 y = isTop === true ? y : ( panelH +5 +BORDER_WIDTH);\r
1910                                 w = panelW +2;\r
1911                         }\r
1912                 }\r
1913         };\r
1914         var     PANEL_RESIZER_TOP = new PanelResizerClass( 'panel-resizer-top', true),\r
1915                 PANEL_RESIZER_BOTTOM = new PanelResizerClass( 'panel-resizer-bottom', false);\r
1916                 \r
1917         PanelResizerClass = undefined;\r
1918 \r
1919 /* --------------------------------------------------------------------------------------------\r
1920  * CONSOLE_CONTROLER\r
1921  */\r
1922         var CONSOLE_CONTROLER = ( function(){\r
1923                 var LAYER_BACK_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer back', 'ctrl + B', layerBack, false, true, false),\r
1924                         LAYER_FORWARD_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'layer forward', 'ctrl + F', layerForward, false, false, false),\r
1925                         DELETE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'delete', 'ctrl + D', del, false, true, true),\r
1926                         EDIT_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'Edit Text', 'ctrl + E', edit, false, true, false),\r
1927                         CHANGE_BUTTON = MENU_BAR_CONTROL.EDIT.createSelection( 'change', 'ctrl + U', change, false, false, true),\r
1928                         SAVE = HISTORY_CONTROL.saveState,\r
1929                         jqStage,\r
1930                         jqConsoleParent,\r
1931                         jqConsoleWrapper,\r
1932                         jqConsoleTail,\r
1933                         jqImgConsole, jqTextConsole,\r
1934                         currentElement = null,\r
1935                         currentType = -1,\r
1936                         visible = false,\r
1937                         imgConsoleWidth, imgConsoleHeight,\r
1938                         textConsoleWidth, textConsoleHeight,\r
1939                         consoleWidth, consoleHeight,\r
1940                         consoleX, consoleY,\r
1941                         tailSize = 10,\r
1942                         buttonClickable = false;\r
1943                 \r
1944                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 66, false, true, layerBack);\r
1945                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 70, false, true, layerForward);\r
1946                 \r
1947                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 68, false, true, del);\r
1948                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 69, false, true, edit);\r
1949                 pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 85, false, true, change);\r
1950                 \r
1951                 function buttonBackOrForward( isBack){\r
1952                         var     offest = jqConsoleWrapper.offset();\r
1953                         jqConsoleWrapper.css( {\r
1954                                 position:       isBack === true ? '' : 'absolute',\r
1955                                 left:           isBack === true ? consoleX  : offest.left,\r
1956                                 top:            isBack === true ? consoleY  : offest.top\r
1957                         });\r
1958                         buttonClickable === isBack && ( isBack === true ? jqConsoleParent : jqStage).append( jqConsoleWrapper);\r
1959                         buttonClickable = !isBack;\r
1960                 }\r
1961                 function layerBack(){\r
1962                         if( currentElement === null) return;\r
1963                         if( COMIC_ELEMENT_CONTROL.replace( currentElement, false) === false) return;\r
1964                         INFOMATION_WINDOW.update( currentElement);\r
1965                         SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, true], [ currentElement, false]);\r
1966                         var _z = currentElement.z;\r
1967                         LAYER_BACK_BUTTON.visible( _z > 0);\r
1968                         LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
1969                 }\r
1970                 function layerForward(){\r
1971                         if( currentElement === null) return;\r
1972                         if( COMIC_ELEMENT_CONTROL.replace( currentElement, true) === false) return;\r
1973                         INFOMATION_WINDOW.update( currentElement);\r
1974                         SAVE( COMIC_ELEMENT_CONTROL.restoreReplace, [ currentElement, false], [ currentElement, true]);\r
1975                         var _z = currentElement.z;\r
1976                         LAYER_BACK_BUTTON.visible( _z > 0);\r
1977                         LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
1978                 }\r
1979                 function del(){\r
1980                         if( currentElement === null) return;\r
1981                         buttonBackOrForward( true);\r
1982                         COMIC_ELEMENT_CONTROL.remove( currentElement);\r
1983                         SAVE( COMIC_ELEMENT_CONTROL.restore, [ true, currentElement], [ false, currentElement], true);\r
1984                         COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
1985                 }\r
1986                 function edit(){\r
1987                         if( currentElement === null || currentElement.type !== COMIC_ELEMENT_TYPE_TEXT) return;\r
1988                         TEXT_EDITOR_CONTROL.show( currentElement);\r
1989                         buttonBackOrForward( true);\r
1990                 }\r
1991                 function change(){\r
1992                         if( currentElement === null) return;\r
1993                         buttonBackOrForward( true);\r
1994                         IMAGE_GROUP_EXPROLER.show( currentElement.url);\r
1995                 }\r
1996                 return {\r
1997                         init: function(){\r
1998                                 jqStage = jqEditor;\r
1999                                 jqConsoleTail = $( '#comic-element-consol-tail');\r
2000                                 jqImgConsole = $( '#image-element-consol').hide();\r
2001                                 var imgConsoleSize = pettanr.util.getElementSize( jqImgConsole.get( 0));\r
2002                                 imgConsoleWidth = imgConsoleSize.width;\r
2003                                 imgConsoleHeight = imgConsoleSize.height;\r
2004                                 \r
2005                                 jqTextConsole = $( '#text-element-consol').hide();\r
2006                                 var textConsoleSize = pettanr.util.getElementSize( jqTextConsole.get( 0));\r
2007                                 textConsoleWidth = textConsoleSize.width;\r
2008                                 textConsoleHeight = textConsoleSize.height;\r
2009                                 \r
2010                                 jqConsoleWrapper = $( '#comic-element-consol-wrapper').hide();\r
2011                                 jqConsoleParent = jqConsoleWrapper.parent();\r
2012                                 \r
2013                                 $( '#edit-text-button').click( edit);\r
2014                                 $( '#delete-image-button, #delete-text-button').click( del);\r
2015                                 $( '#change-image-button').click( change);\r
2016                                 $( '#layer-forward-button, #forward-text-button').click( layerForward);\r
2017                                 $( '#layer-back-button, #back-text-button').click( layerBack);\r
2018                                                                                         \r
2019                                 delete CONSOLE_CONTROLER.init;\r
2020                         },\r
2021                         show: function( _currentElement, _w, _h){\r
2022                                 visible === false && jqConsoleWrapper.show();\r
2023                                 visible = true;\r
2024                                 currentElement = _currentElement;\r
2025                                 var _currentType = _currentElement.type,\r
2026                                         _z = _currentElement.z;\r
2027                                 if( currentType !== _currentType){\r
2028                                         currentType = _currentType;\r
2029                                         jqImgConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_IMAGE);\r
2030                                         jqTextConsole.toggle( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
2031                                         consoleWidth = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleWidth : textConsoleWidth;\r
2032                                         consoleHeight = _currentType === COMIC_ELEMENT_TYPE_IMAGE ? imgConsoleHeight : textConsoleHeight;\r
2033                                 }\r
2034                                 consoleX = Math.floor( ( _w -consoleWidth) /2);\r
2035                                 \r
2036                                 LAYER_BACK_BUTTON.visible( _z > 0);\r
2037                                 LAYER_FORWARD_BUTTON.visible( _z < COMIC_ELEMENT_ARRAY.length -1);\r
2038                                 DELETE_BUTTON.visible( true);\r
2039                                 EDIT_BUTTON.visible( _currentType === COMIC_ELEMENT_TYPE_TEXT);\r
2040                                 CHANGE_BUTTON.visible( false);\r
2041                                 \r
2042                                 if( _w > consoleWidth * 1.5 && _h > consoleHeight * 1.5){\r
2043                                         consoleY = Math.floor( ( _h -consoleHeight) /2);\r
2044                                         jqConsoleWrapper.css( {\r
2045                                                 left:                   consoleX,\r
2046                                                 top:                    consoleY\r
2047                                         }).removeClass( 'console-out');\r
2048                                 } else {\r
2049                                         consoleY = _h +tailSize;\r
2050                                         jqConsoleWrapper.css( {\r
2051                                                 left:                   consoleX,\r
2052                                                 top:                    consoleY\r
2053                                         }).addClass( 'console-out');\r
2054                                 }\r
2055                         },\r
2056                         hide: function (){\r
2057                                 visible === true && jqConsoleWrapper.hide();\r
2058                                 visible = false;\r
2059                                 currentElement = null;\r
2060                                 LAYER_BACK_BUTTON.visible( false);\r
2061                                 LAYER_FORWARD_BUTTON.visible( false);\r
2062                                 DELETE_BUTTON.visible( false);\r
2063                                 EDIT_BUTTON.visible( false);\r
2064                                 CHANGE_BUTTON.visible( false);\r
2065                         },\r
2066                         x: function(){ return consoleX;},\r
2067                         y: function(){ return consoleY;},\r
2068                         w: function(){ return consoleWidth;},\r
2069                         h: function(){ return consoleHeight;},\r
2070                         onMouseMove: function( _mouseX, _mouseY){\r
2071                                 if( consoleX > _mouseX || consoleY > _mouseY || consoleX +consoleWidth < _mouseX || consoleY +consoleHeight < _mouseY){\r
2072                                         buttonClickable === true && buttonBackOrForward( true);\r
2073                                         return false;\r
2074                                 }\r
2075                                 buttonClickable === false && buttonBackOrForward( false);\r
2076                                 return true;\r
2077                         },\r
2078                         onMouseOut: function( _mouseX, _mouseY){\r
2079                                 buttonClickable === true && buttonBackOrForward( true);\r
2080                         }\r
2081                 }\r
2082         })();\r
2083 \r
2084 /* --------------------------------------------------------------------------------------------\r
2085  * TAIL_OPERATOR\r
2086  *  - comicElementOperator\r
2087  */\r
2088         var TAIL_OPERATOR = ( function(){\r
2089                 var     MOUSE_CURSOR = updateMouseCursor,\r
2090                         ELM_MOVER = document.getElementById( 'balloon-tail-mover'),\r
2091                         SIZE = pettanr.util.getElementSize( ELM_MOVER).width,\r
2092                         SIN = Math.sin,\r
2093                         COS = Math.cos,\r
2094                         ATAN = Math.atan,\r
2095                         FLOOR = Math.floor,\r
2096                         DEG_TO_RAD = Math.PI / 180,\r
2097                         RAD_TO_DEG = 1 /DEG_TO_RAD,\r
2098                         currentText = null,\r
2099                         tailX, tailY,\r
2100                         x, y, w, h,\r
2101                         balloonW, balloonH, balloonA, radA,\r
2102                         visible = false,\r
2103                         startA;\r
2104                 \r
2105                 return {\r
2106                         update: function ( _w, _h, _a){\r
2107                                 balloonW = _w !== undefined ? _w : balloonW;\r
2108                                 balloonH = _h !== undefined ? _h : balloonH;\r
2109                                 balloonA = _a !== undefined ? _a : balloonA;\r
2110                                 radA = balloonA *DEG_TO_RAD;\r
2111                                 tailX = FLOOR( ( ( COS( radA) /2 +0.5) *( balloonW +SIZE)) -SIZE /2);\r
2112                                 tailY = FLOOR( ( ( SIN( radA) /2 +0.5) *( balloonH +SIZE)) -SIZE /2);\r
2113                                 ELM_MOVER.style.left = tailX +'px';\r
2114                                 ELM_MOVER.style.top = tailY +'px';\r
2115                                 //log.html( [ balloonW, balloonH, balloonA].join());\r
2116                         },\r
2117                         show: function( _currentText){\r
2118                                 /*\r
2119                                  * visibilityのほうがいい, display:none だと ie で描画が狂う\r
2120                                  */\r
2121                                 ELM_MOVER.style.visibility = '';\r
2122                                 this.update( _currentText.w, _currentText.h, _currentText.angle());\r
2123                                 currentText = _currentText;\r
2124                         },\r
2125                         hitTest: function( _mouseX, _mouseY){\r
2126                                 var _x = tailX -SIZE /2,\r
2127                                         _y = tailY -SIZE /2;\r
2128                                         ret = _x <= _mouseX && _y <= _mouseY && _x +SIZE >= _mouseX && _y +SIZE >= _mouseY;\r
2129                                 ret === true && MOUSE_CURSOR( 'move');\r
2130                                 return ret;\r
2131                         },\r
2132                         hide: function(){\r
2133                                 ELM_MOVER.style.visibility = 'hidden';\r
2134                                 currentText = null;\r
2135                         },\r
2136                         onStart: function( _currentText, _mouseX, _mouseY){\r
2137                                 if( _currentText.type !== COMIC_ELEMENT_TYPE_TEXT) return false;\r
2138                                 x = _currentText.x;\r
2139                                 y = _currentText.y;\r
2140                                 if( this.hitTest( _mouseX -x, _mouseY -y) === true){\r
2141                                         w = _currentText.w;\r
2142                                         h = _currentText.h;\r
2143                                         currentText = _currentText;\r
2144                                         startA = _currentText.angle();\r
2145                                         return true;\r
2146                                 }\r
2147                                 return false;\r
2148                         },\r
2149                         onDrag: function( _mouseX, _mouseY){\r
2150                                 _mouseX = _mouseX -x -w /2;\r
2151                                 _mouseY = _mouseY -y -h /2; //Balloonの中心を0,0とする座標系に変換\r
2152                                 \r
2153                                 this.update( w, h,\r
2154                                         _mouseX !== 0 ?\r
2155                                                 ATAN( _mouseY /_mouseX) *RAD_TO_DEG +( _mouseX < 0 ? 180 : 0) :\r
2156                                                 _mouseY > 0 ? 90 : -90\r
2157                                 );\r
2158                                 currentText && currentText.angle( balloonA);\r
2159                                 INFOMATION_WINDOW.update( currentText);\r
2160                         },\r
2161                         onFinish: function(){\r
2162                                 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( x, y, w, h, startA);\r
2163                                 startA !== currentText.angle() && COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, currentText.angle());\r
2164                                 currentText = null;\r
2165                         },\r
2166                         onCancel: function(){\r
2167                                 currentText.angle( startA);\r
2168                                 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h, startA);\r
2169                                 currentText = null;\r
2170                         }\r
2171                 }\r
2172         })();\r
2173 \r
2174 /* --------------------------------------------------------------------------------------------\r
2175  * RESIZE_OPERATOR\r
2176  *  - comicElementOperator\r
2177  */\r
2178         var RESIZE_OPERATOR = ( function(){\r
2179                 var     MOUSE_CURSOR = updateMouseCursor,\r
2180                         GRID_ENABLED = GRID_CONTROL.enabled;\r
2181                 \r
2182                 var     HIT_AREA = MOUSE_HIT_AREA,\r
2183                         POSITION_ARRAY = [],\r
2184                         FLOOR = Math.floor,\r
2185                         CURSOR_AND_FLIP = [\r
2186                                 { cursor:       'n-resize',             v: 3},\r
2187                                 { cursor:       'e-resize',             h: 2},\r
2188                                 { cursor:       'e-resize',             h: 1},\r
2189                                 { cursor:       'n-resize',             v: 0},\r
2190                                 { cursor:       'nw-resize',    h: 5, v: 6, vh: 7},\r
2191                                 { cursor:       'ne-resize',    h: 4, v: 7, vh: 6},\r
2192                                 { cursor:       'ne-resize',    h: 7, v: 4, vh: 5},\r
2193                                 { cursor:       'nw-resize',    h: 6, v: 5, vh: 4}\r
2194                         ],\r
2195                         elmResizerContainer = document.getElementById( 'comic-element-resizer-container'),\r
2196                         elmResizerContainerStyle = elmResizerContainer.style,\r
2197                         elmResizerTopStyle = document.getElementById( 'comic-element-resizer-top').style,\r
2198                         elmResizerLeftStyle = document.getElementById( 'comic-element-resizer-left').style,\r
2199                         elmResizerRightStyle = document.getElementById( 'comic-element-resizer-right').style,\r
2200                         elmResizerBottomStyle = document.getElementById( 'comic-element-resizer-bottom').style,\r
2201                         x, y, w, h,\r
2202                         currentIndex = -1,\r
2203                         currentElement,\r
2204                         currentIsTextElement = false;\r
2205                 \r
2206                 elmResizerContainerStyle.display = 'none';\r
2207                 \r
2208                 var RESIZE_WORK_ARRAY = [\r
2209                                 { x:    0, w:    0, y:  1, h:   -1}, //top\r
2210                                 { x:    1, w:   -1, y:  0, h:    0}, //left\r
2211                                 { x:    0, w:    1, y:  0, h:    0}, //right\r
2212                                 { x:    0, w:    0, y:  0, h:    1}, //bottom\r
2213                                 { x:    1, w:   -1, y:  1, h:   -1}, //top-left\r
2214                                 { x:    0, w:    1, y:  1, h:   -1}, //top-right\r
2215                                 { x:    1, w:   -1, y:  0, h:    1}, //bottom-left\r
2216                                 { x:    0, w:    1, y:  0, h:    1}  //bottom-right\r
2217                         ],\r
2218                         startX, startY, startW, startH, startFilpV, startFilpH, startAspect,\r
2219                         baseX, baseY, baseW, baseH,\r
2220                         currentX, currentY, currentW, currentH,\r
2221                         offsetX, offsetY,\r
2222                         lock = false,\r
2223                         error = 0;\r
2224                 \r
2225                 function draw( _x, _y, _w, _h){\r
2226                         x = _x !== undefined ? _x : x;\r
2227                         y = _y !== undefined ? _y : y;\r
2228                         w = _w !== undefined ? _w : w;\r
2229                         h = _h !== undefined ? _h : h;\r
2230                         try {\r
2231                                 elmResizerContainerStyle.left = x +'px';\r
2232                                 elmResizerContainerStyle.top = y +'px';\r
2233                                 elmResizerContainerStyle.width = w +'px';\r
2234                                 elmResizerContainerStyle.height = h +'px';\r
2235                                 elmResizerTopStyle.left = FLOOR( w /2 -10 /2) +'px';\r
2236                                 elmResizerLeftStyle.top = FLOOR( h /2 -10 /2) +'px';\r
2237                                 elmResizerRightStyle.top = FLOOR( h /2 -10 /2) +'px';\r
2238                                 elmResizerBottomStyle.left = FLOOR( w /2 -10 /2) +'px';                         \r
2239                         } catch(e){\r
2240                                 alert( [x, y, w, h].join( ','));\r
2241                                 return;\r
2242                         }\r
2243 \r
2244                         \r
2245                         POSITION_ARRAY.splice( 0, POSITION_ARRAY.length);\r
2246                         POSITION_ARRAY.push(\r
2247                                 {x:     x +5,                                   y:      y -HIT_AREA,            w:      w -5 *2,                h:      HIT_AREA +5},\r
2248                                 {x: x -HIT_AREA,                        y:      y +HIT_AREA +5,         w:      HIT_AREA +5,    h:      h -5 *2},\r
2249                                 {x: x +w -5,                            y:      y +HIT_AREA +5,         w:      HIT_AREA +5,    h:      h -5 *2},\r
2250                                 {x:     x +5,                                   y:      y +h -5,                        w:      w -5 *2,                h:      HIT_AREA +5},\r
2251                                 {x:     x -HIT_AREA,                    y:      y -HIT_AREA,            w:      HIT_AREA +5,    h:      HIT_AREA +5},\r
2252                                 {x: x +w -HIT_AREA,                     y:      y -HIT_AREA,            w:      HIT_AREA +5,    h:      HIT_AREA +5},\r
2253                                 {x:     x -HIT_AREA,                    y:      y +h -5,                        w:      HIT_AREA +5,    h:      HIT_AREA +5},\r
2254                                 {x:     x +w -5,                                y:      y +h -5,                        w:      HIT_AREA +5,    h:      HIT_AREA +5}\r
2255                         );\r
2256                 }\r
2257                 \r
2258                 function update( _x, _y, _w, _h){\r
2259                         x = _x !== undefined ? _x : currentX;\r
2260                         y = _y !== undefined ? _y : currentY;\r
2261                         w = _w !== undefined ? _w : currentW;\r
2262                         h = _h !== undefined ? _h : currentH;\r
2263                         \r
2264                         if( currentIsTextElement === false && currentIndex > 3 && pettanr.key.shiftEnabled() === true){\r
2265                                 if( startAspect >= 1){\r
2266                                         _w = w;\r
2267                                         w = Math.floor( startAspect * h);\r
2268                                         x = x +( currentIndex % 2 === 0 ? _w -w : 0);\r
2269                                 } else {\r
2270                                         _h = h;\r
2271                                         h = Math.floor( w / startAspect);\r
2272                                         y = y + ( currentIndex <= 5 ? _h -h : 0);\r
2273                                 }\r
2274                         }\r
2275                         draw( x, y, w, h);\r
2276                         currentElement.resize( x, y, w, h);\r
2277                         currentIsTextElement === true && TAIL_OPERATOR.update( w, h);\r
2278                         CONSOLE_CONTROLER.show( currentElement, w, h);\r
2279                         INFOMATION_WINDOW.update( currentElement);\r
2280                 }\r
2281                 \r
2282                 function flip( _flipH, _flipV){\r
2283                         var p = CURSOR_AND_FLIP[ currentIndex];\r
2284                         currentIndex = _flipH === true || _flipV === true ? p[\r
2285                                         _flipH === true && _flipV === true ? 'vh' : ( _flipH === true ? 'h' : 'v')\r
2286                                 ] : currentIndex;\r
2287                         MOUSE_CURSOR( CURSOR_AND_FLIP[ currentIndex].cursor);\r
2288                         elmResizerContainer.className = 'current-resizer-is-' +currentIndex;\r
2289                         currentElement.flip( _flipH, _flipV);\r
2290                 }\r
2291                 return {\r
2292                         update: draw,\r
2293                         index: function( _mouseX, _mouseY){\r
2294                                 var     p;\r
2295                                 for( var i=4; i<8; i++){\r
2296                                         p = POSITION_ARRAY[ i];\r
2297                                         if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
2298                                                 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
2299                                                 elmResizerContainer.className = 'current-resizer-is-' +i;\r
2300                                                 return currentIndex = i;\r
2301                                         }\r
2302                                 }\r
2303                                 for( var i=0; i<4; i++){\r
2304                                         p = POSITION_ARRAY[ i];\r
2305                                         if( p.x <= _mouseX && p.y <= _mouseY && p.x + p.w >= _mouseX && p.y +p.h >= _mouseY){\r
2306                                                 MOUSE_CURSOR( CURSOR_AND_FLIP[ i].cursor);\r
2307                                                 elmResizerContainer.className = 'current-resizer-is-' +i;\r
2308                                                 return currentIndex = i;\r
2309                                         }\r
2310                                 }\r
2311                                 MOUSE_CURSOR( '');\r
2312                                 elmResizerContainer.className = '';\r
2313                                 return -1;\r
2314                         },\r
2315                         show: function( _currentElement){\r
2316                                 currentElement = _currentElement;\r
2317                                 currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
2318                                 elmResizerContainerStyle.display = '';\r
2319                         },\r
2320                         hide: function(){\r
2321                                 currentElement = null;\r
2322                                 elmResizerContainerStyle.display = 'none';\r
2323                         },\r
2324                         onStart: function( _currentElement, _mouseX, _mouseY){\r
2325                                 currentElement = _currentElement;\r
2326                                 currentIsTextElement = _currentElement.type === COMIC_ELEMENT_TYPE_TEXT;\r
2327                                 if( _currentElement.keepSize === true) return false;\r
2328                                 currentIndex = this.index( _mouseX, _mouseY);\r
2329                                 if( currentIndex === -1) return false;\r
2330                                 offsetX = _mouseX;\r
2331                                 offsetY = _mouseY;\r
2332                                 startX = baseX = _currentElement.x;\r
2333                                 startY = baseY = _currentElement.y;\r
2334                                 startW = baseW = _currentElement.w;\r
2335                                 startH = baseH = _currentElement.h;\r
2336                                 if( _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE){\r
2337                                         startFilpV = _currentElement.flipV();\r
2338                                         startFilpH = _currentElement.flipH();                                                   \r
2339                                 }\r
2340                                 startAspect = startW /startH;\r
2341                                 return true;\r
2342                         },\r
2343                         onDrag: function( _mouseX, _mouseY){\r
2344                                 var com = RESIZE_WORK_ARRAY[ currentIndex],\r
2345                                         moveX = _mouseX -offsetX,\r
2346                                         moveY = _mouseY -offsetY,\r
2347                                         _updated = moveX !== 0 || moveY !== 0,\r
2348                                         _x, _y, _w, _h,\r
2349                                         _thisError = 0;\r
2350                                         \r
2351                                 var _memoryX = 0,\r
2352                                         _memoryY = 0,\r
2353                                         _momoryW = 0,\r
2354                                         _momoryH = 0;\r
2355                                 /*\r
2356                                  * Opera 11+ often forget values, why ??\r
2357                                  */\r
2358                                 while( _x === undefined || _y === undefined || _w === undefined || _h === undefined){\r
2359                                         _x = _x !== undefined ? _x : baseX +moveX *com.x;\r
2360                                         _y = _y !== undefined ? _y : baseY +moveY *com.y;\r
2361                                         _w = _w !== undefined ? _w : baseW +moveX *com.w;\r
2362                                         _h = _h !== undefined ? _h : baseH +moveY *com.h;\r
2363                                         error += _thisError === 0 ? 0 : 1;\r
2364                                         ++_thisError;\r
2365                                         if( _thisError > 9999){\r
2366                                                 ++error\r
2367                                                 //alert( 'opera error' +error);\r
2368                                                 this.onCancel;\r
2369                                                 return;\r
2370                                         }\r
2371                                 }\r
2372                                 \r
2373                                 if( _w >= MIN_ELEMENT_SIZE && _h >= MIN_ELEMENT_SIZE){\r
2374                                         \r
2375                                 } else \r
2376                                 if( _w >= -MIN_ELEMENT_SIZE && _h >= -MIN_ELEMENT_SIZE){\r
2377                                         //return;\r
2378                                         if( _w < MIN_ELEMENT_SIZE){\r
2379                                                 //_x += Math.abs( MIN_ELEMENT_SIZE -_w);\r
2380                                                 _x = currentX;\r
2381                                                 _w = MIN_ELEMENT_SIZE;\r
2382                                         }\r
2383                                         if( _h < MIN_ELEMENT_SIZE){\r
2384                                                 //_y += Math.abs( MIN_ELEMENT_SIZE -_h);\r
2385                                                 _y = currentY;\r
2386                                                 _h = MIN_ELEMENT_SIZE;\r
2387                                         }\r
2388                                 } else \r
2389                                 if( currentElement.type === COMIC_ELEMENT_TYPE_TEXT){\r
2390                                         return;\r
2391                                 } else \r
2392                                 if( _w < -MIN_ELEMENT_SIZE || _h < -MIN_ELEMENT_SIZE){\r
2393 \r
2394                                         if( _w < -MIN_ELEMENT_SIZE && _h > MIN_ELEMENT_SIZE){\r
2395                                         // flipH\r
2396                                                 _memoryX = _x;\r
2397                                                 baseX = _x = _x +_w;\r
2398                                                 baseY = _y;\r
2399                                                 baseW = _w = _memoryX -_x;\r
2400                                                 baseH = _h;\r
2401                                                 flip( true, false);\r
2402                                                 flipV = currentElement.flipV();\r
2403                                         } else \r
2404                                         if( _w > MIN_ELEMENT_SIZE && _h < -MIN_ELEMENT_SIZE){\r
2405                                         // flipV\r
2406                                                 _memoryY = _y;\r
2407                                                 baseX = _x;\r
2408                                                 baseY = _y = _y +_h;\r
2409                                                 baseW = _w;\r
2410                                                 baseH = _h = _memoryY -_y;\r
2411                                                 flip( false, true);\r
2412                                                 flipH = currentElement.flipH();\r
2413                                         } else {\r
2414                                         // flipVH\r
2415                                                 _memoryX = _x;\r
2416                                                 _memoryY = _y;\r
2417                                                 baseX = _x = _x +_w;\r
2418                                                 baseY = _y = _y +_h;\r
2419                                                 baseW = _w = _memoryX -_x;\r
2420                                                 baseH = _h = _memoryY -_y;\r
2421                                                 flip( true, true);\r
2422                                                 flipV = currentElement.flipV();\r
2423                                                 flipH = currentElement.flipH();\r
2424                                         }\r
2425                                         _updated = true;\r
2426                                         offsetX = _mouseX;\r
2427                                         offsetY = _mouseY;      \r
2428                                 }\r
2429                                 currentX = _x;\r
2430                                 currentY = _y;\r
2431                                 currentW = _w;\r
2432                                 currentH = _h;\r
2433                                 _updated === true && update( _x, _y, _w, _h);\r
2434                                 \r
2435                                 log.html( [\r
2436                                                 'currentIndex:', currentIndex, \r
2437                                                 'baseW', baseW, 'baseH', baseH,'<br>',\r
2438                                                 'mouse', _mouseX, _mouseY,'<br>',\r
2439                                                 'move', moveX, moveY,'<br>',\r
2440                                                 'xy', _x, _y, 'wh',_w, _h,'<br>',\r
2441                                                 'com.w', com.w, 'com.h', com.h,'<br>',\r
2442                                                 'current',currentW, currentH,'<br>',\r
2443                                                 'result', y, h,\r
2444                                                 'err', error\r
2445                                 ].join( ' , '));\r
2446                         },\r
2447                         onFinish: function(){\r
2448                                 MOUSE_CURSOR( '');\r
2449                                 if( w === startW && h === startH && x === startX && y === startY) return;\r
2450                                 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y, w, h);\r
2451                                 currentElement.resize( x, y, w, h);\r
2452                                 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY, startW, startH, undefined, startFilpV, startFilpH);\r
2453                         },\r
2454                         onCancel: function(){\r
2455                                 MOUSE_CURSOR( '');\r
2456                                 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY, startW, startH);\r
2457                                 currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
2458                                         currentElement.animate( startX, startY, startW, startH, startFilpV, startFilpH) :\r
2459                                         currentElement.animate( startX, startY, startW, startH, angle);\r
2460                         },\r
2461                         lock: function( _lock){\r
2462                                 if( _lock !== undefined){\r
2463                                         elmResizerContainerStyle.borderColor = _lock === true ? 'blue' : '';\r
2464                                         lock = _lock;\r
2465                                 }\r
2466                                 return lock;\r
2467                         },\r
2468                         onShiftUpdate: update,\r
2469                         onCtrlUpdate: update\r
2470                 }\r
2471         })();\r
2472 \r
2473 /* --------------------------------------------------------------------------------------------\r
2474  * POSITION_OPERATOR\r
2475  *  - comicElementOperator\r
2476  */\r
2477         var POSITION_OPERATOR = ( function(){\r
2478                 var     MOUSE_CURSOR = updateMouseCursor,\r
2479                         GRID_ENABLED = GRID_CONTROL.enabled;\r
2480                 \r
2481                 var currentElement,\r
2482                         startX, startY,\r
2483                         x, y,\r
2484                         offsetX, offsetY,\r
2485                         isCopy = false;\r
2486                 \r
2487                 function update( _x, _y){\r
2488                         x = _x !== undefined ? _x : x;\r
2489                         y = _y !== undefined ? _y : y;\r
2490                         RESIZE_OPERATOR.update( x, y);\r
2491                         currentElement.resize( x, y);\r
2492                         INFOMATION_WINDOW.update( currentElement);\r
2493                 }\r
2494                 \r
2495                 return {\r
2496                         onStart: function( _currentElement, _mouseX, _mouseY){\r
2497                                 currentElement = _currentElement;\r
2498                                 offsetX = _mouseX;\r
2499                                 offsetY = _mouseY;\r
2500                                 startX = x = _currentElement.x;\r
2501                                 startY = y = _currentElement.y;\r
2502                                 MOUSE_CURSOR( 'move');\r
2503                         },\r
2504                         onDrag: function( _mouseX, _mouseY){\r
2505                                 var moveX = _mouseX -offsetX,\r
2506                                         moveY = _mouseY -offsetY,\r
2507                                         _x = startX +moveX,\r
2508                                         _y = startY +moveY;\r
2509                                 if( GRID_ENABLED() === true){\r
2510                                         _x = Math.floor( _x / 10) * 10;\r
2511                                         _y = Math.floor( _y / 10) * 10;\r
2512                                 }\r
2513                                 update( _x, _y);\r
2514                         },\r
2515                         onFinish: function(){\r
2516                                 MOUSE_CURSOR( '');\r
2517                                 if( x === startX && y === startY) return;\r
2518                                 COMIC_ELEMENT_OPERATION_MANAGER.resize( x, y);\r
2519                                 currentElement.resize( x, y);\r
2520                                 COMIC_ELEMENT_OPERATION_MANAGER.saveStatus( startX, startY);\r
2521                         },\r
2522                         onCancel: function(){\r
2523                                 MOUSE_CURSOR( '');\r
2524                                 COMIC_ELEMENT_OPERATION_MANAGER.resize( startX, startY);\r
2525                                 currentElement.animate( startX, startY);\r
2526                         },\r
2527                         onShiftUpdate: update,\r
2528                         onCtrlUpdate: update\r
2529                 }\r
2530         })();\r
2531 \r
2532 \r
2533 /* --------------------------------------------------------------------------------------------\r
2534  * COMIC_ELEMENT_OPERATION_MANAGER\r
2535  */\r
2536         var COMIC_ELEMENT_OPERATION_MANAGER = ( function(){\r
2537                 var     MOUSE_CURSOR = updateMouseCursor,\r
2538                         SAVE = HISTORY_CONTROL.saveState,\r
2539                         GRID_ENABLED = GRID_CONTROL.enabled,\r
2540                         HIT_AREA = MOUSE_HIT_AREA,\r
2541                         currentIsTextElement = false,\r
2542                         currentOperator = null,\r
2543                         currentElement = null,\r
2544                         currentx, currenty, currentw, currenth, angle, flipV, flipH;\r
2545 \r
2546                         function resize( _x, _y, _w, _h, _angle){\r
2547                                 currentx = _x !== undefined ? _x : currentx;\r
2548                                 currenty = _y !== undefined ? _y : currenty;\r
2549                                 currentw = _w !== undefined ? _w : currentw;\r
2550                                 currenth = _h !== undefined ? _h : currenth;\r
2551                                 angle = _angle !== undefined ? _angle : angle;\r
2552 \r
2553                                 RESIZE_OPERATOR.update( currentx, currenty, currentw, currenth);\r
2554                                 currentIsTextElement === true && TAIL_OPERATOR.update( currentw, currenth, angle);\r
2555                                 CONSOLE_CONTROLER.show( currentElement, currentw, currenth);\r
2556                                 INFOMATION_WINDOW.update( currentElement);\r
2557                         }\r
2558                         function show( _currentElement){\r
2559                                 currentElement === null && RESIZE_OPERATOR.show( _currentElement);\r
2560                                 if( currentElement !== _currentElement){\r
2561                                         currentElement = _currentElement;\r
2562                                         \r
2563                                         currentIsTextElement = ( _currentElement.type === COMIC_ELEMENT_TYPE_TEXT);\r
2564                                         currentIsTextElement === true ? TAIL_OPERATOR.show( _currentElement) : TAIL_OPERATOR.hide();\r
2565                                         \r
2566                                         flipV = currentIsTextElement === false ? _currentElement.flipV() : 0;\r
2567                                         flipH = currentIsTextElement === false ? _currentElement.flipH() : 0;\r
2568                                         \r
2569                                         resize(\r
2570                                                 _currentElement.x, _currentElement.y, _currentElement.w, _currentElement.h,\r
2571                                                 currentIsTextElement === true ? _currentElement.angle() : 0\r
2572                                         );\r
2573                                 }\r
2574                         }\r
2575 \r
2576                         pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 16, undefined, undefined, function( e){\r
2577                                 currentOperator !== null && currentOperator.onShiftUpdate && currentOperator.onShiftUpdate();\r
2578                         });\r
2579                         pettanr.key.addKeyUpdateEvent( pettanr.view.EDITOR, 17, undefined, undefined, function( e){\r
2580                                 currentOperator !== null && currentOperator.onCtrlUpdate && currentOperator.onCtrlUpdate();\r
2581                         });\r
2582                         pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 27, false, false, function( e){\r
2583                                 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
2584                                 currentOperator = null;\r
2585                         });\r
2586                 return {\r
2587                         open: function(){\r
2588                                 this.hide();\r
2589                         },\r
2590                         close: function(){\r
2591                                 \r
2592                         },\r
2593                         hide: function(){\r
2594                                 currentElement !== null && RESIZE_OPERATOR.hide();\r
2595                                 currentElement = null;\r
2596                                 MOUSE_CURSOR( '');\r
2597                                 TAIL_OPERATOR.hide();\r
2598                                 CONSOLE_CONTROLER.hide();\r
2599                                 INFOMATION_WINDOW.update( null);\r
2600                         },\r
2601                         resize: resize,\r
2602                         restoreState: function( arg){\r
2603                                 if( arg && arg.length !== 8) return;\r
2604                                 var _currentElement = arg[ 0],\r
2605                                         _x = arg[ 1], _y = arg[ 2], _w = arg[ 3], _h = arg[ 4],\r
2606                                         _a = arg[ 5],\r
2607                                         _flipV = arg[ 6], _flipH = arg[ 7];\r
2608                                 if( !_currentElement && !currentOperator) return;\r
2609                                 _currentElement.type === COMIC_ELEMENT_TYPE_IMAGE ?\r
2610                                         _currentElement.animate( _x, _y, _w, _h, _flipV, _flipH) :\r
2611                                         _currentElement.animate( _x, _y, _w, _h, _a);\r
2612                                 currentOperator !== null && currentOperator.onCancel && currentOperator.onCancel();\r
2613                                 currentOperator = null;\r
2614                                 currentElement === _currentElement ? resize( _x, _y, _w, _h, _a) : show( _currentElement);\r
2615                         },\r
2616                         saveStatus: function( startX, startY, startW, startH, startA, startFilpV, startFilpH){\r
2617                                 startX = startX !== undefined ? startX : currentx;\r
2618                                 startY = startY !== undefined ? startY : currenty;\r
2619                                 startW = startW !== undefined ? startW : currentw;\r
2620                                 startH = startH !== undefined ? startH : currenth;\r
2621                                 startA = startA !== undefined ? startA : angle;\r
2622                                 startFilpV = startFilpV !== undefined ? startFilpV : flipV;\r
2623                                 startFilpH = startFilpH !== undefined ? startFilpH : flipH;\r
2624                                 currentElement && SAVE( COMIC_ELEMENT_OPERATION_MANAGER.restoreState,\r
2625                                         [ currentElement, startX, startY, startW, startH, startA, startFilpV, startFilpH],\r
2626                                         [ currentElement, currentx, currenty, currentw, currenth, angle, flipV, flipH]\r
2627                                 );\r
2628                         },\r
2629                         busy: function(){\r
2630                                 return currentOperator !== null;\r
2631                         },\r
2632                         hitTest: function( _mouseX, _mouseY, _comicElement){\r
2633                                 var _x, _y, _w, _h;\r
2634                                 if( _comicElement === currentElement){\r
2635                                         var _consoleX = CONSOLE_CONTROLER.x();\r
2636                                         _x = currentx +( _consoleX < 0 ? _consoleX : 0) -HIT_AREA;\r
2637                                         _y = currenty -HIT_AREA;\r
2638                                         var _consoleW = CONSOLE_CONTROLER.w();\r
2639                                         _w = ( _consoleW < currentw ? currentw : _consoleW) +HIT_AREA *2;\r
2640                                         var _consoleY = CONSOLE_CONTROLER.y();\r
2641                                         _h = ( _consoleY < currenth ? currenth : _consoleY +CONSOLE_CONTROLER.h()) +HIT_AREA *2;\r
2642                                 } else {\r
2643                                         _x = _comicElement.x -HIT_AREA;\r
2644                                         _y = _comicElement.y -HIT_AREA;\r
2645                                         _w = _comicElement.w +HIT_AREA *2;\r
2646                                         _h = _comicElement.h +HIT_AREA *2;\r
2647                                 }\r
2648                                 return _x <= _mouseX && _mouseX <= _x + _w && _y <= _mouseY && _mouseY <= _y + _h;\r
2649                         },\r
2650                         onMouseDown: function( _currentElement, _mouseX, _mouseY){\r
2651                                 //show( _currentElement);\r
2652                                 if( currentIsTextElement === true && TAIL_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
2653                                         currentOperator = TAIL_OPERATOR;\r
2654                                 } else\r
2655                                 if( RESIZE_OPERATOR.onStart( _currentElement, _mouseX, _mouseY) === true){\r
2656                                         currentOperator = RESIZE_OPERATOR;\r
2657                                 } else {\r
2658                                         POSITION_OPERATOR.onStart( _currentElement, _mouseX, _mouseY)\r
2659                                         currentOperator = POSITION_OPERATOR;\r
2660                                 }\r
2661                         },\r
2662                         onMouseMove: function( _currentElement, _mouseX, _mouseY){\r
2663                                 show( _currentElement);\r
2664                                 if( currentOperator !== null){\r
2665                                         currentOperator.onDrag( _mouseX, _mouseY);                                              \r
2666                                 } else\r
2667                                 if( currentElement !== null){\r
2668                                         CONSOLE_CONTROLER.onMouseMove( _mouseX -currentx, _mouseY -currenty);\r
2669                                         if( currentIsTextElement === false || TAIL_OPERATOR.hitTest( _mouseX -currentx, _mouseY -currenty) === false){\r
2670                                                 RESIZE_OPERATOR.index( _mouseX, _mouseY);\r
2671                                         }\r
2672                                 }\r
2673                         },\r
2674                         onMouseUp: function( _currentElement, _mouseX, _mouseY){\r
2675                                 currentOperator !== null && currentOperator.onFinish();\r
2676                                 currentOperator = null;\r
2677                         }\r
2678                 }\r
2679         })();\r
2680         /*\r
2681          *  // COMIC_ELEMENT_OPERATION_MANAGER\r
2682          */\r
2683 \r
2684         var AbstractComicElement = function( JQ_WAPPER, COMIC_ELM_TYPE, update, x, y, w, h, z, timing){\r
2685                 var OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER;\r
2686                 return {\r
2687                         $: JQ_WAPPER,\r
2688                         type: COMIC_ELM_TYPE,\r
2689                         x: x,\r
2690                         y: y,\r
2691                         w: w,\r
2692                         h: h,                                   \r
2693                         z: z,\r
2694                         timing: timing,\r
2695                         hitTest: function( _mouseX, _mouseY){ return OPERATOR.hitTest(  _mouseX, _mouseY, this);},\r
2696                         shift: function( _shiftX, _shiftY){\r
2697                                 update( this.x +_shiftX, this.y +_shiftY);\r
2698                         },\r
2699                         busy: function(){\r
2700                                 return OPERATOR.busy();\r
2701                         },\r
2702                         onMouseMove: function( _mouseX, _mouseY){\r
2703                                 OPERATOR.onMouseMove( this, _mouseX, _mouseY);\r
2704                         },\r
2705                         onMouseUp: function( _mouseX, _mouseY){\r
2706                                 OPERATOR.onMouseUp( this, _mouseX, _mouseY);\r
2707                         },\r
2708                         onMouseDown: function( _mouseX, _mouseY){\r
2709                                 OPERATOR.onMouseDown( this, _mouseX, _mouseY);\r
2710                         }\r
2711                 }\r
2712         };\r
2713 \r
2714 /* --------------------------------------------------------------------------------------------\r
2715  * ImageElementClass\r
2716  */\r
2717         var     jqImageElementOrigin;\r
2718         var ImageElementClass = function( url, IMAGE_SET_ID, x, y, z, w, h, timing){\r
2719                 jqImageElementOrigin = jqImageElementOrigin || $( $( '#imgElementTemplete').remove().html());\r
2720                 \r
2721                 var JQ_WRAPPER = jqImageElementOrigin.clone( true),\r
2722                         OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
2723                         SAVE = HISTORY_CONTROL.saveState,\r
2724                         HIT_AREA = MOUSE_HIT_AREA,\r
2725                         reversibleImage = null,\r
2726                         actualW = 0, actualH = 0,\r
2727                         flipH = w < 0 ? -1 : 1,\r
2728                         flipV = h < 0 ? -1 : 1,\r
2729                         instance;\r
2730                 w = Math.floor( w);\r
2731                 h = Math.floor( h);\r
2732                 \r
2733                 function update( _x, _y, _w, _h, animate){\r
2734                         instance.x = x = _x !== undefined ? _x : x;\r
2735                         instance.y = y = _y !== undefined ? _y : y;\r
2736                         instance.w = w = _w !== undefined ? _w : w;\r
2737                         instance.h = h = _h !== undefined ? _h : h;\r
2738                         JQ_WRAPPER[ animate === true ? 'animate' : 'css']( { \r
2739                                 left:   x,\r
2740                                 top:    y,\r
2741                                 width:  w,\r
2742                                 height: h\r
2743                         }, 250, onAnimeComplete);\r
2744                         animate !== true && onAnimeComplete();\r
2745                 }\r
2746                 function onAnimeComplete(){\r
2747                         reversibleImage.resize( flipH * w, flipV * h);\r
2748                 }\r
2749                 \r
2750                 function updateUrl( _url){\r
2751                         if( url === _url) return;\r
2752                         url = _url || url;\r
2753                         var _reversibleImage = pettanr.image.createReversibleImage( url, flipH * w, flipV * h, function( _url, _actualW, _actualH){\r
2754                                 actualW = _actualW;\r
2755                                 actualH = _actualH;\r
2756                         });\r
2757                         if( reversibleImage !== null){\r
2758                                 JQ_WRAPPER.children( reversibleImage.elm).replaceWith( _reversibleImage.elm);\r
2759                                 reversibleImage.destroy();\r
2760                         } else {\r
2761                                 JQ_WRAPPER.append( _reversibleImage.elm);\r
2762                         }\r
2763                         reversibleImage = _reversibleImage;\r
2764                 }\r
2765                 return pettanr.util.extend(\r
2766                         new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_IMAGE, update, x, y, w, h, z, timing),\r
2767                         {\r
2768                                 init: function(){\r
2769                                         instance = this;\r
2770                                         updateUrl();\r
2771                                         update();\r
2772                                         delete this.init;\r
2773                                 },\r
2774                                 flip: function( _flipH, _flipV){\r
2775                                         if( _flipH !== true && _flipV !== true) return;\r
2776                                         flipH = _flipH === true ? -flipH : flipH;\r
2777                                         flipV = _flipV === true ? -flipV : flipV;\r
2778                                         reversibleImage.resize( flipH * w, flipV * h);\r
2779                                 },\r
2780                                 flipV: function(){\r
2781                                         return flipV;\r
2782                                 },\r
2783                                 flipH: function(){\r
2784                                         return flipH;\r
2785                                 },\r
2786                                 url: function( _url, _actualW, _actualH){\r
2787                                         if( _url && _url !== url){\r
2788                                                 SAVE( updateUrl, url, _url);\r
2789                                                 actualW = _actualW;\r
2790                                                 actualH = _actualH;\r
2791                                                 updateUrl( _url);\r
2792                                         }\r
2793                                         return url;\r
2794                                 },\r
2795                                 actualW: function(){ return actualW;},\r
2796                                 actualH: function(){ return actualH;},\r
2797                                 keepSize: false,\r
2798                                 resize: update,\r
2799                                 animate: function ( _x, _y, _w, _h, _flipH, _flipV){\r
2800                                         flipH = _flipH !== undefined ? _flipH : flipH;\r
2801                                         flipV = _flipV !== undefined ? _flipV : flipV;\r
2802                                         update( _x, _y, _w, _h, true);\r
2803                                 },\r
2804                                 getAsHTML: function( isAbsoluteUrl, isXHTML){\r
2805                                         return [\r
2806                                                 '<img ',\r
2807                                                         'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
2808                                                         'width="', w, '" ',\r
2809                                                         'height="', h, '" ',\r
2810                                                         'style="',                                                                      \r
2811                                                                 'left:', x, 'px;',\r
2812                                                                 'top:', y, 'px;',\r
2813                                                                 'z-index:', this.z, ';',\r
2814                                                         '"',\r
2815                                                 isXHTML !== true ? '>' : ' \/>'\r
2816                                         ].join( '');\r
2817                                 },\r
2818                                 getAsJsonString: function(){\r
2819                                         var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
2820                                         return [\r
2821                                                 '"new', this.timing, '": {', cr,\r
2822                                                         '"resource_picture_id": 1,', cr,\r
2823                                                         '"x": ', x, ',', cr,\r
2824                                                         '"y": ', y, ',', cr,\r
2825                                                         '"z": ', this.z, ',', cr,\r
2826                                                         '"width": ', w, ',', cr,\r
2827                                                         '"height": ', h, ',', cr,\r
2828                                                         '"flipv": ', flipV === true ? 1 : 0, ',', cr,\r
2829                                                         '"fliph": ', flipH === true ? 1 : 0, ',', cr,\r
2830                                                         '"t": ', this.timing, cr,\r
2831                                                 '}'\r
2832                                         ].join( '');\r
2833                                 },\r
2834                                 destroy: function(){\r
2835                                         reversibleImage.destroy();\r
2836                                         JQ_WRAPPER.remove();\r
2837                                         JQ_WRAPPER = reversibleImage = OPERATOR = null;\r
2838                                         delete this.destroy;\r
2839                                 }\r
2840                         }\r
2841                 );\r
2842         }\r
2843 /*\r
2844  * / ImageElementClass\r
2845  * --------------------------------------------------------------------------------------------\r
2846  */\r
2847 \r
2848 \r
2849 /* --------------------------------------------------------------------------------------------\r
2850  * TextElementClass\r
2851  * \r
2852  * type\r
2853  * 0.none\r
2854  * 1.speach balloon\r
2855  * 2.think\r
2856  * 3.bom\r
2857  * 4.black-box( dq style)\r
2858  * 5.blue-box( ff style)\r
2859  * \r
2860  */\r
2861         var jqTextElementOrigin;\r
2862         var TextElementClass = function( type, a, text, x, y, z, w, h, timing){\r
2863                 jqTextElementOrigin = jqTextElementOrigin || ( function(){\r
2864                         var _OLD_IE = $( $( '#textElementTempleteForOldIE').remove().html()),\r
2865                                 _MODERN = $( $( '#textElementTemplete').remove().html());\r
2866                         return pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? _OLD_IE : _MODERN;\r
2867                 })();\r
2868                 \r
2869                 var JQ_WRAPPER = jqTextElementOrigin.clone( true),\r
2870                         XBROWSER_BALLOON = pettanr.balloon.createBalloon( w, h, a, type),\r
2871                         TEXT_ELM = JQ_WRAPPER.find( 'td,.speach-inner').eq( 0),\r
2872                         OPERATOR = COMIC_ELEMENT_OPERATION_MANAGER,\r
2873                         HIT_AREA = MOUSE_HIT_AREA,\r
2874                         SAVE = HISTORY_CONTROL.saveState,\r
2875                         instance;\r
2876                         \r
2877                 JQ_WRAPPER.find( 'img').eq( 0).replaceWith( XBROWSER_BALLOON.elm);\r
2878                 \r
2879                 function update( _x, _y, _w, _h, _a, animate){\r
2880                         instance.x = x = _x !== undefined ? _x : x;\r
2881                         instance.y = y = _y !== undefined ? _y : y;\r
2882                         instance.w = w = _w !== undefined ? _w : w;\r
2883                         instance.h = h = _h !== undefined ? _h : h;\r
2884                         a = _a !== undefined ? _a : a;\r
2885                         \r
2886                         JQ_WRAPPER[ animate === true ? 'animate' : 'css']( {\r
2887                                         left:           x,\r
2888                                         top:            y,\r
2889                                         width:          w,\r
2890                                         height:         h\r
2891                                 }, 250,\r
2892                                 function(){\r
2893                                         XBROWSER_BALLOON.resize( a, w, h);\r
2894                                 }\r
2895                         );              \r
2896                         animate !== true && XBROWSER_BALLOON.resize( a, w, h);\r
2897                 }\r
2898                 \r
2899                 function updateType( _type){\r
2900                         if( type !== _type){\r
2901                                 type = _type || type;\r
2902                                 XBROWSER_BALLOON.type( type);\r
2903                         }\r
2904                 }\r
2905                 function updateAngle( _a){\r
2906                         if( _a !== undefined && a !== _a){\r
2907                                 a = _a !== undefined ? _a : a;\r
2908                                 XBROWSER_BALLOON.angle( a);\r
2909                         }\r
2910                 }\r
2911                 function updateText( _text){\r
2912                         text = _text || text || '';\r
2913                         TEXT_ELM.html( text);\r
2914                 }\r
2915                 \r
2916                 return pettanr.util.extend(\r
2917                         new AbstractComicElement( JQ_WRAPPER, COMIC_ELEMENT_TYPE_TEXT, update, x, y, w, h, z, timing),\r
2918                         {\r
2919                                 init: function(){\r
2920                                         instance = this;\r
2921                                         updateText();\r
2922                                         update();\r
2923                                         delete this.init;\r
2924                                 },\r
2925                                 angle: function( _a){\r
2926                                         _a !== undefined && update( undefined, undefined, undefined, undefined, _a);\r
2927                                         return a;\r
2928                                 },\r
2929                                 text: function( _text){\r
2930                                         if( _text && text !== _text) {\r
2931                                                 SAVE( updateText, text || '', _text);\r
2932                                                 updateText( _text);\r
2933                                         }\r
2934                                         return text;\r
2935                                 },\r
2936                                 resize: update,\r
2937                                 animate: function ( _x, _y, _w, _h, _a){\r
2938                                         update( _x, _y, _w, _h, _a, true);\r
2939                                 },\r
2940                                 destroy: function(){\r
2941                                         JQ_WRAPPER.remove();\r
2942                                         XBROWSER_BALLOON.destroy();\r
2943                                         OPERATOR = null;\r
2944                                         delete this.destroy;\r
2945                                 },\r
2946                                 getAsJSON: function(){\r
2947                                         \r
2948                                 },\r
2949                                 getAsJsonString: function(){\r
2950                                         var cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
2951                                         return [\r
2952                                                 '"new', this.timing, '": {', cr,\r
2953                                                         '"balloon_template_id": ', 1, ',', cr,\r
2954                                                         '"system_picture_id": ', 1, ',', cr,\r
2955                                                         '"size": ', 1, ',', cr,\r
2956                                                         '"tail": ', a, ',', cr,\r
2957                                                         '"x": ', x, ',', cr,\r
2958                                                         '"y": ', y, ',', cr,\r
2959                                                         '"z": ', this.z, ',', cr,\r
2960                                                         '"t": ', this.timing, ',', cr,\r
2961                                                         '"width": ', w, ',', cr,\r
2962                                                         '"height": ', h, ',', cr,\r
2963                                                         '"speaches_attributes": {', cr,\r
2964                                                         '"newf', this.timing, '": {', cr,\r
2965                                                         '"content": "', text, '",', cr,\r
2966                                                                         '"x": ', x, ',', cr,\r
2967                                                                         '"y": ', y, ',', cr,\r
2968                                                                         '"t": ', 0, ',', cr,\r
2969                                                                         '"width": ', w, ',', cr,\r
2970                                                                         '"height": ', h, cr,\r
2971                                                                 '}', cr,\r
2972                                                         '}', cr,\r
2973                                                 '}'\r
2974                                         ].join( '');\r
2975                                 },\r
2976                                 getAsHTML: function( isAbsoluteUrl, isXHTML){\r
2977                                         var url = XBROWSER_BALLOON.getURL();\r
2978                                         return [\r
2979                                                 '<img ',\r
2980                                                         'src="', isAbsoluteUrl !== true ? url : pettanr.util.getAbsolutePath( url), '" ',\r
2981                                                         'width="', w, '" ',\r
2982                                                         'height="', h, '" ',\r
2983                                                         'style="',                                                                      \r
2984                                                                 'left:', x, 'px;',\r
2985                                                                 'top:', y, 'px;',\r
2986                                                                 'z-index:', this.z, ';',\r
2987                                                         '"',\r
2988                                                 isXHTML !== true ? '>' : ' \/>',\r
2989                                                 pettanr.LINE_FEED_CODE_TEXTAREA,\r
2990                                                 '<div class="balloon" style="',\r
2991                                                         'left:', x, 'px;',\r
2992                                                         'top:', y, 'px;',\r
2993                                                         'width:', w, 'px;',\r
2994                                                         'height:', h, 'px;',\r
2995                                                         'z-index:', this.z,\r
2996                                                 '"><span>', text, '<\/span>', '<\/div>'\r
2997                                                         \r
2998                                         ].join( '');\r
2999                                 },\r
3000                                 getAsXML: function(){}\r
3001                         }\r
3002                 );\r
3003         }\r
3004 \r
3005 /* --------------------------------------------------------------------------------------------\r
3006  * COMIC_ELEMENT_CONTROL\r
3007  *  - mouseEventListener\r
3008  */\r
3009         var COMIC_ELEMENT_CONTROL = ( function(){\r
3010                 var     SAVE = HISTORY_CONTROL.saveState,\r
3011                         ELM_CONTAINER = document.getElementById( 'comic-element-container'),\r
3012                         currentElement = null,\r
3013                         currentLockTest = false,\r
3014                         currentLock = false,\r
3015                         panelX, panelY, panelW, panelH,\r
3016                         startX, startY;\r
3017         /*\r
3018          * append, remove, replace\r
3019          * \r
3020          * comicElement には、z-position と dom-index がある。\r
3021          *   z-position は 表示上の位置。大きいほど前に表示される（ z-index）\r
3022          *   dom-index は 意味上の順番。htmlタグの登場順で、検索結果や音声読み上げブラウザで正しく意味が取れる順番。\r
3023          * \r
3024          * editerでは、実際には z-index は使わず、htmlの順序で前後を表現する。\r
3025          * dom-index は、数値のみ保持して、投稿時にcomicElementを適宜に並び替える。\r
3026          * \r
3027          * append comicElement\r
3028          * 1. 新しい comicElement の z-position を得る\r
3029          * 2. ｚ の同じ comicElementを見つけ、その前に加える。または一番先頭へ。（COMIC_ELEMENT_ARRAY）\r
3030          *    zが大きいほど、COMIC_ELEMENT_ARRAYの先頭へ。\r
3031          * 3. dom位置は、COMIC_ELEMENT_ARRAY とは反対に、前のものほど後ろへ。\r
3032          * \r
3033          * \r
3034          * remove comicElement\r
3035          * 1. remove\r
3036          * 2. renumber z\r
3037          */\r
3038                 function appendComicElement( _comicElement) {\r
3039                         _comicElement.init && _comicElement.init();\r
3040                         var z = _comicElement.z,\r
3041                                 l = COMIC_ELEMENT_ARRAY.length,\r
3042                                 _jqElm = _comicElement.$.stop().css( {\r
3043                                         filter:         '',\r
3044                                         opacity:        ''\r
3045                                 });\r
3046                         if( typeof z !== 'number' || z < 0 || z >= l){\r
3047                                 COMIC_ELEMENT_ARRAY.unshift( _comicElement);\r
3048                                 ELM_CONTAINER.appendChild( _jqElm.get( 0));\r
3049                                 _jqElm.fadeIn();\r
3050                         } else {\r
3051                                 var insertIndex = 0;\r
3052                                 for( var i = 0; i < l; ++i){\r
3053                                         if( COMIC_ELEMENT_ARRAY[ i].z <= z){\r
3054                                                 insertIndex = i;\r
3055                                                 break;\r
3056                                         }\r
3057                                 }\r
3058                                 COMIC_ELEMENT_ARRAY[ insertIndex].$.before( _jqElm.fadeIn());\r
3059                                 COMIC_ELEMENT_ARRAY.splice( insertIndex, 0, _comicElement);\r
3060                         }\r
3061                         renumber();\r
3062                 }\r
3063                 function removeComicElement( _comicElement) {\r
3064                         var l = COMIC_ELEMENT_ARRAY.length;\r
3065                         for( var i=0; i<l; ++i){\r
3066                                 if( COMIC_ELEMENT_ARRAY[ i] === _comicElement){\r
3067                                         COMIC_ELEMENT_ARRAY.splice( i, 1);\r
3068                                         renumber();\r
3069                                         _comicElement.$.stop().css( {\r
3070                                                 filter:         '',\r
3071                                                 opacity:        ''\r
3072                                         }).fadeOut( onFadeOut);\r
3073                                         currentElement = currentElement === _comicElement ? null : currentElement;\r
3074                                         return;\r
3075                                 }\r
3076                         }\r
3077                         function onFadeOut(){\r
3078                                 this.parentNode.removeChild( this);\r
3079                         }\r
3080                 }\r
3081                 function restoreComicElement( arg){\r
3082                         var isAppend = arg[ 0],\r
3083                                 comicElement = arg[ 1];\r
3084                         isAppend === true ? appendComicElement( comicElement) : removeComicElement( comicElement);\r
3085                 }\r
3086                 /*\r
3087                  * COMIC_ELEMENT_ARRAY の順番を基準に、zの再計算\r
3088                  * jqElmの並び替え。\r
3089                  */\r
3090                 function renumber(){\r
3091                         var l = COMIC_ELEMENT_ARRAY.length,\r
3092                                 _comicElement, jqElm, jqNext;\r
3093                         for( var i=0; i < l; ++i){\r
3094                                 _comicElement = COMIC_ELEMENT_ARRAY[ i];\r
3095                                 jqElm = _comicElement.$;\r
3096                                 jqNext && jqNext.before( jqElm);\r
3097                                 _comicElement.z = l -i -1;\r
3098                                 jqNext = jqElm;\r
3099                         }\r
3100                 }\r
3101                 function replaceComicElement( _comicElement, goForward){\r
3102                         // COMIC_ELEMENT_ARRAYの再構築\r
3103                         var l = COMIC_ELEMENT_ARRAY.length,\r
3104                                 i = ( function(){\r
3105                                         for( var ret = 0; ret < l; ++ret){\r
3106                                                 if( COMIC_ELEMENT_ARRAY[ ret] === _comicElement) return ret;\r
3107                                         }\r
3108                                         return -1;\r
3109                                 })();\r
3110                         if( i === -1) return false;\r
3111                         if( goForward === true){\r
3112                                 if( i === 0) return false;\r
3113                                 COMIC_ELEMENT_ARRAY.splice( i, 1);\r
3114                                 COMIC_ELEMENT_ARRAY.splice( i -1, 0, _comicElement);\r
3115                         } else {\r
3116                                 if( i === l -1) return false;\r
3117                                 COMIC_ELEMENT_ARRAY.splice( i, 1);\r
3118                                 COMIC_ELEMENT_ARRAY.splice( i +1, 0, _comicElement);\r
3119                         }\r
3120                         renumber();\r
3121                         return true;\r
3122                 }\r
3123                 function restoreReplaceElement( arg){\r
3124                         replaceComicElement( arg[ 0], arg[ 1]);\r
3125                 }\r
3126                 \r
3127                 return {\r
3128                         init: function(){\r
3129                                 \r
3130                                 appendComicElement( ImageElementClass.apply( {}, [ 'resource_pictures/13.gif', 'penchan', 10, 10, 0, 100, 140, 0]));\r
3131                                 appendComicElement( TextElementClass.apply( {}, [ 0, 270, 'Hello', 50, 70, 1, 200, 160, 1]));\r
3132                         /*\r
3133                          * \r
3134                          */\r
3135                                 log = $( '#operation-catcher-log');\r
3136                                 \r
3137                                 delete COMIC_ELEMENT_CONTROL.init;\r
3138                         },\r
3139                         open: function(){\r
3140                                 COMIC_ELEMENT_CONTROL.init && COMIC_ELEMENT_CONTROL.init();\r
3141                         },\r
3142                         close: function(){\r
3143                                 while( COMIC_ELEMENT_ARRAY.length > 0){\r
3144                                         COMIC_ELEMENT_ARRAY.shift().destroy();\r
3145                                 }\r
3146                         },\r
3147                         remove: removeComicElement,\r
3148                         restore: restoreComicElement,\r
3149                         replace: replaceComicElement,\r
3150                         restoreReplace: restoreReplaceElement,\r
3151                         onPanelResize : function ( _panelX, _panelY, _panelW, _panelH, isResizerTopAction){\r
3152                         /*\r
3153                          * リサイズが、ResizerTopによって行われた場合、comicElementのyを動かして見かけ上動かないようにする。\r
3154                          */                                     \r
3155                                 if( isResizerTopAction === true){\r
3156                                         var     _shiftX = _panelW -panelW,\r
3157                                                 _shiftY = _panelH -panelH,\r
3158                                                 l = COMIC_ELEMENT_ARRAY.length;\r
3159                                         for( var i = 0; i < l; i++){\r
3160                                                 COMIC_ELEMENT_ARRAY[ i].shift( _shiftX, _shiftY);\r
3161                                         }\r
3162                                 }\r
3163                                 panelX = _panelX;\r
3164                                 panelY = _panelY;\r
3165                                 panelW = _panelW;\r
3166                                 panelH = _panelH;\r
3167                                 \r
3168                                 ELM_CONTAINER.style.width       = _panelW +'px';\r
3169                                 ELM_CONTAINER.style.height      = _panelH +'px';\r
3170                                 ELM_CONTAINER.style.left        = _panelX +'px';\r
3171                                 ELM_CONTAINER.style.top         = _panelY +'px';\r
3172                         },\r
3173                         onMouseMove: function( _mouseX, _mouseY){\r
3174                                 var l = COMIC_ELEMENT_ARRAY.length,\r
3175                                         _x = _mouseX -panelX,\r
3176                                         _y = _mouseY -panelY,\r
3177                                         _elm = currentElement;\r
3178                                         \r
3179                                 if( _elm !== null){\r
3180                                         currentLockTest = currentLockTest === true && _x === 0 && _y === 0;\r
3181                                         if( _elm.busy() === true){\r
3182                                                 _elm.onMouseMove( _x, _y);\r
3183                                                 return true;\r
3184                                         }\r
3185                                         if( _elm.hitTest( _x, _y) === true){\r
3186                                                 _elm.onMouseMove( _x, _y); // cursor\r
3187                                                 return true;\r
3188                                         }\r
3189                                         if( currentLock === true){\r
3190                                                 currentLockTest = true;\r
3191                                                 return true;\r
3192                                         }\r
3193                                 }\r
3194                                 for( var i=0; i<l; i++){\r
3195                                         _elm = COMIC_ELEMENT_ARRAY[ i];\r
3196                                         // hitTest\r
3197                                         if( _elm.hitTest( _x, _y) === true){\r
3198                                                 _elm.onMouseMove( _x, _y); // cursor\r
3199                                                 log.html( [ _x, _y, i].join( ','));\r
3200                                                 currentElement = _elm;\r
3201                                                 return true;\r
3202                                         }\r
3203                                 }\r
3204                                 currentElement = null;                                                  \r
3205                                 COMIC_ELEMENT_OPERATION_MANAGER.hide();\r
3206                                 log.html( [ _x, _y].join( ','));\r
3207                                 return false;\r
3208                         },\r
3209                         onMouseUp: function( _mouseX, _mouseY){\r
3210                                 var ret = currentElement !== null && currentElement.busy() === true;\r
3211                                 ret === true && currentElement.onMouseUp( _mouseX -startX || panelX, _mouseY -startY || panelY);\r
3212                                 currentLock = currentLockTest === true && currentElement.hitTest( _mouseX -panelX, _mouseY -panelY) === true;\r
3213                                 RESIZE_OPERATOR.lock( currentLock);\r
3214                                 INFOMATION_WINDOW.lock( currentLock);\r
3215                                 return ret;\r
3216                         },\r
3217                         onMouseDown: function( _mouseX, _mouseY){\r
3218                                 startX = panelX;\r
3219                                 startY = panelY;\r
3220                                 if( currentElement === null) return false\r
3221                                 currentElement.onMouseDown( _mouseX -startX, _mouseY -startY);\r
3222                                 currentLockTest = true;\r
3223                                 return true;\r
3224                         },\r
3225                         busy: function(){\r
3226                                 return currentElement !== null;\r
3227                         },\r
3228                         createImageElement: function( url, imagesetID, x, y, z, w, h){\r
3229                                 w = w || 200; //ActualWidth\r
3230                                 h = h || 150; //ActualHeight\r
3231                                 x = x || Math.floor( panelW /2 -w /2);\r
3232                                 y = y || Math.floor( panelH /2 -h /2);\r
3233                                 function onImageSelect( _url, _w, _h){\r
3234                                         var _comicElement = new ImageElementClass( _url, imagesetID, x, y, z || -1, _w, _h, COMIC_ELEMENT_ARRAY.length);\r
3235                                         appendComicElement( _comicElement);\r
3236                                         _comicElement.animate( undefined, undefined, _w, _h);\r
3237                                         SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);                                      \r
3238                                 }\r
3239                                 IMAGE_GROUP_EXPROLER.show( onImageSelect);\r
3240                         },\r
3241                         createTextElement: function( type, angle, text, x, y, z, w, h){\r
3242                                 type = type || 0;\r
3243                                 angle = angle || 0;\r
3244                                 text = text || '';\r
3245                                 w = w || 200;\r
3246                                 h = h || 150;\r
3247                                 x = x || Math.floor( panelW /2 -w /2 +Math.random() *10);\r
3248                                 y = y || Math.floor( panelH /2 -h /2 +Math.random() *10);\r
3249                                 var _comicElement = TextElementClass.apply( {}, [ type, angle, text, x, y, z || -1, w, h, COMIC_ELEMENT_ARRAY.length]);\r
3250                                 TEXT_EDITOR_CONTROL.show( _comicElement, function( _comicElement){\r
3251                                         appendComicElement( _comicElement);\r
3252                                         SAVE( restoreComicElement, [ false, _comicElement], [ true, _comicElement], true);\r
3253                                 });\r
3254                         },\r
3255                         getAsHTML: function( isAbsoluteUrl, isXHTML){\r
3256                                 var HTML_ARRAY = [],\r
3257                                         l = COMIC_ELEMENT_ARRAY.length,\r
3258                                         _timing = 0,\r
3259                                         _comicElement;\r
3260 \r
3261                                 while( HTML_ARRAY.length < l){\r
3262                                         _comicElement = getComicElementByTiming();\r
3263                                         if( _comicElement === null) break;\r
3264                                         HTML_ARRAY.push( _comicElement.getAsHTML( isAbsoluteUrl, isXHTML));\r
3265                                 }\r
3266                                 function getComicElementByTiming(){\r
3267                                         while( _timing < l *2){\r
3268                                                 for(var i=0; i<l; ++i){\r
3269                                                         if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
3270                                                                 ++_timing;\r
3271                                                                 return COMIC_ELEMENT_ARRAY[ i];\r
3272                                                         }\r
3273                                                 }\r
3274                                                 ++_timing;\r
3275                                         }\r
3276                                         return null;\r
3277                                 }\r
3278                                 HTML_ARRAY.unshift(\r
3279                                         [\r
3280                                                 '<div class="panel" ',\r
3281                                                         'style="',\r
3282                                                                 'height:', panelH, 'px;',\r
3283                                                                 'background-color:', ';',\r
3284                                                         '"',\r
3285                                                 '>'\r
3286                                         ].join( '')\r
3287                                 );              \r
3288                                 HTML_ARRAY.push( '</div>');\r
3289                                 \r
3290                                 return HTML_ARRAY.join( pettanr.LINE_FEED_CODE_TEXTAREA);\r
3291                         },\r
3292                         getAsJsonString: function(){\r
3293                                 var JSON_STRING_ARRAY = [],\r
3294                                         IMAGE_ARRAY = [],\r
3295                                         BALLOON_ARRAY = [],\r
3296                                         l = COMIC_ELEMENT_ARRAY.length,\r
3297                                         _timing = 0,\r
3298                                         _comicElement,\r
3299                                         cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
3300                                         \r
3301                                 while( IMAGE_ARRAY.length + BALLOON_ARRAY.length < l){\r
3302                                         _comicElement = getComicElementByTiming();\r
3303                                         if( _comicElement === null) break;\r
3304                                         _comicElement.type === COMIC_ELEMENT_TYPE_IMAGE ? \r
3305                                                 IMAGE_ARRAY.push( _comicElement.getAsJsonString()) :\r
3306                                                 BALLOON_ARRAY.push( _comicElement.getAsJsonString());\r
3307                                 }\r
3308                                 function getComicElementByTiming(){\r
3309                                         while( _timing < l *2){\r
3310                                                 for(var i=0; i<l; ++i){\r
3311                                                         if( _timing === COMIC_ELEMENT_ARRAY[ i].timing){\r
3312                                                                 ++_timing;\r
3313                                                                 return COMIC_ELEMENT_ARRAY[ i];\r
3314                                                         }\r
3315                                                 }\r
3316                                                 ++_timing;\r
3317                                         }\r
3318                                         return null;\r
3319                                 }\r
3320                                 return [\r
3321                                         '{', cr,\r
3322                                                 '"panel": {', cr,\r
3323                                                     '"border": 1,', cr,\r
3324                                                     '"comic_id": 5,', cr,\r
3325                                                     '"resource_picture_id": 1,', cr,\r
3326                                                         '"x": ', 0, ',', cr,\r
3327                                                         '"y": ', 0, ',', cr,\r
3328                                                         '"z": ', 0, ',', cr,\r
3329                                                         '"t": ', 0, ',', cr,\r
3330                                                     '"width": ', panelW, ',', cr,\r
3331                                                     '"height": ', panelH, ',', cr,\r
3332                                                     '"panel_pictures_attributes": {', cr,\r
3333                                                         IMAGE_ARRAY.join( ',' +cr), cr,\r
3334                                                     '},', cr,\r
3335                                                     '"balloons_attributes": {', cr,\r
3336                                                         BALLOON_ARRAY.join( ',' +cr), cr,\r
3337                                                     '}', cr,\r
3338                                                 '}', cr,\r
3339                                         '}'\r
3340                                 ].join( '');\r
3341                         }\r
3342                 }\r
3343         })();\r
3344         \r
3345         /*\r
3346          * end of COMIC_ELEMENT_CONTROL\r
3347          */\r
3348 \r
3349 \r
3350 \r
3351         function updateMouseCursor( _cursor){\r
3352                 if( currentCursor !== _cursor){\r
3353                         currentCursor = _cursor;\r
3354                         setTimeout( update, 0);\r
3355                 }\r
3356                 function update(){\r
3357                         ELM_MOUSE_EVENT_CHATCHER.style.cursor = currentCursor;\r
3358                 }\r
3359         }\r
3360         function centering(){\r
3361                 pettanr.editor.onWindowResize( windowW, windowH);\r
3362         }       \r
3363         function mouseEventRellay( e){\r
3364                 var _mouseX = e.pageX,\r
3365                         _mouseY = e.pageY,\r
3366                         rellayMethod = e.type === 'mousedown' ?\r
3367                                         'onMouseDown' :\r
3368                                         ( e.type === 'mousemove' ? 'onMouseMove' : 'onMouseUp');\r
3369                 if( currentListener !== null && currentListener.busy() === true){\r
3370                         currentListener[ rellayMethod]( _mouseX, _mouseY);\r
3371                 } else {\r
3372                         currentListener = null;\r
3373                         var l = MOUSE_LISTENER_ARRAY.length,\r
3374                                 _listener;\r
3375                         for( var i=0; i<l; ++i){\r
3376                                 _listener = MOUSE_LISTENER_ARRAY[ i];\r
3377                                 if( _listener[ rellayMethod]( _mouseX, _mouseY) === true){\r
3378                                         currentListener = _listener;\r
3379                                         break;\r
3380                                 }\r
3381                         }\r
3382                 }\r
3383                 // 文字選択の禁止\r
3384                 //!document.selection && window.getSelection().removeAllRanges();\r
3385                 e.stopPropagation();\r
3386                 return false;\r
3387         }\r
3388 \r
3389         return {\r
3390                 init: function( _option){\r
3391                         option = _option;\r
3392                         \r
3393                 },\r
3394                 firstOpen: function(){\r
3395                 /*\r
3396                  * MOUSE_LISTENER_ARRAY は、表示順に格納．手前の要素が最初\r
3397                  * MENU_BAR_CONTROL,\r
3398                  * WINDOW_CONTROL,\r
3399                  * COMIC_ELEMENT_CONTROL,\r
3400                  * PANEL_CONTROL\r
3401                  * .busy() === true なら、そのままonMouseMove()にイベントを流す．\r
3402                  * onMouseMove()に流してみて、false が帰れば、次にリスナーにも流す．\r
3403                  */\r
3404                         MOUSE_LISTENER_ARRAY.push( MENU_BAR_CONTROL, WINDOWS_CONTROL, PANEL_RESIZER_TOP, PANEL_RESIZER_BOTTOM, COMIC_ELEMENT_CONTROL, PANEL_CONTROL);\r
3405                         \r
3406                         CONSOLE_CONTROLER.init();\r
3407                         \r
3408                         OUTPUT_CONSOLE.init();\r
3409                         TEXT_EDITOR_CONTROL.init();\r
3410                         IMAGE_GROUP_EXPROLER.init();\r
3411 \r
3412                 /*\r
3413                  * centering\r
3414                  */\r
3415                         pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 96, false, true, centering);  // ctrl + 0\r
3416                         pettanr.key.addKeyDownEvent( pettanr.view.EDITOR, 48, false, true, centering);  // ctrl + 0\r
3417                         MENU_BAR_CONTROL.EDIT.createSelection( 'centering', 'ctrl + 0', centering, true, true, true);\r
3418                 /*\r
3419                  * jqMouseEventChacher は透明な要素で、\r
3420                  * マウスイベントをcurrentElement(currentElement)に伝えるのが仕事\r
3421                  * このような実装になるのは、ここの表示オブジェクトにイベントを設定した場合、表示が追いつかずマウスカーソルが外れたタイミングでイベントが終わってしまうため。\r
3422                  */                     \r
3423                         jqMouseEventChacher = $( ELM_MOUSE_EVENT_CHATCHER)\r
3424                                 .mousemove( mouseEventRellay)\r
3425                                 .mousedown( mouseEventRellay)\r
3426                                 .mouseup( mouseEventRellay)\r
3427                                 .mouseout( mouseEventRellay);\r
3428                         \r
3429                         delete pettanr.editor.firstOpen;\r
3430                 },\r
3431                 onOpen: function( _file){\r
3432                         if( pettanr.file.isFileInstance( _file) === true){\r
3433                                 // pettanr.file.isPettanFileInstance( _file) === true\r
3434                                 // \r
3435                         }\r
3436                         jqEditor = jqEditor || $( '#editor');\r
3437                         \r
3438                         HISTORY_CONTROL.open();\r
3439                         \r
3440                         WINDOWS_CONTROL.open();\r
3441                         \r
3442                         GRID_CONTROL.open();\r
3443                         PANEL_CONTROL.open();\r
3444                         \r
3445                         COMIC_ELEMENT_OPERATION_MANAGER.open();\r
3446                         COMIC_ELEMENT_CONTROL.open();\r
3447                         \r
3448                         // last\r
3449                         MENU_BAR_CONTROL.open();\r
3450                         \r
3451                         pettanr.editor.firstOpen !== undefined && pettanr.editor.firstOpen();\r
3452                 },\r
3453                 onClose: function(){\r
3454                         HISTORY_CONTROL.close();\r
3455                         \r
3456                         WINDOWS_CONTROL.close();\r
3457                         \r
3458                         GRID_CONTROL.close();\r
3459                         PANEL_CONTROL.close();\r
3460                         \r
3461                         COMIC_ELEMENT_OPERATION_MANAGER.close();\r
3462                         COMIC_ELEMENT_CONTROL.close();\r
3463                         \r
3464                         // last\r
3465                         MENU_BAR_CONTROL.open();\r
3466                 },\r
3467                 onWindowResize: function( _windowW, _windowH){\r
3468                         windowW = _windowW;\r
3469                         windowH = _windowH;\r
3470                         if( pettanr.editor.firstOpen) return;\r
3471                         /*\r
3472                          * ieは +'px'が不要みたい\r
3473                          */\r
3474                         jqEditor.get( 0).style.height = _windowH +'px';\r
3475                         ELM_MOUSE_EVENT_CHATCHER.style.height = _windowH +'px';\r
3476                         \r
3477                         WINDOWS_CONTROL.onWindowResize( _windowW, _windowH);\r
3478                         MENU_BAR_CONTROL.onWindowResize( _windowW, _windowH);\r
3479                         PANEL_CONTROL.onWindowResize( _windowW, _windowH);\r
3480                 },\r
3481                 MIN_WIDTH:      320,\r
3482                 MIN_HEIGHT:     320\r
3483         }\r
3484 })();\r
3485 \r
3486 // create hidden iframe\r
3487 // write script\r
3488 // setInterval\r
3489 pettanr.proxy = ( function(){\r
3490         \r
3491         function FormProxy( formJsUrl, callback){\r
3492                 var timer = null,\r
3493                         iWin, idoc;\r
3494 \r
3495                 pettanr.util.createIframe( 'id00000', onCreateIframe);\r
3496                 \r
3497                 function onCreateIframe( _iframe){\r
3498                         iWin = _iframe.contentWindow;\r
3499                         idoc = _iframe.contentWindow.document;\r
3500 \r
3501                         idoc.open();\r
3502                         idoc.write( '<body>');\r
3503                         idoc.writeln( '<script type="text\/javascript" src="' + pettanr.CONST.JQUERY_URL+ '"><\/script>');\r
3504                         idoc.close();\r
3505 \r
3506                         timer = window.setInterval( detect, 250 );\r
3507                 }\r
3508                 function detect(){\r
3509                         if( iWin.jQuery){\r
3510                                 window.clearInterval( timer );\r
3511                                 //callback( idoc);\r
3512                                 iWin.jQuery( iWin).ready( onJQueryReady );\r
3513                         }\r
3514                 }\r
3515                 function onJQueryReady(){\r
3516                         callback( idoc);\r
3517                 }\r
3518         }\r
3519         \r
3520         return {\r
3521                 createFormProxy: function( _formJsUrl, _callback){\r
3522                         new FormProxy( _formJsUrl, _callback);\r
3523                 }\r
3524         }\r
3525         \r
3526 })();\r
3527 \r
3528 \r
3529 pettanr.comicConsole = ( function(){\r
3530         var COMIC_CONSOLE = ( function(){\r
3531                 var jqWrap,\r
3532                         ID = 'comicConsole',\r
3533                         elmWrap = document.getElementById( 'comic-console-wrapper' ),\r
3534                         elmProgress = document.getElementById( 'comic-console-progress' ),\r
3535                         inputTitle, inputW, inputH, inputVisible, inputEditable,\r
3536                         elmUploader = null,\r
3537                         elmScript = null\r
3538                         elmIframe = null,\r
3539                         elmForm = null,\r
3540                         timer = null,\r
3541                         isUploading = false;\r
3542                 //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
3543                 \r
3544                 function clickOK(){\r
3545                         if( !elmForm) return false;\r
3546                         // validate\r
3547                         isUploading = true;\r
3548                         pettanr.util.createIframe( 'targetFrameCreateComic', copyAndSubmit);\r
3549                         elmProgress.innerHTML = '■';\r
3550                 }\r
3551 \r
3552                         function copyAndSubmit( _iframe){\r
3553                                 elmUploader.appendChild( _iframe );\r
3554                                 elmIframe = _iframe;\r
3555                                 elmForm.target = elmIframe.name;\r
3556                                 \r
3557                                 var _inputList = elmForm.getElementsByTagName( 'input' ),\r
3558                                         _input, _name;\r
3559                                 for( var i=0, l= _inputList.length; i<l; ++i){\r
3560                                         _input = _inputList[ i ];\r
3561                                         _name = _input.name;\r
3562                                         if( _name === 'comic[title]'){\r
3563                                                 _input.value = inputTitle.value();\r
3564                                         } else\r
3565                                         if( _name === 'comic[width]'){\r
3566                                                 _input.value = inputW.value();\r
3567                                         } else\r
3568                                         if( _name === 'comic[height]'){\r
3569                                                 _input.value = inputH.value();\r
3570                                         }\r
3571                                 }\r
3572                                 var _selectList = elmForm.getElementsByTagName( 'select' ),\r
3573                                         _select, _name, _optionList;\r
3574                                 for( i=0, l= _selectList.length; i<l; ++i){\r
3575                                         _select = _selectList[ i ];\r
3576                                         _name = _select.name;\r
3577                                         _optionList = _select.getElementsByTagName( 'option' )\r
3578                                         if( _name === 'comic[visible]'){\r
3579                                                 _select.selectedIndex = 1;\r
3580                                         } else\r
3581                                         if( _name === 'comic[editable]'){\r
3582                                                 _select.selectedIndex = 0;\r
3583                                         }\r
3584                                 }\r
3585                                 try {\r
3586                                         elmForm.submit();\r
3587                                 } catch( e){\r
3588                                         elmProgress.innerHTML = 'submit() err..';\r
3589                                         isUploading = false;\r
3590                                         setTimeout( clickCancel , 3000);\r
3591                                         return;\r
3592                                 }\r
3593                                 if( pettanr.ua.isIE){\r
3594                                         elmIframe.onreadystatechange = detectIframe;\r
3595                                 } else {\r
3596                                         elmIframe.onload = onIframeUpdate;\r
3597                                 }\r
3598                                 elmProgress.innerHTML = 'uploading..';\r
3599                         }\r
3600                 /*\r
3601                  * ie の 場合、readyState をチェック．\r
3602                  */\r
3603                                 function detectIframe(){\r
3604                             if ( elmIframe.readyState === 'complete') {\r
3605                                 elmIframe.onreadystatechange = new Function();\r
3606                                 elmIframe.onreadystatechange = null;\r
3607                                 onIframeUpdate();\r
3608                             }\r
3609                                 }\r
3610                                         function onIframeUpdate(){\r
3611                                                 elmIframe.onload = null;\r
3612                                                 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
3613                                                 elmIframe = null;\r
3614                                                 elmProgress.innerHTML = 'success!';\r
3615                                                 setTimeout( clickCancel , 1000);\r
3616                                                 isUploading = false;\r
3617                                         }\r
3618                                 \r
3619                 function clickCancel(){\r
3620                         if( isUploading === true) return false;\r
3621                         pettanr.overlay.hide();\r
3622                         COMIC_CONSOLE.onClose();\r
3623                 }\r
3624                 function detectForm(){\r
3625                         elmForm = elmUploader.getElementsByTagName( 'form' )[ 0 ];\r
3626                         if( elmForm){\r
3627                                 window.clearInterval( timer);\r
3628                                 timer = null;\r
3629                                 copyAndSubmit();\r
3630                         }\r
3631                 }\r
3632                 return {\r
3633                         init: function(){\r
3634                                 this.jqWrap = jqWrap = $( '#comic-console-wrapper').hide();\r
3635                                 $( '#comic-console-post-button').click( clickOK );\r
3636                                 $( '#comic-console-cancel-button').click( clickCancel );\r
3637                                 \r
3638                                 var CREATER = pettanr.form.createInputText;//pettanr.key.createEditableText;\r
3639                                 inputTitle    = CREATER( document.getElementById( 'comic-console-title'), null, ID);\r
3640                                 inputW        = CREATER( document.getElementById( 'comic-console-width'), null, ID);\r
3641                                 inputH        = CREATER( document.getElementById( 'comic-console-height'), null, ID);\r
3642                                 inputVisible  = CREATER( document.getElementById( 'comic-console-visible'), null, ID);\r
3643                                 inputEditable = CREATER( document.getElementById( 'comic-console-editable'), null, ID);\r
3644                                 \r
3645                                 delete COMIC_CONSOLE.init;\r
3646                         },\r
3647                         jqWrap: null,\r
3648                         show: function( w, h){\r
3649                                 jqWrap.show();\r
3650 \r
3651                                 pettanr.overlay.show( COMIC_CONSOLE );\r
3652                                 \r
3653                                 inputTitle.start();\r
3654                                 \r
3655                                 elmUploader = document.createElement( 'div');\r
3656                                 elmUploader.id = "newcomic";\r
3657                                 elmUploader.style.cssText = 'height:1px;line-height:1px;visibility:hidden;';\r
3658                                 elmWrap.appendChild( elmUploader);\r
3659                                 \r
3660                                 var elmScript = document.createElement( 'script');\r
3661                                 elmScript.type = 'text\/javascript';\r
3662                                 elmScript.src = pettanr.CONST.CREATE_COMIC_JS;\r
3663                                 elmWrap.appendChild( elmScript);\r
3664                                 \r
3665                                 elmProgress.innerHTML = '';\r
3666                                 \r
3667                                 if( timer === null){\r
3668                                         timer = window.setInterval( detectForm, 250);\r
3669                                 }\r
3670                                 \r
3671                                 COMIC_CONSOLE.onWindowResize( w, h);\r
3672                         },\r
3673                         onWindowResize: function( _windowW, _windowH){\r
3674                                 jqWrap.css(\r
3675                                         {\r
3676                                                 left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
3677                                                 top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
3678                                         }\r
3679                                 );\r
3680                         },\r
3681                         onClose: function(){\r
3682                                 elmForm !== null && $( elmUploader ).remove();\r
3683                                 elmForm  = null;\r
3684                                 isUploading = false;\r
3685                                 \r
3686                                 if( elmScript !== null ){\r
3687                                         document.body.removeChild( elmScript);\r
3688                                         elmScript = null;                                       \r
3689                                 }\r
3690                                 if( timer !== null){\r
3691                                         window.clearInterval( timer);\r
3692                                         timer = null;\r
3693                                 }\r
3694                                 \r
3695                                 jqWrap.hide();\r
3696                         },\r
3697                         ID: ID\r
3698                 }\r
3699         })();\r
3700         \r
3701         return {\r
3702                 init: function(){\r
3703                         COMIC_CONSOLE.init();\r
3704                         delete pettanr.comicConsole.init;\r
3705                 },\r
3706                 onOpen: function( _file){\r
3707                         if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
3708                                 // _data = _file.read();\r
3709                         }\r
3710                 },\r
3711                 onClose: function(){\r
3712                         \r
3713                 },\r
3714                 onWindowResize: function( _windowW, _windowH){\r
3715                 },\r
3716                 _quickAccessShow: function(){\r
3717                         jqWindow = pettanr.jqWindow();\r
3718                         var w = jqWindow.width(),\r
3719                                 h = jqWindow.height();\r
3720                         COMIC_CONSOLE.show( w, h);\r
3721                 }\r
3722         }\r
3723 })();\r
3724 \r
3725 pettanr.uploadConsole = ( function(){\r
3726         var UPLOAD_CONSOLE = ( function(){\r
3727                 var jqWrap,\r
3728                         ID = 'uploadConsole',\r
3729                         TARGET_FRAME_NAME = 'targetFrame',\r
3730                         elmContainer = document.getElementById( 'uploader'),\r
3731                         elmProgress = document.getElementById( 'upload-console-progress'),\r
3732                         timer = null,\r
3733                         elmScript = null,\r
3734                         elmForm = null,\r
3735                         elmFile = null,\r
3736                         elmIframe = null,\r
3737                         isUploading = false;\r
3738                 /*\r
3739                  * upload ボタンが押されたらまず iframe をつくる．
3740                  */\r
3741                 function clickOK(){\r
3742                         if( !elmForm || elmFile.value.length === 0) return false;\r
3743                         pettanr.util.createIframe( TARGET_FRAME_NAME, onCreateIframe);\r
3744                         elmProgress.innerHTML = 'uploading.';\r
3745                         isUploading = true;\r
3746                         return false;\r
3747                 }\r
3748                 /*\r
3749                  * form の target に iframe を指定したのち submit();
3750                  */\r
3751                         function onCreateIframe( _iframe ){\r
3752                                 elmContainer.appendChild( _iframe );\r
3753                                 elmForm.target = _iframe.name;\r
3754                                 \r
3755                                 try {\r
3756                                         elmForm.submit();\r
3757                                 } catch( e){\r
3758                                         elmProgress.innerHTML = 'submit() err..';\r
3759                                         isUploading = false;\r
3760                                         setTimeout( clickCancel , 3000);\r
3761                                         return;\r
3762                                 }\r
3763                                 \r
3764                                 if( pettanr.ua.isIE){\r
3765                                         _iframe.onreadystatechange = detectIframe;\r
3766                                 } else {\r
3767                                         _iframe.onload = onIframeUpdate;\r
3768                                 }\r
3769                                 elmIframe = _iframe;\r
3770                                 elmProgress.innerHTML = 'uploading..';\r
3771                         }\r
3772                 /*\r
3773                  * ie の 場合、readyState をチェック．
3774                  */\r
3775                                 function detectIframe(){\r
3776                             if ( elmIframe.readyState === 'complete') {\r
3777                                 elmIframe.onreadystatechange = new Function();\r
3778                                 elmIframe.onreadystatechange = null;\r
3779                                 onIframeUpdate();\r
3780                             }\r
3781                                 }\r
3782                                         function onIframeUpdate(){\r
3783                                                 elmIframe.onload = null;\r
3784                                                 ( elmIframe.contentWindow || elmIframe.contentDocument.parentWindow ).close();\r
3785                                                 elmIframe = null;\r
3786                                                 elmProgress.innerHTML = 'success!';\r
3787                                                 setTimeout( clickCancel , 1000);\r
3788                                                 isUploading = false;\r
3789                                         }\r
3790                 \r
3791                 function detectForm(){\r
3792                         elmForm = elmContainer.getElementsByTagName( 'form' )[ 0 ];\r
3793                         if( elmForm){\r
3794                                 var _inputList = elmForm.getElementsByTagName( 'input' ),\r
3795                                         _input;\r
3796                                 for( var i=0, l= _inputList.length; i<l; ++i){\r
3797                                         _input = _inputList[ i ];\r
3798                                         if( _input.type === 'file'){\r
3799                                                 elmFile = _input;\r
3800                                         }\r
3801                                         if( _input.type === 'submit'){\r
3802                                                 _input.style.display = 'none';\r
3803                                         }\r
3804                                 }\r
3805                                 window.clearInterval( timer);\r
3806                                 timer = null;\r
3807                         }\r
3808                 }\r
3809                 /*\r
3810                  *
3811                  */\r
3812                 function clickCancel(){\r
3813                         if( isUploading === true) return false;\r
3814                         pettanr.overlay.hide();\r
3815                         UPLOAD_CONSOLE.onClose();\r
3816                         return false;\r
3817                 }\r
3818                 \r
3819                 return {\r
3820                         init: function(){\r
3821                                 this.jqWrap = jqWrap = $( '#upload-console-wrapper').hide();\r
3822                                 $( '#upload-console-post-button').click( clickOK );\r
3823                                 $( '#upload-console-cancel-button').click( clickCancel );\r
3824 \r
3825                                 delete UPLOAD_CONSOLE.init;\r
3826                         },\r
3827                         jqWrap: null,\r
3828                         show: function( w, h){\r
3829                                 /*\r
3830                                  * ie 6, 7 で fadeIn 中の要素に appendChild すると クラッシュするので、document.body に追加．
3831                                  */                             \r
3832                                 elmScript = document.createElement( 'script');\r
3833                                 elmScript.type = 'text\/javascript';\r
3834                                 elmScript.src = pettanr.CONST.UPLOAD_PICTURE_JS;\r
3835                                 document.body.appendChild( elmScript);\r
3836                                 \r
3837                                 jqWrap.show();\r
3838                                 pettanr.overlay.show( UPLOAD_CONSOLE );\r
3839 \r
3840                                 if( timer === null){\r
3841                                         timer = window.setInterval( detectForm, 250);\r
3842                                 }\r
3843                                 \r
3844                                 elmProgress.innerHTML = '';\r
3845                                 \r
3846                                 UPLOAD_CONSOLE.onWindowResize( w, h);\r
3847                         },\r
3848                         onWindowResize: function( _windowW, _windowH){\r
3849                                 jqWrap.css(\r
3850                                         {\r
3851                                                 left:   Math.floor( ( _windowW -jqWrap.width()) /2),\r
3852                                                 top:    Math.floor( ( _windowH -jqWrap.height()) /2)\r
3853                                         }\r
3854                                 );\r
3855                         },\r
3856                         onClose: function(){\r
3857                                 elmForm !== null && $( elmContainer.children ).remove();\r
3858                                 elmForm = elmFile = null;\r
3859                                 isUploading = false;\r
3860                                 \r
3861                                 if( elmScript !== null ){\r
3862                                         document.body.removeChild( elmScript);\r
3863                                         elmScript = null;                                       \r
3864                                 }\r
3865                                 if( timer !== null){\r
3866                                         window.clearInterval( timer);\r
3867                                         timer = null;\r
3868                                 }\r
3869                                 jqWrap.hide();\r
3870                         },\r
3871                         ID: ID\r
3872                 }\r
3873         })();\r
3874         \r
3875         return {\r
3876                 init: function(){\r
3877                         UPLOAD_CONSOLE.init();\r
3878                         delete pettanr.comicConsole.init;\r
3879                 },\r
3880                 onOpen: function( _file){\r
3881                         if( pettanr.driver.isPettanrFileInstance( _file ) === true && _file.getType() === pettanr.driver.FILE_TYPE.COMIC){\r
3882                                 // _data = _file.read();\r
3883                         }\r
3884                 },\r
3885                 onClose: function(){\r
3886                         \r
3887                 },\r
3888                 onWindowResize: function( _windowW, _windowH){\r
3889                 },\r
3890                 _quickAccessShow: function(){\r
3891                         jqWindow = pettanr.jqWindow();\r
3892                         var w = jqWindow.width(),\r
3893                                 h = jqWindow.height();\r
3894                         UPLOAD_CONSOLE.show( w, h);\r
3895                 }\r
3896         }\r
3897 })();