$ ->
  #filer = new Filer('tt', ['ea','eb','ec'])
  #view = new FilerView( { filer: filer } )
  confirm_confirm_confirm = () ->
    confirm(  )
  editor = window.PettanrEditor
  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
  PopupHelper = window.PettanrPopupHelper
  
  #panel = new Panel
  #pp = new PanelPicture
  #pp.set_panel(panel)
  #confirm( PanelPicture.test()  )
  #confirm( pp.test() )
  find_configurations = ( hash, key) ->
    if typeof(hash[key]) == 'string'
      find_configurations(hash, hash[key])
    else
      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})
  
  display_panel = (panel, vis) ->
    v = if vis
      ''
    else
      'none'
    trace = editor.panel_tag_id(panel)
    $(trace).css('display', v)
  
  validate_panel = (form) ->
    valid = form.valid()
    bc = if valid
      ''
    else
      '#ef29ef'
    $('a', $('#tabs-1-tab')).map ->
      $(@).css('background-color', bc)
    display_panel(form, valid)
    valid
  
  display_element = (element, vis) ->
    trace = editor.element_tag_id(element)
    d = $(trace + '_destroy').val()
    v = if vis and d.length < 1
      ''
    else
      'none'
    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
          valid = false
    invalid_elements = []
    $('form', $('#tabs-2')).map  ->
      form_name = $(@).attr('data-form-name')
      if form_name
        if validate_element($(@))
        else
          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 = 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()
    PopupHelper.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 ) ->
          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)
        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 
    $('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'
            $(@).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'
            $(@).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
    
    
    # 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
        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
    $('.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