t#31945:separate js

diff --cc app/assets/javascripts/panels.js.coffee
index 186e614,ec8547a..cd3bb24
--- 1/app/assets/javascripts/panels.js.coffee
--- 2/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@@ -89,32 -163,28 +89,32 @@@ $ -
              $(@).height(h)\r
          , autoHide: true\r
        }\r
 -  # sync view \r
 -  $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->\r
 -    trace = panel_tag_id($(@))\r
 -    $(trace).width(parseInt( $(@).val()))\r
 -  \r
 -  $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->\r
 -    trace = panel_tag_id($(@))\r
 -    $(trace).height(parseInt( $(@).val()))\r
 -  \r
 -  $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->\r
 -    trace = panel_tag_id($(@))\r
 -    $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
+   \r
 +  # sync view \r
 +  $('input').map  ->\r
 +    if $(@).attr('element_type')\r
 +    else\r
 +      if $(@).attr('panel_id')\r
 +        $(@).focusout ->\r
 +          switch $(@).attr('column')\r
 +            when 'width'\r
 +              trace = editor.panel_tag_id($(@))\r
 +              $(trace).width(parseInt( $(@).val()))\r
 +            when 'height'\r
 +              trace = editor.panel_tag_id($(@))\r
 +              $(trace).height(parseInt( $(@).val()))\r
 +            when 'border'\r
 +              trace = editor.panel_tag_id($(@))\r
 +              $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
    \r
-   \r
    # panel picture\r
    $('.pettanr-panel-picture-wrapper').map ->\r
      $(@).draggable {\r
        stop: ( event, ui ) ->\r
-         trace = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id')\r
-         img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'\r
-         left = $(img).parent().position().left + $(@).position().left\r
-         top = $(img ).parent().position().top + $(@).position().top\r
 -        trace = element_tag_id($(@))\r
++        trace = editor.element_tag_id($(@))\r
+         img = $(trace + 'img')\r
+         left = img.parent().position().left + $(@).position().left\r
+         top = img.parent().position().top + $(@).position().top\r
          $(trace + 'x').val(parseInt(left))\r
          $(trace + 'y').val(parseInt(top))\r
      }\r
@@@ -122,7 -192,7 +122,7 @@@
    $('.panel-picture').map ->\r
      $(@).resizable {\r
        stop: ( event, ui ) ->\r
-         trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')\r
 -        trace = element_tag_id($(@).parent())\r
++        trace = editor.element_tag_id($(@).parent())\r
          $(trace + 'width').val($(@).width())\r
          $(trace + 'height').val($(@).height())\r
        handles: 'all',\r
@@@ -145,7 -215,7 +145,7 @@@
    \r
    # sync view \r
    $('input').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'\r
 -    if element_is('panel_picture', $(@))\r
++    if editor.element_is('panel_picture', $(@))\r
        $(@).focusout ->\r
          switch $(@).attr('column')\r
            when 'x'\r
@@@ -176,7 -246,8 +176,8 @@@
    $('.pettanr-comic-balloon' ).map ->\r
      $(@).draggable {\r
        stop: ( event, ui ) ->\r
-         trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
+         img = $('.pettanr-balloon', $(@))\r
 -        trace = element_part_tag_id(img)\r
++        trace = editor.element_part_tag_id(img)\r
          left = $(@).position().left\r
          top = $(@).position().top\r
          $(trace + 'x').val(parseInt(left))\r
@@@ -187,13 -257,15 +187,15 @@@
    $('.pettanr-balloon' ).map ->\r
      $(@).resizable {\r
        stop: ( event, ui ) ->\r
-         trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id') + 'balloon' + $(@).parent().attr('balloon_id')\r
+         img = $('.pettanr-balloon', $(@))\r
 -        trace = element_part_tag_id(img)\r
++        trace = editor.element_part_tag_id(img)\r
          $(trace + 'width').val($(@).width())\r
          $(trace + 'height').val($(@).height())\r
       resize: ( event, ui ) ->\r
-         trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id')\r
-         $(trace).width($(@).width())\r
-         $(trace).height($(@).height())\r
+         img = $('.pettanr-balloon', $(@))\r
 -        sb = element_tag_id(img)\r
++        sb = editor.element_tag_id(img)\r
+         $(sb).width($(@).width())\r
+         $(sb).height($(@).height())\r
        handles: 'all',\r
        autoHide: true\r
      }\r
@@@ -201,22 -273,22 +203,22 @@@
      $(@).mouseover -> \r
        outer = $(@).parent()\r
        sb = outer.parent()\r
-       trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
-       img = $(trace)\r
 -      trace = element_tag_id(sb)\r
++      trace = editor.element_tag_id(sb)\r
+       img = $('.pettanr-balloon', $(trace))\r
        $('.ui-resizable-handle', img.parent()).map ->\r
          $(@).css('display', 'block')\r
      $(@).mouseout -> \r
        outer = $(@).parent()\r
        sb = outer.parent()\r
-       trace = '#panel' + sb.attr('panel_id') + 'speech_balloon' + sb.attr('element_id') + 'balloon' + sb.attr('balloon_id')\r
-       img = $(trace)\r
 -      trace = element_tag_id(sb)\r
++      trace = editor.element_tag_id(sb)\r
+       img = $('.pettanr-balloon', $(trace))\r
        $('.ui-resizable-handle', img.parent()).map ->\r
          $(@).css('display', 'none')\r
          \r
    \r
    # sync view \r
    $('input').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 -    if element_is('speech_balloon', $(@))\r
++    if editor.element_is('speech_balloon', $(@))\r
        $(@).focusout ->\r
          switch $(@).attr('column')\r
            when 'x'\r
@@@ -228,23 -300,23 +230,23 @@@
              v = parseInt($(@).val()).toString() + 'px'\r
              $(trace).css('top', v)\r
            when 'width'\r
 -            trace = element_tag_id($(@))\r
 +            trace = editor.element_tag_id($(@))\r
              v = parseInt($(@).val())\r
              $(trace).width(Math.abs(v))\r
-             trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
-             $(trace).parent().width(v)\r
-             $(trace).width(v)\r
+             img = $('.pettanr-balloon', $(trace))\r
+             img.parent().width(v)\r
+             img.width(v)\r
            when 'height'\r
 -            trace = element_tag_id($(@))\r
 +            trace = editor.element_tag_id($(@))\r
              v = parseInt($(@).val())\r
              $(trace).height(Math.abs(v))\r
-             trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
-             $(trace).parent().height(v)\r
-             $(trace).height(v)\r
+             img = $('.pettanr-balloon', $(trace))\r
+             img.parent().height(v)\r
+             img.height(v)\r
            else\r
      else\r
    $('textarea').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 -    if element_is('speech_balloon', $(@))\r
++    if editor.element_is('speech_balloon', $(@))\r
        $(@).focusout ->\r
          switch $(@).attr('column')\r
            when 'content'\r
@@@ -252,9 -324,9 +254,9 @@@
              wf_sel = $(trace + 'writing_format_id')\r
              wf_id = parseInt(wf_sel.val())\r
              v = writing_format_functions[writing_formats[wf_id]]($(@).val())\r
-             $(trace).html(v)\r
+             $(trace).html('<p>' + v + '</p>')\r
    $('textarea').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 -    if element_is('speech_balloon', $(@))\r
++    if editor.element_is('speech_balloon', $(@))\r
        switch $(@).attr('column')\r
          when 'content'\r
            $(@).bind('textchange', (event, previousText) ->\r
@@@ -265,7 -337,7 +267,7 @@@
              $(trace).html('<p>' + v + '</p>')\r
            )\r
    $('select').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
 -    if element_is('speech_balloon', $(@))\r
++    if editor.element_is('speech_balloon', $(@))\r
        $(@).change ->\r
          switch $(@).attr('column')\r
            when 'font_size'\r
@@@ -277,24 -349,24 +279,24 @@@
              $(trace).css('text-align', text_align_texts[v])\r
      else\r
    $('input').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon' and $(@).attr('column') == 'fore_color'\r
-       $(@).hide()\r
 -    if element_is('speech_balloon', $(@))\r
++    if editor.element_is('speech_balloon', $(@))\r
+       if $(@).attr('column') == 'fore_color'\r
+         $(@).hide()\r
  \r
    \r
    # ground-picture\r
    # sync view \r
    $('input').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
 -    if element_is('ground_picture', $(@))\r
++    if editor.element_is('ground_picture', $(@))\r
        $(@).focusout ->\r
          switch $(@).attr('column')\r
            when 'x', 'y'\r
 -            trace = element_tag_id($(@))\r
 +            trace = editor.element_tag_id($(@))\r
-             x = parseInt($(@).val()).toString() + 'px'\r
-             ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'\r
-             y = parseInt($(ytrace).val()).toString() + 'px'\r
-             $(trace).css('background-position', y + ' ' + x)\r
+             x = parseInt($(trace + 'x').val()).toString() + 'px'\r
+             y = parseInt($(trace + 'y').val()).toString() + 'px'\r
+             $(trace).css('background-position', x + ' ' + y)\r
    $('select').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
 -    if element_is('ground_picture', $(@))\r
++    if editor.element_is('ground_picture', $(@))\r
        $(@).change ->\r
          switch $(@).attr('column')\r
            when 'repeat'\r
@@@ -307,8 -379,9 +309,9 @@@
    # ground_color\r
    # sync view \r
    $('input').map  ->\r
-     if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
-       $(@).hide()\r
 -    if element_is('ground_color', $(@))\r
++    if editor.element_is('ground_color', $(@))\r
+       if $(@).attr('column') == 'code'\r
+         $(@).hide()\r
  \r
    color_slider_change = (trace) -> \r
      red = $(trace + 'code_red').slider('value')\r
@@@ -322,19 -395,19 +325,19 @@@
      $(trace + 'code_hex').html('HEX: #' + h)\r
      $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
      v = '#' + h\r
-     if editor.is_element_part($(trace))\r
-       $(trace + 'fore_color').val(code)\r
-       $(trace).css('color', v)\r
-     else\r
+     if $(trace).attr('element_type') == 'ground_color'\r
        $(trace + 'code').val(code)\r
        $(trace).css('background-color', v)\r
+     else\r
+       $(trace + 'fore_color').val(code)\r
+       $(trace).css('color', v)\r
    \r
    $('.colorpicker').map -> \r
 -    if is_element_part($(@))\r
 -      code_picker_trace = element_part_tag_id($(@))\r
 +    if editor.is_element_part($(@))\r
 +      code_picker_trace = editor.element_part_tag_id($(@))\r
        code = parseInt($(code_picker_trace + 'fore_color').val())\r
      else\r
 -      code_picker_trace = element_tag_id($(@))\r
 +      code_picker_trace = editor.element_tag_id($(@))\r
        code = parseInt($(code_picker_trace + 'code').val())\r
      red = (code >> 16) & 0xFF\r
      green = (code >> 8) & 0xFF\r

diff --cc app/assets/javascripts/pettanr_editor.js.coffee
index 92281ac,0000000..836d49b
mode 100644,000000..100644
--- 1/app/assets/javascripts/pettanr_editor.js.coffee
--- /dev/null
+++ b/app/assets/javascripts/pettanr_editor.js.coffee
@@@ -1,78 -1,0 +1,83 @@@
 +class PettanrEditor\r
 +  @pettanr_current_panel_id = 0\r
 +  \r
 +  @new_element_index = {}\r
 +  @new_element_index[PettanrEditor.pettanr_current_panel_id] = 0\r
 +  \r
 +  @set_tree_value = (keys, last_attr, value) ->\r
 +    key = keys.shift()\r
 +    if keys.length <= 0\r
 +      last_attr[key] = value\r
 +    else\r
 +      last_attr[key] = last_attr[key] || {}\r
 +      PettanrEditor.set_tree_value(keys, last_attr[key], value)\r
 +\r
 +  @repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']\r
 +  \r
 +  @is_editable = (p) ->\r
 +    if p.parent().attr('editable')\r
 +      return true\r
 +    else\r
 +      return false\r
 +  @is_var = (o) ->\r
 +    if parseInt(o.attr('no_attr')) > 0\r
 +      return false\r
 +    else\r
 +      if o.attr('column') \r
 +        if o.attr('column') == '_destroy' and o.val().length < 1\r
 +          return false\r
 +        else\r
 +          return true\r
 +      else\r
 +        return false\r
 +  @is_element = (o) ->\r
 +    if o.attr('element_type')\r
 +      return true\r
 +    else\r
 +      return false\r
 +  @is_element_part = (o) ->\r
 +    if o.attr('element_part_type')\r
 +      return true\r
 +    else\r
 +      return false\r
++  @element_is = (element_type, o) ->\r
++    if PettanrEditor.is_element(o) and o.attr('element_type') == element_type\r
++      return true\r
++    else\r
++      return false\r
 +  @element_types  = {'panel_picture': 'panel_pictures', 'speech_balloon': 'speech_balloons', 'ground_picture': 'ground_pictures', 'ground_color': 'ground_colors'}\r
 +  @element_type_to_table = (element_type) ->\r
 +    PettanrEditor.element_types[element_type]\r
 +  @text_align_texts = ['left', 'left', 'right', 'center']\r
 +\r
 +  @make_tree = (attr, o) ->\r
 +    if PettanrEditor.is_var(o)\r
 +      tree = 'panels-' + o.attr('panel_id') + '-'\r
 +      if PettanrEditor.is_element(o)\r
 +        tree = tree + PettanrEditor.element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'\r
 +        if PettanrEditor.is_element_part(o)\r
 +          tree = tree + o.attr('element_part_type') + '_attributes-'\r
 +      tree = tree + o.attr('column')\r
 +      keys = tree.split('-')\r
 +      PettanrEditor.set_tree_value(keys, attr, o.val())\r
 +  \r
 +  @panel_tag_id = (element) ->\r
 +    '#panel' + element.attr('panel_id')\r
 +  \r
 +  @element_tag_id = (element) ->\r
 +    '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')\r
 +  \r
 +  @element_part_tag_id = (element_part) ->\r
 +    '#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
 +  \r
 +  @refresh_attribute = (field) ->\r
 +    attr = {}\r
 +    $('input').map ->\r
 +      PettanrEditor.make_tree(attr, $(@))\r
 +    $('textarea').map  ->\r
 +      PettanrEditor.make_tree(attr, $(@))\r
 +    $('select').map ->\r
 +      PettanrEditor.make_tree(attr, $(@))\r
 +    field.val(JSON.stringify(attr['panels'][PettanrEditor.pettanr_current_panel_id.toString() ]))\r
 +  \r
 +@PettanrEditor = PettanrEditor\r

diff --cc app/views/panels/_form.html.erb
Simple merge