$ ->
  confirm_confirm_confirm = () ->
    confirm(  )
  new_element_index = {}
  new_element_index[pettanr_current_panel_id] = 0
  
  escapeHTML = (t) ->
    $("<div/>").text(t).html()

  set_tree_value = (keys, last_attr, value) ->
    key = keys.shift()
    if keys.length <= 0
      last_attr[key] = value
    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
    else
      return false
  is_var = (o) ->
    if parseInt(o.attr('no_attr')) > 0
      return false
    else
      if o.attr('column') 
        if o.attr('column') == '_destroy' and o.val().length < 1
          return false
        else
          return true
      else
        return false
  is_element = (o) ->
    if o.attr('element_type')
      return true
    else
      return false
  is_element_part = (o) ->
    if o.attr('element_part_type')
      return true
    else
      return false
  element_types  = {'panel_picture': 'panel_pictures', 'speech_balloon': 'speech_balloons', 'ground_picture': 'ground_pictures', 'ground_color': 'ground_colors'}
  element_type_to_table = (element_type) ->
    element_types[element_type]
  make_tree = (attr, o) ->
    if is_var(o)
      tree = 'panels-' + o.attr('panel_id') + '-'
      if is_element(o)
        tree = tree + element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'
        if is_element_part(o)
          tree = tree + o.attr('element_part_type') + '_attributes-'
      tree = tree + o.attr('column')
      keys = tree.split('-')
      set_tree_value(keys, attr, o.val())
  
  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 ->
      make_tree(attr, $(@))
    $('textarea').map  ->
      make_tree(attr, $(@))
    $('select').map ->
      make_tree(attr, $(@))
    $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))
  
  $('#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 = element_tag_id($(@)) 
          t = $('img', $(trace))
        when 'panel_picture'
          trace = 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 = element_tag_id($(@)) 
          t = $('img', $(trace))
        when 'panel_picture'
          trace = 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 = 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')
        switch $(@).attr('element_type')
          when 'panel_picture'
            trace = trace + 'div'
        $(trace).css('display', 'none')
        
  
  $('#pettanr-panel-submit').focusin ->
    refresh_attribute()
  
  # panel
  $('.pettanr-comic-panel').map ->
    if is_editable($(@))
      $(@).resizable {
        stop: ( event, ui ) ->
          trace = 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 
  $('#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 ->
        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)
  $('textarea').map  ->
    if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
      switch $(@).attr('column')
        when 'content'
          $(@).bind('textchange', (event, previousText) ->
            trace = element_tag_id($(@))
            wf_sel = $(trace + 'writing_format_id')
            wf_id = parseInt(wf_sel.val())
            speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')
            fn = writing_formats[wf_id].toString() + '_render()'
            confirm(fn )
#            f = new Function("return " + fn)
#            f()
            v = escapeHTML($(@).val())
            $(speech_trace).html(v)
          )

  
  # ground-picture
  # sync view 
  $('input').map  ->
    if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'
      $(@).focusout ->
        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++
      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++
      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
      $(@).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
  
  # add button on new form
  $('.submit-new-form').map ->
    $(@).html('<button class="new-element">add</button>')
  
  $('.new-element').map ->
    $(@).click -> 
      false