app/assets/javascripts/panels.js.coffee

   1 $ ->\r
   2   confirm_confirm_confirm = () ->\r
   3     confirm(  )\r
   4   new_element_index = {}\r
   5   new_element_index[pettanr_current_panel_id] = 0\r
   6   \r
   7   set_tree_value = (keys, last_attr, value) ->\r
   8     key = keys.shift()\r
   9     if keys.length <= 0\r
  10       last_attr[key] = value\r
  11     else\r
  12       last_attr[key] = last_attr[key] || {}\r
  13       set_tree_value(keys, last_attr[key], value)\r
  14 \r
  15   repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']\r
  16   \r
  17   is_editable = (p) ->\r
  18     if p.parent().attr('editable')\r
  19       return true\r
  20     else\r
  21       return false\r
  22   is_var = (o) ->\r
  23     if parseInt(o.attr('no_attr')) > 0\r
  24       return false\r
  25     else\r
  26       if o.attr('column') \r
  27         if o.attr('column') == '_destroy' and o.val().length < 1\r
  28           return false\r
  29         else\r
  30           return true\r
  31       else\r
  32         return false\r
  33   is_element = (o) ->\r
  34     if o.attr('element_type')\r
  35       return true\r
  36     else\r
  37       return false\r
  38   is_element_part = (o) ->\r
  39     if o.attr('element_part_type')\r
  40       return true\r
  41     else\r
  42       return false\r
  43   element_is = (element_type, o) ->\r
  44     if is_element(o) and o.attr('element_type') == element_type\r
  45       return true\r
  46     else\r
  47       return false\r
  48   element_types  = {'panel_picture': 'panel_pictures', 'speech_balloon': 'speech_balloons', 'ground_picture': 'ground_pictures', 'ground_color': 'ground_colors'}\r
  49   element_type_to_table = (element_type) ->\r
  50     element_types[element_type]\r
  51   text_align_texts = ['left', 'left', 'right', 'center']\r
  52 \r
  53   make_tree = (attr, o) ->\r
  54     if is_var(o)\r
  55       tree = 'panels-' + o.attr('panel_id') + '-'\r
  56       if is_element(o)\r
  57         tree = tree + element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'\r
  58         if is_element_part(o)\r
  59           tree = tree + o.attr('element_part_type') + '_attributes-'\r
  60       tree = tree + o.attr('column')\r
  61       keys = tree.split('-')\r
  62       set_tree_value(keys, attr, o.val())\r
  63   \r
  64   panel_tag_id = (element) ->\r
  65     '#panel' + element.attr('panel_id')\r
  66   \r
  67   element_tag_id = (element) ->\r
  68     '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')\r
  69   \r
  70   element_part_tag_id = (element_part) ->\r
  71     '#panel' + element_part.attr('panel_id') + element_part.attr('element_type') + element_part.attr('element_id') + element_part.attr('element_part_type') + element_part.attr('element_part_id')\r
  72   \r
  73   refresh_attribute = () ->\r
  74     attr = {}\r
  75     $('input').map ->\r
  76       make_tree(attr, $(@))\r
  77     $('textarea').map  ->\r
  78       make_tree(attr, $(@))\r
  79     $('select').map ->\r
  80       make_tree(attr, $(@))\r
  81     $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
  82   \r
  83   $('#tabs').tabs()\r
  84   $('#elements-tabs').tabs()\r
  85   $('#new-element-tabs').tabs()\r
  86   $('#new-speech_balloon-tabs').tabs()\r
  87   $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
  88   $("#elements-tabs li").removeClass("ui-corner-top")\r
  89   $("#elements-tabs li").addClass("ui-corner-left")\r
  90   $("#elements-tabs li").map ->\r
  91     $(@).mouseover -> \r
  92       switch $(@).attr('element_type')\r
  93         when 'speech_balloon'\r
  94           trace = element_tag_id($(@)) \r
  95           t = $('img', $(trace))\r
  96         when 'panel_picture'\r
  97           trace = element_tag_id($(@)) + 'img'\r
  98           t = $(trace)\r
  99         else\r
 100           t = null\r
 101       if t\r
 102         $('.ui-resizable-handle', t.parent()).map ->\r
 103           $(@).css('display', 'block')\r
 104     $(@).mouseout -> \r
 105       switch $(@).attr('element_type')\r
 106         when 'speech_balloon'\r
 107           trace = element_tag_id($(@)) \r
 108           t = $('img', $(trace))\r
 109         when 'panel_picture'\r
 110           trace = element_tag_id($(@)) + 'img'\r
 111           t = $(trace)\r
 112         else\r
 113           t = null\r
 114       if t\r
 115         $('.ui-resizable-handle', t.parent()).map ->\r
 116           $(@).css('display', 'none')\r
 117   \r
 118   #destroy button\r
 119   $('.ui-icon-destroy').map ->\r
 120     $(@).button {\r
 121       icons: {\r
 122         primary: 'ui-icon-close', \r
 123         secondary: null\r
 124       }, \r
 125       text: false\r
 126     }\r
 127     $(@).click -> \r
 128       if confirm('destroy ?')\r
 129         trace = element_tag_id($(@))\r
 130         $(trace + '_destroy').val('true')\r
 131         panel_trace = panel_tag_id($(@))\r
 132         update_t(panel_trace + 'tsort')\r
 133         update_z(panel_trace + 'zsort')\r
 134         # sync\r
 135         $(trace + 'element_tab').css('display', 'none')\r
 136         $(trace + 'tab_panel').css('display', 'none')\r
 137         $(trace + 'zsort').css('display', 'none')\r
 138         $(trace + 'tsort').css('display', 'none')\r
 139         switch $(@).attr('element_type')\r
 140           when 'panel_picture'\r
 141             trace = trace + 'div'\r
 142         $(trace).css('display', 'none')\r
 143         \r
 144   \r
 145   $('#pettanr-panel-submit').focusin ->\r
 146     refresh_attribute()\r
 147   \r
 148   # panel\r
 149   $('.pettanr-comic-panel').map ->\r
 150     if is_editable($(@))\r
 151       $(@).resizable {\r
 152         stop: ( event, ui ) ->\r
 153           trace = panel_tag_id($(@))\r
 154           w = parseInt($(@).width())\r
 155           h = parseInt($(@).height())\r
 156           $(trace + 'width').val(w)\r
 157           $(trace + 'height').val(h)\r
 158           $('.pettanr-comic-ground-picture').map ->\r
 159             $(@).width(w)\r
 160             $(@).height(h)\r
 161           $('.pettanr-comic-ground-color').map ->\r
 162             $(@).width(w)\r
 163             $(@).height(h)\r
 164         , autoHide: true\r
 165       }\r
 166   # sync view \r
 167   $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->\r
 168     trace = panel_tag_id($(@))\r
 169     $(trace).width(parseInt( $(@).val()))\r
 170   \r
 171   $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->\r
 172     trace = panel_tag_id($(@))\r
 173     $(trace).height(parseInt( $(@).val()))\r
 174   \r
 175   $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->\r
 176     trace = panel_tag_id($(@))\r
 177     $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
 178   \r
 179   \r
 180   # panel picture\r
 181   $('.pettanr-panel-picture-wrapper').map ->\r
 182     $(@).draggable {\r
 183       stop: ( event, ui ) ->\r
 184         trace = element_tag_id($(@))\r
 185         img = $(trace + 'img')\r
 186         left = img.parent().position().left + $(@).position().left\r
 187         top = img.parent().position().top + $(@).position().top\r
 188         $(trace + 'x').val(parseInt(left))\r
 189         $(trace + 'y').val(parseInt(top))\r
 190     }\r
 191   \r
 192   $('.panel-picture').map ->\r
 193     $(@).resizable {\r
 194       stop: ( event, ui ) ->\r
 195         resize_div = $(@)\r
 196         panel_picture_div = resize_div.parent()\r
 197         trace = element_tag_id(panel_picture_div)\r
 198         \r
 199         resize_div.css('top', '0px')\r
 200         resize_div.css('left', '0px')\r
 201         if ui.originalPosition.top != ui.position.top\r
 202           t = panel_picture_div.position().top + ui.position.top\r
 203           $(trace + 'y').val(Math.floor(t))\r
 204           panel_picture_div.css('top', t.toString() + 'px')\r
 205         if ui.originalPosition.left != ui.position.left\r
 206           l = panel_picture_div.position().left + ui.position.left\r
 207           $(trace + 'x').val(Math.floor(l))\r
 208           panel_picture_div.css('left', l.toString() + 'px')\r
 209         w = if $(trace + 'width').val() < 0\r
 210           -ui.size.width\r
 211         else\r
 212           ui.size.width\r
 213         h = if $(trace + 'height').val() < 0\r
 214           -ui.size.height\r
 215         else\r
 216           ui.size.height\r
 217         $(trace + 'width').val(w)\r
 218         $(trace + 'height').val(h)\r
 219       resize: ( event, ui ) ->\r
 220         resize_div = $(@)\r
 221         panel_picture_div = resize_div.parent()\r
 222         trace = element_tag_id(panel_picture_div)\r
 223         \r
 224       handles: 'all',\r
 225       autoHide: true\r
 226     }\r
 227   \r
 228   refresh_picture = (e, w, h)  ->\r
 229     if w and h\r
 230       sd = ''\r
 231       if h < 0\r
 232         sd += 'v'\r
 233       if w < 0\r
 234         sd += 'h'\r
 235       if sd.length > 0\r
 236         sd += '/'\r
 237       pid = parseInt(e.attr('picture_id')).toString()\r
 238       ext = e.attr('ext')\r
 239       src = '/pictures/' + sd + pid + '.' + ext\r
 240       e.attr('src', src)\r
 241   \r
 242   # sync view \r
 243   $('input').map  ->\r
 244     if element_is('panel_picture', $(@))\r
 245       $(@).focusout ->\r
 246         switch $(@).attr('column')\r
 247           when 'x'\r
 248             trace = element_tag_id($(@)) + 'div'\r
 249             v = parseInt($(@).val()).toString() + 'px'\r
 250             $(trace).css('left', v)\r
 251           when 'y'\r
 252             trace = element_tag_id($(@)) + 'div'\r
 253             v = parseInt($(@).val()).toString() + 'px'\r
 254             $(trace).css('top', v)\r
 255           when 'width'\r
 256             trace = element_tag_id($(@)) + 'img'\r
 257             w = parseInt($(@).val())\r
 258             $(trace).width(Math.abs(w))\r
 259             $(trace).parent().width(Math.abs(w))\r
 260             h = parseInt($(element_tag_id($(@)) + 'height').val())\r
 261           when 'height'\r
 262             trace = element_tag_id($(@)) + 'img'\r
 263             h = parseInt($(@).val())\r
 264             $(trace).height(Math.abs(h))\r
 265             $(trace).parent().height(Math.abs(h))\r
 266             w = parseInt($(element_tag_id($(@)) + 'width').val())\r
 267           else\r
 268         refresh_picture($(trace), w, h)\r
 269     else\r
 270   \r
 271   # speech_balloons\r
 272   $('.pettanr-comic-balloon' ).map ->\r
 273     $(@).draggable {\r
 274       stop: ( event, ui ) ->\r
 275         balloon = $('.pettanr-balloon', $(@))\r
 276         trace = element_part_tag_id(balloon)\r
 277         left = $(@).position().left\r
 278         top = $(@).position().top\r
 279         $(trace + 'x').val(parseInt(left))\r
 280         $(trace + 'y').val(parseInt(top))\r
 281     }\r
 282   \r
 283   $('.pettanr-balloon' ).map ->\r
 284     $(@).resizable {\r
 285       stop: ( event, ui ) ->\r
 286         resize_div = $(@)\r
 287         speech_balloon_div = resize_div.parent()\r
 288         balloon = $('.pettanr-balloon', $(@))\r
 289         trace = element_tag_id(speech_balloon_div)\r
 290         trace_balloon = element_part_tag_id(balloon)\r
 291         \r
 292         resize_div.css('top', '0px')\r
 293         resize_div.css('left', '0px')\r
 294         w = ui.size.width\r
 295         h = ui.size.height\r
 296         if ui.originalPosition.top != ui.position.top\r
 297           t = speech_balloon_div.position().top + ui.position.top\r
 298           $(trace_balloon + 'y').val(Math.floor(t))\r
 299           speech_balloon_div.css('top', t.toString() + 'px')\r
 300           speech_balloon_div.css('height', h + 'px')\r
 301         if ui.originalPosition.left != ui.position.left\r
 302           l = speech_balloon_div.position().left + ui.position.left\r
 303           $(trace_balloon + 'x').val(Math.floor(l))\r
 304           speech_balloon_div.css('left', l.toString() + 'px')\r
 305           speech_balloon_div.css('width', w + 'px')\r
 306         $(trace_balloon + 'width').val(w)\r
 307         $(trace_balloon + 'height').val(h)\r
 308         speech_balloon_div.css('width', w.toString() + 'px')\r
 309         speech_balloon_div.css('height', h.toString() + 'px')\r
 310      resize: ( event, ui ) ->\r
 311         resize_div = $(@)\r
 312         speech_balloon_div = resize_div.parent()\r
 313         balloon = $('.pettanr-balloon', $(@))\r
 314         trace = element_tag_id(speech_balloon_div)\r
 315         trace_balloon = element_part_tag_id(balloon)\r
 316         \r
 317       handles: 'all',\r
 318       autoHide: true\r
 319     }\r
 320   \r
 321   $('.pettanr-comic-speech-inner' ).map ->\r
 322     $(@).mouseover -> \r
 323       outer = $(@).parent()\r
 324       sb = outer.parent()\r
 325       trace = element_tag_id(sb)\r
 326       img = $('.pettanr-balloon', $(trace))\r
 327       $('.ui-resizable-handle', img.parent()).map ->\r
 328         $(@).css('display', 'block')\r
 329     $(@).mouseout -> \r
 330       outer = $(@).parent()\r
 331       sb = outer.parent()\r
 332       trace = element_tag_id(sb)\r
 333       img = $('.pettanr-balloon', $(trace))\r
 334       $('.ui-resizable-handle', img.parent()).map ->\r
 335         $(@).css('display', 'none')\r
 336         \r
 337   \r
 338   # sync view \r
 339   $('input').map  ->\r
 340     if element_is('speech_balloon', $(@))\r
 341       $(@).focusout ->\r
 342         switch $(@).attr('column')\r
 343           when 'x'\r
 344             trace = element_tag_id($(@))\r
 345             v = parseInt($(@).val()).toString() + 'px'\r
 346             $(trace).css('left', v)\r
 347           when 'y'\r
 348             trace = element_tag_id($(@))\r
 349             v = parseInt($(@).val()).toString() + 'px'\r
 350             $(trace).css('top', v)\r
 351           when 'width'\r
 352             trace = element_tag_id($(@))\r
 353             v = parseInt($(@).val())\r
 354             $(trace).width(Math.abs(v))\r
 355             img = $('.pettanr-balloon', $(trace))\r
 356             img.parent().width(v)\r
 357             img.width(v)\r
 358           when 'height'\r
 359             trace = element_tag_id($(@))\r
 360             v = parseInt($(@).val())\r
 361             $(trace).height(Math.abs(v))\r
 362             img = $('.pettanr-balloon', $(trace))\r
 363             img.parent().height(v)\r
 364             img.height(v)\r
 365           else\r
 366     else\r
 367   $('textarea').map  ->\r
 368     if element_is('speech_balloon', $(@))\r
 369       $(@).focusout ->\r
 370         switch $(@).attr('column')\r
 371           when 'content'\r
 372             trace = element_part_tag_id($(@))\r
 373             wf_sel = $(trace + 'writing_format_id')\r
 374             wf_id = parseInt(wf_sel.val())\r
 375             v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
 376             $(trace).html('<p>' + v + '</p>')\r
 377   $('textarea').map  ->\r
 378     if element_is('speech_balloon', $(@))\r
 379       switch $(@).attr('column')\r
 380         when 'content'\r
 381           $(@).bind('textchange', (event, previousText) ->\r
 382             trace = element_part_tag_id($(@))\r
 383             wf_sel = $(trace + 'writing_format_id')\r
 384             wf_id = parseInt(wf_sel.val())\r
 385             v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
 386             $(trace).html('<p>' + v + '</p>')\r
 387           )\r
 388   $('select').map  ->\r
 389     if element_is('speech_balloon', $(@))\r
 390       $(@).change ->\r
 391         switch $(@).attr('column')\r
 392           when 'font_size'\r
 393             trace = element_part_tag_id($(@))\r
 394             $(trace).css('font-size', $(@).val() + 'em')\r
 395           when 'text_align'\r
 396             trace = element_part_tag_id($(@))\r
 397             v = parseInt($(@).val())\r
 398             $(trace).css('text-align', text_align_texts[v])\r
 399     else\r
 400   $('input').map  ->\r
 401     if element_is('speech_balloon', $(@))\r
 402       if $(@).attr('column') == 'fore_color'\r
 403         $(@).hide()\r
 404 \r
 405   \r
 406   # ground-picture\r
 407   # sync view \r
 408   $('input').map  ->\r
 409     if element_is('ground_picture', $(@))\r
 410       $(@).focusout ->\r
 411         switch $(@).attr('column')\r
 412           when 'x', 'y'\r
 413             trace = element_tag_id($(@))\r
 414             x = parseInt($(trace + 'x').val()).toString() + 'px'\r
 415             y = parseInt($(trace + 'y').val()).toString() + 'px'\r
 416             $(trace).css('background-position', x + ' ' + y)\r
 417   $('select').map  ->\r
 418     if element_is('ground_picture', $(@))\r
 419       $(@).change ->\r
 420         switch $(@).attr('column')\r
 421           when 'repeat'\r
 422             trace = element_tag_id($(@))\r
 423             v = parseInt($(@).val())\r
 424             $(trace).css('background-repeat', repeat_texts[v])\r
 425     else\r
 426   \r
 427   \r
 428   # ground_color\r
 429   # sync view \r
 430   $('input').map  ->\r
 431     if element_is('ground_color', $(@))\r
 432       if $(@).attr('column') == 'code'\r
 433         $(@).hide()\r
 434 \r
 435   color_slider_change = (trace) -> \r
 436     red = $(trace + 'code_red').slider('value')\r
 437     green = $(trace + 'code_green').slider('value')\r
 438     blue = $(trace + 'code_blue').slider('value')\r
 439     code = (red << 16) + (green << 8) + (blue)\r
 440     phex = "000000" + code.toString(16)\r
 441     hex = code.toString(16)\r
 442     h = phex.substring(phex.length - 6)\r
 443     $(trace + 'code_swatch').css('background-color', '#' + h)\r
 444     $(trace + 'code_hex').html('HEX: #' + h)\r
 445     $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
 446     v = '#' + h\r
 447     if $(trace).attr('element_type') == 'ground_color'\r
 448       $(trace + 'code').val(code)\r
 449       $(trace).css('background-color', v)\r
 450     else\r
 451       $(trace + 'fore_color').val(code)\r
 452       $(trace).css('color', v)\r
 453   \r
 454   $('.colorpicker').map -> \r
 455     if is_element_part($(@))\r
 456       code_picker_trace = element_part_tag_id($(@))\r
 457       code = parseInt($(code_picker_trace + 'fore_color').val())\r
 458     else\r
 459       code_picker_trace = element_tag_id($(@))\r
 460       code = parseInt($(code_picker_trace + 'code').val())\r
 461     red = (code >> 16) & 0xFF\r
 462     green = (code >> 8) & 0xFF\r
 463     blue = code & 0xFF\r
 464     $(code_picker_trace + 'code_red').slider {\r
 465       orientation: 'horizontal',\r
 466       range: 'min',\r
 467       max: 255,\r
 468       value: red,\r
 469       change: ( event, ui ) ->\r
 470         if is_element_part($(@).parent())\r
 471           trace = element_part_tag_id($(@).parent())\r
 472         else\r
 473           trace = element_tag_id($(@).parent())\r
 474         color_slider_change(trace)\r
 475     }\r
 476     $(code_picker_trace + 'code_green').slider {\r
 477       orientation: 'horizontal',\r
 478       range: 'min',\r
 479       max: 255,\r
 480       value: green,\r
 481       change: ( event, ui ) ->\r
 482         if is_element_part($(@).parent())\r
 483           trace = element_part_tag_id($(@).parent())\r
 484         else\r
 485           trace = element_tag_id($(@).parent())\r
 486         color_slider_change(trace)\r
 487     }\r
 488     $(code_picker_trace + 'code_blue').slider {\r
 489       orientation: 'horizontal',\r
 490       range: 'min',\r
 491       max: 255,\r
 492       value: blue,\r
 493       change: ( event, ui ) ->\r
 494         if is_element_part($(@).parent())\r
 495           trace = element_part_tag_id($(@).parent())\r
 496         else\r
 497           trace = element_tag_id($(@).parent())\r
 498         color_slider_change(trace)\r
 499     }\r
 500     color_slider_change(code_picker_trace)\r
 501   $('.colorpicker-wrap').map -> \r
 502     $(@).css('display', 'block')\r
 503   \r
 504   update_t = (ultrace) -> \r
 505     t = 0\r
 506     $(ultrace + ' li').map ->\r
 507       trace = element_tag_id($(@))\r
 508       if $(trace + '_destroy').val().length < 1\r
 509         $(trace + 't').val(t)\r
 510         t++\r
 511       else\r
 512   \r
 513   $('.tsort').map -> \r
 514     $(@).sortable {\r
 515       update: ( event, ui ) ->\r
 516         trace = panel_tag_id($(@))\r
 517         update_t(trace + 'tsort')\r
 518     }\r
 519   $('.t-sort li').map -> \r
 520     $(@).disableSelection()\r
 521   \r
 522   update_z = (ultrace) -> \r
 523     z = 1\r
 524     $(ultrace + ' li').map ->\r
 525       trace = element_tag_id($(@))\r
 526       # update panel\r
 527       if $(trace + '_destroy').val().length < 1\r
 528         $(trace + 'z').val(z)\r
 529         switch $(@).attr('element_type')\r
 530           when 'panel_picture'\r
 531             trace = trace + 'div'\r
 532         $(trace).css('zIndex', z)\r
 533         z++\r
 534       else\r
 535   \r
 536   $('.zsort').map -> \r
 537     $(@).sortable {\r
 538       update: ( event, ui ) ->\r
 539         trace = panel_tag_id($(@))\r
 540         update_z(trace + 'zsort')\r
 541     }\r
 542   $('.z-sort li').map -> \r
 543     $(@).disableSelection()\r
 544   \r
 545   $('.panel_picture_width_tool').map ->\r
 546     $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r
 547   \r
 548   $('.wreverse').click -> \r
 549     d = $(@).parent()\r
 550     trace = element_tag_id(d)\r
 551     f = $(trace + 'width')\r
 552     w = -f.val()\r
 553     f.val(w)\r
 554     f = $(trace + 'height')\r
 555     h = f.val()\r
 556     refresh_picture($(trace + 'img'), w, h)\r
 557   \r
 558   $('.wdouble').click -> \r
 559     d = $(@).parent()\r
 560     trace = element_tag_id(d)\r
 561     f = $(trace + 'width')\r
 562     w = f.val() * 2\r
 563     f.val(w)\r
 564     $(trace + 'img').width(Math.abs(w))\r
 565     $(trace + 'img').parent().width(Math.abs(w))\r
 566   \r
 567   $('.whalf').click -> \r
 568     d = $(@).parent()\r
 569     trace = element_tag_id(d)\r
 570     f = $(trace + 'width')\r
 571     w = Math.floor(f.val() / 2)\r
 572     f.val(w)\r
 573     $(trace + 'img').width(Math.abs(w))\r
 574     $(trace + 'img').parent().width(Math.abs(w))\r
 575   \r
 576   $('.panel_picture_height_tool').map ->\r
 577     $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')\r
 578   \r
 579   $('.hreverse').click -> \r
 580     d = $(@).parent()\r
 581     trace = element_tag_id(d)\r
 582     f = $(trace + 'height')\r
 583     h = -f.val()\r
 584     f.val(h)\r
 585     f = $(trace + 'width')\r
 586     w = f.val()\r
 587     refresh_picture($(trace + 'img'), w, h)\r
 588   \r
 589   $('.hdouble').click -> \r
 590     d = $(@).parent()\r
 591     trace = element_tag_id(d)\r
 592     f = $(trace + 'height')\r
 593     h = f.val() * 2\r
 594     f.val(h)\r
 595     $(trace + 'img').height(Math.abs(h))\r
 596     $(trace + 'img').parent().height(Math.abs(h))\r
 597   \r
 598   $('.hhalf').click -> \r
 599     d = $(@).parent()\r
 600     trace = element_tag_id(d)\r
 601     f = $(trace + 'height')\r
 602     h = Math.floor(f.val() / 2)\r
 603     f.val(h)\r
 604     $(trace + 'img').height(Math.abs(h))\r
 605     $(trace + 'img').parent().height(Math.abs(h))\r
 606   \r
 607   # all\r
 608   # disable form actions\r
 609   # hide submit buttons\r
 610   $('.edit_panel_picture' ).map ->\r
 611     $(@).submit ->\r
 612       false\r
 613   $('.edit_speech_balloon' ).map ->\r
 614     $(@).submit ->\r
 615       false\r
 616   $('.edit_ground_picture' ).map ->\r
 617     $(@).submit ->\r
 618       false\r
 619   $('.edit_ground_color' ).map ->\r
 620     $(@).submit ->\r
 621       false\r
 622   \r
 623   $('.edit_panel' ).map ->\r
 624     if $(@).attr('jqform')\r
 625     else\r
 626       $(@).submit ->\r
 627         false\r
 628   \r
 629   $('.submit' ).map ->\r
 630     $(@).hide()\r
 631   \r
 632   # disable form z t\r
 633   $('input').map  ->\r
 634     if is_element($(@))\r
 635       switch $(@).attr('column')\r
 636         when 'z' , 't'\r
 637           $(@).hide()\r
 638           $(@).parent().hide() #label\r
 639   \r
 640   # add button on new form\r
 641   $('.submit-new-form').map ->\r
 642     $(@).html('<button class="new-element">add</button>')\r
 643   \r
 644   $('.new-element').map ->\r
 645     $(@).click -> \r
 646       false\r
 647   \r