public/assets/work.js

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