X-Git-Url: http://git.osdn.net/view?a=blobdiff_plain;f=app%2Fassets%2Fjavascripts%2Fpanels.js.coffee;h=37735c9d7f257ce86ea14b3ee978bfe90bef60bd;hb=e25230e6f2fe934e47502621cf498640d58f429d;hp=b52fde9497aa7ed46fc79944ccbfbab92e08ba9e;hpb=0b673714645f020a040465fc6de65870515e7314;p=pettanr%2Fpettanr.git

diff --git a/app/assets/javascripts/panels.js.coffee b/app/assets/javascripts/panels.js.coffee
index b52fde94..37735c9d 100644
--- a/app/assets/javascripts/panels.js.coffee
+++ b/app/assets/javascripts/panels.js.coffee
@@ -1,509 +1,599 @@
 $ ->
   confirm_confirm_confirm = () ->
     confirm(  )
-  escapeHTML = (t) ->
-    $("<div/>").text(t).html()
-
-  set_tree_value = (keys, last_attr, value) ->
-    key = keys.shift()
-    if keys.length <= 0
-      last_attr[key] = value
+  editor = window.PettanrEditor
+  configurations =  window.configurations
+  WritingFormat = window.PettanrWritingFormat
+  WritingFormat.load($('#writing_formats'))
+  SpeechBalloonTemplate = window.PettanrSpeechBalloonTemplate
+  SpeechBalloonTemplate.load($('#speech_balloon_templates'))
+  for n, v of SpeechBalloonTemplate.scripts
+    v.onLoad()
+    v.add_helper( n, '' )
+  PictureSizeHelper = window.PettanrPictureSizeHelper
+  ColorHelper = window.PettanrColorHelper
+  
+  find_configurations = ( hash, key) ->
+    if typeof(hash[key]) == 'string'
+      find_configurations(hash, hash[key])
     else
-      last_attr[key] = last_attr[key] || {}
-      set_tree_value(keys, last_attr[key], value)
-
-  repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']
-  
-  is_editable = (p) ->
-    if p.parent().attr('editable')
-      return true
+      return hash[key]
+  
+  set_validates = (form) ->
+    rules = {}
+    $('input', form).map ->
+      model_name = $(@).attr('data-model')
+      column_name = $(@).attr('column')
+      name = $(@).attr('name')
+      if model_name and column_name
+        model = find_configurations(configurations['models'], model_name)
+        rule = model['attributes'][column_name]['rules']
+        trace = editor.element_tag_id($(@)) 
+        if rule
+          rules[name] = rule
+          $(@).focusout ->
+            if editor.is_panel(form)
+              validate_panel(form)
+            else
+              validate_element(form)
+    if Object.keys(rules).length > 0
+      v = form.validate({ignore:[],rules: rules})
+  
+  validate_panel = (form) ->
+    valid = form.valid()
+    bc = if valid
+      ''
     else
-      return false
-  is_tree = (o) ->
-    if o.attr('tree') 
-      if o.attr('column') == '_destroy' and o.val().length < 1
-        return false
-      else
-        return true
-      return true
+      '#ef29ef'
+    $('a', $('#tabs-1-tab')).map ->
+      $(@).css('background-color', bc)
+    valid
+  
+  display_element = (element, vis) ->
+    v = if vis
+      ''
     else
-      return false
-  
-  panel_tag_id = (element) ->
-    '#panel' + element.attr('panel_id')
-  
-  element_tag_id = (element) ->
-    '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')
-  
-  refresh_attribute = () ->
-    attr = {}
-    $('input').map ->
-      if is_tree($(@)) 
-        keys = $(@).attr('tree').split('-')
-        set_tree_value(keys, attr, $(this).val())
-    $('textarea').map  ->
-      if is_tree($(@)) 
-        keys = $(@).attr('tree').split('-')
-        set_tree_value(keys, attr, $(this).val())
-    $('select').map ->
-      if is_tree($(@)) 
-        keys = $(@).attr('tree').split('-')
-        set_tree_value(keys, attr, $(this).val())
-    $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))
-  
-  $('#tabs').tabs()
-  $('#elements-tabs').tabs()
-  $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )
-  $("#elements-tabs li").removeClass("ui-corner-top")
-  $("#elements-tabs li").addClass("ui-corner-left")
-  $("#elements-tabs li").map ->
-    $(@).mouseover -> 
-      switch $(@).attr('element_type')
-        when 'speech_balloon'
-          trace = element_tag_id($(@)) 
-          t = $('img', $(trace))
-        when 'panel_picture'
-          trace = element_tag_id($(@)) + 'img'
-          t = $(trace)
+      'none'
+    trace = editor.element_tag_id(element)
+    switch element.attr('element_type')
+      when 'panel_picture'
+        trace = trace + 'div'
+    $(trace).css('display', v)
+  
+  validate_element = (form) ->
+    valid = form.valid()
+    bc = if valid
+      ''
+    else
+      '#ef29ef'
+    display_element(form, valid)
+    trace = editor.element_tag_id(form) 
+    $('.elements-tab', $(trace + 'element_tab')).map  ->
+      $(@).css('background-color', bc)
+    valid
+  
+  validate_forms = () ->
+    valid = true
+    $('form', $('#tabs-1')).map  ->
+      form_name = $(@).attr('data-form-name')
+      if form_name
+        if validate_panel($(@))
         else
-          t = null
-      if t
-        $('.ui-resizable-handle', t.parent()).map ->
-          $(@).css('display', 'block')
-    $(@).mouseout -> 
-      switch $(@).attr('element_type')
-        when 'speech_balloon'
-          trace = element_tag_id($(@)) 
-          t = $('img', $(trace))
-        when 'panel_picture'
-          trace = element_tag_id($(@)) + 'img'
-          t = $(trace)
+          valid = false
+    invalid_elements = []
+    $('form', $('#tabs-2')).map  ->
+      form_name = $(@).attr('data-form-name')
+      if form_name
+        if validate_element($(@))
         else
-          t = null
-      if t
-        $('.ui-resizable-handle', t.parent()).map ->
-          $(@).css('display', 'none')
-  
-  #destroy button
-  $('.ui-icon-destroy').map ->
-    $(@).button {
-      icons: {
-        primary: 'ui-icon-close', 
-        secondary: null
-      }, 
-      text: false
-    }
-    $(@).click -> 
-      if confirm('destroy ?')
-        trace = element_tag_id($(@))
-        $(trace + '_destroy').val('true')
-        panel_trace = panel_tag_id($(@))
-        update_t(panel_trace + 'tsort')
-        update_z(panel_trace + 'zsort')
-        # sync
-        $(trace + 'element_tab').css('display', 'none')
-        $(trace + 'tab_panel').css('display', 'none')
-        $(trace + 'zsort').css('display', 'none')
-        $(trace + 'tsort').css('display', 'none')
+          valid = false
+          invalid_elements.push form_name
+    if invalid_elements.length > 0
+      bc = '#ef29ef'
+    else
+      bc = ''
+    $('a', $('#tabs-2-tab')).map ->
+      $(@).css('background-color', bc)
+    return valid
+  $('form').map  ->
+    form_name = $(@).attr('data-form-name')
+    if form_name
+      form = $(this)
+      set_validates(form)
+  $('.panel-editor').map ->
+    if $(@).attr('current') and parseInt($(@).attr('current')) > 0
+      editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))
+  if editor.is_editting()
+    $('#tabs').tabs()
+    $('#elements-tabs').tabs()
+    $('#new-element-tabs').tabs()
+    $('#new-speech_balloon-tabs').tabs()
+    $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )
+    $("#elements-tabs li").removeClass("ui-corner-top")
+    $("#elements-tabs li").addClass("ui-corner-left")
+    $("#elements-tabs li").map ->
+      $(@).mouseover -> 
         switch $(@).attr('element_type')
+          when 'speech_balloon'
+            trace = editor.element_tag_id($(@)) 
+            t = $('img', $(trace))
           when 'panel_picture'
-            trace = trace + 'div'
-        $(trace).css('display', 'none')
-        
-  
-  $('#pettanr-panel-submit').focusin ->
-    refresh_attribute()
-  
-  # panel
-  $('.pettanr-comic-panel').map ->
-    if is_editable($(@))
+            trace = editor.element_tag_id($(@)) + 'img'
+            t = $(trace)
+          else
+            t = null
+        if t
+          $('.ui-resizable-handle', t.parent()).map ->
+            $(@).css('display', 'block')
+      $(@).mouseout -> 
+        switch $(@).attr('element_type')
+          when 'speech_balloon'
+            trace = editor.element_tag_id($(@)) 
+            t = $('img', $(trace))
+          when 'panel_picture'
+            trace = editor.element_tag_id($(@)) + 'img'
+            t = $(trace)
+          else
+            t = null
+        if t
+          $('.ui-resizable-handle', t.parent()).map ->
+            $(@).css('display', 'none')
+    
+    #destroy button
+    $('.ui-icon-destroy').map ->
+      $(@).button {
+        icons: {
+          primary: 'ui-icon-close', 
+          secondary: null
+        }, 
+        text: false
+      }
+      $(@).click -> 
+        if confirm('destroy ?')
+          trace = editor.element_tag_id($(@))
+          $(trace + '_destroy').val('true')
+          panel_trace = editor.panel_tag_id($(@))
+          update_t(panel_trace + 'tsort')
+          update_z(panel_trace + 'zsort')
+          # sync
+          $(trace + 'element_tab').css('display', 'none')
+          $(trace + 'tab_panel').css('display', 'none')
+          $(trace + 'zsort').css('display', 'none')
+          $(trace + 'tsort').css('display', 'none')
+          display_element($(@), false)
+    
+    $('#pettanr-panel-submit').focusin ->
+      editor.refresh_attribute($('#pettanr-panel-json'))
+    
+    # panel
+    $('.pettanr-comic-panel').map ->
+      if editor.is_editable($(@))
+        $(@).resizable {
+          stop: ( event, ui ) ->
+            trace = editor.panel_tag_id($(@))
+            w = parseInt($(@).width())
+            h = parseInt($(@).height())
+            $(trace + 'width').val(w)
+            $(trace + 'height').val(h)
+            $('.pettanr-comic-ground-picture').map ->
+              $(@).width(w)
+              $(@).height(h)
+            $('.pettanr-comic-ground-color').map ->
+              $(@).width(w)
+              $(@).height(h)
+          , autoHide: true
+        }
+    
+    # sync view 
+    $('input').map  ->
+      if $(@).attr('element_type')
+      else
+        if $(@).attr('panel_id')
+          $(@).focusout ->
+            switch $(@).attr('column')
+              when 'width'
+                trace = editor.panel_tag_id($(@))
+                $(trace).width(parseInt( $(@).val()))
+              when 'height'
+                trace = editor.panel_tag_id($(@))
+                $(trace).height(parseInt( $(@).val()))
+              when 'border'
+                trace = editor.panel_tag_id($(@))
+                $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')
+    
+    # panel picture
+    PictureSizeHelper.add_helper()
+    
+    $('.pettanr-panel-picture-wrapper').map ->
+      $(@).draggable {
+        stop: ( event, ui ) ->
+          trace = editor.element_tag_id($(@))
+          img = $(trace + 'img')
+          left = img.parent().position().left + $(@).position().left
+          top = img.parent().position().top + $(@).position().top
+          $(trace + 'x').val(parseInt(left))
+          $(trace + 'y').val(parseInt(top))
+      }
+    
+    $('.panel-picture').map ->
       $(@).resizable {
         stop: ( event, ui ) ->
-          trace = panel_tag_id($(@))
-          w = parseInt($(@).width())
-          h = parseInt($(@).height())
+          resize_div = $(@)
+          panel_picture_div = resize_div.parent()
+          trace = editor.element_tag_id(panel_picture_div)
+          
+          resize_div.css('top', '0px')
+          resize_div.css('left', '0px')
+          if ui.originalPosition.top != ui.position.top
+            t = panel_picture_div.position().top + ui.position.top
+            $(trace + 'y').val(Math.floor(t))
+            panel_picture_div.css('top', t.toString() + 'px')
+          if ui.originalPosition.left != ui.position.left
+            l = panel_picture_div.position().left + ui.position.left
+            $(trace + 'x').val(Math.floor(l))
+            panel_picture_div.css('left', l.toString() + 'px')
+          w = if $(trace + 'width').val() < 0
+            -ui.size.width
+          else
+            ui.size.width
+          h = if $(trace + 'height').val() < 0
+            -ui.size.height
+          else
+            ui.size.height
           $(trace + 'width').val(w)
           $(trace + 'height').val(h)
-          $('.pettanr-comic-ground-picture').map ->
-            $(@).width(w)
-            $(@).height(h)
-          $('.pettanr-comic-ground-color').map ->
-            $(@).width(w)
-            $(@).height(h)
-        , autoHide: true
+        resize: ( event, ui ) ->
+          resize_div = $(@)
+          panel_picture_div = resize_div.parent()
+          trace = editor.element_tag_id(panel_picture_div)
+        handles: 'all',
+        autoHide: true
       }
-  # sync view 
-  $('#panel' + pettanr_current_panel_id.toString() +  'width').focusout ->
-    trace = '#panel' + $(@).attr('panel_id')
-    $(trace).width(parseInt( $(@).val()))
-  
-  $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->
-    trace = '#panel' + $(@).attr('panel_id')
-    $(trace).height(parseInt( $(@).val()))
-  
-  $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->
-    trace = '#panel' + $(@).attr('panel_id')
-    $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')
-  
-  
-  # panel picture
-  $('.pettanr-panel-picture-wrapper').map ->
-    $(@).draggable {
-      stop: ( event, ui ) ->
-        trace = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id')
-        img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'
-        left = $(img).parent().position().left + $(@).position().left
-        top = $(img ).parent().position().top + $(@).position().top
-        $(trace + 'x').val(parseInt(left))
-        $(trace + 'y').val(parseInt(top))
-    }
-  
-  $('.panel-picture').map ->
-    $(@).resizable {
-      stop: ( event, ui ) ->
-        trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')
-        $(trace + 'width').val($(@).width())
-        $(trace + 'height').val($(@).height())
-      handles: 'all',
-      autoHide: true
-    }
-  
-  refresh_picture = (e, w, h)  ->
-    if w and h
-      sd = ''
-      if h < 0
-        sd += 'v'
-      if w < 0
-        sd += 'h'
-      if sd.length > 0
-        sd += '/'
-      pid = parseInt(e.attr('picture_id')).toString()
-      ext = e.attr('ext')
-      src = '/pictures/' + sd + pid + '.' + ext
-      e.attr('src', src)
-  
-  # sync view 
-  $('input').map  ->
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'
-      $(@).focusout ->
-        switch $(@).attr('column')
-          when 'x'
-            trace = element_tag_id($(@)) + 'div'
-            v = parseInt($(@).val()).toString() + 'px'
-            $(trace).css('left', v)
-          when 'y'
-            trace = element_tag_id($(@)) + 'div'
-            v = parseInt($(@).val()).toString() + 'px'
-            $(trace).css('top', v)
-          when 'width'
-            trace = element_tag_id($(@)) + 'img'
-            w = parseInt($(@).val())
-            $(trace).width(Math.abs(w))
-            $(trace).parent().width(Math.abs(w))
-            h = parseInt($(element_tag_id($(@)) + 'height').val())
-          when 'height'
-            trace = element_tag_id($(@)) + 'img'
-            h = parseInt($(@).val())
-            $(trace).height(Math.abs(h))
-            $(trace).parent().height(Math.abs(h))
-            w = parseInt($(element_tag_id($(@)) + 'width').val())
-          else
-        refresh_picture($(trace), w, h)
-    else
-  
-  # speech_balloons
-  $('.pettanr-comic-balloon' ).map ->
-    $(@).draggable {
-      stop: ( event, ui ) ->
-        trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')
-        left = $(@).position().left
-        top = $(@).position().top
-        $(trace + 'x').val(parseInt(left))
-        $(trace + 'y').val(parseInt(top))
-    }
-
-  
-  $('.pettanr-balloon' ).map ->
-    $(@).resizable {
-      stop: ( event, ui ) ->
-        trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id') + 'balloon' + $(@).parent().attr('balloon_id')
-        $(trace + 'width').val($(@).width())
-        $(trace + 'height').val($(@).height())
-     resize: ( event, ui ) ->
-        trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id')
-        $(trace).width($(@).width())
-        $(trace).height($(@).height())
-      handles: 'all',
-      autoHide: true
-    }
-  $('.pettanr-comic-balloon span' ).map ->
-    p = $(@).parent()
-    sb = p.parent()
-    sb.mouseover -> 
-      trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')
-      img = $(trace)
-      $('.ui-resizable-handle', img.parent()).map ->
-        $(@).css('display', 'block')
-    sb.mouseout -> 
-      trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')
-      img = $(trace)
-      $('.ui-resizable-handle', img.parent()).map ->
-        $(@).css('display', 'none')
-        
-  
-  # sync view 
-  $('input').map  ->
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
-      $(@).focusout ->
-        switch $(@).attr('column')
-          when 'x'
-            trace = element_tag_id($(@))
-            v = parseInt($(@).val()).toString() + 'px'
-            $(trace).css('left', v)
-          when 'y'
-            trace = element_tag_id($(@))
-            v = parseInt($(@).val()).toString() + 'px'
-            $(trace).css('top', v)
-          when 'width'
-            trace = element_tag_id($(@))
-            v = parseInt($(@).val())
-            $(trace).width(Math.abs(v))
-            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')
-            $(trace).parent().width(v)
-            $(trace).width(v)
-          when 'height'
-            trace = element_tag_id($(@))
-            v = parseInt($(@).val())
-            $(trace).height(Math.abs(v))
-            trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')
-            $(trace).parent().height(v)
-            $(trace).height(v)
-          else
-    else
-  $('textarea').map  ->
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
-      $(@).focusout ->
+    
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('panel_picture', $(@))
+        $(@).focusout ->
+          switch $(@).attr('column')
+            when 'x'
+              trace = editor.element_tag_id($(@)) + 'div'
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('left', v)
+            when 'y'
+              trace = editor.element_tag_id($(@)) + 'div'
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('top', v)
+            when 'width'
+              trace = editor.element_tag_id($(@)) + 'img'
+              w = parseInt($(@).val())
+              $(trace).width(Math.abs(w))
+              $(trace).parent().width(Math.abs(w))
+              h = parseInt($(editor.element_tag_id($(@)) + 'height').val())
+            when 'height'
+              trace = editor.element_tag_id($(@)) + 'img'
+              h = parseInt($(@).val())
+              $(trace).height(Math.abs(h))
+              $(trace).parent().height(Math.abs(h))
+              w = parseInt($(editor.element_tag_id($(@)) + 'width').val())
+            else
+          PictureSizeHelper.refresh_picture($(trace), w, h)
+      else
+    
+    # speech_balloons
+    ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')
+    
+    $('.pettanr-comic-balloon' ).map ->
+      $(@).draggable {
+        stop: ( event, ui ) ->
+          balloon = $('.pettanr-balloon', $(@))
+          trace = editor.element_part_tag_id(balloon)
+          left = $(@).position().left
+          top = $(@).position().top
+          $(trace + 'x').val(parseInt(left))
+          $(trace + 'y').val(parseInt(top))
+      }
+    
+    $('.pettanr-balloon' ).map ->
+      $(@).resizable {
+        stop: ( event, ui ) ->
+          resize_div = $(@)
+          speech_balloon_div = resize_div.parent()
+          balloon = $('.pettanr-balloon', $(@))
+          trace = editor.element_tag_id(speech_balloon_div)
+          trace_balloon = editor.element_part_tag_id(balloon)
+          
+          resize_div.css('top', '0px')
+          resize_div.css('left', '0px')
+          w = ui.size.width
+          h = ui.size.height
+          if ui.originalPosition.top != ui.position.top
+            t = speech_balloon_div.position().top + ui.position.top
+            $(trace_balloon + 'y').val(Math.floor(t))
+            speech_balloon_div.css('top', t.toString() + 'px')
+            speech_balloon_div.css('height', h + 'px')
+          if ui.originalPosition.left != ui.position.left
+            l = speech_balloon_div.position().left + ui.position.left
+            $(trace_balloon + 'x').val(Math.floor(l))
+            speech_balloon_div.css('left', l.toString() + 'px')
+            speech_balloon_div.css('width', w + 'px')
+          $(trace_balloon + 'width').val(w)
+          $(trace_balloon + 'height').val(h)
+          speech_balloon_div.css('width', w.toString() + 'px')
+          speech_balloon_div.css('height', h.toString() + 'px')
+       resize: ( event, ui ) ->
+          resize_div = $(@)
+          speech_balloon_div = resize_div.parent()
+          balloon = $('.pettanr-balloon', $(@))
+          trace = editor.element_tag_id(speech_balloon_div)
+          trace_balloon = editor.element_part_tag_id(balloon)
+        handles: 'all',
+        autoHide: true
+      }
+    
+    $('.pettanr-comic-speech-inner' ).map ->
+      $(@).mouseover -> 
+        outer = $(@).parent()
+        sb = outer.parent()
+        trace = editor.element_tag_id(sb)
+        img = $('.pettanr-balloon', $(trace))
+        $('.ui-resizable-handle', img.parent()).map ->
+          $(@).css('display', 'block')
+      $(@).mouseout -> 
+        outer = $(@).parent()
+        sb = outer.parent()
+        trace = editor.element_tag_id(sb)
+        img = $('.pettanr-balloon', $(trace))
+        $('.ui-resizable-handle', img.parent()).map ->
+          $(@).css('display', 'none')
+          
+    
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        $(@).focusout ->
+          switch $(@).attr('column')
+            when 'x'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('left', v)
+            when 'y'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val()).toString() + 'px'
+              $(trace).css('top', v)
+            when 'width'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).width(Math.abs(v))
+              img = $('.pettanr-balloon', $(trace))
+              img.parent().width(v)
+              img.width(v)
+            when 'height'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).height(Math.abs(v))
+              img = $('.pettanr-balloon', $(trace))
+              img.parent().height(v)
+              img.height(v)
+            else
+      else
+    $('textarea').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        $(@).focusout ->
+          switch $(@).attr('column')
+            when 'content'
+              trace = editor.element_part_tag_id($(@))
+              wf_sel = $(trace + 'writing_format_id')
+              wf_id = parseInt(wf_sel.val())
+              v = WritingFormat.render(wf_id, $(@).val())
+              $(trace).html(v)
+    $('textarea').map  ->
+      if editor.element_is('speech_balloon', $(@))
         switch $(@).attr('column')
           when 'content'
-            trace = element_tag_id($(@))
-            speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')
-            v = escapeHTML($(@).val())
-            $(speech_trace).html(v)
-  
-  # ground-picture
-  # sync view 
-  $('input').map  ->
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'
-      $(@).focusout ->
+            $(@).bind('textchange', (event, previousText) ->
+              trace = editor.element_part_tag_id($(@))
+              wf_sel = $(trace + 'writing_format_id')
+              wf_id = parseInt(wf_sel.val())
+              v = WritingFormat.render(wf_id, $(@).val())
+              $(trace).html(v)
+            )
+    $('select').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        $(@).change ->
+          switch $(@).attr('column')
+            when 'font_size'
+              trace = editor.element_part_tag_id($(@))
+              $(trace).css('font-size', $(@).val() + 'em')
+            when 'text_align'
+              trace = editor.element_part_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).css('text-align', editor.text_align_texts[v])
+      else
+    $('input').map  ->
+      if editor.element_is('speech_balloon', $(@))
+        if $(@).attr('column') == 'fore_color'
+          $(@).hide()
+
+    
+    # ground-picture
+    refresh_ground_picture = (element_trace)  ->
+      x = parseInt($(element_trace + 'x').val()).toString() + 'px'
+      y = parseInt($(element_trace + 'y').val()).toString() + 'px'
+      $(element_trace).css('background-position', x + ' ' + y)
+    
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('ground_picture', $(@))
         switch $(@).attr('column')
           when 'x', 'y'
-            trace = element_tag_id($(@))
-            x = parseInt($(@).val()).toString() + 'px'
-            ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'
-            y = parseInt($(ytrace).val()).toString() + 'px'
-            $(trace).css('background-position', y + ' ' + x)
-  $('select').map  ->
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'
-      $(@).change ->
-        switch $(@).attr('column')
-          when 'repeat'
-            trace = element_tag_id($(@))
-            v = parseInt($(@).val())
-            $(trace).css('background-repeat', repeat_texts[v])
-    else
-  
-  
-  # ground_color
-  # sync view 
-  $('input').map  ->
-    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'
-      $(@).hide()
-
-  color_slider_change = (trace) -> 
-    red = $(trace + 'code_red').slider('value')
-    green = $(trace + 'code_green').slider('value')
-    blue = $(trace + 'code_blue').slider('value')
-    code = (red << 16) + (green << 8) + (blue)
-    phex = "000000" + code.toString(16)
-    hex = code.toString(16)
-    h = phex.substring(phex.length - 6)
-    $(trace + 'code_swatch').css('background-color', '#' + h)
-    $(trace + 'code_hex').html('HEX: #' + h)
-    $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')
-    $(trace + 'code').val(code)
-    v = '#' + h
-    $(trace).css('background-color', v)
-  
-  $('.colorpicker').map -> 
-    code_picker_trace = element_tag_id($(@))
-    code = parseInt($(code_picker_trace + 'code').val())
-    red = (code >> 16) & 0xFF
-    green = (code >> 8) & 0xFF
-    blue = code & 0xFF
-    $(code_picker_trace + 'code_red').slider {
-      orientation: 'horizontal',
-      range: 'min',
-      max: 255,
-      value: red,
-      change: ( event, ui ) ->
-        trace = element_tag_id($(@).parent())
-        color_slider_change(trace)
-    }
-    $(code_picker_trace + 'code_green').slider {
-      orientation: 'horizontal',
-      range: 'min',
-      max: 255,
-      value: green,
-      change: ( event, ui ) ->
-        trace = element_tag_id($(@).parent())
-        color_slider_change(trace)
-    }
-    $(code_picker_trace + 'code_blue').slider {
-      orientation: 'horizontal',
-      range: 'min',
-      max: 255,
-      value: blue,
-      change: ( event, ui ) ->
-        trace = element_tag_id($(@).parent())
-        color_slider_change(trace)
-    }
-    color_slider_change(code_picker_trace)
-  $('.colorpicker-wrap').map -> 
-    $(@).css('display', 'block')
-  
-  update_t = (ultrace) -> 
-    t = 0
-    $(ultrace + ' li').map ->
-      trace = element_tag_id($(@))
-      if $(trace + '_destroy').val().length < 1
-        $(trace + 't').val(t)
-        t++
+            $(@).focusout ->
+              trace = editor.element_tag_id($(@))
+              refresh_ground_picture(trace)
+            $(@).spinner {
+              stop: ( event, ui ) ->
+                trace = editor.element_tag_id($(@))
+                refresh_ground_picture(trace)
+            }
+    $('select').map  ->
+      if editor.element_is('ground_picture', $(@))
+        $(@).change ->
+          switch $(@).attr('column')
+            when 'repeat'
+              trace = editor.element_tag_id($(@))
+              v = parseInt($(@).val())
+              $(trace).css('background-repeat', editor.repeat_texts[v])
       else
-  
-  $('.tsort').map -> 
-    $(@).sortable {
-      update: ( event, ui ) ->
-        trace = panel_tag_id($(@))
-        update_t(trace + 'tsort')
-    }
-  $('.t-sort li').map -> 
-    $(@).disableSelection()
-  
-  update_z = (ultrace) -> 
-    z = 1
-    $(ultrace + ' li').map ->
-      trace = element_tag_id($(@))
-      # update panel
-      if $(trace + '_destroy').val().length < 1
-        $(trace + 'z').val(z)
-        switch $(@).attr('element_type')
-          when 'panel_picture'
-            trace = trace + 'div'
-        $(trace).css('zIndex', z)
-        z++
+    
+    
+    # ground_color
+    ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')
+    
+    refresh_ground_color = (element_trace)  ->
+      orientation = parseInt( $(element_trace + 'orientation').val() )
+      xy = $(element_trace + 'xy').val()
+      wh = $(element_trace + 'wh').val()
+      div_offset = if xy
+        xy
       else
-  
-  $('.zsort').map -> 
-    $(@).sortable {
-      update: ( event, ui ) ->
-        trace = panel_tag_id($(@))
-        update_z(trace + 'zsort')
-    }
-  $('.z-sort li').map -> 
-    $(@).disableSelection()
-  
-  $('.panel_picture_width_tool').map ->
-    $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')
-  
-  $('.wreverse').click -> 
-    d = $(@).parent()
-    trace = element_tag_id(d)
-    f = $(trace + 'width')
-    w = -f.val()
-    f.val(w)
-    f = $(trace + 'height')
-    h = f.val()
-    refresh_picture($(trace + 'img'), w, h)
-  
-  $('.wdouble').click -> 
-    d = $(@).parent()
-    trace = element_tag_id(d)
-    f = $(trace + 'width')
-    w = f.val() * 2
-    f.val(w)
-    $(trace + 'img').width(Math.abs(w))
-    $(trace + 'img').parent().width(Math.abs(w))
-  
-  $('.whalf').click -> 
-    d = $(@).parent()
-    trace = element_tag_id(d)
-    f = $(trace + 'width')
-    w = Math.floor(f.val() / 2)
-    f.val(w)
-    $(trace + 'img').width(Math.abs(w))
-    $(trace + 'img').parent().width(Math.abs(w))
-  
-  $('.panel_picture_height_tool').map ->
-    $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')
-  
-  $('.hreverse').click -> 
-    d = $(@).parent()
-    trace = element_tag_id(d)
-    f = $(trace + 'height')
-    h = -f.val()
-    f.val(h)
-    f = $(trace + 'width')
-    w = f.val()
-    refresh_picture($(trace + 'img'), w, h)
-  
-  $('.hdouble').click -> 
-    d = $(@).parent()
-    trace = element_tag_id(d)
-    f = $(trace + 'height')
-    h = f.val() * 2
-    f.val(h)
-    $(trace + 'img').height(Math.abs(h))
-    $(trace + 'img').parent().height(Math.abs(h))
-  
-  $('.hhalf').click -> 
-    d = $(@).parent()
-    trace = element_tag_id(d)
-    f = $(trace + 'height')
-    h = Math.floor(f.val() / 2)
-    f.val(h)
-    $(trace + 'img').height(Math.abs(h))
-    $(trace + 'img').parent().height(Math.abs(h))
-  
-  # all
-  # disable form actions
-  # hide submit buttons
-  $('.edit_panel_picture' ).map ->
-    $(@).submit ->
-      false
-  $('.edit_speech_balloon' ).map ->
-    $(@).submit ->
-      false
-  $('.edit_ground_picture' ).map ->
-    $(@).submit ->
-      false
-  $('.edit_ground_color' ).map ->
-    $(@).submit ->
-      false
-  
-  $('.edit_panel' ).map ->
-    if $(@).attr('jqform')
-    else
+        0
+      div_size = if wh
+        wh
+      else
+        100 - div_offset
+      div_x = if orientation == 0
+        0
+      else
+        div_offset
+      div_y = if orientation == 0
+        div_offset
+      else
+        0
+      div_width = if orientation == 0
+        100
+      else
+        div_size
+      div_height = if orientation == 0
+        div_size
+      else
+        100
+      div = $(element_trace)
+      div.css('left', div_x.toString() + '%')
+      div.css('top', div_y.toString() + '%')
+      div.css('width', div_width.toString() + '%')
+      div.css('height', div_height.toString() + '%')
+    
+    # sync view 
+    $('input').map  ->
+      if editor.element_is('ground_color', $(@))
+        switch $(@).attr('column')
+          when 'code'
+            $(@).hide()
+          when 'xy', 'wh'
+            $(@).spinner {
+              stop: ( event, ui ) ->
+                trace = editor.element_tag_id($(@))
+                refresh_ground_color(trace)
+              , min: 0
+              , max: 100
+            }
+            $(@).focusout ->
+              trace = editor.element_tag_id($(@))
+              refresh_ground_color(trace)
+    
+    $('select').map  ->
+      if editor.element_is('ground_color', $(@))
+        switch $(@).attr('column')
+          when 'orientation'
+            $(@).change ->
+              trace = editor.element_tag_id($(@))
+              refresh_ground_color(trace)
+
+    update_t = (ultrace) -> 
+      t = 0
+      $(ultrace + ' li').map ->
+        trace = editor.element_tag_id($(@))
+        if $(trace + '_destroy').val().length < 1
+          $(trace + 't').val(t)
+          t++
+        else
+    
+    $('.tsort').map -> 
+      $(@).sortable {
+        update: ( event, ui ) ->
+          trace = editor.panel_tag_id($(@))
+          update_t(trace + 'tsort')
+      }
+    $('.t-sort li').map -> 
+      $(@).disableSelection()
+    
+    update_z = (ultrace) -> 
+      z = 1
+      $(ultrace + ' li').map ->
+        trace = editor.element_tag_id($(@))
+        # update panel
+        if $(trace + '_destroy').val().length < 1
+          $(trace + 'z').val(z)
+          switch $(@).attr('element_type')
+            when 'panel_picture'
+              trace = trace + 'div'
+          $(trace).css('zIndex', z)
+          z++
+        else
+    
+    $('.zsort').map -> 
+      $(@).sortable {
+        update: ( event, ui ) ->
+          trace = editor.panel_tag_id($(@))
+          update_z(trace + 'zsort')
+      }
+    $('.z-sort li').map -> 
+      $(@).disableSelection()
+    
+    # all
+    # disable form actions
+    # hide submit buttons
+    $('.edit_panel_picture' ).map ->
       $(@).submit ->
         false
-  
-  $('.submit' ).map ->
-    $(@).hide()
-  
-  # disable form z t
-  $('input').map  ->
-    if $(@).attr('element_type') and $(@).attr('column')
-      switch $(@).attr('column')
-        when 'z' , 't'
-          $(@).hide()
-          $(@).parent().hide() #label
-  
+    $('.edit_speech_balloon' ).map ->
+      $(@).submit ->
+        false
+    $('.edit_ground_picture' ).map ->
+      $(@).submit ->
+        false
+    $('.edit_ground_color' ).map ->
+      $(@).submit ->
+        false
+    
+    $('.edit_panel' ).map ->
+      if $(@).attr('jqform')
+        $(@).submit ->
+          if validate_forms()
+            true
+          else
+            false
+      else
+        $(@).submit ->
+          false
+    
+    $('.submit' ).map ->
+      $(@).hide()
+    
+    # disable form z t
+    $('input').map  ->
+      if editor.is_element($(@))
+        switch $(@).attr('column')
+          when 'z' , 't'
+            $(@).hide()
+            $(@).parent().hide() #label
+    
+    # add button on new form
+    $('.submit-new-form').map ->
+      $(@).html('<button class="new-element">add</button>')
+    
+    $('.new-element').map ->
+      $(@).click -> 
+        false
+    j = JSON.stringify(window.configurations)
+    $('#pettanr-configurations').val(j)
+