OSDN Git Service

t#2334:add gc offset
[pettanr/pettanr.git] / app / assets / javascripts / panels.js.coffee
index 327914e..37735c9 100644 (file)
 $ ->\r
-  element_tag_id = (element) ->\r
-    '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')\r
+  confirm_confirm_confirm = () ->\r
+    confirm(  )\r
+  editor = window.PettanrEditor\r
+  configurations =  window.configurations\r
+  WritingFormat = window.PettanrWritingFormat\r
+  WritingFormat.load($('#writing_formats'))\r
+  SpeechBalloonTemplate = window.PettanrSpeechBalloonTemplate\r
+  SpeechBalloonTemplate.load($('#speech_balloon_templates'))\r
+  for n, v of SpeechBalloonTemplate.scripts\r
+    v.onLoad()\r
+    v.add_helper( n, '' )\r
+  PictureSizeHelper = window.PettanrPictureSizeHelper\r
+  ColorHelper = window.PettanrColorHelper\r
   \r
-  refresh_attribute = () ->\r
-    attr = {}\r
-    $('input').map ->\r
-      if $(@).attr('tree') \r
-        keys = $(@).attr('tree').split('-')\r
-        set_tree_value(keys, attr, $(this).val())\r
-    $('select').map ->\r
-      if $(@).attr('tree') \r
-        keys = $(@).attr('tree').split('-')\r
-        set_tree_value(keys, attr, $(this).val())\r
-    $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
-  \r
-  $('#tabs').tabs()\r
-  $('#elements-tabs').tabs()\r
-  \r
-  $('#pettanr-panel-submit').focusin ->\r
-    refresh_attribute()\r
-  \r
-  # panel\r
-  $('.pettanr-comic-panel').map ->\r
-    $(@).resizable {\r
-      stop: ( event, ui ) ->\r
-        trace = '#panel' + $(@).attr('panel_id')\r
-        $(trace + 'width').val($(@).width())\r
-        $(trace + 'height').val($(@).height())\r
-    }\r
-  # sync view \r
-  $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->\r
-    trace = '#panel' + $(@).attr('panel_id')\r
-    $(trace).width(parseInt( $(@).val()))\r
-  \r
-  $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->\r
-    trace = '#panel' + $(@).attr('panel_id')\r
-    $(trace).height(parseInt( $(@).val()))\r
+  find_configurations = ( hash, key) ->\r
+    if typeof(hash[key]) == 'string'\r
+      find_configurations(hash, hash[key])\r
+    else\r
+      return hash[key]\r
   \r
-  $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->\r
-    trace = '#panel' + $(@).attr('panel_id')\r
-    $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
+  set_validates = (form) ->\r
+    rules = {}\r
+    $('input', form).map ->\r
+      model_name = $(@).attr('data-model')\r
+      column_name = $(@).attr('column')\r
+      name = $(@).attr('name')\r
+      if model_name and column_name\r
+        model = find_configurations(configurations['models'], model_name)\r
+        rule = model['attributes'][column_name]['rules']\r
+        trace = editor.element_tag_id($(@)) \r
+        if rule\r
+          rules[name] = rule\r
+          $(@).focusout ->\r
+            if editor.is_panel(form)\r
+              validate_panel(form)\r
+            else\r
+              validate_element(form)\r
+    if Object.keys(rules).length > 0\r
+      v = form.validate({ignore:[],rules: rules})\r
   \r
+  validate_panel = (form) ->\r
+    valid = form.valid()\r
+    bc = if valid\r
+      ''\r
+    else\r
+      '#ef29ef'\r
+    $('a', $('#tabs-1-tab')).map ->\r
+      $(@).css('background-color', bc)\r
+    valid\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 + 'x').val(left)\r
-        $(trace + 'y').val(top)\r
-    }\r
+  display_element = (element, vis) ->\r
+    v = if vis\r
+      ''\r
+    else\r
+      'none'\r
+    trace = editor.element_tag_id(element)\r
+    switch element.attr('element_type')\r
+      when 'panel_picture'\r
+        trace = trace + 'div'\r
+    $(trace).css('display', v)\r
   \r
-  $('.panel-picture').map ->\r
-    $(@).resizable {\r
-      stop: ( event, ui ) ->\r
-        trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')\r
-        $(trace + 'width').val($(@).width())\r
-        $(trace + 'height').val($(@).height())\r
-      handles: 'all'\r
-    }\r
+  validate_element = (form) ->\r
+    valid = form.valid()\r
+    bc = if valid\r
+      ''\r
+    else\r
+      '#ef29ef'\r
+    display_element(form, valid)\r
+    trace = editor.element_tag_id(form) \r
+    $('.elements-tab', $(trace + 'element_tab')).map  ->\r
+      $(@).css('background-color', bc)\r
+    valid\r
   \r
-  # sync view \r
-  $('input').map  ->\r
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'\r
-      $(@).focusout ->\r
-        switch $(@).attr('column')\r
-          when 'width'\r
-            trace = element_tag_id($(@)) + 'img'\r
-            v = parseInt($(@).val())\r
-            $(trace).width(Math.abs(v))\r
-            sd = if v < 0\r
-              'v/'\r
+  validate_forms = () ->\r
+    valid = true\r
+    $('form', $('#tabs-1')).map  ->\r
+      form_name = $(@).attr('data-form-name')\r
+      if form_name\r
+        if validate_panel($(@))\r
+        else\r
+          valid = false\r
+    invalid_elements = []\r
+    $('form', $('#tabs-2')).map  ->\r
+      form_name = $(@).attr('data-form-name')\r
+      if form_name\r
+        if validate_element($(@))\r
+        else\r
+          valid = false\r
+          invalid_elements.push form_name\r
+    if invalid_elements.length > 0\r
+      bc = '#ef29ef'\r
+    else\r
+      bc = ''\r
+    $('a', $('#tabs-2-tab')).map ->\r
+      $(@).css('background-color', bc)\r
+    return valid\r
+  $('form').map  ->\r
+    form_name = $(@).attr('data-form-name')\r
+    if form_name\r
+      form = $(this)\r
+      set_validates(form)\r
+  $('.panel-editor').map ->\r
+    if $(@).attr('current') and parseInt($(@).attr('current')) > 0\r
+      editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))\r
+  if editor.is_editting()\r
+    $('#tabs').tabs()\r
+    $('#elements-tabs').tabs()\r
+    $('#new-element-tabs').tabs()\r
+    $('#new-speech_balloon-tabs').tabs()\r
+    $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
+    $("#elements-tabs li").removeClass("ui-corner-top")\r
+    $("#elements-tabs li").addClass("ui-corner-left")\r
+    $("#elements-tabs li").map ->\r
+      $(@).mouseover -> \r
+        switch $(@).attr('element_type')\r
+          when 'speech_balloon'\r
+            trace = editor.element_tag_id($(@)) \r
+            t = $('img', $(trace))\r
+          when 'panel_picture'\r
+            trace = editor.element_tag_id($(@)) + 'img'\r
+            t = $(trace)\r
+          else\r
+            t = null\r
+        if t\r
+          $('.ui-resizable-handle', t.parent()).map ->\r
+            $(@).css('display', 'block')\r
+      $(@).mouseout -> \r
+        switch $(@).attr('element_type')\r
+          when 'speech_balloon'\r
+            trace = editor.element_tag_id($(@)) \r
+            t = $('img', $(trace))\r
+          when 'panel_picture'\r
+            trace = editor.element_tag_id($(@)) + 'img'\r
+            t = $(trace)\r
+          else\r
+            t = null\r
+        if t\r
+          $('.ui-resizable-handle', t.parent()).map ->\r
+            $(@).css('display', 'none')\r
+    \r
+    #destroy button\r
+    $('.ui-icon-destroy').map ->\r
+      $(@).button {\r
+        icons: {\r
+          primary: 'ui-icon-close', \r
+          secondary: null\r
+        }, \r
+        text: false\r
+      }\r
+      $(@).click -> \r
+        if confirm('destroy ?')\r
+          trace = editor.element_tag_id($(@))\r
+          $(trace + '_destroy').val('true')\r
+          panel_trace = editor.panel_tag_id($(@))\r
+          update_t(panel_trace + 'tsort')\r
+          update_z(panel_trace + 'zsort')\r
+          # sync\r
+          $(trace + 'element_tab').css('display', 'none')\r
+          $(trace + 'tab_panel').css('display', 'none')\r
+          $(trace + 'zsort').css('display', 'none')\r
+          $(trace + 'tsort').css('display', 'none')\r
+          display_element($(@), false)\r
+    \r
+    $('#pettanr-panel-submit').focusin ->\r
+      editor.refresh_attribute($('#pettanr-panel-json'))\r
+    \r
+    # panel\r
+    $('.pettanr-comic-panel').map ->\r
+      if editor.is_editable($(@))\r
+        $(@).resizable {\r
+          stop: ( event, ui ) ->\r
+            trace = editor.panel_tag_id($(@))\r
+            w = parseInt($(@).width())\r
+            h = parseInt($(@).height())\r
+            $(trace + 'width').val(w)\r
+            $(trace + 'height').val(h)\r
+            $('.pettanr-comic-ground-picture').map ->\r
+              $(@).width(w)\r
+              $(@).height(h)\r
+            $('.pettanr-comic-ground-color').map ->\r
+              $(@).width(w)\r
+              $(@).height(h)\r
+          , autoHide: true\r
+        }\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
+    # panel picture\r
+    PictureSizeHelper.add_helper()\r
+    \r
+    $('.pettanr-panel-picture-wrapper').map ->\r
+      $(@).draggable {\r
+        stop: ( event, ui ) ->\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
+    \r
+    $('.panel-picture').map ->\r
+      $(@).resizable {\r
+        stop: ( event, ui ) ->\r
+          resize_div = $(@)\r
+          panel_picture_div = resize_div.parent()\r
+          trace = editor.element_tag_id(panel_picture_div)\r
+          \r
+          resize_div.css('top', '0px')\r
+          resize_div.css('left', '0px')\r
+          if ui.originalPosition.top != ui.position.top\r
+            t = panel_picture_div.position().top + ui.position.top\r
+            $(trace + 'y').val(Math.floor(t))\r
+            panel_picture_div.css('top', t.toString() + 'px')\r
+          if ui.originalPosition.left != ui.position.left\r
+            l = panel_picture_div.position().left + ui.position.left\r
+            $(trace + 'x').val(Math.floor(l))\r
+            panel_picture_div.css('left', l.toString() + 'px')\r
+          w = if $(trace + 'width').val() < 0\r
+            -ui.size.width\r
+          else\r
+            ui.size.width\r
+          h = if $(trace + 'height').val() < 0\r
+            -ui.size.height\r
+          else\r
+            ui.size.height\r
+          $(trace + 'width').val(w)\r
+          $(trace + 'height').val(h)\r
+        resize: ( event, ui ) ->\r
+          resize_div = $(@)\r
+          panel_picture_div = resize_div.parent()\r
+          trace = editor.element_tag_id(panel_picture_div)\r
+        handles: 'all',\r
+        autoHide: true\r
+      }\r
+    \r
+    # sync view \r
+    $('input').map  ->\r
+      if editor.element_is('panel_picture', $(@))\r
+        $(@).focusout ->\r
+          switch $(@).attr('column')\r
+            when 'x'\r
+              trace = editor.element_tag_id($(@)) + 'div'\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('left', v)\r
+            when 'y'\r
+              trace = editor.element_tag_id($(@)) + 'div'\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('top', v)\r
+            when 'width'\r
+              trace = editor.element_tag_id($(@)) + 'img'\r
+              w = parseInt($(@).val())\r
+              $(trace).width(Math.abs(w))\r
+              $(trace).parent().width(Math.abs(w))\r
+              h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
+            when 'height'\r
+              trace = editor.element_tag_id($(@)) + 'img'\r
+              h = parseInt($(@).val())\r
+              $(trace).height(Math.abs(h))\r
+              $(trace).parent().height(Math.abs(h))\r
+              w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
             else\r
-              ''\r
-            pid = parseInt($(trace).attr('picture_id')).toString()\r
-            ext = $(trace).attr('ext')\r
-            src = '/pictures/' + sd + pid + '.' + ext\r
-            $(trace).attr('src', src)\r
-          when 'height'\r
-            trace = element_tag_id($(@)) + 'img'\r
-            v = parseInt($(@).val())\r
-            $(trace).height(Math.abs(v))\r
-            sd = if v < 0\r
-              'h/'\r
+          PictureSizeHelper.refresh_picture($(trace), w, h)\r
+      else\r
+    \r
+    # speech_balloons\r
+    ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')\r
+    \r
+    $('.pettanr-comic-balloon' ).map ->\r
+      $(@).draggable {\r
+        stop: ( event, ui ) ->\r
+          balloon = $('.pettanr-balloon', $(@))\r
+          trace = editor.element_part_tag_id(balloon)\r
+          left = $(@).position().left\r
+          top = $(@).position().top\r
+          $(trace + 'x').val(parseInt(left))\r
+          $(trace + 'y').val(parseInt(top))\r
+      }\r
+    \r
+    $('.pettanr-balloon' ).map ->\r
+      $(@).resizable {\r
+        stop: ( event, ui ) ->\r
+          resize_div = $(@)\r
+          speech_balloon_div = resize_div.parent()\r
+          balloon = $('.pettanr-balloon', $(@))\r
+          trace = editor.element_tag_id(speech_balloon_div)\r
+          trace_balloon = editor.element_part_tag_id(balloon)\r
+          \r
+          resize_div.css('top', '0px')\r
+          resize_div.css('left', '0px')\r
+          w = ui.size.width\r
+          h = ui.size.height\r
+          if ui.originalPosition.top != ui.position.top\r
+            t = speech_balloon_div.position().top + ui.position.top\r
+            $(trace_balloon + 'y').val(Math.floor(t))\r
+            speech_balloon_div.css('top', t.toString() + 'px')\r
+            speech_balloon_div.css('height', h + 'px')\r
+          if ui.originalPosition.left != ui.position.left\r
+            l = speech_balloon_div.position().left + ui.position.left\r
+            $(trace_balloon + 'x').val(Math.floor(l))\r
+            speech_balloon_div.css('left', l.toString() + 'px')\r
+            speech_balloon_div.css('width', w + 'px')\r
+          $(trace_balloon + 'width').val(w)\r
+          $(trace_balloon + 'height').val(h)\r
+          speech_balloon_div.css('width', w.toString() + 'px')\r
+          speech_balloon_div.css('height', h.toString() + 'px')\r
+       resize: ( event, ui ) ->\r
+          resize_div = $(@)\r
+          speech_balloon_div = resize_div.parent()\r
+          balloon = $('.pettanr-balloon', $(@))\r
+          trace = editor.element_tag_id(speech_balloon_div)\r
+          trace_balloon = editor.element_part_tag_id(balloon)\r
+        handles: 'all',\r
+        autoHide: true\r
+      }\r
+    \r
+    $('.pettanr-comic-speech-inner' ).map ->\r
+      $(@).mouseover -> \r
+        outer = $(@).parent()\r
+        sb = outer.parent()\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 = 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 editor.element_is('speech_balloon', $(@))\r
+        $(@).focusout ->\r
+          switch $(@).attr('column')\r
+            when 'x'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('left', v)\r
+            when 'y'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val()).toString() + 'px'\r
+              $(trace).css('top', v)\r
+            when 'width'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).width(Math.abs(v))\r
+              img = $('.pettanr-balloon', $(trace))\r
+              img.parent().width(v)\r
+              img.width(v)\r
+            when 'height'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).height(Math.abs(v))\r
+              img = $('.pettanr-balloon', $(trace))\r
+              img.parent().height(v)\r
+              img.height(v)\r
             else\r
-              ''\r
-            pid = parseInt($(trace).attr('picture_id')).toString()\r
-            ext = $(trace).attr('ext')\r
-            src = '/pictures/' + sd + pid + '.' + ext\r
-            $(trace).attr('src', src)\r
-          else\r
-    else\r
-  \r
-  # speech_balloons\r
-  $('.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
-        left = $(@).position().left\r
-        top = $(@).position().top\r
-        $(trace + 'x').val(left)\r
-        $(trace + 'y').val(top)\r
-    }\r
+      else\r
+    $('textarea').map  ->\r
+      if editor.element_is('speech_balloon', $(@))\r
+        $(@).focusout ->\r
+          switch $(@).attr('column')\r
+            when 'content'\r
+              trace = editor.element_part_tag_id($(@))\r
+              wf_sel = $(trace + 'writing_format_id')\r
+              wf_id = parseInt(wf_sel.val())\r
+              v = WritingFormat.render(wf_id, $(@).val())\r
+              $(trace).html(v)\r
+    $('textarea').map  ->\r
+      if editor.element_is('speech_balloon', $(@))\r
+        switch $(@).attr('column')\r
+          when 'content'\r
+            $(@).bind('textchange', (event, previousText) ->\r
+              trace = editor.element_part_tag_id($(@))\r
+              wf_sel = $(trace + 'writing_format_id')\r
+              wf_id = parseInt(wf_sel.val())\r
+              v = WritingFormat.render(wf_id, $(@).val())\r
+              $(trace).html(v)\r
+            )\r
+    $('select').map  ->\r
+      if editor.element_is('speech_balloon', $(@))\r
+        $(@).change ->\r
+          switch $(@).attr('column')\r
+            when 'font_size'\r
+              trace = editor.element_part_tag_id($(@))\r
+              $(trace).css('font-size', $(@).val() + 'em')\r
+            when 'text_align'\r
+              trace = editor.element_part_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).css('text-align', editor.text_align_texts[v])\r
+      else\r
+    $('input').map  ->\r
+      if editor.element_is('speech_balloon', $(@))\r
+        if $(@).attr('column') == 'fore_color'\r
+          $(@).hide()\r
 \r
-  \r
-  $('.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
-        $(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
-      handles: 'all'\r
-    }\r
-  \r
-  # sync view \r
-  $('#t-sortable tbody').sortable {\r
-      update: ( event, ui ) ->\r
-        t = 0;\r
-        $('#t-sortable tr').map ->\r
-          pid = $(@).attr('panel_id')\r
-          eid = $(@).attr('element_id')\r
-          etp = $(@).attr('element_type')\r
-          tid = '#panel' + pid + etp + eid\r
-          # update input\r
-          trace = tid + 't'\r
-          $(trace).val(t)\r
+    \r
+    # ground-picture\r
+    refresh_ground_picture = (element_trace)  ->\r
+      x = parseInt($(element_trace + 'x').val()).toString() + 'px'\r
+      y = parseInt($(element_trace + 'y').val()).toString() + 'px'\r
+      $(element_trace).css('background-position', x + ' ' + y)\r
+    \r
+    # sync view \r
+    $('input').map  ->\r
+      if editor.element_is('ground_picture', $(@))\r
+        switch $(@).attr('column')\r
+          when 'x', 'y'\r
+            $(@).focusout ->\r
+              trace = editor.element_tag_id($(@))\r
+              refresh_ground_picture(trace)\r
+            $(@).spinner {\r
+              stop: ( event, ui ) ->\r
+                trace = editor.element_tag_id($(@))\r
+                refresh_ground_picture(trace)\r
+            }\r
+    $('select').map  ->\r
+      if editor.element_is('ground_picture', $(@))\r
+        $(@).change ->\r
+          switch $(@).attr('column')\r
+            when 'repeat'\r
+              trace = editor.element_tag_id($(@))\r
+              v = parseInt($(@).val())\r
+              $(trace).css('background-repeat', editor.repeat_texts[v])\r
+      else\r
+    \r
+    \r
+    # ground_color\r
+    ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')\r
+    \r
+    refresh_ground_color = (element_trace)  ->\r
+      orientation = parseInt( $(element_trace + 'orientation').val() )\r
+      xy = $(element_trace + 'xy').val()\r
+      wh = $(element_trace + 'wh').val()\r
+      div_offset = if xy\r
+        xy\r
+      else\r
+        0\r
+      div_size = if wh\r
+        wh\r
+      else\r
+        100 - div_offset\r
+      div_x = if orientation == 0\r
+        0\r
+      else\r
+        div_offset\r
+      div_y = if orientation == 0\r
+        div_offset\r
+      else\r
+        0\r
+      div_width = if orientation == 0\r
+        100\r
+      else\r
+        div_size\r
+      div_height = if orientation == 0\r
+        div_size\r
+      else\r
+        100\r
+      div = $(element_trace)\r
+      div.css('left', div_x.toString() + '%')\r
+      div.css('top', div_y.toString() + '%')\r
+      div.css('width', div_width.toString() + '%')\r
+      div.css('height', div_height.toString() + '%')\r
+    \r
+    # sync view \r
+    $('input').map  ->\r
+      if editor.element_is('ground_color', $(@))\r
+        switch $(@).attr('column')\r
+          when 'code'\r
+            $(@).hide()\r
+          when 'xy', 'wh'\r
+            $(@).spinner {\r
+              stop: ( event, ui ) ->\r
+                trace = editor.element_tag_id($(@))\r
+                refresh_ground_color(trace)\r
+              , min: 0\r
+              , max: 100\r
+            }\r
+            $(@).focusout ->\r
+              trace = editor.element_tag_id($(@))\r
+              refresh_ground_color(trace)\r
+    \r
+    $('select').map  ->\r
+      if editor.element_is('ground_color', $(@))\r
+        switch $(@).attr('column')\r
+          when 'orientation'\r
+            $(@).change ->\r
+              trace = editor.element_tag_id($(@))\r
+              refresh_ground_color(trace)\r
+\r
+    update_t = (ultrace) -> \r
+      t = 0\r
+      $(ultrace + ' li').map ->\r
+        trace = editor.element_tag_id($(@))\r
+        if $(trace + '_destroy').val().length < 1\r
+          $(trace + 't').val(t)\r
           t++\r
-  }\r
-  $('#t-sortable tbody').disableSelection()\r
-  \r
-  $('#z-sortable tbody').sortable {\r
-      update: ( event, ui ) ->\r
-        z = 1;\r
-        $('#z-sortable tr').map ->\r
-          pid = $(@).attr('panel_id')\r
-          eid = $(@).attr('element_id')\r
-          etp = $(@).attr('element_type')\r
-          tid = '#panel' + pid + etp + eid\r
-          # update input\r
-          trace = tid + 'z'\r
-          $(trace).val(z)\r
-          # update panel\r
-          switch etp\r
+        else\r
+    \r
+    $('.tsort').map -> \r
+      $(@).sortable {\r
+        update: ( event, ui ) ->\r
+          trace = editor.panel_tag_id($(@))\r
+          update_t(trace + 'tsort')\r
+      }\r
+    $('.t-sort li').map -> \r
+      $(@).disableSelection()\r
+    \r
+    update_z = (ultrace) -> \r
+      z = 1\r
+      $(ultrace + ' li').map ->\r
+        trace = editor.element_tag_id($(@))\r
+        # update panel\r
+        if $(trace + '_destroy').val().length < 1\r
+          $(trace + 'z').val(z)\r
+          switch $(@).attr('element_type')\r
             when 'panel_picture'\r
-              trace = tid + 'div'\r
-            when 'speech_balloon'\r
-              trace = tid\r
-            when 'ground_picture'\r
-              trace = tid\r
-            when 'ground_color'\r
-              trace = tid\r
+              trace = trace + 'div'\r
           $(trace).css('zIndex', z)\r
           z++\r
-  }\r
-  $('#t-sortable tbody').disableSelection()\r
-  \r
-  # all\r
-  # disable form actions\r
-  # hide submit buttons\r
-  $('.edit_panel_picture' ).map ->\r
-    $(@).submit ->\r
-      false\r
-  \r
-  $('.edit_panel' ).map ->\r
-    if $(@).attr('jqform')\r
-    else\r
+        else\r
+    \r
+    $('.zsort').map -> \r
+      $(@).sortable {\r
+        update: ( event, ui ) ->\r
+          trace = editor.panel_tag_id($(@))\r
+          update_z(trace + 'zsort')\r
+      }\r
+    $('.z-sort li').map -> \r
+      $(@).disableSelection()\r
+    \r
+    # all\r
+    # disable form actions\r
+    # hide submit buttons\r
+    $('.edit_panel_picture' ).map ->\r
       $(@).submit ->\r
         false\r
-  \r
-  $('.submit' ).map ->\r
-    $(@).hide()\r
-  \r
-  \r
+    $('.edit_speech_balloon' ).map ->\r
+      $(@).submit ->\r
+        false\r
+    $('.edit_ground_picture' ).map ->\r
+      $(@).submit ->\r
+        false\r
+    $('.edit_ground_color' ).map ->\r
+      $(@).submit ->\r
+        false\r
+    \r
+    $('.edit_panel' ).map ->\r
+      if $(@).attr('jqform')\r
+        $(@).submit ->\r
+          if validate_forms()\r
+            true\r
+          else\r
+            false\r
+      else\r
+        $(@).submit ->\r
+          false\r
+    \r
+    $('.submit' ).map ->\r
+      $(@).hide()\r
+    \r
+    # disable form z t\r
+    $('input').map  ->\r
+      if editor.is_element($(@))\r
+        switch $(@).attr('column')\r
+          when 'z' , 't'\r
+            $(@).hide()\r
+            $(@).parent().hide() #label\r
+    \r
+    # add button on new form\r
+    $('.submit-new-form').map ->\r
+      $(@).html('<button class="new-element">add</button>')\r
+    \r
+    $('.new-element').map ->\r
+      $(@).click -> \r
+        false\r
+    j = JSON.stringify(window.configurations)\r
+    $('#pettanr-configurations').val(j)\r
+\r